Together with  Tonkotsu logo
🚀 Frontend Focus

#​690 — April 30, 2025 | Read on the web

'Don't Make Google Sell Chrome' — There have been rumblings about Google possibly having to sell off Chrome for a little while now — here, DHH (creator of Rails, Basecamp, etc) weighs in, noting that the web could be worse off if it comes to pass: “Google should not get away with rigging the online ad market, but forcing it to sell Chrome will do great damage to the web”.

David Heinemeier Hansson

🍜 Tonkotsu is a Natural Language IDE for JS & TS Developers — Write out your work in bullet points and delegate to Tonkotsu. You're the tech lead and approver. We just started our FREE early access program and want to hear directly from early adopters. Sign up today.

Tonkotsu sponsor

Polishing Your Typography with Line Height Units — Jen explains how the lh and rlh units give us a direct way “to tie any size in our layout to the vertical rhythm of the text” — be that margins, padding, gaps, width, height, etc.

Jen Simmons (WebKit)

Creating a 3D Split-Flap Display Effect — A split-flap display is a electromechanical display commonly associated with live timetable displays and it makes for a neat effect on the Web too. Jhey breaks down how to replicate it or you can hit up this live demo.

Jhey Tompkins

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Seeking an Answer: Why Can’t HTML Alone Do Includes? — Plenty of solutions, but no straightforward, performant HTML one. This has been a tricky issue for decades now and gets worked around in numerous ways whether with JavaScript, a build step, IFRAMEs, or more. There is no answer here, but it's a good question.

Chris Coyier

How to Write Error Messages That Actually Help Users Rather Than Frustrate Them — Solid, straightforward advice on creating error messages that help users recover quickly and continue their path through your products/services.

Amy Hupe

The <canvas> Element — Highlights the accessibility pitfalls and performance trade-offs of using the <canvas> element, along with noting when it’s actually suitable to turn to it.

Heydon Pickering

💡 Heydon has also just covered the <cite> element too.

▶  🦉 What is the 'Owl Selector' (* + *)? — A quick look at the so-called CSS ‘owl’ selector, including how it works, why you should use it, and the viable alternatives.

Zoran Jambor

How to Take Clerk to Production — How to take a Clerk app to production with custom domains, OAuth credentials, and DNS setup.

Clerk sponsor

Anchor Positioning Just Don't Care About Source Order — Overlapping elements in CSS can often be tricky, but CSS anchor positioning should simplify things. Geoff shares how, noting that it adds another welcome “separation of concerns between content and presentation”.

Geoff Graham

▶  Hello My Name Is St�phanie: A Talk On "Special Characters", Inclusive Design and User Experience — A roughly 15-minute talk on how encoding and database decisions about formats and characters can result in an awful user experience.

Stéphanie Walter

The Hidden Cost of AI Coding — No matter if you’re all in on vibe coding, or find AI development somewhat questionable, this article ponders the joy of the craft. Some food for thought.

Matheus Lima

Blob Shape with Hover Effect — It’s Chrome only for now, but Temani quickly shares a technique for creating CSS-only single-liner blob shapes using clip-path and shape(). There’s a generator too if you want to make your own.

Temani Afif

The Future of Web Design: Will We Even Recognize It in 100 Years?
Noah Davis

Designing for Everyone: Accessible Color Contrast
Ian Culver

📰 Classifieds

🕹️ Craft delightful games that change how the world learns as an engineer at Brilliant. Remote/NYC/SF: brilliant.org/careers

🧰 Tools, Code & Resources

Responsive Typographic Scale Generator — Output is in standard CSS or Sass/SCSS and you can use rem or px for the font sizes using the clamp() function.

DK Web Solutions

CSS Editor: An Interactive Visual CSS Editor — Nothing extraordinary here, but a nice way to use sliders and dropdowns to edit CSS on an element live on the page, with both 2D and 3D properties available.

Ciprian Popescu

JavaScript Form Builder with Drag-and-Drop UI & Built-In JSON Schema Editor — Extensible form builder component (React/Angular/Vue3) that outputs form schemas in JSON. Works with any backend. Learn more.

SurveyJS sponsor

Storybook 9 Beta — The popular UI 'workshop' hits v9, with this beta that introduces visual testing, accessibility testing out of the box, component test widgets and more.

Michael Shilman

Annotation Mono: A Lovingly Crafted Handwriting-Style Monospace Font — A legible, variable handwritten typeface inspired by monospace bitmap fonts — could be useful not just in your IDE, but may also work in any informal context, such as labels, headings, etc. Repo here.

Qwerasd

track-list: A Web Component to Enhance a List of Audio Tracks with Playlist Controls — A neat idea to encapsulate a common UI pattern where a single track plays followed by each subsequent track in the list, with play/pause and next/previous functionality. Some demos here.

Miriam Suzanne

Design Tokens Name Generator — For when you need to get started quickly, this tool will create ready-made naming conventions for your design system.

Romina Kavcic

Draggable Carousel: A Draggable Carousel/Slider Component for React, Vue, or Vanila JS — Try it out on this Stackblitz demo.

David Bismut

Ipx.