Zach’s ugly mug (his face)

Zach Leatherman

A little collection of theme-less Web Components

January 22, 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 Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

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

2 Retweets

Hubert SABLONNIÈREAndré Jaenisch
28 Likes
Paviel ŁaŭcevičSassInTheDarkThis Dot Labsuossɹǝpu∀ ɹǝdsɐʞFrank TaillandierDanMickaël IsaertMohammad H. sattarianTodd ParkerJakeScott de Jongeaaron hansHubert SABLONNIÈREAdam Bradley ⚾️Nikita VoloboevCAHO badGeoff Rich𝕕𝕘𝕣𝕒𝕞𝕞𝕒𝕥𝕚𝕜𝕠JoeBrett EvansAlexis DeveriagriffadevtylerNICK HDevin ClarkAndré JaenischDave RupertPhilipp
Webmentions
    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)