iiinova — where your digital self keeps evolving

Reposted by Rick Viscomi

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

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

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

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 · 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

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

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 · 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

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

3461

Reposted by Rick Viscomi

Seb ⚛️ ThisWeekInReact.com @sebastienlorber.com · 22/06/2026

👀 URL.canParse() - Now Baseline Widely Available In all browsers since December 2023 - safe to use in most cases If you run isValidUrl() against many non-URL inputs, switching could significantly improve performance, bypassing the usage of errors for control flow.

2394

Reposted by Rick Viscomi

Bramus @bram.us · 22/06/2026

Reminder: The State of CSS Survey is closing *SOON*, so **NOW** is the moment to complete it. stateofcss.com/en-US/ This survey directly influences efforts like Interop and feature planning, so this is **YOUR** moment to let browser vendors know what you find missing on the web!

Promotional Image for the State of CSS Survey 2026

1159

Reposted by Rick Viscomi

Barry Pollard @tunetheweb.com · 19/06/2026

The Chrome DevTools team are doing a "papercuts" sprint where they try to address lots of small, irritating bugs and annoyances. Reply with crbug.com links (no bug, no fix—that's the deal!) and will see what we can do. No promises though as some may be features/too big/unclear how to solve.

crbug.com

Chromium

45720

Reposted by Rick Viscomi

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

Did you attend #CSSDay and saw my talk (or heard about it), and you really want CSS Grid Lanes to be supported across browsers? ➡️ Give this issue a thumbs-up *and* add a comment explaining your use case. This can help a lot move things forward 💟 github.com/web-platform...

github.com

Masonry · Issue #308 · web-platform-dx/developer-signals

This GitHub issue is for collecting web developer signals for Masonry. The display: grid-lanes or display: inline-grid-lanes CSS declaration creates a layout where items are tightly packed, like br...

185

Reposted by Rick Viscomi

Lea Verou, PhD @lea.verou.me · 13/06/2026

The people of #cssday have spoken: we want gamut mapping and we want it NOW!

134610

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 12/06/2026

Solved: AI coding tools that hallucinate legacy web practices. Modern Web Guidance codifies decades of Chrome's platform expertise into your agents. Level up with guides for web best practices and new platform features, using Baseline data for cross-browser reliability → goo.gle/4on8BMS

082

Reposted by Rick Viscomi

Philip Walton @philipwalton.com · 22/05/2026

My talk on Modern Web Guidance is up! youtu.be/bo3i0FzDUYo This talk is a deep dive into how Modern Web Guidance works and why it's useful. 👉 Make sure you watch until the end, where I show some live demos that really highlight this tool's capabilities!

youtu.be

Unlock modern web capabilities in your AI coding workflows

YouTube video by Chrome for Developers

51911

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

People say AI sucks at web dev, but why does it suck and what can we do about it? See @philipwalton.com explain why that is and how Modern Web Guidance can help youtu.be/bo3i0FzDUYo

youtu.be

Unlock modern web capabilities in your AI coding workflows

YouTube video by Chrome for Developers

041

Reposted by Rick Viscomi

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

Imagine if your AI coding partner actually understood Baseline. With the new Modern Web Guidance early preview, it can. We’ve packaged 100+ guides that prioritize modern implementations while always providing a fallback for features that aren't widely available yet → goo.gle/49Kt9sG

051

Reposted by Rick Viscomi

Nicholas C. Zakas @humanwhocodes.com · 20/05/2026

Pretty excited about the Modern Web Guidance skills from Google. I had already created my own "semantic HTML" skill, but these are much better. developer.chrome...

0112

Reposted by Rick Viscomi

Symon Baikov @symonbaikov.bsky.social · 20/05/2026

This is the kind of layer I want more of: not just stronger models, but stronger defaults. If coding agents are going to touch production web apps, guardrails around accessibility, security, and performance need to be built into the workflow instead of added as cleanup later.

001

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

We've been COOKING Modern Web Guidance is a skill pack that helps your coding agent write better, faster, more accessible and secure code Get it at goo.gle/mwg We'd love to know what you think!

goo.gle

Modern Web Guidance | Chrome for Developers

Guidance on how to build for the modern web.

0216

Reposted by Rick Viscomi

Sarah Drasner @sarahedo.bsky.social · 19/05/2026

💥 Game changer for Web Development announced at GoogleIO- Modern Web Guidance! It’s expert-vetted skills for web development based on best practices of latest specs and APIs. It ensures your agent/coding harness doesn’t default to older and out of date patterns to build sites.

612016

Reposted by Rick Viscomi

Lea Verou, PhD @lea.verou.me · 13/05/2026

🚨 What are some modern web platform (CSS, HTML, JS) features that you wish your AI agent utilized, but doesn't (or gets them wrong)? I’ll go first: - CSS: lh unit, trig functions, nesting - HTML: inert attribute - JS: Regex lookbehind, regex named groups, RegExp.escape(), Object.groupBy()

3164

Reposted by Rick Viscomi

Patrick Brosset @patrickbrosset.com · 11/05/2026

Do you need the filter() function to be implemented across browsers? (Safari only so far.) It allows you to apply filters to an image, like: background-image: filter(url(myimage.png), blur(5px)); If you do, please 👍 and comment here: ➡️ github.com/web-platform...

github.com

filter() · Issue #509 · web-platform-dx/developer-signals

This GitHub issue is for collecting web developer signals for filter(). The filter() CSS function applies one or more graphic effects to a CSS image, such as a background image. You can use functio...

0194

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 13/04/2026

No more hacky padding or margin workarounds for bibliographies or news layouts → goo.gle/4c7tO9j Use hanging to indent every line except the first, or each-line to ensure indents persist after hard breaks.

0311

Reposted by Rick Viscomi

Barred and Boujee aka Madiba Dennie @audrelawdamercy.blacksky.app · 12/04/2026

I'm old-fashioned. I want your business to have a website. Don't gimme an Instagram page and a phone number. I wanna see what services you offer and then make an appointment on a regular degular website!

621600220

Reposted by Rick Viscomi

Patrick Meenan @patmeenan.com · 13/04/2026

That project AI was helping me with that I was so excited about a while back? It's finally ready enough for some public exposure: I bring you "Waterfall Tools": blog.patrickmeenan.com/2026/04/12/i...

blog.patrickmeenan.com

Introducing Waterfall Tools - Patrick Meenan's Blog

I’ve been wanting to build a 100% client-based waterfall tool for a long time. Something with a much more modern rendering engine and UI than WebPageTest’s s...

4238

Reposted by Rick Viscomi

MDN Web Docs @developer.mozilla.org · 14/03/2026

Generate cryptographically secure UUIDs in the browser 🔐 `crypto.randomUUID()` is built into the Web Crypto API, no npm package needed. Works in all modern browsers and Node.js 14.17+. Learn more 👇 developer.mozilla.org/en-US/docs/...

Code snippet demonstrating the use of `self.crypto.randomUUID()` for generating a UUID in JavaScript, with a sample output shown.

0755

Reposted by Rick Viscomi

Chrome for Developers @developer.chrome.com · 24/02/2026

Stop fighting specificity wars🛡️ The @scope at-rule is Baseline Newly Available and gives you granular control over where your styles apply. Define your root, set your limits, and keep your CSS clean → goo.gle/4aO0vbw

1102