Together with  Posthog
🚀 Frontend Focus

#​663 — October 9, 2024 | Read on the web

CSS Nesting Improves with CSSNestedDeclarationsCSSNestedDeclarations 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 as of Chrome 130."

Bramus Van Damme (Google)

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.

Gareth Edwards

The First Newsletter Dedicated to Product Engineers — The fastest growing startups increasingly rely on product engineers. These are engineers with the skills to figure out what to build. Product for Engineers is dedicated to sharing the skills and strategies needed to succeed in this role.

PostHog sponsor

"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.

David Heinemeier Hansson

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

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.

Ryan Trimble

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.

Nicolas Chevobbe

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.

Sentry sponsor

▶  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.

Chrome for Developers

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.

Joeri Sebrechts

▶  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.

David Darnes

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.

UK Government

I Wasted a Day on CSS Selector Performance to Make a Site Load 2ms Faster
Trys Mudford

The Popover API: Your New Best Friend for Tooltips
Sjoerd Beentjes

Recipes for Detecting Support for CSS At-Rules
Juan Diego Rodríguez

🔧 Code, Tools & Resources

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.

Mux

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.

Owen Bick

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

Clerk sponsor

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.

ZEON STUDIO

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.

Kyle Zheng

Animated Favicon Generator: Tool to Create an Animated Favicon from a GIF
AE Studio

Spectrum: 100+ Free Unique SVG Shapes — One click copy and paste.
sachin dhyani

Ipx.