The final module in my CSS course, “Little Big Details”, should go out to all Early Access testers today 🎉
Now that all of the core content is completed, I wanted to take a second and tally it all up.
🧵 A thread about numbers…
The course features a bunch of different types of content: videos, articles, exercises, minigames, workshops.
• There are >150 videos as part of the core curriculum, and another dozen videos as part of the Video Archive (and growing!)
• There are 226 individual MDX lessons, with about 150,000 words*
*The calculated total is closer to 170k, but that includes code snippets and MDX components, so I'm guessing it's actually ~150k
There are >500 images and GIFs used within the content, including a bunch of annotated diagrams, over a dozen animal images, and this Where's Waldo puzzle.
(Yes, this is used for a pedagogical reason in the course, I promise.)
(I also include the solution, because I'm not a monster.)
• There are over 1000 custom widget instances in my MDX, including 450 live-editable code snippets.
And dozens of interactive demos like this one, showing how to think about shadow elevations.
There are 9 workshops, in-depth real-world-inspired projects that apply the skills we've learned in the preceding module.
We build some pretty cool stuff in the workshops 😄
I built my own custom course platform for this course. So far, that course platform has over 40k lines of code (38,000 lines of JS, 5000 lines of TS).
There have been almost 5k test users, who have submitted ~1000 pieces of feedback*
💖 Thanks so much, Early Access folks! You've made the course so much better.
*Almost 700 submissions of the feedback form, and at least 300 suggestions through Discord and email.
As a VERY rough estimate, I'd say I've put about 2500 hours of work into this course (and its platform). It's been my full-time focus for about a year now 😮
It's been a labor of love, and I'm SO excited to get this out into the world.
It launches on September 27th, and you can sign up for updates here: css-for-js.dev
A course this size has the potential to be overwhelming, but each bit of content is small (most videos are 5-10 minutes or less), and it's well-organized. You can skip the bits you already know (and follow a link back if it turns out you could use that refresher after all!)
• • •
Missing some Tweet in this thread? You can try to
force a refresh
First, I wanna clarify that this isn't all just about aesthetics. It's important to understand *why* shadows are such a powerful tool.
Shadows give our application depth and realism, and let us focus attention by elevating important elements.
In the past, when I wanted to add a shadow, I'd play with the numbers until I liked the way it looked. As a result, I had a mess of incongruous shadows, breaking the overall illusion of depth 😅
We can avoid this problem by understanding how shadows work.
🌠 It's so easy to get sucked into performance micro-optimization territory.
Someone will say that Method X is slow, and inevitably somebody else will point out that it doesn't really matter outside of contrived, unrealistic benchmarks.
🧵 I wanna dig into that a bit…
Here's an example. We have a list of users, and we wanna filter so that we only show the people who are online.
We can do that with a "filter", or with a "reduce", or with a "forEach". Which is faster? Does it matter? Why or why not?
Are you interested in teaching stuff to developers? Maybe through a blog, or a workshop, or an online course?
🧵 This thread is a quick summary of some of the most-critical stuff I've learned, over years of blogging, teaching at a bootcamp, and working in edtech at Khan Academy.
I believe that there are two categories of learning: active and passive.
Active learning means that the learner is doing something. They're solving a problem, writing some code, playing with an example. Passive learning is watching a video, listening to a lecturer.
Which one is better? Well, I think active learning is probably more effective, but it's also more draining. Nonstop active learning is *exhausting*.
I like to treat it like interval training: I intersperse both types, so that we're constantly hopping between them.
From March 2020 to ~October 2020, I wasn't really able to use a keyboard/mouse.
I've been pretty public about how I worked around it (joshwcomeau.com/blog/hands-fre…), but I haven't been as public about how I overcame it.
🧵 This thread is about my personal experience with RSI.
This is a story about my own experience, not a tutorial for how to solve RSI. Everyone's different, and just because something worked for me doesn't mean it'll work for you.
Please read all the way through before trying anything.
[cw medical stuff / surgery discussion]
In March 2020, I injured my left arm. Certain activities, like typing, would cause a burning pain in the elbow, and occasionally the wrist or fingers.
In May 2020, the same thing started happening in my right arm.
Around this time tomorrow (10AM EST), I'll be launching my first product as an indie hacker, CSS for JavaScript Devs (css-for-js.dev).
It has been one heck of a ride 😅. In this thread, I wanna share what the journey's been like ✨
In early 2020, I developed an RSI that made it impossible to use a keyboard/mouse. I spent months not using a computer at all, and then months training myself to code with dictation and an eye-tracker.
It's mostly better now, but this was a catalyst for my abrupt career change.
I mention this because I think it's important framing: I'm not the type of person that would typically quit their secure, very-well-paid job as a staff engineer *during a pandemic* to pursue an unproven venture. But it felt urgent to me that I do this right now.