Course Setup

[00:00:00]
>> So I'm hoping that you have basic skills with the terminal and Git. So those are things we're just be kind of assuming you have. And then a solid foundation with HTML, CSS and JavaScript. Again, you need to be a master at any of them, but as long as you know the basic syntax and how it basically works you should be good to go.

[00:00:14]
And then basic knowledge of Vue 2, it said Vue 3 here but Vue 2, Vue 3, will be good enough. We'll be covering Vue 3 basically functionality as we go, and providing a brief overview. So we won't be diving in-depth, but hopefully should be enough to catch people up.

[00:00:27]
And then as people have more questions, I'm happy to answer those during the coding exercise and whatnot. As far as tooling goes, again, just to make sure everything is on the list. Having Git it's really important because if you haven't checked already inside the chat, there's the official repo for the workshop.

[00:00:42]
And so throughout the workshop I'll be pushing up different branches so that you can basically jump in at a certain point if you feel like you're getting lost, and so knowledge of Git will be key. The LTS version of node would be appreciated for you to download and update cuz that'll basically help with the tooling for Nuxt, cuz you're using basically the latest version of node.

[00:01:02]
And then we're using VS code, and so for those using VS code, there are two particular extensions I highly recommend. The first is Volar. And so Volar is like the feature of Vue 2, where it allows you to do the syntax highlighting. But then on top of that, it adds the type checking and all that stuff.

[00:01:20]
And this is even if you're not using TypeScript, it'll still do all this for you. So Volar is key. And then Text Pastry is an extension that I highly recommend people have during workshops, because it's really great at generating lists of data. And so just to demo that real quick, so I'm gonna create a new file here.

[00:01:36]
So sometimes when we need to create mock data, you might need to say, I wanna create, let's say four objects, right? So you might be like, okay, here, I'll create empty bracket one, two, three, four. And then you need like a custom ID, right? And so normally what a lot of us do is we'll go come in here, and we'll just fake the data.

[00:01:53]
Will be like ID and then with Text Pastry, one of the things I can do is I can do a numbers. And be like ID 0123. Which is in itself, that's helpful, right? If you can do incremental numbers like that. But what it can also help you do actually it's gonna also help you generate some UUIDs as well.

[00:02:08]
And that's super great for just faking some data and making sure things work. Because if anyone has built with any client side frameworks enough, you'll probably have had the experience where you accidentally got lazy with labeling the key on an element. And then when you're doing a transition or some sort of animation, things started getting jumbled, because this key conflicted with another key.

[00:02:26]
And so just having a nice way to easily generate UUIDs is super helpful that I found. So, Text Pastry is the VS code extension for that. And finally, like any good framework there are Vue DevTools. So I believe it's for most of the major browsers, so I'll be using the one in Chrome.

[00:02:43]
But the link that you see inside of the resource is to the GitHub repo, and I think it should link out to all the different browser extensions depending on whatever you use. So yeah, hopefully that helps to get you started.