Getting Started with Web Performance — A solid look at how to up your web performance game, with strategies, tools and tips to help you make notable improvements. Lots of additional resources shared here too to help you push things further. Maybe a nice end of year project, making things speedier as we head into the new year?

Alistair Shepherd

Firefox 121 Released: New Features, Updates & Fixes — A big release of Firefox just before the holidays (it shipped yesterday), featuring support for the :has() selector, <iframe> lazy loading, updated text-wrap property support, and more. Full developer-focused notes here.

Mozilla

Session Replay Basics - Debug Web App Issues Faster — Tired of “works fine on my machine” and spending time chasing elusive issues (like Hydration errors)? Join us on Jan 11th to learn how Session Replay can help confirm and resolve even the most difficult-to-repro issues in JavaScript applications.

Sentry sponsor

Baseline in 2023 — Baseline is now added to the invaluable Can I Use. Rachel explains how the new integration works here, and highlights what features became part of the Baseline in 2023.

Rachel Andrew

Figma and Adobe Abandon Proposed Merger — 15 months after announcing the deal, the companies no longer see a path toward regulatory approval. Figma will get a meaty billion dollar check from Adobe.

Dylan Field (Figma)

CSS animation-composition — How to use the CSS animation-composition property for advanced control over how values are applied during keyframe animations.

Tyler Gaw

CSS Scroll Snapping Aligned with Global Page Layout: A Full-Width Slider Case Study — Have you run into a situation where you need the padding of one element to align with the padding of another element? This article demonstrates the issue with a full-width slider component that breaks out of the main page container, sharing a couple of techniques to keep it visually aligned with other elements on the page.

Brecht De Ruyte

Kickstart Your 2024 Developer Career with Scrimba — Scrimba’s online bootcamp can turn you into a hireable Frontend Dev in 3-6 months. Frontend Focus readers get 25% off! Offer ends Dec 31.

Scrimba sponsor

The Shrinkwrap Problem: Possible Future Solutions — How anchor positioning can help tackle a CSS problem: shrinking containers to fit content when it automatically wraps.

Roman Komarov

Using Date-Based CSS to Make Old Web Pages Look Old — Explores a way to access the published date metadata of a page in order to change the CSS based on its age.

Terence Eden

Three Modern CSS Properties Your Site Must Have — A look at three “lesser-known CSS secrets” that can go some way to help fix some UI problems on your website.

Mojtaba Seyedi

Locking Scroll with :has() — A neat, handy little trick that uses :has() to prevent accidental page scrolling when modals are open.

Robb Owen

Announcing SvelteKit 2 — SvelteKit (the official toolkit for building Svelte webapps) is now one year old, and despite its relative youth, the framework has been quickly embraced by the community. This release is a relatively incremental one, adding support for Vite 5, and laying the groundwork for Svelte 5.

Svelte

Empowering a Creator Economy with ‘Game-Changing’ Analytics Dashboards — See how Patch helps Hubla deliver interactive, customer-facing analytics dashboards with zero infrastructure setup.

Patch sponsor

pagefind-search Web Component — This implements PageFind search in an Eleventy app using Eleventy island support (via the is-land component).

Zach Leatherman

Open Source Software: Open Source Alternatives to Popular Projects — Currently includes 500+ projects that can be searched via keyword or via category filters (analytics, APIs, monitoring, terminal, authentication, etc).

john rush

NinjaBootstrap: A Collection of SCSS Utilities to Extend Bootstrap 5 — Includes utilities for spacing, positioning, sizing, borders, and color theming, allowing you to have a little more control over Bootstrap’s default classes.

Live Canvas

SVG.io: Generate Custom SVG Images from a Text Prompt — Simpler prompts will have better results and it’s free to use with no limitations (for now!). The generated SVG is monochrome but could be customized in your SVG editor of choice. I had mixed success, but it's an interesting idea.

Digital Pixel