A layered approach to speculation rules

Build with Gemini, Our Largest and Most Capable AI Model — Use the Google AI JavaScript SDK to make your first generative AI call using the Gemini API in your client-side web application. Learn everything you need to know at your own pace with Google AI Studio.

Google Gemini sponsor

A Layered Approach to Speculation Rules — Harry has been experimenting with the Speculation Rules API, developing something of a multi-tiered approach to really maximizing the benefit of the two speculative loading types (prefetch and prerender).

Harry Roberts

📙 Tutorials, Articles & Opinion

Dataviz Accessibility Principles, Demonstrated by 2024 Presidential Election Dashboards — Sarah has tested the accessibility of various 2024 U.S. Presidential Election data visualizations from various news orgs, looking at the charts and data on show and highlighting the numerous issues. A deep dive with some food for thought on accessible ways to display more complex information.

Sarah Fossheim

Flex Your Product Muscle with Product for Engineers — Get curated advice on building great products, lessons from building PostHog, and the strategies of top startups.

PostHog sponsor

The Lowdown on Dropdowns in HTML & CSS — If you’re trying to reveal content from user interaction David proclaims that “you should read this”, encouraging us to put down that JavaScript and check out new and upcoming HTML/CSS features to help us do the job.

David Darnes

Frosted Glass from Games to the Web — A UI games developer (who worked on the Forza series) shares the process of translating in-game ‘frosted acrylic’ design elements to HTML. The end result is nice! backdrop-filter does the heavy lifting here.

Tyler Wolf Leonhardt

Creating Effective Multi-Step Forms — Looks at the design considerations for good-form experiences, beyond just validation — specifically on forms that involve navigation between sections.

Amejimaobari Ollornwi

Starting Off Right: Where Autofocus Shines — On the value of autofocus for enhancing the user experience, particularly on form-heavy single purpose pages.

Kilian Valkhof

A Link on a Logo in the Header: What Should the alt Text Be?
Rian Rietveld

Why We Switched to Astro (And Why It Might Interest You)
Stefano Verna

Avoid Hotlinking Images with Cross-Origin-Resource-Policy
Sjoerd Langkemper

🔧 Code, Tools & Resources

Tailwind Colors: All The Tailwind CSS Colors in a 'Cheatsheet' — You can click to copy any color and choose the desired format, which includes the new OKLCH format that gets transpiled to a more common format with Tailwind version 4.

tailscan

Kinesis.js: A Library to Easily Create Complex Interactive Animations — The home page includes some advanced examples of what’s possible, which includes the ability to animate elements in response to mouse movement, scroll events, and even audio frequency data. GitHub repo.

Amine Bouyarmane

Build Fully Functional Apps in Minutes, Not Months — Create, run, edit, and deploy full-stack web apps with Bolt.

StackBlitz sponsor

uifonts.app: Test and Preview Fonts in Real Time — The fonts, sourced from Google Fonts, are displayed on real UI elements on the page. You can select a primary and secondary font or hit the ‘random’ button to preview random font pairings.

uifonts․app

Spark UI: A Library of Animated Components Built with Vue, TypeScript, Tailwind, and Vueuse Motion — See some demos here.

Selemon Brahanu

Markwhen: A Text-to-Timeline Tool That Converts Markdown-ish Text to a Cascading Timeline — This is beautifully presented.
Markwhen

Awesome Docs Gallery: A Crowdsourced, Open-Source Gallery for High-Quality Dev Docs — A lot of inspiration here.
hasnode