A World-Class Code Playground with Sandpack 🔗
No developer blog or technical documentation site is complete without an interactive code playground. The CodeSandbox team recently released a wonderf [...]
Josh Comeau's blog
Posts
Magical Rainbow Gradients 🔗
If you've ever tried to animate a gradient, you've been met with a harsh reality—it isn't possible. At least, it wasn't! In this tutorial, we'll lever [...]
Promises From The Ground Up 🔗
The “Promises” API is a surprisingly tricky part of modern JavaScript. Without the right context, it doesn’t make much sense at all! In this tutorial, [...]
Snappy UI Optimization with useDeferredValue 🔗
useDeferredValue is one of the most underrated React hooks. It allows us to dramatically improve the performance of our applications in certain contex [...]
Making Sense of React Server Components 🔗
This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the se [...]
CSS in React Server Components 🔗
You can’t make an omelette without cracking a few eggs, and when the core React team unveiled their vision for the future of React, some of my favouri [...]
The End of Front-End Development 🔗
Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a couple of years, we won't need developers any more! [...]
The styled-components Happy Path 🔗
styled-components is a wonderfully powerful styling library for React, and over the years I've learned a lot about how to use it effectively. This art [...]
A Modern CSS Reset 🔗
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I [...]
Demystifying styled-components 🔗
For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses traditional CSS features under-the-hood, and that lac [...]
How I Built My Blog 🔗
An in-depth look at the technical stack behind this very blog! We'll see how I use Next's API routes to implement my hit and like counters, how I use [...]
Folding the DOM 🔗
In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that journey, we'll learn a lot about [...]
Delightful React File/Directory Structure 🔗
How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'l [...]
CSS Variables for React Devs 🔗
CSS Variables are *really* cool, and they're incredibly powerful when it comes to React! This tutorial shows how we can use them with React to create [...]
How To Center a Div 🔗
Back in the day, centering an element was one of the trickiest things in CSS. As the language has evolved, we’ve been given lots of new tools we can u [...]
The Rules of Margin Collapse 🔗
“Margin collapse” has a dastardly reputation, one of the trickier parts of CSS. Fortunately, it gets a lot easier once you learn a few rules! In this [...]
Why React Re-Renders 🔗
In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do th [...]
The Surprising Truth About Pixels and Accessibility 🔗
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility imp [...]
An Interactive Guide to CSS Grid 🔗
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tu [...]
Understanding Layout Algorithms 🔗
As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties t [...]
Full-Bleed Layout Using CSS Grid 🔗
Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is also one of the trickiest. In this tutorial, I break [...]
Hands-Free Coding 🔗
Earlier this year, I lost the ability to use a keyboard and mouse for extended periods. Fortunately, this wasn't as catastrophic as it sounds! This ar [...]
Understanding the JavaScript Modulo Operator 🔗
One of the most commonly-misunderstood operators is Modulo (%). In this tutorial, we'll unpack exactly what this little bugger does, and learn how it [...]
Common Beginner Mistakes with React 🔗
I used to teach React at a local coding bootcamp, and I noticed that students kept getting tripped up by the same handful of things. In this article, [...]
Data Binding in React 🔗
As developers, we don't like working with forms, but they're a critical part of most web applications! In this tutorial, you'll learn exactly how to w [...]
Understanding useMemo and useCallback 🔗
What's the deal with these two hooks?! Lots of devs find them confusing, for a whole host of reasons. In this tutorial, we'll dig deep and understand [...]
Statements Vs. Expressions 🔗
One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressio [...]
Announcing “use-sound”, a React Hook for Sound Effects 🔗
By and large, using the web is a visual experience. This is in terrible contrast to mobile apps, which interact with three of our human senses (sight, [...]
The Perils of Hydration 🔗
A surprisingly-common misconception can lead to big rendering issues that are difficult to debug. This deep-dive tutorial examines how React and Gatsb [...]
Why My Blog is Closed-Source 🔗
In our community, it's so common for developer projects to be open-source. I'm breaking with this trend for my blog, but I have good reasons! In this [...]
A Friendly Introduction to Spring Physics 🔗
Of all the little tips and techniques I've picked up over the years about animation, spring physics remains one of the most powerful and flexible. In [...]
Color Formats in CSS 🔗
CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more. Which option should we choose? This turns out [...]
An Interactive Guide to Flexbox 🔗
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without a [...]
The “const” Deception 🔗
The “const” keyword in JavaScript is used to create constants, variables that can't change. Curiously, though, we do seem to be able to edit objects a [...]
Animated Pride Flags 🔗
Happy Pride month! In this tutorial, I'll share a handful of my favourite animation tricks. You'll learn how to build an animated wavy pride flag usin [...]
Clever Code Considered Harmful 🔗
As engineers, it can be really satisfying for us to implement clever, terse solutions to problems, relying on advanced tricks and techniques. As a res [...]
The Importance of Learning CSS 🔗
I know so many super-talented developers who share the same achilles heel: CSS. Instead of trying to “outrun” CSS, this article explores why leaning i [...]
Refreshing Server-Side Props 🔗
Next allows you to do server-side data-fetching, but what happens when that data needs to change on the client? This brief tutorial shows how to re-fe [...]
Designing Beautiful Shadows in CSS 🔗
When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create r [...]
An Interactive Guide to CSS Transitions 🔗
This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteraction [...]
My Wonderful HTML Email Workflow 🔗
If you've ever had the misfortune of being tasked with building a template for HTML emails, you know it's tricky business! In this blog post, I share [...]
You Don’t Need a UI Framework 🔗
As developers, it can be tempting to grab a pre-styled UI framework like Material UI or Bootstrap. Seems like a great way to outsource design and save [...]
The Front-End Developer's Guide to the Terminal 🔗
If you want to learn a modern JavaScript framework like React or Angular, you better be familiar with the terminal! So many frameworks and tools assum [...]
What The Heck, z-index?? 🔗
The z-index property can be a tricky little bugger. Sometimes, no matter how much you crank up the number, the element never rises to the top! In this [...]
Make Beautiful Gradients 🔗
Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This happens because of a mathematical quirk with RGB co [...]
Building a Magical 3D Button 🔗
Every action we take on the web starts with a button click, and yet most buttons are ho-hum and uninspired. In this tutorial, we'll build an animated [...]
Introducing “Shadow Palette Generator” 🔗
In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors. How do we come up with all of the parameters, though? I' [...]
Accessible Animations in React 🔗
I really love animation, but not everybody does. In fact, it can make some people literally sick! In this tutorial, we'll see how to ensure that we re [...]
An Interactive Guide to Keyframe Animations 🔗
CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird. In this deep-dive tutorial, we'll learn how CSS keyframes [...]
The World of CSS Transforms 🔗
The “transform” property is such a powerful part of the CSS language! In this blog post, we'll take a deep look at this property and see some of the n [...]
How To Learn Stuff Quickly 🔗
As software developers, we're always learning new things; it's practically the whole gig! If we can learn to quickly pick up new languages/frameworks/ [...]
Finding your first remote job 🔗
As remote work becomes increasingly popular, I am frequently asked how to get started. This article shares everything I know about landing that first [...]
Let's Bring Spacer GIFs Back! 🔗
The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs. In this article, we'll see how I [...]
Boop! 🔗
An in-depth tutorial that teaches how to create one of the most adorable interactions I've ever created. We'll learn how to use React components and h [...]
Becoming a Software Developer Without a CS Degree 🔗
A look at how hundreds of developers got their start in the industry despite not having a Computer Science or Software Engineering degree. We'll sort [...]
Embracing modern image formats 🔗
While the weight of our JS bundles is super important, it's not the only factor when it comes to page load time! Images are often several times bigger [...]
2020 In Review 🔗
A look back at 2020. It's been a difficult year for many, and I'm no exception, though I've come out of it stronger than ever and ready for what comes [...]
Chasing the Pixel-Perfect Dream 🔗
Is it possible to create an implementation of a design that matches to-the-pixel? Well, not really, but that shouldn't discourage us! In this article, [...]
Building a Modern-Day Hit Counter 🔗
The 90s are cool again! Funky colors! Guestbooks! In this tutorial, we'll see how the 90s-inspired hit counter works, using modern web tools like serv [...]
A Brief Hiatus 🔗
When I rebooted this blog in early 2020, the plan was to publish 1 new post every 2 weeks. No one was more surprised than myself when I actually stuck [...]
Local Testing on an iPhone 🔗
Learn how to set up an ideal workflow for debugging your development server on your iPhone. This may not be the most exciting topic I've written about [...]
Animated Sparkles in React 🔗
In this dazzling tutorial, we'll see how to build an animated component. Wrap it around text or images and watch them twinkle! This neat trick is a p [...]
Lessons Learned Speaking at Conferences 🔗
Speaking at conferences is equal parts exciting and terrifying. This article is a behind-the-scenes look at what the experience is like, and shares ti [...]
The Quest for the Perfect Dark Mode 🔗
Dark Mode has become common enough that it's a user expectation. And yet, creating the perfect dark mode with a statically-built site/app is deceptive [...]
Styling Ordered Lists with CSS Counters 🔗
Styling an ordered list can be surprisingly tricky; there's no way to get at that bullet! In this tutorial, we'll see a handy trick using CSS counters [...]
Persisting React State in localStorage 🔗
A common thing in React development is that we want to store a bit of React state in localStorage, and re-initialize from that value on the next page- [...]
Effective Collaboration with Product and Design 🔗
How we work with design can have a tremendous impact on our overall output, and yet we don't always treat it as very important. A look at how collabor [...]
My experience as a remote worker 🔗
I've spent half of my career working remotely. This post chronicles those experiences, giving a real-world window into what it's like to work fully-re [...]
Dynamic Bézier Curves 🔗
A deep dive into Bézier curves in React. We'll look at how to build dynamic effects such as scroll-to-flatten using SVG path instructions, and how to [...]
Animating the Unanimatable 🔗
An in-depth look at the surprisingly complicated problem of animating the transition when two items in a list swap positions. [...]