Frontend Focus

Together with

🎄 'TIS THE SEASON (for Advent Calendars)

It's now December, and as is tradition a variety of web-related advent calendars are here, sharing a variety of developer content in the run up to Christmas. We'll be sharing articles from these calendars throughout the month, but if you want a daily door to open, here are some top choices:

🗓️ CSS Advent Calendar — This one, from Steve Harrison, shares a different feature or property each day along with a quick primer on what it does.
🗓️ HTMHell Advent Calendar — Manuel Matuzovic's annual almanac returns for its fourth year, featuring authors on security, performance, accessibility and more.
🗓️ AdventJS — A daily challenge that will test your JavaScript know-how.
🗓️ Web Performance Calendar — Stoyan Stefanov brings together performance experts to share their knowledge throughout the month.

There are many more across the developer ecosystem, too, and Adrian Roselli has done a stellar job of bringing them all together.

Ship High-Performance React Apps — Join Steve Kinney for this detailed video course on React performance. You'll cover hydration, suspense, resource loading, server actions and more, coming away with the know-how to build apps that look and feel fast.

Frontend Masters sponsor

The Performance Inequality Gap in 2026 — Esteemed browser and Web standards expert Alex Russell looks at the state of client-side Web performance, what sort of bandwidth you should be taking into account, what devices people are using, and warns against ever-growing JavaScript bundle sizes. A lot of data here.

Alex Russell

⚡️ IN BRIEF

🔒 Let's Encrypt will be gradually reducing the validity period of certificates it issues from 90 days to 45 days over the course of the next two years.
↔️ The Piccalilli team has made the Introduction to Asynchronous JavaScript chapter of their JavaScript for Everyone course free to read online.
👋 After almost 14 years Addy Osmani is leaving the Chrome team, although he's staying at Google.
🎉 WordPress 6.9 has been released.

📙 Articles, Opinions & Tutorials

Masonry: Things You Won’t Need a Library For Anymore — Patrick Brosset, of the Edge team, takes a detailed look at this long-awaited feature, what it means for web developers, and how we can make use of it.

Patrick Brosset

The Fastest Way to Prototype AI Features: Agentic Postgres Free Plan — Test ideas instantly. Vector search, forks, and analytics—free Postgres built for rapid frontend + AI dev.

Tiger Data sponsor

Baseline in Action — A new collection of articles and demos (announced here) showing you some of what’s possible with the features that are now Baseline. The latest looks at layered UI patterns.

web.dev

CSS-in-JS: The Great Betrayal of Frontend Sanity — Alexander notes that what was supposed to “free us from global namespace nightmares and styling spaghetti” actually delivered performance issues and chaos. They make the case for ditching it in favor of native CSS solutions.

Alexander T. Williams

Non-Square Image Blur Extensions — Ana walks us through creating an image blur effect using a handful of minimal CSS techniques, noting some constraints to keep in mind, and the browser support caveats.

Ana Tudor

▶ Get the Core Right and the Resilient Code Will Follow — In this roughly 40-minute talk Andy shares how improving core skills, planning, and the overall feedback loop, will ultimately result in writing better code.

Andy Bell

Anchor Positioning and the Inset-Modified Containing Block (IMCB) — Bramus explains a fairly complex CSS positioning concept here, clarifying how the position-area and inset properties interact to define the positioning context for anchored elements. Interactive demos help explain things further.

Bramus Van Damme

Prevent A Page From Scrolling While A Dialog Is Open
Geoff Graham

One CSS Trick to Eliminate Scrollbar Layout Shifts
Amit Merchant

🧰 Tools, Code & Resources

Project Wallace: A Suite of CSS Analysis Tools — This project has grown since we last included one of its offerings. It now has 13 different tools including an analyzer, code quality checker, design tokens extractor, and some one-off tools (minifier, specificity calculator, etc).

Bart Veneman

Myna: A Monospace Typeface Designed for Symbol-rich Programming — The creator built this to combat the problem of often-used symbols being treated ‘like second-class glyphs’, with better alignment, weight, and clearer distinctions, to name a few features.

Irfan Ali

Reliably Scan Barcodes, QR Codes and More with One Line of Code — Add lightning-fast 1D/2D code scanning to your web app with STRICH. Simple, predictable pricing, free trial and demo!

STRICH sponsor

Framework7 9.0: Build iOS, Android and Desktop Apps with HTML — An open-source framework for building full-featured apps with Web technologies, complete with an ecosystem of plugins and tools and the ability to hook into existing front-end frameworks. GitHub repo.

Framework7

Internet Archive Wayback Machine Link Fixer: Fix Link Rot on WordPress — A useful WordPress plugin that will scan your posts (on save and any existing ones) and automatically create snapshots of outbound links (if not already available) to ensure links aren’t broken.

Internet Archive

capo.js 2.0: A Script to Optimize Element Order in Your Page's <head> — Specifically this will show you the order of the elements in your <head> and suggest a different order for optimizing the perceived performance of the page.

Rick Viscomi

Design System Component Audit and Linting: A Figma Plugin for Design Systems — Can do a quick scan or deep analysis to display data on your design system in Figma (e.g. unique components, missing metadata) along with component navigation and publishing status.

Luis Ouriach

🍍 ...a few moments later

A Bikini Bottom GSAP Snow Globe — Here’s a festive CodePen demo recreating a scene from SpongeBob SquarePants, complete with Gary the Snail and the pineapple house. It makes use of the popular GSAP animation library. Here’s a brief write-up of how Leanne put it together.

Leanne Renard codepen