JoshWComeau

Josh W Comeau homepage

Articles and Tutorials

How I Built My Blog

2024 “App Router” Edition

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 dig into some of the details to see how they work.

Read more: How I Built My Blog
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 things I could do with it. It’s now become a core part of my toolkit! In this blog post, I'll show you some practical real-world problems I solved using “:has”, as well as some wild experiments that blew my mind!

Read more: The Undeniable Utility Of CSS <code>:has</code>
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 how Promises work by getting a deeper understanding of JavaScript and its limitations.

Read more: Promises From The Ground Up
CSS in React Server Components

Understanding the future of CSS-in-JS and React

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 😅. In this blog post, we’re going to explore the compatibility issues between React Server Components and CSS-in-JS libraries like styled-components. You’ll understand what the issue is, what the options are, and what’s on the horizon.

Read more: CSS in React Server Components
How To Center a Div

The Ultimate Guide to Centering in CSS

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 best option? When do we use Flexbox, or CSS Grid, or something else? Let's dig into it.

Read more: How To Center a Div
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 model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.

Read more: An Interactive Guide to CSS Grid
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 paradigm shift, and it's caused a whole lot of confusion in the React community. In this tutorial, we'll explore this new world, and build an intuition for how it works, and how we can take advantage of it.

Read more: Making Sense of React Server Components
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 gradients. We'll also see how to make it dynamic using React. 🏳️‍🌈

Read more: Animated Pride Flags
The “const” Deception

Exploring the difference between assignment and mutation in JavaScript

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 using “const”. In this tutorial, we're going to dig into the incredibly-important distinction between “assignment” and “mutation” in JavaScript.

Read more: The “const” Deception

Browse By Category

Popular Content

  1. An Interactive Guide to Flexbox
  2. A Modern CSS Reset
  3. An Interactive Guide to CSS Transitions
  4. The End of Front-End Development
  5. How To Center a Div
  6. CSS Variables for React Devs
  7. Designing Beautiful Shadows in CSS
  8. Why React Re-Renders
  9. Making Sense of React Server Components
  10. An Interactive Guide to CSS Grid