Conditional CSS with :has and :nth-last-child — Highlights a few practical examples of combining the CSS selector :nth-last-child with :has to create dynamic components and layout states. Lots of great visuals and code examples here to help things along.

Ahmad Shadeed

A Complete Guide to Performance Budgets — If you’ve invested a lot of time to make sure that your site is as fast as it can be, you’ll benefit from having some things in place to prevent regressions. Tammy Everts walks through the idea of a ‘performance budget’, which metrics to track, and how to focus on the things that truly matter.

Tammy Everts (Speedcurve)

How to Dynamically Filter Angular Grid From Code — While the Kendo UI for Angular Grid comes with built-in filtering functionality, sometimes you need to allow users to control what the filters show. We can do that too. Let’s take a look.

Progress Kendo UI for Angular sponsor

Introducing Baseline — A new initiative (announced at Google I/O) to help you quickly see whether a feature or API is safe to use in your site or web apps. This post shares details on the ideas that led to the concept, and how it will help. Here's another post on how you can use Baseline today.

Rachel Andrew (Chrome Developers)

🔑 Spotlight On.. Passkeys — Three early adopters (from Kayak, Robinhood, and Instacart) share their thoughts on this new security technology, having rolled it out on their platforms. ▶️ Also, there was a roughly 20-minute talk at Google I/O last week in which Eiji Kitamura showed us how you can make use of this new security feature. (🤔 Still trying to make sense of Passkeys? This recent post from Michał Sapka may help.)

Apple Developer

What's New in CSS and UI: I/O 2023 Edition — Yes, more from I/O. This time it's the top 20 CSS and UI features highlighted at the show that you “don’t want to miss” — including, nesting, scoped CSS (see below), popover, scroll-driven animations, and more. This post is packed with stuff.

Chrome Developers

Scoped CSS is Back — Back, and better than before, the W3C spec is stable, and you can now test things under a flag in Chrome. What is it? Well, scope is “a game changer” that brings more control over which selectors target which elements, and the ability for one set of styles to override another based on proximity in the DOM.

Keith J. Grant

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Advancing Interaction to Next Paint (INP) — The Chrome team has announced that INP is no longer experimental and will replace First Input Delay (FID) as a Core Web Vital in 2024.

Viscomi & Sullivan

Semantics and the popover Attribute: What to Use When? — The experimental popover HTML attribute adds behavior, not semantics. Hidde asks which semantics should you use in combination with this attribute?

Hidde de Vries

How We Built the Storybook Day 3D Animation — Have you ever seen an impressive animation and wondered ‘so how’d they actually do that?’ This tutorial takes the Storybook Day animation and breaks it down step-by-step, each with sample code.

Varun Vachhar

How Google Tried to Fix the Web — By Taking It Over? — An interesting look at the development, and eventual failure, of AMP (Accelerated Mobile Pages) and how it affected Google's relationship with publishers.

David Pierce (The Verge)

headless-qr: A Simple, Modern QR Code Library — A slimmer adaptation of an older project without the extra code that wouldn’t be necessary today.

Rich Harris

PeepsLab: Create Your Own "Peep" (i.e. "People") Avatars — You can randomize just about any part of the avatar, or generate a completely random one, before downloading as PNG.

shayan

CSS HD Gradients: Interactively Build and Customize Gradients — The gradients are built using modern color formats (oklch, hsl, lab, srgb, etc.) and the tool supports linear, radial, and conic gradients.

CSS HD Gradient

Shaper: A Generative Design Tool for UI Interfaces — An interactive tool to explore design variations using a simple UI. You can adjust typography settings, spacing, colors, and more, before exporting your design tokens as CSS Variables. Sign-in required.

hayk an