Tailwind 4.0 is here, and Scott and Wes break down all the spicy new features, from CSS-powered configs to first-class container queries. Plus, they dig into Tailwind Oxide, @property magic, and whether it’s finally time to stop asking, “Why not just use normal CSS?”

• 00:00 Welcome to Syntax!
• 00:16 Brought to you by Sentry.io.
• 01:03 Tailwind 4.
  • Tailwind CSS V4.0 Blog.
• 02:53 Wes’ favorite new feature.
• 05:45 @property.
  • CSS Houdini API.
• 07:28 The config is now a CSS file.
• 08:25 Tailwind Oxide.
• 10:48 P3 color space.
• 12:36 Dynamic Utilities + Variants.
• 13:36 Data attributes.
• 15:32 First class container query support.
• 17:03 Starting Style.
• 19:22 When to use inline styles.
• 20:13 Descendant selector.
  • Styling Descendants.
• 20:48 Why not just use “normal” CSS?
• 22:03 No text shadow support.
  • Scott has to use Tailwind.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Wes and Scott talk about the Web Audio and Web MIDI APIs, diving into how they enable powerful music and sound manipulation in the browser. They explore MIDI messaging, synthesizing audio, creative coding with music, and share hands-on projects, tips, and libraries to get started.

• 00:00 Welcome to Syntax!
• 01:17 Brought to you by Sentry.io
• 02:04 Fun audio experiments
  • Bebot
• 05:32 What is MIDI?
  • Web MIDI API
• 14:18 Advanced examples with WEBMIDI.js
  • WEBMIDI.js
• 17:02 Outputting MIDI messages
• 24:40 Exploring the Web Audio API
  • webmidirtc
• 31:20 Audio sampling in the browser
• 37:35 Media Recorder
• 39:21 Fun projects
  • MIDI chord machine
• 42:08 Sick Picks + Shameless Plugs

• Scott: MX Master 3S
• Wes: Microcontoller

• The MOST Starred JS Projects

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

JavaScript is missing a built-in way to make variables reactive—but Signals might change that. Scott and Wes break down what Signals are, how they compare to React state, and how different frameworks like Preact, Solid, Vue, and Qwik are already using them.

• 00:00 Welcome to Syntax!
• 01:49 Brought to you by Sentry.io.
• 02:28 Why JavaScript needs reactive variables.
• 03:16 What exactly are signals?
  • Signals Proposal.
• 04:02 Understanding computed state.
• 04:59 How signals differ from React state.
• 06:12 How different frameworks handle reactivity.
• 07:09 DOM Parts.
  • Pull Request.
• 07:26 HTML Template Instantiation.
  • Template Instantiation.
• 09:10 Comparing signals across frameworks: Preact, Solid.js, Vue, and more.
  • PreactJS Signals.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Is your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time!

• 00:00 Welcome to Syntax!
• 00:58 Brought to you by Sentry.io.
• 02:01 What makes apps slow?
• 02:10 Loading too much.
• 03:26 Slow database work.
• 04:04 Slow server.
• 04:54 Waterfall requests.
• 06:34 How do I know what is slow?
• 06:45 Web vitals.
• 12:50 Streaming.
• 14:05 Network tab.
• 18:18 Performance tab.
• 22:53 Caching.
• 22:59 Client-side caching.
• 23:38 Server-side caching.
  • Valkey.io.
  • Redis.io.
• 25:40 Local data.
• 26:11 Gzip.
• 29:23 CDN.
• 30:57 Images.
  • Cloudinary.
  • Cloudflare Images.
  • Imgix.
  • Vercel Images.
• 31:08 Serving.
• 34:16 Compressing.
• 35:06 Ship fewer images.
• 35:50 Loading JS.
  • Async vs Defer Attributes.
• 37:00 CSS.
• 38:28 Preloading & Prefetch.
• 39:40 Preloading on hover.
• 41:44 Ship less code.
• 43:49 Icons
  • Nucleo App.
• 47:01 Fonts
  • Tolin.ski.
• 51:13 Sick Picks + Shameless Plugs.

• Scott: Skywalkers on Netflix.
• Wes: Oxo Swivel Peeler.

• Scott: Syntax on YouTube.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Wes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries.

• 00:00 Welcome to Syntax!
• 01:24 Brought to you by Sentry.io
• 02:44 What is Standard Schema and how does it work?
  • Standard Schema Spec
  • Fabian Hiller
  • Valibot
  • David Blass
  • ArkType
  • Colin McDonnell
  • Zod
• 06:00 Benefits of Standard Schema
• 08:54 Implementation and usage
• 11:25 Is this primarily for end users or library authors?

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Wes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech.

• 00:00 Welcome to Syntax!
• 01:04 Best container element for a grid of products?
• 04:50 TypeScript null checks
• 09:44 Adapt to AI or get left behind
  • Syntax Episode 870
• 13:13 Why did 3D never take off?
  • three.js
  • React Three Fiber
  • Rep Fitness Rack Builder
  • Maxime Heckel
  • GitHub Universe
  • The element
• 18:53 Podcast audio and video in one feed?
  • Who Smarted?
• 21:06 Brought to you buy Sentry.io
• 22:30 Best and worst browsers for web dev?
  • Firefox
  • Edge
  • Chrome
  • Arc
  • Safari
• 27:39 Why use a lock file for managing dependency versions
  • Don’t gitignore your lock files!
• 30:34 Should you build your own sync engine?
  • Scott’s Naive Sync Example
• 34:21 Best practices when starting a new project from scratch
  • Habit Path
• 38:33 How to deploy a SvelteKit app on something other than Vercel or Netlify
  • Coolify Crash Course
• 42:54 The reality of online opinions in tech
• 48:10 Spending $120k on an app idea
• 54:12 Sick Picks + Shameless Plugs

• Scott: My Mind
• Wes: Metal Detector

• Scott: Syntax on YouTube

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 explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project.

• 00:00 Welcome to Syntax!
• 04:12 What are AI Agents?
  • Cursor Features, Windsurf Features.
• 07:25 Brought to you by Sentry.io.
• 07:50 Chat Mode.
• 08:11 Composer Mode.
• 08:55 Agent Mode.
• 10:03 Inline Chat Mode.
• 11:02 JavaScript Set Methods Demo.
  • Wes’ Example on X.
• 16:10 Fire Dispatch Data.
• 20:01 Rules Files.
  • Cursor Directory.
• 22:37 Use screenshots.
• 23:36 Refactoring to separate files.
• 23:53 Use it to experiment.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Wes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development.

• 00:00 Welcome to Syntax!
• 00:50 The origins of Windsurf and Codeium
  • Windsurf
  • Codeium
  • Vs Code
  • Cursor
• 03:14 Rethinking IDE UX
• 05:45 Will Microsoft eventually implement these AI features in VS Code?
• 09:27 The "agentic" editor concept
• 17:58 The future of software development with AI
• 24:37 AI in large codebases
• 28:22 Brought to you by Sentry.io
• 28:46 How does AI stay current with frequent language/library updates?
• 33:07 Behind Windsurf's fresh design
• 35:23 Challenges with forking VS Code
• 38:47 AI and future innovations
• 43:04 How Windsurf approaches AI experimentation
• 45:11 Pricing and user segments
• 48:38 Will Windsurf ever run in the browser?
• 50:58 Sick Pick + Shameless Plugs

• Kevin: Ricoh GR IIIx
• Varun: Di2 Shifter

• Windsurf

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 explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno.

• 00:00 Welcome to Syntax!
• 00:41 Brought to you by Sentry.io.
• 01:29 Running TypeScript in Node.
• 01:45 Experimental Type Stripping.
• 03:17 TypeScript refresher.
• 04:05 TypeScript can be compiled and/or Type Stripped.
• 05:09 Current Node implementation is only type stripping.
• 05:40 Limitations of no compiling.
  • 05:57 Enums.
  • 08:30 Other issues.
  • 08:35 Parameter properties.
• 09:20 Experimental transform types.
• 10:01 Importing types with type keyword.
• 11:17 No need for sourcemaps.
• 11:42 No dependencies.
  • 13:08 Other tools.
  • 13:25 tsx.
  • 14:28 ts-node.
  • 14:44 JSDoc.
  • 16:30 Deno and Bun.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Wes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks.

• 00:00 Welcome to Syntax!
• 00:27 Brought to you by Sentry.io
• 01:16 The state of JavaScript Twitter fantasy football
• 02:27 Syntax features
  • The State of JavaScript survey
• 05:27 Logical assignment
• 07:49 Strings
• 08:18 Arrays
• 14:16 Sets
  • 2025 New Years resolution: use maps and sets more and objects / arrays less.
• 16:10 Browser APIs
• 22:50 Library tiers list
• 27:21 Upgrading from M1 Mac
  • Chris Coyier - M4
• 30:08 Front-end frameworks
• 32:18 The top front-end frameworks used at work
• 33:49 What is the highest paying framework?
• 35:01 Meta frameworks
• 36:32 Meta frameworks pain points
• 42:33 Testing tools
• 43:58 Build tools
• 44:41 Most used libraries
• 46:33 Back-end frameworks
• 48:34 JavaScript runtimes
• 50:35 Serverless runtimes
• 51:25 Other languages people are using
• 52:49 AI tools
• 53:37 The State of JS Awards
• 57:18 Sick Picks + Shameless Plugs

• Wes: Headted Vest
• Scott: Super Mario Party Jamboree

• Syntax YouTube Channel

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads