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

Eric Bailey

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.

Google

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.

Datadog sponsor

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

Jake Lazaroff

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.

Open Web Advocacy

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.

Jen Simmons

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

Sara Joy

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!

The Software House sponsor

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.

everdimension

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

Zell Liew

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.

W3C WebDX Community Group

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.

Redfern Dev

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.

AuthKit sponsor

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.

igalia

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.

Alexandre Stahmer