Full Width [alt+shift+f] Shortcuts [alt+shift+k]
Sign Up [alt+shift+s] Log In [alt+shift+l]
Articles [alt+h] Reading List [alt+r] [alt+s]

Josh Comeau's blog

Visit Blog

Sort By

Popular [alt+1] Recent [alt+2]

Change View

List View [alt+w] Expanded [alt+e]
Josh Comeau's blog
How To Center a Div Back in the day, centering an element was one of the trickiest things in CSS. As the language has...
a year ago
46

How To Center a Div

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
2 months ago
38

Next-level frosted glass with backdrop-filter

from Josh Comeau's blog [alt+shift+b] in programming

2 months ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
A Framework for Evaluating Browser Support Lots of exciting new features have been landing in CSS recently, and it can be tough trying to...
2 months ago
33

A Framework for Evaluating Browser Support

from Josh Comeau's blog [alt+shift+b] in programming

2 months ago
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...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
3 months ago
28

A Friendly Introduction to Container Queries

from Josh Comeau's blog [alt+shift+b] in programming

3 months ago
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 as straightforward as media queries. In this tutorial, we’ll break it all down and make sense of...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
An Interactive Guide to Flexbox When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible...
over a year ago
22

An Interactive Guide to Flexbox

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
20

Styling Ordered Lists with CSS Counters

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 lists without breaking proper semantics.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
19

Why React Re-Renders

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 unpack exactly when and why React re-renders, and how we can use this information to optimize the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Delightful React File/Directory Structure How should we structure components and other files in our React apps? I've iterated my way to a...
over a year ago
18

Delightful React File/Directory Structure

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 tradeoffs are, and how I mitigate them.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Container Queries Unleashed Container queries expand the universe of designs that can be implemented, giving us whole new...
3 weeks ago
18

Container Queries Unleashed

from Josh Comeau's blog [alt+shift+b] in programming

3 weeks ago
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...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Data Binding in React As developers, we don't like working with forms, but they're a critical part of most web...
over a year ago
18

Data Binding in React

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 form controls in React. Never forget how to data-bind a checkbox or radio button again!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
17

How I Built My Blog

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 customization, and how I organize my codebase, among others.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Make Beautiful Gradients Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This...
over a year ago
17

Make Beautiful Gradients

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 around this quirk, and create beautiful, lush, saturated gradients.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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,...
over a year ago
17

Announcing “use-sound”, a React Hook for Sound Effects

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 haptic feedback). I just released a library to make it easy to add sound to your React app, and I make...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
16

A Modern CSS Reset

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 of global styles!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Snappy UI Optimization with useDeferredValue useDeferredValue is one of the most underrated React hooks. It allows us to dramatically improve the...
9 months ago
16

Snappy UI Optimization with useDeferredValue

from Josh Comeau's blog [alt+shift+b] in programming

9 months ago
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 solve a gnarly performance problem on this blog, and in this tutorial, I'll show you how! ⚡
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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!...
5 months ago
16

How I Built My Blog

from Josh Comeau's blog [alt+shift+b] in programming

5 months ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
A World-Class Code Playground with Sandpack No developer blog or technical documentation site is complete without an interactive code...
over a year ago
15

A World-Class Code Playground with Sandpack

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 help us create these live-updating code editors. In this tutorial, I'll show you how I use it on this...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
CSS Variables for React Devs CSS variables are *really* cool, and they're incredibly powerful when it comes to React! This...
over a year ago
15

CSS Variables for React Devs

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 to get the most out of CSS-in-JS tools like styled-components, and how our mental frame around media...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Understanding the JavaScript Modulo Operator One of the most commonly-misunderstood operators is Modulo (%). In this tutorial, we'll unpack...
a year ago
15

Understanding the JavaScript Modulo Operator

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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 problems.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Persisting React State in localStorage A common thing in React development is that we want to store a bit of React state in localStorage,...
over a year ago
15

Persisting React State in localStorage

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 shows you how we can build a custom hook that does exactly this!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
My Wonderful HTML Email Workflow If you've ever had the misfortune of being tasked with building a template for HTML emails, you know...
over a year ago
15

My Wonderful HTML Email Workflow

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 responsive, client-friendly emails without a single tag.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
15

Designing Beautiful Shadows in CSS

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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. In this tutorial, I'll show you how.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Full-Bleed Layout Using CSS Grid Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is...
over a year ago
15

Full-Bleed Layout Using CSS Grid

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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-bleed" layout using CSS Grid.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
A Friendly Introduction to Spring Physics Of all the little tips and techniques I've picked up over the years about animation, spring physics...
over a year ago
15

A Friendly Introduction to Spring Physics

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 to harness their power to build fluid, organic transitions.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Making Sense of React Server Components This year, the React team unveiled something they've been quietly researching for years: an official...
a year ago
15

Making Sense of React Server Components

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
An Interactive Guide to CSS Grid CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful...
a year ago
15

An Interactive Guide to CSS Grid

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Statements Vs. Expressions One of the most foundational things to understand about JavaScript is that programs are made up of...
over a year ago
14

Statements Vs. Expressions

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 dig into how these two structures work, and see how building an intuition about this can help us...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The “const” Deception The “const” keyword in JavaScript is used to create constants, variables that can't change....
a year ago
14

The “const” Deception

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Refreshing Server-Side Props Next allows you to do server-side data-fetching, but what happens when that data needs to change on...
over a year ago
14

Refreshing Server-Side Props

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 full server reload.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
CSS in React Server Components You can’t make an omelette without cracking a few eggs, and when the core React team unveiled their...
10 months ago
14

CSS in React Server Components

from Josh Comeau's blog [alt+shift+b] in programming

10 months ago
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...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Color Formats in CSS CSS gives us so many options when it comes to expressing color—we can use hex codes, rgb, hsl, and...
over a year ago
14

Color Formats in CSS

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 important decision! In this article, we'll take a tour of color formats in CSS, and see which option will...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Finding your first remote job As remote work becomes increasingly popular, I am frequently asked how to get started. This article...
over a year ago
14

Finding your first remote job

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Animating the Unanimatable An in-depth look at the surprisingly complicated problem of animating the transition when two items...
over a year ago
13

Animating the Unanimatable

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
An in-depth look at the surprisingly complicated problem of animating the transition when two items in a list swap positions.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
13

Building a Magical 3D Button

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 that sparks joy.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The Rules of Margin Collapse “Margin collapse” has a dastardly reputation, one of the trickier parts of CSS. Fortunately, it gets...
over a year ago
13

The Rules of Margin Collapse

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
“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 into the governing principles, and learn how to use them to our advantage.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Demystifying styled-components For so many React devs, styled-components seems kinda magical. It isn't at all clear how it uses...
over a year ago
13

Demystifying styled-components

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 problems when things go awry. In this post, we'll learn exactly how styled-components works by...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Lessons Learned Speaking at Conferences Speaking at conferences is equal parts exciting and terrifying. This article is a behind-the-scenes...
over a year ago
13

Lessons Learned Speaking at Conferences

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 conference speaker.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
An Interactive Guide to CSS Transitions This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental...
over a year ago
13

An Interactive Guide to CSS Transitions

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Understanding Layout Algorithms As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should...
over a year ago
13

Understanding Layout Algorithms

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 blog post, we'll pop the hood on CSS and see how the language is structured, and how to learn it...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's 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...
5 months ago
13

The Undeniable Utility Of CSS :has

from Josh Comeau's blog [alt+shift+b] in programming

5 months ago
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...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
What The Heck, z-index?? The z-index property can be a tricky little bugger. Sometimes, no matter how much you crank up the...
over a year ago
13

What The Heck, z-index??

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 contexts, and see how they can thwart our efforts to use z-index. We'll also learn how to use this...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Let's Bring Spacer GIFs Back! The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations,...
over a year ago
13

Let's Bring Spacer GIFs Back!

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 solve common layout problems, and why it's often a great tool for the job in the modern web.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Clever Code Considered Harmful As engineers, it can be really satisfying for us to implement clever, terse solutions to problems,...
over a year ago
13

Clever Code Considered Harmful

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 is hostile and inaccessible to the junior folks on our team. This article makes the case that we...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Animated Pride Flags Happy Pride month! In this tutorial, I'll share a handful of my favourite animation tricks. You'll...
a year ago
13

Animated Pride Flags

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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. 🏳️‍🌈
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
An Interactive Guide to Keyframe Animations CSS keyframe animations are incredibly flexible and powerful, but they’re also a bit weird. In this...
over a year ago
12

An Interactive Guide to Keyframe Animations

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 see how to use them to build high-quality animations.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Introducing “Shadow Palette Generator” In order to create lush, realistic shadows in CSS, we need to use multiple layers and colors. How do...
over a year ago
12

Introducing “Shadow Palette Generator”

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The styled-components Happy Path styled-components is a wonderfully powerful styling library for React, and over the years I've...
over a year ago
12

The styled-components Happy Path

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 practices”.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
12

Why My Blog is Closed-Source

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 reasoning, as well as a workaround in case you _really_ want to see the source. If you're considering...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
12

The Surprising Truth About Pixels and Accessibility

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
“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 determine the best unit to use in any scenario.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
12

The Quest for the Perfect Dark Mode

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 tutorial, we'll see how to build the perfect, flicker-free, customizable theming solution for...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Promises From The Ground Up The “Promises” API is a surprisingly tricky part of modern JavaScript. Without the right context, it...
8 months ago
12

Promises From The Ground Up

from Josh Comeau's blog [alt+shift+b] in programming

8 months ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Hands-Free Coding Earlier this year, I lost the ability to use a keyboard and mouse for extended periods. Fortunately,...
over a year ago
12

Hands-Free Coding

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 using adaptive tools like dictation and eye-tracking as my primary mechanisms for writing code.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Local Testing on an iPhone Learn how to set up an ideal workflow for debugging your development server on your iPhone. This may...
over a year ago
12

Local Testing on an iPhone

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 most useful!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Understanding useMemo and useCallback What's the deal with these two hooks?! Lots of devs find them confusing, for a whole host of...
over a year ago
12

Understanding useMemo and useCallback

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 useful, and how to get the most out of them.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Boop! An in-depth tutorial that teaches how to create one of the most adorable interactions I've ever...
over a year ago
12

Boop!

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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, and see how to design the perfect API. Even if you're not into animations, I think you'll find it...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Common Beginner Mistakes with React I used to teach React at a local coding bootcamp, and I noticed that students kept getting tripped...
a year ago
12

Common Beginner Mistakes with React

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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 the most dastardly gotchas. I'll show you how to solve these common problems, so you can avoid a...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
How To Learn Stuff Quickly As software developers, we're always learning new things; it's practically the whole gig! If we can...
over a year ago
12

How To Learn Stuff Quickly

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 more effective at our job. It's sort of a superpower.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
12

Effective Collaboration with Product and Design

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 supercharge our own productivity.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
My experience as a remote worker I've spent half of my career working remotely. This post chronicles those experiences, giving a...
over a year ago
12

My experience as a remote worker

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
12

The Front-End Developer's Guide to the Terminal

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 it, without ever explaining it. This blog post is your missing manual, covering all of the most...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The End of Front-End Development Large language models like GPT-4 are becoming increasingly capable, at an alarming rate. Within a...
a year ago
11

The End of Front-End Development

from Josh Comeau's blog [alt+shift+b] in programming

a year ago
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 narrative going viral on Twitter. I'm much more optimistic about what these AI advancements mean for the...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The Importance of Learning CSS I know so many super-talented developers who share the same achilles heel: CSS. Instead of trying to...
over a year ago
11

The Importance of Learning CSS

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 tremendous boon for your development life and your career.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Magical Rainbow Gradients If you've ever tried to animate a gradient, you've been met with a harsh reality—it isn't possible....
over a year ago
11

Magical Rainbow Gradients

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 features to animate ANY CSS property, including background gradients, using CSS Houdini, CSS variables,...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Folding the DOM In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in...
over a year ago
11

Folding the DOM

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 animation techniques!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The Perils of Hydration A surprisingly-common misconception can lead to big rendering issues that are difficult to debug....
over a year ago
10

The Perils of Hydration

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 content, and how we can work around the constraints to build dynamic, personalized web apps.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Accessible Animations in React I really love animation, but not everybody does. In fact, it can make some people literally sick! In...
over a year ago
10

Accessible Animations in React

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 create animations that can be disabled.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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...
over a year ago
10

Becoming a Software Developer Without a CS Degree

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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, and detail strategies that you can use to ensure you capture the attention of potential employers!
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
The World of CSS Transforms The “transform” property is such a powerful part of the CSS language! In this blog post, we'll take...
over a year ago
10

The World of CSS Transforms

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Chasing the Pixel-Perfect Dream Is it possible to create an implementation of a design that matches to-the-pixel? Well, not really,...
over a year ago
10

Chasing the Pixel-Perfect Dream

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 designers' best friend by leveraging a series of tricks to get my implementation looking...
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
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....
over a year ago
10

You Don’t Need a UI Framework

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 experience, this is an unrealistic expectation, and things don’t quite work out that way.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Animated Sparkles in React In this dazzling tutorial, we'll see how to build an animated component. Wrap it around text or...
over a year ago
10

Animated Sparkles in React

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 positive or exciting things.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]
Josh Comeau's blog
Dynamic Bézier Curves A deep dive into Bézier curves in React. We'll look at how to build dynamic effects such as...
over a year ago
9

Dynamic Bézier Curves

from Josh Comeau's blog [alt+shift+b] in programming

over a year ago
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 maximum readability and reusability.
Direct Link [→] Remove from reading list Add to reading list [alt+a]
upvote [alt+ctrl+↑] downvote [alt+ctrl+↓]

The best way to read the internet.
Made for nerds, by a nerd.

The best way to read the internet

© 2023 Bored Reading. All rights reserved.

Terms Privacy Design by Kumail

bored reading

v. 229.328 compliant with
earth/mars-x8292 communication
protocol 29xjw899992

When Google killed Google Reader, the bloggosphere took a severe hit and the content quality went down because there weren't enough readers to justify the effort it takes to maintain a high quality blog.

What's left is a decaying wasteland of blogs, most abandoned, a lot are now SEO spam, and 99% are not worth reading. BoredReading is a way to read the remaining great blogs that survived the ice age.

To add your favorite blog, please suggest it here! I get emails every day which helps me maintain a high quality selection of blogs!

Avatar

Made by,
Kumail Hunaid

@kumailht on Twitter.
My website and email.

Close [esc]