Writing

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

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?