Preparing for a workshop with Kent C. Dodds

00:00 Hey folks, it's Kent and I am excited to take you on a tour of everything that you can expect for a KCD workshop. So we're talking about the Full Stack Workshop Series Volume 1. This has been sold out and I'm so excited about that. So if you are an attendee to this workshop you should have received an email with a calendar invitation, one for every one of the workshops. So please RSVP yes to that and keep an eye on the description of these events because this is where I'm going to communicate everything that you need to know about the workshop.

00:36 The link to this video will be in here as well. So please just read through all of this stuff. This is a really big ticket item to come to a KCD workshop. I expect you to take it seriously and to read through everything that I send you. I promise I will not waste your time and I only send you the things that you need to know.

00:55 So read through all this stuff, follow the instructions. I'm going to follow some of these instructions here to show you around a little bit. So as far as what you should do right now, review the prerequisites. So each one of these workshops is going to have a section in the readme for the prerequisites right here. So these are resources to things that you can go through to ramp up your experience level in these different areas to make sure that you're ready to go with these things.

01:23 So definitely review those. If you aren't strong or at least a little experienced with these things, then you're going to have a hard time on the workshop and it won't be as good for you. So try to review these. And then there's the setup. So we have the setup instructions right here.

01:42 So I'm gonna copy this and open up my terminal and I'm going to cd into, well here let's make a new directory called I don't know, workshops, there we go. Cd into workshops and then We'll paste this into there. You can put it in workshops, you can put it wherever you'd like. What this is going to do is it will clone the GitHub repo, change your directory into that repo, and then run the setup script. The setup script first verifies that your system has the right versions and everything and then it installs dependencies.

02:20 If it doesn't have the right versions, it'll tell you what's wrong. It will install dependencies. This will take a little bit of while or a little bit of time. And then it will run some custom setup for the workshop. Every workshop will be a little bit different.

02:33 In here, it's installing Playwright for some testing. That may require admin privileges, so if this fails, you may need to rerun it again with admin privileges or just provide your password. With that installed, it does this thing where it sets up the first problem app. We'll look at that in a bit. And then it verifies that everything's all set to go and we're set to go.

02:55 So, let's go ahead and open this up in our code editor. So, this, I recommend VS Code. It is my preferred editor. I suggest you use it also. But let's explore what this project looks like.

03:10 We've got our exercises directory, you will not be referencing this at all, I do not recommend that you spend any time in here, like feel free, you do whatever you want. I'm not your mom. But don't spend any time in the exercises directory. These are really just templates. They're the problem and solution version of each one of the steps of our exercises.

03:31 So you can look through this and reference it later, but you won't be working in this. Where you're going to be working is in the Playground directory. So as you're working through the app, we're gonna be copying, not manually, this is automated, but we'll be copying things from the templates and the exercises over to the Playground app. So you only ever have to worry about the Playground directory, everything else is just kind of there. And in fact, you might find it useful to open up a VS Code instance in the Playground.

04:01 And the benefit to opening up the playground as its own instance is now you can use command P to search by files by their name, that makes it a lot easier, whereas if you're over here and you say I want to find a file, you're going to have to deal with all the templates and stuff, and that just makes it a little bit difficult. On top of that, this is git ignored, so you won't be able to find anything in the Playground anyway. So I do recommend having a separate instance of your editor open and running in the Playground directory. You can close this instance of your editor. In any case, you are going to need to run a command from this root directory, and that command is npm run start or dev or npm start.

04:45 All of those will do the exact same thing. So npm start, that gets the app started. And so we're at port 3629, or 5639. And that is Cody. This is Cody the koala in T9.

05:00 So that takes you back maybe. So we'll pop that open in here. I'm actually gonna open it up in my other tab. Here we go. And so this, I'll just take you on a quick little tour of the KCD Shop app.

05:15 So here is just a little introduction to the app read through this and then we have our course our theme selection here so system, light mode, dark mode so we'll go with system and then we also have our selection over here where we can look at or our navigation where we can look at all the exercises. The Fullstack Foundations Workshop is a two-parter, so there's quite a few exercises in here. Each one of these has multiple steps that you're going to be working through. The playground equipment right there, that indicates where your playground is currently set to. So we're currently set to be working on this exercise, and as we navigate around these different exercises, you'll see that we have a couple of places that are flashing trying to get our attention.

05:59 They're just saying you're looking at a step that does not match up where your playground is currently set to. That is totally fine if you're just reviewing stuff, but if you want to actually work on this exercise, then you need to select set to playground. So you can click this, or you can click this, or we actually also have it down here as well. So wherever you click it, it will, what this will do is it will copy all of the stuff that is necessary for you to complete this step into your Playground, so you can just focus on the Playground. In fact, I'll move this over here.

06:30 And now if we look at our root.tsx we're going to have these instructions. If I go back to the first one, so here let's review, we've got import svg favicon here and then I hit set to playground and we come back here and that's gone and things are changed. So it is important to always make sure you click that set to playground every step that you go through to make sure that you're in the right place and that your instructions are up to date. So, and we don't do that automatically because it is sensible to go forward and backward in the navigation just to review different things. So, let's look at other parts of this app.

07:04 We have a couple of tabs here. We have the Playground tab. This allows you to preview what the app looks like in the Playground. This is where you'll spend most of your time. It's pretty simple from the very start.

07:15 We do have a URL bar in refresh and forward and back. It works fairly well, but if you really care about that, then I recommend you click on this, which will open up the app in a completely separate tab, and now you're just using a regular app. If you want to do anything with the network or the elements or sources or anything of the dev tools, I recommend that you run this in a separate app. But having a little preview here can be pretty useful if you're just testing some stuff out as you're working through things. You also have this option where you can click here and select which one of these exercise steps you want to set to the playground.

07:55 So we can actually skip ahead and say, hey, I wanna go to this problem and it will update your playground to that. And sometimes your server will crash when it does that because there are so many things that changed. So you had to hit refresh and that's fine. You just hit the refresh and now it's all ready to go there. And then of course you can change this back.

08:15 So here, let's go back to the problem that we're working on right now. You can stop the app at any time and then start it up again. Occasionally it can be useful to look at the problem and solution. So if you hit the problem and start this app this is what the the very beginning of this step of this exercise would look like. The solution is what the end result of what you're trying to work on for this step looks like.

08:40 So that could be kind of useful if you wanna compare. And then if you ever get totally stuck, then you can look at the diff and see what's the difference between my playground where I'm at right now and the solution that I'm working toward. You can actually change what you're diffing at any point in time if you want to. I don't recommend that you use this feature very much, but it's there for you if you are totally stuck and need some help. For all of these exercises, we have this files option down here that will show you all the files that are impacted and changed by this problem solution step in this exercise.

09:15 So you can click on this and it will actually open your editor to that file. If you've got the Playground open in its own version of the editor it will open in that version so that is awesome. It allows you to really quickly navigate around the different places where you're supposed to be working because what we're doing is building a full stack app that involves multiple files. And so we need a nice and easy way to navigate around those files. So this does that for us.

09:41 If there are multiple files that you're working in, like here, for example, then, here, let's see, maybe that one only had one file. Yeah, okay, so if you have multiple files, then you have this option to open all the files, but this only actually works when you have the playground set to the one that you're looking at. So make sure you always set to playground so that you're opening the files that you think you are. In the instructions you'll also find this little icon that will also open this file in your editor. So you can click on this and you'll see, oh okay, so here's that file.

10:15 We may not be working in this file, but it can be useful sometimes to reference that file occasionally if you so choose. So here we open up that file. Sometimes we create new files. So if we're looking at the routing, and we see our routes, In the routing section we're actually creating a bunch of new files and so you'll see in this section we have the little plus icon that's creating that file. If you click on this, this will actually create that file in your Playground automatically for you and a lot of times in the instructions we'll have this also And you can click that, it will create the file for you.

10:50 So on top of all of that, once we finish, the way that this works is I will actually introduce the exercise to you. We'll kind of go through this together a little bit, I might breeze over it a little and expect you to read through some of it. And then we'll hit start learning. Once we get to there, I stop talking and I let you go off into your groups. We'll look at what that experience looks like in a little bit.

11:16 And then you start working on it, either together or separately. And you work through this, to the end of this exercise, you make sure that things look the way that they're supposed to and behave the way you would expect, and then you hit the next arrow. And that will take you to the solution page, which will give you additional context and things for what you finished. And then you move on to the next step. This is step number two of exercise one.

11:42 So then you follow these instructions, work through this, and then you get to the solution page of step number two, read through that and then move on to step number three, and you continue until you hit this very last piece. So here, let's say we're on the last step, bundling CSS, we go to the next. We did it, hooray. Now, we have the exercise and elaboration feedback form. This is actually really important.

12:06 You don't actually have to fill out the form if you don't want to, but it's very important that you do take some time to write down what you learned. However, I don't want you to do this until after I have gone through the instruction. So once you get to this point, you just stop and you don't proceed any further and you wait until I call everybody back. Now it's very possible and possibly even likely that you will not finish the exercise before I tell everybody to come back or we're gonna work through it together. That is fine.

12:35 The objective of having you go through all this stuff before I actually teach it is to force you into a learning mode where it's opening your brain to the problems that we're trying to solve here. So it's okay if you don't finish the entire exercise before getting to this step and before I say, okay, now let's come together and work through it. So I'll work through every one of these steps and you can ask me questions as we go through it, and then I will give you time to work through the exercise and elaboration feedback form. So with that, then we move on to the next step. I'll walk through this with you and you're off to the races again.

13:14 Now a couple other useful bits of information throughout the exercise. Oh, also this is useful if you ever need to see the logs, which you do occasionally need to see the logs, then you can see all of these, all of the logs for your running server in the wherever you ran the dev script in that terminal. Okay, so another important aspect to the workshops are the emoji that you'll find down here. So here we have Cody the koala, you'll spend a lot of time with Cody and then Lily the life jacket, feel free to read through these. You'll find these emojis spread throughout everything as you're working through these exercises.

13:51 So it's useful to know what they mean. Okay, another thing that I failed to mention earlier is if clicking on one of those links doesn't actually launch your editor properly, there could be an error message or something. It's possible that us guessing what editor you're running is not working, we're guessing it wrong or something. And so you can configure that specifically by adding a .env file to the root of the repository and setting the kcd shop editor environment variable in here. Just note the fact that we have quotes and then we're quoting this inside of here because this is actually a command string.

14:28 So this could be code and then you know flag or whatever. So whatever you need to to get your editor running from the terminal, you just put in there as a command and it should open up just fine for you. If you have something like code in your path, you can just set it to that. And that's a little easier. So hopefully we guessed properly, but if we guess wrong, that's how you set that up.

14:53 Okay, so that's the workshop app. Once we get to the very, very end of the workshop, then I recommend you go to this workshop feedback form where you will answer questions. This is feedback for me, I appreciate it, but it's not, the other elaboration and feedback steps are important for your learning. This step is just important for me and giving me feedback so that I can make this as awesome as possible. And that is the KCD Workshop app.

15:22 I hope that that is a nice overview for you and that you really enjoy using it. All right, so let's talk about some other things that we need to do. We also need to join the discord. So if I go to discord.com and I log in then here we log in as my Kodi And then I can come into the KCD channel, come on, KCD server. And where I'm going to be looking is in, actually, we've got a link straight to it, right here, this thread.

16:02 So I'm gonna copy that and go here. And that will take us straight to the thread where we're gonna be talking and everything. Hi, I'm Cody and I want you to have an awesome workshop. There we go. Okay so this is just where we're going to be doing all of our chat during the workshops.

16:27 There is built-in chat to the gather which we'll look at here in a second, but the problem is it's difficult for you to Go back there in the future if you want to reference some link or something because you only have access During the workshop time and so we'll be doing all of our chat in discord. And this is also useful for when you're in different places in Gather to make sure that everybody sees everything. So you do need to join here. You can either join this thread by sending a message like this, or you can right click on this and say join thread. If you haven't joined it already, you'll say join thread.

17:04 And that way it'll show up in here and maybe just bookmark this for the time period that we're going through the workshops. Okay, so the next thing that we need to, oh, And actually another point on that, if you have not joined the Discord yet, then you'll need to do so by going to my website. And I should probably remove that because we sold out. Clicking right here, entering your email address that should send you an email, you click a link and then you get to log in. And I don't want to log in right now.

17:35 So we'll just go, well here, me plus Cody at kentcdodds.com. But I do want to show you this. Once that login link shows up in your inbox, then you can click it, it'll pop up over here and you'll be in your profile page. In here, you'll have this Discord section and if you haven't joined the Discord yet, then there will be a connect to Discord button or link that you can click there that will open up the Discord OAuth page, you say authorize, and then it will add you to the server and you will have full access to the server. So if you haven't joined the Discord server yet, then you need to do it that way.

18:15 All right, so we have Discord, we have the workshop set up locally, it's all working properly. Now let's talk about Gather. So Gather is a really awesome app that feels like a video game, but actually is really just a great way to connect with people and have a more realistic workshop experience. So people use it for their virtual office and things. We're gonna use it for our virtual workshop.

18:44 So I'm gonna sign in. Oh, I'm in the wrong browser tab. So here, let's go to gather.town. And now it's going to warn us that Brave, I'm using Brave, has some known issues. So recommending Chrome or Firefox, I recommend Chrome.

19:01 But actually what I recommend even more is to download the app. So let's go to gather app download and gather town app download, good grief, gather town app download, and then you can go download gather. So I recommend downloading gather, but you need to join the space first before the space will show up in your local app. So I'll say, I understand, I wish to proceed, and it will let me join. Now, let me actually show you what this will look like if you don't have access yet, because it's possible that you will not.

19:41 So let me do that. Oh, I just lost access. There we go. Okay, so I understand. Let's proceed.

19:46 This is what it's going to look like. If you see this, then it tells you to email me. Yes, email me, tell me I signed up with Gather with a different email or something like that. Here's the email that I used to purchase the workshops and here's the email that I'm using with gather and I will fix that for you. So let me fix that right now by adding me plus Cody at Kent C.com and see add guest.

20:15 There we go. Okay, great. So now if I refresh, I should have access and I can join. Okay, and now let me give you a tour of this wonderful, awesome place. So this is our KCD workshop gather space.

20:35 The, it's supposed to resemble a intergalactic workshop area an epic workshop area, area. And yeah, all constructed with Mid Journey which is pretty cool. So you're the, I'm the only one in here right now, and so I'm walking around by myself, but I wanna demonstrate what this experience is like with another person. So if I go to my app, so here's the app running locally. Now I can walk around and we can talk to each other.

21:10 Hello. And so when you stand close by another person, then you can hear each other talking. So if I walk away, then Kent C.Dodds can no longer hear Cody or see Cody's video feed. You also have your settings down here you can change your character the character is going to be different in every space, I believe. So you will have to set it here.

21:35 But yeah, you can also, at any point, if you ever get lost, you can hit Respawn and that will stick you in the same spot where you showed up in the first place. And then You also have the ability to change the status. So I'm happy to be here and learn. And let's add Cody the Koala right there, right there. Okay, and you can also control this.

21:59 You can pin it so you can see yourself if you want to, you can make it big. And then you also have the menu where you can go and look at settings. And there's some things you can do to improve it if it's going kind of slow for you or something like that. In particular, how much you zoom will speed things up for you quite a bit. If you find that to be an issue, that's one way that you can kind of solve that problem.

22:25 So take a look at all of these options. These can be really useful for you. And also the keyboard shortcuts can be really useful. So Funfetti and Ghost Mode and Dance and Raise Hand, all of these things could be really useful for us in our workshop, especially the Funfetti. That is just the best, and Dancing.

22:45 That's just awesome. So anyway, that is the idea as far as some of that is concerned. You can also share your screen if you're working together as a team and you have a question or want to share something with each other, go ahead and feel free to share your screen. And you can even customize the emoji down here if you want to. So another aspect of all of this is I will be standing in the front.

23:14 So if I come up here and stand in front of my desk, now everybody in the room can hear me. So no matter where I am in the room, I can hear Kent and that will allow me to make sure that, yeah, I can hear the instruction and everything. So that is important for you to know. If you ever step inside of here, now the entire room can hear you. So this area is where you're broadcasting to everybody.

23:43 This is actually very good and intentional. So if you have a question, then you need to walk up to my desk and ask me here. So that way everybody else can hear the question and then I can answer. So during the workshop that's where if you have any questions when I say, hey does anybody have any questions, You need to walk up to ask those questions. And another thing during the exercises, I will go and stand in the middle of the room.

24:12 So while you're working through the exercise, you'll be sitting at your desk and you say, oh, I'm not sure about this, I have a question. You just come into the middle of the room and ask me the question and then go right back to your private space. And so I'll be standing in the middle of the room. If I need to go take a bathroom break or something, which does happen sometimes during exercises, I will come up to the captain's chair and I will sit in here and I may not be available. So you can for sure come up and talk to me and try to get me to respond, but I may not be available to answer.

24:47 And I will try my best to enable quiet mode as well so that I can kind of communicate that I am unavailable there. But yeah, most of the time I am definitely available. Okay, so other things that are important for you to know. You're not assigned seating, you sit anywhere you like if you wanna sit with people or if you wanna sit by yourself. Each one of these chairs puts you in a private space where nobody around you can hear you and You can't hear anybody else unless they're standing in the broadcast space up here.

25:20 And then during breaks, I actually invite you to please get up and move around. But like during the lunch break or something, if you want to, it's an extended break there, you can explore. So let's go ahead and explore a little bit. We'll go to the lounge. So this area, it's blocked off so you don't go in here accidentally, but this is how you get out of the workshop area.

25:45 Step onto the portal. So this is the lounge. You can walk around, do whatever. It's just kind of a fun place to walk around. We do have these tables that you can sit and chat and visit with other people.

25:59 And then we also have some tables that have games that you can play. You press the X button and that will pull up the game and then we can create a new game and play set, which is kind of fun. And you can get out of here and go play another game. Even in here, we have these broadcast squares. So you can talk to everybody in the room.

26:23 I will probably use this if I need to come and be like, all right, everybody, we're going back to the workshop, let's go. And so then we can go back to the workshop over here. And then you'll appear in the middle and you can go back to your seat wherever you're sitting. So let's go back here to the lounge. Let's also go to the track.

26:41 So there is one other place where you can go and that is the track. This is a legitimate race track that you can hop on one of these go-karts You hit the X key and then you can ride around like a maniac all over the place So this if we want to do a real race Then you come up here to the the top here and you can go onto the track. You can't get onto the track any other way. So we'll go onto the track and then we can wait our turn or count down and say, three, two, one, go, and then go around the track following the arrows and being careful to avoid the distraction or the obstacles. And once you finish all the way around the track, you say you win and everybody's excited.

27:29 To get Off the track, we have this area right here, and then that sticks us over here, and then we're going to leave our go-kart here. Please don't take it anywhere else. I mean, you can take it wherever you want, but don't ride around in the workshop area. Okay, so then of course, another place where we can talk to everybody in the room if we want to. And you can leave the, go back to the lounge this way.

27:54 Or if you want to go straight to the workshop area, then you can come down here and click respawn and that will take us right to the workshop. Another thing that I failed to mention is a much easier way to navigate around is by double tapping where you want to go. So you can double tap anywhere and your character will take the most direct route to get there. Even in the go-kart place, if you're like, how do I get onto the track? It will know that it needs to go to this portal to get to that spot.

28:28 So if you're ever lost or you're trying to get somewhere, you can just double tap somewhere and it will take you just right there. Okay, another thing that is important for you to know about this is when I'm sharing my screen, the view changes a little bit. So let me share, here, we'll just share this screen here. Okay, oh and I need to move to the broadcasting. So here I am, I'm broadcasting.

28:57 Oh, and I am now sharing my screen. Okay, and now here's what my view looks like. I normally will change my view to the carousel view so that I can see everybody who's in here. For you, I recommend that you're just sitting at your desk. Here, let's have you go sit at your desk.

29:17 And then I recommend that you do the, well, here, we're gonna click on this. This view, so you click on the video that you want to have big. You can click on this one if you want to, or click on this one. But yeah, you can click on this view. This actually is more than just a video viewer.

29:38 You can actually also click on this and tap on different areas of the screen. And I will see, other people will see that in their viewfinder. This possible that I won't see it, but if you need to point out something, you just say, hey Kent, can I point out something? And then I'll pull it up on my screen. And then you can say, I'm just confused about this.

29:56 And then I can see that on my screen, which can be Kind of nice. Please don't abuse that and distract people. But yeah, so I like, if I'm working, where'd that terminal go? Here we go. So here you can see echo, hello world.

30:16 And there it is. You can see my output there. And then another thing that you can do is change the volume of my output from my screen. You can actually also change and mute the volume. Well, that's myself.

30:34 So you can mute and change the volume of different users in the space. So if there's a user who's like chewing on potato chips and they forgot to mute themselves, you can nicely ask them to mute themselves. Or you can just change their volume for yourself and nobody's bothered. If you need to ask questions, so say, oh, I have a question about this. Remember, you have to move your avatar to the front of the class.

30:59 And So you're going to click on this, go to carousel view, or you can just hit escape and that will take you to carousel view. And then you can move up here and ask your question and say, okay, great, thanks. And then come back here. And of course you can come up here and then click on this and then ask your question and then you can hit escape and get your way out of there. So just a couple of tips for that as we're working through the workshops.

31:25 I know that this video is a little bit long, so thank you for taking the time to watch all of it. It's really important that you have a good understanding of how to use this, these tools, so that you can have the most effective time for these workshops possible. So thank you for taking the time. I will also mention that you are welcome to come into this room at any time to play those games or ride around the racetrack or whatever you want. Feel free to join the room at any time.

31:53 Also feel free to make poll requests to the the Fullstack Foundations workshop exercise material. So that's at epicwebdevfullstackfoundations or any of the other workshops. Feel free to make pull requests and make improvements and leave me feedback. All of that is very much appreciated. And with that I think that we're ready to go.

32:17 So thank you so much for taking some time to watch this. And please join the gather as soon as you can so you can play around with it and get used to it so you can have as awesome an experience as possible. And make sure that the workshop itself sets up properly on your machine. With all that, thank you and we'll see you in the workshops. Bye.