iiinova — where your digital self keeps evolving

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 23h

See how Modern Web Guidance helps your coding agent write a swipe-to-remove feature. Compare side-by-side with an unassisted agent. Modern Web Guidance provides best practices, smooth web animation patterns, and cross-browser fallbacks directly to your coding agent → goo.gle/mwg

062

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

With another 9 updates to existing guides: custom <select> and x-doc view transitions by @lea.verou.me HTML streaming and security by @jamessw.com Sanitization by @rowan.fyi WebMCP by François Beaufort and Kasper Kulikowski Get the guidance at goo.gle/mwg 🚀

goo.gle

Modern Web Guidance | Chrome for Developers

Guidance on how to build for the modern web.

030

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

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 23/09/2026

Building dynamic touch gestures like swipe-to-remove often causes coding agents to generate overly complex JavaScript, leading to janky animations. Modern Web Guidance solves this by providing your agent with structured, up-to-date implementation guides → goo.gle/mwg

0111

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

Happy to file an issue for you if you'd like, but all browser support info comes from the web-features dataset, which gets its data from BCD. The bug would be in one of those places.

developer.mozilla.org

<datalist> HTML data list element - HTML | MDN

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

000

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

There are two cases: the feature never had a GH issue to get upvoted, or it was open for a time but received 0 upvotes I've fixed the second case, but do you think the first case is a bug too? I wasn't sure it'd be accurate to say a feature got 0 upvotes if it was never open for signals.

000

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 · 18/09/2026

🚀 Introducing developer-signals.dev Upvote and comment on emerging web features and see what other developers are asking for It's built on the developer-signals repo from the WebDX CG, which has over 5k upvotes already, plus a dedicated mode for Interop 2027 proposals Go cast your signals!

developer-signals.dev

Developer Signals - Shape what browsers build next

Discover upcoming web features, upvote priorities, and share your use cases. Every signal is submitted to the WebDX Community Group's developer-signals repo.

050

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 17/09/2026

Modern Web Guidance v0.0.187 brings new and updated guides and Codex plugin support → goo.gle/4harAXQ ✨ New guides: progress rings, scrollspy nav menus, loading spinners 📝 Updated guidance to avoid bfcache breakage and unwanted inline layout gaps 🔌 Added plugin manifest support for Codex

goo.gle

Release v0.0.187 · GoogleChrome/modern-web-guidance

Release Notes: v0.0.187 🆕 New Guides Introduced a new guide for progress-ring detailing how to build accessible, customizable circular progress indicators that visually communicate task completion...

0113

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 16/09/2026

sibling-index() = knowing your exact spot in line sibling-count() = knowing how long the line is Both CSS functions have reached Baseline Newly Available status for the latest browsers. Read the full docs → goo.gle/4AfHN6Z Guides and fallbacks are in Modern Web Guidance → goo.gle/4AhBGPG

0174

Reposted by Rick Viscomi

Barry Pollard @tunetheweb.com · 15/09/2026

We just launched experimental ad metrics in the Chrome User Experience Report (CrUX): - Ad Count - Ad Density - Ad Weight: Network - Ad Weight: CPU These metrics are a set of ad-related measurements that provide transparency into sites' ad experiences. developer.chrome.com/blog/crux-ad... 1/8 🧵

developer.chrome.com

New ad metrics in Chrome User Experience Report | Blog | Chrome for Developers

Learn about the new ad metrics now available in the Chrome User Experience Report (CrUX)

23014

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

Thank you, that was very helpful! The issue was that I was statically importing the cookie-consent script, so the whole script failed when it got blocked. Changed it to a dynamic import that gracefully catches the network error. Could you try one last time to see if it works now?

100

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

Hmm you can try the direct login URL: developer-signals.rviscomi.workers.dev/api/auth/git... Let me know if it works or if there are any network errors in DevTools

100

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

No the app does need to act on your behalf so it can add upvotes and comments on issues, and I assume knowing what resources you have access to is related to that. In the app config, I only request RW permission on issues, not sure why they don't just say that here.

010

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

🥳 Thanks for confirming!

010

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

@felix.gripe with Patrick's help I've rolled out a much more narrowly scoped auth flow. Let me know if that works better for you!

111

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

No definitely not. This is everything you get with public_repo OAuth permissions. A workaround I'm exploring is making a GitHub app instead, but it'd need to be installed by the WebDX and Interop repo admins. Know anyone I can talk to about that? 😁

100

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

I wrote this one! 🙋‍♂️ In CJK languages, hitting Enter to confirm an IME candidate can accidentally submit the form in chat textareas The guide shows how to safely implement "Enter to submit" including how to work around a Safari event-ordering bug with isComposing github.com/GoogleChrome...

github.com

modern-web-guidance/skills/modern-web-guidance/guides/forms/ime-safe-enter-submit.md at v0.0.186 · GoogleChrome/modern-web-guidance

Keep your coding agent up to date with the latest web best practices - GoogleChrome/modern-web-guidance

0162

Reposted by Rick Viscomi

Brecht De Ruyte @utilitybend.com · 27/08/2026

I was going to do a short post on Modern Web Guidance; it turned into a huge deep dive. Here's what it does, why it raised eyebrows, and on-point information with truth bombs. I tried to be complete and honest. It's not magic, but in time, it might just make the web a little bit better.

utilitybend.com

Modern Web Guidance as a starting point for my own token skills: getting agents to write better CSS | utilitybend

How Google's Modern Web Guidance feeds Baseline-aware platform best practices into AI coding agents, how to pair it with your own design token skills, and an honest look at its telemetry, Apache-2.0 l...

3268

Reposted by Rick Viscomi

Firefox for Web Developers @webdevs.firefox.com · 25/08/2026

CSS sibling-count() and sibling-index() are newly available across engines! Here's how they work:

314925

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 21/08/2026

Skip writing complex JavaScript to make form elements like textarea fit user input 🍝 The field-sizing CSS property is a newly available Baseline feature that lets form controls naturally adjust their sizing to fit their contents. Find the documentation here → goo.gle/4a1HJMM

1204

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

Oh that's very nice, thanks Robin!

010

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

If you've got a WordPress site, give the new Capo plugin a try! It automatically sorts your <head> elements by importance and surfaces any warnings wordpress.org/plugins/capo...

wordpress.org

Capo – Head Optimizer

Automatically reorders the HTML head of your WordPress pages for optimal browser rendering performance using the Capo.js methodology.

4123

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 17/08/2026

What if we could remove the friction in the email → goo.gle/4fsFpjG The proposed Email Verification API would let your site validate the email address right in the browser! No email sent, no confirmation click needed.

1123

Rick Viscomi @rviscomi.dev · 12/08/2026

I had to look it up but the oldest version I remember using (Callisto) was from 2006!! 🥲

020

Rick Viscomi @rviscomi.dev · 12/08/2026

Eclipse had such memorable version names Now I know several Jovian moons 😂

230

Reposted by Rick Viscomi

Igalia @igalia.com · 12/08/2026

BIG NEWS: Bocoup is now Igalia! The two worker co-ops have agreed to join forces, with several members of Bocoup coming aboard at Igalia, along with the brand assets and web site. More details in our official announcement: www.igalia.com/2026/Joining...

412438

Reposted by Rick Viscomi

Smashing Magazine @smashingmagazine.com · 10/08/2026

🌐 The gap between “you need a library for this” and “the browser does this” keeps closing. A practical guide to auditing your dependencies and finding what the web platform can now handle for you: www.smashingmagazine.com/2026/08/how-...

1217

Reposted by Rick Viscomi

Patrick Brosset @patrickbrosset.com · 06/08/2026

Baseline is not a ceiling 🙈 If you only use Baseline Widely Available ✅ features in your project, you’re missing out! So many features you can use with fallbacks or as progressive enhancements. Newly: web-platform-dx.github.io/web-features... Not Baseline: web-platform-dx.github.io/web-features...

2489

Reposted by Rick Viscomi

James @43081j.com · 31/07/2026

new @e18e.dev blog post about when to publish source maps to npm 📦 source maps are often the reason behind bloated install sizes, but sometimes necessary. here we try to explain some of the balance, do/don't

e18e.dev

Source maps or not?

Source maps are great for debugging, but should we be shipping them in production?

45515

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

Appreciate the feedback! I was reluctant to add labels because once you get it you get it, but I can see how it can be confusing at first. I'll look into adding something with a "don't show me again" opt-out.

100

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

Reposted by Rick Viscomi

Eiji Kitamura / えーじ @agektmr.com · 20/07/2026

Introducing passkey skills— The Chrome team launched an early preview of Modern Web Guidance at Google I/O — a tool that injects web development best practices directly into your coding agents as skills.

164

Reposted by Rick Viscomi

Patrick Brosset @patrickbrosset.com · 01/07/2026

There's a lot of excitement for CSS Gap Decorations right now, which is great. However, the feature is only available in Chromium-based browsers (Chrome or Edge 149+) for now. Want it in other browsers? Have a specific use case for it? Leave a 👍 AND a comment with your use case here ⬇️

github.com

Gap decorations · Issue #362 · web-platform-dx/developer-signals

This GitHub issue is for collecting web developer signals for Gap decorations. The column-rule and row-rule CSS properties display decorative lines between columns and rows of a flex, grid, or mult...

142

Reposted by Rick Viscomi

Patrick Brosset @patrickbrosset.com · 29/06/2026

Not a single day without me wishing I could use sibling-count() and sibling-index() in CSS across browsers. They're so useful when styling collections of elements. Do you want them too? Let us know your use cases by dropping a comment at github.com/web-platform-dx/developer-signals/issues/361.

github.com

sibling-count() and sibling-index() · Issue #361 · web-platform-dx/developer-signals

This GitHub issue is for collecting web developer signals for sibling-count() and sibling-index(). The sibling-count() and sibling-index() CSS functions return integers that are useful to style ele...

2193

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

I did the Golden Circle this time but I'd definitely love to see more of the island

010