Syntax - Tasty Web Development Treats

Scott and Wes talk about WebMCP with Sarah Drasner and Dominic Farolino from the Chrome team, which is the new W3C standard that lets your site hand real tools to an agent. They cover the security model, headless and multi-tab agents, and how to wire it into an app you’ve already shipped.

Show Notes

00:00 Intro

00:46 Welcome to Syntax!

01:18 What Is WebMCP and How Is It Different from MCP?

02:32 WebMCP for UI: Enabling Agents to Use Websites Directly

06:05 Brought to you by Sentry!

06:43 Is This Just a Chrome Thing? W3C Standards and Open Development

11:49 WebMCP Security: Annotations, Hints, and Multi-Layered Defense

15:26 Best Use Cases: E-Commerce, Video Editing, and Complex UIs

16:27 The WebMCP Challenge: 5,000 Entries and Creative Applications

19:20 Headless WebMCP: Running Agents in the Background

22:43 Multi-Tab Scenarios: Using WebMCP Across Multiple Sites

24:23 WebMCP and Security: Safe Origin Policy and Agent Containment

28:09 Performance and Core Web Vitals for the Agentic Web

38:11 The Future of Web Monetization: Ads, Commerce, and Agent Payments

Universal Commerce Protocol

x402

40:53 Building an Agent Platform: Extensions, Harnesses, and Browser Vendor Roles

45:19 Support from Anthropic, Safari, Firefox, and Other Players

49:11 Getting Involved: Origin Trial, Community Feedback, and the W3C Spec

Ora

52:45 Sick Picks + Shameless Plugs

Sick Picks

Scott:

Wes:

Dominic: Steven Pinker: The Sense of Style

Sarah: Vintage Story

Shameless Plugs

Scott:

Wes:

Dominic: X account

Sarah: 25% discount with code Community25 at AGNTCon

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

The messy breakup is official; as of November 12, OpenAI's models are getting pulled from Cursor, and we're digging into who's really to blame (and why Wes called it). Plus pnpm 12 goes full Rust, Mitchell Hashimoto drops Superlogical, ~700 AI agents attack Hugging Face, and Zod 4.5's compiled schemas get up to 9x faster.

Show Notes

00:00 Welcome to Syntax!

00:33 pnpm 12 Rust Re-Write

02:45 Zod 4.5 brings Schema Compilation
Zod 4.5 launch post

05:22 Brought to you by Sentry!

07:14 Cursor OpenAI Break Up
Michael Truell’s post

15:35 vGPU - WebGPU library for agents
TypeGPU

Main differences between vgpu and TypeGPU

22:32 Omarchy Security Issues and Linux Chat

Omarchy

Security issue in Omarchy

Close three paths from an unprivileged session to root commit

CachyOS

36:38 Scott Bought an M5 Ultra Mac Studio

44:45 Superlogical is a new terminal multiplexer

48:31 Zurich JS

48:55 Katamari Object Library

52:05 ThreeUI - Three.js library

55:36 Hugging Face Hack Analyzed / Updates

METR & Redwood Research investigation

Brief independent investigation of agents’ behavior

About the Hugging Face attack

Postmortem of the HuggingFace hack

01:00:46 llms.txt used to pwn devs

01:03:56 Running Isolated Code Poll

01:05:47 OpenShot 4.0 - OSS Video Editor
Blick editor

01:09:06 Lake America

01:11:24 Ox Alpha is GLM 5.3

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Meta’s StyleX compiles thousands of styles into a few reusable class names at build time—zero runtime, fully type-safe. Scott and Wes break down why it’s suddenly everywhere, and why it might be the best CSS tool for AI agents.

Show Notes

00:00 Welcome to Syntax!

Syntax Ep 650

San Francisco Syntax Meetup

02:18 What Is StyleX and How Does It Work?

04:27 The Difference Between StyleX and Other CSS Scoping Methods

06:03 What People Are Saying: StyleX Is Superior for AI Agents

Jared Palmer

Adam Hutchinson

Aiden Bai

Syntax Ep 658

11:30 Type Safety and Design System Constraints

12:46 No Runtime Dependency: All Computed at Build Time

13:49 Brought to you by Sentry.io

14:13 Reusable Styles: Import, Export, and Auto-Import

17:53 Composability and Overriding Styles With JavaScript Objects

18:24 It Sucks to Write by Hand

19:25 Modern CSS Properties and Waiting for Implementation

20:58 Nested CSS and Nested Selectors Are Tricky

22:24 Alternatives: Panda CSS and CSS Modules

Syntax Ep 807

24:41 The Auto-Complete Experience: Why StyleX Shines for Agents

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Grokbot actually earns its keep, Cursor takes a swing at GitHub with Origin, and Omarchy Quattro ships pre-wired for nine coding agents. Plus: the GitHub outage post-mortem, a compromised Rust crate, native app vibe-coding with Dactyl, and CAD skills for your AI via nurb.dev

Show Notes

00:00 Welcome to Syntax!

00:26 Brought to you by Sentry.io

00:37 Grok’s New Agentic App: Grokbot

12:51 GitHub’s Major Outage and Postmortem

16:42 Cursor’s Origin: A GitHub Competitor

22:59 Omarchy: The Linux Distro for Nerds

29:21 CachyOS: Another Arch-Based Alternative

31:12 The $10 Million Omarchy Foundation

34:54 Dactyl: Native iOS and Android Development in the Browser

44:19 Nurb: AI-Powered 3D CAD Design

49:36 Security Stories: Supply Chain Attacks and Model Cheating

49:43 Rust Supply Chain Attack

51:34 Every Model Cheats: AI Benchmark Findings

53:13 Felony Bench: Ranking AI Models by Crimes Committed

54:19 Casio’s Smart Dumb Watch

58:43 Everything I Own Is Owned: Reverse Engineering USB Devices with AI

01:08:05 The Mystery 0x Alpha Model

01:13:48 Dactyl Returns Something

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes run through eight new CSS, JS, and HTML features landing in browsers; including the relative alpha() color function, the progress() function for calculating values between units, Promise.allKeyed(), and native camera and microphone elements. They also get into an upgraded attr(), shrink-to-fit containers, and text-box-trim for finally killing that annoying extra space above your text.

Show Notes

00:00 Welcome to Syntax!

Wes’s Demo Site

00:22 CSS Alpha() Relative Color Function

Google Groups

02:25 Brought to you by Sentry.io

02:48 CSS CSS Progress() Function: Calculate Values Between Units

05:09 Promise.allKeyed(): Object-Based Promise Resolution

06:55 Camera and Microphone HTML Elements

09:24 Advanced CSS Attr() Function: Props for CSS

11:25 CSS Sibling-Index() and Sibling-Count() Functions

13:56 CSS Shrink-to-Fit Container

15:36 CSS Text-Box-Trim and Text-Box-Edge

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads