Grilled Cheese

ExploreLog inSign up

Philip Walton

@philipwalton.com

221 Following1.5k Followers

DevRel lead @ Google working on Chrome and the Web. I occasionally blog at: https://philipwalton.com

PostsRepliesMedia
@philipwalton.comOct 8, 2026, 6:23 PM

If the search finds a matching guide, you can be pretty confident that a human expert has reviewed this and the result is in fact the best way to do X using the modern web platform (complete with fallbacks).

@philipwalton.comOct 8, 2026, 6:23 PM

FWIW, Modern Web Guidance can *also* be used as a learning tool, and we're planning to promote that use case more. For example, if someone wants to know what the "best" way is to build a navigation drawer, they could run: npx modern-web-guidance@latest search "navigation drawer"

@rviscomi.devOct 7, 2026, 2:05 AMReposted by @philipwalton.com

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

@rviscomi.devSep 28, 2026, 11:49 PMReposted by @philipwalton.com

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.
@benschwarz.bsky.socialSep 16, 2026, 5:48 AMReposted by @philipwalton.com

Google started shipping ad metrics in CrUX overnight, so I’ve added them to Calibre's free Core Web Vitals tool.

First look at the Independent: ads take up 20% of the screen, 7.25s of CPU and 5.1MB of data per page. 88% of their readers are on phones.

calibreapp.com/tools/core-w...

Calibre's Core Web Vitals report for independent.co.uk showing new advertising metrics from Chrome User Experience Report. Total network usage by ads is 5.10 MB and total CPU usage by ads is 7.25 seconds at the 75th percentile, with the CPU figure trending upward over the last three months.
@philipwalton.comSep 15, 2026, 9:26 PM

Even granting that Chrome has shipped some features before they should have, that doesn't change the reality that literally millions of sites deploy features that are only in 1 browser. I'm arguing that it's better if those sites have access to correct types for the features they choose to use.

@philipwalton.comSep 15, 2026, 7:50 PM

I'm not sure that's true. Regardless, the question is fine and my response is useful to anyone else following along.

@tunetheweb.comSep 15, 2026, 4:29 PMReposted by @philipwalton.com

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)
2
@philipwalton.comSep 15, 2026, 6:50 PM

I think so. I see the `SpeechRecognition` type in the list. You can see the full list of added types here: github.com/philipwalton...

@philipwalton.comSep 15, 2026, 6:44 PM

Friction can be a good thing. But I'd argue the biggest threat to the web is not compat bugs; it's competition from other platforms, where businesses are choosing those platforms over the web (e.g. "It works better in the app" banners). You don't want to put too much friction in the way of progress

@philipwalton.comSep 15, 2026, 6:35 PM

The mischaracterization I'm referring to was "without consulting standards bodies first" We can have a healthy debate about whether Chrome decides to ship some features too early, but it is definitely not the case that Chrome ships features without consulting standards bodies.

@philipwalton.comSep 15, 2026, 5:51 PM

This is not an accurate characterization of how Chrome ships new web features.

@philipwalton.comSep 15, 2026, 5:31 PM

Your requiestIdleCallback example actually demonstrates this point because right now requestIdleCallback *IS* in TypeScript but it's still not available in Safari.

@philipwalton.comSep 15, 2026, 5:31 PM

TypeScript is not the best tool for guarding against accidentally shipping a feature you shouldn't. That's a job for a linter (connected to Baseline or Browserslist data) and, ultimately, for your test suite to catch. Also, as I say in the post, the 2-engine rule won't protect you from that anyway.

@philipwalton.comSep 15, 2026, 6:13 AM

So that's what I did!

I built a package that generates complete DOM and WebWorker libs with all available web features, which you can use as drop-in replacements in your TypeScript projects.

You can read more about it here:
philipwalton.com/articles/mod...

@philipwalton.comSep 15, 2026, 6:13 AM

The good news: TS's type-generation pipeline is open source, and the datasets it consumes already include the full set of web platform features—even those only in one browser. So if you remove the 2-engine restriction, you can use the same generator to create types for all web features.

@philipwalton.comSep 15, 2026, 6:13 AM

TS has a policy to exclude web features unless they're supported in at least 2 browser engines. That means TS can be missing types for perfectly valid APIs—including APIs that are safe to use today as a progressive enhancement.

@philipwalton.comSep 15, 2026, 6:13 AM

If you've ever tried using a new web API in TypeScript, you've probably hit this problem: An API exists. It works in your browser. But TypeScript has no types for it. The reason is a limitation that TS unfortunately applies to its built-in libs. BUT, I've created a relatively simple fix 👇

3
Terms of UsePrivacy PolicyCommunity StandardsHelpGet the app

Grilled Cheese is a product of Village Compute

Version devBuilt at: 2026-10-12 04:31:30 EDT