A Beautiful Site

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


Written on

I stumbled upon a short post that intrigued me. In it, the author claims that the cure for boredom is superpowers. Not superpowers in the Superman sense, but ones that we can teach ourselves.

Know When To Draw The Line

Written on

One-off variations aren't uncommon, but they don't belong in your design system. You're design system isn't solving for every possible use case — it's encouraging visual consistency and efficient development. Use custom styles for one-offs.

Don't Do Magic

Written on

We recently had a design for an "alert" component with an actions slot. In the spec, only secondary buttons were allowed in it.

On Buttons and Links

Written on

I posted a tweet yesterday that was met with some controversy, so I thought it would be a good idea to unravel it.

On Using Web Component Libraries

Written on

We tend to think of components as things that belong to a framework. After all, React has components, Vue has components, Angular has components…it's just how we've always used them.

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.

Feeds available in Atom & JSON

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