A World-Class Code Playground with Sandpack π
No developer blog or technical documentation site is complete without an interactive code playground. The CodeSandbox team recently released a wonderf [...]
a collection of dev rss feeds - blogroll
Posts
No developer blog or technical documentation site is complete without an interactive code playground. The CodeSandbox team recently released a wonderf [...]
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 lever [...]
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, [...]
useDeferredValue is one of the most underrated React hooks. It allows us to dramatically improve the performance of our applications in certain contex [...]
This year, the React team unveiled something they've been quietly researching for years: an official way to run React components exclusively on the se [...]
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 favouri [...]
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! [...]
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 art [...]
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 [...]
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 lac [...]
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 [...]
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 [...]
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'l [...]
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 [...]
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 u [...]
β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 [...]
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 th [...]
β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 imp [...]
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 tu [...]
As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should focus on how the language uses those properties t [...]
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 [...]
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 ar [...]
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 [...]
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, [...]
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 w [...]
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 [...]
One of the most foundational things to understand about JavaScript is that programs are made up of statements, and statements have slots for expressio [...]
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, [...]
A surprisingly-common misconception can lead to big rendering issues that are difficult to debug. This deep-dive tutorial examines how React and Gatsb [...]
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 [...]
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 [...]
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 [...]
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without a [...]
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 a [...]
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 usin [...]
As engineers, it can be really satisfying for us to implement clever, terse solutions to problems, relying on advanced tricks and techniques. As a res [...]
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 i [...]
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-fe [...]
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 r [...]
This comprehensive guide shows how to use CSS transitions! A back-to-basics look at the fundamental building blocks we need to create microinteraction [...]
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 [...]
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 [...]
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 assum [...]
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 [...]
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 co [...]
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 [...]
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' [...]
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 re [...]
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 [...]
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 n [...]
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/ [...]
As remote work becomes increasingly popular, I am frequently asked how to get started. This article shares everything I know about landing that first [...]
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 [...]
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 h [...]
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 [...]
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 [...]
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 [...]
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, [...]
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 serv [...]
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 [...]
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 [...]
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 p [...]
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 ti [...]
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 deceptive [...]
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 [...]
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- [...]
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 collabor [...]
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-re [...]
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 [...]
An in-depth look at the surprisingly complicated problem of animating the transition when two items in a list swap positions. [...]