~frontendfocus | Bookmarks (253)

trimMiddle: A JS Utility to Shorten Strings Like macOS' Finder — Trims a string in the middle rather than the beginning or end, adding an ellipsis by default, which you can change to a different string if desired.

The Web on Mobile — The mobile web has been more than capable of standing alongside desktop and native app experiences for some time, but more often than not mobile offerings will often fall short. Jeremy reflects on why this seems to be the case.

Reimagining Fluid Typography — For a while now we’ve turned to relative units (like em and rem) for sizing our text, with the reliable clamp() function being a more recent addition to our tool belt — but Miriam has some suggestions on how we can improve things further.

Intent to Experiment for Longer — As shared above, Chrome is now moving ahead with CSS if() function support, but Roma thinks Google should pump the brakes and not make any premature moves: “Given how foundational and crucial these features are — I would strongly recommend Google to re-think how they’re planning to ship these features”

Rethinking Find-in-Page Accessibility: Making Hidden Text Work for Everyone — Did you know about the hidden="until-found" attribute? It’s not globally supported just yet, but it’s an accessible way to make hidden text searchable via a browsers find-in-page functionality.

Better Anchor Positioning with position-area — The author praises the position-area property, noting how it’s more than a shorthand for anchor() and introduces some welcome behaviors that may be surprising.

Why I Like Designing in the Browser — “I find HTML and CSS easier to grok than most Photoshop menus.”

SuperMarquee: A Modern Marquee Component — Note that it’s not free for commercial projects, but there are demos you can preview that demonstrate the variety of marquees you can generate. There’s even a visual design tool.

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

BenchJS: A Browser-Based JavaScript Benchmarking Tool — No setup needed, just write and run the benchmarks and view the detailed metrics as they run. Includes ESM package support and you can share the results via URL or image.

Accessible Color Palette Generator — A useful tool for generating a range of shades (accents, neutral, etc) for a specified color, balancing accessibility, brand identity, and scale. GitHub Repo. Related write-up.

Tailwind CSS Grid Generator: Generate CSS Grids Based on Tailwind Classes — A simple drag-and-drop grid that you can edit interactively to generate the Tailwind-based code in HTML or JSX format.

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.

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.

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.