Syntax &#8211; Tasty Web Development Treats

878: You Are Sleeping On Nuxt, Nitro and Vue w/ Daniel Roe Feb 19, 2025

Show notes

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

877: Tailwind 4 Feb 17, 2025

Show notes

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!

876: MIDI & Music in the Browser Feb 12, 2025

Show notes

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!

875: JavaScript Signals Explained Feb 10, 2025

Show notes

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!

874: Fast Apps - Easy Perf Wins Feb 05, 2025

Show notes

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!

873: Standard Schema: The Universal JavaScript Data Interface Feb 03, 2025

Show notes

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

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

Show notes

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

871: Coding Agents Cursor + Windsurf Tips Jan 27, 2025

Show notes

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!