Page Inspect

Josh W. Comeau

JoshWComeau

- categories
- courses
- goodies
- About

# Josh W Comeau homepage

## Articles and Tutorials

Springs and Bounces in Native CSS

The magic of the `linear()` timing function

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. I’ve been experimenting with this API for a while now, and in this post, I’ll share all of the tips and tricks I’ve learned for using it effectively. ✨

Read more: Springs and Bounces in Native CSS

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 reserved for CSS keyframe animations. But is the juice worth the squeeze?

Read more: The Big Gotcha With <code>@starting-style</code>

Color Shifting in CSS

An Exploration of Color Animation Techniques

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 limitation when it comes to color processing! In this tutorial, we’ll dig into the issue, and I’ll share a couple of strategies you can use to work around this limitation.

Read more: Color Shifting in CSS

An Interactive Guide to SVG Paths

SVG gives us many different primitives to work with, but by far the most powerful is the <path> element. Unfortunately, it’s also the most inscrutable, with its compact Regex-style syntax. In this tutorial, we’ll demystify this infamous element and see some of the cool things we can do with it!

Read more: An Interactive Guide to SVG Paths

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 all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨

Read more: A Friendly Introduction to SVG

Partial Keyframes

Creating dynamic, composable CSS keyframe animations

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 keyframe animations so much more reusable and dynamic! 🤯

Read more: Partial Keyframes

The Height Enigma

Unraveling the mystery of percentage-based heights in CSS

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%” would have no effect at all. When I finally figured out what was going on, it was like a puzzle piece snapping into place; everything made so much more sense! In this post, I’ll share the epiphany I had, and we’ll explore some solutions.

Read more: The Height Enigma

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 year or two.Well, it’s been more than two years since then, and I thought it was worth revisiting some of those early predictions, and seeing if we can glean any insights about where things are headed.

Read more: The Post-Developer Era

A Million Little Secrets

Deconstructing the “Whimsical Animations” landing page

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 interested in animations/interactions, you’ll want to check this one out; I share a bunch of my favourite secrets and tricks. 😄

Read more: A Million Little Secrets

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 start exploring this potential! In this post, I’ll share the “killer pattern” I can’t stop using in my work, and explore what’s possible with this new capability.

Read more: Container Queries Unleashed

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 create the most realistic lush frosted glass anywhere on the internet.

Read more: Next-level frosted glass with <code>backdrop-filter</code>

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 for 92% of users, but is that sufficient? Where do we draw the line? In this blog post, I’ll share the framework I use for deciding whether or not to use a modern CSS feature

Read more: A Framework for Evaluating Browser Support

Show more

## Browse By Category

CSS

React

Animation

Career

JavaScript

SVG

Next.js

General

## Popular Content

- An Interactive Guide to Flexbox
- A Modern CSS Reset
- An Interactive Guide to CSS Transitions
- How To Center a Div
- The End of Front-End Development
- Designing Beautiful Shadows in CSS
- An Interactive Guide to CSS Grid
- Making Sense of React Server Components
- Why React Re-Renders
- CSS Variables for React Devs

JoshWComeau

Are you a human? If so, please ignore this checkbox

Want to know when I publish new content?Enter your email to join my free newsletter:

Email

Submit

## Browse By Category

- CSS
- React
- Animation
- JavaScript
- Career
- SVG
- Next.js
- General

## Interactive Courses

- CSS for JS Developers(opens in new tab)
- The Joy of React(opens in new tab)
- Whimsical Animations(opens in new tab)

## General

- About Josh
- About This Blog
- Contact

SearchDisable soundsActivate dark modeRSS FeedJosh's BlueSky profileJosh's Github profileJosh's LinkedIn profile

© 2018-present Joshua Comeau. All Rights Reserved.

- Terms of Use(opens in new tab)
- Privacy Policy(opens in new tab)
- Code of Conduct(opens in new tab)