2020-03-18 Taylor and Kent talk about Remote Workshops
6:31PM Apr 3, 2020
Kent C. Dodds
Why hello? Alrighty. Oh, yeah,
yeah, that was perfect. Um, so for this one, I did watch your stream the other day, from the other day. So some of this will be a little bit of rehash on that. And like, like I said, we don't really know what this could become. But if there was ever a time to capitalize on remote workshops, and the desire for information about them, I think now would kind of be that time.
Yeah, absolutely. So
I've been asked so many times like it's, it's outrageous how many people want me to answer their questions about how to do remote workshops. So yeah, this is definitely a good time to talk about this.
Cool, so let's just kind of jump in. What is the difference between a weapon are in a workshop?
That is such a great insightful question. Okay, so a webinar is people tune in and they they watch, it's almost like a, like a talk, where there's not really much interactivity. People aren't. I mean, they can be engaged, like talks can be engaging, but I don't really see them as super great learning opportunities. It's more of an exposure. Time is a webinar. So I'm being exposed to this new information so that I can go actually learn it later. And you can really easily so i a mistake that people make, or at least that I made when I first started thinking about remote workshops, was Hey, does this mean that I can now like sell 1000 tickets or more like I can scale up forever? Because, you know, anybody, anyone in the world like my audience is Now anyone who has an internet connection and and like adding one more person, the reason that we don't sell a million tickets to our workshops isn't because we can't do that, like logistically but because, or
Yeah, because people wouldn't wouldn't buy them. It's because every additional person you add to a workshop and an in person workshop detracts from the experience of others. Right? And so it gives them less less of your time, and it's just like a bigger venue that you'd need or whatever. But we don't have those limitations in a remote workshop. And so that's why we think, okay, we can just make this some huge thing, sell millions of tickets and adding one more person doesn't detract from anyone else's experience. Like, we're not going to have enormous lines to the bathroom. But it actually does detract from their experience, even though it doesn't feel that way. And that's because they won't be able to get their questions answered. answered, they may not even ask their questions because they know that there are so many people there. And so this is why I kept my attendance to 40. And I don't even like to have that many most of the time. Because otherwise, if everybody does ask their questions, then you don't have any time to get through everything. And
and if like,
just in general, people will not ask their questions because they feel like there's too many things going on. You really want to, like remote workshops are phenomenally good, but you do want you you are suffering a little bit from not being in person. And you need to make up for that by being really engaged with people in small group settings. And so if you have like 100 or 200 people making the small groups, you wind up with like 30 groups that you have to go and have these small interactions with and that just takes too much time. So it Yes, you cannot scale infinitely. Once you try to then that turns into a webinar.
Cool. So how do you handle questions when you're doing your remote workshops?
So I pretty much never answer questions that are like specific to somebody, system or whatever. Like I'm having trouble setting up the workshop. I don't answer those questions until I get to the exercise time. And this applies to in person workshops as well. But it's especially important in remote workshops where it's so easy for people to check out so you're constantly battling this desire that people have just naturally to, to check out at the meeting. And and so that's, that's why I, whether it's in person or on remote, I'm not going to answer people's specific, isolated questions. As as a group, I'll do that during the exercise in their smaller breakout room. Well, people have stuff to do as far as like Regular questions that are relevant to the workshop relevant for everybody else. The chat is great, but I, when I'm working through stuff, and I'm, you know, going through the solution or something, if somebody has a question that's normally when the questions are coming, I will not see that in the chat. And so I and also sometimes people are going to use the chat to just answer each other's questions and stuff. So I, I can't just have it open all the time. Next. And, you know, looking at it the whole time as I'm going through solutions, either. And so I do not use the chat for questions. If somebody wants to ask me a question, I will ask them to please interrupt me and I make this very clear at the beginning, that this is not a TED talk. I'm not introducing the new iPhone, so it's totally appropriate to interrupt and please do interrupt me with relevant questions. If you have irrelevant questions, then go to my ama, and I give them a link to that and there, feel free to ask your question there. But Yeah, so interruption is is the key for getting questions answered.
And so when you say interrupt, do you mean like unmute themselves on the microphone and like literally, all right.
Yep. As just as I'm typing like, Okay, then we're going to make a button right here we'll add an on click and boom, they interrupt me as I'm just explaining what's going on. And, and I can I can deal with that and, and then stop and Okay, let me address that. Okay, let's get back into what we were get back into context. I don't mind that at all. Often, people are pretty sensitive, just in general, and they want to wait for me to finish my thought before they started asking questions. And I do stop as I go. So I'll go through the solution. And then I'll take a break. I'll be like this is we're not done yet. But this is a pretty good place for people ask questions. And I'll wait and there's network latency of just a few seconds normally, but um, and and often not even that long, but I will wait for a little bit of time. Don't be afraid of silence at all. I am totally fine with people. Just sitting there in silence. I'll wait sometimes for five to 10 seconds.
And I'll just scoot back from my mic.
And just wait. So they know that I'm ready to answer any questions that they have. Yeah. And then another thing is when I do these small groups, these breakout rooms, and zoom, I jump into each one of these rooms, and often they'll ask me a question. And if it's a question that I think that a lot of people are going to have, then I will just say, I'll answer your question. When we come together as a group. I'll write it down or something just so I don't forget. But yeah, typically.
Those are the words that I would use to answer your question.
Awesome. That's like a very political speech way to like, yeah, the words that I have used.
I have no more words to add to what I've added. All right. Yeah.
So you've mentioned breakout rooms a couple times. And so that's a zoom specific feature. But how how does it kind of work? Like what's like the the TLDR of how a breakout room works?
Yeah, that's a great question too. So I, I think that this zoom specific feature is the reason why I could not use anything but zoom for workshops, I think it's really critical to be able to break out people. So the way that it works is, you're in the middle of a zoom call. And the host can create what are called breakout rooms. It's just this menu option. I actually have a video on egghead showing you how this all works. And I send that out to all the attendees ahead of time so they are familiar with what breakout rooms look like from my end and how that whole experience is. But the way that it works is the host sets up these rooms and I just set it up to automatically allocate people so I say I want rooms Three to four people, it'll allocate all of these rooms. And then I say go, and people get a pop up on their screen that says, hey, you've been assigned to this room, click this button to go to that room. And hopefully they click that button. So it's surprising how many times they just don't. But, and I'll just remind them, but they click that button, it closes the the video feed that they have, and opens a new one. And that new one is just that group of people that they're in. And then from my end, I get to look at all the breakout rooms and I get to join each one. So one at a time. And so I just go to the first one, and I say, Hey, everybody, and for the first time that we do the breakout room for a workshop, I say, okay, what's your name? What's your name? What's your name? You know, I often do that in in person workshops. I ask everybody's names. I don't do that for the whole, like, for remote workshops for the whole group. I just do that in the breakouts. And I get everybody to, to at least say words, at least one On their microphone. Another important thing for all of this, just in general is to keep your video on everybody, like all attendees should keep their video on if possible. But yeah, I made sure that they talk that they introduced themselves to each other, that they understand how the workshop exercises work. And, and then I move on to the next room and I just hit every single room right as soon as I go on the breakouts. For that first exercise. Then the next exercise, I start the breakout rooms and then I just hang back for a little bit and wait a few minutes and then I start jumping into the rooms. Any questions? No. Okay, I'll leave you alone. Sometimes I'll try to tell them a joke or something to keep things light. And then when we're all done with the breakouts and I say, Okay, that's enough time for the exercise. Then I can close the breakouts and it gives them 60 seconds to join the room. Otherwise, it'll just close it out. And during that time, some people will join early, so I'll Try to like, tell jokes or something while we're waiting for everybody to get forced in.
Cool. So, you mentioned that
about exercise time for the breakout rooms. How do you decide when to break people out?
Yeah, so I have a very defined
outline for my exercises and everything. I know exactly when the exercises are not like timewise. But I know exactly what I'm going to do to set people up for exercises. And, yeah, so when I'm ready to do the exercise, that's when I do the breakouts, I don't really break out other than exercise time.
Okay. And so you you talked a little bit about doing kind of the way that I pictured in my head is like, if if it was a physical workshop, like your tables, right, like, you go to each table, and you kind of mentioned like getting people to introduce themselves over their microphones. Are there any other ways that you encourage participation between the remembers,
not really. And this is one area that I feel like I could maybe improve a little bit because there is sometimes breakout rooms where one person will just turn off their video and then another and then another and pretty soon the whole rooms got coronavirus or something, they don't want to talk to each other. So yeah, I don't know what to do. Or I'm still struggling with that for some, sometimes there's just a few rooms in there that they just don't do anything with each other. I still jump in there. And I say, hey, how's everything going? Sometimes people just won't say anything. And so then I and I, you know, I appreciate that sometimes people don't want to work with other people, or at least have their video on or anything and that's, you know, everybody gets their choice. It's one of the nice things about remote workshops is you don't have to be there in person. And so yeah, but as far as like getting people interacting, just getting them talking is often enough sometimes or often enough. Good enough to get things going. Sometimes I'll see people sharing their screen. And I really encourage that. And I mentioned that at the beginning as well, like, you know, pair programming or sharing your screen as you go. You can all work through it, but like helping each other is is really encouraged.
Yeah, that's kind of what I do.
Cool. And then for for the breakout rooms, is it a different table each time? Or do they get the same group every?
Yeah, so I've had mixed reviews about this. Right now what I do is I try to keep it all the same. It can be challenging, because if people leave the zoom meeting, and then come back, they will be just put into this little bucket of unassigned people. And I don't remember which room they were in before. I don't have that. And so that is that, you know, I just deal with that and I put it in a room that has the fewest number of people or I'll make a new room but Yeah, some people really want to stay with the same group the whole time. Other people want to mix it up every time. I am of the opinion, it's probably better to build some camaraderie with the same people. And so, you know, you're not shuffling tables every time in an in person workshop. And so I try to keep it the same. But I've definitely had some some zoom meetings where things just changed so much, just okay, reallocate everything, and start over.
So are there any other pieces of feedback that that you've had about the breakout room kind of tactic?
So some people don't really like it that much. And I'm not.
That's one of those things where I just say sorry, that that like, I think some people aren't really sure what they're supposed to do. In that situation. Are they supposed to work together and I try to be pretty clear what the actual practitioners But
I'm yeah, that's all I've got to say about that. I, from my experience and talking with everybody, it is absolutely worth it, even though there are some people who don't like it. So I'm definitely not changing, changing my stance on that.
Cool. So let's see, one of the things that I know about your workshops is, well, first, let's talk about the different kinds of workshops. So one of your workshop types is the isolated exercise type. So can you explain what kind of what that means?
Yeah, this is my favorite kind, because it is so much easier to to maintain for me, and it's way easier for people to follow along. And so the isolated exercise type Can I share my screen? Yeah, actually, let me let me do that really quick, because I have a feeling that this will be easier to To explain if I can demo it for you. So let me
get a good screen resolution here
hopefully, I've had some problems when I changed my screen resolution. So hopefully this doesn't blow everything up. Okay, yeah, that worked out nicely. Okay, so let me grab an example. My react fundamentals is a great example of this. Cool. So sharing this, okay. And I've been working on this so, so here's the, this type of workshop. This is part of my epic react series that I'm working on. And we're going to pop this open so you can see. The nice thing about this kind of workshop is you can have this kind of a app like experience. And look I've got dark mode too, which is cool. Thank you. But yeah, so we have the description like, here's the background and everything for this exercise, we've even got extra credit. And here's your elaboration and feedback and stuff. And then here's the exercise, here's the final version, you can go to the totally isolated version of the exercise, which is what you're going to be working on, and a totally isolated version of the final. So you can take a look at what that looks like here. And it's, it's great. It's really straightforward. That it's like just what you're working on. So the isolated exercise is just really nice, because from the standpoint of somebody working through the workshop, they can see, okay, I've got this source directory, and there's this exercise directory, I guess that's where I'm working. Here's that markdown file that I see in the browser. And here's the exercise and I just start making changes in here. And I can say, Hey, there, hello there, and we get To refresh and boom, there it is. And so it's just really, really easy and straightforward for people. I really like this, this type of format, because it just makes it easy for me to create. So I typically will just create the final version. And then I'll copy that final version over to the exercise side. And I'll remove stuff that I want them to add and replace those lines with Cody, the koala bear telling people what they're supposed to do. And so there are a couple of insights I want to pull out of this. First off, like I said, it's it's pretty easy for them, for me to maintain this and for people to know where they are, what step they're on, where to find the files and stuff. They just need to explain to them once and they get it. But the other thing I want to call out specifically are these emoji and these comments. And this is a really important takeaway. So pay attention. So the one of the biggest problems with remote workshops or workshops in general is the the tendency that humans have You want to go do something else to not make their brain work hard. And, and so if you make them work too hard, or if they're even the slightest bit confused, then they will do something else until you come in and save the day by working through the solution. And the and there's just this thing in their head that tricks them into thinking that that's okay and that they're going to learn still, they are not going to learn that way that will not work. And so you really have to make sure that they stay engaged, so that they can retain the stuff that they're learning. Now, they don't have to be able to finish the whole exercise and or all the extra credit. In fact, the extra credit that I have is often pretty ambiguous. And that's because if you make it this far, then like you're obviously really committed to this you understand what's going on. So now you can go off and explore and I'm fine if you get a little distracted at this point. But the point of the exercise is not just for them to finish often They don't even I don't even give them enough time to finish. But the point is, they need to know what questions to ask. That's where they're learning. So like if, if they didn't want to, if they don't need to ask any questions, and they may as well just watch a self paced workshop, which is also very great. But the real key here is they need to jump into this and start working through some stuff before before I show them the solution so that they have the right questions popping up in their minds. So that I can answer those questions as I go through the solution. Often I answered them just by going through the solution, but if I don't, then they can ask as I when I'm when I'm finished or, or if I'm skipping over it in the solution. So
that's why you'll find that I have these emoji all over the place saying, Hey, this is what you need to do. here's here's even the code that you need right here because it's not relevant to your learning to know how to get react on the page from unpackage all you need No, is that that's what you do. And so I, I really try to eliminate distractions of things that are not important for their learning of the material by giving them as much of hand hand holding experience as possible. Like, I'm literally saying, here's, here's how you do this thing that I just told you to do, like copy and paste this. But you'll find that like, people are still learning, even though they're copy pasting things, because they'll they'll copy paste it wrong. Or they'll they'll copy paste it right, but they have it in the right spot. And so that whole experience is just, it's really engaging, it's really obvious what they're supposed to do. There's no confusion, I've had very little confusion on my exercises. And so people actually complete them. And then when they when we all come together, and I work through it, then all the questions that they had in their head as they were working through it are getting answered, and if I miss anything, they can ask those questions. So anyway, that's it. This this kind of monologue right here applies to whatever type of workshop you're talking about. But I wanted to bring it up since I pulled this file up. And here we have the emoji.
Yeah. So how many emojis do you do you have?
Yeah, so I'm in my README here, you scroll down, and it'll explain what all the emoji do. So we have Cody, the koala bear. That's what people see most of the time is like, this is this is a spot in the code where you need to do something and I'll tell you what to do. We have Matthew the muscle for this is the exercise. Here's the final. Marty, the money bag will just give you some times even code. That's like, we're interacting with local storage. I don't care if you know how to use that or not. And it's not really important. All you need to know is that when you need to do these side effects, you need to use react use effect. And so that's what you're learning. You're not learning about local storage. So here's the stuff that you need for local storage. That's that's the type of thing that Martina moneybags does, Hannah 100 is just for people like it's a mental cue. That's what all these emojis are for. It's like, Oh, I see that. That's a hand 100. I'm not working on extra credit yet. I'm looking for Cody qual bear. So I'll skip over that. Olivia I was for like best practices and just tips and things also gives a link for elaboration feedback. If I ever post a link to or have a link in here for documentation. That's what the Dominic's the document is, if there's a block of code, or even a line of code that we need to delete, that's very the bomb. Peter, the product manager kind of there's some of these exercises and workshops have a storyline like we're iterating on this component. And so Peter, the product manager comes in and says, Hey, our users have this new use case. And so that's why we're working on this next exercise, and then offer the alert shows up in the tests. So if there's a test failure, sometimes I'm expecting people that have a specific test failure. And so and the tests are just there to Help people like guide them along the right path. So it's like they can look at the implementation and play around with it. But if the tests are they're just kind of as they're working to see, oh, the tests are passing, that means I probably got the exercise, right. And so anyway, if, if I see that people are failing something for the same reason over and over again, and the test output isn't very clear, then I'll add an Alford alert and do a more specific assertion or something, to let them know, Hey, you didn't pass the right props to this component or something. That's why it's failing. So
cool. And so I noticed that you have contributors written there at the bottom of your README. So one of the things that I've noticed about your workshops is a lot of it if not, the vast majority of your workshop material is on GitHub. So I was wondering what kind of your your take on that is like how often do people Submit prs and and why, why open your your workshop material like this?
Yes. So GitHub is kind of where I defaulted all of my code, since I discovered GitHub years and years ago. But the reason that I make it open is because like, people can actually go through this material on their own, they don't need me because I make it so obvious what they're supposed to do. And then it's very intentional, not just for the people who are actually going through the workshop, but also for people who can't afford the workshop. And so there are just a silly amount of people who don't have a job that is paying them to attend my workshop or buy my course, or whatever, or people transitioning into software. And I want to be able to reach those people. And so that's why everything is open source. And I just have a lot of open source blood in me and so it's just a natural thing. To do to accept pull requests. And I do get quite a few pull requests on my open source projects in general, and in particular, on my kcd. edu topic where I have all of these, I've had quite a few contributions from people just helping helping out. And I really appreciate that. And I just think it's awesome. People have definitely made these exercises better. Lots of typo fixing and stuff, but still, like some people have have contributed extra tests and things like that. So I do have it as a GPL version three license, which means basically, they can use it for non commercial use. So if they want to take this workshop and give it to their co workers at work, I'm totally cool with that. You want to give a meetup talk and do a couple of the exercise exercises. That's great. I'm all for knowledge sharing. If you want to make money on it, Then contact me here. And my answer will be no, I'm not going to let you use my manual to make money. You can make your own material to make your own money. But if you want to share knowledge, then I am absolutely happy to, to have you do that. So
cool. And so you mentioned earlier a bit about when you are coming up with an exercise that you would kind of write the final version of the code and then take stuff out to determine what the exercise is. Are there other ways that you have written exercises for your workshops?
That that's typically the way that I go about it. So even with the other types of workshops that we can talk about here in a little bit. It all comes down to me getting to what do I want this to look like at the end? And then working backwards from that. And so if, if there are things in here that I I don't want to assume knowledge of then I need to either teach that as part of this exercise or make a separate exercise or an extra exercise that either teaches that concept in isolation, or we build upon the same example to work our way up. Sometimes that also means that it's going to be an extra credit thing. And so like the, the real thing that I want people to learn is actually what's in the extra credit, but they need to do a couple of things before they can get to that point. And so like I said, it's the the goal isn't necessarily for people to finish everything. It's just for them to get started. So their mind is in the right space. And then we can, they can watch me go through everything and their minds are just well, better prepared for that. And so, yeah, but in any case, it always comes down to what do I want this to look like at the end, and let's work backwards from that and find all the key pieces The things that I want people to learn, we'll make exercises out of each each piece.
Cool. So that's a kind of a good transition into another type of workshop that you teach where you add features to something that already exists.
it's it's kind of a
Oh, actually, you know what? I think the one that you're you're talking about? This one is similar. They're these these two are actually kind of similar. But testing node apps is probably the one that you're talking about. This one's also good. So yes, testing node apps. It's a finished project. And there are no branches or anything like that. You just have the finished project. And then here in the outline toward the bottom, I have An example of like, here's how the exercises work in here. So for, for that first one that isolated exercise one, we just had a source and exercise directory. And here they all are. But when you want to teach people, how does this apply in the context of an existing application, then you need to think about things like where are the files going to go? How are we importing these files? How do we configure things to make it all work together nicely, whatever the case may be. And so in this case, I have the finished product. And then I have markdown files throughout the project. So in this case, we're all in tests. And that's why all these are going to be in under test. But if this was like, let's add something to a react app or something then it wouldn't necessarily have the Dunder testing. But yeah, so we'll have the title and then a dot.md. That's where the background exercise extra credit and everything goes and then we'll have a dot exercise for what they're going to be doing a dot final for what we're going to do. And then we have extra credits alongside. So if we look at an our first example here, we'll just find that in our folder structure. This is basically the same concept, we have the emoji and everything. Giving background, here's what we're what the goal of our or the the concepts that we're going to be learning about. Here's the goal of our exercise so that we can learn those things. And when you finish that, here's the extra credit. And when we're all done, then leave your elaboration and feedback. And so then right next to this markdown file, we have with the same name, the exercise version. And so this is what things look like for the exercise. And then we have a dot final version. This is what the stuff looks like for the final. And then in this workshop, we actually don't have any Like, we're not actually loading these files to make the app work. But if I were then I would import from the final version to make the app work. And then I would probably, I guess I would require you, I don't have an example of this. But if I were going to do this as like, Hey, we have an app and we're just adding things to it. Then I would say import from the exercise version, you know, before you get started, so you can see what your examples are, what your exercise will, how it will work and stuff and you can play around things. But yeah, that's basically how that that differs is it's just there spread all over the place. And if people ever get lost, and they just have to come back to the outline, and then say, okay, we're on number two, that's where that file is. So it's a little bit more work for the the person who's doing the workshop for the attendee. It's not a whole lot more work for me except it's Just less clear where everything is.
But uh, yeah, that's,
that's that one. Cool. And it did look like you use the same emoji kind of legend or key or whatever the word would be. They all mean the same thing.
Yeah, yeah, I keep it consistent. Yep. This one's missing a couple, because it. I've added some since I gave this workshop last.
Cool. And then. So another type of workshop is a full app with stuff that's been removed that the attendee will implement.
So I have that right. Yep. Yeah, basically. So that's basically what this one is, and this is my least favorite. I do not like doing this kind. It is hard. But it's the only way I can think of for teaching certain kinds of things. So the way that this one works is you have branches for every step of the way. So the type of thing that this is good for teaching is I we're going to Build a react app from start to finish, or we're going to configure a tool from start to finish. And so you're going to be working in the same file for every single exercise. And you want it to actually run and work. And so for each for so the master branch is going to be this is what the end is like this is everything all finished. And that's really great for people to reference after they're all done taking the workshop. They're like, Oh, yeah, how did you configure his jest? Okay, let's or is JS config or whatever. I can go and look at that. And that's, that's what it looks like at the very end when he's all done. That's what it looks like. Okay, that's great. But when we just get started, then we'll go to just 00 here. And so this is the very first in the whole thing. So when people get started with the workshop, I say okay, check out TGS slash Jess dash 00 and what this commit does Is it just removes everything that we're going to be working on, or everything that's unrelated to what we're working on. So in this case, we're adding just and just testing in general to an existing project. And the final final version not only has jest, but also has Cypress in this case. So I remove all the Cypress stuff to just get rid of everything that's irrelevant for this workshop. And so yeah, like everything is a pretty sizable commit, that we're just removing a ton of stuff. And then the next commit it, or the next branch will just be one commit. And that's really important for like, the automation that I have set up is that it's one commit and this is what people are going to do. And so like when I'm recording a video or when I'm going to give this as a workshop, sometimes while I'm giving the workshop, I'll have this open in a separate window or somewhere else. So I can look at it and be like, Oh yeah, that's what this exercise is going to be. This is what we're going to do. It's not here's The problem with this style is that it's not really an exercise, I can't find a really good way to teach people how to how to go through this kind of stuff. Because they're like, Where do I put emoji for creating a new file or for adding a dependency, or for adding a script? Like, it's just really hard for me to describe what you're supposed to do in a way that's easy for people to follow along. And so typically, this type of a workshop actually is better as not a workshop, but as a Hey, watch me do this thing and ask questions as we go. And I hate that kind of a teaching experience. I don't like it. But it works really nicely for recorded videos. And then when when we're all done, you can say, like, people can go through the diffs and they can see Okay, so this is everything that he did, and that's actually quite nice as they can see, okay, what's the difference between, you know, step one and step two. These are all The things that he did. And so it's it's nice in the automation that I have for this to work. I'm going to open this up in a different tab, just in case I have my social security number hanging around somewhere.
Is it seven? Sorry, what your social security number is seven.
Yeah, that's that's the one. You got it. Yeah, I should have made that more unique. This is what I have right now. For my automation of this, so like, here's the big problem. This is probably the biggest reason why I don't like doing workshops like this. So let's say that we're on exercise five. And let's see Where's Yeah, here we go. So we just committed exercise five, and then we find out that identity proxy gets a, an update, and we have to change the way that we're using it now because they now expose a different file that you need to use or something. So that's awful. We can update that in master that's fine. And that's typically what my first step is to update master. And then once master is updated, then I'll come in here and I'll do this Oh, actually, I'll see it's a bit of a process. So then I check out the 00 branch. And I will, I will cherry pick whatever is on the the latest commit of 00. On to master. So I'll rebase it and then wait, yeah, I'll just rebase just 00 so that we get the latest of master plus the one commit where we removed everything. Sometimes there will be a merge conflict there, that's a big pain. But then you fix that and you move on, you push up that but then to get the rest of these. It's just such a pain. So let me show you what this ends up looking like. I generate this script using using Google spreadsheets and I'm planning on actually having a script that I'll run I'll probably have that done. actually pretty before too long. But anyway, so we check out 01, we reset hard to 00. So it's like that commit for this exercise didn't happen. And then we cherry pick whatever is on. Oh, yeah, zoom just appeared in front of my face. But all this does here. Let's go like that. So we cherry pick whatever's on the remote for this particular for this particular exercise. Don't ask me how this works. I don't know. But it does. So it just tells him that yeah, it just goes and gets the latest commit on the remote for this branch. And then and it cherry picks that on. So it says Okay, so now I'm just 00. Now let's go get that commit from remote. Well, we'll play it here. And if there's a merge conflict, then this stops and this and we'll just break and none of the rest will run. And I stopped, I addressed the merge conflict. I add I And I amend the comments. So I really important, I only have one commit per branch. And then I continue on, I'll just come back here and I'll say, okay, we broke on, you know, number two. So I'll just come back here. I'll copy paste that. And I'll run it until I get down here to these eco. Lacy. Thanks. I didn't want to figure out what it would take to make these this script actually work. So I never thought I'd show people this. That's all right. But But yeah, so that's, that's how that works. I am planning on making like a script, I can run with NP x, I'll just post it on GitHub jest or something. Yeah. And, and then I'll probably make it a little bit better, but it's still is such a pain because especially if it's a pretty significant change that you're making every single cherry pick, you're going to get some sort of merge conflict. Luckily, because I'm not just rebasing every single branch because that would be a total disaster. So if this particular exercise doesn't deal with that area of the code that I'm changing, then that cherry pick will just go just fine. No problem. But finally, once I get all of these done, then I just do a get push force all I force push all of the things and then everything's back to where, where it goes. And so I never linked directly to commits, I actually only linked to the branches because those commits change pretty often. So anyway, this is my least favorite format, not only because it's really hard for me to manage, but also because it's hard for people to follow along. If I did want to turn this into exercises, what I probably would do is, I would probably have every single commit also update an instructions thing right here where I would have the background, the exercise, like you need to go to these files and change these things. And I actually have done something like that in this a similar type of workshop that I can talk about here in a second.
But yeah, any questions about that type?
Yeah. So when you This one's more generally about how you have your attendees prepare, like with gifts and stuff. What types of issues have you? Well, what what do you send out before a workshop in the first place?
Yeah, so I try really hard to make it so that the workshop repo itself is all that people need to know
where to go
to set everything up. And and this is actually really critical that you figure out a good way to make it so that people can set this up without a hitch. And so that's why I have my windows build and my Mac OS build. I actually think this is just Linux, but if it works on my machine, then it should work on other people's. But uh, yeah, so I keep those up to date. These actually each are running the same setup scripts that I asked them to run. And so yeah, all that I I just skipped the install here and I run NPM Run setup. And that runs this whole, I can show you what this thing does. It's it's pretty, pretty significant what it's what that's doing. But basically it installs it makes sure is it makes sure that they have the right version of dependencies installed like node and NPM, like these global dependencies that you need just to get things going. And then it installs everything, it runs the validate scripts, which will run the build the tests, linting, everything, and also even asked for their email address. So it can preload the Google Form links that I have throughout the workshops so that they don't have to type their email and all those forms. All of that stuff. So anyway, that's that's kind of the way that that works. As I just say, go to this, this repo, make sure you satisfied system requirements, run the setup and like you should, hopefully right now be able to copy and paste this here. I'll do it. I'll go to my desktop. And I'll run all that So that gets a clone, you'll see it's starting the workshop setup. And that just runs an NP x command that goes up to a gist that I hope because I'm I do the same thing for like eight workshops. And so I don't want to copy and paste that everywhere. How many workshops had you done before you started automating? I, I've been automating for a long time. I actually even made a work workshop setup project here that I used to use even as recent as like, three weeks ago, I only barely moved over to this NP x workflow. But yeah, so what this does, basically, is I expect you to download the built file. Because the problem is with a setup, you can't expect that people actually have installed any of your dependencies because the setup is what installs the dependencies. And so this thing is actually this one is bundled with Webpack. So I bought those all that's dependencies and I just would copy and paste this to all of my workshops. And then I would say, hey, let's make sure that the they satisfy all the dependencies in the package engines. And then, you know, we'd like this out. So this was a bit of a bit of a mess, but like it would verify that your node an NPM version was was correct. And I also had a yarn thing, but I don't do yarn anymore. But yeah, so And actually, this also did Mongo, I had a Mongo, I may even still have a Mongo thing in here. Because I Oh, whoops, that was wrong. Key Mongo. Yeah, I must have removed it. Because I had one workshop where I, I had Mongo, and that one was really hard. That's when I created this was to make sure that people had the right version of Mongo installed and, and if they didn't, then I would, I would tell them like, here's what you need to do to go do that. Really big pain. So yeah, I I strongly advise automating as much as you can, especially if you're going to do multiple workshops.
How How many or how often have you ran into like, a, you know, if somebody can't get anything going where you just sort of have to be like, well, we got to the show must go on. Yeah. Yeah. How do you balance that?
I pretty much assume that you have to get it ready before I do not help people if they don't get it set up. The only exception to that is once I start the exercises, and I'm going in that first breakout session, or if it's in person, I'm going to, you know, walking around the room, that's when I will help look at things. And I have had times where people just couldn't get it working. And I say, Sorry, I it was, it's very clear when I send out the calendar invites and stuff, I expect you to have this set up ahead of time and I am happy to help you ahead of time, but I'm not using any of the workshop time to help people get things set up. And if we Have tacs then those tears can absolutely help help those people. But yeah, I'm not using any of my time during the workshop to help people get it set up.
Cool. So there's, I think we have one more type of workshop just to kind of quickly go over and is that the full app was stuff removed or
Yeah, stuff removed. So this one, I'm actually thinking about switching it over to, to this type, the type that I said is my least favorite. And the reason for that is because this one's actually pretty hard to make it work. So the way that this one works is I have a full app that's master. So it's the final version of what I want. And then I make branches for each exercise. These ones aren't numbered I, if I were to do this, again, I number it. But each exercise is just a single starts with a single commit that removes everything that shouldn't be here for this action. Besides yet, and then ads, excuse me, ads and instructions empty except for this one, I think, somehow missing it. So we'll look at this one. So answers the instructions on D that has the background and exercise extra credit. And then we have a list of files that you're going to be working in. And then those files, here, let's look at this, those files will have all of the emoji in there. And then it will also have a final version that you can use to reference what the final is. And so I'm still trying to figure out what the best way to do this is. But I think that there's a happy medium or a happy place between the like, each branch builds on the last branch thing. And each branch is just one commit off of master with everything removed. I'm, I'm kind of leaning toward this one because it's easier to automate, getting updated, whereas the kind where we just each time branches one off of master with stuff removed is a little harder to automate. I do have an automation script in here, but it never really worked very well. So I'm probably going to move to to something like this where I just have instructions empty, and every commit, or every branch updates the, the instructions. And you follow along the instructions there. But that's it. They're really similar. So I'm going to kind of consolidate those, I think.
Cool. So excuse me, one moment here.
And so when you're presenting the workshop, what's your like? screen setup? Like? Do you like what kind of cheat sheets or how do you keep yourself on track while teaching?
Yeah, so I actually give a tour of my my office that might be interesting to people that you can watch it to just a YouTube video where I take you on a tour of the whole office. And this actually, you can even look at Photo Sphere if that sounds interesting to you. Oh, you painted your walls? Yes, yes, they are no longer yellow. Yeah. But uh, yeah, so I'm pretty much sitting at my desk. I started out the day normally standing. But I inevitably end up sitting. But I typically will have a piece of paper for notes on the side. And I've actually cleaned up my desk a little bit from here. I've gotten new monitors and stuff, but yeah, always have my water and stuff here. Got my webcam. And I also have a green screen and I'll typically do I will use the green screen like I am now I'm not actually in a post apocalyptic scene. Yeah, so I'll typically have my green screen up, and I'll have some cool background or something. for Halloween. I did a workshop On Halloween, and I dressed up as Harry Potter and I had Hogwarts behind me that was a good time. Or it was the Forbidden Forest, I think. But yeah, that's that's pretty much it. So then on the right side will be what I'm sharing people sharing to people. And I do that at the same resolution. I'm sharing this with you at right now in 1920 by 1080. And then the left side is my normal resolution 2540 by 1440, or 2560, whatever that is. Yeah, yeah. And that's where I'm going to have like any notes or anything else I, I don't really use it a whole lot. But if I'm doing exercises and stuff, you don't really have much to do when you have things so well prepared. So I'll have Twitter up and stuff.
for ya during the exercises.
And, yeah, let's see.
So do you mostly lead your workshops with the same document that your students would or attend would like the same way that they read it like, like, you know, step one here, I'm gonna do this and they're gonna do this like,
yeah. You mean when I introduced the workshop or when I introduced it?
Yeah, like just keeping yourself on track like, I mean, I guess that you are really well prepared with your instructions.md and outline.md and everything.
Yep, exactly. So when I start an exercise, I say, Okay, everybody open this up. And this is actually I've never given the workshop with this format before. Let me see if I can show you what this used to look like really quick.
Because this is
this is a lot better than it used to be.
I mean, just really quick, the React fundamentals if we go to deploys and we'll go to an older deploy, back in January, here we go. Okay, so this is what it used to look like. And so then you Have the exercise and the final version. I didn't have the instructions, the instructions existed, but they, yeah, they weren't rendered here. And so normally, I would just say, Okay, everybody open up your that markdown file, and well, I wouldn't even ask them to do that I would just open it up and they could do whatever they want. And I would kind of like, not really read through it, but I'd make sure to look at everything and and kind of explain things to make sure that they didn't have any questions about it or whatever. And sometimes I see like a block of stuff and be like, you can read this if you want to. And then I'd skip ahead to the exercise and say, Okay, so this is what we're doing. I tell them what the final looks like. And then say, and you're supposed to make the exercise go. And then I would often, like before I even get started, I'd show them how to get the test going. And I'd say okay, so I'm going to go to 01 or I guess it's one. Oh, where am I? I might not be in the right repo. No, no, I mean The right repo. Alright. 01 doesn't have a test, because it's an HTML file. Okay, so 05 and I'd say, Okay, now I'll go into 05, we'll swap the final for the exercise, that test is failing. Now, your job is to make it pass. And then you can reference this and you can use it use tests if you want to, I don't care. They're just here for you. And then there you go. And so I don't I don't do much teaching. It's, it's pretty much just like, let me orient you on what we're doing. Now the emoji will take you from here, and that is very intentional. And this actually comes from my teaching philosophy, which comes from I teach from this blog post where I talk about this book called make it stick really, really strong recommendation. I read this several years ago, and it just changed the way that I teach people stuff. But the the key that I'm doing here, or the thing that I'm leveraging here, when I Just send them off and throw them in the water is the generation desirable difficulties. So I don't want to I don't want to introduce the concept concepts to them too much before they have to start struggling with it. I say here's the problem we're trying to solve now go solve it. And the emoji are there as your your life jackets or whatever to help you. So you can be successful in doing so. So it's not a frustrating or confusing experience. But I need you to go and do it. That's that's the emoji guides thing that I'm talking about there. So yeah, I just I set them off and then I'll jump into their breakout rooms and say any questions and confusion and I say like struggle is good, but confusion is bad. So what what bad things are you experiencing right now? And with that, I yeah, then I kind of gauge from those visits in the in the breakout rooms like how people are Doing how long it's going to take. And if it's not going to take too long, then I jump back out and say, Okay, we're gonna all come back together. I don't worry about whether people have finished, I do sometimes worry about whether lots of people have actually finished and finished the extra credit and now they're just sitting around waiting. That's what I'm more worried about then worrying about people finishing because I can accomplish this generation and desirable difficulties in just the first like two or three minutes of the exercise. So I typically like I do give them much more time than that, but I don't wait too long before I bring them all back and start working through working through the exercise. Once I've finished the solution, I get through all answer all the questions. Then this elaboration piece is also very important, where they have this link at the bottom where they can click and it will take them to this workshop, workshop, exercise and elaboration feedback. If they gave me their email during that automation scripts, then this will be prefilled. So they Don't have to type that in want to just reduce barriers. And then they need to elaborate on what they're learning, they learn, because that helps with retention, according to the science in, in that book, this book, make it stick. So that's the elaboration piece. And then I invite them to give me feedback and stuff that actually has been very helpful. I have over 5000 responses to this form. Wow. Yeah. So that's kind of fun. But that's, that's the entire exercise workflow. So
how often do you present the feedback form to the attendees?
It's every single exercise has a link.
So and this is the exercise feedback form and then the workshop itself?
Well, it's in the readme.
workshop itself also has a specific feedback form, just for the workshop that I asked people to fill out and this one's I try to keep them pretty short. But yeah, just kind of general, I get most of my value out of the comments here.
From the freeform comments,
yeah, from the free forum comments, and yeah. So this, this one I tell them is just a favor to me, the elaboration and feedback, I really emphasize this. And it's actually it works out really nicely, because it's the last thing that we do for every single exercise is I say, okay, we're finished with this exercise. Nobody else has any more questions, or we don't have time for any more. So we're going to click on this, you're going to open this up and fill out the operation feedback. And I stopped talking for like, 60 seconds to maybe two minutes, and I just say, okay, fill that out, and then we'll come back together, and then I wait, and it's maybe a little awkward, I don't know. But uh, and then we move on. And the nice thing about that is not only does it give them time to reflect, which is really important for their retention, but it also gives them time to just like recoup and like Just Yeah.
And hopefully help them
make connections that they hadn't really considered. And so, yeah, it's it's kind of like a mini break between every exercise.
So how how much of your workshops changed based on the feedback that people give?
I have added exercises from feedback that I've gotten, but not a whole lot in my workshops. The content doesn't normally change a lot. But yeah, there's definitely been some pieces of feedback that I've read and like, Oh, yeah, I totally need to change that. I recently changed my, my, the spreadsheet that this form goes to but if I look at the workshop feedback, responses from my original spreadsheet, let me see if I can find that one.
Yeah, here we go. I can show you
what this looks like,
Oh, no, this is the new one.
workshop. Oh, there it is.
Because I read, I don't read what they learned like that.
Where did I?
Yeah, I don't read eval or evaluate or elaborate on what you learned. I don't I don't really read that sometimes I will, if they leave some weird comments that I'm like, I don't understand what you're talking about. But most of the time, I'm reading their general comment and comments about the exercise. And you will find in here, like there are some that are highlighted in purple, those are the ones that they left some really good feedback. And I thought, you know, that's, that's actually really, really useful. I need to make sure that I add some sort of note or on links to docs, and so on those lines all say okay, let's color that in green. was good feedback. And then when I get it fixed, then I'll color and purple and say, Okay, I addressed that.
That's a good way to do it.
Yeah, so that works out really nicely. It looks like I haven't addressed some feedback that I probably should look at eventually. But, uh, yeah, so that's how that works really recommended. And actually, the feedback form itself is kind of interesting. So you'll notice, if I copy that link address, and then paste it here, these links go to ws kcd. To Im so I make it. I originally had people copy paste this from the markdown files, rather than just click on a link in the app. And there will still actually be some workshops where I don't have an app where I can show this. So this is still relevant. But all that this does, is it redirects people to my elaboration and feedback form. But you'll notice that we also have a couple creased parameters here where I have a workshop and this is the name of the workshop. And we have For exercise, this is the name of the exercise. And e m for email, that's the email address that they've prefilled in. And the I actually generate this using a script that I have on NPM. So anytime I need to regenerate it, I'll just say NPM or run this regenerate thing. And it will go through all of my markdown files and update those URLs to be the same to like prefilled, the workshop the exercise title, and then leave a little m equals at the end. And then when people run the setup script, and they give me their email address, then that updates all of the files to add their email address at the end. So it can be firstname.lastname@example.org. And so then they don't have to fill that in as much or ever.
So and then did you so is this one single form that your query string is doing the behind the scenes magic?
Yep, yeah. So it's actually just a story. Simple now if I deploy, like an HTML file, so it's all client side remapping things because actually Google Forms, they do have the ability to have these different query strings for the different entries. But those don't make any sense to anybody looking at them like me, when I'm updating it in the future or whatever. And so the ws kcd. I am, yep, here it is. Yeah, it's just actually I'm trying to figure out how I could show that to you. ws. Boom, there it is. Yeah, so it just gets stuff from the query string, and then redirects people to the Google forum itself.
Yeah. That's kind of fun.
Cool. So I think that might be everything that I wanted to ask you about. There's a lot. I mean, you've you've done These, you know, you've you've done these workshops a number of times and, and, you know, like, like usual You're awfully well prepared
So how do you? That's I can we dig into that for a second? Sure. Um, where do you kind of draw that line on? This would be boring to do live? I would rather watch videos like how how do you decide? Um,
it kind of is like.
So when we're configuring jest, here, if we look at just an example of one of these, it's like, Okay, so what would the instructions be for test environment? Like you're basically reading a tutorial, I guess, is what you'd have to do. So I guess I kind of judge it based on how well can I make it so that they have to generate the answer for themselves. Have desirable difficulties. And if they can't, like, there's no way for me to say, Well, how do you think you would set the test environment with just like, I don't know, I guess I google it. Yeah. Okay. All right. So yeah, it's like not
like you wouldn't have an exercise to make a new variable.
Yeah, yeah. Well, I mean, I, that might be a little bit different, because like, your expectations of people are different. Like, if I'm, if I'm teaching how to make a new variable, I wouldn't expect that you know how to program at all. And so that might be a good idea. But if I'm teaching you how to configure a tool, like, I think it's pretty obvious for you to like create a property, you just need to know what the property is called, and where to put it. And there's not really any desirable difficulty to do that. You basically just look at this thing and you put it there, and you don't have any additional really understanding for that. And so like, I can see that as being a blog post Kind of tutorial thing, but not really an exercise thing where where you have to kind of generate the answer for yourself, you're like, Okay, here's the problem, I have to solve this problem. You know, and so yeah, there's just no way to really do that when you're configuring Jes. But when you're learning how to like trigger side effects, then I have to save something into local storage, then I can say, Okay, here's how you do side effects, just in general. I'll give you a little code example for that. And let's see, I don't think I've got anything for that in here in this one, but yeah, so just in general, here's how you do side effects in reactor or here's how you would do state, this is how you use state. Let me give you an example of that. Now, I want you to do the same thing, but that for this form, and so you have to think okay, what is the variable name? What am I going to call this variable name? Where do I put the use state call? And so there, there's actual brain stuff happening in your brain. Like you're actually thinking about stuff, rather than just saying, Okay, well, I guess I gotta go Google this. And copy and paste this thing and I didn't learn anything like I still in the future will probably do that exact same thing. So why am I at this workshop? And so in that situation, I'd much rather just record it. And now you can you can watch it, you'll get kind of exposure, it's that that actually makes it a good case for a webinar is like, I just need exposure to how to configure it this thing. And so you get exposure to what's possible. And then you have a reference to the thing that you got exposure to later that you can look for, and like, Oh, yeah, I need to remember that can't configure this so that you only get code coverage for this specific file, only that one needs to be 100%. Remember, he did that. Let me go reference the source. And now I know how to do that. It's those types of things that you don't do on a daily basis, so it doesn't need to be an active recall. Anyway. Those are the types of things that I would just do videos for. Awesome.
Cool. So yeah, that's I think all of my questions for now. Do you have any, like, anything that's surprised you in your journey of of giving remote workshops? Like, is there something that has turned out differently than you thought it would?
I don't know.
I kind of just kind of taking it one one step at a time. So there's I never really came with a whole lot of assumptions about how it would work. I guess I'm a little surprised. I was a little surprised at how much I prefer remote workshops over in person. I like in person workshops. I like interacting with people. And that is it's fun in its own right but
the the remote stuff, I am just able to reach so many more people People and I'm able to do it without traveling. So I guess I didn't expect it to be as successful as it has.
And, and as
I'm able to help people retain stuff and that's just been such a huge focus for what I do. So, I don't know if that really answers your question, but
no, that's, that's great. I mean, it's, I like the taking it one day at a time. And this is whatever we end up doing with this. We'll be able to help people benefit from your, you know, several hundred days. Yeah. That you've that you've taken that they will have to
it's been a lot actually let me I'm just remembered one of the things that I wanted to show before we wrap up. So I am I'm totally cool if people want to rip off this stuff. I really would appreciate it if people give me credit for it. Because it's not been free effort. But I'm totally cool if you want to use it. So it like include me in your README or something. But yeah, so I'll just show you really quick how the setup script works. So remember, when you're running the setup, no, they all they've done is cloned the repo, so they haven't installed any dependencies, they may not even have node installed if they don't have node installed. And that actually won't help them. But they may have an old version of node installed. And so the setup script is written so that it will work for older versions of node. So I'm using var, avoiding template literals, that kind of thing. And so here, what I do is first I log and I'm not using any dependencies. So I'd normally I'd use chalk to color my my output and stuff, but I can't do that here. And so here I'm just saying make this a color blue because that's what the rest of the setup does. And says okay, we're setting up the workshop. And the first thing that I do is I check for n PX And if, if that fails, then I'm saying, hey, MDX isn't, isn't here, you need to update to a more recent version of NPM. So you can get MP x because that's how we run the setup. And so that way, I make sure that they at least have a relative recent recent version of node and then I can run my NPM scripts, which is the thing that I'm really trying to run. And that that does a more thorough check. But I want dependencies. And so that's why we're doing it with NP x. So with that, that just looks like this. This NP x is amazing. I just have this package JSON here, my dependencies. And then here's the script that I want you to run. And it's what I set my been to. And so then it'll just run this. And the main here is I run system validation. And that ensures that all the tools are installed and that actually runs another NPM script that I accidentally just downloaded. Oops.
Yeah. option instead of command. Exactly, yep. Good. I've done that one.
And so this one is dependent depends on semver. And I just pull in the package JSON, right here. Yeah. So I grabbed the package JSON for the project. And I checked out the engines configuration. So if we go to package JSON engines, and just make sure that they have a version of node and NPM installed that satisfies those versions, that's all that this one does. And then like eventually, if I did get back into using a database or something and I say, hey, make sure you install this, then my validation would also check for that. So that's something to that I could update in the future. But then we install dependencies that just runs npm install, I add the dash s so that inevitably, when when this fails, people are going to send me all of the stuff that NPM logs out that says this was not an opinion. With NPM. And that's all they send me. And that's not helpful at all. So I add the dash s so that they send me just the the stuff that actually failed. And so yeah, that runs the install, I haven't packaged lock in all of the the projects so that hopefully it's all the same across everybody. And then we run the validate script. Now the validate script is it's gonna be different in every project. But here we're running in parallel, the build the tests with coverage that basically just turns off watch mode. And also coverage is interesting. And the linting, and it just runs all of those in parallel, but it like it works for every project is going to be a little bit different. And so that's why that just runs the NPM script for that. And by this time, we have all of our dependencies installed. And so that's why I can do that. So like we've already gotten NPM, run parallel and stuff. And then finally I run autofill email, and what that does,
I don't loaded it again.
What that does is it actually runs and Inquirer. And it pops up a prompt. And actually, we have that right here. So it says starting auto filling email, it asks for your email address. And then after 15 seconds, it'll just say, I guess he didn't want to give me your email, that's fine. Just rerun this, again, if you want to pre fill it, it doesn't matter. Like it's fine if you don't want to provide it. But all this does is it looks for all of the files, the relevant files, which in our case is going to be all of the files under source. And anytime it finds finds n and m equals then Oh, just replace that with the email they give me. And that way it pre fills all of those those emails.
And yeah, that's how, that's how the setup works.
So people feel free to rip that off if you want to, I guess.
Perfect. So yeah, that's a A lot of a lot of stuff to take in. But it's all super helpful and super useful. And your your remote workshops have been awesome.
Oh, oh, sorry, Taylor. So one other thing. Yeah, one last thing really quick. So, up until a couple weeks ago, I've been for all of my react workshops. They're all basically the same same sort of thing. It's this app where you have these, these files, exercise, and final, and I want it, like I really liked that it looks like this. Like I said, it used to not look very awesome. But they all looks basically the same. They all have the same structure. And that was very intentional. And I would just copy and paste the app to all of these places to make that work. And I did that very intentionally. I didn't want to make an abstraction prematurely. But after having eight workshops that are well, six workshops that are all basically the same, I finally decided, Okay, it's time to make an abstraction so that I can actually work on it. Make it look nice, thank you for making it look nice, it's awesome. But the way that that works is pretty wild. So I'm not gonna dive too deep into it and how it all works. People can can dive in if they want, but this is how this is all of the code for for the workshop. For this is copy pasted in each one of the workshops, all that it uses is code Gen package, a macro package that I created. And module exports require Kent C, Dodds react workshop app code Gen, and that will generate some code that will get inserted into this file. And it generates that code based on what is in the exercise and final directories. It's pretty wild. It's very cool.
I wonder I think
Yeah, I'm pretty sure that your let's
to the final version, actually.
You look at the elements tab, and it literally is nothing else other than what is in that HTML file. And the way that works, is you'll notice that it actually starts out with our regular app. But then the React workshop app repo will say, oh, you're trying to look at an HTML file, let me just delete everything that's in the document and replace it with what's in that HTML file. Which is kind of kind of crazy. But it works works great.
Is that the kind of thing where like, you would put your network on slow 3g, and then I want to
see what it looks like, well, and it's still not quite perfect it when I do my react performance, when I may have to do some tweaking on here, because you do still download the entire app, you know, for figuring out like, oh, you're on an isolated page. Now, let me do this other thing. So like, there are a lot of things that you're still downloading for this. And so, um, I think ultimately, you'll want to, we may need to do something different for the performance workshop. Maybe just slightly. But, but yeah, like it just makes it so that when you're working in the elements panel, you're literally just looking at the stuff that you have in your HTML file, and nothing else. So it just makes it easier for people who are working through the workshop. And it's also really relevant for when we're working on react stuff. And I'm like, I want to look at the this in isolated. So I can look at my components. And I see literally, all I see is what I see in my file. big help. So anyway, you could maybe accomplish the same thing by having separate create react apps for every single exercise and then pulling those up in code sandbox or something. But then you have to have separate create react apps for every exercise. So have fun with that. I know that there are some workshops and instructors that do that. And they've saved themselves a lot of time but not having to do it. I've done but I sure like what I've done so it's a good experience for the
the attendees. So yeah, anyways,
yeah, so I guess that's a whole different decision on to whether like to put in this amount of work. Where you've basically made like a reusable shell for everything that you teach that fits this specific format? versus like that would probably be super overkill if you're only doing this like one one time,
right? Yeah. And, and like I said, I've This is only the last like three or four weeks that I made this. And so for the last three or four years, I've been copy pasting the app every in every one of these workshops. And it's been a bit of a pain but I think it's better that I, I did it this way and waited because not only was able to deliver something sooner, but the abstraction that I've made is actually very good. And it's perfectly catered to the use cases that I have for my workshops. So I would not recommend, if you want to use use this project, that's totally fine. Anything that's under my my namespace on NPM that that is me signaling to you that I am not going to support your use case. I'm interested in my use cases. So I will not necessarily care about pull requests that you you give me or anything necessarily I might, you know, but I may not. But yeah, so you're free to use it. But if you were to not use it, then I would recommend just doing something dead simple at first and the abstraction will will just manifest itself later
Cool. So, yeah, thanks. Thanks again for for sharing everything that that you do to do what you do. It's been enlightening. enlightening. In light, yeah. enlightening, I guess, would be how you say that. But yeah, so thanks is the short version of what I'm trying to say.
One other pro tip is to
most of the like,
I don't know how else to say this, but egghead in general has been just super super valuable to me in doing all this stuff like I couldn't do nearly as much stuff. I heard a quote that Joe was quoting you the other day that you either want to hold grape or part of a grapefruit and I am so happy to get this giant grapefruit and just a part of that giant grapefruit. And because of what a kid does, so I don't mind taking a piece of this grapefruit because it is so big. I'm able to do so much more because they had manages all this other stuff for me. So if you're watching this and you're like, Hmm, I want to do this stuff. Just know that if you do it with somebody like egghead that's managing the logistics of like, you know, taking tickets and giving refunds and offering support and all that stuff. That's up to me I in huge amount.
So sweet. Thanks and I'm glad that you like Mike. If felt Pretty exciting to me to know that I got quoted for I like that quote, and I. I've had that one with me for a long time. And it's awesome because it. It's a really good illustration, I think. Oh yeah,
that's perfect. Cool.
Well, yeah. Thanks again, Ken. And I'll be seeing you around, I'm sure.
All right. Thanks. All right. Bye bye.