Improvements to workshop format?

[kentcdodds]

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]

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]

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: facebook/create-react-app#10695

[Aprillion]

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:

• dark mode background color of the right side (with transparent-background exercise) could be slightly darker than pure white, e.g. hsl(212 25% 80%); (that color also looks good for font color, 9.87:1 color contrast with the current hsl(221 25% 13%) background still meets WCAG AAA)
  
• I feel that the beginning of an Exercise section in markdown files could be better used to describe the exercise first and move the "Production deploys" sub-section to the end
• the right side does not contain the name of the current exercise (which is displayed on the left side before we scroll down) .. which would be fine except the navigation on top contains the names of the previous/next exercises which was confusing to me from time to time (for a second..) => since we display the exercise number on the panel tab, IMHO we could display just the numbers of the previous/next exercise in the navigation on top... or to display the name of the exercise in the available space next to Final tab (below the navigation dots)
• including exercise number in the left side heading wouldn't hurt (I know the number is already all over the place, but redundant info could help reduce cognitive load of making sure I am in the correct source file in my editor)
• using the dice for number format of the extra credits in left side would be super cool, to match the dices on the right side 🎲
• extra credit headings on the left side already have an HTML id => clicking on right side panel tab with extra credit could navigate to #id to scroll the left side

[kentcdodds]

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:

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]

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:

[kentcdodds]

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...