Together with  Heroku
🚀 Frontend Focus

#​681 — February 26, 2025 | Read on the web

💬 Comparing Local Large Language Models for Alt-Text Generation — With over 9,000 images in need of alt-text, the author turned to AI as a potential way to help add them. This post looks over how 12 LLMs approached the task, and how the accuracy of the output stacks up. The results lead to a question: "Is a 'B'-level alt-text better than none at all?"

Dries Buytaert

Let Heroku Deal with the Server Nonsense — Heroku makes it easy for frontend devs. With a user-friendly platform, Heroku lets you deploy web applications without wasting effort on complex server issues. Spend your time writing great frontend code, and go live quickly with Heroku’s help.

Heroku sponsor

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.

Jeremy Keith

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.

Miriam Suzanne

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

A Million Little Secrets — Josh has an upcoming course all about creating animations and interactive page elements — here he digs into how he created the whimsical landing page for it. He shares the techniques he’s used that we too can start using in our own work to add some flourish and flair.

Josh W. Comeau

How to Use attr() in CSS for Columns, Colors, and Font-Size — Chris takes a look at the upgraded attr() function, which now supports specifying data types for attribute values, thus enabling more versatile use cases beyond just the content property.

Chris Coyier

🔒 Protect Against Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

WorkOS sponsor

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

Roma Komarov

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.

Christian Schaefer

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.

James Stuckey Weber

This Page is Under Construction — A love letter to fun, personal sites, asking us to “please build your own website”.

Sophie Koonin

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

Tyler Sticka

Working with Multiple CSS Anchors & Popovers in the WordPress Loop
Geoff Graham

Implementing a Dissolve Effect with Shaders and Particles in Three.js
Jatin Chopra

Resource Prefetching May Slow Down Your Website
Matt Zeunert

OKLCH, Explained for Designers
Samuel Wong

Toe Dipping Into View Transitions
Geoff Graham

🧰 Tools, Code & Resources

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.

superplug.in

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

Augment Code sponsor

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

Holger Dal Mogensen

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.

Andrei Neculaesei

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.

Francis Wu

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.

Oxbow UI

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.

Christian Heilmann

📰 Classifieds

Learn how to build session-based authentication into a Next.js application, including the sign-in/sign-up pages, and how to protect routes.


Bit - Build system framework for development of composable software. Natively to Harmony, and support React apps (with Vite), NextJS, Angular, Vue, Node.js and more.


👀 Give your eyes a break! MonoLisa makes coding more comfortable. Try MonoLisa now.


📊 Jspreadsheet – Lightweight JS data grid with Excel-like controls. Create rich web spreadsheets fast. Try it now.

Ipx.