Frontend Focus

HTML video/audio lazy-loading now a web standard

Wed, 8 Apr 2026 00:00:00 +0000

🚀 Frontend Focus

#736 — April 8, 2026 | Read on the web

Introducing view-transitions-toolkit: Utility Functions to More Easily Work with View Transitions — Bramus has been experimenting with View Transitions for a good while now. He's brought together his numerous code patterns into a new dedicated npm package full of view transition utilities, helpers, and functions. There’s a bunch of demos here, and the code is on GitHub.

Bramus Van Damme (Google)

📊 Announcing JetStream 3.0 — Seven years after v2 comes a big update to the popular cross-browser JS/WASM benchmark suite. It’s a group effort, with work from Mozilla, WebKit, and Chromium, with updates to the workloads and methodology. The tool is here, as well as more detail on the analysis performed.

Browser Bench

Free Workshop: Claude Code Deep Dive — April 21 — Lydia Hallie from Anthropic teaches a full-day Claude Code workshop at Frontend Masters on April 21. Free to attend. No subscription required.

Frontend Masters sponsor

How to Use HTML Video and Audio Lazy-Loading — HTML video and audio lazy loading is now a web standard. It’ll be available in Chrome 148 and Firefox and WebKit implementations are close behind. Here’s how it works.

Scott Jehl (Squarespace)

💡 Scott also wrote about how video/audio lazy-loading entered the HTML Standard.

The WebAIM Million 2026 Report — This accessibility analysis of a million sites makes for disappointing reading: despite years of progress, we’re now seeing web accessibility in decline. Why? They say “increased reliance on 3rd party frameworks and libraries and automated or AI-assisted coding practices”.

WebAIM

⚡️ IN BRIEF

🤔 CSS or BS? is a surprisingly tricky quiz. Can you spot the real CSS properties among the plausible-sounding fakes?
🖼️ HTML in Canvas is a proposal for using canvas elements to customize the rendering of HTML.
⌨️ Cloudflare has launched 'EmDash', a new TypeScript-powered CMS to take on WordPress. Matt Mullenweg shared his thoughts.
🗳️ The second annual 'State of AI' survey is now live, seeking responses on AI usage within web development.
🚀 Launch your own Artemis 2 rocket with a bit of CSS and a scroll of the mouse.
🙏 The Chrome Web Store has a new appeals process for rejected extensions.

📙 Articles, Opinions & Tutorials

Alternatives to the !important Keyword — When looking over old CSS you may encounter !important and forgot why you needed it. If you’re looking to fix up such debt, this post offers some modern alternative options.

Saleh Mubashar

CSS subgrid is Super Good — CMS-driven layouts can often get a bit tricky, particularly when trying to ‘break out’ of set container widths. Dave shows how subgrid can simplify things by way of full-width or inset components, without the need for margin hacks or wrapper bloat.

David Bushell

What If Mobile Deploys Worked Like Web Deploys? — With Expo’s OTA updates, they do. You can configure OTA Updates in minutes and see them working on your next pull request.

Expo sponsor

Email Address Obfuscation in HTML: What Works in 2026? — A test of numerous techniques to see which trip up the bots. It turns out most scrapers are very lazy, but there are a few techniques worth avoiding in 2026 (using HTML entities and URL encoding).

Spencer Mortensen

What to Know in JavaScript (2026 Edition) — A high-level overview of the sprawling JavaScript landscape as it stands today, including a look at recent language additions, frameworks to keep tabs on, runtimes, build tools, etc.

Chris Coyier

Name-Only Containers: The Scoping We Needed — Chris explores a novel use for name-only containers as a way to solve CSS scoping challenges in a native way. Of course, we do have @scope at our disposal, but this is a curious alternative approach.

Chris Coyier

New CSS Multi-Column Layout Features in Chrome — Chrome 145 introduces support for a couple of new column-wrapping features, namely column-wrap and column-height. They’re a big upgrade for multi-column layouts, so here’s a look at how you may want to use them.

Abhishek Pratap Singh

👍 Making Emojis and Icons Screen Reader Accessible
Elle Smith

Screen Readers are Not Testing Tools
Eric Eggert

🧰 Tools, Code & Resources

Crashcat: A Physics Engine for JavaScript, Built for Games, Simulations, And Creative Websites — The demo site has lots of impressive examples and the library has an extensive feature set for doing just about anything you’d need in a game or physics simulation.

Isaac Mason

Add Seat-Limited Billing Plans To Your B2B App With Clerk — Clerk Billing supports seat limits. Define caps per plan; Clerk enforces them and prompts upgrades automatically.

Clerk sponsor

Bearnie: Accessible Components for Astro and Tailwind CSS — Promoted as a way to start your own component library, with ability to fully customize these, which follow WCAG 2.1 AA guidelines, including keyboard nav, screen reader support, and focus management. Docs site is here.

Michael Andreuzza

Dither Image: Web Tool to Add a Retro Pixel Art Effect to Images — Includes a before/after toggle along with multiple settings to define the exact effect you want. A nice, quick alternative to more complex graphics tools. I just tried it with a shot from the Artemis II Moon mission. →

Dither Image

SSGOI: Native App-Like Page Transitions for the Web — Boasts better browser support than native page transitions and it’s available for React/Next, Vue/Nuxt, Svelte, and Angular, with any routing system. You can check out some neat demos on the docs site.

meursyphus

Boneyard: Auto Generated Skeleton Loading Framework — Pixel-perfect skeleton loading screens for React and Svelte apps, extracted from your real UI.
goodfuture

SVGInject: Inject SVG Files Inline Into the DOM — Inlines SVG files into the DOM at runtime with no build step, so you can style elements with CSS.
INCORS GmbH

📰 Classifieds

Most engineers can't prove they're AI-first in an interview. Gauntlet's CTO breaks down exactly what separates those who can.

Twilio SIGNAL returns to San Francisco this May. 🎟️ Local? Claim your free SIGNAL 2026 developer ticket now (before they run out) and join us for workshops, coding sessions and more!

📖 Master Visual Studio Code, and learn over 150 essential tips in this screenshot-packed guide from Louis Lazaris.

🖌️ Got some diagrams to draw?

MonoSketch: An ASCII Sketching and Diagramming App — A neat, open source sketching/diagramming tool that lets you turn your ideas into ASCII designs. You can try it here.

Tuan Chau

Wiretext: A Unicode Wireframe Design Tool — Similar to above, but works like a typical GUI tool with the end results being Unicode you can copy/paste. Includes numerous ‘components’ you can insert that we don’t normally associate with text (e.g. image, avatar, radio buttons, etc).

Daniel Howells

Ipx.

Rendering Doom in 3D with CSS

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

🚀 Frontend Focus

#735 — April 1, 2026 | Read on the web

Pretext: A Multiline Text Measurement and Layout Library — This caused quite the stir this week, with some people even saying it'll redefine how layouts are made on the Web. Check out this dynamic layout demo for a taste. Essentially it opens the door to real-time, multiline text measurement and dynamic layouts, without touching the DOM. GitHub repo.

Cheng Lou

💡 More: Simon Willison has a good overview of why this is exciting, and Den Odell shares what problems it's really solving. Meanwhile, Donnie D'Amato tempers our expectations a little in this review concluding "This certainly isn’t the end of CSS, it’s showing what’s next."

Who’s Reviewing Your AI-Generated Frontend Code? — When AI writes more code, review becomes the bottleneck. Greptile reviews every PR with full repo context, catches real bugs, and adapts to your team’s conventions over time.

Greptile sponsor

What is CSS Containment and How Can I Use It? — Harry takes a look at this “woefully underused” feature, explaining what the CSS contain property actually is, what each of its values does, and how to use it confidently without creating hard-to-debug side effects.

Harry Roberts

⚡️ IN BRIEF

⚠️ The popular axios package was compromised earlier this week, dragging in a cross-platform remote access trojan in a since-pulled version. You can check if any of your projects were affected, though.
🆕 Rachel Andrew shares what changes we saw across the web platform in March, including widespread JavaScript iterator sequencing support.
🪐 Astro 6.1 is now available, adding smoother view transitions on mobile, image encoding changes, and more.
🎬 There's a new W3C Editor's Draft of CSS Image Animation Module Level 1 proposing a image-animation property to control playback of animated images.
💬 Jake Archibald has flagged a few inconsistencies in how popover=hint behaves.

📙 Articles, Opinions & Tutorials

Your Options for Preloading Images with JavaScript — There's several ways to approach this, and, as Alex notes it can be “surprisingly quirky [..] and the best one to choose can very much depend on the circumstances.”

Alex MacArthur

Applying Accessibility Fixes with Stealth for the Greater Good — Advice on how to bake accessibility into your daily workflow and break down any systematic roadblocks, in the hope that a11y considerations become an inherent part of your process, rather than an afterthought.

Steve Frenzel

What If Mobile Deploys Worked Like Web Deploys? — With Expo’s OTA updates, they do. You can configure OTA Updates in minutes and see them working on your next pull request.

Expo sponsor

🍪 Cookie Consent Management in 2026 — Jason notes that more and more “companies are trying to get their cookie house in order” — as such, he shares some high-level thoughts on what to be thinking about, along with some more technical advice here.

Jason Grigsby

Magic Link Pitfalls — The increasingly popular login pattern (I’m not a fan) has some security issues to be aware of. Evan shares those here, and also came back, having found some more .

Evan Todd

Preserving the Web is Not The Problem. Losing It Is — Some news organizations are restricting access to the Wayback Machine over fears of AI scraping. Mark Graham explains why these concerns are unfounded.

Mark Graham

Why Designing in Code Makes You a Better Designer
Adam Silver

Form Automation Tips for Happier Users and Clients
Iqra Naaem

🧰 Tools, Code & Resources

Announcing Babylon.js 9.0 — A major release of Microsoft's popular rendering engine for building interactive, 3D web experiences packing in “a year of new features, optimizations, and performance improvements”, including a new clustered lighting system, a node-based particle editor, volumetric lighting, advanced Gaussian Splatting, and more. Repo here.

Carter & Lucchini (Microsoft)

Monitor Your AI Agent's Costs And Calls In Next.js — Monitor token usage, LLM costs, and tool calls in your Next.js app. Set up Sentry + Vercel AI SDK in 15 minutes.

Sentry sponsor

Web Platform Features Explorer: Discover New Web Platform Features and APIs — A useful way to keep up with what’s new on the web platform (including an RSS option). You can filter by newly available, widely available, by browser, etc. The data is pulled from the W3C WebDX Community Group repos. These monthly release notes are particularly valuable.

WebDX CG

🤖 Transformers.js v4: Run AI Models in the Browser — Brings Hugging Face-hosted transformer models into the browser, meaning you can run numerous vision, audio and NLP models right in the page. This new version switches to a WebGPU runtime and is installable via npm. Live demos.

Hugging Face

Heerich.js: A Tiny Engine for 3D Voxel Scenes Rendered to SVG — A minimalist JavaScript engine that constructs 3D compositions and distills them into ‘pristine’ SVGs. Pure vector output, zero dependencies. This is a really well presented site which runs through what it can do, and how.

David Aerne

XML Comparator: A Web Tool to Compare XML Files — Shows you the original, modified, and a full diffed version that allows you to select if you want to ignore whitespace or fold matched lines for easier diffing.

XML Comparator

📰 Classifieds

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

Gauntlet AI Live Night School | Stop Shipping Slop: How to Verify AI Generated Code for Production Deployments (Virtual - 4/1 @ 6ET)

😈 ...and finally

CSS is DOOMed: Rendering DOOM in 3D with CSS — Every single wall, barrel, and imp is a div positioned in 3D space using CSS transform. The logic is JS, but all of the rendering is entirely CSS. Give it a try here.

Niels Leenheer

Ipx.

The Great CSS Expansion: Replacing JS with native features

Wed, 25 Mar 2026 00:00:00 +0000

🚀 Frontend Focus

#734 — March 25, 2026 | Read on the web

The Great CSS Expansion — A well-organized walkthrough of how modern CSS can replace many of the features we once relied on JavaScript for, along with what CSS is still yet to solve. A solid look at the native features we should now be considering in place of heavier JS solutions.

Pavel Laptev

Your Dashboard Was Fast at Launch. What Happened? — Data grew and queries slowed. Someone added a pipeline, maybe a second database. TimescaleDB extends Postgres so dashboards query live data at scale. Hypertables, 95% compression, continuous aggregates. No stale reads. Start building for free.

Tiger Data (creators of TimescaleDB) sponsor

Easier Light-Dark Mode Switching: light-dark() is About to Support Images — The light-dark() spec has been updated and is moving beyond its original color-only limitation, with it being extended to support images. Bramus shows us the implementation syntax, and how we can use it to streamline theme logic in Firefox 150 and Chrome 148.

Bramus Van Damme

WebKit Features for Safari 26.4 — This latest version adds in support for CSS Grid Lanes (the new layout system formerly known as Masonry), various CSS zoom fixes, refinements to Anchor Positioning, support for math functions within img elements, and much more. A big release, so plenty to dig into here.

Jen Simmons (WebKit)

⚡️ IN BRIEF

🦊 Firefox 149 has a new split-view feature meaning you can now easily look at two tabs, side-by-side at once.
 Awesome Mac is a fantastic, well-updated curated directory of macOS software, with a large developer tools section.
🤖 Sites hosted on WordPress.com can now manage things via an AI agent.
🎉 TypeScript 6.0 has been released.

📙 Articles, Opinions & Tutorials

Web Rewind: A Journey Through 30 Years of the Web — A fun nostalgia trip. Stick your headphones on, hit the spacebar and go back in time for a visual highlight reel of the web over the past three decades. Well-executed!

Opera

🤖 CSS Refactoring with an AI Safety Net — Rather than going all in on ‘vibe coding’ an app and then being largely in the dark on the resulting code, Daniela took a different approach, using AI tools to refactor in a more managed way.

Daniela Baron

Sneaky Header Blocker Trick — Josh explains the technique behind a subtle UI detail on his blog where the sticky header appears to change depending on scroll position within the page. It’s a nice touch, all done in CSS. As Josh said on Bluesky: “Feels a bit like I’m a magician revealing their trick”.

Josh W. Comeau

Native Auth Components for Your Expo App Are Here — Clerk Expo 3.1 ships prebuilt SwiftUI and Jetpack Compose components. Drop in AuthView and session sync happens automatically.

Clerk sponsor

Highlighting Footnotes — If you follow a link to a footnote at the bottom a page, it can sometimes be hard to tell where the footnote is. Unless you follow Kitty’s advice, that is.

Kitty Giraudel

The Color System I Wish I Understood Sooner — A two-layer approach (primitives and semantics) to managing and naming colors in your projects that can help long-term. There’s also a video version available should you rather watch.

Kyle Van Deusen

Experimenting with Scroll-Driven corner-shape Animations — This new CSS property is “mathematical, so it’s easily animated”. As such, Daniel takes it for a spin to animate on scroll for interesting UI effects. Chrome only for now though!

Daniel Schwarz

▶ Designing with Claude Code — Over the course of an hour, designer Steve Schoger shows us how he’s been making use of Claude Code in the design process.
Steve Schoger

SVG Favicons That Respect Theme Preference — An effectively simple touch.
Pawel Grzybek

Building a Dual-Scene Fluid 'X-Ray Reveal' Effect in Three.js
Cullen Webber

🧰 Tools, Code & Resources

Structure Revealer: A Bookmarklet for Visualizing Page Structure — An accessibility bookmarklet that highlights structural HTML elements on any page. It can highlight custom elements, has toggles so you can select what's highlighted, and can remember your preferences across sessions.

Lloydi

💡 The rest of the A11y Tools site is worth a look too – lots of handy stuff there.

Real Jetpack Compose. Real SwiftUI. From React Native — Expo UI exposes real SwiftUI and Compose components directly. No JS wrappers. Try it out!

Expo sponsor

theSVG: 4,000+ Brand SVG Icons for Developers and Designers — A catalog of over 4000 brand icons (think Google, Apple, GitHub, etc.) you can grab as SVGs or get JSX you can copy and paste into a React app. Here’s the Apple logo, for example.

docmd: Minimalist, Zero-Config Documentation Generator — Features include enterprise-grade versioning, no React/Vue (or similar) overhead, PWA support, built-in smart search, and lots more.

docmd

Tooscut: Professional Video Editing in the Browser with WebGPU and WASM — An impressive open-source, browser-based video editor, built on WebGPU and Rust/WASM. Chromium-only though.

Mohebi Far

Elena: Tiny Library for Building Progressive Web Components — It’s 2.6kB and is keen to mention that it doesn’t force JS for everything, meaning you can load HTML and CSS first, then use JavaScript to progressively add interactivity. There's a related blog post here, and here's the GitHub repo.

Ariel Salminen

Detail: A Collection of Small Details That Make a Big Difference — A curated, visual collection of user experience niceties (across design, type, motion, accessibility, interactivity, etc). You’ll no doubt pick up an idea or two here on nice touches to add to your site or app.

Rene Wang

Sugar High 1.0: A Lightweight JSX Syntax Highlighter — Doesn’t need React present, so you can use it for syntax highlighting JSX snippets anywhere. You can also theme it with CSS. GitHub repo.

Jiachi Liu

csskit: A High-Performance CSS Toolchain — Covers formatting, listing, minifying, bundling and more. It’s not quite ready for production use just yet, but is one you may want to keep an eye on.

Keith Cirkel

👾 ...and finally

gh-space-shooter: Transform Your GitHub Contribution Graph Into Space Invaders — A fun way to spruce up your contribution graph! Try it here by entering a valid username, then download the GIF for your profile or elsewhere. Sadly you don't get to play for yourself.

Zane Chen

Ipx.

A new tool to improve load performance

Wed, 18 Mar 2026 00:00:00 +0000

🚀 Frontend Focus

#733 — March 18, 2026 | Read on the web

JPEG Compression — A highly technical breakdown that looks at the underlying mechanics of JPEG compression and file size reduction and how the techniques behind it all lean on the bias of human vision and perception.

Sophie Wang

📈 The 49MB Web Page — Would you be surprised if loading a news article led to 422 network requests and 49MB of data transfer? This post reflects on the problems that have led to this being a common experience on news sites.

Shubham Bose

Make Your Logs Queryable, Not Just Readable — When something breaks in production, "user checked out" tells you nothing. Learn how to swap console.log for structured, trace-connected logs with LogTape and Sentry, and get the context you need before users report it.

Sentry sponsor

Monitor and Improve Your Web App’s Load Performance — A new experimental ‘Network Efficiency Guardrails’ feature is available in Edge 146 that helps identify which resources, whether first or third-party, require optimization to improve load time. Feedback is being sought.

Flores, Huang, Brosset (Microsoft Edge)

contrast-color() Beyond Black and White — This up and coming function is limited to returning either black or white right now, but Una shows us how to work around this and have it return a much wider array of colors.

Una Kravets

⚡️ IN BRIEF

👁️ BaseWatch is a new site for keeping tabs on new Baseline features.
⏰ There's a proposal for time-based CSS — suggesting ways to change layout and styles based on a user's local time.
🇬🇧 Remy Sharp shares an update of what happened at the recent State of the Browser and Web Day Out events.
🖥️ Chrome is coming to ARM64 Linux later this year.

📙 Articles, Opinions & Tutorials

Abusing Customizable Selects — A superb look at just how we can now transform standard HTML dropdowns thanks to the customizable select element. Fun demos aplenty here, including the above playing card variant.

Patrick Brosset

There is No “Wrong” in CSS — As CSS allows us to solve a myriad of problems in a myriad of different ways, Jens makes the case for why we can’t really write ‘wrong’ CSS. Four reasons are listed. Do you agree?

Jens Oliver Meiert

You Built the Frontend. Now the Team Wants a Mobile App — You don't need to learn Swift/Kotlin. Expo uses the React patterns you already know; and compiles truly native apps.

Expo sponsor

An Empirical Study of Frontend Memory Leaks — After running benchmarks and subsequent analysis of some five hundred repos, here’s a thorough look at the common patterns that often lead to memory leaks (broken down by framework).

Ko-Hsin Liang

Building Dynamic Toggletips with Anchored Container Queries — With Chrome 143 we can now use anchored container queries, and Daniel takes a look at a potential future use case in creating 'toggletips'. A solid tutorial in which you’ll learn about popovers, anchor positioning, and what they can unlock.

Daniel Schwarz

Building a Scroll-Reactive 3D Gallery with Three.js, Velocity, and Mood-Based Backgrounds — A look at how to create a neat scroll-driven WebGL gallery in Three.js (demo here) with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.

Houmahani Kane

How to Set Up More Powerful HTML Minification for Astro (in 31 Seconds)
Jens Oliver Meiert

Four Reasons That Make Tailwind Great for Building Layouts
Zell Liew

Native JSON Modules Are Finally Real
Matt Smith

🧰 Tools, Code & Resources

Vite 8.0 Released — A notable release for the popular frontend build tool, with significant performance and compatibility gains. This version adds Wasm SSR support, browser console forwarding to the terminal, and new integrated Devtools.

Vite

💡 Alice Moore shares a write-up of Everything You Need to Know about Vite 8, Vite+, and Void, covering all of the VoidZero releases from the past week.

Auth Components That Don't Fight Your Design System — Clerk Core 3 ships a visual theme editor. Adjust colors, spacing, typography, and borders with live previews.

Clerk sponsor

Astro 6.0 Released — Introduces a built-in Fonts API, the Content Security Policy API, support for Live Content Collections, and more.

Phillips, Stoppa, Lefebvre, Kane

📺 ArtPlayer: A Modern, Full-Featured HTML5 Video Player — There's a live demo here. It gets you quite close to a YouTube-like experience.

Harvey Zhao

Starwind UI: A Component Library for Astro, Styled with Tailwind — The author describes this as “shadcn/ui for Astro”, in reference to its seamless CLI integration. Includes 45+ free components covering a wide range of UI possibilities. Repo is here, and you can see the components in action in this theme builder.

Branden

The Color API: Color Conversion, Naming, Scheming & Placeholders — Described as a “Swiss army knife for color”. Try out the API using the site or use the API programmatically to convert between formats, generate color schemes, and create placeholder images on the fly.

Josh Beckman

Stroke: A Tool to Generate Animated SVGs Ready to Copy/Paste in React
Abhishek

👁️ How small a color difference can you see?

What's My 'Just Noticeable Difference'? — Get ready to squint. This site tests your ability to spot subtle differences in color. It starts simple enough, but over the course of 40 rounds gets increasingly harder. Your success isn’t all down to your eyesight though, as what monitor you’re using plays a big part. There’s a related write up here that goes into more detail.

Keith Cirkel

Ipx.