--- title: "A layered approach to speculation rules" publication: "Frontend Focus" issue: 671 published_at: "2024-12-04" canonical_url: "https://frontendfoc.us/issues/671" --- πŸŽ„ Plus frontend advent calendars to open. | Together with [![Google\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_800,h_271/e_make_transparent/co_white,e_outline:10/u7hgy97824jj4gjk5gok.png)](https://shortclick.link/w1yhg6) πŸš€ **Frontend** Focus #​671 β€” December 4, 2024 | [Read on the web](https://frontendfoc.us/issues/671) ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733310134/jvd2zvoon603i5yznpqi.png) πŸŽ„πŸ—“οΈ Frontend Advent Calendars It's that time of year! Developers a-plenty are penning lots of webdev-related articles as part of Christmas content advent calendars. We'll be featuring many of them here over the coming week's but for those of you seeking daily drops of developer-focused reads, here's where to find them: - πŸ—“οΈ The [HTMHell Advent Calendar](https://www.htmhell.dev/adventcalendar/), helmed by Manuel MatuzoviΔ‡, once again returns for 2024 bringing together a daily article focusing on HTML, along with related security, assessibility, UX topics and more. - πŸ“‹ The [CSS Advent Calendar](https://cssadventcalendar.dev) is a rather traditional looking calendar, complete with festive doors. Behind each one you'll find a brief snippet on a certain CSS feature, along with links out to learn more. - 🏎️ The annual [Web Performance Calendar](https://calendar.perfplanet.com/2024/) is a great returning resource for numerous articles on measuring, monitoring and optimizing all things web performance. Speed geeks, this one is for you. There's plenty of other themed calendars across a variety of disciplines, including of course the puzzling [Advent of Code](https://adventofcode.com). If you're after more like this [Adrian Roselli has a great round-up](https://adrianroselli.com/2024/12/development-advent-calendars-for-2024.html). [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/70e0cbf5.png)](https://shortclick.link/w1yhg6) [Build with Gemini, Our Largest and Most Capable AI Model](https://shortclick.link/w1yhg6) β€” 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](https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/) β€” Harry has been experimenting with the [Speculation Rules API](https://developer.chrome.com/docs/web-platform/prerender-pages), developing something of a multi-tiered approach to really maximizing the benefit of the two speculative loading types (`prefetch` and `prerender`). Harry Roberts ⚑️ Quick Links - πŸͺ [Version 5.0 of web framework Astro](https://astro.build/blog/astro-5/) has landed, adding _Astro Content Layer_ β€” a new flexible way to manage content. - 🎨 Adam Wathan and Sam Selikoff [▢️ explore the new Tailwind CSS v4.0 beta](https://www.youtube.com/watch?v=vhcntygYBsI) in this hour-plus long video. - πŸ„ There's a new browser in town from start-up Deta, [it's called _Surf_](https://www.theverge.com/2024/12/4/24312449/deta-surf-ai-browser) (great name) and has a chatbot baked in. - 🍏 [Chicago Kare is a lovely, faithful reproduction](https://chicagokare.xyz) of the bitmap Chicago typeface created by designer Susan Kare for Apple back in 1984. - 🚫 [This site outlines ten solid reasons](https://dontfuckwithscroll.com) why you shouldn't _mess_ with scrolling. - πŸ–₯️ Those of you of a certain pedigree [may remember _2Advanced_](https://webdesignerdepot.com/blast-from-the-past-2advanced-com/), an early 2000s site with an inspiring, era-defining look. πŸ“™ **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733313829/bfljks0bw4qlmbyxzkbh.png)](https://fossheim.io/writing/posts/2024-dataviz-a11y-elections/) [Dataviz Accessibility Principles, Demonstrated by 2024 Presidential Election Dashboards](https://fossheim.io/writing/posts/2024-dataviz-a11y-elections/) β€” 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](https://dub.sh/focus-dec4) β€” 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](https://zeroheight.com/blog/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733320052/qfqakq4a0dbhkzonkpqt.png)](https://www.tyleo.com/html-glass.html) [Frosted Glass from Games to the Web](https://www.tyleo.com/html-glass.html) β€” 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](https://www.smashingmagazine.com/2024/12/creating-effective-multistep-form-better-user-experience/) β€” 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](https://htmhell.dev/adventcalendar/2024/2/) β€” 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?](https://htmhell.dev/adventcalendar/2024/1/) Rian Rietveld [Why We Switched to Astro (And Why It Might Interest You)](https://www.datocms.com/blog/why-we-switched-to-astro) Stefano Verna [Avoid Hotlinking Images with Cross-Origin-Resource-Policy](https://www.sjoerdlangkemper.nl/2024/11/27/avoid-hotlinking-images-with-corp-cross-origin-resource-policy/) Sjoerd Langkemper πŸ”§ **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1733313237/spxlqrkeffmdpznaj9fe.png)](https://tailscan.com/colors) [Tailwind Colors: All The Tailwind CSS Colors in a 'Cheatsheet'](https://tailscan.com/colors) β€” 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](https://kinesisjs.com/) β€” 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.](https://github.com/amineyarman/Kinesis.js) Amine Bouyarmane [Build Fully Functional Apps in Minutes, Not Months](https://bolt.new/?utm_source=fe_focus&utm_medium=secondary) β€” Create, run, edit, and deploy full-stack web apps with Bolt. StackBlitz sponsor [uifonts.app: Test and Preview Fonts in Real Time](https://www.uifonts.app/) β€” 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](https://github.com/selemondev/spark-ui) β€” [See some demos here.](https://spark-ui.dev/) Selemon Brahanu πŸ“° Classifieds 🎹 [STRICH](https://strich.io/?ref=frontend-focus): Add blazing fast and reliable 1D/2D Barcode Scanning to your web apps. Free demo app and 30-day trial available. --- πŸ’› [JavaScript Weekly](https://javascriptweekly.com) is our email digest on all things JavaScript. We send a round-up of the latest news, tutorials, and tools every Thursday. [Markwhen: A Text-to-Timeline Tool That Converts Markdown-ish Text to a Cascading Timeline](https://markwhen.com/) β€” This is beautifully presented. Markwhen [Awesome Docs Gallery: A Crowdsourced, Open-Source Gallery for High-Quality Dev Docs](https://awesome-docs.gallery/) β€” A lot of inspiration here. hasnode πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/671/*|UID|*?ipx=t)