~frontendfocus | Bookmarks (260)

Svader: Create GPU-Rendered Svelte Components — The examples are a good way to get a feel for what this offers.

Learning How to Build Modern Web Extensions — It’s easy to run into outdated docs when building extensions. Lucky for us, Hui has been through the process recently and shares some tips.

Testing 10 JavaScript Frameworks on Their HTML Defaults — Using a JavaScript framework is now ‘the way’ for many Web site developers, but how do the popular options fare at producing valid, error free HTML?

Decoding CSS Selectors: :has(:not) vs :not(:has) — When you combine CSS functions, the nesting matters - a lot.

StyleObserver: A Library to Observe CSS Property Changes — An exhaustively tested JS library from Lea Verou, designed to observe any changes to CSS properties, and deftly deflecting a mass of relevant browser bugs along the way. Project homepage.

Run GitHub Actions Up to 2x Faster at Half the Cost — Blacksmith runs GitHub Actions up to 2x faster at half the cost. Trusted by 250+ companies like Ashby and Clerk.

LaLoka Layouts: 30+ Useful Components Built with Tailwind — Includes components not normally included in these types of component sets. For example, various fixed position elements, input add-ons, along with standard options like avatars and cards.

Heat.js: A Heat Map Visualization Library — Think like the GitHub contributions heat map. No dependencies, small, responsive, and themeable. There’s a live demo or its GitHub repo.

scroll-snap 5.0: A Customizable Scroll Snap Implementation — Uses requestAnimationFrame() for 60fps scrolling performance and doesn’t have any dependencies. Try it here.

tailwind-merge 3.0: Efficiently Merge Tailwind CSS Classes without Conflicts — Provides a way to merge Tailwind CSS classes from JavaScript without style conflicts. v3.0 is notably Tailwind CSS v4 only so don’t upgrade if you haven’t upgraded Tailwind CSS first.

dash.js 5.0: JS Implementation of MPEG DASH Playback for Browsers — A reference client implementation for the playback of MPEG DASH (Dynamic Adaptive Streaming over HTTP) via JavaScript in browser based environments that support the Media Source Extensions. GitHub repo.

Launching Interop 2025 — This year’s Interop project (an ongoing cross-browser effort to increase interoperability of key web platform features) features 19 focus areas including CSS anchor positioning, Core Web Vitals, the View Transition API, and WebAssembly. You can see the full list, with explanations, in the Interop repo and monitor progress on this dashboard. The WebKit team has shared a blog post going...

Three Approaches to the & Selector in CSS — The & selector in vanilla CSS, now supported via CSS Nesting, allows nesting styles within a parent selector without needing preprocessors like Sass. Here’s a look at some of the nuances behind its use.

How I Created a Popular WordPress Theme and Coined the Term “Hero Section” (Without Realizing It) — The story behind the recognizable ‘hero’ pattern, its name, how it caught on, and it’s wider impact — now considered a mainstream standard in web design.

The Popover API is Now Baseline Newly Available — Despite earlier proclamations, the Popover API (which adds a built-in declarative way to create various popovers in HTML) is now working across all devices on the latest versions of the three major browser engines.

Transitioning Top-Layer Entries and the display Property — How to animate display: none and other discrete properties using CSS animation techniques (such as @starting-style and transition-behavior: allow-discrete). Lots of demos, code, and practical examples for dialogs and popovers here.

share-button: A Web Component to Share Web Pages using Native OS Sharing Options — Uses the Web Share API to tap into the OS’s underlying share mechanism. For example, on an iPhone, the share button opens a bottom sheet native to the OS.

AstroPaper: Minimal, Responsive, SEO-Friendly Astro Blog Theme — A well put together blog theme for the Astro content-driven site Web framework.

Visprex: An Online Tool to Visualize CSV Files — It’s open source and works entirely in the browser, so you can install it locally. The demo site lets you load examples which can display as a histogram, scatter plot, line plot, or correlation matrix.

PostSpark: Customize and Beautify Website & Code Screenshots — These kinds of tools are a dime a dozen, but this one’s pretty nice. It lets you generate the screenshot content directly from a link (X, Bluesky, GitHub, etc.), and has lots of ways to customize.

FakeData: A Simple App for Generating Fake JSON Data — You can choose from 11 categories (users, orders, payments, etc.), after which you can edit/remove fields then copy or download the JSON data for use in your app.

Taking RWD to the Extreme — It’s been 15(!) years since Ethan Marcotte first wrote about Responsive Web Design, and in that time we’ve gotten various new powerful CSS layout tools (such as Flexbox and Grid). These layout systems have in-turn created a new era of declarative, intrinsic web design where the browser is empowered to handle layouts more so than ever before.

🇪🇺 The European Accessibility Act for Websites and Apps — This accessibility effort comes into effect in late June, and from then apps and sites of certain companies operating in the EU must meet new a11y standards. This post does a good job outlining who it actually applies too, the requirements, and how to plan ahead.