search

kentcdodds / react-workshop-app

An abstraction for all my React workshops
https://kentcdodds.com/workshops
MIT License
149 stars 37 forks source link

Improvements to workshop format? #42

Open kentcdodds opened 3 years ago

kentcdodds commented 3 years ago

I've run into a LOT of limitations that I've had to work around by using CRA for these workshops. I got really creative with codegen.macro, but now that I'm adding TypeScript support, I want to have different configs for the exercises and the final version of the exercises (so we can have strict mode enabled by default in the final, but not in the exercise).

So I'm making drastic changes to how react-workshop-app works. My plan is that this change will barely be noticeable by people going through the material as it's just the tooling/backend stuff that's changing here. I'm going to try and use Remix. BEFORE YOU WORRY: I've gotten permission from the remix authors to put remix in the "bundledDependencies", which means folks won't need to have a license to install this package even though it's using remix under the hood. Like I said, you shouldn't even notice that remix is powering everything. But I promise you that I will! 😅

So, while I'm at it, I figured I'd reach out and see whether folks are interested in offering feedback on the format of the workshops and the app. Everything's on the table, though a LOT of the way the workshops are set up are based on actual experience of many formats, so it's very possible that I won't accept your idea and I may not have time to explain why, but if you have some feedback on the format/setup of the workshop, I'd like to hear them here and now while I'm in the process of changing everything.

I'm curious about stuff like, the visual design of the app itself, where the exercise/final files are located on disk, etc. Stuff like that.

Thanks for any and all feedback!

kentcdodds commented 3 years ago

Oh, one other thing... If I do decide to make drastic changes to things in a way that would be at all confusing for folks watching the videos, then I won't update the workshops until I get the videos re-recorded. So don't worry if you're going through things right now. You can ignore this for now.

kentcdodds commented 3 years ago

Actually, this rewrite would be a lot of effort and only marginally better than what we have. Because of the unique requirements of this app, we wouldn't be able to leverage Remix's cool features much anyway. And if I can get this solved then I think I'd be fine to stick with CRA: https://github.com/facebook/create-react-app/issues/10695

Aprillion commented 3 years ago

I don't have any major pain points, this workshop format works very nicely. But better to brainstorm now rather than after a big rewrite, so here are a few minor points that I noticed:

kentcdodds commented 3 years ago

dark mode background color of the right side

This is tricky because I really want to limit the "extra stuff" the exercises have to avoid distractions. I really want the isolated pages to be 100% just what you see in the exercise file. I don't think supporting dark mode will be reasonable 😬

move the "Production deploys"

This is definitely a possibility. That'll amount to updating this gist: https://gist.github.com/kentcdodds/436a77ff8977269e5fee39d9d89956de

the right side does not contain the name of the current exercise

Fair point. We can probably improve that. We could even put it on the left or right of the Exercise/Final tabs.

including exercise number in the left side heading

I think this would be a reasonable improvement as well. Could probably automate this with that gist as well.

using the dice for number format

That's a pretty good idea, though it gets tricky when there are more than 6 extra credits. Beyond 6 (like in this exercise) we just use a 20 sided die:

image

Perhaps an argument could be made that this exercise should be split into 2. However, my little secret about the exercise/extra credit structure is that in a live workshop, I want to cover every exercise, but I don't always cover every extra credit. It depends on how much time we have 😅 But I could definitely just say in a live workshop of that one that we may not cover all exercises depending on the time we have. Though I don't think that's the only one with many extra credits... Hmmm....

clicking on right side panel tab with extra credit could navigate to #id to scroll the left side

I love this idea 👍 Thanks!

Aprillion commented 3 years ago

isolated pages to be 100% just what you see in the exercise file

adding background to the iframe's parent div would not affect the isolated pages in any way (they already have transparent background - at least I hope that the default background color of the root element inside an iframe is transparent in all browsers)..

20 sided die

😅 ... well, now that you mention it, the exercises with too many extra credits felt a bit overwhelming towards the end - but even if a decision would be made whether to split this particular one, the framework should probably support higher numbers... e.g. unicode characters like ⓻, or 2 dice (probably 5+2, 5+3, ... for easier sum in the head) .. or there are these playing cards that start from 7:

605px-Bohemian_pattern
kentcdodds commented 3 years ago

Ah, a background in the iframe as you suggested might be ok... I do want to limit the difference between the exercise page (with the instructions on the left) and the isolated page though 😬

Well, there are: 🂱 🂲 🂳 🂴 🂵 🂶 🂷 🂸 🂹 🂺 🂻 🂽 🂾

And react-icons does have playing card icons: https://react-icons.github.io/react-icons/search?q=card7hearts

Hmmm...