~frontendfocus | Bookmarks (247)

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.

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.