🎄 This is the final issue of Frontend Focus in 2023, and there's plenty to check out before we sign off! Thank you so much for reading along with us this year — as ever, we hope the newsletter continues to provide you value and shines a light on helpful resources. We'll be back on January 3rd with a look back over the biggest stories and tools shared throughout 2023. Catch you then!
__
Your editor, Chris Brandrick

Together with  Sentry logo
🚀 Frontend Focus

#​623 — December 20, 2023 | Read on the web

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

⭐️ RELATED: Following the release of Firefox 121, :has() is now supported across all major browsers. Wes Bos runs through the possibilities it unlocks.

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 2023Baseline 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)

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

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

Tyler Gaw

🤨 Bramus Van Damme follows up to the above, explaining the quirks of using animation-composition: accumulate on a scale transform.

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

▶  Igalia Chats: 2023 Year in Review — Brian Kardell and Eric Meyer chat with Chrome DevRel Bramus Van Damme, reviewing the year of change in the Web Platform in an hour long discussion.

Igalia podcast

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

Robb Owen

Ten Optimization Tips for an Initial Web Perf Audit
Alistair Shepherd

Fallbacks for HTTP 404 Images in HTML and JS
Salma Alam-Naylor

26 Web Dev Terms You May Not Have Heard Of
Jens Oliver Meiert

A Mental Model for Styling the Shadow DOM
Nathan Knowler

🔧 Code, Tools & Resources

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

Catch you in two weeks! — Chris 👋

Ipx.