6 Tagged | web components

Share Controls Web Component

I built a Web Component that adds native copy to clipboard and sharing controls to a web page. The original idea was based on this excellent blog post by the folks at Set Studio. In this post I don't really want to go into the technical details of …

Continue reading →

Reviving my recipe website

I started a Git repo eight or nine years ago to store all of the recipes I use regularly. Some of them are my own and some tweaked versions of recipes I've found elsewhere. The very first version of the repo was just a folder full of markdown files. …

Continue reading →

My notes on Eleventy WebC components

The WebC plugin brings a component model similar to frameworks like Vue and Svelte to Eleventy. It allows you to create HTML-only components (basically includes) all the way up to interactive Web Components with shadow DOM and all the benefits it …

Continue reading →

Copyright Snippet

It's that time of year again, so I thought I'd do a quick post on the simple bit of JavaScript I use to keep the copyright date current in the static sites I build. Add the hidden attribute to your container element markup so that if JS fails for …

Continue reading →

Accordion Container Web Component

One of the things that interests me about Web Components is that they make it possible to build components that can be progressively enhanced. I recently wrote about how I've been making progressive enhancement more of a priority in my work, and the …

Continue reading →

Focus trapping web component

I was looking through Microsoft's design system Fabric the other day and came across an interesting component in the Utilities section called FocusTrapZone. FocusTrapZone is a React component that is used to trap focus inside any HTML element. What …

Continue reading →