✍️ Hello, and welcome to the last issue of Frontend Focus for 2024! It's been a packed year for the web platform, with plenty of exciting new features added to our developer toolbelt, improvements in browser cooperation, the developing AI tooling situation, and much more. As ever, we're going to take a look back over what we've shared in Frontend Focus throughout 2024 and revisit some of the highlights — you'll no doubt find something that's well worth bookmarking, sharing on, or revisiting (or maybe you missed it the first time).

If you've enjoyed the newsletter and found it valuable this year, please consider following us on Bluesky, and maybe forwarding this on to a friend — perhaps even someone starting their frontend journey in the new year. A big thanks for reading. We'll be back in your inbox in early January. Now, it's a big issue, so let's get started!
__
Your editors, 🦋 Chris Brandrick & Peter Cooper

🗓️ Top Ten of 2024

01: Twelve Modern CSS One-Line Upgrades — Stephanie shared this list of a dozen CSS properties that are well worth knowing earlier in the year — the one-line upgrades here will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too.

Stephanie Eckles

Complete Intro to React v9: New Project, Modern Stack — Join Brian Holt in building a pizza delivery app from scratch. Master hooks, TanStack Router, testing, and React 19 features in this comprehensive guide to modern React development. No prior React experience needed.

Frontend Masters sponsor

02: Five CSS Snippets Every Frontend Developer Should Know in 2024 — Adam did this in 2023, and the 2024 version proved very popular too. All the snippets here are toolbelt worthy, powerful, CSS tips (including nesting, sub grid, container query units, etc) that will be just as valuable as we head into 2025.

Adam Argyle

03: Inline Conditionals in CSS? — In the summer the CSS Working Group resolved to add an inline if() to CSS. An exciting step for CSS, but one that raises lots of questions too. This explainer from Lea proved valuable for many.

Lea Verou

04: What You Need to Know about Modern CSS — A bookmarkable guide from this past Spring featuring a list of all the then new additions to CSS (think nesting, view transitions, :has(), etc). It remains really handy, as there’s an explainer, demo, code example, and a quick bit of detail as to why you should care about each entry. If you want to scrub up on what new CSS features we've gotten this year, this ain't a bad place to look.

Chris Coyier

05: How to Center a Div — The fact that so many of you tapped on this one tells us that it's still something of a tricky ordeal to get right. Yes, it's easier now thanks to new tools (Flex, Grid, etc), but which to use? Josh shares the trade-offs between different approaches, and the best strategies to use.

Josh W Comeau

06: The Magic of Clip Path — This post sets out to “inspire you and show you that thinking outside the box can lead to some great animations” — all via the magic of the very powerful clip-path CSS property.

Emil Kowalski

AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more.

AuthKit sponsor

07: CSS Selectors — A thorough, complete guide covering all of the various methods we have to select elements in CSS (such as pseudo-selectors, nested selectors, attribute selectors, etc) and how to use them for applying styles.

Geoff Graham

08: An Interactive Guide to CSS Container Queries — This is a detailed explainer on CSS container queries, exploring the problems they solve, how they work, and how we can use them in our workflows. Lots of code and visuals to help things along too. Well worth bookmarking.

Ahmad Shadeed

💡 Josh Comeau also took a look at Container Queries this year, noting that adoption so far isn't all that high. Here he goes into why that may be, reintroduces us to the feature, and suggests how we may want to approach using it.

09: How to Make Your Web Page Faster Before It Even Loads — Salma looked at the events that happen before the first byte of a web page is even received by the browser. Asking if we can measure those events, and subsequently optimize them to make our web pages and applications load even faster. Neat.

Salma Alam-Naylor

10: The Frontend Developer/Engineer Handbook 2024 — This incredibly in-depth and detailed guide on the current web development landscape was well received. It's remains a superb resource for getting up to speed on everything from code editors, CSS, UX, UI, the command line, performance, accessibility, testing, AI, and much, much more.

Cody Lindley

🧰 Popular Tools & Resources we shared this year

Anchor Position Tool — CSS anchor positioning is on the way, and one rather neat layout mechanism that’s part of the spec is position-area. This (Chromium 129+ only) demo from Una demonstrates how it works. There was plenty of interest in this one, and although it's still in draft, it should prove rather powerful once widely available.

Una Kravets

Speedometer 3.0: A Browser Benchmark for Webapp Responsiveness — 2024 gave us a new major release of Speedometer — the first with a cross-industry collaborative approach supported by each major browser engine (Blink, Gecko, WebKit). Version 3 added in many new tests, performance wins, and improvements. You can run the test for yourself here.

Apple, Google, Microsoft, and Mozilla

CSS Grid Generator — This handy browser-based tool got plenty of you clicking — you can use it to easily create custom CSS grid layouts — you can specify the number of columns, rows, and gutter size.

Kristjan Retter

A Showcase of What's Now Possible with Progressive Web Apps
Danny Moerkerke

Jake's 'Slightly More Opinionated' Modern CSS Reset
Jake Lazaroff

Barba.js: Create Smooth Visual Transitions Between Pages
De Rosa, Michel, et al.

Plain Vanilla: A Tutorial Website for Modern, Vanilla Web Development
Joeri Sebrechts

PixiJS v8: A Library For Building Striking 2D WebGL Experiences
PixiJS Team

🗓️ The 2024 Web Almanac — This comprehensive report on the state of the web returns to wrap up 2024. This edition has 21 chapters (most of which are available now) covering UX, accessibility, publishing, content distribution, and more. All of the metrics shared are based on real world data from over 16 million websites.

HTTP Archive

Creating a Pure CSS Halftone Effect in 3 Declarations — Creating a halftone effect in pure CSS using just a single div, no pseudos and just three properties. Talk about efficient (and visually striking, too).

Ana Tudor

WorkOS: Sell to Enterprises with a Few Lines of Code — The modern identity platform for B2B SaaS, offering flexible, easy-to-use APIs to integrate SSO, SCIM, and FGA in minutes instead of months.

WorkOS sponsor

CSS Wrapped 2024 — A fun (pixel-art filled) exploration of the new additions to the web platform in 2024, including cross-document view-transitions, scroll-driven animations, anchor positioning, and more.

Chrome DevRel Team

Solved By Modern CSS: Feature Image — Ahmad shares how container queries and CSS :has() can help build a neat featured image component that changes depending on viewport/container size. As ever, great illustrations and code examples to help our understanding.

Ahmad Shadeed

Court Orders Automattic to Restore WP Engine's Access to WordPress.org
Ivan Mehta

📙 Tutorials, Articles & Opinion

▶  Custom Dropdowns Just Got a Whole Lot Easier (Finally!) — A quick look at the upcoming customizable select element that makes it easy to create totally custom dropdown selects with just HTML and CSS, no JS needed. It’s currently available behind an experimental flag in Chromium browsers, but wider support is expected in 2025.

Wes Bos

'My Issues with Shorthand Properties' — A bold claim here, stating that the “removal of CSS shorthand properties would benefit us all”. Håvard adds that writing explicit properties over shorthand is the way to go: “Clarity trumps cleverness”.

Håvard Brynjulfsen

Catch Flaky Tests Before They Break Your Build — Flaky tests waste time and erode trust. Learn to flag unreliable tests early and keep your CI/CD smooth.

Codecov by Sentry sponsor

What Do the State of CSS and HTML Surveys Tell Us? — Rachel (of the Chrome Web Dev relations team) takes an initial look at some of the most interesting findings from these surveys, highlighting the top browser support issues, missing features, and more.

Rachel Andrew

Using Transformers.js for AI in the Browser — Transformers.js is a seriously impressive project we link from time to time that lets you run pretrained machine learning models in the browser. Here’s a practical look at actually playing with it yourself right now.

Raymond Camden

Mastering SVG Arcs — Akshay shares his love of drawing in code, in turn demystifying how to use radii, rotation and arc direction to make intricate SVG designs.

Akshay Gupta

Multi-State Buttons — Typically, buttons are either pressed or they aren’t. But as long as you handle it in an accessible way, you can make a group of radio inputs look like a multi-state button with some neat CSS trickery. Preethi shows us how.

Preethi Sam

How to Code a Shader Based Reveal Effect with React Three Fiber and GLSL
Colin Demouge

Understanding the Main Thread in the Browser
Amrik Malhans

🔧 Code, Tools & Resources

Gradienty: A Suite of CSS Tools & Generators — Currently includes 11 different tools including generators for Tailwind gradients, CSS animations, mesh gradients, text gradients, box shadows, and more.

Gradienty

Roquefort - WebGPU Fluid Simulator — A browser-based 3D simulator that uses WebGPU compute shaders. You can edit the scene, speed, along with various effects.

Jerry Ylilammi

InclusiveColors: A Color Palette Creator for WCAG-Compliant Colors — Offers features like precise control of every shade/tint that’s generated, live contrast checking as you edit, and ability to export to CSS, Tailwind, Adobe products, and more.

Sean Wilson

Codate: Easily Create Custom Date Formats in Any Programming Language — A neat little resource to get a code snippet for common date formats – hyphenated, slashed, dotted, standard with commas, etc. Supports 11 languages including JS, Go, Python, Java, PHP, and more.

Badreddine Ibril

PicLooks: Authentic Looking AI-Generated Profile Photos — An alternative to using stock photos, these do have a more realistic look than some other AI-generated photos, and they’re free to use commercially without attribution.

PicLooks

VTracer: An Online Tool to Convert Raster Images Into Vector Graphics
Vision Cortex

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

A Framework for Evaluating Browser Support — If you find yourself trying to figure out where to draw the line when it comes to browser support, Josh has some advice, sharing the deciding factors he uses when it comes to CSS features. He notes that although this post focuses on CSS, the framework is applicable to modern JavaScript and HTML features too.

Josh W. Comeau

Tailwind CSS v4.0 Now in Beta — The long awaited beta for version 4 of the popular Tailwind CSS styling framework is out, with a new engine resulting in 5x faster full builds, a unified toolchain, CSS-first configuration (yes, you can say goodbye to noodling with tailwind.config.js!) and more. All the information you need is in the docs here.

Adam Wathan

Master Performance and Speed Up Your Site — This detailed video course shares the fundamentals of web performance, covering key Core Web Vitals metrics such as Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). You'll learn how to best use Lighthouse, WebPageTest and other tools in order to make your site lightning.

Frontend Masters sponsor

📙 Tutorials, Articles & Opinion

Make Creative Borders with background-clip: border-area — Safari is first out of the gate with support for background-clip: border-area, available now in Safari Technology Preview and in Safari 18.2 beta. It lets you fill a border with a background image or gradient. This article explains how it works, and shows up the possibilities in seven demos.

Jen Simmons

📈 Designing (and Evolving) a New Web Performance Score — Harry has been working on a way to compare performance between sites, resulting in a new metric dubbed ‘CrRRUX ‘(Chrome Relatively-Ranked User Experience). It aims to simplify competitor analysis into a single number, reflecting real user experiences across a given a cohort of sites. A clear indicator of performance in the context of your peers.

Harry Roberts

Create Printable Surveys and Forms in No Time — Need to generate custom PDF forms? With SurveyJS, you can build and export fillable or read-only forms, even with responses!

SurveyJS sponsor

▶  How Browsers Really Load Web Pages — A deep dive into how browsers decide when to load a specific resource, and all the ways in which you can influence them to modify their behaviour.

Robin Marx

The CSS Reset Contradiction — Makes the case that resets have become a commodity, resulting in an assumption that there’s a general need for them, which in turn nibbles “at the craft of frontend development”.

Jens Oliver Meiert

🕹️ Netlify Celebrates 5 Million Developers — Netlify is now used by over five million developers — and they’ve marked the occasion with a Marble Madness style browser experience/game.
Netlify

‘We Were Wrong’: An Oral History of WIRED’s Original Website
Virginia Heffernan

What We Learned Migrating from Webpack to Vite
Roman Zaynetdinov

🦋 Using Bluesky Posts as Blog Comments
Emily Liu

🔧 Code, Tools & Resources

Vite 6.0 Released — The popular build tool has rapidly found itself at the heart of the frontend ecosystem with its combo of speed, simplicity and extensibility. v6 doubles down on these and has a variety of enhancements.

Vite

📊 Tremor: React Components for Building Dashboards — Built with React, Tailwind CSS, and Radix UI, you can use Tremor by either copy and pasting the components or via their npm package. You get all the typical dashboard UI elements like charts, progress indicators, activity trackers, accordions, tables, etc.

Tremor Labs

AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more.

AuthKit sponsor

SVG Spinners: 100+ Open Source SVG Loading Spinners — You can view them all in action here. They’re built with CSS and SMIL, are easy to customize using currentColor, and you can include them as inline SVGs or download directly.

Shubham Jain

HTMLrev: A Categorized Directory of Frontend Templates — We’ve featured this before, but it’s now home to over 1,500 templates. The site itself doesn’t hold any templates, but links to third party resources, and lets you filter down to what you’re looking for.

HTMLrev

Diff Text: A Simple Online Diff Checker Tool — Lets you compare by words, characters, or lines and you can toggle show all lines or only changed lines.

Spencer Smith

Spoiled: A Realistic 'Spoiler' Component for React — The homepage is a live demo. A neat way to keep things hidden until a user wants to see them. Powered by the CSS Painting API with a static image fallback. GitHub repo.

Alexey Taktarov

📊 One Dollar Stats: Web Analytics Alternative — An interesting idea from the folks behind Drizzle ORM.
Drizzle Team