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.
An in-depth tutorial showing how I built a hit counter on a static site, using serverless functions and FaunaDB.
Ever since I started building websites, I've been fascinated by animations. The web is full of creative examples, and whenever I discover a new one, I'm like a dragon hunting for treasure—it becomes imperative that I figure out how it works so I can add it to my collection. Over the past decade, I…
I am a firm believer that static sites are awesome: they're faster, more resilient, and easier to scale than traditional server-rendered sites. A complex app can be baked into a bunch of HTML and JSON files, served via CDN. But certain things become more challenging when you try to go all-static…
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…
One of the coolest features that Next.js offers is API Routes . An API route is similar to a typical route, except instead of serving a statically-built HTML page, it invokes a Node.js function. You can use this for all kinds of stuff: Managing user authentication Getting and setting application…
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!
In this dazzling tutorial, we'll see how to build an animated <Sparkles> component. Wrap it around text or images and watch them twinkle! This neat trick is a perfect way to emphasize positive or exciting things.
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.
Long-time readers of this site have probably picked up that I am a big fan of animations . When used properly, I believe they add a ton of value to the user experience. That said, it's important to be mindful of the fact that not everyboy experiences them the way I do. For some folks, motion…
One of my New Years resolutions this year was to blog more. I rebuilt the blog from the ground up. Here's a before/after: There were a lot of goals in this rebuild, but the main one was to give me a platform I could use in a more serious way. Even though it's still a personal blog, I wanted it to…
A few weeks ago, I published A Static Future , a post all about how sites that build at compile-time have bucketfuls of untapped potential. We pictured a world in which rich, dynamic web applications were built and served from static CDNs like Fastly and Cloudflare. Instead of a costly and error…
Maybe the hardest / most complicated part of building this blog was adding Dark Mode. Not the live-embedded code snippets, not the unified GraphQL layer that manages and aggregates all content and data , not the custom analytics system, not the myriad bits of whimsy. Freaking Dark Mode. It's a good…
This is a controversial opinion , but I rather like CSS-in-JS. 😬🚨 But! I also really like CSS. And I don't believe that using CSS-in-JS absolves you from needing to learn it. You're writing CSS either way! It's just packaged a little bit differently. No matter where you put your CSS, it behooves…
As static sites enjoy an incredible resurgence in popularity, I've seen a lot of misconceptions around exactly what tools like Gatsby are capable of. Specifically, I've heard from some friends that liked the idea of using Gatsby, but worried that their project was "too dynamic". Sometimes this meant…
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.
Maybe it's because I was an audio engineer, but I wish the web was louder. I know a bunch of folks will disagree, and for good reason! Sound on the web has historically been used in annoying/awful ways: The early web used MIDI files as background music. Malware popups use sound effects for sinister…
In The Cost of Javascript , Addy makes a really good point: 200kb of Javascript is more "expensive" than 200kb of images, because the browser needs to do more work to use code compared to images. From the article: A JPEG image needs to be decoded, rasterized, and painted on the screen. A JavaScript…
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. Case in point: when I was…
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!