~frontendfocus | Issue 692 - With Figma Sites it's DIVs all the way down (17)

The 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.

New Course: Next.js Fundamentals, v4 — 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.

How to Have the Browser Pick a Contrasting Color in CSS — 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.

AI Agents and MCP Servers Without Access Control Are a Security Risk — WorkOS AuthKit enables scoped OAuth access and RBAC — lock down what actions each agent or tool is permitted to perform today.

Add Wide Gamut P3 and Alpha Transparency to Your Color Picker in HTML — Did you know that the native HTML <input type=color> picker recently got an upgrade and it now supports the full range of colors found in the P3 color gamut?

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.

Container Query for “Is There Enough Space Outside This Element?” — A good, practical example of what container queries are useful for.

It Wasn’t 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,...

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.

Fonts Ninja: A Platform to Discover and Build Your Font Collection — The font gallery lets you filter by shape, style, weight, price, etc., and the service also includes a Chrome extension so you can easily bookmark your favorites.

Introducing Clerk Billing — Set up subscriptions in your B2B or B2C app without writing custom payment code or building your own UI.

Basecoat: shadcn/ui's Magic, But Minus React — shadcn/ui 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.

tailwind-animations: Easy Animations for Your Tailwind Project — You can mess around with them on this demo, which allows you to adjust the duration, delay, and “steps”.

HelloCSV: A Drop-In, CSV Importing Workflow for JS Apps — 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.

Flatlogic Templates: Free Web & Mobile Templates for Startups — These were recently open-sourced by the company, as explained in this Reddit post. Includes 29 templates built with React, Vue, Angular, Bootstrap, and React Native. Some nice stuff here.

MoodHue: Generate a Color Palette Based on Mood with AI — 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.

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.