~frontendfocus | Bookmarks (232)

How to Customize Next.js Metadata — Learn all about web page metadata, its use, and different strategies for customizing it in your Next.js application.

The Magic of Small Engineering Teams — How PostHog uses small teams to ship fast and scale at the same time.

Pure CSS Mixin for Displaying Values of Custom Properties — An article (and associated package) that presents a native CSS mixing that outputs various values as pseudo-elements.

▶  Scroll State Queries are on the Way — Kevin talks us through what CSS scroll-state brings to the table (available in Chrome 133 beta), along with other recent additions.

Waveform Renderer — A browser-based tool for creating a waveform from an audio file. Just add an mp3 or wav file and a waveform will be rendered — you can also edit the look. Think of it as a more focused alternative to Wavesurfer.js which also deals with playback, regions, and plugins. Repo here.

Developer Kit: Learn How to Troubleshoot Front-End Issues Faster — Get the kit curated to help front-end developers better understand user activity and resolve issues more efficiently.

🎨 tinygradient 2.0: A Gradient Generation Library — Generate color gradients with an unlimited number of color stops and steps in JavaScript to use as you wish. Supports named colors, hex colors, RGV, HSVa, and RGB CSS strings. GitHub repo.

Monoco: A Small JS Library for Smooth 'Squircle' Corners for HTML Elements — The main page includes a neat little interactive demo that showcases all the different possibilities for these alternatives to run-of-the-mill rounded corners. Includes implementations for React and Svelte.

Tabler 1.0: A Bootstrap 5-Based Open UI Kit for Webapps — The 1.0 release of this free, open-source UI kit adds dark theme support, new pages, a faster workflow powered by the Eleventy static site generator, and more.

StyleConsoleLog: An Interactive Tool to Add CSS to Console Messages — Uses string substitution along with CSS defined in the second argument, as outlined on MDN here.

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.

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.

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.

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.

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.

🎲 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.

🤖 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.