Frontend Focus Issue 692: May 14, 2025 ![rw-book-cover](https://readwise-assets.s3.amazonaws.com/static/images/article3.5c705a01b476.png) ## Metadata - Author: [[Unknown]] - Full Title: Frontend Focus Issue 692: May 14, 2025 - Category: #articles - Document Tags: [[figma]] - URL: https://frontendfoc.us/issues/692 [![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1747214043/uaax3fwypveh309nfzkn.png)](https://frontendfoc.us/link/169290/web) [The Height Enigma](https://frontendfoc.us/link/169290/web "www.joshwcomeau.com") — A beginner-friendly no nonsense unraveling of the ‘mysterious’ behavior of percentage-based heights in CSS: “*Like with so much in CSS, it feels random until you learn about the underlying mechanisms that explain the behaviour, and then it all makes perfect sense*”. A great, visualized explainer. Josh W. Comeau [![](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/330c5f4a.png)](https://frontendfoc.us/link/169288/web) [New Course: Next.js Fundamentals, v4](https://frontendfoc.us/link/169288/web "frontendmasters.com") — Master Next.js with Scott Moss. Learn React Server Components, Server Actions, dynamic routing, authentication, caching, and edge functions. Create a modern React app, deploy it to Vercel, and level up your skills. Frontend Masters 😵‍💫 Figma's AI-powered website-creation tool Figma [recently announced *'Figma Sites'*](https://frontendfoc.us/link/169291/web), a way to let you quickly publish your Figma designs directly to the web — but the response from frontend developers has been, *rather mixed*, with many comparisons to the bloated outputs of the likes of Dreamweaver and Microsoft Frontpage. Although still in beta, there's been some criticism lodged at the [div-heavy code](https://frontendfoc.us/link/169292/web) it's producing. ⚡️ IN BRIEF * 🧭 Here's [what's new in Safari 18.5](https://frontendfoc.us/link/169298/web), including support for Declarative Web Push on macOS. * ⚓️ The CSS Working Group are [seeking feedback on CSS Anchor Positioning](https://frontendfoc.us/link/169299/web), which continues to move along towards stable. * ✅ Manuel Matuzović has created a [bookmark-worthy collection of over 100 ARIA related CodePens](https://frontendfoc.us/link/169300/web), testing properties, states, roles, etc. * 🦊 The [Firefox source code is now on GitHub](https://frontendfoc.us/link/169301/web), should you want to have a poke around. [Repo here](https://frontendfoc.us/link/169302/web). * 😌 Opera is [testing a new browser](https://frontendfoc.us/link/169303/web) designed with "mindfulness at its core". Stop doomscrolling, and breathe. 📙 Articles, Opinions & Tutorials [![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1747227977/oelkufaejtczgk4jq4o3.png)](https://frontendfoc.us/link/169304/web) [How to Have the Browser Pick a Contrasting Color in CSS](https://frontendfoc.us/link/169304/web "webkit.org") — Jen shares how the upcoming `contrast-color()` function should help with accessibility. It’s all in flux right now, but the takeaway being we should be able to declare a color in CSS and then have the browser figure out what should be paired with it — *neat*. Jen Simmons (WebKit) [Integrating Localization Into Design Systems](https://frontendfoc.us/link/169307/web "www.smashingmagazine.com") — A case study that looks at how two designers tackled the challenges of building a localization-ready design system for a global audience, taking into consideration things such as text overflow, RTL layouts, font inconsistencies, and more. Rebecca Hemstad & Mark Malek [It Wasn’t the Idea That Failed: It Was the Execution](https://frontendfoc.us/link/169309/web "blog.nordcraft.com") — A look back at the WYSIWYG history of visual web development tools, from Visual Basic and FrontPage in the 90s to modern tools like the aforementioned Figma Sites. It argues that these tools often fail because they produce poor HTML markup, hindering accessibility and developer control. *It then positions Nordcraft as an alternative, and yes it’s on the Nordcraft blog*. Salma Alam-Naylor [![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1747228392/kundxs8l97gzlfypblir.png)](https://frontendfoc.us/link/169310/web) [Creating Flower Shapes using `clip-path: shape()`](https://frontendfoc.us/link/169310/web "frontendmasters.com") — Here's a detailed look at the what can be achieved when using the arc command. Plenty of code examples to help explain what's going on. Geometry, radius, and math problems a plenty here. Temani Afif 🧰 Tools, Code & Resources [![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1747230193/ss0dztqqss4nj16gsx0p.png)](https://frontendfoc.us/link/169314/web) [Introducing Clerk Billing](https://frontendfoc.us/link/169316/web "go.clerk.com") — Set up subscriptions in your B2B or B2C app without writing custom payment code or building your own UI. Clerk [Basecoat: `shadcn/ui`'s Magic, But Minus React](https://frontendfoc.us/link/169327/web "basecoatui.com") — [shadcn/ui](https://frontendfoc.us/link/169328/web) is a popular suite of well designed React components, but if you’ve wanted to use them in *other* contexts too, Basecoat is for you. Basecoat ports the components to a more vanilla form you can use elsewhere. Ronan Berder 🙂 ...and finally [![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1747229250/jluichde6nmn6pbqroz7.png)](https://frontendfoc.us/link/169325/web) [Why We Are Still Using 88x31 Buttons](https://frontendfoc.us/link/169325/web "ultrasciencelabs.com") — You don't really see them anywhere near as much as you used to, but as a little image format they sure are cool and bring about a certain unique restrained creativity. This post, from last year, runs through how the specific size came to be, and how it endured. Brian (Ultrasciencelabs) ![](https://frontendfoc.us/open/692/web), Frontend Focus Issue 692: May 14, 2025, Unknown, 01jvamfvqx8m84m5mrgtsv247c.