Syntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

TechnologyTech NewsEnglish
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe
19 February 2025
878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe

Wes and Scott talk with Daniel Roe about Nuxt and Nitro, demystifying the UnJS ecosystem, serverless deployments, open-source sustainability, and the future of full-stack web development.

Show Notes
    00:00 Welcome to Syntax! 02:52 Daniel’s work with Nitro
      Nitro
    06:01 What’s the connection between Nitro and Nuxt?
      Nuxt
    09:23 What makes something an UnJS package?
      UnJS
    12:55 Nitro’s built-in features 18:21 What would Daniel use to build an app today?
      Cloudflare Vercel Netlify
    28:01 Brought to you by Sentry.io 28:36 Nuxt and SST
      SST
    32:25 Nuxt vs. Next.js in 2025
      Next.js
    40:06 Keeping docs up to date 44:46 Who is behind the fantastic design of the Nuxt website?
      Anthony Fu Rmoon Vite
    47:27 Why is Vue awesome?
      Vue alien-signals
    52:47 How do you make money in full-time open source? 55:32 Sick Picks + Shameless Plugs
Sick Picks
    Daniel: DeskPad
Shameless Plugs
    Daniel: React to Nuxt
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

877: Tailwind 4
17 February 2025
877: Tailwind 4

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?”

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

876: MIDI & Music in the Browser
12 February 2025
876: MIDI & Music in the Browser

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.

Show Notes
    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
Sick Picks
    Scott: MX Master 3S Wes: Microcontoller
Shameless Plugs
    The MOST Starred JS Projects
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

875: JavaScript Signals Explained
10 February 2025
875: JavaScript Signals Explained

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.

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

874: Fast Apps - Easy Perf Wins
05 February 2025
874: Fast Apps - Easy Perf Wins

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!

Show Notes
    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.
Sick Picks
    Scott: Skywalkers on Netflix. Wes: Oxo Swivel Peeler.
Shameless Plugs
    Scott: Syntax on YouTube.
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

873: Standard Schema: The Universal JavaScript Data Interface
03 February 2025
873: Standard Schema: The Universal JavaScript Data Interface

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.

Show Notes
    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?
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

872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths
29 January 2025
872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths

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.

Show Notes
    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
Sick Picks
    Scott: My Mind Wes: Metal Detector
Shameless Plugs
    Scott: Syntax on YouTube
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

871: Coding Agents Cursor + Windsurf Tips
27 January 2025
871: Coding Agents Cursor + Windsurf Tips

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.

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

870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding
22 January 2025
870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding

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.

Show Notes
    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
Sick Picks
    Kevin: Ricoh GR IIIx Varun: Di2 Shifter
Shameless Plugs
    Windsurf
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

869: Node + TypeScript in 2025
20 January 2025
869: Node + TypeScript in 2025

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.

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