A Beautiful Site

A collection of thoughts about HTML, CSS, JavaScript, UX, a11y, web standards, and related things. Posts by Cory LaViska.

Finding the Closest Element Through Shadow Roots

Written on

A great trick to find the closest element in the DOM that matches an arbitrary selector is Element.closest().

Testing Support for :focus-visible

Written on

The new :focus-visible CSS selector lets us remove unsightly focus rings that often result in developers adding this to their stylesheets:

Querying through shadow roots

Written on

Let's say I have a web component with an open shadow root, like this one from Shoelace.

Prefers Reduced Motion

Written on

By now, most devs are familiar with the prefers-reduced-motion media query that tells whether or not a user prefers, well, reduced motion. You can use this to tone down (or turn off) transitions and animations in your stylesheet to accommodate users with vestibular motion disorders.

Finding the active element in a shadow root

Written on

You can get the focused element with document.activeElement but, if it's inside a shadow root, this will be the host element. This happens because of retargeting, but sometimes you might need access to the internal element that actually has focus.

Moving from Stencil to LitElement

Written on

Over the weekend, I finished migrating Shoelace from Stencil to LitElement. Even though consumers of the library won't see much of a difference, this was a major overhaul of Shoelace's internals.

SVG Repo

Written on

I stumbled upon a great resource for free SVGs. They're currently boasting over 300,000 images. Check it out over at SVG repo.

Archiving Postleaf

Written on

Postleaf — at least in its current form — has been discontinued. In the future, I'd like to bring it back as something different. Maybe an open source project. Maybe a SaaS product. I'm not sure at this point.

Getting localized month and day names in the browser

Written on

JavaScript has a well-supported date/time formatting API called Intl.DateTimeFormat. Here's a tip — you can use it to generate localized month and day names without the need for a language pack! This is super useful if you're building, say, a date picker or a calendar app.

Shoelace 2.0: a forward-thinking library of web components

Written on

I've been having a lot of fun with Stencil and web components lately. Back in January, I decided to use it to completely redesign Shoelace, an open source project I created a few years ago.

Feeds available in Atom & JSON

Explore the archive for additional posts or press / to search.