Josh W. Comeau
@joshwcomeau.com
Indie developer and educator. Blogging at http://joshwcomeau.com.
Previously at DigitalOcean, Khan Academy. Taught at Concordia Bootcamps.
He/Him 🌈
Previously at DigitalOcean, Khan Academy. Taught at Concordia Bootcamps.
He/Him 🌈
Happy Halloween! 🎃
I think Halloween is my favourite holiday. It’s just so *weird.* I passed by a Subway restaurant that had a poster like this in their window, and it just struck me what an unusual thing this is for a business to do. 😂
I think Halloween is my favourite holiday. It’s just so *weird.* I passed by a Subway restaurant that had a poster like this in their window, and it just struck me what an unusual thing this is for a business to do. 😂
October 31, 2025 at 2:32 PM
Happy Halloween! 🎃
I think Halloween is my favourite holiday. It’s just so *weird.* I passed by a Subway restaurant that had a poster like this in their window, and it just struck me what an unusual thing this is for a business to do. 😂
I think Halloween is my favourite holiday. It’s just so *weird.* I passed by a Subway restaurant that had a poster like this in their window, and it just struck me what an unusual thing this is for a business to do. 😂
So it’s true that you can create a single awkward overshoot with cubic bezier curves, but you can’t do anything like this:
October 28, 2025 at 6:17 PM
So it’s true that you can create a single awkward overshoot with cubic bezier curves, but you can’t do anything like this:
I use this on my blog / in my course! It's neat, especially when you use CSS to make them look like little keyboard keys. 😄
October 21, 2025 at 6:31 PM
I use this on my blog / in my course! It's neat, especially when you use CSS to make them look like little keyboard keys. 😄
The organizers of React Advanced Canada just gave me a 10% discount code to share with y’all: JOSHFRIENDS ✨
I’m really looking forward to this one 😄. It‘ll be held in Toronto next March, and the speaker lineup is 🔥🔥🔥.
reactadvanced.com/canada/
I’m really looking forward to this one 😄. It‘ll be held in Toronto next March, and the speaker lineup is 🔥🔥🔥.
reactadvanced.com/canada/
October 14, 2025 at 3:11 PM
The organizers of React Advanced Canada just gave me a 10% discount code to share with y’all: JOSHFRIENDS ✨
I’m really looking forward to this one 😄. It‘ll be held in Toronto next March, and the speaker lineup is 🔥🔥🔥.
reactadvanced.com/canada/
I’m really looking forward to this one 😄. It‘ll be held in Toronto next March, and the speaker lineup is 🔥🔥🔥.
reactadvanced.com/canada/
I think this is a really great point. I’ve had *moments* with Cursor where it’s been 10x faster than what I’d have done by hand, and those moments are super memorable. But most of the time, my experience is a lot more mixed.
October 12, 2025 at 6:58 PM
I think this is a really great point. I’ve had *moments* with Cursor where it’s been 10x faster than what I’d have done by hand, and those moments are super memorable. But most of the time, my experience is a lot more mixed.
Early feedback for Whimsical Animations has been super positive so far. ❤️
Excited to get the rest of the course done!
Excited to get the rest of the course done!
October 9, 2025 at 9:42 PM
Early feedback for Whimsical Animations has been super positive so far. ❤️
Excited to get the rest of the course done!
Excited to get the rest of the course done!
Here’s another one, from Max. Love the patterns when they layer! 💖
October 8, 2025 at 2:29 PM
Here’s another one, from Max. Love the patterns when they layer! 💖
✨ Folks have been going through my Whimsical Animations course for a couple of weeks now, and they’re starting to share some of the stuff they’ve created. It’s *so cool* getting to see what people come up with!
For example:
For example:
October 8, 2025 at 2:05 PM
✨ Folks have been going through my Whimsical Animations course for a couple of weeks now, and they’re starting to share some of the stuff they’ve created. It’s *so cool* getting to see what people come up with!
For example:
For example:
It’s so frustrating to me, because I’ve been using purple gradients for a long time! It’s a lovely color and it’s irritating that AI has appropriated it. 😅
This is the earliest example I can find, something I built in 2017:
This is the earliest example I can find, something I built in 2017:
October 3, 2025 at 3:19 PM
It’s so frustrating to me, because I’ve been using purple gradients for a long time! It’s a lovely color and it’s irritating that AI has appropriated it. 😅
This is the earliest example I can find, something I built in 2017:
This is the earliest example I can find, something I built in 2017:
Over time, I gradually started getting more and more detailed with them. I don’t think this was even a conscious choice, it was just a thing that started happening 😂. By the end of The Joy of React, the summaries are more like this:
September 27, 2025 at 4:53 PM
Over time, I gradually started getting more and more detailed with them. I don’t think this was even a conscious choice, it was just a thing that started happening 😂. By the end of The Joy of React, the summaries are more like this:
I do, *kinda* 😅
The Joy of React was the first course where I started adding video summaries, and their original intent was to make it so that students could refresh their memories about what a video covered, without having to watch the whole thing again.
Here’s an early example:
The Joy of React was the first course where I started adding video summaries, and their original intent was to make it so that students could refresh their memories about what a video covered, without having to watch the whole thing again.
Here’s an early example:
September 27, 2025 at 4:53 PM
I do, *kinda* 😅
The Joy of React was the first course where I started adding video summaries, and their original intent was to make it so that students could refresh their memories about what a video covered, without having to watch the whole thing again.
Here’s an early example:
The Joy of React was the first course where I started adding video summaries, and their original intent was to make it so that students could refresh their memories about what a video covered, without having to watch the whole thing again.
Here’s an early example:
I gave my blog the “Whimsical Animations” treatment, for the course launch. 😄
Rest assured, the big multiplayer rainbow will be back next week. 🌈
Rest assured, the big multiplayer rainbow will be back next week. 🌈
September 24, 2025 at 7:51 PM
I gave my blog the “Whimsical Animations” treatment, for the course launch. 😄
Rest assured, the big multiplayer rainbow will be back next week. 🌈
Rest assured, the big multiplayer rainbow will be back next week. 🌈
Hmm… I’ve heard from two people now who’ve told me that my emails are coming through as all question marks. 🤔
It’s not tied to a specific email client (one was Outlook, one was Gmail), and it’s definitely not happening to everyone.
Anyone know what could be causing this?
It’s not tied to a specific email client (one was Outlook, one was Gmail), and it’s definitely not happening to everyone.
Anyone know what could be causing this?
September 24, 2025 at 7:18 PM
Hmm… I’ve heard from two people now who’ve told me that my emails are coming through as all question marks. 🤔
It’s not tied to a specific email client (one was Outlook, one was Gmail), and it’s definitely not happening to everyone.
Anyone know what could be causing this?
It’s not tied to a specific email client (one was Outlook, one was Gmail), and it’s definitely not happening to everyone.
Anyone know what could be causing this?
I also need to fix my hit counter 😂 I never expected to hit 7 digits!
September 18, 2025 at 3:01 PM
I also need to fix my hit counter 😂 I never expected to hit 7 digits!
Really appreciate everyone who has shared my blog posts. ❤️
According to Fathom, the #1 source of traffic for my blog is "Direct / Unknown", which I *think* is mostly people following shared links (eg. pasted into work slacks). More people visit that way than through Google!
According to Fathom, the #1 source of traffic for my blog is "Direct / Unknown", which I *think* is mostly people following shared links (eg. pasted into work slacks). More people visit that way than through Google!
September 18, 2025 at 3:01 PM
Really appreciate everyone who has shared my blog posts. ❤️
According to Fathom, the #1 source of traffic for my blog is "Direct / Unknown", which I *think* is mostly people following shared links (eg. pasted into work slacks). More people visit that way than through Google!
According to Fathom, the #1 source of traffic for my blog is "Direct / Unknown", which I *think* is mostly people following shared links (eg. pasted into work slacks). More people visit that way than through Google!
I wish English had a piece of punctuation that combined the exclamation point (!) with the colon (:), for when you want to show someone something and you’re very enthusiastic about it.
What do y’all think? Would this be good, or is this absolutely cursed? 😂
What do y’all think? Would this be good, or is this absolutely cursed? 😂
September 15, 2025 at 8:33 PM
I wish English had a piece of punctuation that combined the exclamation point (!) with the colon (:), for when you want to show someone something and you’re very enthusiastic about it.
What do y’all think? Would this be good, or is this absolutely cursed? 😂
What do y’all think? Would this be good, or is this absolutely cursed? 😂
I will not be buying the new iPhone. Not sure I’ll ever buy another Apple product, after this:
September 9, 2025 at 7:54 PM
I will not be buying the new iPhone. Not sure I’ll ever buy another Apple product, after this:
I share two solutions in the post:
1. Using CSS filters to do the hue rotation
2. Applying the transition to a *custom* property, leveraging CSS Houdini’s @property method.
Either way, we can fix our issue, and wind up with vibrant, continuous color animations like this:
1. Using CSS filters to do the hue rotation
2. Applying the transition to a *custom* property, leveraging CSS Houdini’s @property method.
Either way, we can fix our issue, and wind up with vibrant, continuous color animations like this:
September 8, 2025 at 7:52 PM
I share two solutions in the post:
1. Using CSS filters to do the hue rotation
2. Applying the transition to a *custom* property, leveraging CSS Houdini’s @property method.
Either way, we can fix our issue, and wind up with vibrant, continuous color animations like this:
1. Using CSS filters to do the hue rotation
2. Applying the transition to a *custom* property, leveraging CSS Houdini’s @property method.
Either way, we can fix our issue, and wind up with vibrant, continuous color animations like this:
Here’s a GIF showing one of the issues. As the particles rotate through the color wheel, they become gray in the middle. 🤔
Also: if I tried to do a full lap around the color wheel (going from 0° to 360°, for example), the color wouldn’t change at all. 🤨
Both issues share the same root cause.
Also: if I tried to do a full lap around the color wheel (going from 0° to 360°, for example), the color wouldn’t change at all. 🤨
Both issues share the same root cause.
September 8, 2025 at 7:52 PM
Here’s a GIF showing one of the issues. As the particles rotate through the color wheel, they become gray in the middle. 🤔
Also: if I tried to do a full lap around the color wheel (going from 0° to 360°, for example), the color wouldn’t change at all. 🤨
Both issues share the same root cause.
Also: if I tried to do a full lap around the color wheel (going from 0° to 360°, for example), the color wouldn’t change at all. 🤨
Both issues share the same root cause.
✨ I’m working on the “Animation Design” bonus feature, for my upcoming animations course!
Having way too much fun with these demos. 😄
Having way too much fun with these demos. 😄
September 4, 2025 at 8:56 PM
✨ I’m working on the “Animation Design” bonus feature, for my upcoming animations course!
Having way too much fun with these demos. 😄
Having way too much fun with these demos. 😄
🔥 Here’s one of my favourite little details from the new site. A springy money trampoline!
🔊 Sound on for this one! I matched the underline’s spring settings to match the sound effects, so that the oscillation speed matches the boing pitch. 😄
🔊 Sound on for this one! I matched the underline’s spring settings to match the sound effects, so that the oscillation speed matches the boing pitch. 😄
August 25, 2025 at 6:06 PM
🔥 Here’s one of my favourite little details from the new site. A springy money trampoline!
🔊 Sound on for this one! I matched the underline’s spring settings to match the sound effects, so that the oscillation speed matches the boing pitch. 😄
🔊 Sound on for this one! I matched the underline’s spring settings to match the sound effects, so that the oscillation speed matches the boing pitch. 😄
I think the biggest challenge with this is that I'm not giving it a typical document, I’m giving it a .vtt file, which is formatted as a bunch of sentence fragments.
If the tool tries to translate each fragment on its own, the output wouldn’t make as much sense. 🤔
If the tool tries to translate each fragment on its own, the output wouldn’t make as much sense. 🤔
August 21, 2025 at 2:26 PM
I think the biggest challenge with this is that I'm not giving it a typical document, I’m giving it a .vtt file, which is formatted as a bunch of sentence fragments.
If the tool tries to translate each fragment on its own, the output wouldn’t make as much sense. 🤔
If the tool tries to translate each fragment on its own, the output wouldn’t make as much sense. 🤔
✨ My next course, Whimsical Animations, officially has a release date: September 24th! A little over a month from now. 😄
This’ll be another “Early Access” release, with about half of the content available from day 1. Based on feedback from beta testers, this seems to be ~10-15 hours of stuff.
🧵
This’ll be another “Early Access” release, with about half of the content available from day 1. Based on feedback from beta testers, this seems to be ~10-15 hours of stuff.
🧵
August 19, 2025 at 6:51 PM
✨ My next course, Whimsical Animations, officially has a release date: September 24th! A little over a month from now. 😄
This’ll be another “Early Access” release, with about half of the content available from day 1. Based on feedback from beta testers, this seems to be ~10-15 hours of stuff.
🧵
This’ll be another “Early Access” release, with about half of the content available from day 1. Based on feedback from beta testers, this seems to be ~10-15 hours of stuff.
🧵
The blog post shows you how paths work by walking through them step by step. For example, here’s how the M (Move) and L (Line) commands work:
August 18, 2025 at 3:31 PM
The blog post shows you how paths work by walking through them step by step. For example, here’s how the M (Move) and L (Line) commands work:
If you’ve used vector graphics software like Illustrator/Figma, <path> is very much like the pen tool. We use it to chain a set of drawing instructions together.
They’re useful for a bunch of stuff, but I find myself using them most often to create icons that have lil’ micro-interactions:
They’re useful for a bunch of stuff, but I find myself using them most often to create icons that have lil’ micro-interactions:
August 18, 2025 at 3:27 PM
If you’ve used vector graphics software like Illustrator/Figma, <path> is very much like the pen tool. We use it to chain a set of drawing instructions together.
They’re useful for a bunch of stuff, but I find myself using them most often to create icons that have lil’ micro-interactions:
They’re useful for a bunch of stuff, but I find myself using them most often to create icons that have lil’ micro-interactions: