---
title: "With Figma Sites it's DIVs all the way down"
publication: "Frontend Focus"
issue: 692
published_at: "2025-05-14"
canonical_url: "https://frontendfoc.us/issues/692"
---
Plus how the browser can soon help pick contrasting colors. |
Together with [](https://frontendmasters.com/courses/next-js-v4/?utm_source=email&utm_medium=frontendfocus&utm_content=nextjsv4)
🚀 **Frontend** Focus
#692 — May 14, 2025 | [Read on the web](https://frontendfoc.us/issues/692)
[](https://www.joshwcomeau.com/css/height-enigma)
[The Height Enigma](https://www.joshwcomeau.com/css/height-enigma) — 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://frontendmasters.com/courses/next-js-v4/?utm_source=email&utm_medium=frontendfocus&utm_content=nextjsv4)
[New Course: Next.js Fundamentals, v4](https://frontendmasters.com/courses/next-js-v4/?utm_source=email&utm_medium=frontendfocus&utm_content=nextjsv4) — 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 sponsor 😵💫 Figma's AI-powered website-creation tool
Figma [recently announced _'Figma Sites'_](https://www.figma.com/blog/introducing-figma-sites/), 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://hachyderm.io/@joelanman/114468661897615798) it's producing.
- ▪ [Figma Releases New AI-Powered Tools for Creating Sites](https://techcrunch.com/2025/05/07/figma-releases-new-ai-powered-tools-for-creating-sites-app-prototypes-and-marketing-assets/) — Ivan Mehta
- ▪ [The True Path to Garbage Code: Figma Sites](https://www.joedolson.com/2025/05/the-true-path-to-garbage-code-figma-sites/) — Joe Dolson
- ▪ [Do Not Publish Your Designs on the Web with Figma Sites…](https://adrianroselli.com/2025/05/do-not-publish-your-designs-on-the-web-with-figma-sites.html) — Adrian Roselli
- ▶ [Figma Sites is Worse Than You Might Have Thought](https://www.youtube.com/watch?v=ZsFIvULxkHI) — Kevin Powell
- ▪ [Figma Dreamweaver](https://productpicnic.beehiiv.com/p/figma-dreamweaver) — Pavel Samsonov
⚡️ IN BRIEF
- 🧭 Here's [what's new in Safari 18.5](https://webkit.org/blog/16923/webkit-features-in-safari-18-5/), including support for Declarative Web Push on macOS.
- ⚓️ The CSS Working Group are [seeking feedback on CSS Anchor Positioning](https://www.w3.org/blog/CSS/2025/05/12/update-on-css-anchor-positioning/), which continues to move along towards stable.
- ✅ Manuel Matuzović has created a [bookmark-worthy collection of over 100 ARIA related CodePens](https://codepen.io/collection/rBNWPv?cursor=eyJwYWdlIjozfQ==), testing properties, states, roles, etc.
- 🦊 The [Firefox source code is now on GitHub](https://boingboing.net/2025/05/13/firefox-moves-to-github.html), should you want to have a poke around. [Repo here](https://github.com/mozilla-firefox/firefox).
- 😌 Opera is [testing a new browser](https://www.opera.com/air) designed with "mindfulness at its core". Stop doomscrolling, and breathe.
📙 Articles, Opinions & Tutorials
[](https://webkit.org/blog/16929/contrast-color/)
[How to Have the Browser Pick a Contrasting Color in CSS](https://webkit.org/blog/16929/contrast-color/) — 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)
[AI Agents and MCP Servers Without Access Control Are a Security Risk](https://workos.com/blog/workos-cloudflare-mcp-auth-for-agentic-ai?utm_source=cpff&utm_medium=newsletter&utm_campaign=q22025) — WorkOS AuthKit enables scoped OAuth access and RBAC — lock down what actions each agent or tool is permitted to perform today.
WorkOS sponsor [](https://www.webkit.org/blog/16900/p3-and-alpha-color-pickers/)
[Add Wide Gamut P3 and Alpha Transparency to Your Color Picker in HTML](https://www.webkit.org/blog/16900/p3-and-alpha-color-pickers/) — Did you know that the native HTML `` picker recently got an upgrade and it now supports the full range of colors found in the P3 color gamut?
Anne van Kesteren and Jen Simmons (WebKit)
[Integrating Localization Into Design Systems](https://www.smashingmagazine.com/2025/05/integrating-localization-into-design-systems/) — 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
[Container Query for “Is There Enough Space Outside This Element?”](https://frontendmasters.com/blog/container-query-for-is-there-enough-space-outside-this-element/) — A good, practical example of what container queries are useful for.
Chris Coyier
[It Wasn’t the Idea That Failed: It Was the Execution](https://blog.nordcraft.com/it-wasnt-the-idea-that-failed-it-was-the-execution) — 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://frontendmasters.com/blog/creating-flower-shapes-using-clip-path-shape/)
[Creating Flower Shapes using `clip-path: shape()`](https://frontendmasters.com/blog/creating-flower-shapes-using-clip-path-shape/) — 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
[Modern Scroll Shadows Using Scroll-Driven Animations](https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/)
Kevin Hamer
[Enhancements to the Proposed `` Element](https://developer.chrome.com/blog/enhancements-to-permission-element)
Thomas Steiner
[Why is Nobody Using the `hwb()` Color Function?](https://css-tricks.com/why-is-nobody-using-the-hwb-color-function/)
Sunkanmi Fafowora
🧰 Tools, Code & Resources
[](https://fonts.ninja/)
[Fonts Ninja: A Platform to Discover and Build Your Font Collection](https://fonts.ninja/) — The font gallery lets you filter by shape, style, weight, price, etc., and the service also includes [a Chrome extension](https://chromewebstore.google.com/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh) so you can easily bookmark your favorites.
Fonts Ninja
[Introducing Clerk Billing](https://go.clerk.com/5U0ZE0E) — Set up subscriptions in your B2B or B2C app without writing custom payment code or building your own UI.
Clerk sponsor
[Basecoat: `shadcn/ui`'s Magic, But Minus React](https://basecoatui.com/) — [shadcn/ui](https://ui.shadcn.com/) 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
[tailwind-animations: Easy Animations for Your Tailwind Project](https://github.com/midudev/tailwind-animations) — You can mess around with them on [this demo](https://tailwindcss-animations.vercel.app/), which allows you to adjust the duration, delay, and “steps”.
Miguel Ángel Durán
[HelloCSV: A Drop-In, CSV Importing Workflow for JS Apps](https://hellocsv.github.io/HelloCSV/) — If you or your users have CSV files to import, here’s a complete CSV importing workflow for the frontend that you can drop into your app. [Basic docs.](https://hellocsv.mintlify.app/common/get-started/introduction)
HelloCSV
[Flatlogic Templates: Free Web & Mobile Templates for Startups](https://flatlogic.com/templates) — These were recently open-sourced by the company, as explained in [this Reddit post](https://www.reddit.com/r/webdev/comments/1iigrug/after_12_years_of_selling_web_mobile_templates/). Includes 29 templates built with React, Vue, Angular, Bootstrap, and React Native. Some nice stuff here.
Flatlogic
[MoodHue: Generate a Color Palette Based on Mood with AI](https://moodhue.vercel.app/) — Enter a ‘mood’ in the prompt and this will generate a 5-color palette from your description. There’s also an option to use a slider that shows the same colors as a blurry/mesh gradient.
MoodHue
[A Bookmarklet for Clearing Cookies for the Current Page](https://henry.codes/writing/a-bookmarklet-for-clearing-cookies-for-the-current-page/)
Henry Desroches
🙂 ...and finally
[](https://ultrasciencelabs.com/lab-notes/why-we-are-still-using-88x31-buttons)
[Why We Are Still Using 88x31 Buttons](https://ultrasciencelabs.com/lab-notes/why-we-are-still-using-88x31-buttons) — 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)
📬
**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/692/*|UID|*?ipx=t)