--- title: "32 years of an open WWW" publication: "Frontend Focus" issue: 690 published_at: "2025-04-30" canonical_url: "https://frontendfoc.us/issues/690" --- Plus time to polish your type with line height units. | Together with [![Tonkotsu logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_313/e_make_transparent/co_white,e_outline:5/c4v6bk3uzcf36sutppl2.jpg)](https://www.tonkotsu.ai) πŸš€ **Frontend** Focus #​690 β€” April 30, 2025 | [Read on the web](https://frontendfoc.us/issues/690) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746012042/uaig0fadi4lqfl7sahen.png)](https://world.hey.com/dhh/don-t-make-google-sell-chrome-93cefbc6) ['Don't Make Google Sell Chrome'](https://world.hey.com/dhh/don-t-make-google-sell-chrome-93cefbc6) β€” 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 [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/4bc18eb3.jpg)](https://www.tonkotsu.ai) [🍜 Tonkotsu is a Natural Language IDE for JS & TS Developers](https://www.tonkotsu.ai) β€” 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](https://www.tonkotsu.ai). Tonkotsu sponsor [Polishing Your Typography with Line Height Units](https://webkit.org/blog/16831/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](https://craftofui.substack.com/p/time-travel-with-javascript) β€” A [split-flap display](https://en.wikipedia.org/wiki/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.](https://codepen.io/jh3y/pen/yyLmeJd) Jhey Tompkins ⚑️ IN BRIEF - πŸ“‘ The software behind World Wide Web was put into the public domain [on this day in 1993](https://cds.cern.ch/record/1164399/), though the concept of the Web was [invented in 1989.](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web) - 🦊 After thousands of requests, [Firefox now has Tab groups](https://blog.mozilla.org/en/firefox/tab-groups-community/). And [as of Firefox 139's nightly build,](https://www.mozilla.org/en-US/firefox/140.0a1/releasenotes/#note-790833) Firefox now supports the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)too. - πŸͺ A community-led effort is helping to [block cookie consent banners in the Brave browser](https://www.bleepingcomputer.com/news/security/braves-cookiecrumbler-tool-taps-community-to-help-block-cookie-notices/). πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/magetnbhvbdqpbc9u1rl.jpg)](https://frontendmasters.com/blog/seeking-an-answer-why-cant-html-alone-do-includes/) [Seeking an Answer: Why Can’t HTML Alone Do Includes?](https://frontendmasters.com/blog/seeking-an-answer-why-cant-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](https://piccalil.li/blog/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 `` Element](https://heydonworks.com/article/the-canvas-element/) β€” Highlights the accessibility pitfalls and performance trade-offs of using the `` element, along with noting when it’s actually suitable to turn to it. Heydon Pickering πŸ’‘ Heydon has also just [covered the `` element](https://heydonworks.com/article/the-cite-element/)too. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746011710/cqc88ozmft6g571kze7r.png)](https://www.youtube.com/watch?v=0O0ssm70g1g) β–Ά[πŸ¦‰ What is the 'Owl Selector' (* + *)?](https://www.youtube.com/watch?v=0O0ssm70g1g) β€” 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](https://go.clerk.com/B0iCf3i) β€” 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](https://css-tricks.com/anchor-positioning-just-dont-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](https://stephaniewalter.design/blog/hello-my-name-is-stephanie-talk-encoding-special-characters-issues-poor-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](https://terriblesoftware.org/2025/04/23/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746016850/wekamn9qa6iqohev7vct.png)](https://css-tip.com/blob-hover/) [Blob Shape with Hover Effect](https://css-tip.com/blob-hover/) β€” 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](https://css-generators.com/blob/) if you want to make your own. Temani Afif [The Future of Web Design: Will We Even Recognize It in 100 Years?](https://webdesignerdepot.com/the-future-of-web-design-will-we-even-recognize-it-in-100-years/) Noah Davis [Designing for Everyone: Accessible Color Contrast](https://spin.atomicobject.com/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](https://brilliant.org/careers/) 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/yn8jdfiascseqhrzpwe3.jpg)](https://dkwebsolutions.co.uk/our-tools/responsive-typographic-scale-generator) [Responsive Typographic Scale Generator](https://dkwebsolutions.co.uk/our-tools/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](https://getbutterfly.com/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](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email) β€” Extensible form builder component (React/Angular/Vue3) that outputs form schemas in JSON. Works with any backend. [Learn more](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email). SurveyJS sponsor [Storybook 9 Beta](https://storybook.js.org/blog/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1746009833/nhndg2qsuyyijwlsgxcc.png)](https://qwerasd205.github.io/AnnotationMono/) [Annotation Mono: A Lovingly Crafted Handwriting-Style Monospace Font](https://qwerasd205.github.io/AnnotationMono/) β€” 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](https://github.com/qwerasd205/AnnotationMono). Qwerasd [track-list: A Web Component to Enhance a List of Audio Tracks with Playlist Controls](https://github.com/mirisuzanne/track-list) β€” 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](https://mirisuzanne.github.io/track-list/demo.html). Miriam Suzanne [Design Tokens Name Generator](https://namedesigntokens.guide/) β€” 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](https://github.com/dbismut/draggable-slider/) β€” Try it out on [this Stackblitz demo](https://stackblitz.com/edit/vitejs-slider). David Bismut πŸ“¬ **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://bsky.app/profile/brandrick.bsky.social) & [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/690/*|UID|*?ipx=t)