Skip to main content
WB

Wes Bos

5episodes
1podcast

Featured On 1 Podcast

All Appearances

5 episodes

AI Summary

→ WHAT IT COVERS Scott Tolinski and Wes Bos break down the full landscape of AI coding tools in 2026, covering models, agents, sub-agents, skills, slash commands, hooks, plugins, and MCP servers — clarifying what each component does, where it lives, and when to actually use it. → KEY INSIGHTS - **Model selection matters significantly:** Codex 5.3 performs better for precise JavaScript logic while Opus 4.6 suits exploratory and creative work. Switching models based on task type produces measurably better results than using one model for everything. Anthropic's new fast mode runs 2.5x faster but costs 6x more, making it impractical for most workflows. - **Context bloat degrades output quality:** Stuffing agents.md with thousands of lines slows every session and muddies results. The file should contain only essential project-wide facts — language, framework, coding conventions — nothing more. Skills solve this by loading context conditionally, only when the AI determines a specific capability is needed for the current task. - **Agent vs. skill decision rule:** Use a skill for one-off tasks where the AI executes and finishes. Use an agent when the workflow requires back-and-forth iteration, auditing, or multi-step refinement. Combining both — an agent that calls a skill — can work but risks over-engineering, adding compute cost and latency without proportional output improvement. - **Slash commands offer underrated precision control:** Unlike skills that the AI invokes autonomously, slash commands function like callable functions with arguments, giving developers direct control over reusable prompts. Practical uses include scaffolding new routes, running linters, and triggering tests. They can be mapped to hardware shortcuts like a Stream Deck for faster invocation. - **Tool-model independence is a strategic priority:** Locking into Claude Code means locking into Anthropic's pricing and model choices. Tools like OpenCode, Py, and Charm Crush allow model switching between Codex, Opus, Grok, and others without changing workflows. As open-source models improve, razor-thin model margins will make tool flexibility the primary competitive differentiator. → NOTABLE MOMENT Wes ran the "superpowers" GitHub skill pack — a full TDD, Git worktree, sub-agent workflow — to build a simple two-page cottage information website. The process ran for three and a half hours and cost $26 in API fees, producing a result achievable in minutes with a basic prompt. 💼 SPONSORS [{"name": "Sentry", "url": "https://sentry.io/syntax"}] 🏷️ AI Coding Tools, LLM Model Selection, Coding Agents, MCP Servers, Developer Workflow

AI Summary

→ WHAT IT COVERS Scott Tolinski and Wes Bos built a custom CSS coding battle platform from scratch in two weeks for their March Madness-style tournament featuring 14 top CSS engineers. They detail the technical stack using SvelteKit, ZeroSync for real-time synchronization, local file system access, and a custom pixel-diffing algorithm to objectively score CSS recreations. → KEY INSIGHTS - **Real-time sync architecture:** ZeroSync provides instant data synchronization by storing data locally in IndexedDB, sending only patch messages for updates via WebSocket to a sync server, then replicating to Postgres. This architecture eliminates polling and makes all changes appear instantly across all connected clients without full data transfers, achieving meteor-like reactivity. - **Local development workflow:** The platform uses the File System Access API to let competitors code in their own editors with familiar shortcuts and autocomplete rather than browser text boxes. Changes save directly from VS Code to the local file system, triggering mutations that sync in real-time, making the development experience as fast as using Vite locally. - **Custom diffing algorithm:** After testing six to seven approaches including vectorization and SSIM, they built a multi-threshold algorithm using SnapDOM to convert HTML to canvas images. The system punches out background colors, weights opacity differences less heavily, and uses color-coded diff visualization where red indicates significant pixel differences requiring attention versus minor green and blue variations. - **Security sandboxing:** Iframes with sandbox attributes combined with Content Security Policy headers prevent malicious code execution while allowing Tailwind CSS CDN. The CSP restricts inline JavaScript and limits script loading to one specific Tailwind URL, solving the problem of competitors potentially injecting scripts that would execute on other participants' machines during battles. - **Auth and permissions refactor:** ZeroSync 2.5 moved from handling auth in the sync server schema to standard API routes in the main application. This change allows developers to use existing authentication middleware and pass user context to ZeroSync, making it easier to incrementally adopt the sync engine in existing applications with established auth systems. → NOTABLE MOMENT The team discovered a critical authorization bug hours before launch when the sync engine randomly disconnected users. After combing through logs and Sentry reports, CJ identified that the JWT token expired after fifteen minutes while the cookie lasted longer, causing mid-battle disconnections. They fixed it by extending the JWT expiration rather than rebuilding the sync client instance. 💼 SPONSORS [{"name": "Sentry", "url": "https://sentry.io/syntax"}] 🏷️ Real-time Sync, CSS Battles, ZeroSync, Local-first Architecture, WebSocket Communication

AI Summary

→ WHAT IT COVERS Scott and Wes explore building personal software using AI agents like Claude bot and Opus 4.5. They discuss rapid prototyping hyper-specific applications, running local development environments through Tailscale networks, implementing text-to-speech with Kokoro, and creating custom tools for meal tracking, fitness logging, and home automation that would traditionally require months of development time. → KEY INSIGHTS - **Tailscale Development Network:** Configure Tailscale VPN across all devices to access development servers securely without exposing ports to the internet. Run Vite dev servers on a Mac mini, serve via HTTPS with automatic SSL certificates through Tailscale domains, and access from any device on the network. This eliminates CloudFlare tunnels for personal projects while maintaining security and enabling mobile testing. - **JSON File Databases:** Use simple JSON files as databases for single-user personal applications instead of traditional database systems. This approach provides instant saves on every keystroke, eliminates user authentication complexity, and makes data trivially accessible to LLMs for processing. The simplicity dramatically reduces development friction when building tools that only you will use on your local network. - **Local Text-to-Speech with Kokoro:** Run Kokoro text-to-speech locally through MLX Audio on Mac silicon to generate high-quality voice output without third-party services. The system operates as a local server, generates MP3 files, and delivers quality comparable to commercial services. Scott uses this for custom guided meditations addressing his concussion recovery, layering ambient noise with FFmpeg for professional results. - **Home Assistant AI Integration:** Connect Claude bot to Home Assistant to generate automation ideas based on existing devices. The AI analyzes available sensors and suggests practical automations like monitoring office CO2 levels four times daily during work hours. It can debug failing automations, modify configurations directly, and create presence-detection routines that activate lights before arrival home. - **Personal Assistant Architecture:** Build a personal assistant using Claude bot running on a BUN process with connections to Discord, WhatsApp, or Telegram for natural language interaction. Connect extensions for calendar, GitHub, home automation, and custom skills. Use cron jobs for scheduled tasks like daily to-do list summaries. Plan to migrate from Anthropic's Claude to local LLMs on beefy hardware for sensitive data processing. → NOTABLE MOMENT Scott discovered his office air quality was dangerously poor when his AI assistant analyzed Home Assistant sensor data and alerted him that CO2 levels were four times higher than recommended. The automated monitoring revealed his office lacked proper ventilation, prompting him to investigate why his mini-split system provided no fresh air circulation throughout the workday. 💼 SPONSORS [{"name": "Sentry", "url": "https://sentry.io/syntax"}] 🏷️ AI Agents, Personal Software, Tailscale, Home Automation, Local LLMs

AI Summary

→ WHAT IT COVERS Wes Bos and Scott Tolinski review their 2025 web development predictions, evaluating accuracy on CSS features, AI tools, React ecosystem changes, bundlers, and browser APIs that shipped or failed to materialize this year. → KEY INSIGHTS - **Temporal API delivery:** The date replacement API shipped in Firefox May 2025, entered Chrome beta December 2025 with stable release January 2026, and landed in Safari behind a flag after four years of anticipation and polyfill usage. - **AI coding tools maturation:** Cursor's tab completion remains superior to VS Code despite improvements, with Opus 4.5 model producing reliable Svelte 5 code consistently. Tools improved more than raw models, though framework choice still matters for AI assistance quality. - **CSS relative color syntax:** Reached baseline 2024 status with full browser support, enabling color system creation that responds to light and dark modes with transparency. Underutilized despite being the year's most valuable CSS addition for automated contrast systems. - **React security vulnerability:** React server components experienced a critical remote code execution vulnerability affecting Next.js, Remix, and Parcel-based sites through simple POST requests, potentially souring developer adoption despite the team's rapid response and fixes. → NOTABLE MOMENT Scott discovered he accidentally booked a 6AM flight using Perplexity's Comet browser AI agent, which auto-filled his friend's early morning flight details all the way to checkout without his full awareness of the departure time. 💼 SPONSORS [{"name": "Sentry", "url": "https://sentry.io/syntax"}] 🏷️ Web Development Predictions, CSS Features, AI Coding Tools, React Server Components

AI Summary

→ WHAT IT COVERS SvelteKit's new remote functions feature provides a complete RPC solution for data loading and mutations, combining type-safe server-client communication with progressive enhancement, automatic validation, and seamless form handling without traditional API endpoints. → KEY INSIGHTS - **Remote Function Architecture:** Files named `.remote.ts` run exclusively on server side and can be imported directly into client components, eliminating API routes while maintaining full TypeScript type safety through standard schema validation across the entire stack. - **Query Batching Strategy:** Use `query.batch` to consolidate multiple data requests from loops into single network calls and database queries. Example: fetching weather for ten cities sends one batched request instead of ten individual calls, reducing both network overhead and render updates. - **Form Function Implementation:** Spread remote form functions onto HTML forms to get progressive enhancement, automatic client-side validation, error messages, and field state management without writing controlled inputs or state updaters. Forms work with or without JavaScript enabled. - **Data Refresh Optimization:** Use `.set()` method instead of `.refresh()` when mutations return updated data, avoiding unnecessary database queries by directly inserting new data into existing queries. Combine with optimistic UI patterns for instant perceived performance improvements. → NOTABLE MOMENT Scott rewrote the entire Syntax website data layer, switching from MySQL to Postgres, replacing the ORM with Drizzle, and converting all data loading to remote functions. He compared the process to emptying kitchen cabinets and reorganizing everything methodically. 💼 SPONSORS [{"name": "Sentry", "url": "https://sentry.io/syntax"}] 🏷️ SvelteKit, RPC, Form Validation, Data Loading

Explore More

Never miss Wes Bos's insights

Subscribe to get AI-powered summaries of Wes Bos's podcast appearances delivered to your inbox weekly.

Start Free Today

No credit card required • Free tier available