~frontendfocus | Bookmarks (260)

Khroma: An AI Color Tool to Design with Colors You Love — An interesting method for generating color palettes. You choose 50 colors you like (saved in localStorage), which personalizes the algorithm to give you palettes based on your favorite colors.

Use shape() for Responsive Clipping — Support for the CSS shape() function is now slowly rolling out — you can expect it to work in Chrome 135 and Safari 18.4. As such, here’s a quick look at how it can be used with clip-path for responsive clipping — there's a demo here. Ana Tudor has also chucked together a 'breathing box' demo.

Implementing Multi-Tenancy into a Supabase App with Clerk — Learn to build B2B SaaS with secure multi-tenancy: user roles, team permissions, and cross-tenant data isolation.

Background Image Opacity in CSS — A quick look at the options available for controlling opacity, including ‘blending’ via RGBA, pseudo elements, and an experimental cross-fade function.

▶  Modern CSS Theming, Light Mode, Dark Mode and More — A roughly half hour look at what modern CSS features we can use to create dark and light themes and how to save user preference to localStorage.

Making :visited More Private — Here’s how Chrome now prevents any potential privacy leaks that use visited links as an attack vector.

Cover Flow with Modern CSS: Scroll-Driven Animations in Action — The Cover Flow feature on the iPod was super cool, so this scratches a certain nostalgic itch.

Tailwind CSS v4.1: Text Shadows, Masks, and Tons More — A new version of Tailwind CSS dropped just a few days ago, adding text-shadow utilities, the ability to mask elements, fine-grained text wrapping, improved browser compatibility, and much more.

UA+: User Agent Plus — If you’re after a better baseline for your stylesheet Manuel has a work-in-progress CSS reset that is worth a look. “Instead of mostly resetting and normalizing properties, we focus on improving existing user agent styles and adding new styles only where browsers fall short”.

Lighthouse Scoring Calculator: A Small Playground for Understanding Lighthouse Scores — This tool lets you fiddle around with some hypothetical values calculated by Lightouse so you can get a rough idea of which values have a bigger effect on the overall score.

Record: Open-Source Web App to Record Screen and Camera Directly in the Browser — Another media-related project from Addy, this one is actually a fork of an older project with some modern enhancements. You can give it a spin here.

Penpot Launches Native Design Tokens — Penpot is the first design tool to integrate native design tokens—a single source of truth for top design and dev collaboration. Enjoy Penpot’s standardized design tokens format to reuse and sync across different platforms, workflows, and disciplines.

Master Chrome's DevTools — Join Jon Kuperman for this video course diving into Chrome's DevTools. You'll go beyond console.log(), learning how to inspect, debug, and audit your web apps — tracking performance, identifying bottlenecks, making performance gains, and more. Level up your DevTools skills.

Carousels with CSS — As of Chrome 135 you could now, theoretically, ditch the various carousel libraries and make use of new features introduced via CSS Overflow 5. Adam runs through the multitude of options this opens up — meaning we now have tools at our disposal for creating accessible, performant carousels with just CSS. Kevin Powell has also taken a look in this (honestly)...

▶  The Death of the Browser — In ten years, could web browsers become a nostalgic memory? This lightning talk (related slides here) shares our journey from the invention of the browser, to the data arms race, to the dawn of AI agents. Proposing how those agents are possibly enabling a return to the era of free information with the ‘web as the API’.

How AI Agents Are 'Quietly Transforming' Frontend Development — “We’re not far from agents that can run A/B tests, evaluate performance impact, and recommend UX optimizations based on live user data”.

Learn How to Integrate Clerk with Your Lovable — Lovable integrates Clerk for custom domains, streamlined auth flows, and waitlist-powered onboarding.

Designers, Your Excuse Is Gone. Stunning, Animated and Accessible. Yes, You Can! — “Accessibility and stunning animated design can go hand in hand”.

CSS Holographic Masks — Christian has been experimenting with some neat holographic effects created with CSS gradients and masks, and shares the results here via various little demos. Scroll to see the shiny stuff in action.

SaaS UI: Free SVG Illustrations for Your Documentation or Design System — Not exactly icons but SVG illustrations of common UI components for your team’s docs website, for UI libraries or design systems. Includes 200+ illustrations that are also available for Figma.

Dice UI: Composable, Unstyled UI Primitives for Building Accessible Web Apps — Currently a modest collection of about 20 React-based components and utilities, including form elements, a Kanban-style board, a sortable component, and more.

Item Flow: A New Unified Concept for Layout — You may recall all the debate around 'masonry' layouts in CSS and how best to implement them — now there's a third option in the mix. It’s one that “unifies the flex-flow and grid-auto-flow properties into a whole new mechanism” known as Item Flow. Here’s a look at what it is, plus what it means...