Epic Workshop Diff Tab Demo

Kent C. Dodds
Kent C. Dodds

The diff tab of the Epic Workshop app is terrific. It allows you to compare your current work in progress (the playground) with the solution. Very useful if you get stuck. It's also helpful to see what 🧝‍♂️ Kellie the Coworker has been doing to help push you along in your progress as well as compare everything you do between and across exercises.

All in a simple to use interface.

Transcript

00:00 The diff tab in the Epic Workshop app is pretty awesome. It allows you to see the difference between your current step, your current work in progress, and any step throughout the workshop. And it's not just like a way to cheat and find the answer to your problems, but it actually gives you a lot more context. For example, we have Kelly, the coworker here, who helps us throughout the workshop experience. In the previous exercise, we were working on this exact same experience, And now we have a new feature we're going to add to it.

00:32 But there was some busy work that Kelly didn't feel like we needed to do ourselves. And so Kelly did it for us. And so here she says, I was refactoring things a bit and decided we shouldn't need to pass the query and set search params as props. So we can click on refactoring things and that will take us straight to the diff that compares the previous solution to our current problem. Now of course we're going to have a couple of lines here for the instructions that are added for this exercise, but right down here you'll find we have our form and matching posts, and we have those props no longer being passed.

01:06 And so we can see exactly what the changes were that Kelly made, so that it ramps us back up to what we're going to be doing in this exercise. Now, of course, you also might occasionally get stuck and things aren't working the way that you thought they were supposed to. Maybe you have a test that's failing or something and so if you're totally stuck you don't know what you're missing then you can check the diff and this will show you the difference between your current work in progress, the playground, and the solution for what you're working on. So you can click on this and say, oh, I totally forgot this search params provider around here so let's move that right here and boom, now I've got it and I know that I'm in the right place, the test should be passing and everything is good. And if it's still not working or you're still kind of confused about how that made a difference or something, you can always go to the chat, but the diff kind of helps you get unstuck on those simple things.

01:59 In addition, like I said, you can compare any step to any in the entire workshop. So you can say what are all the changes we make from the very beginning of the workshop to the very end of the workshop and this might not always be super super useful to you but it It can be. And then in addition, you can compare between your current work in progress and the next problem. So you can see what are the instructions that get added or whatever you want to do. So being able to choose the range of things for the diff can be pretty helpful as well.

02:38 So that is the diff tab. It's pretty great.

More Tips