Frontend Focus

The select element, sized just right

Wed, 1 Jul 2026 00:00:00 +0000

🚀 Frontend Focus

#748 — July 1, 2026 | Read on the web

🥣 The Goldilocks Customizable Select Height — Jake walks through getting the sizing of customizable <select> elements just right. He lands on a calc-size() solution that respects intrinsic sizing while capping dimensions. A practical deep-dive with demos, CSS code examples, and fallbacks.

Jake Archibald

Introducing the <usermedia> HTML element — Shipping in Chrome 151, this replaces the getUserMedia() prompt for controlling camera and microphone access. It also introduces a way to let users change their mind on blocked permissions, without the need to dig into browser settings.

Viana and Le (Google)

Webflow for Developers — APIs, SDKs, and Code Components for building sites on Webflow. Bring your own code, deploy apps on Webflow Cloud, build custom integrations, publish to the app marketplace, or build with agents via the MCP server.

Webflow sponsor

The Shifting Line Between CSS States and JavaScript Events — A tour of the (more than you’d think) CSS pseudo-classes that can stand in for JS event listeners, plus a look at the experimental/future event-trigger syntax.

Daniel Schwarz

▶ Modern UI Patterns — A talk from the recent CSS Day conference in which Una dives into some of the newest updates in CSS and the web UI space, and also shares a UX framework of 5 principles to frame your design decisions through a modern UI lens.

Una Kravets

⚡️ IN BRIEF

✏️ Chrome 150 is rolling out, so Rachel Andrew takes a look at what's new, including text-fit property support and a way to create native gradient borders.
🗺️ Here's a cool DIY project in which Eduardo Bouças lit up a wall-mounted LED world map with live CDN traffic from the Netlify Edge network.
👾 Version 7.3.0 of Font Awesome has arrived, complete with a nice new (Pro+) set of 200+ retro Pixel icons.
📡 It's 13 years since Google Reader closed. Here's our feed if you want it.
🤚 Pointer Events Level 3 is now a W3C Recommendation.

📙 Articles, Opinions & Tutorials

An Animated Radial Gradient Mask Over Text in CSS — Cassidy shows us how she replicated a neat radial rings effect, using the CSS mask property along with a repeating radial gradient. Demo here. Browser support isn’t universal, but the journey she takes is interesting.

Cassidy Williams

Dark Mode with Web Standards — A good technical overview on how to implement a robust dark mode for your site — one that respects OS-level preferences, but also provides a manual override.

Ollie Williams

Your Agent Builds the Frontend. What About the Database? — ghost gives it a Postgres fork per task, like a scratchpad. Spin up, throw away, no project limits. Try for free.

ghost sponsor

▶ Supercharge Web UX with View Transitions — In this 50-minute talk Bramus starts off with a clear introductory overview of how View Transitions work, before “turning it up to 11” and really getting into the detail of what we can achieve with this API.

Bramus Van Damme

WebGL Without a GPU — How do you render WebGL on a fleet of Linux boxes with no graphics card? A look at the CPU-emulation chain that’s available, and a Chrome flag that sped up taking a screenshot by 4x.

Kiko Beats

Modes and Themes That Stick: Building a Persistent Toggle Solution — A three-layer, progressively enhanced approach to mode and theme switching.

Stuart Robson

Streaming HTML with textStream() in Chrome Canary
Ollie Williams

Using Scroll-Driven Animations for Opposing Scroll Directions
Silvestar Bistrović

The Web is Being Made Accessible for AI, Not People
Zong & Elavsky

🧰 Tools, Code & Resources

Slim Select 4.0: An Advanced Select Dropdown Control — A feature-rich select dropdown component with no dependencies. The recently released v4.0 adds a modal mode for mobile-friendly picking.

Brian Voelker

FixCSS: A Library to Rectify Mistakes in the Design of CSS — TIL that the CSS Working Group has a list of ‘mistakes’ made in the design of CSS. This library sets out to rectify these failures, as explained here.

Declan Chidlow

One Session Left: Agentic Debugging with Sentry MCP and Seer — Build agentic debugging with the Sentry MCP, CLI and Seer. Catch it before it's done.

Sentry sponsor

<qr-code> 2.0: Web Component for Generating QR Codes — A recently modernized, decade-old solution to display QR codes on the Web in PNG, SVG, and HTML formats (so you can style them entirely to your liking). Demo.

Eduard Castellano

Snipgrapher: CLI Tool to Generate Images of Code Snippets — Whether from code files, stdin, or an inline source. It uses the powerful Shiki syntax highlighter, but with a built-in fallback option.

Matteo Collina

💡 If you'd prefer a Web-based tool for creating syntax highlighted screenshots of code, Carbon remains a great option.

📰 Classifieds

📸 Scan barcodes, QR codes and others directly in the browser using STRICH, a lean JS SDK. Free 14-day trial, try the demo app today!

🦜 ...and finally

Where to Find the Colors Your Screen Can’t Show You — We may now have fancy displays and a slew of expanding color capabilities at our disposal (P3, OKLCH, color()), but there are still real-world colors screens can’t reliably reproduce. Ryan takes us on a fascinating journey of just what those colors are: “There are around 500 species of birds with colors outside the sRGB gamut”.

Ryan Moulton

CSS that picks its own readable text color

Wed, 24 Jun 2026 00:00:00 +0000

🚀 Frontend Focus

#747 — June 24, 2026 | Read on the web

Modern CSS Theming with light-dark(), contrast-color(), and Style Queries — Get dark mode, automatic readable text, and per-component palettes, all from a single brand color with no JavaScript. Una combines light-dark(), the new contrast-color(), and style queries into one adaptive system, now Baseline across browsers.

Una Kravets

Your Loading Spinner Is a Slow Query in Disguise — Behind it is an analytics query your database can't answer fast enough. TimescaleDB extends Postgres so dashboards query live data at scale. Hypertables, 95% compression, continuous aggregates. No second database. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

🔒 PACT: Anonymous Credentials for the Web — Mozilla shares the technical details behind their PACT proposal — a privacy-preserving way to curb bot abuse. It aims to let sites rate-limit bots via cryptography, without the need to track users or tie access to your device.

Dennis Jackson

Astro 7.0 Now Available — The popular framework for content-driven sites goes all-in on speed: a new Rust-powered compiler, a Rust Markdown/MDX pipeline, and Vite 8's Rolldown bundler combine for builds 15–61% faster.

Phillips, Stoppa, Kane (Astro)

✨ Astro's Starlight framework for building documentation sites on top of Astro has also just been updated to support Astro 7.0.

🟠 IN BRIEF

⚡️ Vite 8.1 is out now, adding support for external CSS imports and plugin-level file dependencies in Lightning CSS.
🐍 What's better than a normal HTML range slider? A wavy/wiggly slider.
🖼️ A favicon is just an image, but what if...you could store something inside one. Like the contents of a website perhaps?
🧐 Wes Bos shares a wild idea over on X — in the future might we just stream in our user interfaces over video?

📙 Articles, Opinions & Tutorials

Your Grid Lanes Will Likely Fail WCAG 2.4.3 — A warning on the accessibility pitfalls of the new Grid Lanes feature. Manuel notes that it inherently breaks tab order, and while flow-tolerance can help, its default value is too low and even a high value is no silver bullet.

Manuel Matuzovic

Animating the <dialog> Element Using View Transitions — Rik quickly explains how to animate the <dialog> element using the View Transition API, takes a look at the Invoker Commands API, and shares some tips to improve the default behavior of the <dialog> modal.

Rik Schennink

Front-End Devs Are Shipping Real iOS and Android Apps. Join Them — The same React you already write, now on real phones. Expo runs the builds, store submissions, and updates.

Expo sponsor

Can Your AI Pass the Accessibility Test? — Aaron, along with Jessie Lorenz and Carie Fisher, recently gave a talk at Microsoft Build highlighting where coding agents fall short in regards to accessibility: "Out of the box, most coding agents are pretty terrible when it comes to accessibility."

Aaron Gustafson

Improving Card Patterns with Anchor Positioning — Shares a pattern using CSS anchor positioning to solve some of the problems often found with clickable card surfaces.

Emil Björklund

Which Copyleft Licence is Suitable for an SVG? — Possibly more complex than you’d think, as SVGs are less ‘images’ and more ‘software’.
Terence Eden

There’s No Need to Include navigation in Your Navigation Labels
Martin Underhill

Do Websites Need to Function Exactly the Same on Every Platform?
Bramus Van Damme

Ending Responsive Images
Jason Grigsby

🧰 Tools, Code & Resources

billboard.js 4.0: A JavaScript Chart Library Based on D3 — At nine years old, billboard.js now has a new, opt-in canvas-based rendering mode (SVG remains the default), smaller bundles, and better performance on large datasets. There are hundreds of demos ranging from donut charts and funnel charts to overlapping bar charts and radar charts.

Jae Sung Park (NAVER)

Kage: Shadow a Website for Offline Viewing — A tool that clones a web site and serves it up for offline viewing. The difference vs a normal "Save As" is it handles JS-rendered sites by saving the DOM from a headless browser.

Duc-Tam Nguyen

Render Clerk's Sign-In Components Flush, Without the Card Wrapper — The new elevation appearance option drops the card background, border, and shadow so your sign-in fits any layout.

Clerk sponsor

Wely: A Lightweight Web Component Framework — A unified toolkit for building components without a heavy framework. One CLI handles scaffolding, styling, testing, and bundling, and the output is portable native Web Components with a runtime of ~13 KB (Lit internally, plus Tailwind).

litepacks

Wirewiki: A Resource to Explore Infrastructure for Any Domain — Has a simple UI to do all sorts of common lookups including info on hosting, DNS, SPF, A, CNAME, TXT records, MX records, and lots more.

Ruurtjan Pul

Precise Type: A Type Scale Tool to Craft Precise Typography — A full-featured type scale tool to interactively customize modular or metric-based type scales. Also includes info on the models behind font size, line height, and letter spacing. Exports to CSS and CSV.

Adonis Raul Raduca

Able Player v5.0.0 Released — An accessible, cross-browser HTML5 media player (audio and video) designed to enhance the usability of audiovisual content for all users, including those with disabilities. Homepage.

Joe Dolson

🎨 Palette Inspiration: Color Palettes Extracted from Famous Art — Want a palette inspired by a masterpiece (like these Picassos)? Search and explore palettes built from 23,000+ works of art in different styles and genres.

Palette Inspiration

📰 Classifieds

🦊 Need to turn Word docs into PDFs in your app? Step-by-step DOCX-to-PDF walkthrough with working Python and cURL code.

👀 ...and finally

👹 cssQuake: A Port Powered by PolyCSS — We featured PolyCSS a few issues ago, and now someone has put it to work to create a CSS-powered Quake. The world is rendered as real HTML/CSS 3D geometry, without a WebGL or canvas renderer. Impressive stuff. You can see the repo here.

Agustin Capeletto

taken — This page reveals what your browser shares the moment you arrive on a site. No login, no form, no permissions. An interesting overview of the data points that are just offered up by default.

Rise Up Labs

The scope superpower hiding in CSS @function

Wed, 17 Jun 2026 00:00:00 +0000

🚀 Frontend Focus

#746 — June 17, 2026 | Read on the web

Introducing the MDN MCP Server — Bring MDN’s docs and browser compatibility data straight into an AI agent or IDE for accurate, up-to-date answers about the web platform, instead of relying on models' stale training data.

The MDN Team

clerk deploy: From Dev to Production in One Command — Run clerk deploy from a linked project and the Clerk CLI walks you through every production requirement: instance clone, DNS records with zone file export, Google and Apple OAuth credentials, and a verification loop for DNS, SSL, and email DNS.

Clerk sponsor

The Scope of CSS @function — A look at the evaluation scope of CSS custom functions: unlike regular custom properties that inherit through the DOM, they resolve variables from wherever they're called, letting library authors hide complex logic behind clean APIs, with some caveats.

Jane Ori

⚡️ IN BRIEF

🟡 Version 8 of JavaScript compiler Babel landed yesterday, some eight years since the last major release. It's now ESM-only.
🦊 Firefox 152 was released, adding new web platform features including CSS field-sizing.
⏱️ TC39 delegate Lucas Casonato has made a proposal to add built-in localized time formatting to HTML.
🔀 WASI 0.3 (WebAssembly System Interface) has launched, adding native async support to WebAssembly Components.
💻 Frontend Masters has rebranded to Master.dev to better reflect the courses they now offer.

📙 Articles, Opinions & Tutorials

The Golden Rule of Customizable Select — When using Safari 27's new customizable <select> element, always keep text on your option elements. Skipping that in favor of just icons or swatches hurts usability, accessibility, and older-browser fallbacks.

Yitbarek & Nguyen (WebKit)

Why Isn't My 3D View Transition Working? — Short answer: the view transition pseudo tree has no real parent, so the perspective property has nothing to latch onto. This post walks through the fix.

Sunkanmi Fafowora

Your Dashboard Is Fast. Your Data Isn't — Dashboards stall on slow queries, not slow components. Tiger Data keeps backend data as fresh as your UI.

Tiger Data (creators of TimescaleDB) sponsor

Demystifying the View Transition Pseudo Tree — Breaks down each layer of a pseudo-element tree that a browser builds during a view transition, looking at what each pseudo-element does, why they’re there, and how to target them when defaults need tweaking.

Cyd Stumpel

▶ Get Started with the <model> Element — The model element brings interactive 3D content into the page on iOS, iPadOS, macOS, and visionOS.

Aleksei Marchenko (Apple Developer)

Creating Memorable Web Experiences: A Modern CSS Toolkit — A practical reminder and tooling overview, looking at what we can now achieve without the technical overhead of the past.

Mariana Beldi

Improvements to Web for AI Should Benefit All Users — The Safari team recently opposed the WebMCP API, and Jason argues that rather than building AI-specific APIs, we should fix the underlying semantics. He concludes: “user needs come before agent needs”.

Jason Grigsby

Another Stab at the Perfect CSS Pie Chart... Sans JavaScript
Antoine Villepreux

🧰 Tools, Code & Resources

Prop For That: What JS Knows, Now CSS Knows — A library to tackle areas where CSS almost gets you there, but you’re forced to drop into JavaScript to get a value: mouse position, the time, a slider’s value, etc. Add an HTML attribute and the live values show up as custom properties, bridging the JS–CSS gap declaratively. It has a great demo page.

Adam Argyle

Handsontable: A Production-Ready Data Table That Feels Like Excel — Excel-like editing, 400+ formulas, virtualization — tested, accessible, and ready for production.

Handsontable sponsor

Mitos ASCII Tool: Convert Images into ASCII Text Illustrations — Used at Oxide for creating branded ASCII graphics, this tool not only converts images into ASCII art, but lets you live-code effects for animated hero image experiences, etc. GitHub repo.

Oxide Computer Company

Discover MapKit JS 6: Rebuilt for Today’s Web Developer — Apple’s privacy-first framework for integrating Maps into your site has had a big update. Version six ships as an npm package, and introduces TypeScript support via DefinitelyTyped. There’s a demo here.

Tim Chien (WebKit)

Templatical: An Open Source, Drag-and-Drop Email Editor SDK — Supports custom blocks with API-backed data, merge tags with your choice of template literals, full theming via design tokens, and lots more. The playground includes real-world use cases. Source.

Templatical

Svelte Animations: 50+ Free Animated Components and Effects Made with Svelte, Motion SV, and Tailwind — Includes three different component packs (Magic, Spell, and Fancy), which you can try out here.

Sikandar Bhide

OneGlanse: Track How Your Brand Appears in ChatGPT, Gemini, Perplexity, Claude, and Google AI Overview
OneGlanse

📰 Classifieds

⚡️ Add lightning-fast barcode & QR scanning to your web app with STRICH, a lean JS library. Simple, predictable pricing. Free trial and demo!

🔄 That "Export PDF" button works fine until you hit 20,000 docs. See how to scale it with Foxit's PDF APIs.

🫟 ...and finally

Storied Colors: A Research Catalog of Color — An ongoing index of named colors, sharing the documented history of various hues, looking at their origins, dyes, chemical formulas, and how various colors got their names.

Safari's 58 new features

Wed, 10 Jun 2026 00:00:00 +0000

🚀 Frontend Focus

#745 — June 10, 2026 | Read on the web

What's New in WebKit in Safari 27 Beta — Apple’s WWDC is taking place this week, and Safari 27, coming to iPhone, iPad, and Mac users later this year, is now in beta. It's a big release with 58 new features, from customizable <select> elements to numerous new CSS properties and sizes="auto" support for <img> elements. ▶️ Jen Simmons presents a video roundup.

WebKit

How Building an HTML-First Site Doubled Our Users Overnight — After two costly failed rebuilds, a public-service application flow was rebuilt around HTML forms, backend-saved progress, and JavaScript used only where it helped, which doubled form completions overnight.

Alistair Davidson

Master Playwright: Testing & AI Workflows — Catch broken UIs before they ship. Learn Playwright E2E testing and build verification loops that keep agentic coding tools in check.

master.dev sponsor

Context-Aware Headings in HTML — Manuel explores a new experimental HTML feature called the headingoffset attribute, which allows us to dynamically adjust heading levels based on their nesting depth. “The implementation, as it stands, seems very sensible to me”.

Manuel Matuzović

The Fundamentals and Dev Experience of CSS @function — @function lets you define functions across stylesheets that return a value usable wherever CSS can use one. Jane finds today’s dev experience rough (and support is limited to Chromium-based browsers for now) but sees the potential.

Jane Ori

⚡️ IN BRIEF

📊 Google has improved its Baseline Checker tool. You can now find the right Baseline target for your site without exporting data from Analytics first.
🏆 Nominations for the Tiny Awards are now open — they celebrate the best of the small, poetic, creative, handmade web.
👍 CodePen creations made using the new 2.0 editor can now become live, deployed sites.
🟩 Enjoy Wordle? What about a CSS version in which you have to guess the correct CSS feature? (It's very tough!)

📙 Articles, Opinions & Tutorials

CSS is Filling the Gaps with Rules: A Way to Style Gaps in Grid and Flex — A detailed look at the extent of what gap decorations can do with code & demos, plus practical ideas of how to use the feature in practice.

Brecht De Ruyte

CSS Can Now Animate Between Pages: View Transitions Without JavaScript — How cross-document view transitions can bring app-like page transitions to any website with just one CSS rule, no JS needed.

David Krcek

Fix Bugs in Cursor with the Context Sentry Already Has — Pull your top issues in plain English, run Seer root cause analysis in the IDE, and apply the fix. Shorter debugging loop.

Sentry sponsor

You Probably Shouldn’t Be Annotating Focus Order — If your HTML is semantic and follows reading order, focus order takes care of itself.

Eric Bailey

Scrubbable Staggered Animation with CSS @function — A step-by-step look at using a mathematical formula to create a reusable, predictable staggered effect, be that for an animation, scroll progress, or any other input.

Ashutosh Biswas

▶ Rediscover the HTML Select Element — The select element has had a glow-up of late, and this video shows us it in action. You can now take this default element and have it visually match your site's styling.

Tim Nguyen (Apple Developer)

▶ Create Web Extensions for Safari — A half-hour deep dive into building and testing a web extension for Safari, without the need to touch Xcode.

Kiara Rose (Apple Developer)

▶ Learn CSS Grid Lanes — A ten-minute introduction looking at how grid lanes can be used to arrange differently-shaped elements into clean, flexible layouts.

Brandon Stewart (Apple Developer)

▶ Web Dev Challenge: Rebuild Your Website with ATproto — Contestants get time to plan and integrate ATproto into their sites. I’ve been tinkering around with this. A fun way to learn about it!

CodeTV

A Frontend Developer’s Guide to the Hybrid Mobile App Development Landscape
Rachael Yomtoob

9 Accessibility Myths and Pushbacks and How to Answer Them
Stéphanie Walter

How To Make Your Design System AI-Ready
Vitaly Friedman

🧰 Tools, Code & Resources

The Field Guide to CSS Grid Lanes — The WebKit team has just launched this detailed guide to Grid Lanes. It’s a clearly structured set of interactive playgrounds and demos highlighting how this relatively new CSS feature can be used. A good reference worth bookmarking.

WebKit

NoLoJS: HTML/CSS Alternatives to Common JS Patterns — A growing collection of common JS patterns that can now be replaced with HTML, CSS, or very little JS. Think accordions, modals, lazy loading, etc.

Aaron T. Grogg

Catch the Regression Before Your Users Do — Stop finding out about perf regressions from App Store reviews. Observe surfaces within hours, tied to the build.

Expo sponsor

🔠 FontSelf: A Tool to Configure Google Fonts for Self-Hosting — You might be self-hosting fonts already, but this could help speed up the process. You can select and configure your chosen font, download a package, and get the CSS.

FontSelf

.MD This Page: A Browser Extension to Convert Any Web Page to Clean Markdown — Particularly useful for making content LLM-ready, removing ads, UI elements, etc. while maintaining a simple, clear hierarchy.

Adem Kouki

Astro Photo Grid: A Minimal, Single-Page Photo Gallery with Lightbox for Astro
Ky Decker

Juice 12.1: Inlines CSS Stylesheets Into Your HTML Source
Automattic

📰 Classifieds

📄 Building a "Download as PDF" feature? Skip the HTML-to-PDF route. Foxit's DocGen API: Word template + JSON → PDF in one call.

⚡️ Add lightning-fast barcode & QR scanning to your web app with STRICH, a lean JS library. Simple, predictable pricing. Free trial and demo!

✨ Some extra sparkle…

tsParticles 4: A Particle Engine for Web Effects — If you want a confetti cannon, fireworks (July 4 is coming up soon), ribbons, fireflies, snow, or similar effects on your pages, this is for you. You can see some live demos here.

Matteo Bruni