Josh Comeau's blog

CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird.

The “transform” property is such a powerful part of the CSS language!

As software developers, we're always learning new things; it's practically the whole gig!

For so many React devs, styled-components seems kinda magical.

An in-depth look at the technical stack behind this very blog!

Every action we take on the web starts with a button click, and yet most buttons are ho-hum and uninspired.

I know so many super-talented developers who share the same achilles heel: CSS.

The z-index property can be a tricky little bugger.

This comprehensive guide shows how to use CSS transitions!

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.

The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs.

Next allows you to do server-side data-fetching, but what happens when that data needs to change on the client?

“Margin collapse” has a dastardly reputation, one of the trickier parts of CSS.

An in-depth tutorial that teaches how to create one of the most adorable interactions I've ever created.

Is it possible to create an implementation of a design that matches to-the-pixel?

Earlier this year, I lost the ability to use a keyboard and mouse for extended periods.

Certain layouts are surprisingly dastardly.

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.

Learn how to set up an ideal workflow for debugging your development server on your iPhone.

In this dazzling tutorial, we'll see how to build an animated component.

Speaking at conferences is equal parts exciting and terrifying.

I really love animation, but not everybody does.

In our community, it's so common for developer projects to be open-source.

Dark Mode has become common enough that it's a user expectation.

CSS variables are *really* cool, and they're incredibly powerful when it comes to React!

Styling an ordered list can be surprisingly tricky; there's no way to get at that bullet!

By and large, using the web is a visual experience.

A look at how hundreds of developers got their start in the industry despite not having a Computer Science or Software Engineering degree.

A surprisingly-common misconception can lead to big rendering issues that are difficult to debug.

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.

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.

If you've ever tried to animate a gradient, you've been met with a harsh reality—it isn't possible.

As remote work becomes increasingly popular, I am frequently asked how to get started.

I've spent half of my career working remotely.

As engineers, it can be really satisfying for us to implement clever, terse solutions to problems, relying on advanced tricks and techniques.

In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life.

A deep dive into Bézier curves in React.

An in-depth look at the surprisingly complicated problem of animating the transition when two items in a list swap positions.