~frontendfocus | Bookmarks (299)

▶  Flexible Wrapping CSS Grid — Create a flexible CSS Grid with a varying number of items that expands, shrinks, and wraps to accommodate the number of items that can fit in one grid row. A quick CSS tip well explained in this ~4 minute video.

Finding the Joy in Alt Text — On the fun often found in the added context of alt text.

"We Launched Our First Shopify Theme" — Sure, it’s an update about a new, paid theme, but it’s also an interesting blog post (with a rad design) about what goes into actually building such a thing.

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.

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.

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.

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

Easier Layout with margin-trim — Jen and the WebKit team have been on something of a roll of late with great blog posts on various modern CSS features, and so it goes with this one on the experimental margin-trim property — a way to tell a container to trim the margins off its children.

How to Build a React Login Page Template — Learn to build auth with React & Express, compare JWT vs session auth, and get a plug-and-play login page template.

The GSAP Web Animation Toolkit is Now Entirely Free — Last year the hugely popular GSAP (a.k.a. GreenSock) animation library was acquired by Webflow, and it’s turned out to be great news for us, as from version 3.13 the entire GSAP toolkit is now freely available (including formerly paid addons like MorphSVG and SplitText), even for commercial use. ℹ️ Note: It’s not exactly traditional open...

Polyfilling CSS with CSS Parser Extensions — Bramus has had an idea “to fix CSS polyfilling once and for all” by allowing developers to extend the browser’s CSS parser with JavaScript.