Going Deep into CSS Grid Areas — We’re seven years into widespread support for CSS Grid, but its use still isn’t as widespread as it should be, says Ahmad. He digs into the power of CSS Grid’s ability to define and name specific grid areas here, complete with diagrams and code.

Ahmad Shadeed

Google's 'New Path' for Privacy Sandbox on the Web — If you’ve seen stories about Google backtracking on blocking third-party cookies in Chrome, this is where the news first dropped. Instead of deprecating such cookies, Google wants to enhance how users make privacy related choices as part of their Privacy Sandbox initiative. Unsurprisingly, many are unhappy at the U-turn, including privacy regulators.

Google

WorkOS: Start Selling to Enterprises with Just a Few Lines of Code — WorkOS is a modern identity platform for B2B SaaS. It provides flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes. WorkOS is used by hundreds of high-growth startups including Perplexity, Vercel, Drata, & Webflow.

WorkOS sponsor

How to Make Complex Chrome Extensions — Spinning up a quick, simple browser extension isn’t a huge task nowadays, especially with tools like Extension to kick off a project. Building larger extensions is a different story, so it’s great to learn from the experiences of a team that’s built one.

Nina Torgunakova

CSS Stuff I'm Excited About After the Last CSSWG Meeting — We’ve seen plenty of advances in CSS over the past few years – many of which we’ve covered in Frontend Focus – but things don’t stop. Inline conditionals, cross-document view transitions, anchor positioning, and more await us.

Juan Diego Rodríguez

So You Think You Know Box Shadows? — Or, perhaps, “How not to use box shadows.” David sets out to share “some of the worst possible things” you can do with box shadows on DIV elements, but in reality they’re also quite impressive and striking.

David Gerrells

Alternative/alt Text in Action — Some sound, considered advice from the accessibility team behind the United Kingdom’s official government Web site.

Katherine Moonan and Samantha Merrett

Tracing: Frontend Issues with Backend Solutions — What if the problem isn’t on the front end? How do you trace issues through your stack? Watch the on-demand workshop.

Sentry sponsor

Readability: The Optimal Line Length — The length of text lines substantially impacts their readability. Here’s some best practice pointers.

Edward Scott

The Pitfalls of In-App Browsers — Some apps opt to use an in-app browser to browse links navigated inside the app, rather than reaching out to a standalone browser. Paul outlines some of the drawbacks to keep in mind.

Paul Esch-Laurent

Design GUI: Browser Extension for Managing Colors in CSS Variables — Lots of features in this one including AI-generated color palettes, accessibility testing, support for shadcn/ui — overall a nice tool for those working with design systems.

James Chetwood

Maska 3.0: Zero-Dependency Input Mask Library — There are several demos on the homepage. Lightweight and framework independent but offers Vue 2/3, Alpine.js and Svelte integrations. GitHub repo.

Form․io

Simplify Your Data Collection with a Fully Integrated Form Management Platform — SurveyJS is an open-source JavaScript form library suite for secure form creation and data collection in your application. Build better forms, faster and without manual coding.

SurveyJS sponsor

matcha.css: A Drop-In Semantic Styling Library in Pure CSS — Designed for simple sites and prototypes, this provides a starter stylesheet that adds sensible defaults to a wide set of HTML elements.

Simon Lecoq

PatternPad: An Online Tool to Create Beautiful Patterns — Patterns are downloadable as SVG, PNG, or JPEG, and you can customize them endlessly and choose from predefined color palettes.

PatternPad

WCAG Plugin: A Figma Plugin to Enhance Accessibility — Helpful for accessibility teams that need to ensure designs follow WCAG standards and guidelines. For example, the plugin lets you add accessibility annotations to design elements.

Marcelo Paiva