~frontendfocus | Issue 653 - How to build complex Chrome extensions (14)

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.