Getting Started with Anchor Positioning
For decades, one of the most notoriously-challenging problems on the web has been sticking one element to another element, for things like tooltips and nested menus. The CSSWG has ...
Feed
Josh Comeau's blog
Latest entries from Josh Comeau's blog.
CSS vs. JavaScript
There are a bunch of JavaScript animation libraries out there, and you might have wondered whether there’s a performance cost compared to traditional CSS transitions and keyframe a...
Scroll-Driven Animations
The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript! It’s honestly a very lovely API, and in this blog post, we’ll explore some of t...
Squash and Stretch
Have you ever heard of Disney’s 12 Basic Principles of Animation? In this tutorial, we’ll explore how we can use the very first principle to create SVG micro-interactions that feel...
Sneaky Header Blocker Trick
There is a lil’ UI detail on this blog. Most people don’t even notice it, but the ones who do often reach out, asking how on earth it works. It feels like it defies the rules of CS...
Sprites on the Web
In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web these days. Which is a shame, because we can do some pretty c...
Brand New Layouts with CSS Subgrid
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would...
Springs and Bounces in Native CSS
The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS! That said, there are some limitations and quirks to be aware of. ...
The Big Gotcha With @starting-style
CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously ...
Color Shifting in CSS
A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big lim...
An Interactive Guide to SVG Paths
SVG gives us many different primitives to work with, but by far the most powerful is the element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax...
A Friendly Introduction to SVG
SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover...
Partial Keyframes
CSS Keyframe animations are so much more powerful than most developers realize. In this tutorial, I’ll show you something that completely blew my mind, a technique that makes our k...
The Height Enigma
One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights. Sometimes, seemingly at random, setting height: 100% ...
The Post-Developer Era
When OpenAI released GPT-4 back in March 2023, they kickstarted the AI revolution. The consensus online was that front-end development jobs would be totally eliminated within a yea...
A Million Little Secrets
I spent the past few weeks packing as many easter eggs as I could into my latest project, and in this blog post, I want to dig into some of the more interesting details! If you’re ...
Container Queries Unleashed
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we st...
Next-level frosted glass with backdrop-filter
Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to c...
A Framework for Evaluating Browser Support
Lots of exciting new features have been landing in CSS recently, and it can be tough trying to figure out if they’re safe to use or not. We might know that a feature is available f...
A Friendly Introduction to Container Queries
It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them? It turns out that container queries are kinda tricky; they’re not a...
How I Built My Blog
I recently launched a brand new version of this blog, and in this post, I share how it’s built! We’ll examine the tech stack and see how all of the pieces fit together, as well as ...
The Undeniable Utility Of CSS :has
Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist. Once I started using it, however, I kept discovering incredible thing...
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, you’ll build an intuition for...
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 contexts. I recently used it to solv...
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 favourite libraries got scrambled 😅....
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 use… But how do we pick the bes...
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 tutorial, we'll build a mental m...
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 can help us solve practical pr...
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 server. This is a significant pa...
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 using CSS keyframes and linear gra...
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 and arrays that are created usi...
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! …Or at least, that's the narra...
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, we're going to go through 9 of...
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 wire up all of the different fo...
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 to be a surprisingly importan...
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 arbitrary breakpoints. In this ...
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 wonderful tool called Sandpack, to he...
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 what they do, why they're usef...
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 this? In this tutorial, we'll un...
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 expressions. In this blog post, we'll d...
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 the approach I took to build r...
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 implications, and how to determin...
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 a bunch of time, right? In my...
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 assume that you're proficient with ...
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 to calculate layouts. In this b...
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'll share how it works, what the...
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 colors. Fortunately, we can work...
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 believe I have a better set o...
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've built a tool that'll help.
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 rich, lush, lifelike shadows. I...
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 work from the ground up, and s...
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 nifty things it can do.
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/tools, we'll become so much mo...
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 lack of clarity can cause real pr...
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 MDX to add interaction and cus...
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 3D button with HTML and CSS th...
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 in and going deeper can be a tr...
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 article, we explore stacking ...
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 microinteractions and other animations.
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 article shares my personal “best ...
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 use a Spacer component to solv...
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-fetch the props without doing a ...
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 tutorial, we take a deep dive ...
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 hooks to abstract behaviours, a...
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, I'll show how I became design...
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 article chronicles my experience...
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 down how to build the "full-bl...
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 this tutorial, we'll learn how...
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, but it's probably one of the...
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 perfect way to emphasize positiv...
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 tips for getting started as a co...
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 respect user preferences, and cr...
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 article, I'll share my reasoni...
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 deceptively tricky. In this in-depth tu...
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 dynamic themes. We'll see how ...
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 that lets us style ordered li...
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, sound, and touch, through hap...
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 responses into 6 categories, a...
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 Gatsby can be used to pre-render co...
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-load. This quick tutorial show...
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 collaborating with design can supercha...
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 leverage bleeding-edge browser feat...
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 remote gig.
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-remote as a software engineer.
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 result, we often write code that ...
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 3D transforms and CSS animatio...
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 architect our components for m...
Animating the Unanimatable
An in-depth look at the surprisingly complicated problem of animating the transition when two items in a list swap positions.