Josh Comeau's blog

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.

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 animations.

The new Animation Timeline API allows us to create dynamic scroll animations without any JavaScript!

Have you ever heard of Disney’s 12 Basic Principles of Animation?

There is a lil’ UI detail on this blog.

In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web these days.

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.

The “linear()” timing function is a game-changer; it allows us to model physics-based motion right in vanilla CSS!

CSS has been on fire lately, with tons of great new features.

A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow.

SVG gives us many different primitives to work with, but by far the most powerful is the element.

SVGs are one of the most remarkable technologies we have access to on the web.

CSS Keyframe animations are so much more powerful than most developers realize.

One of the most perplexing and befuddling things in CSS for me, for many years, was the behaviour of percentage-based heights.

When OpenAI released GPT-4 back in March 2023, they kickstarted the AI revolution.

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!

Container queries expand the universe of designs that can be implemented, giving us whole new superpowers.

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.

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.

It’s been a couple of years since container queries started landing in browsers… so why isn’t anyone using them?

I recently launched a brand new version of this blog, and in this post, I share how it’s built!

Of all the latest and greatest CSS features, the “:has” pseudo-class wasn’t exactly at the top of my wishlist.

The “Promises” API is a surprisingly tricky part of modern JavaScript.

useDeferredValue is one of the most underrated React hooks.

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 😅.

Back in the day, centering an element was one of the trickiest things in CSS.

CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve.

One of the most commonly-misunderstood operators is Modulo (%).

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.

Happy Pride month!

The “const” keyword in JavaScript is used to create constants, variables that can't change.

Large language models like GPT-4 are becoming increasingly capable, at an alarming rate.

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.

As developers, we don't like working with forms, but they're a critical part of most web applications!

CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and more.

When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things.

No developer blog or technical documentation site is complete without an interactive code playground.

What's the deal with these two hooks?!

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.

One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressions.

If you've ever had the misfortune of being tasked with building a template for HTML emails, you know it's tricky business!

“Should I use pixels or rems?”.

As developers, it can be tempting to grab a pre-styled UI framework like Material UI or Bootstrap.

If you want to learn a modern JavaScript framework like React or Angular, you better be familiar with the terminal!

As front-end developers, we often learn CSS by focusing on individual properties.

How should we structure components and other files in our React apps?

Have you ever noticed that gradients tend to look a little gray and washed-out in the middle?

I have a set of baseline CSS styles that come with me from project to project.

In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors.

When I look around the web, most of the shadows I see are fuzzy grey boxes.