Josh Comeau's blog

Animated Pride Flags

Josh W. Comeau — Thu, 08 Jun 2023 18:21:34 GMT

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. 🏳️‍🌈

Keep reading.

The “const” Deception

Josh W. Comeau — Tue, 27 Jun 2023 16:05:26 GMT

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.

Keep reading.

The End of Front-End Development

Josh W. Comeau — Sat, 20 May 2023 18:42:25 GMT

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 future of software development.

Keep reading.

Common Beginner Mistakes with React

Josh W. Comeau — Wed, 15 Mar 2023 01:05:28 GMT

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 lot of potential frustration!

Keep reading.

Data Binding in React

Josh W. Comeau — Mon, 20 Mar 2023 00:10:02 GMT

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!

Keep reading.

Color Formats in CSS

Josh W. Comeau — Fri, 30 Jun 2023 16:11:42 GMT

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 serve us best.

Keep reading.

An Interactive Guide to Flexbox

Josh W. Comeau — Tue, 27 Jun 2023 16:30:48 GMT

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 remarkable things with it. ✨

Keep reading.

A World-Class Code Playground with Sandpack

Josh W. Comeau — Tue, 31 Jan 2023 21:31:41 GMT

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

Keep reading.

Understanding useMemo and useCallback

Josh W. Comeau — Tue, 31 Jan 2023 21:31:41 GMT

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.

Keep reading.

Why React Re-Renders

Josh W. Comeau — Tue, 31 Jan 2023 21:31:41 GMT

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 performance of our React apps.

Keep reading.

Statements Vs. Expressions

Josh W. Comeau — Mon, 11 Jul 2022 10:30:00 GMT

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 solve practical problems.

Keep reading.

My Wonderful HTML Email Workflow

Josh W. Comeau — Mon, 27 Jun 2022 12:00:00 GMT

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.

Keep reading.

The Surprising Truth About Pixels and Accessibility

Josh W. Comeau — Tue, 29 Nov 2022 23:10:10 GMT

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

Keep reading.

You Don’t Need a UI Framework

Josh W. Comeau — Tue, 03 May 2022 11:00:00 GMT

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.

Keep reading.

The Front-End Developer's Guide to the Terminal

Josh W. Comeau — Tue, 19 Apr 2022 10:30:00 GMT

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 important fundamentals.

Keep reading.

Understanding Layout Algorithms

Josh W. Comeau — Mon, 28 Mar 2022 11:00:00 GMT

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

Keep reading.

Delightful React File/Directory Structure

Josh W. Comeau — Tue, 15 Mar 2022 13:00:00 GMT

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.

Keep reading.

Make Beautiful Gradients

Josh W. Comeau — Tue, 11 Jan 2022 14:00:00 GMT

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.

Keep reading.

My Custom CSS Reset

Josh W. Comeau — Fri, 09 Jun 2023 22:00:46 GMT

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!

Keep reading.

Introducing “Shadow Palette Generator”

Josh W. Comeau — Tue, 16 Nov 2021 14:00:00 GMT

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.

Keep reading.

Designing Beautiful Shadows in CSS

Josh W. Comeau — Sun, 20 Nov 2022 22:28:18 GMT

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.

Keep reading.

An Interactive Guide to Keyframe Animations

Josh W. Comeau — Tue, 28 Sep 2021 14:03:38 GMT

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.

Keep reading.

The World of CSS Transforms

Josh W. Comeau — Tue, 28 Sep 2021 14:03:38 GMT

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.

Keep reading.

How To Learn Stuff Quickly

Josh W. Comeau — Wed, 22 Sep 2021 17:07:02 GMT

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.

Keep reading.

Demystifying styled-components

Josh W. Comeau — Sun, 27 Jun 2021 14:13:55 GMT

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 building our own mini-version.

Keep reading.

How I Built My Blog

Josh W. Comeau — Wed, 09 Jun 2021 19:32:34 GMT

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.

Keep reading.

Building a Magical 3D Button

Josh W. Comeau — Sat, 01 Jan 2022 13:00:00 GMT

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.

Keep reading.

The Importance of Learning CSS

Josh W. Comeau — Wed, 23 Nov 2022 17:58:58 GMT

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.

Keep reading.

What The Heck, z-index??

Josh W. Comeau — Thu, 27 Jan 2022 09:49:38 GMT

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 mechanism to our advantage.

Keep reading.

An Interactive Guide to CSS Transitions

Josh W. Comeau — Sun, 20 Nov 2022 22:17:43 GMT

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.

Keep reading.

The styled-components Happy Path

Josh W. Comeau — Sun, 21 Feb 2021 11:30:00 GMT

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

Keep reading.

Let's Bring Spacer GIFs Back!

Josh W. Comeau — Thu, 10 Jun 2021 14:31:26 GMT

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.

Keep reading.

2020 In Review

Josh W. Comeau — Wed, 23 Dec 2020 14:00:00 GMT

A look back at 2020. It's been a difficult year for many, and I'm no exception, though I've come out of it stronger than ever and ready for what comes next.

Keep reading.

Refreshing Server-Side Props

Josh W. Comeau — Wed, 23 Nov 2022 16:47:32 GMT

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.

Keep reading.

The Rules of Margin Collapse

Josh W. Comeau — Mon, 27 Feb 2023 00:30:15 GMT

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

Keep reading.

Boop!

Josh W. Comeau — Thu, 10 Jun 2021 14:31:26 GMT

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 interesting!

Keep reading.

Chasing the Pixel-Perfect Dream

Josh W. Comeau — Mon, 02 Nov 2020 15:00:00 GMT

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 near-pixel-perfect.

Keep reading.

Hands-Free Coding

Josh W. Comeau — Sat, 20 May 2023 22:00:44 GMT

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.

Keep reading.

Full-Bleed Layout Using CSS Grid

Josh W. Comeau — Tue, 28 Sep 2021 14:03:38 GMT

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.

Keep reading.

Building a Modern-Day Hit Counter

Josh W. Comeau — Mon, 28 Sep 2020 12:30:00 GMT

The 90s are cool again! Funky colors! Guestbooks! In this tutorial, we'll see how the 90s-inspired hit counter works, using modern web tools like serverless functions, FaunaDB, and React.

Keep reading.

A Friendly Introduction to Spring Physics

Josh W. Comeau — Tue, 04 Jul 2023 18:11:59 GMT

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.

Keep reading.

The World’s Sneakiest Route Change

Josh W. Comeau — Fri, 31 Jul 2020 15:00:00 GMT

Recently, I worked on a project that had a lot of dynamic data, and the ability for the user to filter through it. In this article, we'll see how I built it while maintaining fully-static, using pre-generated JSON files instead of a REST API. It's a sneaky trick, with unbeatable results from a user-experience perspective.

Keep reading.

A Brief Hiatus

Josh W. Comeau — Thu, 25 Jun 2020 14:00:00 GMT

When I rebooted this blog in early 2020, the plan was to publish 1 new post every 2 weeks. No one was more surprised than myself when I actually stuck to that! Unfortunately, a few weeks ago I injured my Ulnar nerve. I spend _a lot_ of time on computers, and I think it's caught up with me. My physiotherapist…

Keep reading.

Using Netlify Functions with Gatsby

Josh W. Comeau — Wed, 10 Jun 2020 12:45:00 GMT

Tools like Next and Gatsby are great for front-ends, but what about for apps that require a backend? Serverless functions have popped up to fill that gap, and they're *amazing*. In this tutorial, we'll see how to use Netlify Functions with Gatsby, to build full-stack web applications using the tools you already know and love!

Keep reading.

Local Testing on an iPhone

Josh W. Comeau — Tue, 26 May 2020 13:15:00 GMT

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!

Keep reading.

Animated Sparkles in React

Josh W. Comeau — Tue, 19 May 2020 11:00:00 GMT

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.

Keep reading.

Lessons Learned Speaking at Conferences

Josh W. Comeau — Wed, 06 May 2020 16:00:00 GMT

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.

Keep reading.

Accessible Animations in React

Josh W. Comeau — Wed, 06 Oct 2021 05:42:21 GMT

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.

Keep reading.

Why My Blog is Closed-Source

Josh W. Comeau — Wed, 14 Apr 2021 13:00:00 GMT

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 whether a project should be open-source or not, I hope you'll find it valuable.

Keep reading.

Incredimental Builds!

Josh W. Comeau — Wed, 29 Apr 2020 11:45:00 GMT

Gatsby just launched an exciting new feature called "incremental builds". This article looks at what it is, how to use it, and what it means for the future of the static web.

Keep reading.

The Quest for the Perfect Dark Mode

Josh W. Comeau — Wed, 22 Apr 2020 00:45:00 GMT

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 React and Gatsby apps.

Keep reading.

CSS Variables for React Devs

Josh W. Comeau — Tue, 29 Nov 2022 23:10:10 GMT

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 queries has been wrong all along.

Keep reading.

A Static Future

Josh W. Comeau — Wed, 08 Apr 2020 10:45:00 GMT

Tools like Gatsby are great for simple sites, but what about dynamic webapps with rapidly-changing data? In this article, we'll see how the technology is advancing, and all kinds of doors are opening up. "Static" sites are becoming a lot more dynamic!

Keep reading.

Styling Ordered Lists with CSS Counters

Josh W. Comeau — Tue, 07 Apr 2020 14:00:00 GMT

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.

Keep reading.

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

Josh W. Comeau — Tue, 31 Jan 2023 21:31:41 GMT

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 the case that you should consider using it!

Keep reading.

Embracing modern image formats

Josh W. Comeau — Wed, 24 Feb 2021 12:00:00 GMT

While the weight of our JS bundles is super important, it's not the only factor when it comes to page load time! Images are often several times bigger than our bundles, and they can have a horrible impact on the experience. In this article, we'll see how to use next-gen image formats like Webp in a friendly, backwards-compatible way.

Keep reading.

Deploying Netlify Functions with Gatsby Cloud

Josh W. Comeau — Tue, 28 Apr 2020 19:30:00 GMT

Every now and then, Gatsby developers find themselves needing a sprinkle of back-end code. We don't necessarily need a whole server, and we certainly don't want to have to deal with things like load balancing and scaling. We just need some code to run not-in-the-browser…

Keep reading.

Becoming a Software Developer Without a CS Degree

Josh W. Comeau — Thu, 10 Jun 2021 14:31:26 GMT

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!

Keep reading.

Generate an SEO-Friendly Sitemap for your Gatsby Site

Josh W. Comeau — Mon, 30 Aug 2021 20:41:53 GMT

If you maintain a blog, documentation, or any other sort of writing-based Gatsby site, you know how much work goes into content creation. Help users find your work by ensuring that it's properly indexed by Google!

Keep reading.

The Perils of Hydration

Josh W. Comeau — Thu, 27 Apr 2023 15:42:58 GMT

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.

Keep reading.

Persisting React State in localStorage

Josh W. Comeau — Mon, 24 Feb 2020 17:00:00 GMT

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!

Keep reading.

Effective Collaboration with Product and Design

Josh W. Comeau — Tue, 21 Jan 2020 14:00:00 GMT

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.

Keep reading.

Magical Rainbow Gradients

Josh W. Comeau — Fri, 02 Jun 2023 17:44:09 GMT

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, and React.

Keep reading.

Finding your first remote job

Josh W. Comeau — Tue, 20 Jul 2021 14:40:45 GMT

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.

Keep reading.

My experience as a remote worker

Josh W. Comeau — Mon, 02 Dec 2019 13:30:00 GMT

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.

Keep reading.

Clever Code Considered Harmful

Josh W. Comeau — Mon, 16 Jan 2023 20:45:20 GMT

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 should strive to write simple, accessible code, using the dumb old primitives that everyone knows.

Keep reading.

Folding the DOM

Josh W. Comeau — Sat, 01 Jan 2022 13:00:00 GMT

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!

Keep reading.

Dynamic Bézier Curves

Josh W. Comeau — Wed, 23 May 2018 13:30:00 GMT

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.

Keep reading.

Animating the Unanimatable

Josh W. Comeau — Mon, 15 Feb 2016 18:03:43 GMT

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

Keep reading.