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.
A great trick to find the closest element in the DOM that matches an arbitrary selector is
:focus-visible CSS selector lets us remove unsightly focus rings that often result in developers adding this to their stylesheets:
Let's say I have a web component with an open shadow root, like this one from Shoelace.
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.
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.
I stumbled upon a great resource for free SVGs. They're currently boasting over 300,000 images. Check it out over at SVG repo.
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.
Feeds available in Atom & JSON
Explore the archive for additional posts or press / to search.