A collection of articles I've written for my blog or other publications.
When developing websites, I often create the same boilerplate structure over and over. By creating a custom scaffolding script, I can automate this boring task and save a lot of time.
The new Zelda game uses repeated patterns to build a cohesive world. Let's write code to generate these patterns and then print them with a robot!
Animation can help inform user about changes in your app. And the View Transitions API makes adding animations easier than ever.
Cloudinary is a performance-focused company, so when my Cloud Four colleagues and I were asked to rebuild their blog using WordPress, we also set our sights on improving the blog’s performance.
We recently worked with Cloudinary to rebuild their blog. There was a big focus on performance throughout the process, especially passing Core Web Vitals. However, we recently started seeing poor Cumulative Layout Shift scores on a number of posts. I set out to investigate.
When designing or building software, give careful thought to default values because people will end up using them.
But I’m not sure when this became widely supported, and I can’t find anything about it online…
Creating generative art with organic flow patterns, math, and code.
Creating a stack of polaroids with a development animation and pseudo-random stacking.
“Learn the rules like a pro so you can break them like an artist.” — Falsely attributed to Pablo Picasso
I was recently designing an interface with a lot of rounded corners. But, when I nested rounded corners it looked off somehow...
I’d like to introduce you to one of my favorite terms: “swoop-and-poop” refers to when you’re nearing the end of a project or task, and at the last minute, an important stakeholder swoops in and lets you know that you’re on the wrong track.
Font subsetting allows you to split a font’s characters (letters, numbers, symbols, etc.) into separate files so your visitors only download what they need. There are two main subsetting strategies that have different advantages depending on the type of site you’re building.
By wrapping and enhancing HTML elements, we can provide a solid baseline experience, with progressive enhancement as the cherry on top.
Turning simple shapes into complex illustrations using some SVG magic.
Colors on the web are confusing — but they don't have to be! The HSL format makes it easy for humans and computers to work with color.
By adding a touch of transparency, we can design components that automatically adapt to their backgrounds.
Lately I've been using variables to plan out pure CSS timelines for complex animations. I built an SVG and CSS Rube Goldberg machine to put this technique to the test!
Experimenting with a new build system for my portfolio.
I recently traveled through Europe and re-learned an old design lesson from the humble toilet flusher.
Transitioning hidden elements can be tricky! I wrote an npm package to provide a reusable solution.
Movement in nature doesn’t happen all at once. I wanted to bring this natural movement into my web animations.
For a recent project, we built an isomorphic PWA. When I added a service worker, I ran into a challenge I hadn’t expected…
Why would the same sort function return a different value in Node vs. a browser?
There are a lot of ways to hide content. Which options are the most accessible?