~frontendfocus | Bookmarks (260)

Blendy: Smoothly Transition One Element Into Another — The demo is essentially an animated modal window but there could be other applications for this. It works with any framework and the code is simply a few lines defining the source and target elements.

🎲 Some Things You Might Not Know About Custom Counter Styles — Outlines how @counter-styles opens up new ways of working with lists and list markers.

Wish Your AI Co-Pilot Actually Knew Your Codebase? — Try the most context-aware Developer AI. Augment deeply understands your codebase, documentation, and dependencies.

The Speed Trifecta: 11ty, Brotli 11, and CSS Fingerprinting — Matt explores a blended approach to optimizing CSS by combining Brotli compression and CSS fingerprinting, delivering the gains via a custom 11ty shortcode.

🤖 Running Inference in Web Extensions — Firefox Nightly is shipping with an 'AI runtime' API you can use for offline machine learning tasks in Web extensions. It uses Transformers.js and is already used in Firefox 133 to provide alt text for images in PDFs.

Positioning Text Around Elements with CSS Offset — Explores how CSS offset can offer an easy option for adding pleasing text along borders, textual annotations, etc.

Squish: Batch Client-Side Image Compression Powered by Wasm — Includes support for AVIF, JPEG, JPEGXL, PNG, and WebP. You can install it locally or try it in the browser here. Allows quality adjustment, batch processing, and real-time preview, among other features.

Unpic 1.0: A Toolkit for Displaying Images on the Web — A family of components and libraries for working with images on the Web, whether it’s through components for many different frameworks or working with images hosted on many different providers and CDNs.

Prompts: A Lightweight Async Alternative to alert(), prompt(), and confirm() — Includes some basic styling for the prompts, which are like modals, and they’re designed to be keyboard-friendly and based on JS Promises.

Tailwind CSS v4.0 — An all-new, ground-up rewrite of the highly popular framework. Version 4 arrived just after we hit send last week — it’s “optimized for performance and flexibility”, takes full advantage of modern web platform features, and is now CSS-first, moving away from a JS-based configuration. There’s lot of detail to dig into here.

Interop 2024 Brings More Features to Baseline — We recently shared Jen Simmons’ report from the WebKit team on the progress made across the Interop project last year, now it’s the turn of Rachel Andrew of the Chrome team to look “back at the most successful year ever for the project”.

Auth for the Test-Ship-Repeat Era - No Mocking — FusionAuth is the scalable, downloadable auth solution you can test locally—no mocking needed. It fits your SDLC like any other app component, such as a database. Test auth along with your app. Try it for free today!

Revisiting CSS Multi-Column Layout — Andy explores the somewhat underused Multi-Column Layout module, looking at its history, limitations, and modern, practical uses. We also see how features like :has() selectors and container queries now make it a rather powerful tool.

Build for the Web, Build on the Web, Build with the Web — Harry reminds us to take advantage of the “un-versioned by design” web platform: “What’s brand new today starts to show its age much more quickly than something that’s already stood the test of time”.

Considerations for Making a Tree View Component Accessible — A look behind the scenes at GitHub’s attempts to make the tree view on GitHub repos be more accessible. It’s a surprisingly complex thing to get right.

So, You Want to Push a Web Platform Feature? — If you’re curious about browser development Yoav shares some advice on why you may want to contribute, and how to go about doing so.

eBook: Best Practices for Monitoring Mobile App Performance — Learn best practices for keeping your apps online and highly performant. This guide dives into key metrics for understanding mobile app health, and explains how to utilize error data to quickly find and patch bugs, minimizing customer impact.

❤️ Top Pens of 2024 on CodePen — Plenty of superb inspiration, demos, and neat tricks on show here. Whether that’s a neat parallax effect, a retro VHS look achieved with CSS, a rad web component that adds particles to your pointer, or this 3D image carousel. Lots of cool stuff to dig into.

Cool People Link to Text Fragments — Did you know that support for linking to text fragments is now enabled across all major browsers? It means you don’t need elements to have an ID in order to navigate to it, instead you can go directly to a specific text string. Chris briefly shows us how.

▶  What is the Shared Storage API? — Tara Agyemang from the Chrome team talks us through why we need shared storage, its privacy benefits, common use cases, and how we can use it.

'My Website Has Been Gaslighting You' — Quite the provocative headline! Dave has been changing his site ever so slightly every day, tweaking the CSS by setting a --hue variable and rotating the hue about 1deg each day to make it 360º around a color wheel over the year. A fun little experiment.

Shapecatcher: Draw the Unicode Character You Want — Looking for a specific Unicode character, or just something close enough to represent what you want? This is pretty neat. Draw a shape in the box and you get the closest matches, ready to copy and paste.

Data Viz Project: A Huge Collection of Data Visualizations — Mostly for inspiration or when you’re not sure what type of chart or graph to use. Currently includes more than 160 types of visualizations under 5 main ‘families’.

Six CSS Snippets Every Developer Should Know in 2025 — Adam shared a similar list last year and it proved incredibly popular — as such, he’s back again with another grab bag of hefty snippets which are “bigger, more powerful, and leverage progressive enhancement a bit more”.