~frontendfocus | Issue 681 - Can (and should) an LLM write your 'alt' text? (19)

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.

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.

💬 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?"

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.

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.

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.

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.

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.

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

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.

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

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.