Together with  SurveyJS logo
🚀 Frontend Focus

#​697 — June 18, 2025 | Read on the web

A New Way to Style Gaps in CSS — The Microsoft Edge team shares an update on the work underway to implement gap decorations, a welcome addition that should do away with the need for various pseudo-element hacks. If you want to play around with things, there’s an interactive demo page showcasing what’s possible (Note: it’s behind a flag in Chromium-based browsers).

Omekara and Brosset

 You're Not a Front-End Developer Until You've... — A fun, tongue-in-cheek checklist of the various oddities we all do as frontend devs. We’ve shared Nic’s site before — it’s one you’ll no doubt poke around and have fun with.

Nic Chan

With SurveyJS, You Have Full Control of Your Data & Form Builder UI — Keep full control over the data you collect from users and tailor the entire form builder—UI and functionality—to fit your app and your users’ needs. SurveyJS UI libraries work with React, Angular, Vue 3; compatible with any backend and auth system. Learn more.

SurveyJS sponsor

Payload is Joining Figma — The headless Next.js-native CMS Payload has been acquired by design giant Figma. It will remain open-source but can now “integrate with design systems in ways no other CMS can”. James Mikrut went on Syntax to chat with Wes Bos about the news.

James Mikrut

HTML Spec Change: Escaping < and > in Attributes — The Chrome team tells us about an interesting recent change to the HTML specification around how angled brackets are escaped in attributes. It’s designed to help prevent mutation XSS vulnerabilities.

Michał Bentkowski

📙 Articles, Opinions & Tutorials

Animating Zooming using CSS: Transform Order is Important… Sometimes — Jakes notes how CSS uses a rather complex algorithm to decide how to approach animating transforms. He warns that if we get it wrong, you end up with an 'unnatural' animation. As such, here’s how it works (complete with feline demos), and how to avoid the potential pitfalls.

Jake Archibald

Clerk OAuth Gets a Big Upgrade — Now Fully MCP-Ready — Clerk OAuth now supports token revocation, consent screens, dynamic clients, & more—now fully MCP-ready. Learn more here.

Clerk sponsor

What I Wish Someone Told Me When I Was Getting Into ARIA — Eric shares what you need to know about ‘Accessible Rich Internet Applications’ in this approachable post, providing some guiding thoughts and debunking some common misconceptions too. A good place to pad out your understanding of all things ARIA.

Eric Bailey

Safari at WWDC '25: The Ghost of Christmas Past — Now that the dust has settled on Apple’s various announcements made last week at their annual conference, Alex shares a rather critical analysis of where things stand on the browser/web front, accusing Apple of “gaslighting” and “suppressing the web”.

Alex Russell

🔎 Nat Tarnoff also shared some post-WWDC thoughts, but specifically on Apple's new 'Liquid Glass' design system and how it poses some potential accessibility issues.

How to Keep Up With New CSS Features — Resources worth knowing about for keeping on top of CSS features, beyond just aimless Googling.

Sacha Greif

Breaking Boundaries: Building a Tangram Puzzle With (S)CSS — An interesting experiment in seeing just how far CSS can be pushed when creating interactive user interfaces.

Sladjana Stojanovic

1fr 1fr vs auto auto vs 50% 50% — You’d be forgiven that thinking these properties may do the same thing when used to create some columns, but Chris highlights the subtle differences in output.

Chris Coyier

The Hamburger-Menu Icon Today: Is it Recognizable? — After being with us for more than a decade, the hamburger menu is now an established, recognizable pattern, but “familiarity alone doesn’t erase its fundamental tradeoffs”.

Kate Kaplan

▶  Why Visual Website Builders Didn't Take Off
Salma Alam-Naylor

Want to Be a Better Frontend Engineer? Try a Week On-Call
Den Odell

Selfish Reasons for Building Accessible UIs
Nolan Lawson

The Growing Risk of Malicious Browser Extensions
Kush Pandya

🧰 Tools, Code & Resources

Anime.js 4.0: A JS Animation Library for the Web — If you’re somewhat fatigued when it comes to working with web animations, Anime.js may well refresh your appetite. This mature library recently saw a major upgrade — it's a solid option for animating CSS properties, SVGs, the DOM, and JS objects. It’s well-built, and now has fresh documentation to help you get started.

Julian Garner

🍜 Tonkotsu is Your Natural Language IDE — Tonkotsu helps build your project plan and break work down, plus it can handle multiple coding tasks in parallel that you approve. Download the app for FREE during our early access program.

Tonkotsu AI sponsor

Anchors: Tailwind Plugin That Provides a Simple API for Working with CSS Anchor Positioning — The Anchor Positioning API is not quite at full support yet in browsers, but if you’re interested in trying it out in a Tailwind project, this will help.

Toolwind

Critical CSS Generator: Web-based Tool to Extract Critical CSS from Any URL — Enter a URL along with viewport width/height along with render wait time and this tool will generate the minified CSS. The page also includes instructions on how to add it to your page.

Kigo

DarkModeJS 2.0: A Utility Package for Managing Dark Mode — Uses the matchMedia API and the prefers-color-scheme media query to fire functions whenever a user is in dark mode (or changes the mode).

Assortment

RampenSau: A Color Palette Generation Library Using Hue Cycling and Easing Functions — You can try out an implementation on the home page, which allows you to adjust numerous settings to show the capabilities of the library.

David Aerne

Ipx.