~frontendfocus | Issue 671 - A layered approach to speculation rules (13)

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

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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.

Prompt, Run, Edit, and Deploy Full-Stack Web Apps with bolt.new — StackBlitz recently released in-browser AI web development agent: bolt.new! Give it a try today.