✍️ Hello! After a week away in Paris I'm back at my desk with the latest frontend links for you to peruse. Let's get to it.
Your editor, Chris Brandrick (a little grayer)

Together with  Imagekit
🚀 Frontend Focus

#​634 — March 13, 2024 | Read on the web

Announcing Speedometer 3.0: A Shared Browser Benchmark for Web Application Responsiveness — Speedometer has been around since 2014, but this new 3.0 release is the first with a new cross-industry collaborative approach that's supported by each major browser engine (Blink, Gecko, WebKit). Version 3 adds many new tests, performance wins, and improvements. The WebKit team call it the “best way yet to measure browser performance”.

Apple, Google, Microsoft, and Mozilla

Handling Videos? Here's the Only Video API You'll Ever Need — Transform videos in real-time with URL-based parameters, leverage adaptive bitrate streaming, and deliver optimized videos across the globe. Effortlessly personalize the visual experience for your users; don't take our word; Try ImageKit Today.

ImageKit.io sponsor

Interaction to Next Paint is Now Officially a Core Web Vital — It has now replaced First Input Delay. Here’s a quick recap of what’s now changed along with some resources to help you find and fix INP issues.

Rick Viscomi (Google)

The Quiet, Pervasive Devaluation of Frontend — Considered introspection here on the discernment of the frontend trade as a whole: “I feel like I’m seeing a widespread diminishment of the practice of frontend. [..] I notice its importance minimized, and its challenges trivialized.”

Josh Collinsworth

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

Creating Color Palettes with the CSS color-mix() Function — This article serves as a thorough explainer on how best to use new CSS color-mix() functions to create variations in color palettes.

Michelle Barker

Streaming HTML Out of Order Without JavaScript — An interesting, yet short and sweet, demo of a browser feature that enables a technique you may not have imagined possible without JavaScript, though support is still very fresh in Firefox.

Chris Haynes

CSS Variable Groups — A proposed way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components. Lea notes that it has been shared with the CSS Working Group.

Lea Verou

Best Practices For OAuth In Mobile Apps — Master the art of secure logins: Where OAuth meets native apps, simplicity shakes hands with security.

FusionAuth sponsor

▶  The Importance of Web Performance to Information Equity — A 20-minute talk on the vital role of ensuring equal access to web information and services for those with expensive data, slower devices, or both.

Bas Schouten

Improvements to the Speculation Rules API — A look over the latest updates to the experimental Speculation Rules API — designed to improve performance for future navigations. These include document rules, eagerness setting, limits, and platform support.

Barry Pollard (Chrome for Developers)

'Jakob Has Jumped the Shark'? — It’s fair to say Jakob Nielsen’s latest rumination on generative UI has caused plenty of chatter, as this collection of responses shows.

Adrian Roselli

A Practical Guide To Designing for Colorblind People — Some practical accessibility guidelines and resources to ensure more inclusive design for those with color vision deficiency.

Vitaly Friedman

Using Web Bluetooth To Read BBQ Temperature Sensor Data
Rik Schennink

▶  How to Create an Animated, Circular Progress Bar
Kevin Powell

On Building Websites and Building Websites Well
Jens Oliver Meiert

🧑‍💻 JOBS

Tired of Manually Refreshing Job Sites? — Automatically monitor most popular job platforms and get instant notifications for new listings. Try it now for free.
First 2 Apply

🔧 Code, Tools & Resources

Capo.js: A Five Minute Web Performance Boost? — Dave quips that this tool can offer a five minute web performance win that’s “sure to get you a promotion” 😉. The tool in question? It’s Capo.js — designed to help you get the elements in your <head> in order, hopefully resulting in perf gains.

Dave Rupert

This is WCAG: A Free Resource to Help You Build Inclusive Web Experiences — Includes 80+ tests that you can filter by conformance level and different accessibility categories. Also offers brief explanations so you can better understand the meaning of each accessibility criterion.


Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

Expressive Code: An Engine for Presenting Source Code on the Web — Sort of like a syntax highlighter on steroids, this gives you some extra flexibility, allowing customizations like editor/terminal frames, text/line markers, collapsible sections, and more.

Expressive Code

Finder 3.2: CSS Selector Generator — Given an element, it produces the shortest possible selector that reaches (solely) that element.

Anton Medvedev