iiinova — where your digital self keeps evolving

Rick Viscomi @rviscomi.dev · 29/09/2026

v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...

accessible-web-components: Make custom elements accessible by default, setting roles and ARIA state via the ElementInternals ARIA mixin, managing focus with delegatesFocus, and keeping ARIA relationships within a single shadow root.
custom-elements: Define, register, and manage the lifecycle of autonomous custom elements, covering constructor rules, lifecycle callbacks, upgrade timing, attribute/property reflection, and naming conventions.
form-associated-custom-elements: Make a custom control participate natively in forms with formAssociated and ElementInternals, submitting its own value, integrating with constraint validation, and reacting to reset, disable, and state-restore.
prerendering-custom-elements: Server-render a custom element, then hydrate it in place without re-rendering or a flash of unstyled content.
shadow-dom: Encapsulate a component's DOM and styles with Shadow DOM, construct the tree efficiently with HTML templates, and project consumer content with slots.
styling-web-components: Style across the shadow boundary with :host selectors, inherited and custom properties for theming, ::slotted and ::part, and cascade layers and container queries inside components.
web-components: Orientation and cross-cutting principles for authoring and using Web Components, covering Custom Elements, Shadow DOM, templates and slots, Declarative Shadow DOM, styling across the shadow boundary, Form-Associated Custom Elements, and accessibility requirements. Use this guide when building reusable UI components, design systems, or server-rendered custom elements.
avoid-redundant-large-asset-downloads: Avoid re-downloading and re-storing large shared assets, such as AI models, Wasm modules, or fully-bundled JavaScript libraries, that a visitor's browser may already hold from an unrelated site.
load-shared-resources-declaratively: Serve popular, unmodified scripts, stylesheets, and JavaScript modules from a shared cross-origin cache using markup or import syntax alone, witho…

New Guides
migrate-web-app-origin: Transfer an installed web app to a new origin while preserving user configuration and OS-level shortcuts.
local-network-access: Access resources on a user's local network or loopback interface from a public web application.
trusted-types: Help prevent DOM-based XSS attacks by ensuring all untrusted content is sanitized before being inserted into the page.
responsive-table: Build a data table that presents tabular data with proper header semantics, and remains readable and navigable on small screens and with assistive technologies.
spatial-navigation: Implement accessible spatial navigation using arrow keys that works correctly in different layout modes (grid etc)
cpp-on-the-web: Compile C/C++ to WebAssembly using Emscripten

Updated the animated-select-picker guide to advise using standard value attributes on <option> elements to ensure standard form submission behavior.
Updated the branded-select-styling guide to emphasize retaining standard value attributes on <option> elements to preserve default form submission behaviors.
Updated the custom-select-picker-layouts guide with guidance on using :open::picker(select) selectors, customizing the ::checkmark pseudo-element, wrapping <selectedcontent> in a <button>, and managing keyboard navigation and accessibility constraints for grid layouts.
Updated the rich-media-picker guide to clarify that standard value attributes should be maintained on <option> elements to preserve form submission functionality.
Updated the out-of-order-html-streaming guide to document the full suite of static and streaming DOM insertion methods, detailing built-in sanitizer behaviors, WritableStream integration, and processing instruction marker practices.
Updated the sanitize-untrusted-html guide to detail node manipulation patterns using Document.parseHTML() to avoid mutation XSS, explain child preservation rules via replaceWithChildrenElements, and provide aligned DOMPurify fallback configurations.
Updated…

Removed the prevent-text-wrapping guide.

HTML processing instructions: Added Chrome 150 and Edge 150 support in out-of-order-html-streaming.

A four-column table titled "Benchmark Evaluations" comparing unguided versus guided pass rates across 132 tasks and 1,124 assertions.

Row 1: codex_cli (gpt-5.6-sol) achieved a 59% unguided pass rate and an 81% guided pass rate, an uplift of +22 percentage points.

Row 2: claude_code (claude-sonnet-5) achieved a 54% unguided pass rate and an 87% guided pass rate, an uplift of +33 percentage points.

Row 3: antigravity (gemini-3.8-flash-medium) achieved a 65% unguided pass rate and a 91% guided pass rate, an uplift of +26 percentage points.

12210

Rick Viscomi @rviscomi.dev · 23/09/2026

Here's another one of JPEG XL It's the most upvoted feature and just hit 500

Screenshot of the JPEG XL upvote count over time, getting relatively few votes at first, then jumping significantly by ~250 votes in December 2025. It has steadily gained support since then, without any sudden jumps.

000

Rick Viscomi @rviscomi.dev · 23/09/2026

Took a bit of inspiration from npmx and added a chart to developer-signals.dev showing total upvotes over time This one's for the Temporal API. I love how you can see little surges in developer interest, first in December and again this month.

A screenshot of a "Signal trends" card, showing a yellow line on a timeseries chart going from near-zero in October 2025, jumping up by nearly 100 votes in December 2025, gradually gaining votes throughout 2026, until spiking up again in September 2026. The current total number of upvotes is 237, with 37 of those being in the last 30 days.

363

Rick Viscomi @rviscomi.dev · 21/09/2026

the mark of a proud web developer

Screenshot of a website footer saying that it is built with modern, vanilla HTML. CSS, and JS. Below are performance stats from that page load: TTFB 466ms, LCP 676ms, INP 48ms, and CLS 0.00

1342

Rick Viscomi @rviscomi.dev · 19/09/2026

when you realize you're including the browser extension zip files in the package distro h/t @kitschpatrol.bsky.social

Screenshot from npmx.dev showing 95% package size reduction

0132

Rick Viscomi @rviscomi.dev · 26/07/2026

Capo extension support finally coming to Firefox

Firefox browser window open to the GitHub issue requesting Firefox extension support, with DevTools open to the side showing Capo output, and the extension's color bar popover overlaid on the page, showing that the feature has been implemented

090

Rick Viscomi @rviscomi.dev · 24/06/2026

Making the most of a 24 hour layover in Iceland This place is unreal

3461

Rick Viscomi @rviscomi.dev · 17/01/2026

Antigravity one-shotted this drawing web app for my kid in under a minute. No app store, no ads.

Photo of a boy's hand interacting with a drawing app on a tablet

150

Rick Viscomi @rviscomi.dev · 16/01/2026

I too take pictures with awards I did not win

030

Rick Viscomi @rviscomi.dev · 05/01/2026

Which features are web developers most excited about, going into 2026? 🏆 github.com/web-platform... The developer-signals repo collects upvotes and comments on features that are not yet available across major browsers, and there are a few clear favorites...

Screenshot of features in the developer-signals repo, sorted by the number of upvotes

0100

Rick Viscomi @rviscomi.dev · 12/12/2025

Pro tip: you can use webstatus.dev to browse entire groups of related features For example, if you want to see more web performance APIs available across browsers, you can write a query like this and upvote every feature in the list: webstatus.dev?search_id=f0...

Screenshot from webstatus.dev showing 9 "Limited availability" web performance APIs

The list of 85 supported web feature groups, from "animation" to "xml"

120

Rick Viscomi @rviscomi.dev · 11/12/2025

Places like web.dev and caniuse.com now show you the number of upvotes for that feature, and clicking it will take you to where you can add your +1 or give more detail about your use case

Screenshot of an article about CSS accent-color on web.dev, showing the Baseline status widget. The widget shows that the feature is Limited availability, and there is 1 upvote.

Screenshot of the Can I use page for accent-color, with a thumbs up icon indicating that the feature has one upvote. A tooltip under the icon says "1 developer upvote. Need this feature across browsers? Click this and upvote it on GitHub."

240

Rick Viscomi @rviscomi.dev · 19/11/2025

This time every year I try to get through my reading list. Usually it's a bunch of sci-fi but this is first on my list. PS: give me your sci-fi recommendations!

The book Vibe Coding (2025) by Gene Kim and Steve Yegge

650

Rick Viscomi @rviscomi.dev · 28/10/2025

Apparently atob and btoa were carried over from Unix I'm glad we have more modern (and sensibly named!) features

StackOverflow answer explaining the origins of atob and btoa in JS

051

Rick Viscomi @rviscomi.dev · 22/10/2025

My little side project has been a capo plugin for ESLint so you can catch <head> validation issues during development

Screenshot of hovering over an unnecessary preload, with capo validation pointing out that the resource is already discoverable by another element and that the order of the elements is suboptimal.

250

Rick Viscomi @rviscomi.dev · 17/10/2025

Maybe the least helpful code completion ever

An autosuggestion on a JSON import of `assert { type: 'json' }`

MDN compat table showing no browser supports the `assert` syntax, but JSON import attributes (`with` syntax) have been Baseline since April 2025

140

Rick Viscomi @rviscomi.dev · 13/10/2025

Nice! Never met them but did get a good picture.

010

Rick Viscomi @rviscomi.dev · 03/09/2025

WebMCP also reminds me of the koala car from Waymo When cars don't need steering wheels, people like this man (who is blind) can start using them Self-driving websites are more accessible to everyone

Steve Mahan, who is legally blind, rides alone in a Waymo "koala car" from a park to a doctor’s office on the world’s first fully self-driving trip on public roads in 2016

010

Rick Viscomi @rviscomi.dev · 20/08/2025

I spy #WhatsMyBaseline featured in this week's @frontendfocus.bsky.social See what it's all about and share your target: web.dev/blog/whats-m...

161

Rick Viscomi @rviscomi.dev · 08/08/2025

Kinda surprised to learn that 3% of my blog's users haven't updated their browser since 2022 For 98%+ support, my target should be Baseline 2020 #WhatsMyBaseline

Baseline report for rviscomi.dev showing 100% user support until Baseline 2020, when support drops to 99.3%, then 97.5% in 2021, 97.0% in 2022, 96.2% in 2023, and 94.3% in 2024. 97.0% of users are on a browser that supports widely available features, and 91.6% for newly available features.

690

Rick Viscomi @rviscomi.dev · 22/07/2025

Ok hear me out. For today only.

Interaction to Next Paint thresholds: 199ms and 499ms

2287

Rick Viscomi @rviscomi.dev · 21/05/2025

🔥 Simpler browser support info has landed in VS Code! Hover over any CSS property or HTML element or attribute and now you'll see its Baseline status 📝 web.dev/blog/baselin...

2366

Rick Viscomi @rviscomi.dev · 16/05/2025

I've been waiting for this for a long long time!! stackoverflow.com/questions/38...

Screenshot of a Stackoverflow question from 2016 asking if it's possible to balance flex items

0150

Rick Viscomi @rviscomi.dev · 29/04/2025

New in VS Code Insiders today: browser support info for HTML elements and attributes For when you look at a newish HTML feature like <dialog> and wonder "I don't know, should we polyfill this?" Toss the polyfill, it's been Baseline for years! Coming soon to the April 2025 release

Graphic showing the old and new hovercard UI in VS Code for the <dialog> element. The old UI didn't show any browser support info at all. The new UI says "Widely available across major browsers (Baseline since 2022"

34713

Rick Viscomi @rviscomi.dev · 28/04/2025

I like this. Sometimes people leave a comment as a way of subscribing for updates and don't realize there's a button for that

140

Rick Viscomi @rviscomi.dev · 23/04/2025

I like it! Something like this would also be useful for distinguishing logs emitted from extensions. Today I deal with that by prefixing everything with my extension name, but it'd be nice if I could badge it instead, or even if browsers auto-applied a badge with the name of the extension.

Screenshot of the console logs from the "Capo" extension, where the messages are prefixed with "Capo:"

020

Rick Viscomi @rviscomi.dev · 16/04/2025

My 4 year old son got me this bird feeder as a Christmas gift. Now that the weather is nice we put it up and have enjoyed watching the birds from my office window. After we refilled it yesterday he yelled out "birds, your food is ready!" 😂

0100

Rick Viscomi @rviscomi.dev · 07/04/2025

Oh, it looks like they use the same css-language-server that powers the VS Code implementation, so it already works Only thing is that the image fails to load so it shows the alt text instead - I'll file an issue for that

Zed importing vscode-css-language-server

111

Rick Viscomi @rviscomi.dev · 07/04/2025

This little pup turns 10 today!

The same dog grown up going on a walk by the beach

0110

Rick Viscomi @rviscomi.dev · 07/04/2025

Works great with ESLint too if you're into squiggles web.dev/blog/eslint-...

Property 'text-wrap' is not a widely available baseline feature. (eslintcss/use-baseline)

030

Rick Viscomi @rviscomi.dev · 07/04/2025

And if a feature isn't fully implemented in a major browser yet, it'll tell you that too Just hover over a CSS property to bring up the support info

view-transition-name: Limited availability across major browsers (Not fully implemented in Firefox)

accent-color: Limited availability across major browsers (Not fully implemented in Safari)

font-language-override: Limited availability across major browsers (Not fully implemented in Chrome, Edge, or Safari)

130

Rick Viscomi @rviscomi.dev · 07/04/2025

Browser support info for CSS properties in VS Code is about to get a huge improvement Instead of looking at a list of browser versions and guessing if you can use a feature, now it'll just... tell you! Coming soon to the April 2025 stable release, or you can try it now in Insiders

Old style list of browser versions: Edge 88, Firefox 89, Safari 15, Chrome 88, Opera 74

New style: Widely available across major browsers (Baseline since 2021)

38411

Rick Viscomi @rviscomi.dev · 14/03/2025

Yeah that seems like a CSS parsing issue explorer.eslint.org#eslint-explo... ^ the parser is returning a "Raw" block where the paragraph starts, indicating that it's getting tripped up by a syntax issue Using a nesting example from MDN with a <widely available feature shows it working as expected

"Raw" block where the paragraph selector should be

Successfully running ESLint on an example with CSS nesting

120

Rick Viscomi @rviscomi.dev · 14/03/2025

📣 ESLint works with CSS now! And it's got support for checking browser compat with the new require-baseline rule I made a little sandbox here: github.com/rviscomi/bas... In this release I even got to contribute a couple of features: - support for selectors - Baseline year config

Command-line warnings for CSS features like "Property 'text-wrap' is not a widely available baseline feature" powered by ESLint

Screenshot of the corresponding source CSS, with features annotated with their Baseline status

2478

Rick Viscomi @rviscomi.dev · 07/01/2025

Here are the guts of yieldToMain if it helps (it only yields when necessary, not every iteration)

$function getTimeout(delay) { return callback => setTimeout(callback, delay); } function shouldYield() { return performance.now() - timeOfLastYield > (document.hidden ? 500 : BATCH_DURATION); } async function yieldToMain() { if (!shouldYield()) { return Promise.resolve(); } if (document.hidden) { await new Promise(getTimeout(1)); timeOfLastYield = performance.now(); return Promise.resolve(); } await Promise.race([ new Promise(getTimeout(100)), new Promise(requestAnimationFrame) ]); timeOfLastYield = performance.now(); return await scheduler.yield(); }$

040

Rick Viscomi @rviscomi.dev · 07/01/2025

Which do you prefer? 🅰️ for..of 🅱️ for await..of I really like how for await..of feels like a regular old synchronous loop, with no concern for yielding, and everything is encapsulated away in the async generator function But the simplicity of for..of wins IMO

async function forOf(items, callback) {
for (item of items) {
await yieldToMain();
callback(item);
}
}

async function forAwaitOf(items, callback) {
for await (item of iterateInBatches(items)) {
callback(item);
}
}

async function* iterateInBatches(items) {
for (item of items) {
yield await yieldToMain().then(item);
}
}

380

Rick Viscomi @rviscomi.dev · 06/01/2025

a small win in my quest to eradicate* http-equiv meta tags from the web: my post now outranks the httpEquiv docs 😤 rviscomi.dev/2023/07/you-... tldr: - 2 in 3 sites have them - most are obsolete - some cause perf issues - prefer HTTP headers *origin-trial, refresh, x-dns-prefetch-control are ok

Screenshot of Google search results for "http-equiv"

0241

Rick Viscomi @rviscomi.dev · 03/01/2025

The Wappalyzer extension (2M users) loops over more than 6,000 web technology detections I reached out to them about using this yielding technique and today they actually released v6.10.77 with the fix! A 700ms long task is now many 50ms tasks 🎉

A 700ms long task caused by Wappalyzer's getDom function

A trace showing Wappalyzer breaking up the getDomDetections function into 50ms tasks

0374

Rick Viscomi @rviscomi.dev · 30/12/2024

Here's one of those extensions taking 626ms to compile before executing the script for 2 more seconds And here's the same extension yielding immediately and at strategic times in the content script, breaking up the monolithic task into smaller chunks

A 2.6 second long task with 626ms spent in doing uncached script compilation

A 1.2s long task with the same content script taking 756ms to compile, followed by many broken up tasks totaling 2.9 seconds of execution time

000

Rick Viscomi @rviscomi.dev · 30/12/2024

For security, Chrome doesn't use the compilation cache for content scripts used by extensions Extension users pay that compile cost on every page view before the script even runs—but yielding breaks it up shorter tasks : smaller input delays : faster INP

152

Rick Viscomi @rviscomi.dev · 19/12/2024

From the post: 1. Analyzing aggregate self-profiling data to find the slowest causes of INP 2. Identifying the slow JS library 3. Replacing it with a pure CSS solution

Excerpt from the post talking about discovering a slow function called "resize"

Excerpt from the post talking about how they mapped the function to the autosize JS library

Excerpt from the post talking about how they fixed the performance issue by using CSS instead of the JS library

000

Rick Viscomi @rviscomi.dev · 09/12/2024

Still more work to do but we got mobile INP on web.dev down to 256ms last week, roughly a 30% improvement! How? We were running analytics code in the click handler, so we scheduled it to run later with postTask

28-day chart showing INP values fluctuating around 350 ms, then a steep drop on December 6 down to 250 ms.

Screenshot of a Chrome performance trace, with a slow interaction blocked on analytics work for 200 ms

Another screenshot showing the "fast" interaction taking 127 ms, with the slow analytics code removed

0131

Rick Viscomi @rviscomi.dev · 21/11/2024

Hundreds of developers at DevFest NYC today! I'm staffing the Chrome booth along with @bram.us and @sergeyche.bsky.social who also both gave talks today

DevFest audience seated and ready for the first talk

091

Rick Viscomi @rviscomi.dev · 20/11/2024

I was curious so I looked up the most upvoted Interop 2025 proposals: JPEG XL (+398) Mobile scrolling (+257) CSS @custom-media (+98) Core Web Vitals (+95) Navigation API (+82) CSS anchor positioning (+80) Mathematics rendering (+72) WebDriver BiDi (+65) github.com/web-platform...

1132

Rick Viscomi @rviscomi.dev · 17/11/2024

Same rainbow, no herring

130