juniper-hale

Most shadows on the web are fuzzy grey smudges. With a little light-source thinking and a layering trick, we can make them feel tangible and warm.

Transitions are the humble workhorse of web animation. Let's poke at timing functions, delays and the little details that make motion feel alive.

The <path> element looks like line noise. It's actually a tiny drawing language, and once you can read it, you can draw anything.

Animate red to blue and you'll pass through a sad grey. Here's why browsers do that, and how to take the scenic route instead.

CSS Grid isn't a bigger Flexbox. It's a different way of thinking about layout, and the mental model is simpler than the spec makes it look.

The oldest principle in animation is also the easiest to add to your UI. A little squish makes a button feel like it's made of something.

Six years of writing tutorials changed how I name things, how I structure components, and how I think about the person reading my code.

A playground of interactive front-end tutorials, written slowly and with a lot of wobbly animations.