Writing
A collection of articles I've written for my blog or other publications.
Automating Busywork by Scaffolding Boilerplate Files
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.
Coding Randomized Zelda Patterns
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!
Animating Slack reminders with the View Transitions API
Animation can help inform user about changes in your app. And the View Transitions API makes adding animations easier than ever.
Improving the Performance of the Cloudinary Blog
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.
Watch Out for Layout Shifts with âchâ Units
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.
Detecting if an event was triggered by a user or by JavaScript
On a recent project, I finally found a solution to an issue Iâve run into several times: When listening for events in JavaScript, how can I tell whether an event was triggered directly by a user or by my code?
Midnight is a Terrible Time for Coffee
When designing or building software, give careful thought to default values because people will end up using them.
So⌠you can set an SVG circleâs radius in CSS?
But Iâm not sure when this became widely supported, and I canât find anything about it onlineâŚ
Experimenting With Flow Fields
Creating generative art with organic flow patterns, math, and code.
A CSS Polaroid Stack
Creating a stack of polaroids with a development animation and pseudo-random stacking.
Coding a Snowflake Generator
Hand-code an SVG snowflake, experiment in an interactive playground, and generate infinite random snowflakes with a dash of JavaScript.
Break the Rules!
âLearn the rules like a pro so you can break them like an artist.â â Falsely attributed to Pablo Picasso
The Math Behind Nesting Rounded Corners
I was recently designing an interface with a lot of rounded corners. But, when I nested rounded corners it looked off somehow...
Avoiding the Dreaded "Swoop-and-Poop"
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 Strategies: Content-Based vs Alphabetical
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.
Web Components as Progressive Enhancement
By wrapping and enhancing HTML elements, we can provide a solid baseline experience, with progressive enhancement as the cherry on top.
Generating SVG Solar Systems, Part 2: Filters, Gradients, and Clip Paths
Turning simple shapes into complex illustrations using some SVG magic.
Generating SVG Solar Systems, Part 1: Setting the Scene
Using JavaScript, SVGs, and CSS to procedurally generate unique solar systems.
Building an accessible image comparison web component
By leveraging native browser controls, we can make accessible and high-performing components with just a dash of JavaScript.
HSL: A Color Format for Humans
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.
Building Flexible Components With Transparency
By adding a touch of transparency, we can design components that automatically adapt to their backgrounds.
CSS Animation Timelines: Building a Rube Goldberg Machine
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!
Keeping the Stack Simple
Experimenting with a new build system for my portfolio.
What Flushing Toilets Taught Me About Web Design
I recently traveled through Europe and re-learned an old design lesson from the humble toilet flusher.
Transitioning Hidden Elements
Transitioning hidden elements can be tricky! I wrote an npm package to provide a reusable solution.
Staggered Animations with CSS Custom Properties
Movement in nature doesnât happen all at once. I wanted to bring this natural movement into my web animations.
Taking Isomorphic Apps Offline With Service Workers
For a recent project, we built an isomorphic PWA. When I added a service worker, I ran into a challenge I hadnât expectedâŚ
All Mixed Up: Isomorphic Sorting Gone Wrong
Why would the same sort function return a different value in Node vs. a browser?
See No Evil: Hidden Content and Accessibility
There are a lot of ways to hide content. Which options are the most accessible?