I've been doing a lot of video streaming lately, so last week, I upgraded my Internet to 400mbps down/20Mbps up, made a wired connection so I didn't have to go through WiFi. I was gloriously blowing past the 400k into almost th 500's, guffawing as I downloaded with ease; uploading 4k files to YouTube without a care in the world.

Then my wife had a great idea...Why don't we visit our daughters. We can stay at the State Park with all those hiking trails. That could only mean one thing...back to a slow connection. Barely two bars on a slow cell dependent network on a shared limited speed budget. Oh the humanity.

That reminded me of when my friend Morten challenged me to develop a prototype for an idea I had for a long time. Help people learn JavaScript concepts in the same way I learned English...within context.

From challenge to completion, I had 48 hours.Then, just like the slow connection at the park, the project was picked up as a course. I had a chance to slow down...go back to the beginning and try to structure what I did into a process that could be worked on by a team. Like they say...slow is smooth, smooth is fast.

In the new prototype, I did everything, except for the graphics...which came from a service. Writing, recording, editing, animation, audio, special effects. I'm used to the first two, but I don't normally do the others in my day-to-day job.

Like with most of my other courses, I start with a list of topics I want to cover. For this project, I have to think of the example I need to use...in context. Something practical, visual that makes sense. For the first topic, I picked the modulus operator. The hardest part is to think of the example that would make sense...in a visual way.

Modulus is perfect for extracting the nth item in a count. Technically it gives you the remainder of a division, but when that remainder is 0, it means the item is perfectly divisible so 4%2 is 0 and so is 8%2 or 234%2. So what could I possibly use that made sense.

What do people count visually? Sheep...I thought. So how do we turn that into an app using modulus. Well, I first though of a sheep herder and move on to a sheep shearer. Maybe, I thought, they get paid for shearing a certain number of sheep.

In my mind I first thought of a for loop, but that would mean knowing in advance how many sheep there were. If someone knew the quantity of sheep already, why would they need to write code at all? The problem with context is that it has to be logical.

So I moved on to a count variable and a button to advance the count. Then it all made sense. The shearer might have trouble counting all the sheep in advance sincee counting sheep is what people do to go to sleep. The rest of the concept almost wrote itself.

After talking to the larger team, I decided to do Photoshop comps, since they use After Effects/Premiere to animate things. I mocked up the PSD into layer folders, with each folder representing an animation keyframe...a point at which a main change happens in the sequence.

Next, I needed to find a way to communicate how to animate the idea. For regular courses, we use a storyboard templates. I don't like them because as a writer, I'm tweaking things until I record.

When I worked at a radio station our commercials had their own special format, which can also describe effects...albeit sound instead of visual written directly into the script. I adapted it to this new process. It's pretty common for me to re-write scripts while I'm recording, so this format lets me make changes easily.

In the original 48 hour sprint, I ignored process to go as fast as possible. It's like in Flight of the Phoenix, where they have to strip the plane to a minimum to make it fly. For the next phase, the new one took me a few more days so that I could figure out the best way to collaborate with others. Slow is smooth...smooth is fast.

The Toolbox Episode 06

As you probably know, another one of my projects is the launch of a new show I'm livestreaming every wednesday 10am PST, 1pm EST called the Toolbox. In the latest episode, I explored the coolest new Bootstrap 5.1 features, plus I added two pre-recorded tips. I think it turned out pretty well.

I knew I was going on a trip, so I programmed a couple of excerpts to appear as bonus content in the feed. The first one is already there by the time I wrote this article.

I've been hearing complaints about the streaming quality. I'm not sure if it's LinkedIn or Streamyard, but I can see it. When I uploaded the excerpts, I upload them in 4k, so they should be clearer. I also simulcast to my YouTube channel http://youtube.com/planetoftheweb. Here's the YouTube Embed (which you might need to click on in an email to watch.)

I normally do a section called 'Shorts' and while I was doing them, I discovered this new framework called Assembler CSS. Not the greatest name, but it really felt like what the next version of Tailwind CSS should be. It's a bit weird to get used to, but eventually awesome. I'm recording and delivering these in 4k.

Next Week

Next week in The Toolbox, I'm going to do some demos of frameworks. I'm still debating what to try. I love the concept of Alpine.js or Astro. I enjoyed exploring Assembler CSS, so maybe something in the same vein.

Wow, sorry I almost didn't get an edition this week. I was traveling most of the day thursday. See you next week.