Newsletter #52 - Escape Hatches, Topographic Maps, and HTML Animation!

April 11, 2022

A CSS custom property technique, a couple of brilliant canvas CodePens, some great articles, and an HTML-only animation!

There's so much packed into this week's issue, let's get to it!

Escape Hatches with Custom Properties

When Andy Bell joined us on stream, he pulled out this reusable layout class he calls a cluster.

It's a standard use of Flexbox where items are in a row until they need to wrap and stack vertically.

What's special is how he's allowing for easy overrides with CSS custom properties.

If you pass a second argument to var(), that becomes the fallback if the first doesn't exist. So for this line:

align-items: var(--cluster-vertical-alignment, center);

The default is center because --cluster-vertical-alignment hasn't been set. Because it's first, it'll take precedence if he ever declares it on an element.

Fallbacks with more Custom Properties

Even cooler, your fallbacks can be custom properties with their own fallbacks. If you're already in a var() you don't need to use var() again, so all of these are valid:

Here's a CodePen demo for that last line.



Louis Hoebregts traces over an SVG of a topographic map with canvas. He's using P5 and GSAP, and the stylish cherry on top is a filter with a touch of blur and saturation.

Circle Hatching Circle

Sophia Wood uses canvas and a hatching technique to 'draw' from an image source.

Click on the canvas to add more hatching focal points, and even drop any image on line 11 to apply the same effect.

Checkbox with indeterminate state Checkbox with indeterminate

A slick animated checkbox from Jon Kantner that can handle 'checked', 'unchecked', and when only some of the child items are checked.

Generative memo board Generative memo

Community member Mark Boots made a really fun memo board with lots of generative details.

I love how the sticky notes fall when you yank them off.


How to Fix Your Low-Contrast Text How to Fix Your Low-Contrast

A great article from our good friend Ben Myers on what accessible contrast really is, and how deceptive it can be at times.

Understanding Layout Algorithms Understanding Layout

A great article from Josh Comeau on how browsers consider certain properties when rendering layouts.

You'll learn some quirks around z-index, and improve your mental models around CSS.

Animated Grid Tracks with :has() Animated Grid Tracks with :has()

Michelle Barker wires up a couple great demos with the :has() pseudo-class, which is only in Safari so far.

Community Questions

Last Week's Question

If work gave you a free week to learn any development skill, what would it be? (Link)

Sebastien, Anderson, and Julián said Three.js. Adam and Soumak would dive into Shaders while James and David learn TypeScript.

We also got CSS, Git, Docker, GraphQL, and State Machines. Thanks for all the replies!

This Week's Question


Head over to Twitter to answer and I might include it in next week's issue!


DALL·E 2 - AI Generated Art DALL·E 2 - AI Generated

This feels like a pretty big milestone in AI-generated art. It's incredible just how good the results are, almost all of them feel human-made.

See the pixel art there? That was made from "An astronaut lounging in a tropical resort in space as pixel art." Mind-blowing.

Animation In HTML ~ No JavaScript, CSS, or Images Animation In HTML ~ No JavaScript, CSS, or

Community member Alan Smith created an animation without JavaScript, CSS, or images. Plus it's a horse!

It's all ASCII art and clever use of meta-tags. I recommend checking out the "Chrome" version.

He's also created an HTML-only maze and pixel art.

So long, partner

That's it for this week!

Thanks so much for riding along. If you shared the newsletter with a friend or two, it would mean the world. Always nice to have more folks to chat with.

Until next time.

Your neigh-bor,


Buy Me a Coffee at

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters