Setup and Logistics for KCD Workshops

Instructor: [00:00] For the typical Kent C. Dodds workshop, this is what it's going to look like. You'll be given a repo that has all the information that you need as well as the exercises.

[00:09] The first thing that you're going to do is you'll scroll down here to look at the pre-workshop instructions and requirements. Make sure that you follow these. The more prepared you are for the workshop, the better it will go for you.

[00:22] Here we also have a workshop outline of the things we're going to be learning and then the system requirements. The system requirements actually don't matter for you if you do this on the CodeSandbox version, so we're going to look at that first.

[00:36] If you click on that, then it will pop open CodeSanbox. In CodeSanbox it actually pulls up the whole repository, all of the contents of the repository in this browser-based editor. It's basically VS Code in the browser, very, very cool. It renders out our app on the right here and we even get to see our tests all running right in the browser, which is pretty cool.

[01:04] In CodeSandbox things are actually pretty easy. You even have your console. You can pop this open in a new window if you want to be able to see the whole thing. As you make changes in here, it will sync those changes in that new window.

[01:17] As soon as you make a change and hit the save key, it's going to fork, so I'll just fork that here. You click on that and it will make your own copy of the repository in CodeSanbox here. Now you can make changes and it will save that and you will always be able to go to this URL. Even if you refresh, it will have all of your changes saved at that particular URL.

[01:40] You can even share this with other people if you get stuck and they can come in and help you out. In fact, you can even turn on this live feature and it will create a live session for you where you can copy this URL. Now you have a Google Docs-like experience in CodeSandbox, which is pretty cool.

[02:00] Another thing that's kind of important in all of the CodeSandbox realm of things is being able to interact with the application, so we're going to take a look at that. For this particular workshop, if you go into this exercises folder you're going to find some HTML files in here.

[02:20] For these, they don't run directly in CodeSanbox, so you're going to need to open up a CodePen and you'll just copy all of the contents of that HTML, you'll stick it in the CodePen and then you can work through it right here in the CodePen.

[02:36] That's just this workshop and just a couple of the exercises. Or you could also just pull this down and open up the HTML file in a browser locally if that's how you prefer to do that. Most of the workshop material you're able to do right in CodeSandbox and make all of your changes right here, which works out really nicely.

[02:57] Here as far as the app is concerned, if we take a look at that you can click on each one of these it's going to show you the exercise and the final version. You'll interact with the final version and make sure that your exercise version ends up looking and behaving the same way.

[03:12] Sometimes there will be logs to the console that the final version does that you need to make sure your version does as well, so you'll need to take a look at that. When we're ready to move on to the next exercise, you can click on this button here. Each one of those is going to take you to that next exercise.

[03:32] That's basically how the app works. For each one of these you can actually also click on the exercise and you get just the exercise by itself, or you can go back to the exercises page and look at the final version. On each one of these pages you'll have an isolated link that you can click on and it will take you to isolated example of that particular exercise or that particular component.

[03:58] What's nice about this is if we open that up and then open our developer tools and you look at your React developer tools, then it literally is just a couple of components in and that's the component that you're working with. It might be a little bit easier with regard to your developer tools if that's the way you want to do that is look at the isolated example.

[04:24] That's pretty much everything that you need to know about the app. As far as the tests are concerned, those should all run and pass in React CodeSandbox. You can look at individual ones by clicking on those and then it will say the tests that are actually running.

[04:40] When you start everything up, the tests are running on the final version. For each individual exercise you'll want to go in to the test directory, click on the test you're interested in, comment out the final version, and comment in the exercise version.

[04:57] Then you'll be good to go to see the tests failing and you can go ahead and make the changes to your exercise to make those tests pass. It's just another little hint that will tell you exactly what you need to be doing to finish the exercise properly in addition to being able to look at the browser rendered version of our exercises.

[05:19] That's pretty much everything for CodeSandbox. If you are doing the local version of the workshop, that's totally fine as well. With that you do need the system requirements. Git at least version two or greater and Node version eight or greater and Yarn version one or greater or NPM, but Yarn is preferable.

[05:44] You can check all of those. If you're having any trouble, then there's some troubleshooting steps for those things. If you're not using CodeSandbox, then you can just copy this. That's what we're going to do right now.

[05:56] Let's go here in my terminal and I'm just going to paste that which I copied. We just cloned the React fundamentals workshop. We changed directory into that directory and now we're going to run the setup script.

[06:11] The setup script is going to validate that you have the correct version of everything and then it installs all the dependencies. Once it finishes installing the dependencies, then it goes ahead and runs the validation script to make sure that things are set up on your machine properly.

[06:33] If everything passes, then it's going to ask for your email address, so I'll just give that. With that it actually updates a bunch of the exercise files with your email address, and that will make submitting the elaboration and feedback forms a little bit easier. I'll show you what that looks like here in a second.

[06:52] Now I'm going to open this up in VS Code in my editor here. With this I have the project totally open for me locally. I'll show you how to get the app and the test running. If I open up the integrated terminal in VS Code, now I can run NPM run start or NPM start will do the same thing.

[07:16] That gets the React application up and running for me. This is a Create React App boostrapped application, so if you've used that before this should be pretty familiar to you. From here it's exactly the same as it was in the CodeSanbox and so you should be good to roll with that because it works exactly the same as it does in the CodeSanbox.

[07:40] I'd recommend you keep this running and just leave it up and running in a terminal window. We're going to open a new one. With this one I'm going to run NPM run test or NPM test or even NPM T. All three of those will do the exact same thing. That starts the test.

[07:55] This starts the test in Jest, which is a test framework, which is awesome. I strongly recommend that you use it if you're not already using it for your production applications. It starts it in watch mode. The watch mode in default will only run the tests that are relevant to the files changed since the last commit, which is pretty cool. Then you can actually run specific tests with this watch usage.

[08:21] I recommend that you play around with this a little bit, figure out what these different commands mean. Probably the most important thing for you to learn at the start is how to quit. You press Q to exit watch mode and then you can run NPM T to enter the tests watch mode again.

[08:43] You're also going to be using the P key quite a lot, so if we press the P key it allows us to enter a pattern. If I start typing a RegEx pattern then it will show me the files that would be run if I hit the enter key. If we only want to run one particular file, one test because we're focusing on that, then we can say 05.js and that will run the 05 test.

[09:09] Now I can go onto my source directory in my tests, 05, and I'll swap the final for the exercise version and then I get my test output right here and I can start working on the exercise. As soon as my implementation matches what the test is looking for, then I'll get my test passing.

[09:33] That's how you run the app. That's how you run the tests. Now let's take a look at what the expected work flow for all of this is. If we open the outline.md file in the project then we can take a look at how things are structured for these workshops. For React fundamentals I have a bunch of information about myself that you can take a look at later.

[09:57] My workshops are just totally full of exercises, tons and tons of exercises for you to play around with. It's not a solo venture. It's not a lecture venture. You are going to be interacting with these exercises a lot and hopefully interacting with your fellow workshop attendees.

[10:18] As far as the logistics go, I start out explaining all of this stuff so hopefully you've watched this. Because I'm not going to be spending much time with this. Then we'll move on to exercises. We do a couple of exercises, and then we take a 10-minute break.

[10:35] I strongly recommend that you take the breaks that I give you. It's really important for you to actually learn this material by giving your brain a rest, letting your brain have some time to process the things that you're learning.

[10:48] If you don't and instead just stay at the computer and open up Twitter or something, then you won't learn as much. I strongly recommend when we take the breaks, stand up, walk around in a circle, but get your body moving so your brain can process the stuff that's coming up.

[11:06] We'll do a couple exercises. We'll do a short break. Then we'll do a couple more exercises and then we'll do a longer break. Then a couple more exercises, another short break, some more exercises, another break, and then we'll finish up with some Q and A at the very end.

[11:24] We talked about how to get the app and the test running and also in particular this workshop, the React fundamentals workshop, you're going to be opening some HTML files directly in the browser. For most workshops we just need to run these scripts.

[11:44] Also please do ask questions. As we go, interrupt me. If you have something that's unrelated, feel free to ask on my AMA and I can ask that later. In particular if you're interested in what's that font or theme, then actually you can go to kcd.im/uses and that tells you all of this stuff like what is that cool new browser tab or what microphone do you have. Whatever it is, it's all right here. Please don't ask me that question because it's answered there.

[12:16] Any other questions that you have that are relevant to the material, then feel free to ask on my AMA. Otherwise if it's relevant to the material, you're probably not the only one with the question so please, please do interrupt me while we're going.

[12:33] I have a video that explains how zoom works, so go take a look at zoom. Just to review, make sure that you keep your video on if possible because that makes things more human. Keep your microphone muted unless you're speaking because the background noise could be distracting and the break out rooms are a great resource for you to take advantage of those.

[12:56] Let's talk about the exercise workflow and how things work. Through each one of the exercises you actually have these emoji which are there to help you along. You're going to see Cody the koala bear all over the place in code comments. Where you see Cody is where you're supposed to be doing something specific.

[13:16] Marty the money bag is also around places where Cody the koala bear is to tell you here is some code you might need. Go ahead and copy and paste this. Because we're trying to focus on specific learning outcomes and some of these outcomes require you to understand how local storage works or whatever.

[13:36] Marty Moneybag is there to help you skip some of those things that aren't totally relevant to your learning outcomes. Then Hanna hundred is there for extra credit. We'll see her. Olivia the owl will give you some pro tips and ask you to do some specific things.

[13:52] Dominic the document will give you links to documentation if that is necessary or relevant to the exercise. Barry the bomb will tell you, hey, we're refactoring this stuff. We're deleting this code. Sometimes he'll tell you to move it, but that's Barry the bomb. Then Alfred the alert shows up sometimes in test errors like this for example.

[14:15] If you do have the tests running, which I do recommend that you have the tests running, then keep an eye out for Alfred the alert because Alfred will tell you when there's something specific that you're missing. He can give you some more helpful hints.

[14:29] Let's take a look at the exercise workflow now. Each one of the exercises is going to have a markdown file. With the exception of the first couple exercises of this workshop, you're going to have a JavaScript file. The first couple exercises of this one is just HTML files. Then we also have the tests and we have a final version that you're going to want to look at if you get totally stuck.

[14:58] Let's take a look at the markdown of these exercises. If we go into source, exercises, and we'll look at 01.md. Here's the title of the exercise, some background information about why are we doing what we're doing, what are the programs we're trying to solve, what are the APIs that we're going to be learning, and sometimes you'll get links to those different APIs.

[15:22] Then we'll get a section on the exercise. What are we doing specifically in this exercise? Then some extra credit stuff which you can take a look at once you finish the exercise. Once I kick off the exercise it will be your responsibility to go and work through the exercise.

[15:42] This is the workflow that you'll typically have in most of the exercises. We'll do 05 as an example. The first thing that you'll want to do is make sure that you've got all the tests running. Here in watch mode you'll hit the P key and you'll do the exercise number and just make sure that is running.

[16:02] Then you'll go up to the test directory, you go to 05.js and swap the exercise final for the exercise version so you get the test running right there. Then you can keep it running open or hide it if you'd like to, but then you'll go into the exercise 05.js in this particular example and you'll follow along in the instructions that Cody the koala bear is giving you or Marty the money bag, the specific tips and hints as you go.

[16:33] Once you finish with the exercise, don't do the elaboration and feedback just yet. We'll get to that. Once you finish with the exercise you can go back to the markdown file and take a look to see if there are any Hanna hundred extra credits.

[16:47] If there are, go ahead and try to figure those out. The objective of the extra credit is oh, wow, you finished this really fast so these ones are a little less hand holding and just see if you can make that work.

[17:03] Once you finish with that, then I would encourage you to try to help other people that you're working with, maybe make a pull request if you see some sort of typo or something you can make a pull request and fix that. In general, just wait for things to wrap up.

[17:23] It's not very likely that you're going to finish the exercise and the extra credit unless you're super, super fast because I actually don't give you enough time typically to even finish the whole exercise. The point isn't necessarily for you to finish the exercise. The point is to put you in the mindset so that you can start receiving the knowledge that I can give you.

[17:45] That's why I actually don't give much instruction before I put you into the exercise in scientific terms or in the research terms this is called generation where you're generating the answer before the answer is given to you. That process actually helps you learn the material better because it's actually struggle.

[18:05] You're forcing your brain to figure things out. If you're able to intuit the answer that's great because there's an emotional response to that and so you're emotionally connected to that answer. You say yes, that's how I got it. That's awesome. You'll remember it better.

[18:24] If you got it wrong, then that's actually even better because there's an emotional response to that and that will solidify the correct answer for you. That's why it's a bit of a struggle and that's the intent, that you'll be struggling through some of this stuff.

[18:37] It might feel a little bit over your head, especially since I haven't actually taught that material to you yet. I pretty much just push you into this little uncomfortable situation so that you struggle through that a little bit and then I bring everybody back together.

[18:52] Once we all come back together, you've struggled with this a little bit, and now you're ready to have the right questions to ask. You're ready to receive the information that I have to give you. I strongly recommend that you struggle through things.

[19:07] If things are confusing, that's a problem, and I definitely want you to ask me about those things. If the exercise is confusing, if the instructions are confusing, that's not a good thing. A good kind of struggle is you're just trying to figure things out and maybe you're going to Google to understand how to add a class name to a React component or something like that.

[19:32] Those are all good things. You shouldn't be frustrated. If you are feeling frustrated, let me know and we can work through whatever frustrations that you're having. Then there's also always the final version of the code that you can go and look at if we go to exercises final and 05, then we have the final version there.

[19:50] We also even have the extra credit there if you need to access those, but I strongly recommend that you struggle with it first because the point of these exercises. Once I bring us all back together, then I'm going to open up the exercise file and I'm going to work through this as if I was just working through the material.

[20:15] You can watch me accomplish the task you were working through. Please interrupt me as we go and ask questions that came up as you were working through it. Then once I finish going through the solution If we have time, I'll also go through the extra credit that we have listed here at the bottom.

[20:38] If we have some time then I'll go through that extra credit and you can ask me questions about that as well. Then once I finish with that, then you'll have an opportunity to come here to Olivia the owl who gives you a link to elaboration and feedback.

[20:52] You'll notice here that I have the email address that I entered when I set this up. That's what this is for. It will auto fill those email addresses. If you click on this or open it in a new tab, then that will take you to the workshop exercise feedback form.

[21:10] Because we already had some of this prefilled, you just elaborate on what you learned and then fill out some feedback. It's actually very important that you do this because this is called elaboration. That's the term for it.

[21:25] By elaborating on what you've learned, you solidify the things that you have learned. An important aspect of this is relating what you've learned to things that you already know, and that will make those connections in your brain and solidify that new material.

[21:42] I strongly recommend that you take a minute to just write out a couple of the things that you've learned, the core concepts that you've learned from the exercise and from my instruction so that you hang onto that.

[21:54] Then when you're finished with that, then go ahead and fill out how effective was the instruction and exercise and some general comments. I read every one of the general comments that I get on this form. I've had over 3,000 responses on this form, maybe a lot more now, and I do read all of these and I take your feedback very seriously.

[22:14] Feedback is appreciated, but really the purpose of this form is to elaborate on what you learned because that's the most important thing here so that you can solidify what you're learning here. Once you've done that, then we'll move onto the next exercise or the break or whatever is up next and then we'll just do that until we get through all of the material.

[22:33] Then we wrap everything up with a Q&A session at the end and then we say goodbye. After the Q&A I'll ask you to come down here to the bottom of the outline and copy this URL to give feedback on this specific workshop. The elaboration and feedback, that's mostly for you to write the elaboration, but this one is for me.

[22:52] This is just a favor you can do for me and for other people who take this workshop in the future, to just fill out a couple of questions, answer a couple questions and leave me some comments on what you thought of the workshop and whether you feel you can recommend this to a friend or a family member or even a dog.

[23:11] This would be really helpful to me, so please go ahead and do that as well. I recommend that a week or two later you come back to this material because it's all open source, you can do it all over again. This is called space repetition. It allows you to interrupt the forgetting process.

[23:30] Our brains naturally forget things. That's like a garbage collection that happens when we haven't needed access to something recently. Lots of the material you're going to be learning hopefully you're using it on the job from day one, but if you're not then you need to interrupt that natural forgetting that we do. Go ahead and come back to these exercises.

[23:56] Work through them another time. Interrupt that forgetting that your brain is doing naturally. Each time you do that, it actually makes it more solid and you don't have to interrupt that forgetting process in the future either. Definitely go through this material again.

[24:13] I hope that's helpful to you and I will see you at the workshop. Thanks.