Rick Viscomi

Rick Viscomi

@rviscomi.dev

Chrome DevRel at Google, web developer rviscomi.dev

2.1K followers336 following296 posts

Rick Viscomi reposted

Replying to @developer.chrome.com

Correction: since this video was recorded, MWG has been updated to improve cross-browser compatibility. allow-discrete shouldn't be used in the transition shorthand; set it separately in transition-behavior so older browsers don't drop the whole transition.

Rick Viscomi reposted

Side-by-side test for building dialogs: standard agent vs. agent with Modern Web Guidance 🏁 Both generate similar UIs, but the guided version skips four separate event listeners in favor of `commandfor` and `command` attributes, with less code overall → goo.gle/mwg

Rick Viscomi reposted

I'm really glad we're running this again. It helped us prioritise a lot of work this year. The previous method was 👍 on GitHub issues, which (imo) is too easily gamed, either intentionally or unintentionally.

Firefox for Web Developers@webdevs.firefox.com

What do you want us to work on in 2027? Here's a web app where you can rank the Interop proposals you care about, giving us data we can use to prioritise feature development. interop-rank.fxdx.dev

Also refined in v0.0.193: • hero image preloading in cross-document View Transitions (<link rel="expect"> waits for DOM parse, not image decode) • nonce CSP paired with Trusted Types & __Host- cookies • 50% smaller, 100% offline CLI search bundle • paint-order now Baseline Widely Available

Rick Viscomi reposted

Link Parameters is the thing that gives you the ability to style embedded external SVGs. Something many have wanted to do for a long time! If you want to show your support of this, give these 2 issues a thumbs-up and comment: 💬 github.com/web-platform... 💬 github.com/web-platform...

Modern Web Guidance v0.0.192 is out. With it your coding agent now knows how to: • build SMS one-time-code forms that autofill (WebOTP) • make dark mode toggles that follow the OS • honor the OS text size setting • reduce INP and lazy-load video/audio • feature-detect CSS at-rules with @supports

View full thread

Modern Web Guidance v0.0.192 is out. With it your coding agent now knows how to: • build SMS one-time-code forms that autofill (WebOTP) • make dark mode toggles that follow the OS • honor the OS text size setting • reduce INP and lazy-load video/audio • feature-detect CSS at-rules with @supports

View full thread

And the eval numbers. Across 132 tasks (1,124 assertions), pass rates without MWG → with MWG: Claude Code (Sonnet 5): 54% → 87% Antigravity (Gemini 3.8 Flash): 65% → 91% Codex (GPT-5.6): 59% → 81% Same agents, same tasks. The only difference is the guidance.

Modern Web Guidance v0.0.192 is out. With it your coding agent now knows how to: • build SMS one-time-code forms that autofill (WebOTP) • make dark mode toggles that follow the OS • honor the OS text size setting • reduce INP and lazy-load video/audio • feature-detect CSS at-rules with @supports

The CSS guide also got a big reorg. Instead of one giant guide there are now focused guides for color (incl. relative color syntax), typography, motion, responsive design, visual effects, and browser UI theming. Not new guidance, but smaller guides = better retrieval = better output.

Notable updates to existing guides: • exit animations that finish before a dialog closes • light-dark() for images, not just colors • no autocorrect on username and email fields • passkey display names synced via signalCurrentUserDetails() • WebMCP tools that return errors instead of throwing

Rick Viscomi reposted

Ensure your coding agent creates more accessible, progressively enhanced web forms, with Modern Web Guidance→ goo.gle/mwg Discover how Modern Web Guidance skills help agents handle: ⌨️ Adding the Enter key hint attribute 🏷️ Correct autocomplete values 🎨 Autofill styling as a progressive enhancement

Rick Viscomi reposted

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

Rick Viscomi reposted

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

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.

🚀 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.devDeveloper Signals - Shape what browsers build nextDiscover upcoming web features, upvote priorities, and share your use cases. Every signal is submitted to the WebDX Community Group's developer-signals repo.

Rick Viscomi reposted

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.gleRelease v0.0.187 · GoogleChrome/modern-web-guidanceRelease 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...

Rick Viscomi reposted

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.comNew ad metrics in Chrome User Experience Report  |  Blog  |  Chrome for DevelopersLearn about the new ad metrics now available in the Chrome User Experience Report (CrUX)

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.commodern-web-guidance/skills/modern-web-guidance/guides/forms/ime-safe-enter-submit.md at v0.0.186 · GoogleChrome/modern-web-guidanceKeep your coding agent up to date with the latest web best practices - GoogleChrome/modern-web-guidance
Chrome for Developers@developer.chrome.com

Here's what's new in Modern Web Guidance v0.0.186 → goo.gle/4xcsdWW ⌨️ New guide on IME-safe textarea submission, along with recs for handling KeyboardEvent.isComposing for IME 🔎 Mandatory code verification step for agents in the global MWG skill

Rick Viscomi reposted

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.comModern Web Guidance as a starting point for my own token skills: getting agents to write better CSS | utilitybendHow 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...

Rick Viscomi reposted

Rick Viscomi reposted

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

Rick Viscomi reposted

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