How I built my code playground

Why hello there!

I just published a brand new blog post. It's called “A World-Class Code Playground with Sandpack”.

If you're not familiar, a code playground is an embedded code editor + live preview. It's a must-have component for developer blogs and technical documentation, to let developers poke and prod at the ideas you're sharing.

A couple months ago, I rebuilt my code playground using Sandpack, a wonderful open-source tool built and maintained by CodeSandbox. It's a really delightful piece of tech, and I've been able to build the playground of my dreams with it.

Sandpack is an incredibly flexible tool. I've extended it in a whole bunch of ways, adding features I wish it had, and tweaking the design.

This is the blog post I wish I had when I got started with Sandpack. It's not really a tutorial; their official docs do a good job explaining all of the basics. Instead, this blog post is a collection of the epiphanies I've had about the tool, in terms of the mental model, how it works, and how to get the most out of it.

I put a bucket of work into this one — I hope it's helpful!

Read the new post

As many of you know, I've been working on a beginner-friendly React course, The Joy of React(opens in new tab).

If I'm honest, it's been pretty tough. I figured it would come together really quickly, since I have a lot of experience teaching React (I worked at a React-focused code bootcamp for a few years, teaching JS and React to aspiring web developers). But it hasn't worked out that way.

To make a long story short, I recently had to spend 6 weeks re-doing a big chunk of the course. 😬

React has a notoriously-tricky hook, useEffect. It's easily one of the hardest parts of modern React, but there's no avoiding it; lots of the stuff we do depends on useEffect.

I came up with a whole set of lessons, with videos and exercises and interactives. I wasn't super happy with them. I kept finding myself saying things like "NOTE: We shouldn't actually do things this way", and "We'll learn more about why this is a bad idea shortly".

I showed some of this stuff to a member of the React core team, and they confirmed what I already suspected; there were some pretty fundamental problems here.

Here's the good news, though: I went back to the drawing board, and came up with a better sequence. The whole module is re-ordered, pushing effects back and building a more-solid foundation before we attempt to cover them. All of the videos and exercises are brand-new, and they're so much better.

I have a small group of people helping me test the course, and the early feedback has been overwhelmingly positive so far. One student was pretty confused after going through the first version, and said all his questions were answered with the new version.

So, it's been a heck of a lot more turbulent than I expected, but I'm absolutely thrilled with how the product is shaping up. I believe this'll be the best way to get truly comfortable with some of the most notoriously-tricky parts of React.

So, here's the new plan: The Joy of React will release in mid-January, 2023. It'll be an “Early Access” launch, with about 2/3rds of the total content. It will support “Purchasing Power Parity” from day 1. I'll be sending more emails about it as we approach. 😄

But yeah, that's all I've got for now. Hope you're having a good week so far! 💜
—Josh