~frontendfocus | Issue 663 - CSS nesting is getting better for everyone (15)

CSS Nesting Improves with CSSNestedDeclarations — CSSNestedDeclarations is a new, CSS Working Group approved interface to fix some quirks of CSS nesting, such as declarations that come after style rules confusingly shifting up. It’s in Chrome from v130, and testing is underway in Firefox and Safari. Bramus shares a quick behind-the-scenes here but in short: "This means that CSS nesting got a whole lot better...

Uh-oh, .io? The Disappearance of an Internet Domain? — The British government recently announced it was transferring sovereignty of the Chagos Islands to Mauritius. But how can geopolitics alter digital infrastructure? The decision may result in the loss of one of the tech and gaming industry’s much-loved (though problematic) top-level domains: .io.

"Automattic is Doing Open Source Dirty" — DHH (of Ruby on Rails fame) chimes in on the ongoing WordPress saga, which seems to show no sign of abating soon. He states a concern “about the integrity of open source licenses”, adding that such “integrity is under direct assault by Automattic’s grotesque claim for WP Engine’s revenues”. Matt Mullenweg of WordPress replied on X.

Searching for a New CSS Logo — Did you know that there's an active, ongoing search for a logo to help visualize all things CSS and “aid in the marketing and promotion of the new CSS era”? There’s a bunch of discussion and suggested designs being shared in the CSS-Next repo.

Firefox 131 'Supercharges' CSS Variables Debugging — Version 131 of Mozilla’s browser was released last week adding notable improvements to debugging CSS variables along with other Inspector improvements.

Debugging a Slack Integration with Sentry’s Trace View — Read how our engineers used Sentry on Sentry to fix a Slack integration issue, improving the overall user experience.

▶  State Queries — Una and Adam discuss a future web capability that builds on container queries: state queries. This upcoming feature will, for example, be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky.

Plain Vanilla: A Tutorial Website for Plain Vanilla Web Development — The incentive behind this project is to teach building complex and dynamic apps without complex tools – just HTML, CSS, and JS, using modern features like Web Components, hash-based routing, etc.

▶  Web Components: Little Bits — In this ~20 minute video from the recent State of the Browser conference, David shares how he is using Web Components to help develop complex design systems as well as custom open-source tools. More videos from the event are available too.

Building a Robust Frontend with Progressive Enhancement — The UK government website is a rare and successful example of running a huge, behemoth of a site, with strong, robust systems and sound user experience considerations. Here, they touch upon how progressive enhancement plays a crucial role in making things tick.

player.style: Video & Audio Player Themes for Every Web Player & Framework — A collection of well-presented, good looking web component media players (...and one that looks like how you remember WinAmp). Lots of customization options and easy copy and paste results too.

PlaceholderJS: Ridiculously Simple and Lightweight Placeholders — Available for use via a CDN or as a React component, these are simple SVG-based placeholders that you can customize (size, color, background, etc.) using URL or component parameters.

Securing Node.js Express APIs with Clerk and React — Secure Express API endpoints and integrate authentication without the complexity of building it from scratch.

Statichunt: A Directory of 3900+ Composable Themes, Templates & Tools for Static Site Generators — An organized collection of tools that you can filter using categories like Astro, Hugo, Gatsby, Eleventy, Jekyll, etc., as well as framework keywords like Tailwind, Bootstrap, Bulma, etc.

qrframe: A Library to Generate 'Pretty' QR Codes — An odd project as the QR codes generated aren’t always guaranteed to scan reliably, but if you can generate one that does, they're very striking. Could be useful for branding/fun use cases. You can play around with a live demo here.