Zach’s ugly mug (his face)

Zach Leatherman

A little collection of theme-less Web Components

January 21, 2021

Filter Container

A way to filter visible child elements based on the value of a <select> element.

Video Radio Star

A lightweight helper for HTML5 <video>. Enable GIF-like playback with opt-in audio. Autoplay video only when visible (cross-browser). Pause when it scrolls out of frame. Works with SaveData and prefers-reduced-motion. Use custom UI controls (e.g. Play, Pause, Toggle Mute).

Herald of the Dog

An announcement bar/banner component with a Hide button that avoids content layout shifts.

Seven Minute Tabs

A small tabs web component based on the sample from the WAI-ARIA Authoring Practices.

Honorable Mention

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Don’t Shut Down Your Business! Instead Use Eleventy Image
Images at Jamstack Toronto


Hubert SABLONNIÈREAndré Jaenisch


Matt BiilmannDerek NguyenJustin FagnaniAndy BelljkKristofer KoishigawaLynn FisherPaviel ŁaŭcevičSassInTheDarkThis Dot Labsuossɹǝpu∀ ɹǝdsɐʞFrank TaillandierDanMickaël IsaertMohammad H. sattarianTodd ParkerJakeScott de Jongeaaron hansHubert SABLONNIÈREAdam Bradley ⚾️Nikita VoloboevGeoff RichCAHO bad𝕕𝕘𝕣𝕒𝕞𝕞𝕒𝕥𝕚𝕜𝕠JoeBrett EvansAlexis DeveriagriffadevtylerNICK HDevin ClarkAndré JaenischDave RupertPhilipp
Social Card Image Preview

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)