--- title: "Can (and should) an LLM write your 'alt' text?" publication: "Frontend Focus" issue: 681 published_at: "2025-02-26" canonical_url: "https://frontendfoc.us/issues/681" --- Plus the current state of the capable mobile web. | Together with [![Heroku\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_135,q_auto/e_make_transparent/co_white,e_outline:18/copm/276290de.png)](https://fnf.dev/3CVAOax) πŸš€ **Frontend** Focus #​681 β€” February 26, 2025 | [Read on the web](https://frontendfoc.us/issues/681) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1740564603/nswa3r4bt48kkywe4ncs.jpg)](https://dri.es/comparing-local-llms-for-alt-text-generation) πŸ’¬ [Comparing Local Large Language Models for Alt-Text Generation](https://dri.es/comparing-local-llms-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 [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/cde9d846.png)](https://fnf.dev/3CVAOax) [Let Heroku Deal with the Server Nonsense](https://fnf.dev/3CVAOax) β€” 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](https://adactio.com/journal/21728) β€” 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](https://www.oddbird.net/2025/02/12/fluid-type/) β€” 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 - 🦊 Mozilla [outlines its approach to Manifest v3](https://blog.mozilla.org/en/products/firefox/firefox-manifest-v3-adblockers/), and how it differs. - 🏎️ Microsoft's [Edge browser has gotten a speed boost](https://blogs.windows.com/msedgedev/2025/02/18/more-edge-features-get-a-performance-boost/) in a few places. - β˜„οΈ Perplexity are teasing a [new web browser called Comet](https://techcrunch.com/2025/02/24/perplexity-teases-a-web-browser-called-comet/), [kicking off the AI browser wars](https://spyglass.org/perplexity-comet-ai-web-browser/) maybe? - πŸ–ΌοΈ Can you imagine the web with no images? Well, the [proposal for the `IMG` tag](https://bsky.app/profile/henrihelvetica.bsky.social/post/3lizlkfrqk22s) was sent 32 years ago. - πŸ“‘ Looks like the [CSS `if()` function](https://docs.google.com/document/d/1mbHBUR40jUBay7QZxgbjX7qixs5UZXkdL9tVwGvbmt0/edit?tab=t.0#heading=h.xzptrog8pyxf) is [not far off](https://groups.google.com/a/chromium.org/g/blink-dev/c/EOz7NK6Y0cE/m/VsZveC-fAwAJ). πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/fl_lossy,q_30/v1740568954/jhgrvhax7ivudh8r02vw.gif)](https://www.joshwcomeau.com/blog/whimsical-animations/) [A Million Little Secrets](https://www.joshwcomeau.com/blog/whimsical-animations/) β€” Josh has an [upcoming course](https://whimsy.joshwcomeau.com) 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](https://frontendmasters.com/blog/how-to-use-attr-in-css-for-columns-colors-and-font-size/) β€” Chris takes a look at the [upgraded `attr()` function](https://developer.chrome.com/blog/advanced-attr), 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](https://workos.com/radar?utm_source=cpfef&utm_medium=newsletter&utm_campaign=q12025) β€” 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](https://blog.kizu.dev/intent-to-experiment-for-longer/) β€” As shared above, Chrome is now [moving ahead](https://groups.google.com/a/chromium.org/g/blink-dev/c/EOz7NK6Y0cE/m/VsZveC-fAwAJ) 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](https://schepp.dev/posts/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](https://caniuse.com/mdn-html_global_attributes_hidden_until-found), 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`](https://www.oddbird.net/2025/02/25/anchor-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](https://localghost.dev/blog/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](https://cloudfour.com/thinks/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](https://css-tricks.com/working-with-multiple-css-anchors-and-popovers-inside-the-wordpress-loop/) Geoff Graham [Implementing a Dissolve Effect with Shaders and Particles in Three.js](https://tympanus.net/codrops/2025/02/17/implementing-a-dissolve-effect-with-shaders-and-particles-in-three-js/) Jatin Chopra [Resource Prefetching May Slow Down Your Website](https://www.debugbear.com/blog/prefetch-slower-website) Matt Zeunert [OKLCH, Explained for Designers](https://desktopofsamuel.com/oklch-explained-for-designers) Samuel Wong [Toe Dipping Into View Transitions](https://css-tricks.com/toe-dipping-into-view-transitions/) Geoff Graham 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1740571501/lzcixhflujnfp8o95tro.png)](https://www.superplug.in/supermarquee) [SuperMarquee: A Modern Marquee Component](https://www.superplug.in/supermarquee) β€” 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](https://www.superplug.in/supermarquee/visual-designer). superplug.in [Wish Your AI Co-Pilot Actually Knew Your Codebase?](https://augmentcode.com/?utm_source=cooper&utm_medium=newsletter) β€” Try the most context-aware Developer AI. Augment deeply understands your codebase, documentation, and dependencies. Augment Code sponsor [Svader: Create GPU-Rendered Svelte Components](https://github.com/sockmaster27/svader) β€” [The examples](https://svader.vercel.app/) are a good way to get a feel for what this offers. Holger Dal Mogensen [BenchJS: A Browser-Based JavaScript Benchmarking Tool](https://benchjs.com/) β€” 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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1740563740/ommoz34yuveuf8gaerds.png)](https://thisisfranciswu.com/enterprise-ui-palette-generator/#) [Accessible Color Palette Generator](https://thisisfranciswu.com/enterprise-ui-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](https://github.com/thisisfranciswu/enterprise-ui-palette-generator). [Related write-up](https://uxdesign.cc/a-systematic-approach-to-generating-enterprise-ui-color-palettes-ecaf0c164c17). Francis Wu [Tailwind CSS Grid Generator: Generate CSS Grids Based on Tailwind Classes](https://oxbowui.com/free-tools/tailwind-css-grid-generator) β€” 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_](https://github.com/codepo8/trimMiddle) β€” 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](https://go.clerk.com/Kyrq83k), including the sign-in/sign-up pages, and how to protect routes. --- [Bit - Build system framework for development of composable software](https://bit.dev/?utm_source=FrontEndFocus&utm_id=24&utm_medium=newsletter). Natively to Harmony, and support React apps (with Vite), NextJS, Angular, Vue, Node.js and more. --- πŸ‘€ Give your eyes a break! [MonoLisa](https://monolisa.dev/?utm_source=fef02) makes coding more comfortable. [Try MonoLisa now](https://monolisa.dev/?utm_source=fef02). --- πŸ“Š [Jspreadsheet](https://jspreadsheet.com?utm_source=newsletter&utm_medium=classified&utm_campaign=FrontEndFocus) – Lightweight JS data grid with Excel-like controls. Create rich web spreadsheets fast. [Try it now](https://jspreadsheet.com?utm_source=newsletter&utm_medium=classified&utm_campaign=FrontEndFocus). πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/681/*|UID|*?ipx=t)