Getting Started with Style Queries — The ability to query a parent’s inline size, and container query unit values (using the @container rule) recently reached stable support in all modern browser engines (though the broader container style queries spec still has some way to go). Here’s a look at how to get started with the feature.

Una Kravets (Chrome Developers)

Let's Build a Chrome Extension That 'Steals Everything' — Indulging in what they call “DIY whole hog data exfiltration”, Matt, the author of Building Browser Extensions demonstrates that in spite of Manifest v3, a whole lot of bad stuff is still possible when it comes to building browser extensions. Be aware of it and don’t actually do it, of course.

Matt Frisbie

Get a Complete Picture of Your Site’s Performance — Track Core Web Vitals and learn how users experience the speed of your site. Use Lighthouse audits to fix issues. Measure the impact of slowdowns on business metrics and user engagement. Integrate with your CI/CD process to stay fast.

SpeedCurve sponsor

On Container Queries, Responsive Images, and JPEG-XL — Now that one major element of CSS Container Queries has shipped in nearly all modern browsers, Jason notes that it’s time to revisit responsive images and ask how they fit in a container query world. Are we on the right path?

Jason Grigsby

A Guide to Accessible Form Validation — What you need to take into consideration so that nobody gets stuck on an inaccessible invalid field.

Sandrina Pereira

Intro to HTML-First Frontend Frameworks — The post defines HTML-first front-end frameworks as ones that prioritize sending complete functional HTML versus a JavaScript bundle, and looks at some of the different approaches taken by different tools like Marko, Astro, Eleventy, and Enhance.

SitePen Engineering

Improved Font Fallbacks — The new size-adjust and font metric overrides allow us to create fallbacks that closely match web fonts, thus reducing layout shifts.

Katie Hempenius (Chrome Developers)

Database Caching Without Changing a Line of Code — Increase throughput and lower query latency using PolyScale’s intelligent database cache. Implement in minutes.

PolyScale.ai sponsor

You Don't Need Ruby on Rails to Start Using Hotwire — Hotwire, an ‘HTML over the wire’ approach to making Web pages more dynamic (explained here), is closely tied to Rails, but Rails isn’t a must. Indeed, Akshay shows us how it can work on a totally static site here.

Akshay Khot

PDF: The Carbon Impact of Web Standards — This report brings together the findings of a systematic investigation into the carbon impact of web standards (such as frontend HTML and CSS). It shows how developers, tooling, and browser vendors can calculate how polluting their web presence is (in terms of electricity usage).

Alexander Dawson

Why to Avoid Spanning Table Headers — Spanned table headers are not well supported across screen readers.

Adrian Roselli

Design Systems in the Time of AI — Brad notes that it has “been absolutely wild to witness the rise of the new crop of AI tools”, calling it equally exciting and terrifying. This post looks at how they may impact the world of design systems, and explores some obvious use cases.

Brad Frost

Scrollbar.app: Interactive Tool to Design Custom CSS Scrollbars — This is unique among CSS generators! You can adjust the values for the scrollbar-based pseudo-elements (which require -webkit- prefixes) and see the results directly on the page, before copying the CSS. Nice, straightforward, and clean.

Henri Parviainen

TypeTrials: A Free Platform to Test and Experiment with Variable Fonts — You can choose from a set of included fonts or upload your own before fiddling with some basic settings, variable settings, OpenType Features, and more. Also lets you export the @font-face settings.

Pangram Pangram Foundry

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

Lenis: A Smooth Scroll Library — Boasts a number of extra features compared to similar libraries that allow you to do scroll animations, parallax, etc. You can try it out here.

Studio Freight Darkroom

Tachyon: A Small Script to Make Page Navigation Faster — Same concept as Turbolinks (now deprecated in favour of a larger set of tools called Hotwire), which is basically a drop-in script that uses native features to improve page navigation speed.

Tachyon