Writing

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.

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?

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.

Hand-code an SVG snowflake, experiment in an interactive playground, and generate infinite random snowflakes with a dash of JavaScript.

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

Using JavaScript, SVGs, and CSS to procedurally generate unique solar systems.

By leveraging native browser controls, we can make accessible and high-performing components with just a dash of JavaScript.

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.

Combining the power of Handlebars with the simplicity of Markdown.

By adding a touch of transparency, we can design components that automatically adapt to their backgrounds.

CSS filters unlock powerful new opportunities for playing with color. By applying some color theory we can dynamically generate harmonious color combos and gradients. Let's sell some socks!

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!

Description

Experimenting with a new build system for my portfolio.

Here we go again!

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?