~frontendfocus | Bookmarks (260)

Fixing rowspan=0 on Tables on WebKit — Curious as to how a browser bug gets fixed? This post is a detailed walkthrough of that process.

A Chrome on Android Edge-to-Edge Migration Guide — Bramus shares an update regarding edge-to-edge display support in Android, and how to migrate your site to support this feature – especially if you’re using position: fixed content at bottom: 0.

Building Websites with 'LLMs' — That’s (L)ots of (L)ittle ht(M)l page(S) by the way. 😜 Jim shares an approach for building pages with less reliance on JavaScript-injected content.

The Case for Minimal WordPress Setups: A Contrarian View on Theme Frameworks — Kevin thinks modern frameworks “cause far more problems than they solve” — as such, he asks why they’re so popular, and whether they really benefit developers in the long run?

Astro 5.4: A Picture-Perfect Release — The popular content site framework introduces several key improvements, including remote image optimization in Markdown, experimental responsive image support in Markdown, new configuration helpers and more.

Kibo UI: A Registry of Accessible Components Designed to Use with shadcn/ui — A modest set of about 20+ components that use the shadcn/ui CSS variables and they work well as building blocks for more complex components.

Stylelint: A 'Mighty' Modern Style Linter — An established linter with over 100 built-in rules to help “catch errors, apply limits and enforce stylistic conventions”. GitHub repo.

Pierre: A Striking New Web Site with a Git Platform Attached — Pierre bills itself as a ‘new Git platform’ but everyone on social media this week was more wowed by its far out Web design rather than what it’s selling. It evokes early 00s Web experiences with a blend of modern Web technology and retro glitchy aesthetic. One to be seen.

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.

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

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.

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.

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.

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.