~frontendfocus | Issue 666 - Content-aware components, and blazing fast tools (16)

Atomic CSS Devtools: A Browser Extension for Debugging Atomic CSS — Available for Chrome and Firefox, this adds a DevTools panel that presents styles in a ‘non-atomic’ format to make it easier to debug and troubleshoot the CSS.

Making Content-Aware Components using CSS :has(), Grid, and Quantity Queries — Eric looks at the power of combining the CSS :has() pseudo-class with classic techniques like quantity queries and a mobile-first mindset as a way to create resilient, self-contained, content-aware components “that can adapt to any language you throw at it”.

The Most Effective Ways to Improve Core Web Vitals — Everyone wants their site to be as performant as possible, especially when Google factors such things into its rankings, but how? Luckily, Google presents a variety of practical techniques to improve those INP, LCP, and CLS metrics here.

Learn Best Practices for Reliable Frontend Testing — Surface broken functionality before customers do. In this guide, learn how to create and maintain end-to-end tests, get more visibility with private locations, incorporate synthetic tests into your CI/CD pipeline, and test internal applications.

'My Modern CSS Reset' — Whether it’s Eric Meyer’s classic take on the reset, or one of countless others, there’s always plenty of debate on the best approach to starting a project — Jake throws his hat into the ring with “a slightly more opinionated stance” that applies some light default styling too.

Apple Implements Six of OWA's DMA Compliance Requests — Reports that Apple has now fixed several issues in relation to letting browsers and web apps compete on iOS (including allowing vendors to test their own browsers outside the EU), but notes that a massive list of issues remain to be fixed in order for Apple to be DMA compliant.

WebKit Features in Safari 18.1 — Version 18.1 of Apple’s Safari browser is now available across iOS, macOS, etc, adding in two new ‘Apple Intelligence’ features.

▶  How is This Website So Fast!? — You may have seen the McMaster Carr site shared in developer circles before — it’s an interesting, somewhat retro-looking industrial supplies ecommerce site that's blazing fast, thanks to a mix of techniques. Wes runs through them here — you’re bound to pick up some performance food for thought.

Come to the light-dark() Side — A look at how modern CSS can now make handling offering up both dark and light modes simpler.

State of Frontend 2024. Dev & Business Insights You Can’t Miss! — Explore insights: 6,288 developers, 139 countries, 23 experts. New sections on AI, accessibility, and more!

HTML Form Validation Is Heavily Underused — An exploration of the “powerful validation mechanisms” of HTML forms, opining that they’re underused, and proposing why that lack of utilization may be.

Tooltip Best Practices — A straightforward summary of the various best practices, including accessibility considerations, when creating tooltips.

A <baseline-status> Web Component — A new widget to easily display web feature baseline information on your site. Just drop baseline-status into your HTML and you’ll have browser compatibility data on show.

daisyUI: A Library of Tailwind CSS Components in Multiple Themes — Includes dozens of ready-made components that you can try out using about 20 different themes – all of which are testable live in the docs.

BCD Watch: Keeping an Eye on Changes to MDN’s Browser Compatibility Data — A useful resource that automatically collects and indexes updates to browser compatibility data, specifically the data used by MDN and sourced from their GitHub repo.

AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more.