kentcdodds
commented
6 years ago Hey @markerikson! :wave:
What does a normal workshop's content structure / schedule look like?
Whelp, you can look at my outline for my testing workshop at assertjs. Copied below to avoid it getting lost on the internet:
ABOUT THE TRAINING
Building and deploying web applications with confidence is challenging. Verifying that what you’re deploying to production actually works requires a solid suite of automated tests. Knowing how to configure tools and write tests that enhance your development experience is vital to your success.
In this class, we’ll explore the merits and tradeoffs of different forms of testing and get into configuring and using specific tools to increase confidence in deploying our applications.
Join Kent C. Dodds and learn invaluable skills you can take back to improve your JavaScript applications.
You will:
- Learn the why, how, where, and what to test.
- Explore the difference between various forms of testing.
- Set up the tooling for unit and integration tests using Jest.
- Write unit tests for JavaScript utilities and React components using Jest.
- Create integration tests across JavaScript modules.
- Set up the tooling for E2E (end-to-end) tests with Cypress.
- Write E2E tests for an application using Cypress.
- Understand when/where/how to run tests in a continuous integration environment.
SCHEDULE
9:30am – Tech Check, Coffee, and Hello
10:00am – Background, context, definitions, and the what and why of testing applications
10:30am – Configure Jest for the backend unit tests
11:00am – Learn about writing unit tests
11:30am – Exercises
12:00pm – Configure Jest for the frontend unit tests
12:15pm – Learn about writing frontend unit tests
12:30pm – Lunch and Exercises
1:30pm – Learn about writing backend integration tests
2:00pm – Exercises
2:30pm – Learn about writing frontend integration tests
3:00pm – Exercises
3:30pm – Configure Cypress for the application E2E tests
4:00pm – Learn about writing E2E tests with Cypress
4:30pm – Exercises
5:00pm – Wrap up, links, and resources
*Note that this is a rough schedule of how it will typically break down, but that this will be adjusted as we go to make sure everyone can follow along.
Proceeds from the training ticket sales will be donated to the Conference Diversity and Inclusion Scholarship. For details on the scholarship and application process, click here.
Hopefully that's a helpful example :)
What materials do you prepare for a workshop?
You can generally split workshops into two categories:
- Let's build this thing together
- Let's work through these isolated examples
An example of the first is my webpack workshop (slides and repo). If you look at the repo, you'll see a TON of branches. In an effort to avoid people falling behind, I create a branch for every step of the way.
This is great because it makes it really easy for people to keep up and therefore reduces frustration and helps keep the focus on learning. But it comes at the expense of the instructor because it's EXTREMELY hard to make it work well. For example. If I decided I wanted to change something about the webpack config or app at the very beginning of the workshop, I'd have to update it in every branch. This was NOT easy, but it paid awesome dividends because I could provide the git diffs in my slides which people loved.
An example of the second kind of workshop is my es6 workshop (slides and repo). This one is way easier, but the problem is that attendees can get lost in the examples and exercises because they're all very different and don't generally share a common context. This means that in addition to learning what you're teaching, they're also spending time getting context about your examples and exercises for every topic which can be distracting.
You can combat this by making your examples contrived. But people complain about examples that are too contrived. But if you make it too practical/real-world then there can be a LOT of distractions that are unrelated to their learning as well. So you need a good balance here.
So what I generally try to do is come up with the simplest example of a non-contrived "let's build this together" kind of example that I can come up with so managing it isn't a nightmare, but it's still "real-world-ish." That's why I'm currently rewriting my testing workshop repo from scratch. And it's why I rewrote my ASTs workshop the night before I gave it at Frontend Masters so my examples were almost all about console and built upon each other a fair amount to avoid the context switching problem.
You'll notice the AST workshop repo isn't using branches but instead a tool that I created called split-guide. This allows me to have the final code and the exercise code inline in the same file which makes managing the exercises a million times easier. I actually do this with my ES6 workshop as well.
I tried to do this with my testing workshop last time I gave it at Frontend Masters and it worked fairly well, but because it's more of an app vs a collection of directories it didn't fit quite as well. So what I'm planning on doing instead is just manually putting the solution next to the blank exercise file and managing it manually. I think it'll work better in this case.
Oh, one other thing, in my ES6 workshop, I created this quizzes thing that I used to teach the features. If you watch the recording you'll see it in action. It works pretty well. It's based on some stuff I learned in the book Make it Stick which I highly recommend.
Oh, and another other thing. I also started collecting feedback on every exercise using a Google Form. You'll notice this in my ES6 workshop as well. This is a good way to help the attendees reinforce what they learned (they are supposed to write what they learned) as well as provide me feedback for every exercise which has been interesting and helpful in some cases.
What other planning and prep do you do?
Hmmm... The time I put into preparing the content (slides and repo) is generally enough prep. I do recommend giving the workshop to a local group or co-workers before doing it for money though :) You'll learn a LOT. Like I said, I rewrote my ASTs workshop the night before I gave it at Frontend Masters. I did that because of feedback I got when I gave the workshop to two co-workers. If you watch it on YouTube and then on Frontend Masters, you'll see it's basically an entirely different workshop and it's clear which one is better (FEM is :wink:)
What prerequisites do you expect from the attendees in terms of computers, material, reading, or installed tools/software?
This is a good question. Whatever the requirements, always make it very clear what the software requirements are. Email them about it more than once. And make it as easy as possible for people to download and setup their computers with your material before hand. I generally have a setup npm script that I have people run (npm run setup) which verifies their computer is up to spec and that all the other scripts can be run properly (testing, build, linting, etc.). I encourage people to report issues before the workshop so I can work out kinks. I don't think I could have ever given the Testing workshop for Frontend Masters if I hadn't done this because we would have been trying to get people downloading Mongo the whole time (related tip: do NOT require people have a database installed unless that is what you're teaching about).
I actually built a tool to help with this as well: https://github.com/kentcdodds/workshop-setup
Enjoy that!
Any other tips or suggestions?
Here's some notes from a Google Keep note I have:
- Quiz attendees occasionally to determine if you're going too fast.
- Have "bonus" material for the advanced folks to work ahead on.
- Walk around the room and talk with everyone
- Write everyone's name down and learn/use them
- Use generation (pre-quiz) and reflection ("what are the core concepts of what we just learned?")
I would say that during the exercises, get up and walk around the room. People are much more willing to ask you questions if you're right next to them.
Try to get people to work together and teach each other.
This blog post has some good tips: A better way to teach technical skills to a group. I like the sticky-note/post-it note idea there and used it once. It worked pretty well I think.
Other than that, ummm... Good luck!!!
shannonbux
I'm hoping to start teaching some workshops later this year. I've actual classroom teaching experience and have given conference / brown-bag lunch-type presentations before, but I don't have a clear idea what teaching a workshop should include. I assume that there's a lot of time spent on exercises, rather than just the teacher lecturing the whole time, but I'm not sure what an appropriate split is, or how to plan and prep for a workshop.
So: