Syntax - Tasty Web Development Treats

986: Does Code Quality Matter Anymore?

Wed, 11 Mar 2026 11:00:00 -0000

In this potluck episode, Wes and Scott answer your questions about popover navigation patterns, the Vibrate API on iOS, whether code quality still matters in the AI era, Wes’s evolving Obsidian second-brain setup, where to start with modern full-stack JavaScript, and more!

Show Notes

00:00 Welcome to Syntax!
01:02 Using display none with popover and hamburger navigation
03:37 Vercel on iOS and experimenting with the Vibrate API
05:47 Does code quality still matter in the AI age?
11:08 Wes’ second brain update and Obsidian workflow
- QMD
19:57 Brought to you by Sentry.io
20:21 Supporting older browsers and missing out on modern web features
23:32 iPad browsing quirks and dealing with outdated Safari
28:26 What to do when you encounter a badly built or inaccessible website
33:37 Is the Effect TypeScript library worth the learning curve?
37:04 Where to start with modern full-stack JavaScript
43:39 Are column grid frameworks still relevant with modern CSS?
- Graffiti
49:54 Sick Picks + Shameless Plugs

Sick Picks

Scott: AVerMedia Video Capture Card
Wes: Power Bar Extension Cord

Shameless Plugs

Phases Podcast

Hit us up on Socials!

985: Stop putting secrets in .env

Mon, 09 Mar 2026 11:00:00 -0000

Scott and Wes are joined by Phil Miller and Theo Ephraim to talk about Varlock, a new approach to environment variables that adds schemas, validation, and security to the humble .env file. They dig into the risks of traditional env workflows, how schema-driven configs improve DX, and how tools like Varlock help manage secrets safely across frameworks, CI, and AI-powered workflows.

Show Notes

00:00 Welcome to Syntax!
03:15 The Risks of .env Files
04:58 Introducing Varlock: A Unified Solution
06:56 Schema-Driven Environment Variables
11:47 Integrating with Various Frameworks
14:08 Brought to you by Sentry.io
14:32 Cross-Language Compatibility
17:50 Best Practices for Environment Variables
21:11 Security Features of Varlock
25:02 AI Integration and Environment Variables
29:12 Introduction to Varlock and GitHub Actions
32:45 Secrets Management and Best Practices
36:09 The Future of Varlock and Open Source
38:36 Sick Picks + Shameless Plugs

984: How to Make a DOM Library Render Anything w/ Paolo Ricciuti

Wed, 04 Mar 2026 12:00:00 -0000

Wes and Scott talk with Paolo Ricciuti about Svelte custom renderers and how Svelte actually talks to the DOM. They dig into compiler internals, CSS handling, native bridges, and the realities of maintaining ambitious open source tooling.

Show Notes

00:00 Welcome to Syntax!
- March MadCSS
01:44 Paolo’s role at Mainmatter and his work on Svelte custom renderers
02:52 Why Paolo chose Svelte
- Why I choose Svelte
- Shift Dev 2019: “Rethinking Reactivity”
05:16 From Svelte ambassador to working on the project
07:45 How custom renderers change what Svelte can target
10:10 How Svelte uses the DOM and why that makes custom renderers tricky
20:32 What Lynx provides and how it differs from a web view
24:18 Brought to you by Sentry.io
35:56 Using Svelte with CSS outside the browser
39:09 The timeline and current state of the Lynx app
44:51 Sick Picks + Shameless Plugs

Sick Picks

Paolo: Opencode

Shameless Plugs

Paolo: Svelte Custom Renderers | TCMP

Hit us up on Socials!

983: Why I Chose Electron Over Native (And I’d Do It Again)

Mon, 02 Mar 2026 12:00:00 -0000

Wes and Scott talk about building v_framer, Scott’s custom multi-source video recording app, and why Electron beat Tauri and native APIs for the job. They dig into MKV vs WebM, crash-proof recording, licensing with Stripe and Keygen, auto-updates, and the real challenges of shipping a polished desktop app.

Show Notes

00:00 Welcome to Syntax!
- March MadCSS
02:28 Why screen recording apps are so frustrating
07:14 The requirements behind Scott’s app, v_framer
09:47 Tauri, WKWebView, and blurry screen recording headaches
13:00 Why switching to Electron was a game changer
14:02 Electrobun and the hybrid desktop experiment
16:29 Browser-based capture vs native APIs
18:50 Brought to you by Sentry.io
22:32 Notarization, certificates, and shipping a Mac app
24:52 One-time purchases, trials, and selling desktop software
26:37 Self-hosting Keygen for license keys
30:27 A scrappy Google Sheets-powered waitlist
31:56 Keyboard shortcuts, FPS locks, and app customization
34:50 CI/CD and painless auto-updates with Electron

Hit us up on Socials!

982: Bots Are Ruining the Internet

Wed, 25 Feb 2026 12:00:00 -0000

Wes and Scott talk about the latest dev news: Node enabling Temporal by default, OpenAI acquiring OpenClaw, TypeScript 6, new TanStack and Deno releases, the explosion of AI agent platforms, and more.

Courtney Tolinski's Podcast

Phases: A Parenting Podcast https://phases.fm/

Show Notes

00:00 Welcome to Syntax!
01:11 Brought to you by Sentry.io
02:40 Node.js enables Temporal by default
- Enable Temporal by default
04:08 OpenClaw acquired by OpenAI
- OpenClaw, OpenAI and the future
09:36 Bots are taking over the internet
- Wes’ tweet
15:30 TypeScript 6 Beta
- Announcing TypeScript 6.0 Beta
17:00 TanStack Hotkeys for type-safe shortcuts
- TanStack Hotkeys
18:05 Components will kill webpages
- Components Will Kill Pages
19:39 Is Google Translate just an LLM?
- Viridian’s tweet
23:29 Shaders.com
26:49 Voxtral Mini Realtime
- Voxtral Realtime
- Demo
29:51 Deno launches Sandboxes
- Introducing Deno Sandbox
32:39 Oz by Warp.dev
38:10 Augment Code Intent
40:10 Sick Picks + Shameless Plugs

Sick Picks

Scott: Samsung Remote
Wes: Ice

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

981: Browsers Are Finally Catching Up (Interop 2026)

Mon, 23 Feb 2026 12:00:00 -0000

Scott and Wes unpack Interop 2026 and the browser features finally aligning across engines, from container style queries and anchor positioning to scroll-driven animations and view transitions. They break down what it all means for day-to-day devs and how close we really are to a fully interoperable web.

Show Notes

00:00 Welcome to Syntax!
00:21 What is Interop?
- Interop GitHub.
02:44 Container Style Queries.
09:32 Brought to you by Sentry.io.
09:57 Anchor Positioning.
12:01 CSS attr().
15:40 CSS Contrast-color.
19:10 CSS Zoom.
21:36 CSS Custom Highlight API.
24:02 Dialogs and Popovers.
25:44 Fetch Uploads and Ranges.
27:48 IndexedDB.
28:25 JSPI for Wasm.
29:05 Media Pseudo-Classes.
30:00 Navigation API.
31:53 Scoped Custom Element Registries.
32:40 Scroll-Driven Animations.
33:30 Scroll Snap.
36:50 CSS Shape().
38:25 View Transitions.
41:32 Web Compat.
42:29 WebRTC Improvements.
43:44 WebTransport.
45:44 Investigation Efforts.
- 46:25 JPEG XL
- 48:46 Mobile Testing.
- 49:20 WebVTT.

Hit us up on Socials!

980: AI Coding Explained

Wed, 18 Feb 2026 12:00:00 -0000

Wes and Scott talk about the state of AI coding in 2026—from editors and models to agents, skills, slash commands, MCPs, and more. They unpack what these things actually do, how they overlap, and how to use them effectively without overcomplicating your setup.

Show Notes

00:00 Welcome to Syntax!
01:39 The tools: editors, terminals, GUIs
05:27 Wes’ and Scott’s current AI setups
13:17 Picking the right model
18:58 How exactly do agents work?
22:32 Subagents and parallel workflows
24:29 Brought to you by Sentry.io
24:54 What goes in agents.md (and what doesn’t)
26:47 Skills vs agents
- Skills
- Superpowers
34:03 Slash commands as reusable prompts
36:02 Hooks and keeping your code from going off the rails
38:00 Plugins and bundling your setup
39:24 What MCP is and why it’s powerful
40:54 Cloud agents and running jobs remotely
43:47 Choosing the right AI tool
47:41 Sick Picks + Shameless Plugs

Sick Picks

Scott: ULTRALOQ Bolt Fingerprint WiFi Smart Lock
Wes: St. Denis Medical

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

979: WebMCP: New Standard to Expose Your Apps to AI

Mon, 16 Feb 2026 12:00:00 -0000

Scott and Wes unpack WebMCP, a new standard that lets AI interact with websites through structured tools instead of slow, bot-style clicking. They demo it, debate imperative vs declarative APIs, and share their hottest take: this might be the web’s real AI moment.

Show Notes

00:00 Welcome to Syntax!
00:16 Introduction to WebMCP
01:07 Understanding WebMCP Functionality.
03:06 Interacting with AI through WebMCP.
06:49 WebMCP browser integration.
08:25 Brought to you by Sentry.io.
08:49 Benefits of WebMCP.
11:51 Token efficiency.
13:02 My biggest questions.
14:13 My take on this tech.

Hit us up on Socials!

978: Should A New Coder Use AI?

Wed, 11 Feb 2026 12:00:00 -0000

Wes and Scott answer your questions about AI agents, learning to code with AI, pagination patterns, skilling up from outdated tech stacks, balancing side projects with family life, real-world hacking attempts, and more!

Show Notes

00:00 Welcome to Syntax!
01:39 Are devs really running multiple AI agents at once?
- Scott’s Tweet
09:41 Brought to you by Sentry.io
12:45 What is pagination and why do websites use it?
18:17 Should beginners use AI while learning to code?
30:24 The real-world skills CS degrees don’t teach you
35:59 Someone tried to hack Syntax
38:12 How Wes and Scott became co-hosts
42:00 Moving from junior to mid-level when your skills are outdated
45:42 How do you balance time for side projects, life, and family
52:45 Building a ChatGPT-style RAG search for your resume
56:15 Why Chad Whitacre videos were on the Syntax YouTube channel
- Chad’s YouTube Channel
58:44 Sick Picks + Shameless Plugs

Sick Picks

Scott: Trmnl
Wes: RYOBI Soldering Iron

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

977: We built a CSS Challenge platform

Mon, 09 Feb 2026 12:00:00 -0000

Scott and Wes break down how they built SynHax, the real-time CSS Battle app powering the upcoming Mad CSS tournament. From SvelteKit and Zero to diffing algorithms, sync conflicts, and a last-minute hackweek glow-up, this one’s a deep dive into shipping ambitious web apps fast.

Show Notes

00:00 Welcome to Syntax!
00:50 March Mad CSS Tournament.
03:19 Brought to you by Sentry.io.
03:59 What the heck is a CSS Battle?
05:34 The tech stack.
- 06:30 Svelte Kit.
- 06:44 Zero Sync.
  - Zero Docs
  - Zero Svelte.
- 07:32 Drizzle.
- 07:58 Supabase.
- 08:23 Graffiti.
- 10:45 Sync Server.
- 12:10 Cloudflare Workers.
- 12:23 Local File System.
13:26 How Zero Works.
- 13:48 Zero Sync Client.
- 15:39 API server.
19:34 Dealing with states and conflicts.
24:25 The Hackweek Project.
25:29 The Diffing Algorithm.
35:22 The bugs.

Hit us up on Socials!

976: Pi - The AI Harness That Powers OpenClaw W/ Armin Ronacher & Mario Zechner

Wed, 04 Feb 2026 12:00:00 -0000

Wes and Scott talk with Armin Ronacher and Mario Zechner about PI, a minimalist agent harness powering tools like OpenClaw. They unpack why Bash is “all you need,” the risks of agents, workflow adaptability, and where AI coding agents are actually headed.

Show Notes

00:00 Welcome to Syntax!
03:28 What is Pi, and why does it matter?
- OpenClaw
05:54 What do we actually mean by “agents”?
11:04 Prompt injection: how LLMs get tricked
14:19 Is Claude Cowork actually secure?
22:01 How Armin and Mario use agents day to day
26:37 Brought to you by Sentry.io
27:25 Memory and search: teaching agents to remember
33:04 Do coding agents even need memory?
34:36 “Bash is all you need”
37:21 Adding power: how agents learn new tricks
47:02 Tools and models Armin and Mario are using right now
54:15 Sick picks + shameless plugs

Sick Picks

Mario: Cards for Ukraine
Armin: Pro-Ject Audio Turntable

Shameless Plugs

Armin:
- Thorsten Ball Newsletter
- Simon Willison

Hit us up on Socials!

975: What’s Missing From the Web Platform?

Mon, 02 Feb 2026 12:00:00 -0000

Scott and Wes run through their wishlist for the web platform, digging into the UI primitives, DOM APIs, and browser features they wish existed (or didn’t suck). From better form controls and drag-and-drop to native reactivity, CSS ideas, and future-facing APIs, it’s a big-picture chat on what the web could be.

Show Notes

00:00 Welcome to Syntax!
- Wes Tweet
00:39 Exploring What’s Missing from the Web Platform
02:26 Enhancing DOM Primitives for Better User Experience
03:59 Multi-select + Combobox.
- Open-UI
04:49 Date Picker.
- Thibault Denis Tweet
07:18 Tabs.
08:01 Image + File Upload.
09:08 Toggles.
10:23 Native Drag and Drop that doesn’t suck.
12:03 Syntax wishlist.
12:06 Type Annotations.
15:07 Pipe Operator.
16:33 APIs We Wish to See on the Web
18:31 Brought to you by Sentry.io
19:51 Identity.
21:33 getElementByText()
24:09 Native Reactive DOM. Templating in JavaScript.
24:48 Sync Protocol.
25:52 Virtualization that doesn’t suck.
27:40 Put, Patch, and Delete on forms.
- Ollie Williams Tweet
- SnorklTV Tweet
28:55 Text metrics: get bounding box of individual characters.
29:42 Lower Level Connections.
29:50 Bluetooth API.
30:47 Sockets.
31:29 NFC + RFID.
34:34 Things we want in CSS.
34:40 Specify transition speed.
35:24 CSS Strict Mode.
36:25 Safari moving to Chromium.
36:37 The Need for Diverse Browser Engines
37:48 AI Access.
44:49 Other APIs
46:59 Qwen TTS
48:07 Sick Picks + Shameless Plugs

Sick Picks

Scott: Monarch
Wes: Slonik Headlamp

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

974: Clawdbot (Moltbot), Agents and the Age of Personal Software

Wed, 28 Jan 2026 12:00:00 -0000

Wes and Scott talk about building hyper-specific personal software with AI. They explore personal agents, home automation, JSON-as-a-database, and how LLMs unlock fast, custom apps that reduce friction and replace bloated SaaS.

Show Notes

00:00 Welcome to Syntax!
01:53 What is personal software (and why it matters)
04:49 Using AI agents to build hyper-specific apps for yourself
- Clawdbot
- ClawdHub
13:43 Supercharging your dev workflow with Tailscale
19:06 Privacy when working with LLMs
- MLX-Audio
21:39 Brought to you by Sentry.io
22:21 Real-world personal app ideas
39:14 Sick Picks + Shameless Plugs

Sick Picks

Scott: FTPManager
Wes: Roku Streaming Stick

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

973: The Web’s Next Form: MCP UI (with Kent C. Dodds)

Mon, 26 Jan 2026 12:00:00 -0000

Scott and Wes sit down with Kent C. Dodds to break down MCP, context engineering, and what it really takes to build effective AI-powered tools. They dig into practical examples, UI patterns, performance tradeoffs, and whether the future of the web lives in chat or the browser.

Show Notes

00:00 Welcome to Syntax!
00:44 Introduction to Kent C. Dodds
02:44 What is MCP?
03:28 Context Engineering in AI
04:49 Practical Examples of MCP
06:33 Challenges with Context Bloat
08:08 Brought to you by Sentry.io
09:37 Why not give AI API access directly?
12:28 How is an MCP different from Skills
14:58 MCP optimizations and efficiency levers
16:24 MCP UI and Its Importance
19:18 Where are we at today with MCP
24:06 What is the development flow for building MCP servers?
27:17 Building out an MCP UI.
29:29 Returning HTML, when to render.
36:17 Calling tools from your UI
37:25 What is Goose?
38:42 Are browsers cooked? Is everything via chat?
43:25 Remix3
47:21 Sick Picks & Shameless Plugs

Sick Picks

Kent: OneWheel

Shameless Plugs

Kent: http://EpicAI.pro,http://EpicWeb.dev,http://EpicReact.dev

Hit us up on Socials!

972: These Things Make Your App Feel Like Crap on Mobile

Wed, 21 Jan 2026 12:00:00 -0000

Wes and Scott talk about why mobile web apps often feel “janky” compared to native—and how to fix it. They cover input zooming, accidental horizontal scroll, pointer/user-select quirks, frame rate consistency, full-page refreshes, and more.

Show Notes

00:00 Welcome to Syntax!
01:11 Brought to you by Sentry.io
02:57 Zooming inputs
06:11 Horizontal scrolling
08:49 Proper use of pointer-events: none, and user-select: none
11:27 Allowing zoom on everything
16:37 Cleaning up the “jank”
19:48 Full page refresh
24:05 Slow loading times
29:50 Cumulative layout shift
32:47 Address bars and viewport units
- Dynamic Viewport Units
35:34 Full-width scroll traps

Hit us up on Socials!

971: Stackoverflow and Firefox are Dead?

Mon, 19 Jan 2026 12:00:00 -0000

Is Stack Overflow actually dying, and what does that mean in an AI-driven dev world? Scott and Wes break down the latest web dev news, from Firefox’s AI crossroads and Apple’s browser engine changes to new tools, docs, and spicy browser updates.

Show Notes

00:00 Welcome to Syntax!
02:36 Stack Overflow is Officially Dead
05:40 AI’s Impact on Software Development
07:56 Brought to you by Sentry.io
08:20 Micro QuickJS for Embedded Systems
13:03 Open Workers: A Cloudflare Alternative
20:09 React Aria has new Docs
24:12 Firefox and the AI Dilemma
- The Mozilla Announcement
31:11 Apple’s Browser Engine Changes
- Using alternative browser engines in Japan.
36:12 Fractured JSON for Better Readability
37:45 New Chrome Permissions Dialogue
- Chrome Network Access
41:15 Sick Picks & Shameless Plugs

Sick Picks

Scott: TRMNL E-Ink Display
Wes: ACEBOTT

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

970: Why Did Anthropic Buy Bun?

Wed, 14 Jan 2026 12:00:00 -0000

Wes and Scott answer your questions about whether Git GUIs beat the terminal, balancing accessibility with experimental web projects, blocking malicious traffic, smart home setups, why Anthropic bought Bun, navigating tricky team dynamics, and more!

Show Notes

00:00 Welcome to Syntax!
00:51 Why did Anthropic buy Bun?
07:33 Should you use Git GUIs or the terminal?
- lazygit
12:54 How to make better coding videos
20:31 How do you handle a difficult dev teammate?
24:16 Brought to you by Sentry.io
24:41 Creative and experimental code vs accessible code
31:51 Smart home setups we actually use
35:37 How do you block bad bots and ISPs?
- Bad ASN list
38:02 What is SAP UI and why is it everywhere?
- SAP UI5 Demo Kit
41:28 Sick Picks + Shameless Plugs

Sick Picks

Scott: Inside Archaeology
Wes: ProfessorBoots

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

969: This guy is nuts (TypeScript Doom)

Mon, 12 Jan 2026 12:00:00 -0000

Scott and Wes sit down with Dimitri Mitropoulos to explore the wild edges of TypeScript—from running Doom in the type system to building tools like Typeslayer. They dig into Turing-complete types, performance limits, and what the future might hold for TypeScript and programming languages as a whole.

Show Notes

00:00 Welcome to Syntax!
00:27 Dimitri Mitropoulos Introduction
01:29 What is Doom in TypeScript?
03:10 TypeScript Types and Turing Completeness
04:06 Project Overview and Challenges
04:57 ASCII Art and Visual Representation
06:50 Performance Issues with TypeScript
09:27 Brought to you by Sentry.io
09:51 Typeslayer Tool Introduction
16:19 Building in Tauri
20:54 Challenges around packaging
24:03 Future of TypeScript and AI
27:40 Is the Go-based compiler significantly faster?
- TSperf
30:23 Should there be something to follow Typescript?
36:27 Staying up to date with WASM.
37:08 SquiggleConf Overview
38:26 Hosting a conference
40:45 What are your thoughts on Zig?
45:07 Vibe coding as an end goal
50:01 Sick Picks & Shameless Plugs

Sick Picks

Dimitri: pullfrog

Shameless Plugs

Dimitri: Michigan TypeScript on YouTube

Hit us up on Socials!

968: Habits and Changes We Want to Make in 2026

Wed, 07 Jan 2026 12:00:00 -0000

Wes and Scott talk about setting realistic goals for the new year, building habits through small, sustainable changes, creating systems that actually stick, and why incremental progress beats big resolutions every time.

Show Notes

00:00 Welcome to Syntax!
00:26 Wes: Stand more
06:55 Wes: Learn to wake up early
10:04 Scott: Embrace daily TODOs
- Tweek
14:18 Brought to you by Sentry.io
14:43 Wes: Better email management
19:14 Scott: Become more minimal
22:13 Wes: Get faster at typing
26:55 Scott: Listen to more self-help books
30:18 Scott: Track long-term habits
31:36 Scott (and Wes): Ship more things

Hit us up on Socials!

967: What’s Going to Happen in Web Dev During 2026

Wed, 31 Dec 2025 12:00:00 -0000

Wes and Scott talk about their bold predictions for web development in 2026, from WebGPU-powered design and modern CSS breakthroughs to JavaScript standards, AI-driven tooling, security risks, the future of frameworks, workflows, and more!

Show Notes

00:00 Welcome to Syntax!
00:49 WebGPU and 3D experiences will finally take off
- Lando Norris
01:30 Web design will make a comeback
- Raycast
- shaders.com
04:03 Light mode returns (yes, really)
07:06 Modern CSS standards are about to have a huge year
- CSS Wrapped
- Graffiti
13:15 Will the Temporal API finally ship everywhere in 2026?
14:18 The rise of the standard stack
16:18 Are we headed toward standardized RPC?
19:41 What’s next (and what’s not) for React
21:07 Why we’ll see more security failures in web dev
22:35 SvelteKit 3 lands in 2026
22:53 Where developer tooling is headed next
- Oxc
- Biome
26:44 More big acquisitions
- Anthropic
- Bun
28:02 2026: the year of durable compute
30:57 Frameworks will matter less as AI gets better
33:34 End-to-end AI workflows become the norm
36:04 Brought to you by Sentry.io
37:21 Personalized software for everyday people
39:11 MCP and MCP UI will pop
42:24 Developer skills will fall off
46:20 Crappy software will continue

Hit us up on Socials!

966: A Look Back at Web Dev in 2025

Wed, 24 Dec 2025 12:00:00 -0000

Wes and Scott revisit their 2025 web development predictions, grading hits and misses across AI, browsers, frameworks, CSS, and tooling. From Temporal and AI coding agents to React, Vite, and vanilla CSS, they reflect on what actually changed, what stalled, and what it all means heading into 2026.

Show Notes

00:00 Welcome to Syntax!
- 866: 2025 Web Development Predictions
01:26 Temporal API will ship in the browser
03:33 On-device AI becomes common
06:14 WebGPU unlocks fast local machine learning
- TypeGPU
07:10 Models will plateau
10:32 Is there an actual use case for video and photo gen AI?
13:27 Text to UI tools get really good
16:25 Framework choice will matter less
18:53 Web components in Standard Stack, Web Awesome takes off
21:37 AI browsers and Copilot Workspace-style tools will become normal
22:56 AI browsera will become inevitable, OpenAI will launch a browser
27:51 Relative color will feel fully “safe to use”
29:02 Vanilla CSS will make a comeback
30:33 Brought to you by Sentry.io
30:58 CSS mixins and functions spec solidifies
- CSS Custom Functions and Mixins Module Level 1
33:25 Container style queries will ship everywhere
- CSS if statements
35:40 Vertical centering jokes will stubbornly persist
36:20 VS Code will reach feature parity with Cursor
38:47 More VS Code forks will appear
39:46 React Compiler drops Babel
40:34 React server components will pop
42:17 Remix re-emerges as something new
43:17 React Native will have its time
44:21 TanStack Start and Tanstack will pop
45:46 SvelteKit gets more granular data loading
46:06 Local first apps will take off
46:43 Bun keeps doing “wild but loved” non-standard features, Bun will launch a platform-as-a-service
48:22 Vite stays king
51:07 Laravel will release a CMS
52:44 Sick Picks + Shameless Plugs

Sick Picks

Scott: DARKBEAM Flashlight UV Black Light
Wes: WOOZOO Fan

Hit us up on Socials!

965: Baseline 2025 Features web gained in 2025

Mon, 22 Dec 2025 12:00:00 -0000

Scott and Wes break down the biggest web platform features that reached Baseline in 2025, separating the genuinely useful APIs from the niche and forgettable ones. From same-document view transitions and the Popover API to Promise.try, content-visibility, and modern CSS goodies, they share what’s actually ready to use today.

Show Notes

00:00 Welcome to Syntax!
01:37 24 new web APIs that reached baseline in 2025.
01:49 Same-document view transitions for single-page applications.
05:28 abs()
08:22 Brought to you by Sentry.io.
09:20 JSON Module Scripts.
10:10 Popover API.
13:07 Base64 to UInt8Array.
- Better Binary Batter Mixing
16:11 @starting-style
- Scott’s A CSS Only Accordion with
- Scott’s Mobile Nav
17:39 allow-discrete
21:31 Promise.try
22:51 content-visibility

Hit us up on Socials!

964: Markdown as a CMS is a bad idea

Wed, 17 Dec 2025 12:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about keyboard shortcuts, choosing frameworks in the age of AI, markdown vs CMSs, backup strategies, moving countries for work, staying relevant as a developer, and more!

Show Notes

00:00 Welcome to Syntax!
02:28 Do keyboard shortcuts actually improve productivity?
- Hyperkey
08:41 What is Error Lens, and why use it?
- Ep 956: Should I Keep Using WordPress?
11:44 How Scott is using a Svelte 5 service worker
14:52 Does tech stack choice still matter with AI coding?
- Ep 951: A first look at Remix 3
20:15 What stack should you choose for a greenfield SaaS?
22:38 What’s the right stack for a band website?
28:24 Is moving countries for work worth the tradeoff?
34:59 Brought to you by Sentry.io
36:16 How should you manage commits with AI tools?
40:50 Is programming still a good career in the AI era?
47:03 How should you back up large files and media?
- Ep 949: Web Dev HORROR Stories + Spooky Trivia! (Spooky Stories Pt. 1)
- Ep 962: The Home Server / Synology Show
53:29 What backup setup works for small teams and clients?
55:14 How should you store sensitive files safely?
58:07 Sick Picks + Shameless Plugs

Sick Picks

Scott: Philips LED Ultra Definition
Wes: LEGO Builder App

Hit us up on Socials!

963: Hardware Hacking with Matt Brown

Mon, 15 Dec 2025 12:00:00 -0000

Scott and Wes chat with YouTuber and security consultant Matt Brown about breaking into IoT devices, extracting firmware, and decoding the hidden tech inside everyday gadgets. Matt shares his methods, the legal boundaries, and the wild stories behind his most interesting hacks.

Show Notes

00:00 Welcome to Syntax!
01:21 Curiosity in Hacking
03:28 Understanding IoT Devices
07:15 Brought to you by Sentry.io.
07:40 Linux vs Microcontrollers
10:11 UART Console Access
13:56 Firmware Extraction Techniques
14:19 Guessing Usernames and Passwords
19:22 Extracting Password Hashes
23:15 Legal Considerations in Hacking
30:06 Where does the inspiration come from?
31:20 Using Logic Analyzers
37:45 CAN Protocol in Automotive
45:42 Influence of Lewis Rossman
54:05 Sick Picks & Shameless Plugs

Sick Picks

Matt: Key Person of Influence

Shameless Plugs

Matt:Matt Brown on YouTube, Brown Fine Security

Hit us up on Socials!

962: The Home Server / Synology Show

Wed, 10 Dec 2025 12:00:00 -0000

Wes and Scott talk about their evolving home-server setups—Synology rigs, Mac minis, Docker vs. VMs, media servers, backups, Cloudflare Tunnels, and the real-world pros and cons of running your own hardware.

Show Notes

00:00 Welcome to Syntax!
01:35 Why use a home server?
07:29 Apps for home servers
16:23 Home server hardware
18:27 Brought to you by Sentry.io
20:45 VMs vs containers and choosing the right software
25:53 How to expose services to the internet safely
30:38 Securing access to your server

Hit us up on Socials!

961: Keeping Up With The Fast and Furious Web

Mon, 08 Dec 2025 12:00:00 -0000

Scott and CJ go live from JS Nation NYC to talk about how developers can actually stay current without drowning in the constant churn of new tools and trends. They break down how to see through the fluff, focus on why tech exists before adopting it, and build a healthier, curiosity-driven approach to learning in 2025 and beyond.

Show Notes

00:00 Welcome to Syntax!
00:39 Scott delivering a non-technical talk at JS Nation.
03:24 Lamenting the frequency of change as developers.
03:46 Understanding why things exist before deciding to learn them.
05:11 Learning styles are a myth?
07:41 First dates and psychology exams.
10:39 Discovering is step one, playing is step two.
13:32 Learn with a project that you actually want.
18:16 Brought to you by Sentry.io.
18:34 Cutting through the noise of new tech.
21:40 Using AI as a learning tool
25:12 Sick Picks & Shameless Plugs.

Sick Picks

Scott: dbrand Ghost Case 2.0
CJ: analog watches

Hit us up on Socials!

960: Reacting to the Weird + Creative Corners of the Web

Wed, 03 Dec 2025 12:00:00 -0000

Wes and Scott talk about the weird, creative corners of the web—from live-coded music with Strudel and wild Hydra visuals to shader wizardry, projection-mapping art, fully synced Christmas lights, and more.

Show Notes

Sick Picks

Scott: NeueCast
Wes:
- 6 Port 2.5G Unmanaged Ethernet Switch
- UGREEN USB to Ethernet Adapter 2.5Gb

Hit us up on Socials!

959: TypeScript on the GPU with TypeGPU creator Iwo Plaza

Mon, 01 Dec 2025 12:00:00 -0000

Scott and CJ sit down live at JSNation NYC with Iwo Plaza, creator of TypeGPU, to dig into how WebGPU is unlocking a new wave of graphics and compute power on the web. They chat about shader authoring in TypeScript, the future of GPU-powered AI in the browser, and what it takes to build a killer developer-friendly graphics library.

Show Notes

00:00 Welcome to Syntax!
00:32 What is TypeGPU? High-level overview and why it exists
01:20 WebGPU vs WebGL – the new era of GPU access on the web
01:47 Why shader languages are hard + making them accessible
02:24 Iwo’s background in C++, OpenGL, and discovering JS
03:06 Sharing graphics work on the web vs native platforms
03:29 WebGPU frustrations that inspired TypeGPU
04:17 Making GPU–CPU data exchange easier with Zod-like schemas
05:01 Writing shaders in JavaScript + the unified type system
05:38 How the “use_gpu” directive works under the hood
06:05 Building a compiler that turns TypeScript into shader code
07:00 Type inference, primitives, structs, and TypeScript magic
08:21 Leveraging existing tooling via Unplugin + bundler integration
09:15 How TypeGPU extracts ASTs and generates TinyEST metadata
10:10 Runtime shader generation vs build-time macros
11:07 How the AST is traversed + maintaining transparency in output
11:43 Example projects like Jelly Shader and community reception
12:05 Brought to you by Sentry.io
12:30 Does TypeGPU replace 3JS? How it fits the existing ecosystem
13:20 Low-level control vs high-level abstractions
14:04 Upcoming Three.js integration – plugging TypeGPU into materials compute shaders
15:34 Making GPU development more approachable
16:26 Docs, examples, and the philosophy behind TypeGPU documentation
17:03 Building features by building examples first
18:13 Using examples as a test suite + how docs shape API design
19:00 Docs as a forcing function for intuitive APIs
20:21 GPU for AI – browser inference and future abstractions
21:11 How AI examples inform new libraries (noise, inference, etc.)
21:57 Keeping the core package small and flexible
22:44 Building “TypeGPU AI”-style extensions without bloating the core
23:07 The cost of AI examples and building everything from scratch
23:41 Standard library design and future of the ecosystem
24:04 Closing thoughts from Iwo – OSS, GPU renaissance, and encouragement
24:34 Sick Picks & Shameless Plugs

Sick Picks

Iwo: Perogies

Shameless Plugs

Iwo: Syntax Podcast

Hit us up on Socials!

958: 2025 Holiday Gift Guide

Wed, 26 Nov 2025 12:00:00 -0000

The Syntax team brings us their annual Holiday Gift Guide! They’ve curated the best gadgets, tools, food, and even kitchen essentials for the dev in your life — plus a few treats anyone would love to unwrap.

Show Notes

00:00 Welcome to Syntax
00:54 Our Favorite Things
01:03 Wes - Bambu Lab 3d Printers
01:50 Wes - Leatherman Arc Multi-tool
03:07 Kaitlin - Ruffwear Roamer Bungee Dog Leash
04:49 Niki - Magic Mirror Home Screen
06:42 Randy - Everything Presence Light
08:22 Randy - Henson Safety Razor
10:24 CJ - Viltrox 28mm Pancake Lens
11:17 Scott - 3D Printers
11:37 Scott - Anker 4-Port Charger
12:45 Randy - DJI Mic Mini
13:37 Randy - Velcro Cable Ties
14:22 Kaitlin - Prequel Skin Care
16:18 Kaitlin - Coros Pace 3 Running Watch
17:30 Niki - Steam Machine
18:02 Niki - VR Headset
18:18 Under $30
18:25 Wes - ESP32
18:45 Wes - WS2811 LED Strips
19:44 CJ - Precision Screw Driver Set
20:42 Scott - Magsafe Popsocket
21:23 Wes - Digital Calipers
22:45 CJ - Microfiber Device Cloth
23:33 Scott - Candle Warmer
25:30 Wes - Matte Screen Protectors
25:38 Desk Items
25:46 Wes - MX Master 4 Logitech Mouse
26:40 Scott - Elgato Stream Deck
29:12 CJ - Magsafe Phone Stand
30:13 Office Items
30:21 Wes - Heated Vest
31:33 CJ - USB Hand Warmers
32:23 Tech / Storage
32:32 Scott - MoCa Ethernet Adapter
33:41 CJ - 4TB Drive and 1TB SD Card
35:06 Wes - BenQ Programming Monitors
37:28 Food
37:37 Scott - Biena Edamame
38:08 Wes - Heartbeat Hot Sauce
39:11 Wes - Seoul Sisters Kimchi Mix
39:32 CJ - Clif Protein Bars
39:55 CJ - Z Energy Strips
40:51 Kitchen Gadgets
41:00 Wes - Carbon Steel Frying Pan
42:35 CJ - Air Fryer
44:45 Scott - Zojirushi Water Boiler
45:43 Scott - Teak Cutting Board
47:36 Clothes
48:26 Wes - Hooke / Naked and Famous
49:24 Scott - Octobre Clothing
50:31 Scott - Sezane Clothing
52:11 CJ - Blank Mineral Wash Shirts
53:10 Kids
53:17 Wes - Yoto Player
54:47 Scott - Tonie Box
56:06 CJ - Large Hedgehog Plush
56:43 CJ - Tortilla Blanket
57:04 Smarthome
57:08 Scott - Lutron Caseta
57:38 Wes - Meross and Refoss
01:00:41 Scott - Apollo Automation
01:01:29 CJ - Kauf Smart Home
01:02:52 CJ - Plant LED Bulb
01:04:03 Scott - Roland Electronic Drum Set
01:04:58 Thanks!

Hit us up on Socials!

957: CSS: Advanced and Obscure

Mon, 24 Nov 2025 12:00:00 -0000

Scott and Wes face off in a CSS-themed round of STUMP’d, quizzing each other on shape functions, scroll snap types, obscure functions, and long-forgotten spec history. From ray() to cross-fade() to print-color quirks, this episode is packed with rapid-fire frontend trivia guaranteed to sharpen your CSS brain.

Show Notes

00:00 Welcome to Syntax!
00:54 Which of the following are valid CSS Shape Functions?
02:03 CSS Selectors 4 specification demo.
03:20 How many functions are there in CSS?
04:22 Brought to you by Sentry.io.
04:47 Explain the 3 CSS Scroll Snap types.
06:38 What does the xywh() do?
09:15 What about ray()?
11:25 What do CSS Namespaces do?
14:37 What year was CSS paint() bug tracker introduced in Firefox?
17:34 What does print-color-adjust do?
20:26 What is cross-fade()?
23:54 Name 3 reasons you might use CSS @property.
27:36 List all 10 CSS Filter Functions.
32:41 Name 5 font properties.

Hit us up on Socials!

956: Should I Keep Using WordPress?

Wed, 19 Nov 2025 12:00:00 -0000

In this potluck episode, Wes and Scott answer your questions about paid vs. free SSL, the state of frontend jobs, headless WordPress trade-offs, organizing TypeScript types, and more!

Show Notes

00:00 Welcome to Syntax!
00:51 Recapping the GitHub Meetup
05:14 Is there any real benefit to picking a paid SSL over Let's Encrypt?
08:03 Is the pure frontend role disappearing?
11:17 Is the gravy train over for software devs?
20:48 How Scott automates versioning with GitHub Actions
25:16 Brought to you by Sentry.io
25:41 Thoughts on VS Code alternatives and the rise of Zed
33:01 Should I switch to headless WordPress or continue rolling my own PHP templates?
37:33 How do you organize TypeScript types in a frontend project?
40:55 How do I continue to level up as a developer?
45:36 Stay in a comfortable job or embrace new challenges?

Hit us up on Socials!

955: SvelteKit has solved data loading

Mon, 17 Nov 2025 12:00:00 -0000

Scott and Wes break down SvelteKit’s new remote functions and why they finally solve the long-standing pain of page-level data in Svelte. They cover queries, forms, batching, caching, and all the clever RPC ergonomics that make Svelte’s approach feel surprisingly powerful and refreshingly simple.

Show Notes

00:00 Welcome to Syntax!
00:45 Lots of RPC library options.
01:22 Svelte’s Page-Level Data Always Felt Off
02:12 Progress on the new Syntax site.
03:47 Remote functions explained.
- Svelte Remote Functions Docs.
04:15 Make a .remote.ts file.
05:07 Querying data.
07:52 Brought to you by Sentry.io.
08:17 Svelte’s leg up on React.
10:13 Query Arguments.
11:39 The benefits of Standard Schema.
13:13 Refreshing Queries.
13:29 query.batch
15:18 Form function.
21:13 Enhance.
22:31 Refresh.
23:16 Command query.
24:25 Prerender.
25:22 Caching.
27:44 My Local Cache Service Worker.
31:23 Sick Picks + Shameless Plugs.

Sick Picks

Scott: CoffeeSock ColdBrew Filter, Chemex Filter.
Wes: Bosch Dishwasher.

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

954: Fullstack TanStack! The Scoop with Tanner Linsley

Wed, 12 Nov 2025 12:00:00 -0000

Live from GitHub Universe, Wes and Scott talk with Tanner Linsley about the latest from TanStack, including TanStack DB’s local-first syncing, new routing ideas, and fresh perspectives on server components and “magic” directives. They explore performance, incremental adoption, and what’s next for the rapidly growing TanStack ecosystem — plus a few spicy takes along the way.

Show Notes

00:00 Welcome to Syntax!
01:12 What’s new in the TanStack universe?
01:57 Introducing TanStack DB: local-first sync engine
05:17 How syncing and transactions actually work in TanStack DB
07:03 Next.js 16 Workflows: durable functions and the directive debate
08:46 Brought to you by Sentry.io
09:41 Tanner’s case for fewer “magic directives”
12:36 TanStack’s approach to React Server Components
14:30 The momentum of leading an ecosystem
15:38 Top-secret TanStack project in the works

Hit us up on Socials!

953: Why v0 creator left Vercel to fix GitHub (GOAT Jared Palmer)

Mon, 10 Nov 2025 12:00:00 -0000

Scott and Wes sit down with Jared Palmer of GitHub (formerly of Vercel) to unpack all the biggest announcements from GitHub Universe 2025. They dive into the future of developer workflows with agents, how GitHub is rethinking project interfaces, and where there’s still room to improve the dev experience.

Show Notes

00:00 Welcome to Syntax!
- GitHub Universe Recap.
00:21 Who is Jared Palmer?
01:19 The developer workflow with agents.
03:33 Opening ongoing tasks in VS Code.
06:08 The benefit of agnostic agents.
07:04 GitHub’s biggest opportunities for improvement.
09:38 What’s your interface of choice for a new project?

Hit us up on Socials!

952: VS Code, GitHub & Copilot - UNIVERSE 25 Announcements + Reactions

Wed, 05 Nov 2025 12:00:00 -0000

Live from GitHub Universe, Wes, Scott, and CJ talk about the latest AI and developer tools from GitHub, including Agent HQ, Copilot integrations, and the new mission control for agents. They also share stories from the Syntax meetup, hack their conference badges, and debate AI’s role in coding.

Show Notes

00:00 Welcome to Syntax!
03:39 This year’s GitHub Universe badges were next-level
07:35 Keynote recap: GitHub Agents, Copilot, and Mission Control
18:21 Brought to you by Sentry.io
20:33 Plan Mode and the future of collaborative coding
23:40 Cursor’s new trick: firing off agents straight from Slack
25:32 Copilot Metrics Dashboard and agent analytics
27:53 Effortless MCP integration and custom agent workflows
31:35 Wrapping up GitHub Universe 2025

Hit us up on Socials!

951: A first look at Remix 3

Mon, 03 Nov 2025 12:00:00 -0000

Scott and Wes dive into Remix 3, exploring how it embraces native web standards like Events, Signals, and Streams to become a truly full-stack framework. They unpack what “LLM-ready,” thin APIs, and a standards-based approach mean for the future of web development.

Show Notes

00:00 Welcome to Syntax!
03:21 Uses the platform - native Events, Signals, Streams, Fetch
04:16 Remix 3, Fully Fullstack.
04:57 LLM‑ready + thin APIs
05:53 Brought to you by Sentry.io.
06:18 My previous predictions.
07:44 The value of ‘Standards Based’.
09:13 Component model - JSX/TSX; state = variables; call this.render()
11:56 Adding reactivity to Remix.
15:15 Event‑based architecture - custom events, EventTarget, interactions
20:52 Context & type‑safe access.
22:46 Composing interaction logic within events.
24:25 Signals - AbortSignal to cancel async ops
25:21 Benefits of standards - bring your own tools/libraries
- Michael Asnong X Post.
26:42 CSS - built‑in CSS prop; Svelte‑like scoping
28:34 Server - Web Request/Response, Web Streams across runtimes
31:23 Frames - async URL‑addressable components with fallbacks
33:07 Tooling - ESM; use Vite or esbuild
34:47 Routing - code‑based named routes
35:57 Questions/Concerns - manual rendering vs reactivity
38:47 URL Pattern API - modern, fast routing foundations
41:33 Sick Picks + Shameless Plugs.

Sick Picks

Scott: MoCA 2.5 Network Adapter
Wes: Bosch Dishwasher

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

950: Even SCARIER Web Dev Nightmares (Spooky Stories Pt. 2)

Wed, 29 Oct 2025 11:00:00 -0000

In part 2 of this year’s Spooky Stories special, Wes and Scott discuss the most chilling developer horror stories—from six-month-old unprocessed donations and runaway dog-food orders to vanishing databases, DNS disasters, code that literally tore apart a mall’s ventilation system, and more!

Show Notes

00:00 Welcome to Syntax!
01:33 A Bug Beyond the Grave
04:16 NHL SPOOKS
06:36 White Space Ghost Faced
10:54 Over Order Nightmare
16:50 Alaskian
21:16 Brought to you by Sentry.io
22:50 Rackspace’d Out
25:02 Fired
26:52 WordPress Woes
33:21 What does the P in VPS stand for?
34:18 Beyond the Grave II
35:39 The Hottest Hot Fix
37:54 Bad Redirect
40:03 Instead of Making Money, You Spend Money!
41:26 Certbot Certain Death
43:55 It’s Always DNS
50:02 Cache Ruins Everything Around Me
51:52 Fiber F-Up
56:18 More Spooky Stories
- Don’t Drink and Deploy 😬 | Spooky Dev Stories Pt. 1
- Submit your Spooky Stories

Hit us up on Socials!

949: Web Dev HORROR Stories + Spooky Trivia! (Spooky Stories Pt. 1)

Mon, 27 Oct 2025 11:00:00 -0000

It’s that time of year again, Scott (as Dracula) and Wes (as a big bad shark) return for their annual Spooky Stories special! They’re joined by a mysterious guest for a round of creepy coding trivia and chilling true tales of web dev gone wrong; dropped databases, haunted passwords, and more. Beware: these are real developer horror stories.

Show Notes

00:00 Welcome to Syntax!
00:05 Scott’s vampire costume.
00:38 New to live-streaming.
00:54 AWS Outage.
01:50 What is Spooky Stories?
02:01 (Wes is wearing a shark costume)
02:34 Brought to you by Sentry.io.
03:30 PHP MyHeadache.
06:23 A Browser Hack.
08:30 Browser Hack Gameshow & Special Guest!
17:01 Ghost Password.
21:32 Just A Patch.
24:12 Don’t drink and Deploy.
34:47 Discount.

Hit us up on Socials!

948: Zed is Ready For Primetime

Wed, 22 Oct 2025 11:00:00 -0000

Wes and Scott talk about what makes Zed—the hot new editor built in Rust—fast, beautiful, and finally ready for primetime. From Git UI to extensions and AI tools, they break down what Zed gets right, what it still lacks, and whether it’s time to finally ditch VS Code.

Show Notes

00:00 Welcome to Syntax!
- Syntax San Francisco Meetup
- We need your Spooky Stories
02:37 Brought to you by Sentry.io
04:07 What is Zed?
06:46 Zed UI: fast and clean
10:17 General editor experience
11:44 Extensions marketplace
17:53 Git UI
22:03 Problems UI
26:01 Real-time collaboration
- Remote Development
27:39 Command prompt tricks and built-in tools
31:03 Zed’s AI features
- AI Coding Sucks
37:08 What kept Scott away—and why he’s back
40:33 What’s still missing
- Text Manipulation Kung Fu for the Aspiring Black Belt
46:43 Sick Picks & Shameless Plugs

Sick Picks

Scott: Zojirushi 5.0 Liter Water Boiler
Wes: Syntax Keycaps

Hit us up on Socials!

947: S-Tier MCP Servers for Developers

Mon, 20 Oct 2025 11:00:00 -0000

Scott and Wes break down the top-tier MCP servers developers are using right now. From browser automation to debugging superpowers, they explore how these servers are changing what’s possible in modern dev workflows.

Show Notes

00:00 Welcome to Syntax!
01:52 Brought to you by Sentry.io.
02:46 Submit your Spooky Stories!
03:37 Syntax San Francisco Meetup.
04:11 S-Tier MCP Servers.
- 04:17 Sentry MCP Server (not sponsored).
  - 05:01 Pause, what the heck is an MCP server.
- 05:45 Back to the Sentry MCP.
- 07:07 Spotlight JS.
- 09:08 ElevenLabs MCP hack.
11:19 Docs Tools.
- 11:29 Context7.
- 15:55 GitHub MCP Registry.
- 16:10 Nuxt MCP Server.
- 16:25 Svelte MCP Server.
- 20:35 Cloudflare MCP Servers.
- 22:34 Chrome Dev Tools (Playwright) MCP Server.
- 25:17 Stripe MCP Server.
27:55 Mastra.

Hit us up on Socials!

946: We Got Roasted for Our Websites — Fair

Wed, 15 Oct 2025 11:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about why devs neglect their own websites, hosting shady projects (hypothetically), AI rules in version control, balancing side projects and family life, and more!

Show Notes

00:00 Welcome to Syntax!
01:43 Why devs neglect their own websites (and how to convince your parents coding is a real job)
07:04 AirPods, Nothing Ear, and the ANC struggle
10:22 Shipping Syntax merch from Canada
12:43 Scott’s update on Omarchy and Linux laptop life
18:05 What to do when a user account gets hacked (and how to prevent it)
21:33 Should you commit LLM context files and AI-generated docs to Git?
25:27 How to balance career, side projects, and family life
29:25 Building and hosting a “legally dubious” website
33:27 Best practices for dealing with images
42:46 Where to find Wes’ awesome wallpapers
44:19 Can you trust services with a generous free tier?
- ServerlessHorrors
50:32 Do we still use GIFs?
52:23 Sick Picks + Shameless Plugs
55:59 Brought to you by Sentry.io

Sick Picks

Scott: Mkv-Quicklook
Wes: Momofuku Sweet & Savory Korean BBQ Sauce

Hit us up on Socials!

945: Chrome Dev Tools MCP Server

Mon, 13 Oct 2025 11:00:00 -0000

Scott and Wes dive into Chrome’s new MCP server; a dev tools API powered by Puppeteer that gives your scripts, editors, and AI agents full access to Chrome. They break down how it works, what it can (and can’t) do, and how it might change debugging and automation for developers

Show Notes

00:00 Welcome to Syntax!
- 01:15 Syntax San Francisco Meetup.
- 01:55 We need your Spooky Stories!
02:42 What is an MCP Server?
04:28 MCP servers are not only for code editors.
06:43 Brought to you by Sentry.io.
07:49 Dev Tools MCP is similar to Puppeteer.
09:20 Setting up an MCP Server.
11:36 Example of MCP with Dominos Pizza.
13:23 Accessing Dev tools from your editor.
14:23 In VS Code, you can “Open Link”.
15:22 Using the MCP server.
16:26 Chrome has Debug insights inside of chrome’s dev tools.
18:38 Real world things the Chrome MCP server can do.
- 18:43 Analyzing performance.
- 19:55 Taking screenshots.
- 21:17 Performance fix feedback loop.
- 22:33 Remote connecting browsers.
- 24:54 Browser-use.
25:18 What are the limitations?

Hit us up on Socials!

944: Is Coinbase Really Writing Half Their Code With AI?

Wed, 08 Oct 2025 11:00:00 -0000

Wes and Scott talk with Kyle Cesmat about how Coinbase is writing nearly half its code with AI—while keeping quality and security front and center. They dig into tools like Cursor and Claude Code, agent-driven workflows, code review challenges, and how AI is reshaping developer productivity without replacing developers.

Show Notes

00:00 Welcome to Syntax!
03:29 Defining and measuring “quality” at a large company
05:05 How AI-generated code is reviewed and shipped at Coinbase
07:35 A developer’s workflow using AI—from ticket to production
10:30 Standard vs. team-specific tools for AI development
12:55 Using MCP servers to power internal AI workflows
14:42 MCP vs. custom agent integrations
17:16 What kinds of code AI is writing at Coinbase
19:48 Which languages and tasks does AI handle best?
21:21 Getting AI to follow existing code conventions
- greptile
24:36 Brought to you by Sentry.io
25:01 How AI affects hiring, velocity, and developer focus
28:16 AI’s role in speeding up code reviews
31:28 The most valuable AI tool in Coinbase’s stack
33:48 Managing AI costs and model choices
35:10 Security considerations for using external AI models
37:04 How often Coinbase tunes and adjusts its AI systems
39:26 Using AI to write code vs. embedding AI in customer-facing features
42:29 Kyle’s big-picture take on AI as a tool—not a magic bullet
- Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity
44:33 The future of hiring engineers with their own “backpack” of agents
45:53 Sick Picks + Shameless Plugs

Sick Picks

Kyle: UltraShelf

Hit us up on Socials!

943: Modern React with Ricky Hanlon (React Core Dev)

Mon, 06 Oct 2025 11:00:00 -0000

Scott and Wes sit down with Ricky Hanlon from the React core team at Facebook to dive into the latest features and APIs shaping modern React development. From transitions and Suspense to fetching strategies and future directions, this episode breaks down what’s next for React and how developers can take advantage of it.

Show Notes

00:00 Welcome to Syntax!
01:20 Who is Ricky Hanlon.
02:10 Setting the Stage: Modern React APIs
02:48 Brought to you by Sentry.io.
03:12 Defining Transitions in React
05:08 Practical Examples of Scheduling.
08:23 useDeferredValue.
09:30 Suspense.
11:13 Fallbacks and animations.
12:35 How do you get psychological performance data?
13:39 Are these considerations reasonable for the average dev?
15:37 useOptimistic.
17:35 Removing delayMs (referred to as maxDuration in later iterations).
19:49 How to fetch data in React.
21:58 Is React now just Nextjs?
23:23 Will React give us a Signals-based state management?
24:44 The challenges of building in public.
30:12 Making LLMs cooperate with React.
32:05 The lifting will happen at framework level.
32:59 This is not time slicing.
35:47 Sick Pick + Shameless Plug.

Sick Picks

Ricky: iPhone 17 Pro

Shameless Plugs

Ricky: https://conf.react.dev/

Hit us up on Socials!

942: Mental Health Q&A w/ Dr. Courtney Tolinski

Wed, 01 Oct 2025 11:00:00 -0000

Wes and Scott talk with Dr. Courtney Tolinski about supporting neurodivergent teammates, navigating workplace dynamics, and recognizing strengths beyond labels. They explore ADHD diagnosis and treatment, productivity mindsets, burnout, AI in mental health, and practical routines for focus and balance.

Show Notes

00:00 Welcome to Syntax!
00:09 Meet Dr. Courtney Tolinski
01:46 Supporting neurodivergent team members
12:26 Should I disclose my ADHD diagnosis at work?
17:21 Characteristics of autism and ADHD
22:37 Seeking diagnosis as an adult developer
28:04 Brought to you by Sentry.io
32:18 Uncoupling identity from productivity
38:06 Is overtime ever “worth it”?
42:34 AI as a mental health tool: hope or hype?
46:32 Will therapists be replaced by AI?
49:29 Burnout warning signs in high-performers
55:15 Sick picks + shameless plugs

Sick Picks

Courtney: Bentgo Glass Containers

Hit us up on Socials!

941: Is Responsible AI Possible? with Dr. Sarah Bird of Microsoft

Mon, 29 Sep 2025 11:00:00 -0000

Scott heads to Microsoft’s campus for the VS Code Insider Summit to sit down with Dr. Sarah Bird and explore what “Responsible AI” really means for developers. From protecting user privacy to keeping humans in the loop, they dig into how everyday coders can play a role in shaping AI’s future.

Show Notes

00:00 Welcome to Syntax!
01:27 Brought to you by Sentry.io.
03:13 The path the machine learning.
04:44 How do you get to ‘Responsible AI’?
06:43 Is there such a thing as ‘Responsible AI’?
07:34 Does the average developer have a part to play?
09:12 How can AI tools protect inexperienced users?
11:55 Let’s talk about user and company privacy.
13:57 Are local tools and services becoming more viable?
15:06 Are people right to be skeptical?
16:58 The software developer role is fundamentally changing.
17:43 Human in the loop.
19:37 The career path to Responsible AI.
21:21 Sick Picks.

Sick Picks

Sarah: Japanese pottery

Hit us up on Socials!

940: Picking a Fullstack Stack, Is Next.js Too Complex? Services vs Self-Hosted + More

Wed, 24 Sep 2025 11:00:00 -0000

In this potluck episode, Wes and Scott answer your questions about modern full-stack stacks, Node.js backend options, managing database indexes, developer burnout, handling toxic bosses, and more!

Show Notes

00:00 Welcome to Syntax!
02:36 What’s your go-to Node.js backend in 2025?
- Polka
06:18 Do you proactively manage database indexes—or fix them only when they become a problem?
09:40 Brought to you by Sentry.io
12:14 After planning a new project, what’s your real-world dev workflow?
- 931: Project Init - How to Make Good Choices When Starting a New Coding Project
18:19 What to do when you’re feeling burned out as a developer
23:34 Picking the right tech stack for your partner’s website
28:18 How do you deal with a toxic boss?
33:10 The ideal tech stack for launching a SaaS MVP
39:46 Is GraphQL still worth it vs REST or RPC?
44:26 Is Vercel steering modern web dev in the wrong direction?
51:20 What’s up with TanStack Forms?
- TanStack Form Latest
59:35 Sick Picks + Shameless Plugs

Sick Picks

Scott: Flesh and Code
Wes: WAGO connectors

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

939: Creator of Vite: Evan You

Mon, 22 Sep 2025 11:00:00 -0000

Scott and Wes sit down with Evan You, creator of Vue, Vite, and VoidZero, to dig into the future of frontend tooling. From the speed of Rolldown to why he chose Rust, they explore the evolution of developer experience, bundlers, and what’s next for the web.

Show Notes

00:00 Welcome to Syntax!
00:31 Who is Evan You?
- Vue.js.
- Vite.
- Void0
01:19 Making the shift from UI to Toolchains.
02:37 How aesthetics contributed to the success of Vue and Vite.
05:26 Adding Rollup plugins to the Dev Server.
07:31 Brought to you by Sentry.io.
07:56 Rollup and Rolldown explained.
09:29 NAPIRS.
10:02 Why Rust and not Go?
- SWC, OXC.
12:04 Rolldown’s speed and performance.
- OXC Allocator.
15:09 Dealing with massive buildtimes.
17:42 How has the transition been?
20:34 Why do we even need a bundler?
23:25 Vite’s superior developer experience.
26:01 Fullstack Vue?
31:45 Node and Vite’s relationship.
35:41 Wes’ wishlist.
- vite-dir.
37:28 Hot takes.
37:37 Would Next be better with Vite?
41:09 Thoughts on React Server Components.
43:40 Thought on Remix 3.
46:22 Tell us about Void0.
51:36 Sick Picks + Shameless Plugs.

Sick Picks

Evan: Laravel Lamborghini Shaped Stress Toys

Shameless Plugs

Evan: Viteconf, Vite, CultRepo.

Hit us up on Socials!

938: Hot Takes + Bike Shedding

Wed, 17 Sep 2025 11:00:00 -0000

Wes and Scott dive into some hot takes and classic debates—tabs vs spaces, camel vs snake case, export styles, barrel files, variable naming, and more.

Show Notes

00:00 Welcome to Syntax!
01:26 CSS variables: descriptive vs. semantic
03:38 snake_case vs. camelCase
04:54 Default exports vs. named exports
06:23 Barrel files vs. direct imports
09:15 Function declaration vs. function expression
11:00 Inferred types vs. explicit types
13:40 Brought to you by Sentry.io
14:40 Long and explicit variable names vs. short with comments
16:27 Self-documenting code vs. code comments
17:03 Rebase vs. merge commit
18:39 Naming event parameters: e vs. event
20:33 Tabs vs. spaces
22:18 Big line height vs. small line height
23:50 Hard line length vs. line wrap

Hit us up on Socials!

937: Is The Omarchy Hype Real?

Mon, 15 Sep 2025 11:00:00 -0000

Scott takes Wes on a tour of Omarchy, DHH’s polished Arch + Hyprland Linux setup that promises speed, beauty, and endless keyboard shortcuts. From first impressions to daily workflows, Scott debates whether it’s good enough to pull him out of the Apple ecosystem for good.

Show Notes

00:00 Welcome to Syntax!
02:31 Brought to you by Sentry.io.
02:55 What is Omarchy?
- 02:57 Arch-based distribution.
- 03:42 Hyprland window management.
- 05:08 Wayland Display Server Protocol.
- 06:27 Installation Defaults.
- 06:53 System-wide shortcuts.
09:01 My first impressions.
- 09:41 Connecting to my NAS.
- 10:54 Gigantic UI.
12:21 Day 2 Experiences.
- 13:22 Resizing window challenges.
- 16:11 Neovim and Lazyvim.
- 16:49 Lazygit.
19:07 How do you use it and why is it good.
- 19:14 Command Palette.
- 19:49 Raycast.
  - Recreating Raycast.
- 20:50 Using the app launcher.
- 21:25 Screensavers.
- 21:59 OS Style.
22:55 My apps, my apps, my apps, check it out.
- 25:07 Is the hardware comparable to Mac’s M processors?
- 27:24 Installing new apps.
29:26 Web apps as first class citizens.
32:47 What I’ll miss.
- 35:56 What’s going on with MacOS UI?
38:37 Annoyances.
39:31 My advice.
- Read the Manual.
44:39 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Omarchy Manual.
Wes: Ugreen 200w Charger, Silicone USB C.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

936: Realtime LED Wall With React + Websockets (I Let Strangers Control It)

Wed, 10 Sep 2025 11:00:00 -0000

Scott, Wes, and CJ dive into Wes’s Hackweek project: a real-time, web-controlled LED grid. They break down the hardware build, custom 3D-printed diffuser, ESP32 microcontroller, and Cloudflare durable objects powering live pixel art, GitHub activity displays, and interactive web drawings.

Show Notes

00:00 Welcome to Syntax!
02:03 Wes’ Hackweek project: a web-controlled LED grid
03:52 The hardware: LED panels, soldering, and power
- WS2812 LED panels
06:38 ESP32 microcontroller and WLED firmware explained
- ESP32 Microcontroller
10:57 Power supply challenges and injection fixes
15:05 Debugging and testing a DIY LED matrix
15:56 Shorts, blown circuits, and melted wires
17:58 Designing and 3D-printing the diffuser for crisp pixels
21:29 The software: Cloudflare Durable Objects + Party Server
- Cloudflare Durable Objects
- Party.server
22:18 Real-time sync and state management across clients
- Party Client
28:43 Connecting the server to the LED hardware
41:51 Open access fun: scripts, NSFW images, and moderation
- Cloudflare tunnel
44:10 Live demos
45:34 Future plans: stats, rooms, and making it always-on

Hit us up on Socials!

935: CJ Made A Sega Game In 2025

Mon, 08 Sep 2025 11:00:00 -0000

CJ takes us behind the scenes of Hackweek to share how he built a custom Sega Genesis game from scratch, complete with assembly code, level loading, and retro hardware tricks. From SGDK to parallax faking, this episode is a deep dive into old-school game dev with a modern twist.

Show Notes

00:00 Welcome to Syntax!
00:44 Why a Sega game?
- Sega Genesis.
- Sega Master System.
- MKBHD Retro Tech: Sega.
06:55 What is it running on?
07:49 Working with assembly code.
10:11 Sega Genesis Development Kit.
- Stephane-D GitHub.
10:54 Awesome Megadrive.
12:02 Booting on an emulator.
13:07 Gens and KMod.
15:54 Compiling stage.
17:44 Genesis Code VS Code Extension.
18:22 Images and Assets.
19:46 Loading images with bitmap.
23:50 Megacat Studios.
25:21 Z index?
- Faking Parallax.
27:34 Specific code examples.
27:51 Platformer Engine.
30:01 Platformer Sample Game.
30:44 LDTK (Level Designer Toolkit).
33:13 Tiled Collision mapping.
37:42 What about debugging?
39:37 Loading in levels.
- RetroGameMechanicsExplained.
- Sega Mega-CD Development Unit.
43:56 Challenges with graphics.
49:56 Adding music.
- Super Cartridge.
- Flahskit Programmer MD.
- Flashkit Cart MD.

Hit us up on Socials!

934: We Built a Real-Time, Local-Data, Competitive Coding Game

Wed, 03 Sep 2025 11:00:00 -0000

Scott, Wes, and CJ dive into SynHax, Scott’s Hackweek project for code battles. They discuss live coding duels, referee controls, and the surprisingly simple tech stack that delivers instant updates and audience engagement.

Show Notes

00:00 Welcome to Syntax!
01:50 Brought to you by Sentry.io
02:30 What is SynHax?
- This Button Broke Our Brains (CSS Challenge)
04:21 The Stack
07:39 How it works
15:03 The battle experience
28:28 Fun details
34:12 Creating new battles & the admin dashboard

Hit us up on Socials!

933: Hackweek Overview - What Is It, What Did We Build

Mon, 01 Sep 2025 11:00:00 -0000

It’s Hackweek at Syntax! Scott, Wes, and CJ break down what Hackweek is all about - how they picked their projects, what came out of them, and why it’s the best excuse to experiment, build, and have fun before the deep-dive episodes roll in.

Show Notes

00:00 Welcome to Syntax!
00:04 What is Hackweek?
- 01:05 Hackweek projects spark motivation.
04:05 Choosing our projects.
- 04:34 What we chose.
05:11 CJ’s Hackweek Project.
- 05:51 Using SGDK C language toolkit.
- 07:02 Writing to an Everdrive.
- 08:09 What game engine did you use?
  - Platformer Engine.
  - LDtk.
- 12:11 What was the end result?
14:09 Wes’ Hackweek Project.
- 16:15 Why hardware projects?
- Watch the Video Here.
19:09 Scott’s Hackweek Project.
- Watch the Video Here.
- 21:42 Early considerations.
25:42 AI usage.

Hit us up on Socials!

932: Vibe Coding’s Huge Problem

Wed, 27 Aug 2025 11:00:00 -0000

Wes and Scott talk about the dangers of vibe coding when it comes to authentication and access control. They share real-world examples of security fails, discuss how to avoid client-side-only checks, and offer practical tips for protecting sensitive user data in your apps.

Show Notes

00:00 Welcome to Syntax!
- We build the world’s most painful CAPTCHAs (Kitboga scammers)
02:08 Brought to you by Sentry.io
02:33 Wes’ vibe coding experience
- Wes’ app
04:38 The Tea app disaster
- Tea app
07:45 Don’t vibe code access control
- Better Auth with Better Auth
09:38 Let in, don’t lock down
11:23 Server vs. client-side code
13:46 Visualize access control
15:30 Automate tests
17:00 Sick Picks + Shameless Plugs

Sick Picks

Scott: A City on Mars
Wes: Hotel Collection Essential Oils

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

931: Project Init - How to Make Good Choices When Starting a New Coding Project

Mon, 25 Aug 2025 11:00:00 -0000

Scott and Wes dive into the fundamentals of project initialization and planning, from outlining ideas and choosing the right tools to making smart technology decisions. They also chat about leveraging AI and collaboration to shape better projects before rolling up your sleeves and getting to work.

Show Notes

00:00 Welcome to Syntax!
02:12 Brought to you by Sentry.io.
04:03 Make a plan.
- 04:06 Start with an outline and let it evolve.
- 05:59 Mind-Mapping software vs plain text.
- 08:49 Utilizing LLMs for alternative perspectives.
- 09:58 Utilizing humans for alternative perspectives.
11:17 Making technology choices.
- 13:24 Assessing the project’s actual needs.
- 13:30 Is this a long-term project?
- 15:43 Is this project Open Source?
- 16:09 Are you working in a team?
- 18:12 Are you prioritizing learning?
- 19:48 Pick technologies with proven compatibility.
20:17 Implementing AI.
- 20:44 Steering docs.
26:24 Get to work and break stuff.

Hit us up on Socials!

930: Text Editor Keybindings, WASM Replacing Docker, LLM apathy and hosting mini apps

Wed, 20 Aug 2025 11:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about VS Code vs Cursor, navigating promotions and job titles, database fundamentals, avoiding decision paralysis, how AI is shaping frameworks, and more!

Show Notes

00:00 Welcome to Syntax!
00:56 Brought to you by Sentry.io
06:24 Moving from VS Code to Cursor without losing your shortcuts
12:13 Should you bring up a senior promotion at a new job?
16:32 Relying on LLMs vs. learning database fundamentals
20:42 Overcoming decision paralysis in programming
25:00 What to do when your code gets too messy
27:39 Could Wasm replace Docker and Kubernetes?
32:14 Organizing mini-apps in Express: monorepo, micro frontends, or something else?
38:49 Will AI lock us into React and make new frameworks irrelevant?
46:57 Sick Picks + Shameless Plugs

Sick Picks

Wes and Scott: Niimbot

Shameless Plugs

Subscribe to Syntax on YouTube

Hit us up on Socials!

929: Cloudflare Blocks AI Crawlers × Debugging Local Data × Raising Kids with Healthy Digital Habits and More

Mon, 18 Aug 2025 11:00:00 -0000

Scott and Wes tackle listener questions on everything from local-first databases and AI-built CRMs to protecting APIs and raising kids with healthy digital habits. They also weigh in on Cloudflare’s AI crawler ban, portfolio critiques, and more hot takes from the dev world.

Show Notes

00:00 Welcome to Syntax!
00:49 Dreaming about web components.
02:55 Local-First Apps for Customer Support.
- Brought to you by Sentry.io
08:17 AI-Built CRM: Portfolio or Problem?
- Ben Vinegar’s Engineering Interview Strategy.
18:55 InstantDB vs. Other Local-First Databases.
21:46 Raising Kids with Healthy Digital Habits.
- Porta Potty Prince on TikTok.
32:55 Cloudflare Blocks AI Crawlers. Good for Creators?
41:46 Protecting APIs and Obfuscating Source Code.
44:49 Will Portfolio Critiques Return?
46:45 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Wifi 7 Eero.
Wes: Plastic Welder

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

928: State of Devs 2025 Results

Wed, 13 Aug 2025 11:00:00 -0000

Wes and Scott talk about the 2025 State of Devs survey, diving into trends in salaries, job titles, remote work, health, hobbies, and more.

Show Notes

00:00 Welcome to Syntax!
01:44 Brought to you by Sentry.io
02:08 Years of experience vs yearly income
11:48 Layoffs
18:07 Job title
19:55 Remote work
24:40 Job happiness
25:40 Work hours
26:24 Workplace perks
26:53 What phones devs use
27:46 Desktop OS
28:44 Programming languages
29:29 Productivity apps
30:54 Social media
32:13 Median age of RSS feed users
33:41 Community contributions
35:37 Health and fitness
37:01 Health issues
39:11 Scott’s health update
42:28 Hobbies
45:54 Favorite music
47:10 Favorite video games
47:37 Favorite movies
49:35 Metadata

Hit us up on Socials!

927: AI Browsers, 100X Build Speed, Massive Svelte Update - Web Dev News

Mon, 11 Aug 2025 11:00:00 -0000

Scott and Wes break down the latest in web dev news, from Amazon’s AI-powered VS Code fork and Node’s native TypeScript support, to Vite overtaking Webpack and Svelte’s newest async and remote features. They also cover big moves in developer tools, fresh browser experiments, and what these shifts mean for the future of coding.

Show Notes

00:00 Welcome to Syntax!
04:08 Kiro.
- Kiro Video.
09:05 Node 22.18 allows TypeScript without compiler.
11:42 React Router RSC, Parcel + Vite Support.
12:56 Windsurf Bought for real this time.
14:25 Brought to you by Sentry.io.
14:49 Copyparty, the FOSS file server
- Codeparty Video
- Codeparty on GitHub.
23:22 Vite Overtakes Webpack.
- Evan You X Post.
25:16 Rolldown Vite.
- void0 Rolldown-Vite.
27:06 Claude Code pricing clamp down.
- Wes’ X Post.
30:07 Async svelte released.
- Async Svelte Discussion.
31:41 Remote Svelte Released.
- Remote Functions.
34:59 Trae Solo.
37:58 Perplexity Comet Browser.
43:07 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Black Stuff.
Wes: MEKOH Short Pressure Washer Gun with Swivel.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

926: RSS Is NOT Dead

Wed, 06 Aug 2025 11:00:00 -0000

Scott and CJ explore why RSS still matters and how it’s more underused than outdated. They discuss how to self-host RSS readers, escape the noise of the modern web, and reclaim a cleaner, ad-free reading experience across devices.

Show Notes

00:00 Welcome to Syntax!
01:09 Brought to you by Sentry.io
02:41 What is RSS and how does it work?
06:14 Hosting your own RSS server: Miniflux, FreshRSS, and more
- Miniflux
- FreshRSS
11:00 Decluttering the web with article scraping
12:38 Best RSS clients for desktop and mobile
18:51 Where to find RSS feeds

Shameless Plugs

Syntax YouTube Channel: Cursor User Tries Claude Code

Hit us up on Socials!

925: Scott & CJ’s Fave Productivity Apps & Web Apps

Mon, 04 Aug 2025 11:00:00 -0000

Scott and CJ go full productivity nerd, swapping notes on their favorite web apps for writing, coding, planning, and more. From terminals to to-do lists to dumb phones, it’s a deep dive into the tools powering their workflows.

Show Notes

00:00 Welcome to Syntax!
00:35 Brought to you by Sentry.io.
01:56 Text to speech or speech to text.
- 02:20 Superwhisper.
08:29 Kiro.
16:16 CJ’s current editor preference.
17:59 Finding the right editor.
18:47 Terminals.
- 20:22 Ghostty.
24:16 Note-taking.
- 26:32 Obsidian.
- 30:24 Logseq.
31:03 Todo lists.
- 31:08 Tweek.so
- 34:42 Trello.
- 37:25 Notion Calendar.
38:55 Email.
- 43:21 FairEmail.
43:43 Dumb phones.
- 45:10 Olauncher
47:39 Audio Bookshelf.

Hit us up on Socials!

924: Sync Engines and Local Data

Wed, 30 Jul 2025 11:00:00 -0000

Wes and Scott talk about local-first sync engines—why they matter, what makes apps feel fast, and which platforms stand out. From LiveStore to Convex to Instant DB, they break down the pros and cons of each and debate what the “next React” might look like in a local-first future.

Show Notes

00:00 Welcome to Syntax!
01:52 Intro to local data: what makes apps feel fast
05:08 Could the next React be a local-first sync engine?
08:23 LiveStore
18:01 Zero
21:58 Instant DB
24:18 Brought to you by Sentry.io
24:43 Convex
27:54 ElectricSQL
29:48 PowerSync and PartyKit
30:51 Choosing the right sync engine
40:34 Sick Picks + Shameless Plugs

Sick Picks

Scott: Rummikub
Wes: Headphone covers

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

923: Getting the Most Out of AI Coding

Mon, 28 Jul 2025 11:00:00 -0000

Scott and Wes share their top strategies for getting high-quality results from AI coding tools like Cursor, Claude, ChatGPT, and Windsurf. From better prompting to building reusable rule sets, they cover practical tips for making AI your most productive coding partner.

Show Notes

00:00 Welcome to Syntax!
Wes' Tweet
02:56 How to get the best results when using AI.
03:15 Scaffold it out yourself.
05:40 Be clear with your prompts.
07:45 Use XML tags around specific items
08:47 Utilize Rules like Cursor rules or Copilot rules.
13:20 Ask it to create some rules based on an existing codebase.
16:03 Break things down into clear concise actionable items.
17:22 Where to store your rules files.
18:37 Utilizing llm.txt files.
19:24 Context7.
20:28 Tag relevant files, functions, etc.
21:38 Feed logs back into the AI.
22:36 Logging Errors.
22:54 Brought to you by Sentry.io.
24:14 Long running chats get worse.
Wes' Tweet

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

922: Pre-commit Hooks, requestAnimationFrame, Code Reviews, and More

Wed, 23 Jul 2025 11:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about code reviews, migrating legacy apps, CSS attr() use cases, pre-commit hooks, the future of creative web development, whether front-end devs need to be full-stack, and more!

Show Notes

00:00 Welcome to Syntax!
00:43 When is the appropriate time to use requestAnimationFrame?
05:10 How do you handle code reviews on larger teams?
13:08 When to use the CSS attr() function
19:01 The future of browsing websites and the impact of AI
28:45 Brought to you by Sentry.io
29:10 Navigating browser preview in VS Code
31:31 Pre-populating email content with mailto
34:29 Is there increasing pressure for front-end developers to become full-stack?
43:14 What pre-commit checks should you run and how?
46:16 How do you deal with a poorly-built codebase when you already have thousands of active users?
50:05 What GitHub Copilot features should you disable while you’re learning something new?
52:22 Sick Picks + Shameless Plugs

Sick Picks

Scott: WOLFBOX MF100 Electric Air Duster
Wes: Competition Kettlebells

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

921: AI Coding Roadmap for Newbies (And Skeptics)

Mon, 21 Jul 2025 11:00:00 -0000

Scott and Wes break down how to code with and for AI; perfect for skeptics, beginners, and curious devs. They cover everything from Ghost Text and CLI agents to building your own AI-powered apps with embeddings, function calling, and multi-model workflows.

Show Notes

00:00 Welcome to Syntax!
- 03:56 How to interface with AI.
- 04:07 IDE Ghost Text.
- 05:45 IDE Chat, Agents.
- 08:00 CLI Agents.
  - Claude Code.
  - Open Code.
  - Gemini.
- 11:13 MCP Servers.
  Context7
- 14:47 GUI apps.
  - v0.
  - Bolt.new.
  - Lovable.
  - Windsurf.
- 19:07 Existing Chat app like ChatGPT.
22:37 Building things WITH AI.
- 23:32 Prompting.
- 26:53 Streaming VS not streaming.
- 28:14 Embeddings and Rag.
- 31:09 MCP Server.
  - CJ’s MCP Deep Dive.
  - 32:36 Brought to you by Sentry.io.
- 33:25 Multi-model, multi-provider.
- 36:27 npm libs to use to code with AI.
  - OpenAI SDK.
  - AI SDK.
  - Cloudflare Agents.
  - Langchain.
  - Local AI
    - Tensorflow.
    - Transformers.js.
    - Huggingface.
44:12 Processes and exploring.

Hit us up on Socials!

920: How to Build MCP Servers

Wed, 16 Jul 2025 11:00:00 -0000

Wes and Scott talk about how developers can expose powerful tools to AI using the Model Context Protocol. They discuss tool calling, remote MCP specs, authentication, and real-world use cases that make AI more capable through smarter integrations.

Show Notes

00:00 Welcome to Syntax!
01:36 What is MCP?
07:23 MCP tools
11:33 MCP resources
13:43 Saving reusable prompts
16:18 Creating and validating MCP tools
18:31 Brought to you by Sentry.io
18:31 Tool calling vs MCP servers
21:28 Remote vs local MCP servers
- mcp-remote
26:24 Useful MCP servers
32:48 Sick Picks + Shameless Plugs

Sick Picks

Scott: Mario Kart World
Wes: anyloop Kid’s Watch

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

919: Better Auth with Better Auth

Mon, 14 Jul 2025 11:00:00 -0000

Scott and Wes recap the current state of web authentication and explore how Better Auth simplifies the whole process. With built-in plugins, modern features, and no need to hand-roll your own solution, Better Auth makes secure login a breeze for developers.

Show Notes

00:00 Welcome to Syntax!
00:59 Scott’s history with authentication.
02:05 Brought to you by Sentry.io.
03:15 My opinion has changed on auth.
04:40 Current authentication options.
- 06:32 Arctic.
- 06:56 OpenAUTH.
- 07:36 Auth.js.
08:02 Better Auth.
- 10:45 Better Auth CLI.
- 11:37 Email integration.
- 12:09 Hooks and Tokens.
- 13:43 CAPTCHA Integration.
- 14:36 Database Integration.
- 15:04 Integrations.
- 15:19 Plugin Ecosystem.
- 17:40 Admin features.
- 19:41 The Docs.

Hit us up on Socials!

918: Extreme Native Perf on the Web with Superhuman

Wed, 09 Jul 2025 11:00:00 -0000

Wes and Scott talk with Loïc Houssier about how Superhuman builds lightning-fast, delightfully-designed email software. They dig into engineering philosophy, offline-first architecture, local databases, AI-powered productivity, and what it takes to create tools that people love.

Show Notes

00:00 Welcome to Syntax!
03:05 Inside Superhuman and Loïc’s role
06:49 Is Superhuman native? What’s the tech stack?
08:16 How Superhuman approaches product design and speed
12:17 Local-first architecture – Sync, storage, and performance
- Realm
13:46 Vector search, AI, and privacy considerations
18:12 How the team ships fast and stays focused
21:27 Rethinking email for the future
26:54 Brought to you by Sentry.io
27:19 How calendar integration and smart features work
29:54 Where new ideas come from
31:54 Will there ever be a true dark mode?
33:02 Are people actually using keyboard shortcuts?
36:42 How shortcuts work and the role of the command palette
41:28 Engineering for speed – Costs and trade-offs
43:32 How Superhuman’s sync engine works
46:09 What code runs locally and what runs on the server?
46:51 How Superhuman handled the Google and Cloudflare outage

Hit us up on Socials!

917: AI Tools You Should Know

Mon, 07 Jul 2025 11:00:00 -0000

Scott and Wes round up the hottest AI tools you should have on your radar; from text-to-speech wizards to self-hosted image generators. They break down what they’re using, what’s worth paying for, and which tools are changing their workflows.

Show Notes

00:00 Welcome to Syntax!
00:49 Getting too cozy with your tools.
01:34 Brought to you by Sentry.io.
03:40 LangFlow.
08:44 Super Whisper and Whisper Flow.
15:00 Dia.
23:16 Chat apps.
26:58 Self-hosted.
- 27:01 Comfy UI.
- 31:27 Automatic1111 and Forge UI.
- Xenova Shoutout
34:11 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Rat A Tat Cat Card Game.
Wes: Syntax Hats

Shameless Plugs

Wes: Syntax Hats

Hit us up on Socials!

916: I got fired, what should I focus on?

Wed, 02 Jul 2025 11:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about maintaining popular open-source projects, where to start after a layoff, impostor syndrome, Scott’s recording setup, whether a computer science degree is still worth it in the age of AI, and more!

Show Notes

00:00 Welcome to Syntax!
00:44 Brought to you bySentry.io
04:16 How to maintain a successful NPM package
08:03 What to do in Denver while attending Laracon
11:18 How to branch out and learn new frameworks while balancing work life and family
15:55 Built-in state management vs external state management
- Full Stack App Build | Travel Log w/ Nuxt, Vue, Better Auth, Drizzle, Tailwind, DaisyUI, MapLibre
19:43 Suggestion for CSS battles: Removing white space and new lines after the time limit?
23:06 What is Scott’s recording setup?
27:46 Snake case vs camel case
- Eye Tracking Study on camelCase and under_score Identifier Styles
31:16 Have you ever had impostor syndrome?
34:56 Is a degree worth it for computer science or machine learning?
38:41 Should I use a reverse proxy server?
- Ep 798: Self Hosting: Reverse Proxy Servers
42:03 Where to start when updating your webdev skillset
50:11 Sick Picks + Shameless Plugs

Sick Picks

Scott:Cardboard Cutter
Wes:Kitchen Scissors

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

Syntax:X Instagram Tiktok LinkedIn Threads

Wes:X Instagram Tiktok LinkedIn Threads

Randy:X Instagram YouTube Threads

915: $200mo Background Agents, CLI Tooling and “Max Mode”

Mon, 30 Jun 2025 11:00:00 -0000

AI coding agents are getting wild. Scott and Wes break down the latest tools that run in the background, write code across multiple steps, and charge you $200 a month to do it. From CLI-based primitives to full-on copilots, this episode covers the next wave of dev tools and what it takes to use them effectively.

Show Notes

00:00 Welcome to Syntax!
03:13 Background Agents.
04:26 Appropriate tasks for background agents.
12:46 CLI tooling.
14:17 Claude Code Pricing.
18:20 Approaches to get the most from these tools.
19:56 PRD Documents.
- Atlasian What’s a PRD Document.
20:50 Claude Taskmaster.
- Langflow.
25:29 Sick Picks & Shameless Plugs.

Sick Picks

Scott: RingConn.
Wes: Dell Projector

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

914: 5 Upcoming + Next Gen JavaScript Features

Wed, 25 Jun 2025 11:00:00 -0000

Wes and Scott talk about the latest JavaScript proposals from TC39, including features like import defer, the powerful new random namespace, Array.fromAsync, and native clamp and upsert methods. They break down what’s coming, why it matters, and how it might improve your code.

Show Notes

00:00 Welcome to Syntax!
02:55 Brought to you by Sentry.io
05:37 Import Defer
09:30 Random Functions
- proposal-random-functions
- proposal-seeded-random
18:32 Array from Async
- proposal-array-from-async
20:56 Upsert for Maps
- proposal-upsert
23:13 Clamp
- proposal-math-clamp
27:02 Sick Picks + Shameless Plugs

Sick Picks

Scott: Anker Max USB 4-Port
Wes: Clarkson’s Farm

Hit us up on Socials!

913: NEWS: Remix drops React, Safari 26 CSS + mega fast Vite and TypeSCript

Mon, 23 Jun 2025 11:00:00 -0000

Wes and CJ break down the latest web dev news, including big changes in Safari 26, TypeScript Native Previews, and Remix dropping React. They also chat about new proposals from TC39, Vite 7 beta, and a surprise project from the Astro team.

Show Notes

00:00 Welcome to Syntax!
00:41 Safari WWDC.
- 01:05 SVG Favicons.
- 02:01 Every site can be a web app on iOS and iPadOS.
- 03:08 WebGPU in Safari.
- 08:02 Lots of CSS goodies.
  - @Una Tweet.
10:19 Remix 3 dropping React.
- Wake Up Remix.
- @mjackson Tweet.
17:40 Typescript Native Preview.
- @drosenwasser Tweet.
- Microsoft Blog: Announcing TypeScript Native Previews.
20:53 Cursor 1.0.
29:12 TC39 Advances Several Proposals to Stage 4.
- 29:51 Array.fromAsync.
- 31:15 Error.isError.
- 32:14 Explicit Resource Management: using.
36:53 Astro Creators working on an email client.
- @FredKSchott Tweet.
39:23 Announcing Rolldown-Vite.
- Voidzero.
- Compatibility.
44:43 Vite 7 in Beta.
46:04 Angular v20 Released.
47:30 Take the State of CSS Survey!
48:40 Brought to you by Sentry.io.

Hit us up on Socials!

912: Why did Figma buy a CMS?

Tue, 17 Jun 2025 15:00:00 -0000

Wes chats with James Mikrut, founder of Payload CMS, about being acquired by Figma! They discuss building an open source business, the future of UI design, AI interfaces, and what this means for the future of Payload and Figma.

Show Notes

00:00 Welcome to Syntax.
01:06 What is Payload CMS?
01:56 The big announcement.
03:03 Why does Figma want a CMS?
05:23 This has got to be about AI, right?
09:37 Brought to you by Sentry.io.
10:02 What will the interface be?
14:02 Generative, user-specific UI.
16:17 Agents make everything look like ShadCN.
18:18 What does this mean for Payload users?
20:23 How this improves Payload.
22:31 Trying to stand out as a CMS.
23:35 Is this going to cost users?
25:12 Sick Picks & Shameless Plugs.

Sick Picks

James: Triumph Street Triple, Malört Liquor.

Shameless Plugs

James: PayloadCMS.

Hit us up on Socials!

911: Browsers in 2025: Whats up with Arc, Dia, Firefox, Chrome and Opera GX?

Mon, 16 Jun 2025 11:00:00 -0000

Scott and Wes break down the state of web browsers in 2025, from the rise and fall of Arc and the fate of Firefox to hot takes on Opera GX, Raycast, and why power users might not be profitable. They compare rendering engines, rant about dev tools, and reveal what browser stats say about Syntax listeners.

Show Notes

00:00 Welcome to Syntax!
01:37 Rendering Engines.
02:11 Arc Browser.
02:41 Microsoft Edge.
03:45 Why not Brave?
05:25 Brought to you by Sentry.io.
05:50 Google Manifest v2.
07:32 Opera.
- OperaGX.
10:13 Vivaldi.
11:23 The death of Arc Browser.
- 11:44 Dia?
- 14:43 No revenue from power-users.
- Letter to Arc Members.
- 15:38 Arc’s transition to a new browser.
- 17:02 Browser companies need to lock users fast!
19:42 Gecko.
- 19:45 Firefox.
- 21:08 Zen.
22:38 Webkit.
- There Still Arent Any iPhone Browsers With Custom Engines
29:18 Wtf is Ladybird?
34:14 Usage statistics.
- StatCounter.com.
39:32 Dev Tools experience ranked.
42:06 Tab experience.
43:37 Containers and profiles.

Hit us up on Socials!

910: If Statements in CSS?

Wed, 11 Jun 2025 11:00:00 -0000

Wes and Scott talk about the new If statements in CSS, breaking down how they work, why they matter, and when to use them. They explore use cases, syntax quirks, and how this feature pushes CSS closer to true conditional logic—no JavaScript required.

Show Notes

00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io
02:37 CSS If statements in action
- CSS if() functions & reading-flow (in Chrome 137)
- CodePen - If with style without attr
09:08 Advanced examples and the attribute function
- CodePen - CSS If() Themes
13:43 Mixing If statements with media queries
- CodePen - CSS If() Mixed Logic
16:54 Can’t this be done with classes?
18:16 The future of CSS: declarative APIs
- CSS Battle LIVE! in Denver | Switch Edition
21:10 Is CSS now a programming language?

Hit us up on Socials!

909: Handling and Throwing Errors

Mon, 09 Jun 2025 11:00:00 -0000

We break down how to properly throw, catch, and log errors in JavaScript and TypeScript. They cover client-side and server-side strategies, using tools like Sentry, and how to handle errors without taking down your whole app.

Show Notes

00:00 Welcome to Syntax!
01:19 Error terminology.
- 01:42 Thrown and catching.
03:01 What’s in an error.
- 04:09 Name and message.
- 04:42 Stack.
- 07:12 Node system errors.
- 07:34 Messages: strings, objects, or custom errors.
08:19 Throwing errors.
12:01 Promise errors.
- 12:10 Try catch block, .catch().
- 14:13 Using awaited-to.
- 15:10 Finally.
- 16:29 promise.try()
17:14 Re-throwing errors.
- Error Cause
18:12 Client-side errors.
- 18:15 Catching at different levels.
- 18:51 Displaying errors.
- 21:59 Transforming server errors into client errors.
- 24:12 Error boundaries.
25:26 Server errors.
- 26:10 JSON API.
- 27:41 HTTP response codes.
30:09 Logging and solving errors.
- 31:16 Proudly supported by Sentry.io.
  - Logging within Sentry
36:16 TypeScript and errors.

Hit us up on Socials!

908: Storybook Has Evolved w/ Jeppe Reinhold

Wed, 04 Jun 2025 11:00:00 -0000

Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting.

Show Notes

00:00 Welcome to Syntax!
01:40 What is Storybook?
03:48 How Storybook makes component design easier
04:41 Vite integration and compatibility with other tools
- Vite
- webpack
- RSpack
06:50 Storybook’s significantly smaller bundle size
- e18e
- polka
13:31 Upgrading to Storybook 9
17:34 Testing components with Storybook
- Vitest
19:51 How do you write a component “story”?
24:29 Brought to you by Sentry.io
24:54 How visual testing works
28:38 How Storybook makes money
29:33 Best practices for component design
32:24 Mocking and testing strategies
34:49 Accessibility testing
40:51 Add-ons and future features
44:43 Storybook’s documentation
46:33 Sick Picks + Shameless plugs

Sick Picks

Jeppe: JBL Boombox 3 Wi-Fi

Shameless Plugs

Jeppe: chromatic

Hit us up on Socials!

907: Wes’ New Site: Gatsby → React Server Components

Mon, 02 Jun 2025 11:00:00 -0000

Wes rebuilt his personal site from Gatsby to a modern stack using Waku, React Server Components, and Cloudflare Workers — all while keeping the same design. Scott and Wes break down the pain points with Next.js, MDX, image handling, caching, and the custom setup that now powers a blazing-fast blog.

Show Notes

00:00 Welcome to Syntax!
01:03 Barcelona Conference.
04:09 Brought to you by Sentry.io.
04:33 Existing stack, goodbye to Gatsby.
06:11 New stack, the goals for moving.
06:56 So what is the new stack?
- 08:32 Challenges with NextJS.
- 08:58 Problems with plugins.
- 09:30 Problems with dynamic imports.
- 10:21 Problems with Cloudflare deployment.
12:37 Landing on Waku.
13:59 Hot Tips functionality updates.
16:30 Blog Posts + JavaScript Notes.
17:09 Moving from Gatsby.
19:03 Page speeds.
- 19:29 Removing nav resizing process.
- 21:03 Writing custom MDX plugins.
23:28 Hosting.
- 24:08 Why is the build so fast?
28:01 Pricing.
32:25 Caching.
34:49 Migration errors.
36:37 CSS.

Hit us up on Socials!

906: Tech Startups and Raising Money with Dan Levine (Vercel, Sentry, Mux…)

Wed, 28 May 2025 11:00:00 -0000

Wes and Scott talk with VC Dan Levine about how developers can raise venture capital, what investors look for in early-stage startups, the realities of bootstrapping vs. fundraising, and why great ideas often start as simple side projects.

Show Notes

00:00 Welcome to Syntax!
00:55 Dan’s background and career
03:10 Is it common for tech investors to come from a tech background?
04:40 How can developers raise money?
08:35 What investors look for
12:39 How much funding is enough?
15:41 Are founders working with multiple investors?
18:26 What can you use the money for?
22:49 How much influence do investors have in the business?
29:56 Brought to you by Sentry.io
29:56 How involved are VCs in the business?
34:22 How do you know a startup is in trouble—and what can you do about it?
38:56 How much of the company do investors own?
40:43 What’s the endgame for investors?
44:02 How do acqui-hires work?
46:29 Is the AI space a real opportunity or just hype?
53:22 Sick Picks + Shameless Plugs

Sick Picks

Dan:
- Dandelion Chocolate
- Jules Pizza

Shameless Plugs

Dan: Linear

Hit us up on Socials!

905: You Should Learn Nuxt!

Mon, 26 May 2025 11:00:00 -0000

CJ steps in for Scott and joins Wes to share his experience working with Nuxt, from routing and data fetching to the pros and cons of the framework. They break down the Nuxt ecosystem, directory structure, and how it handles server routes and modules.

Show Notes

00:00 Syntax Meetup!
00:26 Welcome to Syntax
01:21 The deal with Nuxt.
- CJ’s Nuxt Course.
02:51 Why do you like Vue?
04:52 Brought to you by Sentry.io.
05:17 Routing with Nuxt.
- h3 - The Web Framework for Modern JavaScript Era.
- Nuxt Guides.
06:12 Built on Nitro.
06:49 The Nuxt Ecosystem.
07:52 API Route Support.
08:15 Nuxt Directory Structure.
09:09 Does Nuxt do too much for you?
11:15 Data fetching in a Nuxt app.
13:25 RPC, Form Actions, Server Actions?
15:00 Nuxt Server Folder Hastle.
15:57 useFetch Hook.
- CJ’s Nuxt Crash Course.
17:29 Core Modules and Community Modules?
- Nuxt Modules.
- shadcn-nuxt.
- @nuxt/ui.
- DaisyUI.
- Pinia.
21:17 Nuxt Hosting.
- Deploy.
- hub.nuxt.
23:59 Anything you don’t like?

Hit us up on Socials!

904: React vs Svelte × Windsurf Worth $3B × Typescript as Const × Layout Shift Tricks × More

Wed, 21 May 2025 11:00:00 -0000

In this potluck episode of Syntax, Wes and CJ answer your questions about OpenAI’s $3B Windsurf acquisition, the evolving role of UI in an AI-driven world, why good design still matters, React vs. Svelte, and more!

Show Notes

00:00 Welcome to Syntax!
- Devs Night Out
02:35 OpenAI acquires Windsurf for $3B
- Windsurf
- Ep 870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding
05:20 What is the future of UI now that AI is such a heavy hitter?
08:45 Handling spam submissions on websites
- Cloudflare Turnstile
14:18 Duplicating HTML for desktop and mobile websites?
17:03 Is it okay to use a JSON file for simple website data?
19:04 How to handle anonymous and duplicate users
- Better-Auth
21:55 Working with TypeScript Object.keys() and “any” vs “@ts-ignore”
25:51 Brought to you by Sentry.io
26:38 What is the difference between React and Svelte?
30:24 How should you name your readme file?
31:55 How do you find time to refactor code?
35:20 Best practices for testing responsiveness
- Polypane
39:19 Avoiding layout shift with progressive enhancement
46:56 Sick Picks + Shameless Plugs

Sick Picks

CJ: Portable Chainsaw
Wes: White Lotus

Shameless Plugs

Hit us up on Socials!

903: Fork Yeah! Microsoft open sourcing Copilot

Mon, 19 May 2025 14:00:00 -0000

Scott and Wes are joined by Erich Gamma, creator of VS Code, and Kai Maetzel, Copilot Lead, to share some big news about the future of VS Code and Copilot. They discuss what it means for developers, how AI is shaping the future of coding, and why staying open to the community is key.

Show Notes

00:00 Welcome to Syntax!
01:00 The inception of VS Code.
02:49 VS Code adoption.
04:31 Brought to you by Sentry.io.
04:55 Syntax Denver Meetup!
05:19 The big announcement.
06:25 The current state of Copilot and VS Code.
08:31 The challenges with LLMs running outside of the codebase.
09:31 How to make a business case for AI.
10:47 The maturing of the AI landscape.
13:01 The limitations of extensions.
14:06 Open source vs closed source.
14:49 Copilot’s context is public.
19:23 Is context language-specific?
21:23 How does this affect paid Copilot features?
23:27 Secrets of Copilot’s server-side.
28:36 What will be open and what will not?
29:03 Is Copilot’s UI influenced by VS Code forks?
31:31 Maintaining VS Code identity in forks.
33:07 What does open-sourcing GitHub Copilot mean for Cursor and Windsurf?
38:42 Were you surprised to see VS Code forks?
40:03 Are other extensions able to tap into the AI offerings?
43:20 There’s work to be done.
44:13 The timeline.
45:39 Simulation Tests (S Tests).
48:07 How to test LLMs.
49:10 The future of software development with AI.
52:47 What’s your favorite model?

Hit us up on Socials!

902: Fullstack Cloudflare with React and Vite (Redwood SDK)

Wed, 14 May 2025 11:00:00 -0000

Wes talks with Peter Pistorius about RedwoodSDK, a new React framework built natively for Cloudflare. They dive into real-time React, server components, zero-cost infrastructure, and why RedwoodSDK empowers developers to ship faster with fewer tradeoffs and more control.

Show Notes

00:00 Welcome to Syntax!
00:52 What is RedwoodSDK?
04:49 Choosing openness over abstraction
08:46 More setup, more control
12:20 Why RedwoodSDK only runs on Cloudflare
14:25 What the database setup looks like
16:15 Durable Objects explained – Ep 879: Fullstack Cloudflare
18:14 Middleware and request flow
23:14 No built-in client-side router?
24:07 Integrating routers with defineApp
26:04 React Server Components and real-time updates
29:53 What happened to RedwoodJS?
31:14 Why do opinionated frameworks struggle to catch on?
34:35 The problem with Lambdas
36:16 Cloudflare’s JavaScript runtime compatibility
40:04 Brought to you by Sentry.io
41:44 The vision behind RedwoodSDK

Hit us up on Socials!

901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook

Mon, 12 May 2025 11:00:00 -0000

Scott and Wes break down the latest in JavaScript news, including new async patterns in Svelte, React Server Component tooling with Parcel, and Redwood’s push into Cloudflare with its new SDK. They also cover what’s new in Storybook 9 Beta, from visual testing to a sleeker, lighter build.

Show Notes

00:00 Welcome to Syntax!
02:50 Brought to you by Sentry.io.
03:37 Syntax Meetup!
04:09 React View Transitions.
08:58 addTransitionType.
11:18 Activity API.
- Offscreen Renamed to Activity.
14:22 Maintaining state in search queries.
16:29 Asynchronous Svelte.
- Playground.
19:04 Svelte Boundary.
25:13 Parcel RSC.
27:15 Redwood SDK.
30:55 Storybook 9 Beta.

Hit us up on Socials!

900: 13 New CSS Features You Can Start Using Today

Wed, 07 May 2025 11:00:00 -0000

899: GSAP: Killer Web Animations With Cassie Evans

Mon, 05 May 2025 11:00:00 -0000

Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers.

Show Notes

00:00 Welcome to Syntax!
00:59 What is GSAP?
- Cassie Codes.
01:53 GSAP Rebranding.
04:44 GSAP under the hood.
05:29 The big announcement!
07:19 GSAP Showcase.
11:01 Brought to you by Sentry.io.
11:26 Why is GSAP easier for animations?
- GSAP Docs.
12:38 Animating with SVGs.
13:33 The love of SVG.
14:55 GSAP is performant.
16:06 Gotchas to watch out for.
18:12 Does GSAP work with canvas?
19:02 What GSAP projects are you most proud of?
20:30 Does it play nice with web frameworks?
- GSAP with React.
22:32 What are you excited about in CSS right now?
- Scroll Timeline.
24:27 Will any of these make their way into GSAP?
26:31 Timelines.
29:24 Building animations with timelines.
34:55 What are the best GSAP plugins?
- Split Text
- spanran-wrap.
- Physics 2D Plugin.
38:44 GSAP docs and philosophy.
39:50 Scrubbing animations by frame.
41:09 GSAP Video Exporter.
41:45 Animating with JavaScript.
45:19 JavaScript in unconventional applications.
47:56 Is there anything missing in web tech?
50:53 What about AI in GSAP?
52:40 Sick Picks + Shameless Plugs.

Sick Picks

Cassie: Eyesy Video Synthesis.

Shameless Plugs

Cassie: Smashing Conf.

Hit us up on Socials!

898: Every Developer Needs a 3D Printer

Wed, 30 Apr 2025 11:00:00 -0000

Wes and Scott talk all things 3D printing—from fixing every day items to organizing tools, printing gadgets, and even teaching their kids entrepreneurship.

Show Notes

00:00 Welcome to Syntax!
03:34 Brought to you by Sentry.io
05:03 Practical uses of 3D printing
07:34 Creating tools for organization
- Gridfinity
10:33 Improving and adapting everyday items
- Underware
14:34 The benefits of printing something vs buying it
15:32 Choosing the right 3D printer
- Bamboo Lab
- Elegoo
- Prusa
- Flashorge
25:26 Projects and ideas
- Multiboard
31:33 Filament types and their uses
40:05 Finding affordable filament
- Deal Forager
46:07 Where to find 3D models
- Maker World
- yeggi
- Printables
- Thangs
- Thingverse
48:08 Creating your own 3D models
- Fusion
- Shapr3D
- Onshape
53:00 Modifying existing 3D models
54:30 Coding in 3D printing
01:01:25 Sick Picks + Shameless Plugs

Sick Picks

Scott: Alaska Bear Organic Silk Sleep Mask
Wes: BLV - AMS Riser

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

897: Making Your App Feel Faster Than It Really Is

Mon, 28 Apr 2025 11:00:00 -0000

Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance.

Show Notes

00:00 Welcome to Syntax!
01:12 Brought to you by Sentry.io.
02:34 Mousedown or pointerdown events.
06:00 UI animations should be fast.
08:00 Animations should not block interaction.
08:20 Animations should be cancellable / reversible.
10:50 Optimistic UI.
12:37 Local Data.
13:36 Delay loading indicators.
14:40 Page loading indicators.
15:47 Preload on hover.
17:13 Calculate mouse trajectory.
18:51 Full page spinner on every change.
20:04 Pixelated spinners.
20:23 Skeleton loaders.
23:43 Photo frames.
25:52 Search on input instead of search on click.
26:46 Progress loaders than move in between steps.
27:31 Community submissions.

Hit us up on Socials!

896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More

Wed, 23 Apr 2025 11:00:00 -0000

895: React Server Components: Where are we at?

Mon, 21 Apr 2025 11:00:00 -0000

Scott and Wes break down the current state of React Server Components — what they are, how they work, and why they’re so controversial. From framework support to bundling complexity, it’s everything you need to know about RSC in 2025.

Show Notes

00:00 Welcome to Syntax!
01:01 Brought to you by Sentry.io.
01:55 What exactly are React Server Components?
- 02:18 Server components rendering.
- 03:17 Server components are async.
- 03:45 Server components can be suspended.
- 05:05 Server components send RSC payloads to the browser.
  - 06:08 This feels like HTMX?
- 06:54 Client components are still server rendered.
- 07:58 Server Functions.
- 08:52 useActionState.
09:12 Frameworks and React Platforms.
- 09:16 NextJS.
- 09:42 Waku.
  - 12:26 candycode.com
  - Daishi Kato
- 14:23 React Router.
  - Michael Jackson Tweet.
- 19:29 Vite.
  - vite-plugin-react-server
- 20:54 Tanstack.
  - Syntax Ep 833.
- 22:39 Bun.
- 23:01 DIY.
23:39 Why so much hate?
25:28 I want it my way.
27:46 React Server Components lock-in.

Hit us up on Socials!

894: Open Source Matters w/ Chad Whitacre

Wed, 16 Apr 2025 11:00:00 -0000

Wes and Scott talk with Chad Whitacre, the newest member of the Syntax team, about all things open source—licenses, controversies, economics, and ethics. Chad breaks down what most people misunderstand, and how companies can support sustainable software development the right way.

Show Notes

00:00 Welcome to Syntax!
00:39 Meet Chad Whitacre
03:39 Chad’s retro headphones
- Retrospekt
05:00 Chad’s role at Syntax
- https://syntax.fm/oss
- Open Path
09:41 What do people get wrong about open source?
11:11 Why is open source so divisive?
13:01 The evolution of open source and free software
17:55 Single vendor vs. community open source
20:22 How do people build businesses off of a GPL license?
24:40 What’s the most pure version of open source?
26:55 Fair source licensing explained
30:30 Brought to you by Sentry.io
33:09 Should you be concerned about dependencies in your app in relation to licensing?
- Fair Source
35:16 What’s the most interesting/unusual open source license?
- Beerware License
40:00 What is Open Source Pledge?
- Open Source Pledge
45:41 Choosing the right open source license
48:31 Wes’ most popular open source project
- wait
49:39 Interesting open source projects
- Mercedes-Benz embraces Open Source
- Porsche Open Source Platform
51:33 Licensing for educational content
53:46 The beauty of open source
- Plausible
56:12 Scott’s various open source projects
56:44 The importance of contributing to open source projects
59:16 Sick Picks + Shameless Plugs

Sick Picks

Chad: Save The Cat!

Shameless Plugs

Chad: Coming soon

Hit us up on Socials!

893: Everyone Is Talking About MCP

Mon, 14 Apr 2025 11:00:00 -0000

Scott and Wes break down the Model Context Protocol (MCP), a new open standard that gives AI agents secure, tool-like access to your dev environment. They cover how it works, why it’s a big deal for AI coding workflows, and real-world use cases like GitHub, Sentry, and YouTube.

Show Notes

00:00 Welcome to Syntax!
00:49 The lore of ICP.
- Wes MCP Shirt.
03:09 Brought to you by Sentry.io.
03:33 What is MCP?
05:06 The steps of AI coding.
- 07:11 MCP hosts.
- 07:28 MCP clients.
- 07:35 MCP servers.
08:24 Why you might want to do this.
- 10:39 How this works in VS Code.
- 14:10 Wes built an MCP server.
  - SVGL.
- 14:57 Playwright.
- 17:24 Sentry’s implementation.
  - Building Sentry’s MCP with David Cramer.
- 18:54 YouTube implementation.
- 21:19 DaVinci Resolve implementation.
  - Smithery.
23:02 Postgres.
24:40 Transport protocols.
24:49 STDIO.
25:19 SSE.
25:32 Streaming.
26:24 Writing you own MCP server.
26:28 FastMCP.
27:00 Cloudflare.
28:01 Data validation.
28:47 Standard schema.
- Episode 873.
29:27 Other parts of MCP.
- 29:35 MCP resources.
- 30:37 MCP prompts.
- 30:48 MCP roots.

Hit us up on Socials!

892: The History of Syntax

Wed, 09 Apr 2025 11:00:00 -0000

Wes and Scott talk about the origins of Syntax, sharing how a friendly course name conflict led to a mastermind group, then a podcast, and eventually a full-blown media brand. They also reflect on key milestones, from early episodes and sponsorships to joining Sentry, expanding the team, and what’s next.

Show Notes

00:00 Welcome to Syntax!
00:51 How Wes and Scott met
09:31 How Syntax got its name
- Episode 001: React Tools
15:30 Getting sponsors
- Delicious Brains
- FreshBooks
18:53 Hasty Treats and expanding the show
22:36 Adding interviews to Syntax
- SVGs with Sara Soueidan
23:38 Syntax’s first live show
- Live at JAMstack_conf
27:58 Brought to you by Sentry.io
28:34 Acquisition by Sentry
- 600th Episode! Major Announcement and Swag Giveaway!
33:56 Hiring a producer
- Randy Rektor
36:39 Transitioning to video and growing the team
41:47 Launching the merch store
- Sentry.shop
46:01 The future of Syntax
47:23 Sick Picks + Shameless Plugs

Sick Picks

Scott: Crucial X10 Pro 4TB Portable SSD
Wes: MONVICT Cordless Glue Gun

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

891: Light and Dark Mode

Mon, 07 Apr 2025 11:00:00 -0000

Light mode? Dark mode? Scott and Wes break down the best ways to implement theme switching in CSS, from prefers-color-scheme to manual overrides. Plus, tips on handling shadows, icons, and the dreaded flash of dark mode!

Show Notes

00:00 Welcome to Syntax!
01:05 Brought to you by Sentry.io.
02:06 Light and dark mode, things to consider.
02:31 Light and dark mode from scratch.
- drop-in.css.
- 04:41 Calculations vs assigned color.
- 05:32 color-mix and relative color.
- 08:15 Foreground and background variables.
  - –tint-or-shade: color-mix(in oklab, var(–fg), transparent 95%);
  - –tint-or-shade-harder: color-mix(in oklab, var(–fg), transparent 90%);
- 09:13 Setting color scheme.
- 12:38 light-dark function in CSS.
15:48 Manually setting dark mode.
- 18:43 The challenges with shared caching.
- 19:33 Tailwind CSS implementation.
  - Tailwind dark-mode.
19:52 Shoehorning in dark mode.
22:25 Other things to consider.
- 22:28 Color contrast.
  - Lea Verou contrast-color.
- 24:39 Logos.
- 25:22 Icons and images.
- 26:20 Accessibility.
  - Polypane.

Hit us up on Socials!

890: Accepting Money on the Internet in 2025

Wed, 02 Apr 2025 11:00:00 -0000

Wes and Scott talk about the ins and outs of accepting payments online—from choosing processors like Stripe and PayPal to handling fraud, taxes, custom checkouts, and more.

Show Notes

00:00 Welcome to Syntax!
02:34 Payment processors
- Stripe
- PayPal
- Square
- Authorize.net
09:29 Checkouts
18:22 The checkout flow
23:10 Methods of accepting money
25:30 Brought to you by Sentry.io
28:34 Merchant of Record
- Lemon Squeezy
- Gumroad
- Paddle
- Beacons
32:51 Handling fraud, disputes, and refunds
41:25 Sick Picks + Shameless Plugs

Sick Picks

Scott: Parcel
Wes: Parcels App

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

889: Planning A Build

Mon, 31 Mar 2025 11:00:00 -0000

Scott and Wes talk about the planning process for a major redesign of the Syntax.fm website. They share their thoughts on organizing tasks, choosing tech, handling styling, and the debates that come with deciding what to keep and what to change.

Show Notes

00:00 Welcome to Syntax!
01:36 Brought to you by Sentry.io.
02:48 Why we need version 3.0 of Syntax.fm.
- Level Up Tutorials, Travis Neilson.
04:41 Project planning and organization.
05:53 The codebase.
09:50 The CSS changes.
- Episode 770: Design Systems With Brad Frost.
12:27 Tooling.
15:54 Development process.
16:38 Mobile and responsiveness.
18:37 Saving VS Code extension into the repo.
19:56 Using a dev container.
20:53 AI agent rules.
21:35 Code styles.
23:42 Canadian podcast.
24:33 Content storage.

Hit us up on Socials!

888: You Need a Monorepo × Client Only React × TanStack + More

Wed, 26 Mar 2025 11:00:00 -0000

887: Vibe Coding Is a Problem

Mon, 24 Mar 2025 11:00:00 -0000

Is Vibe Coding the future of software development or just a fun way to experiment? Scott and Wes talk about coding with AI, the risks of ignoring the details, and the cool (and sometimes cursed) projects they’ve Vibe Coded.

Show Notes

00:00 Welcome to Syntax!
00:31 “Personal Software”.
01:30 What exactly is Vibe Coding.
02:46 The challenges of coding with AI.
- Levelsio Airplane Game.
04:49 Brought to you by Sentry.io.
05:39 Vibe coding quality concerns.
07:25 Vibe Coding as a learning tool.
10:11 Things we’ve Vibe Coded.

Hit us up on Socials!

886: AWS and IAC for Dummies with SST

Wed, 19 Mar 2025 11:00:00 -0000

Wes and Scott talk about Infrastructure as Code and how SST makes deploying to AWS easier than ever. They dive into SST’s features, developer experience, and how it simplifies managing services like databases, email, and more. Plus, insights on Cloudflare integration, auto-scaling, and real-world use cases.

Show Notes

00:00 Welcome to Syntax!
- Supper Club × Next.js on AWS + Serverless with Dax Raad
02:37 Brought to you by Sentry.io
04:52 Intro to SST config
- SST
- AWS
05:40 Overview of Scott’s SST config file
12:33 Exploring SST’s endless capabilities
- SST’s docs
- Cloudflare
15:42 The SST developer experience
- Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan
- Supper Club × Flightcontrol with Brandon Bayer
19:05 SST console and GUI overview
22:13 Resource management and pricing
24:52 Secrets management
27:38 Tunneling and security
- https://sst.dev/docs/live
30:52 Simplifying DNS
35:18 Sick Picks + Shameless Plugs

Sick Picks

Scott: Aquaphor Healing Ointment
Wes: Magnetic Picture Hanger Frame

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

885: CSS Fonts Fallbacks, Variable and Trimming

Mon, 17 Mar 2025 11:00:00 -0000

Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type.

Show Notes

00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
- Damnit Sans.
02:53 @font-face.
03:27 Font Display.
07:40 Avoiding layout shift.
- Fallbacks.
10:45 Variable fonts.
- Fontaine.
- font-kit
- Wakamai Fondue.
- Syntax Ep. 782.
- Font Variation Settings.
16:23 Variable font sizing.
17:46 v-fonts.
19:10 text-box-trim & text-box-edge.
- text-box-trim examples.
21:28 Browser support.

Hit us up on Socials!

884: Typescript Just Got 10x Faster

Tue, 11 Mar 2025 14:35:00 -0000

Wes and Scott talk with Anders Hejlsberg and Daniel Rosenwasser about TypeScript’s leap to native code. They discuss the challenges, trade-offs, and the decision to port TypeScript to Go, unlocking faster compilation, better concurrency, and new possibilities for AI-assisted development.

Show Notes

00:00 Welcome to Syntax!
00:38 TypeScript compiler goes native
05:24 Challenges in rebuilding TypeScript
08:49 How long has this been in development?
10:32 What does porting TypeScript to native entail?
16:36 Why choose Go?
26:48 The porting process
35:02 Brought to you by Sentry.io
35:27 Type checking and parallel compilation
42:36 Fixing TypeScript’s performance bottlenecks
49:09 Large TypeScript codebases
54:11 What’s the timeline for the new compiler?
58:39 Optimization and AI
01:00:32 New features?
01:04:15 Sick Picks + Shameless Plugs

Sick Picks

Daniel: pprof-it
Anders: USB Hand Warmers

Shameless Plugs

TypeScript

Hit us up on Socials!

883: Web Vitals Explained

Mon, 10 Mar 2025 12:00:00 -0000

What are Web Vitals, and why should you care? Scott and Wes break down metrics like LCP, FCP, CLS, and INP, explaining what they measure, how they impact your site’s performance, and how to track them yourself.

Show Notes

00:00 Welcome to Syntax!
03:26 What each web vital means.
- Web Vitals Playground.
- 03:38 LCP - Largest Contentful Paint.
- 05:04 FCP - First Contentful Paint.
- 06:07 CLS - Cumulative Layout Shift.
- 10:58 INP - Interaction to Next Paint.
  - 13:43 Measuring the impact.
- 14:22 TTFB - Time to First Byte
15:27 How to track this on your own.
17:42 Checking the performance of Syntax.fm.
21:07 Brought to you by Sentry.io.
- Sentry Web Vitals.
21:49 Checking the performance of Wes’ site.

Hit us up on Socials!

882: Aaron Francis is putting PHP in Your JS Files

Wed, 05 Mar 2025 12:00:00 -0000

Wes and Scott talk with Aaron Francis about Fusion for Laravel, a new way to seamlessly integrate PHP into JavaScript. They discuss how Fusion expands on Inertia, its potential for React support, and how it simplifies full-stack development.

Show Notes

00:00 Welcome to Syntax!
01:22 Aaron’s background in PHP
- Yii
- Laravel
02:27 What is Fusion for Laravel?
- Fusion for Laravel
09:14 How Fusion works
13:57 The benefits of Laravel
19:18 Invalidation and caching
25:20 Brought to you by Sentry.io
25:32 Optimistic UI
28:28 React integration?
31:44 Fusion’s original name (and the naming process)
33:30 Laravel’s approach to frontend frameworks
- Livewire
37:32 Databases and scaling
41:27 Postgres extensibility and hosting options
- Crunchy Data
- Xata
47:44 The vision for Fusion
48:31 Sick Picks + Shameless Plugs

Sick Picks

Aaron: Better Display CLI

Shameless Plugs

Aaron:

Hit us up on Socials!

881: What Happened to Remix. Worth Using Axios? Client Only Next.js?

Mon, 03 Mar 2025 12:00:00 -0000

Scott and Wes answer your listener questions! They debate Axios vs. Fetch, discuss whether Next.js is overkill without a backend, talk htmx and Alpine, dive into tech career transitions, and tackle everything from podcast ads to password hashing myths.

Show Notes

00:00 Welcome to Syntax!
00:55 Scott’s health update.
04:11 Submit your questions.
04:26 Is Axios still worth using over Fetch?
- shiki.
- xior.
- ky.
10:17 Does Alpine.js solve HTMX’s client-side limitations?
16:47 How should I host my database for a local-first app?
- Neon Tech
22:50 Brought to you by Sentry.io.
24:14 Should I use Next.js if I want a separate backend?
- Create Vite Extra.
32:08 Are ad networks like BuySellAds worth it for podcasts?
36:36 Can I transition from airline pilot to senior software developer?
41:23 Is Base64 encoding a valid alternative to password hashing?
45:43 How do I use unexported functions from a third-party package?
48:09 How do you stay on top of package and browser updates?
- Syntax Ep. 425: Updating Project Dependencies.
- npm-check-update.
52:38 Why are Chrome and Firefox’s mobile presets outdated?
57:20 Should I give feedback on bad UX/UI designs from agencies?
01:01:53 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Nothing Ear (a).
Wes: SmallRig Phone Cage.

Shameless Plugs

Wes: Syntax on YouTube.

Hit us up on Socials!

880: Creator of Home Assistant: Web Components, Self Hosting and Home Hacking

Wed, 26 Feb 2025 12:00:00 -0000

Wes and CJ talk with Paulus Schoutsen, creator of Home Assistant, about the future of smart homes, AI-powered automation, and open-source innovation.

Show Notes

00:00 Welcome to Syntax!
00:29 What is Home Assistant?
03:32 Web Components in Home Assistant
- Home Assistant Frontend
10:41 Home Assistant’s stability and longevity
17:05 Is Home Assistant the biggest open-source project using web components?
20:03 How does the native app work?
23:34 Code sharing between Android and iOS
24:17 Self-hosting Home Assistant
28:13 Brought to you by Sentry.io
30:47 Bundle size and memory usage
32:29 How AI and voice assistants are shaping the future of Home Assistant
- Talking with Home Assistant
37:16 How Paulus made it possible to flash microcontrollers directly from the browser
- Open Home Foundation
43:48 Web Serial and Web Bluetooth APIs
47:03 Matter, Zigbee, and Z-Wave – where smart home standards are headed
- Matter
- Zigbee
- Z-Wave
51:17 Paulus’ smart home setup
- Reolink
- Yale
53:16 Sick Picks + Shameless Plugs
- Andrew Schmelyun

Sick Picks

Paulus: Bambu 3d Printer

Shameless Plugs

Paulus: Nabu Casa

Hit us up on Socials!

879: Fullstack Cloudflare

Mon, 24 Feb 2025 12:00:00 -0000

Wes and CJ break down everything Cloudflare—from Workers and R2 Storage to Hyperdrive and AI Gateway. Get the scoop on what makes Cloudflare tick, the quirks of their ecosystem, and whether vendor lock-in is a real concern.

Show Notes

00:00 Welcome to Syntax!
01:40 Brought to you by Sentry.io.
01:58 What we’re talking about today.
02:48 Cloudflare Workers.
- 03:06 How Cloudflare Workers… work.
- 04:39 How Cloudflare Workers run.
- 06:05 Workers size limitations in JavaScript.
- 07:37 Cloudflare has their own way.
- 08:13 Potential vendor lock-in.
- 08:51 You pay based on CPU time, not wall time.
10:26 Cloudflare Pages.
- Compatibility Matrix
12:07 Durable Objects.
- Zeb X Post.
- PartyKit.io, tldraw.
16:41 Cloudflare Workflows.
19:52 How we do something similar on Syntax.fm.
20:52 Cloudflare Queues.
25:26 Files.
26:15 R2 Storage.
- Ep 780: Cloud Storage: Bandwidth, Storage and BIG ZIPS.
28:00 The Open Bandwidth Alliance.
28:39 Image Pipelines.
33:24 Cloudflare Stream.
- Streaming Video in 2025.
34:24 Data.
36:37 Key Value.
40:16 Time To Live.
41:13 Hyperdrive.
- How It Works.
- Query caching.
44:01 Vectorize Data.
45:41 AI Gateway.
47:49 Automated Rate-Limiting.
48:50 Frameworks.
- Orange.js.
52:13 Analytics Engine.
- Counterscale.
- Ep 761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar.
52:52 WebRTC Engine.
53:01 Puppeteer API.
54:09 Sick Picks + Shameless Plugs.

Sick Picks

CJ: Flush MicroSD Adapter for Macbook
Wes: Synology.

Shameless Plugs

Wes: Syntax on YouTube.

Hit us up on Socials!

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

Wed, 19 Feb 2025 12:00:00 -0000

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

Mon, 17 Feb 2025 12:00:00 -0000

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

Wed, 12 Feb 2025 12:00:00 -0000

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

Mon, 10 Feb 2025 12:00:00 -0000

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

Wed, 05 Feb 2025 12:00:00 -0000

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

Mon, 03 Feb 2025 12:00:00 -0000

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

Wed, 29 Jan 2025 12:00:00 -0000

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

Mon, 27 Jan 2025 12:00:00 -0000

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!

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

Wed, 22 Jan 2025 12:00:00 -0000

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!

869: Node + TypeScript in 2025

Mon, 20 Jan 2025 12:00:00 -0000

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!

868: The State of JavaScript

Wed, 15 Jan 2025 12:00:00 -0000

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

Show Notes

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

Sick Picks

Wes: Headted Vest
Scott: Super Mario Party Jamboree

Shameless Plugs

Syntax YouTube Channel

Hit us up on Socials!

867: Zero Sync is the Future of Data Loading

Mon, 13 Jan 2025 12:00:00 -0000

What’s the deal with Zero Sync? Scott and Wes dive into this cutting-edge database tech, exploring its real-time interactivity, blazing-fast performance, and how it stacks up against the competition. Plus, they break down setup, querying, authentication, and whether it’s ready for prime time.

Show Notes

00:00 Welcome to Syntax!
01:59 Brought to you by Sentry.io.
02:21 Today’s agenda.
02:52 What is Zero Sync?
- The Docs.
- InstantDB.
07:02 Zerobugs loading speed.
11:04 Real-time interactivity.
11:38 Why is it different?
12:11 How to get it set up.
- 12:58 Querying Data.
- 16:22 Writing data.
- 16:31 Upsert.
- 17:39 Authentication and permissions.
  - Johannes Schickling Ep 767.
- 19:27 Preloading.
- 19:41 Migrations and deployment.
20:17 Some extras.
21:16 CreateSubscriber.
23:08 Can you use this today?
- Zero Syn Roadmap.
- Scott’s YouTube Video.

Hit us up on Socials!

866: 2025 Web Development Predictions

Wed, 08 Jan 2025 12:00:00 -0000

Scott and Wes look into their crystal ball to predict what’s coming in web development next year. From the rise of on-device AI to the vanilla CSS comeback, Bun’s big moves, and React’s evolution, this episode is packed with bold predictions and hot takes!

Show Notes

00:00 Welcome to Syntax!
02:00 Brought to you by Sentry.io.
03:09 The agenda.
03:40 Temporal Javascript api will ship in Safari and Chrome.
- Temporal Proposal.
06:23 On device AI.
- WebGPU API
- Dawn Native WebGPU
10:26 Models will plateau.
- Bolt.new, v0, Lovable.dev.
13:40 Web Awesome will become the most used web components library.
- Web Awesome.
15:57 We will be using more web components.
16:59 A push towards the ‘standard stack’.
19:38 We can really use relative color.
21:39 Vanilla CSS comeback.
23:35 A complete Mixins / Functions API for CSS.
24:27 Conditionals will ship in all browsers.
25:50 People will still make vertical centering jokes.
27:08 VSCode will be feature parity with Cursor.
28:22 Framework choice will matter less with AI tools.
29:12 OpenAI will launch a browser.
- Dupe.com.
- Buy Now! The Shopping Conspiracy.
- Krazy Binz.
37:18 React will drop Babel.
- BabelJS.
38:05 React Server Components will pop.
39:46 Remix will relaunch as something entirely different.
41:11 React Native will have it’s time.
42:06 Svelte will get component-based islands or data loading.
44:19 Server Runtimes, Bun will continue to do non-standard, lovable things.
44:44 Bun will release a PAS to compete with NPM, Vercel, and Vite.
46:06 Laravel will release a CMS.
47:57 Vite will stay king.
48:03 Rolldown ships in the next version of Vite.
- Rolldown.
- Statamic.
49:35 Sick Picks & Shameless Plugs.

Sick Picks

Scott: PHILIPS A19 Ultra Definition Dimmable Light Bulb.
Wes: Stats App.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd

Mon, 06 Jan 2025 12:00:00 -0000

Scott and Wes challenge each other’s knowledge on everything from array sorting quirks to browser isolation types in a rapid-fire trivia format. They dive deep into performance optimizations, TypeScript type safety, and HTML best practices while uncovering surprising edge cases that every web developer should know about.

Show Notes

00:00 Welcome to Syntax!
00:43 Brought to you by Sentry.io.
01:23 Question 1: Array Sort Default Behavior.
03:24 Question 2: Splitting Into Individual Words & Characters.
06:06 Question 3: NodeJS Stream Backpressure.
09:07 Question 4: Custom Middleware Rate Limiting.
13:00 Question 5: Transform Function Property Changes.
15:18 Question 6: TranslateZ & Will-Change Performance.
17:52 Question 7: Table Structure Best Practices.
20:23 Question 8: Dialog vs Div with Dialog Role.
23:21 Question 9: TypeScript Unknown vs Any & Never.
26:31 Question 10: Response Type Safety in TypeScript.
29:48 Question 11: Browser Isolation Types.
32:54 Question 12: HTML Quirks Mode Behavior.

Hit us up on Socials!

864: Durable Objects × Tab State Hacks × Headless CMS Choices + More

Wed, 01 Jan 2025 12:00:00 -0000

Scott and Wes ring in the new year, answering listener questions on the rise of durable objects, handling tricky tab state in e-commerce apps, and their top picks for headless CMS. They also chat about the future of CSS, deployment platforms, and whether Syntax beanies might finally be a thing!

Show Notes

00:00 Welcome to Syntax!
00:52 Brought to you by Sentry.io.
03:10 What Are Durable Objects?
08:25 CSS Anchor Positioning: Cross-Browser Support Update.
- Implement CSS Anchor Positioning.
12:48 Freelancers: UX and Design Skills vs. Functional Expertise.
16:47 Choosing the Best Deployment Platform.
- Syntax Episode 615.
20:49 Making Websites WCAG Compliant.
- Polypane.
22:35 Managing Tab State in Complex Apps.
28:43 Will CSS Ever Be Complete?
33:21 When Will Syntax Beanies Drop?
- Syntax Swag Store.
35:21 The Best Headless CMS for a Tech Blog.
42:15 From Many Packages to Monolithic Frameworks.
46:41 Sick Picks + Shameless Plugs.

Sick Picks

Scott: The Sheet with Jeff Marek.
Wes: 28” 4K+ BenQ Programming Monitor.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

863: 2024: A Year in Review

Mon, 23 Dec 2024 12:00:00 -0000

Scott and Wes look back at 2024 and share highlights from a big year for Syntax and the web dev world. They review their 2024 predictions to see what they got right (and wrong), and break down the major moments in web development from CSS improvements to AI editors and beyond.

Show Notes

00:00 Welcome to Syntax!
01:30 Changes to the Syntax podcast.
05:56 What happened this year?
- 06:07 React.
- 06:36 Solid Start.
- 07:04 Tanstack Start.
- 07:43 Remix
- 09:42 AI Editors.
- 11:53 Vite 6.
- 14:02 Bluesky.
- 19:52 CSS.
22:17 What did we do?
- 22:21 React Miami.
  - React Miami Episode.
- 22:26 JSNation Amsterdam.
- 23:55 JSNation US + React Summit.
- 24:57 Terminal Feud.
- 26:28 Laravel + Terminal basketball game.
- 27:02 Syntax San Francisco meetup.
- 27:23 GitHub Universe.
- 28:07 FITC.
- 28:38 153 Syntax Episodes + Video.
29:32 Our 2024 Predictions Reviewed.
- 29:46 Types in JS will have real movement.
- 31:29 Temporal API will ship in 1 browser.
- 32:50 Perf tooling gets easy for everyone to understand.
- 33:29 CSS continues to get better where you need less JS.
- 34:25 Svelte v5 is very fast.
- 34:38 The year of the server in frameworks.
- 35:28 Astro is going to have a good year.
- 36:13 React server components.
- 37:03 Remix moves away from page-based loaders, to component loaders.
- 37:18 Hono will become more ubiquitous.
- 38:28 We will see a route matching Proposal move ahead.
- 39:23 Bun releases full node compat.
- 40:42 We will see a new Linter + formatter entirely replace.
- 42:16 New TypeScript typechecker.
  - Ezno.
- 43:40 Lightning CSS pops - or does it?
- 45:10 You’ll hear more about Rspack and Turbopack.
- 45:51 Vite isn’t going to release anything big in 2024.
- 46:24 Relative color will land in all major browsers.
- 48:14 CSS contrast-color will land in chrome.
- 48:48 Scroll animation landing in 2 browsers.
- 50:03 The year of CSS discovery.
- 51:09 Safari will Ship 3 missing PWA Support.
- 52:11 Firefox usage will continue to slip.
- 56:53 Paid Arc features.
- 57:14 More XR web experiences as Apple releases in Vision Pro.
- 59:55 AI Tooling.
- 01:00:57 Small Models that run in the browser.
- 01:01:38 Apps get Sherlocked by OpenAI.
- 01:02:04 On prem corporate AI.
01:04:49 Sick Picks + Shameless Plugs.

Sick Picks

Scott: TCGPocket App.
Wes: Huge Bag of Croc Charms

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

862: Svelte 5 Is Here!

Wed, 18 Dec 2024 12:00:00 -0000

Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains.

Show Notes

00:00 Welcome to Syntax!
- Scott’s Svelte5 Overview.
01:27 Brought to you by Sentry.io.
02:06 What’s new in Svelte 5?
- 02:13 Runes.
  - 04:47 $state
  - 07:00 $state.snapshot
  - 11:47 $derived
  - 12:46 $derived.by
  - 15:41 $effect
  - 17:24 $effect.pre
  - 18:05 $effect use cases.
  - 22:20 $props
  - 24:57 Binding state.
  - 27:15 $inspect
    - vsode-wrap-svelte.
  - 28:46 $inspect(…).with
- 30:42 Snippets.
- 34:22 Events now onclick instead of on:click.
- 36:09 Custom events now just props instead of createEventDispatcher.
36:31 Serif Font on website.
40:01 Performance.
- Benchmarks Doc.
- Benjamin McCann Tweet.
46:41 Is Svelte becoming React?
49:21 Migration.
51:41 What’s next and wish list for Svelte.
57:12 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Dragon Quest 3.
Wes: Dresscode.dev.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB

Mon, 16 Dec 2024 12:00:00 -0000

Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure.

Show Notes

00:00 Welcome to Syntax!
00:30 Brought to you by Sentry.io.
01:43 Why store data locally.
- 01:55 User preferences and settings.
- 02:50 Not logged in state (shopping carts, etc).
- 03:30 Data for faster loading.
- 03:51 Privacy concerns.
- 04:25 Large files or drafts.
- 05:50 Auth tokens.
07:08 Where to store data.
- 07:11 Cookies.
- 07:48 Local storage.
- 09:15 Session storage.
- 10:35 IndexedDB.
12:15 BYOJS Storage.
13:41 SQlite via WASM.
14:12 Penalties of SQLite in browser via WASM.
15:29 PGLite.
16:23 Dealing with migrations.
16:55 The advantages of the approach.
18:42 Dexie.
19:59 Patch messages.
21:25 A few options.
- TinyBase Docs.
- Local First Web.

Hit us up on Socials!

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

Fri, 13 Dec 2024 12:00:00 -0000

Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.

Show Notes

00:00 Welcome to Syntax!
00:48 Zach background and role at ByteDance
03:10 ByteDance’s web and native apps
06:48 What is Module Federation?
- Zephyr Cloud
15:49 Evolution from V1 to V2 of Module Federation
24:47 When to consider Module Federation
29:46 How would you publish a utils package in Module Federation?
32:59 How would you do a major upgrade?
36:36 Brought to you by Sentry.io
37:01 Who owns the update process?
39:40 Handling multiple frameworks
42:10 ModernJS and Meta frameworks
- ModernJS
- Rspress
47:20 Does ByteDance have its own JavaScript runtime?
- NAPI
50:02 Why Zack built Rspack
- Rspack
- Rsbuild
58:15 The future of Rspack and custom bundlers
- Unpack
01:04:24 Module Federation’s major features
01:07:29 Sick Picks & Shameless Plugs

Shameless Plugs

Zack:
- Zephyr Cloud
- Midscene.js

Hit us up on Socials!

859: Streaming Video in 2025

Wed, 11 Dec 2024 12:00:00 -0000

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs.

Show Notes

00:00 Welcome to Syntax!
00:50 Brought to you by Sentry.io.
01:15 The history of video streaming.
02:10 How video streaming works: The Tech.
03:54 How video streaming works: Transcoding.
06:37 How video streaming works: Variants.
- ffmpeg.
- Wes’ R2-video-streaming.
- Wes’ Transcoding.
- YT-DL.
- YT-DLP.
13:13 Dynamic ad insertion.
14:29 Bandwidth and hosting.
- Mux.
18:03 Cloudflare.
19:13 The costs.
- Wes Bos Tweet Cloudflare TOS.
- Steve Tenuto tweet.
25:39 Media players.
- Media Chrome.
29:42 CDN.
32:04 Access control.
33:35 Solutions.
- Mux.
- Cloudflare Stream.
- Bunny.net Stream
- AWS Media Convert.
- Cloudinary.
- Bitmovin.
41:55 Some other features.
45:47 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Anker MagGo.
Wes: PolyCapture.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

858: How to Go Deeper With Your Learning

Mon, 09 Dec 2024 12:00:00 -0000

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.

Show Notes

00:00 Welcome to Syntax!
02:48 Brought to you by Sentry.io.
03:54 How do you go deeper?
04:23 Pick a project and build it.
06:36 Read the docs.
- Svelte Docs.
09:07 Read the source.
11:19 Consume content: blogs, conference talks, etc.
- Dot Conferences on YouTube.
- GitNation JavaScript Conferences.
16:24 Discord and Reddit.
19:31 Get mentorship and ask questions.

Hit us up on Socials!

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

Fri, 06 Dec 2024 12:00:00 -0000

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget.

Show Notes

00:00 Welcome to Syntax!
03:01 Brought to you by Sentry.io
04:14 Understanding signal-to-noise ratio
06:48 Using de-noise
- iZotope Voice De-noise
09:12 The importance of mic technique
10:28 Dealing with electrical noise
11:15 The proximity effect
13:01 Sound treatment vs sound proofing
- Sound Wavelength Calculator
- Syntax 516: Wes’ New Soundproof Office
- Studiobricks
- Randy’s Studiobricks video
- GIK Acoustics
23:33 Do egg crates work for sound treatment?
25:22 USB mics vs XLR mics
- Shure MV6
- Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn
27:06 Video composition
30:18 How to improve your lighting
35:37 Choosing the right camera
36:58 The importance of codecs and bitrates
38:14 What to look for in a webcam
38:50 Randy’s packages for $50, $150 and $500-$1000 budgets
40:02 The $50 package/selecting your mic
- Feelworld PM1
- Fifine K688
- heyday Stone White Desktop Mic
43:53 The $150 package
- Neewer lights
45:32 The $500-$1000 package
- Shure MV6
- Insta360 Link 2
- Insta360 Link 2c
- Elgato Cam Link 4k
- Sonay a6000
51:07 Mic stand recommendations
- VIVO
56:50 Sick picks & Shameless Plugs

Sick Picks

Randy: etymologynerd on TikTok

Shameless Plugs

Randy: Randy’s YouTube Channel

Hit us up on Socials!

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

Wed, 04 Dec 2024 12:00:00 -0000

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners.

Show Notes

00:00 Welcome to Syntax!
00:50 Brought to you by Sentry.io.
02:23 Apple developer accounts and certificates.
06:58 Hono, SvelteKit, and using them together.
11:14 Rspack & Rsbuild over Vite?
- Rspack, Rsbuild.
- Rolldown, Rollup.
- oxc.
- Turborepo.
21:01 Quoting projects without seeing under the hood.
25:26 HTTP cookies, partitioned cookies, and chips.
- Partitioned Cookies.
30:29 Redirect codes; 301, 302, 303, 307
- 418 I’m a teapot.
36:22 Gaining inspiration for talks and posts.
40:02 My loading state is too fast! Should I use setTimeout?
- setTimeout Docs.
42:29 Interviews and landing the job.
49:50 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Stainless Steel Cookware.
Wes: Dim Lightbulbs, steelpan.guy on TikTok.

Shameless Plugs

Scott: Potluck Submissions.
Wes: Syntax on YouTube.

Hit us up on Socials!

855: Fast Websites: The New Speculation Rules API

Mon, 02 Dec 2024 12:00:00 -0000

Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers.

Show Notes

00:00 Welcome to Syntax!
00:49 Pre-loading, prefetching, and pre-connecting.
- CSS Wizardy.
- CSS Wizardy on GitHub.
02:06 Brought to you by Sentry.io.
03:16 Benefits of pre-loading, prefetching, and pre-connecting?
07:02 The Speculation Rules API.
- mdn web docs.
08:20 Isn’t that expensive?
08:53 Eagerness of the Speculation Rules API.
09:55 What is the cost for the site?
14:42 What is the cost for the user?
15:49 Next Master.
- Next Master.
18:07 The current prevalence.

Hit us up on Socials!

854: Animating the Web With Matt Perry: Exploring motion.dev

Fri, 29 Nov 2024 12:00:00 -0000

Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation.

Show Notes

00:00 Welcome to Syntax!
01:15 The Framer Motion story
- Motion
05:16 What’s the status of Framer Motion today?
09:08 What tech is Motion built on?
13:40 Is Motion entirely WAAPI?
16:06 Why hasn’t the Web Animation API gained more traction?
17:46 Does Matt design his demos?
19:25 Performance and testing
25:34 Brought to you by Sentry.io
28:10 Have other animation libraries influenced Motion?
- Svelte
- GSAP
- Anime.js
31:49 Micro-Optimizations in JS
36:02 How do you test frame rates?
38:03 Graphics programming and shaders
- Maxime Heckel
- Maxime’s blog
39:58 What is the future of Motion?
41:42 What’s the difference between layout animations and the Vue Transition API?
46:35 Sick Picks & Shameless Plugs

Sick Picks

Matt:

Shameless Plugs

Matt:
- Motion.dev
- Sponsor Motion

Hit us up on Socials!

853: The State of Frontend

Wed, 27 Nov 2024 12:00:00 -0000

Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs!

Show Notes

00:00 Welcome to Syntax!
00:53 Brought to you by Sentry.io.
01:15 About the survey.
- Follow along! State of Frontend Survey
02:10 Frameworks.
06:15 Rendering frameworks.
07:35 State management.
09:14 Other libraries.
- Just: Dependency-free Utilities.
13:34 Data.
- Syntax Episode 453.
- Syntax Episode 833.
16:39 Hosting.
- AWS Amplify.
19:51 Continuous Integration.
21:30 Micro-frontends.
23:25 Package Managers.
- pnpm Link Workspace Packages.
- Corepack.
28:35 JS Runtimes.
29:47 Typescript.
33:13 Browser Technologies.
35:05 What is app property?
38:20 Progressive Web Apps.
40:11 Styling tools.
43:17 Testing.
45:39 Code editors.
49:02 Build tools.
49:17 Linting tools.
50:26 Operating systems.
51:17 The future trends.
54:14 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Candle Warmer.
Wes: Flighty iOS App.

Shameless Plugs

Scott: Syntax on Bluesky

Hit us up on Socials!

852: Cloudflare Tunnels

Mon, 25 Nov 2024 12:00:00 -0000

Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected.

Show Notes

00:00 Welcome to Syntax!
01:17 Brought to you by Sentry.io.
02:09 How do Cloudflare Tunnels work?
- 03:52 Publicly exposed webhooks.
- 04:09 Apple Pay.
- 04:40 Snipcart.
04:54 Accessing servers when away.
- Jellyfin, Home Assistant.
07:47 How to set up Cloudflare Tunnels.
10:00 Security risks.
- Cloudflare Access & Zero Trust.

Hit us up on Socials!

851: The Future of VS Code and Copilot

Fri, 22 Nov 2024 12:00:00 -0000

Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors.

Show Notes

00:00 Welcome to Syntax!
00:32 Cassidy’s keynote at GitHub Universe
03:23 New Copilot features
04:55 Use cases for prompt engineering
09:20 UI and UX enhancements
19:18 Copilot Extensions
20:38 Brought to you by Sentry.io
21:26 Multi-line suggestions?
27:00 How do you develop new ideas in this space?
- GitHub Next
35:42 Copilot in Xcode
- GitHub Copilot code completion in Xcode is now available in public preview
39:16 VS Code experimental features
- @code

Hit us up on Socials!

850: Manage State in JavaScript Like a Pro!

Wed, 20 Nov 2024 12:00:00 -0000

Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro.

Show Notes

00:00 Welcome to Syntax!
01:22 Brought to you by Sentry.io.
03:10 What is state?
03:29 Common state jargon.
- 03:48 Reactive State.
- 04:14 Store.
- 04:46 Immutable vs Mutable State.
- 05:53 State updaters.
- 06:15 Signals.
  - Solid.js Signal Docs.
- 06:49 Observables.
- 07:07 UI is a function of state.
- 08:39 State Machine.
- 10:58 Binding state.
- 11:36 Global vs local.
- 11:49 Computed State, derived state, selector state.
12:41 Approaches to state management.
- 12:52 Reducer based.
- 16:39 Mutation based state.
- 21:17 Atom based state.
25:15 Ways to hold state.
- 25:17 Holding state in an object.
- 27:38 Holding state in the URL.
  - Syntax Shows.
- 29:34 Holding state in IndexedDB, local storage, and cookies.
- 32:16 Holding state with FormData.
- 33:56 Holding state with Signals.
  - Signals Proposal.
- 37:27 Holding state with the server database.
38:55 Global State vs Component State.
- Habit Path.
40:39 Sharing state.
- 42:58 State libraries.
- 45:26 Zustand.
- 50:24 Jotai.
- 51:50 xState.
- 54:56 Easy Peasy.
- 55:24 Pinia.
- 56:01 TanStack Query.
57:02 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Cremo Mens Body Wash, Bentgo Adult.
Wes: Adult Bento Box.

Shameless Plugs

Wes: Syntax on YouTube.

Hit us up on Socials!

849: How to Pick a JS Package

Mon, 18 Nov 2024 12:00:00 -0000

You’ve got a project, and you need the right tool—but how do you know if that JavaScript package is the one? Scott and Wes guide you through finding and validating packages, from checking NPM to scoping out social proof, so you can pick tools you can trust.

Show Notes

00:00 Welcome to Syntax!
00:29 Brought to you by Sentry.io.
- Take The Pledge
01:44 How to find a JS package.
- 02:56 Searching via NPM.
- 03:28 Searching via Socket.dev.
- 06:02 Searching via Reddit.
- 06:24 Searching via Perplexity.
- 08:31 Searching via Google autocomplete.
- 09:25 Searching via Awesome repo.
- 09:51 Searching via social networks.
- 10:47 Searching via established projects.
11:19 Evaluating the quality of a package.
- 12:02 Validating via GitHub Issues.
  - html2canvas.
- 13:58 Are there types?
- 15:16 Validating via Socket.
- 16:15 Validating via Bundlephobia.
- 17:15 Validating via the docs.
- 17:55 Validating via GitHub Search.
- 18:14 Validating via GitHub Insights.
  - GitHub Network Dependents.
- 20:19 Validating via the package.json file.
  - Syntax Episode 563.

Hit us up on Socials!

848: Web Components Can’t Save Us with Scott Jehl

Fri, 15 Nov 2024 12:00:00 -0000

Scott and Wes talk with Scott Jehl about the benefits, challenges, and use cases of web components, particularly in design systems and performance.

Show Notes

00:00 Welcome to Syntax!
00:55 Scott’s background and career
- Responsible Responsive Design
- Webpagetest.org
06:46 An overview of web components
09:06 Why should people care about web components?
13:16 Should you write your own web components?
14:39 Reactivity in web components
15:56 DOM parts
18:23 Styling web components
22:08 Brought to you by Sentry.io
22:33 CSS custom properties
- Mux Player Customizer
24:28 Responsive video
28:27 The polyfill use case
30:55 Shadow DOM challenges
36:04 Web components in design systems
41:58 How are people using web components?
43:25 Web components and server-side rendering
45:00 Scott’s thoughts on build tools
47:33 Sick Picks & Shameless Plugs

Sick Picks

Scott: Enhance

Shameless Plugs

Scott:
- Squarespace is hiring
- Web Components Demystified - Get 30% off with coupon code “syntax”
- Web Components Community Group

Hit us up on Socials!

847: Syntax Holiday Gift Guide

Wed, 13 Nov 2024 12:00:00 -0000

Scott and Wes are back with their annual Syntax Holiday Gift Guide! They’ve curated the best gadgets, tools, games, and even kitchen essentials for the dev in your life — plus a few treats anyone would love to unwrap.

Show Notes

00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
- Open Source Pledge Members.
01:59 Syntax holiday gift guide.
02:25 Our absolute favorites.
- Leatherman Arc.
- Peak Design Everyday.
- 1.5 KG of Maldon, Salt Cellars.
- Anker Cube.
- Anker MagGo.
- Theragun, Off-Brand Massage Gun.
- Subscription to Cursor, Claude, ChatGPT.
- Syntax Swag.
13:33 Our (Scott’s) top games.
- Factorio.
- Cascadia.
- Azul.
- SteamDeck.
19:01 Gifts under $30.
- Braided USB-C Cables
- Right Angle Thunderbolt.
- Battery Daddy.
- MagSafe Popsocket.
- Hempz Apple Cider + Nutmeg Hand Lotion.
- Mens Cremo Body Wash.
27:50 Clothing gifts.
- Uniqlo Stretch Selvedge Denim.
- Naked and Famous Selvedge Denim.
- Scott DU/ER Jeans.
- Wool Toque
- Anything from Huckberry.
35:02 Desk item gifts.
- MX3s Master Mouse
- Target Candles
- Candle Melter Wax.
- Laptop Stand
  - Rain Design mStand.
  - Any Foldable Amazon Stand
- Desk Treadmill.
- Insta360 Link 2.
- Small Rig Rotatable Collar Mount.
- Thermal Printer.
- Cable Management Straps + Clips
- Mini Tripod.
- Super Clamp.
- Fishskyn.
45:02 Kids gifts.
- Yoto Player.
- Toniebox.
- First Cat in Space.
- Bathbombs.
- Kahn Academy Kids App.
- Codespark.
51:11 Kitchen gifts.
59:02 Eatables.
- Hot Sauce:
  - Truff Hot Sauce.
  - Secret Aardvark.
  - Cholula Gift Pack.
  - Laoganma Chili Crisp.
  - Merfs.
- Bachan’s Japanese BBQ Sauce.
01:00:51 Smart home gifts.
- Smart Dimmers
- ESP32 + WS2815 LED Strips
01:03:06 Shameless Plugs.

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

846: Talking EVs: Range Anxiety, Charging, and Tech

Mon, 11 Nov 2024 11:00:00 -0000

Scott and Wes unpack their experiences as electric car owners, sharing the highs and lows of making the switch. From range anxiety to charging infrastructure and cost savings, they talk about everything from the tech perks to the unexpected challenges of driving electric.

Show Notes

00:00 Welcome to Syntax!
02:11 Brought to you by Sentry.io.
03:14 What cars and how long have we had them.
- Hyundai IONIQ 5.
- Tesla Model Y Long Range.
10:41 Range and dealing with range anxiety.
11:45 The EPA specs.
12:24 Things that affect range.
14:46 Charging.
17:52 Charging levels.
- 17:56 Level 1 charging.
- 19:01 Level 2 charging.
- 19:39 Level 3 charging.
- 20:10 Charging standards.
21:51 Electric car pricing.
25:56 Regenerative braking.
27:27 General maintenance.
29:04 Pricing and expenses.
31:48 Machine Gun Kelly Effect.
36:46 Would you go completely electric?
38:46 Electric-only tech.
40:57 Buying a new EV.
42:21 Edison Motors website, TikTok.

Hit us up on Socials!

845: Are companies hiring? State of the dev job market with Taylor Desseyn

Fri, 08 Nov 2024 12:00:00 -0000

Scott and Wes talk with Taylor Desseyn about the shifting developer job market. Taylor shares practical tips for standing out, building genuine connections, and finding opportunities in a competitive hiring landscape.

Show Notes

00:00 Welcome to Syntax!
01:38 Meet Taylor Desseyn
03:51 Is the dev job market as bad as it seems?
06:47 How to stand out when applying for a dev job?
11:03 Who is getting hired?
14:16 What tech/languages are companies hiring for right now?
16:37 Is there less work?
20:10 The small things that get you hired
24:19 What to do when you get laid off
27:42 Brought to you by Sentry.io
28:07 How to make yourself more appealing to employers
32:39 Networking tips and tricks
39:01 Remote work and office return trends
40:58 Why you should negotiate carefully
43:38 What’s the most important thing right now for getting hired?
45:48 Should devs understand stakeholders and business goals?
46:42 Creating a good resume
52:00 Sick Picks & Shameless Plugs

Sick Picks

Taylor: heydey mic
Randy Rektor’s YouTube Channel

Shameless Plugs

Taylor:
- Torc
- Guidance Counselor 2.0

Hit us up on Socials!

844: TypeScript, Branded Types, Streaming vs Polling + More

Wed, 06 Nov 2024 12:00:00 -0000

Scott and Wes serve up listener questions on everything from SvelteKit’s limits and the quirks of branded types in TypeScript to handling email queues and secure token storage in cookies. Plus, they get into app security, the evolution of checkout flows, and why QA teams can actually be game-changers for dev teams.

Show Notes

00:00 Welcome to Syntax!
00:50 Catching up.
01:52 Brought to you by Sentry.io.
02:56 What are the limitations of SvelteKit?
06:41 Svelte 5 updates.
07:53 Branded types in TypeScript.
- EggHead.io Blog.
11:56 Queue applications and a ‘poor man’s queue’.
17:20 The real value of a functional QA team.
21:34 Invoker commands.
- Invokers Explained.
- Denver Script Talk.
26:29 Growing security and permissions concerns.
- Little Snitch.
33:03 Stripe vs PayPal in 2024.
38:24 Christmas gift guide.
38:39 Websockets vs streams vs polling.
41:04 Storing access and refresh tokens in a cookie.
45:41 Shipping with TypeScript errors.
49:34 Sick Picks + Shameless Plugs.

Sick Picks

Scott: The Black Stuff Deodorant.
Wes: Apple Watch Charging Brick.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

843: Copilot Kills Cursor? Reacting to Github Universe Keynote

Mon, 04 Nov 2024 11:00:00 -0000

Scott and Wes react to the big GitHub Universe announcements, recorded live at GitHub Universe. They dive into Copilot’s new features, exploring how its advancements stack up against Cursor AI in the battle for the ultimate AI-driven developer tool.

Show Notes

00:00 Welcome to Syntax!
01:12 Our Syntax Meetup.
02:54 AI is everywhere.
03:22 Sherlocking and jockeying for position.
04:49 GitHub Copilot introduces alternative LLMs.
- GitHub Copilot
06:31 New tools are build upon existing LLMs.
09:14 VSCode reclaiming ground from Cursor.
- Cursor
10:31 The new features.
- 10:34 Multi-file editing.
- 10:54 Use-cases for multi-file editing.
- 12:58 Multi-model selection.
- 13:05 Repo indexing.
- 13:50 Copilot instructions.
- 14:34 Examples of Cursor rules.
- 16:39 No mention of multiple-line suggestions.
- 18:02 Multi-file edit?
- 20:26 Code review.
- 22:36 GitHub Pull Requests plugin.
- 24:34 Investing in AI ‘big bets’.
- 26:29 Scott’s mysterious YouTube unreleased feature.
- 27:11 3-minute YouTube shorts.
  - Wes’ TikTok.
- 28:29 GitHub Marketplace.
- 32:18 Copilot Workspace.
- 34:53 Copilot Workspace features yet to come.
- 36:25 GitHub Spark.
  - Bolt.new.
42:44 Final thoughts on Copilot vs Cursor.
44:03 What products do you think are in trouble?
50:26 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Waymo.
Wes: Waymo.

Hit us up on Socials!

842: There's Python in my JavaScript! with Andrea Giammarchi

Fri, 01 Nov 2024 11:00:00 -0000

Scott and Wes talk with Andrea Giammarchi (aka WebReflection) about his projects, including LinkDOM and PyScript, and the exciting future of running Python in the browser via WebAssembly.

Show Notes

00:00 Welcome to Syntax!
01:04 Andrea’s background and early work
- LinkDOM
07:25 Brought to you by Sentry.io
09:56 Pyscript
14:31 Why run Python in the browser?
20:17 Using WebAssembly to run different languages in JS
23:33 The advantages of WebAssembly
25:55 What excites Andrea about WASM
- Proposal: ESX as core JS feature
31:10 What is WASI?
32:21 Andrea’s experience with IOT and microcontrollers
35:35 How can the JS ecosystem be improved?
38:07 Should we have reactivity in the browser?
- Signals
41:06 Andrea’s thoughts on server-side APIs
43:43 Andrea’s thoughts on TypeScript
49:13 Sick Picks & Shameless Plugs

Sick Picks

Andrea: ESP32

Shameless Plugs

Andrea: Andrea’s X / Twitter

Hit us up on Socials!

841: Spooky Web Dev Horror Stories - PART 2

Wed, 30 Oct 2024 11:00:00 -0000

Scott and Wes continue to share hair-raising developer horror stories submitted by listeners. From accidentally severing access to crucial databases to a limitless coupon code that cost millions, these tales will have you on the edge of your seat. Tune in for more wild mishaps, close calls, and hard-learned lessons from the dark side of coding. You won’t want to miss this second round of spooky web dev stories!

Show Notes

00:00 Welcome to Syntax!
00:49 Brought to you by Sentry.io.
01:32 ‘Monkey Business’
03:21 ‘Spooky Integration Bug’
06:25 ‘Worst Case Wake Up’
08:57 ‘Severed Trunk and Missing Backups’
11:21 ‘Brute Force Too Brutal’
12:30 ‘A Dorm Room Bee Movie’
15:46 ‘No Goats’
16:45 ‘Pokémon Problems’
18:08 ‘Late Night’
22:21 ‘Bootcamp Bungle’
26:19 ‘Film School F*** Up’
30:26 ‘AWS Clusterf***’
31:26 ‘Limitless Coupon Disaster’
- Episode #451, Episode #609.
33:55 ‘Ruined Vacation’
35:47 ‘Console.swear’
37:28 ‘Another Coupon Disaster’
40:46 ‘The Doctor’
- Wes’ Burner List.
43:01 ‘Marketing Nightmare’
45:10 What did we learn this year?
- 45:12 You need processes.
- 48:42 Ask for help.
- 49:44 Dry-run queries + soft delete.
- 51:14 Code reviews.
  - Episode #830.
- 52:11 Version control.
53:58 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Nobody Wants This.
Wes: Truffle Hot Sauce.

Shameless Plugs

Scott: syntax.fm.
Wes: syntax.fm/spooky.

Hit us up on Socials!

840: Spooky Web Dev Horror Stories - PART 1

Mon, 28 Oct 2024 11:00:00 -0000

Scott and Wes unpack the spookiest web dev stories submitted by listeners in this episode. From forgotten MX records to infinite loops, these real-life coding horrors will have you double-checking your WHERE clauses and git backups.

Show Notes

00:00 Welcome to Syntax!
00:39 Brought to you by Sentry.io.
00:48 What is Spooky Stories?
- Submit a story.
02:45 ‘Needs a Coffee’
04:43 ‘Deleting Github’
- Defunkt X Post.
07:42 ‘Rejected’
09:08 ‘Infinite Loop’
09:26 ‘MySqueeel Horror’
11:02 ‘Pet Company’
12:09 ‘Git Corrupted’
12:57 ‘Circular Horror’
14:25 ‘The Haunting of the Forgotten MX Records’

Hit us up on Socials!

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt

Fri, 25 Oct 2024 11:00:00 -0000

Scott and Wes talk with Søren Bramer Schmidt, Founder and CEO of Prisma, about database best practices, including the latest developments in serverless, local-first, and typed SQL solutions.

Show Notes

00:00 Welcome to Syntax!
02:55 Søren’s thoughts on GraphQL
03:53 Brought to you by Sentry.io
06:57 Common database mistakes
08:52 Prisma’s stability and user experience
10:42 Typed SQL and advanced querying
- Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM
- Prisma Optimize
20:47 Serverless challenges and solutions
- Prisma Accelerate
27:11 Cloudflare’s potential to dethrone AWS
29:13 Prisma and local-first development
- Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024
35:30 Making local-first development mainstream
40:10 Challenges with async
42:43 Søren’s thoughts on Drizzle
43:41 Søren’s favorite database
47:21 The read your writes problem
48:58 Prisma hosted Postgres
51:44 Sick Picks & Shameless Plugs

Sick Picks

Søren: Cursor

Shameless Plugs

Søren:
- 1: Prisma Optimize
- 2: Prisma Postgres (coming soon)

Hit us up on Socials!

838: Productivity Tools for Web Developers

Wed, 23 Oct 2024 11:00:00 -0000

Get your productivity game on point! Scott and Wes serve up the best tools for web developers, covering everything from password managers and to-do apps to mind-mapping tools and little scripts that make life easier. Plus, find out what snippet managers they swear by and how they keep their email under control.

Show Notes

00:00 Welcome to Syntax!
03:01 Brought to you by Sentry.io.
03:44 Syntax meetup San Francisco.
04:26 Breakdancing update.
- Kid Cruz Instagram.
05:18 Password management.
- 1Password.
08:30 Apple stomping on apps.
09:50 To-do applications.
- Things.
- Getting Things Done.
- Tweek.
18:18 To-do in code.
- Todo Tree.
- Better Comments.
20:21 Snippets.
25:55 Mind-mapping.
- MindNode.
- FigJam.
29:01 Note-taking.
- Obsidian.
- Stashpad.
- ObservableHQ.
- Jupyter.
36:34 Little scripts.
- Script Kit.
39:50 Email.
- Superhuman.
48:11 Some honorable mentions.
- Habitpath.io.
- Focus.
52:10 Sick Picks + Shameless Plugs.

Sick Picks

Scott: The Legend of SwordQuest.
Wes: The Economics of Everyday Things.

Hit us up on Socials!

837: You Should Drop Express and Try Hono

Mon, 21 Oct 2024 11:00:00 -0000

CJ joins Scott and Wes to dive into why he’s all-in on Hono, a fast and lightweight web framework for every JavaScript runtime. From familiar route creation to type-safe middleware, find out how Hono keeps things simple, powerful, and ready to use inside Next.js.

Show Notes

00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
01:11 What is Hono?
- Watch CJ’s Video Here
03:21 Syntax Meetup San Francisco.
04:02 Why I like Hono, and why you should try it.
04:08 Familiar route creation.
- Connect: an extensible HTTP server framework for node.
05:45 Supports every JS Runtime.
07:00 How a service worker works.
08:48 Helpers.
09:16 Middleware.
10:40 Sentry middleware.
10:55 JSX support.
13:21 Organizing route handlers while keeping Types.
14:24 Type safety.
- hono-open-api-starter.
- zod-openapi.
15:46 Defining base type.
- Pinojs
17:36 Validation.
18:52 Hono RPC client.
22:09 Hono inside of Next.js.
23:30 Testing.
25:22 The community.
27:34 Type support.

Hit us up on Socials!

836: Real Talk on Web Accessibility with Marcy Sutton Todd

Fri, 18 Oct 2024 11:00:00 -0000

835: How to Pick a JavaScript Framework

Wed, 16 Oct 2024 11:00:00 -0000

Do you really need a framework? Scott and Wes bring on CJ to break down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity. They dive into everything from rendering strategies to auth solutions, deployment options, and how to choose the right tool for the job.

Show Notes

00:00 Welcome to Syntax!
01:32 Brought to you by Sentry.io.
03:17 What is a framework?
- Syntax Meetup San Francisco.
08:21 Examples of frameworks for Vue, Svelte and Angular.
12:39 What questions do you need to answer?
12:44 What or where do you need to ship?
14:12 How do you render it?
18:22 Where are you deploying it?
24:03 How do you store data?
24:09 Existing API.
26:03 Integrated server.
26:22 Database.
- Supabase.
26:59 Does it have RPC or server actions?
34:27 Do you need authentication?
38:45 Auth packages.
- LuciaJS.
- Lucia announcement.
- Lucia preview.
- NPM Arctic Oauth.
- Auth utilities.
- Better-Auth.
- Scott’s Drop-In Auth.
42:10 Does it include email?
42:52 What does the TypeScript story look like?
43:32 How does it handle images?
44:35 How do we work with CSS?
46:02 How long has it been around?
47:37 How mature is the ecosystem?
48:35 Is there community support?
50:21 Portability.
51:18 Hiring.
52:17 Sick Pick + Shameless Plugs.

Sick Picks

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

834: AI Will Improve Your Web Development Workflow

Mon, 14 Oct 2024 11:00:00 -0000

Scott and Wes serve up ways developers can use AI tools like Claude, GitHub Copilot, and more to boost productivity. From error tracing to refactoring code and automating mundane tasks, they break down how AI can handle the heavy lifting so you can focus on the fun stuff!

Show Notes

00:00 Welcome to Syntax!
01:23 Brought to you by Sentry.io.
01:43 Using AI tools effectively.
05:29 Stack trace reading and error finding.
08:37 San Francisco Syntax Meetup!
09:19 Research and validation.
12:19 Completing mundane tasks.
14:10 Refactoring.
18:56 Simple typescript.
20:29 Summarizing docs and source code.
23:56 Quick hits.

Hit us up on Socials!

833: Next Gen Fullstack React with TanStack

Fri, 11 Oct 2024 11:00:00 -0000

Scott and Wes talk with Tanner Linsley, creator of TanStack, about the React ecosystem, and the evolution and futue of TanStack’s suite of tools, including TanStack Router and TanStack Start.

Show Notes

00:00 Welcome to Syntax!
02:59 What is TanStack Start?
- UnJS
- Nitro
- Vinxi
06:17 What is the Vite Environment API?
07:21 Was it always the plan to use Vite?
08:02 TanStack Router and client-side vs server-side
16:18 How TanStack Start will work
27:26 Moving from Create React App to TanStack
30:42 Brought to you by Sentry.io
31:15 Will TanStack Router ever support other frameworks?
33:54 How will TanStack Start handle forms?
36:13 TanStack Virtual
39:41 What is the future of TanStack?
- Convex
42:49 How Tanner writes documentation
47:55 Server functions and middleware
54:41 When will TanStack Start be in beta?
57:00 Sick Picks + Shameless Plugs

Sick Picks

Tanner:
- LG C4
- Ultra Slim Fit TV Wall Mount

Shameless Plugs

Tanner:
- TanStack Blog
- @TKDodo

Hit us up on Socials!

832: Potluck: When to Use a Framework × Goodbye Webpack × Custom Events in React + More!

Wed, 09 Oct 2024 11:00:00 -0000

Scott and Wes answer your burning questions! They cover everything from moving off create-react-app and the benefits of Next.js, to transitioning from junior to senior dev, working with QA teams, and even dive into game development with Godot.

Show Notes

00:00 Welcome to Syntax!
00:31 DenverScript.
03:14 Brought to you by Sentry.io.
03:54 Question 1: Moving off create-react-app.
- Proposal: TC39 Import Attributes.
- HTML iframe srcdoc Attribute.
09:10 Question 2: Working together with QA teams.
13:46 Question 3: Benefits of React with Next.js Framework.
- Svelte Turnstile.
- Next.js Pages Router vs Next.js App Router.
17:38 Question 4: What are your real names?
19:22 Question 5: Thoughts on RTO and WFH.
27:50 Question 6: Where can I find you Sick Picks?
- Sick Picks.
- Sick Picks Scraper.
29:34 Question 7: From JR developer to SR developer.
31:41 Question 8: Godot and game development.
- Godot Engine.
- GDScript.
- Phind.
39:37 Question 9: Inherent advantage between Callbacks and Events.
44:44 Question 10: Transitioning to freelance with corporate experience.
49:44 Question 11: Dealing with negative feedback.
57:05 Sick Picks & Shameless Plugs.

Sick Picks

Scott: audiobookshelf, Plappa App.
Wes: New Syntax Swag.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

831: Preventing Spam and Fraud

Mon, 07 Oct 2024 11:00:00 -0000

From CAPTCHAs to shadow banning, Scott and Wes break down the best strategies for keeping your app safe from spam and fraud. They cover tools like email verification, rate limiting, shadow banning, and more to protect your users and data.

Show Notes

00:00 Welcome to Syntax!
00:15 The problem.
02:47 Brought to you by Sentry.io.
04:23 CAPTCHA.
06:24 Data collection.
07:11 Stripe Radar score calculation.
09:12 Rate limiting.
11:34 Shadow banning.
13:53 Email verification.
15:38 Tie to accounts.
16:23 Tied to real identity.
19:36 Manual approval.
21:19 Blocking ASN.
23:17 Honey pot field.
24:28 SMS verification.
25:05 Mechanical Turk.

Hit us up on Socials!

830: GitHub and Code Reviews with Sarah Vessels

Fri, 04 Oct 2024 11:00:00 -0000

Scott and Wes talk with GitHub’s Sarah Vessels about the ins and outs of code reviews, their critical role in collaborative development, and tips for making your reviews more effective.

Show Notes

00:00 Welcome to Syntax!
00:59 What is a code review?
- How to review code effectively: A GitHub staff engineer’s philosophy
04:18 Strategies for an effective code review processes
06:59 Should you test and fix in the same pull request?
07:57 How to ask for code reviews
12:12 Feature flags and their role in code management
20:03 Who should do code reviews?
23:34 Should you review your own code?
25:04 Brought to you by Sentry.io
25:29 Code comments vs pull requests
27:35 Dealing with egos in the code review process
30:18 What automations are essential?
- project-pull-mover
34:35 Underutilized tools
- GitHub Protips: Tips, tricks, hacks, and secrets from Sarah Vessels
36:25 Commit strategies and squash
39:30 GitHub’s branching system
41:14 Git gone wrong
42:30 What is the correct way to merge into main?
43:47 What was it like working on GitHub Sponsors?
- GitHub Sponsors
- thanks.dev
46:58 Sick Picks & Shameless Plugs

Sick Picks

Sarah: https://store.steampowered.com/steamdeck

Shameless Plugs

Sarah: https://github.com/sponsors

Hit us up on Socials!

829: 14 Web Development Tips I Wish I Knew Sooner

Wed, 02 Oct 2024 11:00:00 -0000

Scott and Wes share 14 game-changing tips they wish they’d known earlier in their web dev careers. From embracing tools to learning by doing, these insights will help you level up your skills faster!

Show Notes

00:00 Welcome to Syntax!
02:09 Brought to you by Sentry.io.
03:45 13 Web Development Tips I Wish I Knew Sooner.
03:49 Number 1 - No one is all-knowing.
05:39 Number 2 - People with extremely strong opinions.
11:13 Number 3 - Using tools to help you isn’t a bad thing.
12:34 Number 4 - Approach new technology with a mixed dose of skepticism and open-mindedness.
16:05 Number 5 - Things make more sense the more you actually use them.
18:40 Number 6 - Willingness to change your mind is a strong skill.
20:06 Number 7 - Doing is better than reading or watching.
22:29 Number 8 - Asking questions is good.
26:45 Number 9 - Everyone doesn’t learn the same.
30:41 Number 10 - You don’t need a SAAS for everything.
35:53 Number 11 - You don’t need to worry about scale.
37:49 Number 12 - Learning the fundamentals will always pay off.
40:07 Number 13 - Working in public will make you more hireable.
42:48 Number 14 - You can interview without accepting a job offer.
45:29 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Glasses.
Wes: Oxo Whisk, Danish Whisk.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

828: Logging in Verification: Magic Links, 2FA, SMS Codes

Mon, 30 Sep 2024 11:00:00 -0000

Scott and Wes serve up the pros and cons of modern authentication methods like magic links, 2FA, and SMS codes. Learn how each technique works, the security trade-offs, and what might be the best approach for your apps.

Show Notes

00:00 Welcome to Syntax!
00:11 Brought to you by Sentry.io.
00:34 Logging in Verification.
01:09 Magic Links.
- 01:24 Pros of magic links.
- 03:50 How magic links work.
- 04:25 Cons to magic links.
06:21 Magic Sessions.
- 06:37 Using email verification.
- 07:12 Using code verification.
- 07:55 Previously trusted device verification.
- 08:14 Classic email and verification process.
- 09:54 Email Code.
10:51 Gmail verification options.
12:01 OAuth.

Hit us up on Socials!

827: Career Development with Topher Martini

Fri, 27 Sep 2024 11:00:00 -0000

Scott and Wes talk with Topher Martini, a former Engineering Program Manager at Apple, about his extensive experience over two decades in the tech industry. Topher shares his journey at Apple, from starting as an intern in 2001 to working on groundbreaking products like iPhone, iPad, and Vision Pro.

Show Notes

00:00 Welcome to Syntax!
00:40 What it was like working on the first iPhone
04:47 How Topher landed at Apple early in his career
08:40 How Apple’s culture has changed over time
11:03 What makes a great employee?
16:37 Tips for better communication
17:54 Are meetings a good means of communication?
20:05 What makes a bad employee?
22:21 What does it take to get hired at a company like Apple?
26:16 Brought to you by Sentry.io
26:55 The relationship between passion and career
29:08 Topher’s advice for growing in your career
31:50 What is a sabbatical?
33:36 Teaching tech to kids
35:49 Topher’s work on self-driving cars
- Aurora
39:33 AI’s impact on tech and the future
41:22 What can developers do to stand out and be relevant in a world of AI?
43:30 Topher’s thoughts on career development
- One Small Step Can Change Your Life: The Kaizen Way
- Paul Copplestone
44:47 What is a light field camera?
46:47 Spatial media and Vision Pro
48:10 The nifty stuff in Topher’s background
49:53 Something wild that happened while Topher was at Apple
51:34 Sick Picks & Shameless Plugs

Sick Picks

Topher:
- Bambu Lab P1S 3D Printer
- Bento 3D

Shameless Plugs

Topher: Topher’s YouTube Channel

Hit us up on Socials!

826: You Need These 30 Apps - PART 2

Wed, 25 Sep 2024 11:00:00 -0000

In part 2 of covering the best apps for web developers, Scott and Wes dive into must-have tools that will level up your workflow. From screenshot utilities to development tools and video production apps, this episode is packed with recommendations to boost your productivity and creativity.

Show Notes

00:00 Welcome to Syntax!
01:44 Brought to you by Sentry.io.
02:30 Utilities.
- 02:48 BetterTouchTool.
- 09:31 Hyperkey.
- 11:46 Amethyst.
- 12:51 Klack.
- 13:47 Bottom (Btm).
- 14:54 Pearcleaner
- 16:40 App Cleaner.
- 17:35 Rocket Emoji.
- 20:27 Clippy.
23:37 Screenshots and Screen Recordings.
- 24:05 Dropshare.
- 25:29 OBS with Source Record.
- 29:20 Screen Studio.
- 30:58 Detail.co.
- 31:22 Cap.
- 32:08 Kap.
- 32:46 CleanShot X
34:15 Video and Production.
- 34:24 DaVinci Resolve.
- 37:46 Affinity Pro.
- 39:42 PrincipleForMac.
- 40:39 Inkscape.
41:34 Development tools.
- 41:38 DBngin.
- 43:12 TablePlus.
- 45:48 MongoDB Compass.
- 46:14 Proxyman.
- 47:00 Wireshark.
- 47:31 Polypane.
- 48:30 Setapp.
- 49:44 SVG Grabber.
51:42 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Untold Sign Stealer.
Wes: Magentiles Marble Run.

Shameless Plugs Hit us up on Socials!

825: Syntax Assistant Desktop App

Mon, 23 Sep 2024 11:00:00 -0000

Scott walks Wes through the new Syntax Production Assistant Desktop App, designed to streamline and automate their complex publishing process. From tech stack choices like Svelte5 and Rust to AI-driven features, they dive into how this tool keeps everything consistent.

Show Notes

00:00 Welcome to Syntax!
00:44 Brought to you by Sentry.io.
01:37 What was the idea?
05:42 The tech.
- Svelte5, Tauri, Rust, FFMPEG.
08:32 Markdown editor.
- ink-mde, Dillinger.
09:32 Epoch timestamps.
- Epoch.vercel.
10:01 Updating front-matter.
10:10 Dexie.js function.
11:25 Backing up data.
11:58 Rust functions.
12:58 Why a desktop app and not a website?
14:38 Some small AI features.
16:26 Challenges with OAuth.
20:03 Publishing challenges.
23:29 Could this work on Windows?
23:54 Debugging.
26:23 Deciphering Apple logs.

Hit us up on Socials!

824: Taylor Otwell's opinions on PHP, React, Laravel and Lamborghini Memes

Fri, 20 Sep 2024 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk with Taylor Otwell, the creator of Laravel. Taylor shares insights on his journey from creating Laravel in his free time to building a strong community and user base. He discusses Laravel’s growth, including the major features and tools that were developed over the years. Taylor also shares his outlook on the PHP ecosystem, productivity tips, and plans for Laravel Cloud, a new deployment platform for PHP and Laravel applications.

Show Notes

00:00 Welcome to Syntax!
00:29 Laracon
03:13 Laravel’s inspiration and features
- Intertia
- Livewire
07:18 Why don’t we have a “Laravel for JavaScript”?
09:02 What parts of Laravel came first?
10:07 The Laravel ecosystem
- Forge
- Vapor
12:29 Laravel Cloud
14:00 What parts of Laravel are Intertia and what parts are React?
15:57 How many people are using Laravel?
16:59 Taylor’s productivity and development philosophy
24:43 Brought to you by Sentry.io
25:19 What makes a beautiful API?
29:33 Taylor’s thoughts on typing PHP
30:41 Features Taylor would like to see in PHP
33:03 What people get wrong about modern PHP
34:22 PHP stacks and CMSs
- Nginx
- FrankenPHP
- Statamic
37:30 Taylor’s thoughts on WordPress
38:14 Lambo memes
43:44 Taylor’s coding setup
- Sublime Text
- Vs Code
45:36 Sick Picks + Shameless Plugs

Sick Picks

Taylor:
- Tiny Glade
- No Man’s Sky

Shameless Plugs

Taylor: Laravel Cloud

Hit us up on Socials!

823: Is Cursor AI the VS Code Killer?

Wed, 18 Sep 2024 11:00:00 -0000

Scott and Wes serve up a discussion on AI coding assistants with a deep look at Cursor AI, exploring its unique features like multi-line auto-complete and Smart Rewrites. They also discuss why Cursor’s intuitive UI stands out and tackle the big question: is it worth the investment?

Show Notes

00:00 Welcome to Syntax!
01:16 Brought to you by Sentry.io.
01:48 Handling objections around AI assistants.
02:55 Context windows and how they’re improving functionality.
- Syntax.fm Episode 728 with Kevin Hou of Codeium
04:08 Cursor’s UI.
04:51 This is cool, why is it not a plugin?
08:12 What makes the UI interesting.
09:13 Smart Rewrites.
11:44 It can create multiple files.
13:05 Using the chat interface.
16:32 Another chat example.
20:22 The main features of Cursor.
21:55 Multi-line auto-complete.
23:55 Using docs for additional context.
27:26 AI is here to help you, not replace you.
33:27 Is it worth it?
33:55 The pricing.
44:10 Sick Picks & Shameless Plugs.

Sick Picks

Scott: The Iron Historian, Scott’s Salt & Pepper Mills.
Wes: Oxo Salt & Pepper Mills.

Shameless Plugs

Scott: Syntax.fm Zed Theme.

Hit us up on Socials!

822: Receipt Printer with JavaScript

Mon, 16 Sep 2024 11:00:00 -0000

Wes unveils his Hack-Week project —a thermal printer controlled by JavaScript that prints out Sentry.io errors in real-time. Scott and Wes dive into the nitty-gritty of how it works, from the ESC/POS protocol to tackling socket issues, and whether the project was worth the effort.

Show Notes

00:00 Welcome to Syntax!
00:38 Brought to you by Sentry.io.
01:10 What is Hack Week?
01:41 The project.
- Follow the posts on X.
02:40 Why a receipt printer?
03:55 How do these printers work?
- ESC/POS.
05:20 Communicating with the printer.
07:24 ESC/POS Encoder.
ESC/POS Encoder.
08:42 Socket issues.
09:56 Using Transformers.js to stop ‘toxic comments’.
- Xenova’s toxic-bert.
- Implementation in Wes’ code.
10:48 Back to socket issues.
12:18 Integrating with Sentry.
15:01 Printing images with Playwright.
16:17 Was it worth it?

Hit us up on Socials!

821: Is Tauri the Electron Killer?

Fri, 13 Sep 2024 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk with Daniel Thompson-Yvetot about Tauri. They dive into what Tauri is, the motivations behind its development, its open-source ecosystem, use cases, and more.

Show Notes

00:00 Welcome to Syntax!
02:01 What is Tauri?
02:59 What’s new in Tauri 2.0?
06:41 The benefits of Tauri over Electron
11:28 Can you use Node?
14:21 Mac, Linux, and Windows
- Verso
- Servo
25:05 How does Tauri make money?
- CrabNebula
30:05 Brought to you by Sentry.io
30:30 Accessing Swift from JavaScript
31:44 What’s the hardest part of a project like this?
- Haptics Plugin
37:00 Some of the apps that have shipped with Tauri
43:18 The future of Tauri
50:23 Sick Picks & Shameless Plugs

Links

Sick Picks

Daniel: 5secondfilms

Shameless Plugs

Guest: Manufacturing European Software (Coming Soon)

Hit us up on Socials!

820: Potluck: 8000 ESLint Errors × HTML Time Tag × 7 Meg React Bundle × CSS Modules

Wed, 11 Sep 2024 11:00:00 -0000

In this Potluck episode of Syntax, Scott and Wes answer your questions, from weighing the trade-offs between numerous small npm packages and a few larger ones to managing the challenges of work-from-home life. They also explore CSS modules, strategies for shrinking JavaScript bundles, and even where to find the best replacement ear cups for your headphones.

Show Notes

00:00 Welcome to Syntax!
00:38 Commentating basketball.
01:16 Brought to you by Sentry.io.
02:09 The video podcast doesn’t translate well to audio.
04:08 Many small npm packages vs a few large.
09:55 Developers dealing with WFH, ADHD, and kids.
15:59 CSS modules for scoping styles to components.
20:55 Scoped CSS in React?
23:21 Reducing JS bundle sizes.
- Bundle Phobia.
- Javascript Bundle Analysis [Beta].
29:44 Balancing learning, doing, and teaching.
33:04 Making maps local first.
36:20 How to pronounce ‘schema’.
- Wes Bos Tweet.
37:09 HTML tag.
40:11 Where to get replacement ear cups for headphones?
- wickedcussions.
- Scott’s Audeze Headphones.
42:21 ESLint and hiding errors.
48:48 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Allen Wrench Set.
Wes: Clarkson’s Farm – Amazon Prime.

Shameless Plugs

Wes: Syntax.fm, YouTube

Hit us up on Socials!

819: Fun & Profitable Side Projects for Developers

Mon, 09 Sep 2024 11:00:00 -0000

Scott and Wes serve up a hasty discussion on side projects, sharing their latest Hack Week experiments and tips on how to turn fun ideas into profitable ventures. They cover everything from finding inspiration to choosing the right tech, and even offer advice on how to finish what you start.

Show Notes

00:00 Welcome to Syntax!
01:11 Brought to you by Sentry.io.
01:27 Wes’ Hack Week project.
02:30 Scott’s Hack Week project.
04:18 Where do you get ideas for side projects?
09:22 End goals for a side project.
14:47 Other end goals.
16:45 What tech should you use?
- drop-in.
20:34 Keeping notes.
23:14 Finishing side projects.
26:39 Shameless Plugisode!

Hit us up on Socials!

818: CJ × Hosting Meetups - Lunch and Learn

Fri, 06 Sep 2024 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk with CJ Reynolds about the resurgence of meetups in a post-COVID world. They discuss the benefits of attending and speaking at meetups, and the logistics of organizing them. CJ also shares his experiences running the DenverScript meetup, including sourcing speakers, finding venues, and ensuring a welcoming community.

Show Notes

00:00 Welcome to Syntax!
01:35 Brought to you by Sentry.io
01:49 CJ’s history hosting meetups
- DenverScript
- Code Talent
06:35 How do you structure a meetup?
09:50 How do you raise awareness for a meetup and get people to attend?
- Meetup.com
- Guild
13:27 How to pay for a meetup
15:22 How to get speakers at meetups
16:50 The length of these talks
17:03 Does live-streaming hurt attendance?
- Syntax 806 - The King of Drag and Drop: Alex Reardon
19:32 Is there a vetting process for finding speakers?
- Syntax 019 - How to Get Into Speaking at Conferences
24:26 A meetup doesn’t have to be talks
- Develop Happy Hour
27:48 What’s the worst part about hosting a meetup?
29:37 What was your first meetup like?
33:27 What’s the best meetup you’ve been to and why?
37:10 How to be a good attendee
40:45 Are meetups back?
44:00 Tips for organizing a great meetup
45:29 How to find a meetup
47:37 Sick Picks & Shameless Plugs

Sick Picks

CJ: Fillo’s Walking Tamales

Shameless Plugs

CJ:
- DenverScript
- You Should Use Hono in your Next Project

Hit us up on Socials!

817: You Need These 30 Apps - PART 1

Wed, 04 Sep 2024 11:00:00 -0000

Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow.

Show Notes

00:00 Welcome to Syntax!
01:03 Brought to you by Sentry.io.
01:27 File management applications.
- 01:43 DaisyDisk.
- 04:19 Marta.
- 07:50 EasyFind.
- 10:16 Czkawka.
- 12:53 Backblaze.
- 14:40 Hazel.
- 17:42 AutoMounter.
18:43 Media applications.
- 18:52 Automator HIEC to JPG.
- 20:04 Rant on QuickView.
- 20:32 DVD idea.
- 22:06 IINA.
- 24:07 Capture One.
- 25:02 YouTube Enhance.
- 27:16 HandBrake.
- 28:05 MakeMKV.
- 30:33 Overkill for Mac.
- 33:42 Search by Image.
- 37:09 eqMac.
37:37 Utility applications.
- 37:52 Stats & iStat Menu.
40:19 Alternatives to popular Mac applications.
- 40:23 Ice.
- 41:03 PearCleaner.
- 43:08 Numi.
- 44:17 Bottom (btm).
- 44:53 Sip Color Picker.
50:25 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Wilde Chips
Wes: Apple TV+: The Big Conn

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

816: Why Your CSS Sucks

Mon, 02 Sep 2024 11:00:00 -0000

Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.

Show Notes

00:00 Welcome to Syntax!
00:33 Breakdancing in the Olympics.
05:29 Brought to you by Sentry.io.
05:44 Why your CSS sucks.
07:01 You’re styling the wrong element.
11:01 Nesting too deep.
12:37 You don’t understand specificity.
14:56 Your classes don’t use a system.
16:24 You’re using values instead of CSS vars.
20:16 You don’t understand block vs inline vs inline-block.
- CSS Logical Properties
21:16 You aren’t using the right tool for the job.
- CSS Flexbox, CSS Grid.
24:15 You’re setting the value in too many places.
24:31 You’re scoping to tightly or not tightly enough.

Hit us up on Socials!

815: Deno 2 with Ryan Dahl

Fri, 30 Aug 2024 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem.

Show Notes

00:00 Welcome to Syntax!
00:34 What is Deno?
05:08 Deno 2.0
07:49 NPM compatibility
09:40 What parts of Node aren’t doable in Deno?
11:22 Do we need a hard break from Require?
13:51 Package management
16:25 Security and performance benefits of Deno
20:57 Brought to you by Sentry.io
20:57 Thoughts on Bun and Node additions
26:25 Ryan’s favorite Deno projects
28:42 Will we ever see a unified file system API?
31:49 Typescript
36:12 Jupyter Notebooks with Deno
- Polars
39:11 AI and WASM in JavaScript
42:01 Deno 2.0 features and future
43:08 Sick Picks & Shameless Plugs

Sick Picks

Ryan: McCarren Park

Shameless Plugs

Ryan: https://deno.com/enterprise

Hit us up on Socials!

814: Fundamentals: HTML

Wed, 28 Aug 2024 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more.

Show Notes

00:00 Welcome to Syntax!
02:33 Brought to you by Sentry.io
03:25 Why HTML is important
06:52 Semantic vs non-semantic
07:58 The basic structure of an HTML page
- HTML elements reference
- The Main element
08:45 Doctype
15:24 Nav
18:47 Section
20:41 Aside
22:09 Article
22:54 Span
27:18 Why use a span when you have a div and a paragraph tag?
29:29 Figure and Caption
31:16 Fieldset
31:53 UL vs OL
32:44 DFN
- The Definition element
34:16 Form
36:56 Button vs Anchor
38:22 Headings
- 674 - A11y Treats - Heading Design
40:21 Output
- The Output element
41:46 Dialog
42:04 Tables
44:03 Media
- media-chrome
45:06 Canvas
- https://githubuniverse.com/
- https://maximeheckel.com/
46:07 On graphics programming
47:38 Search
- 354 - The Surprisingly Exciting World of HTML Elements
48:27 Sick Picks + Shameless Plugs

Sick Picks

Scott: 2Pack Traditional Natural Bamboo Wok Brushes
Wes: Logitech MX Master 3S

Shameless Plugs

Hit us up on Socials!

813: CSS: Scroll Driven Animations

Mon, 26 Aug 2024 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.

Show Notes

00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
01:35 Scroll-driven animations.
- Syntax 695: 5 New CSS Features You Should Know
- Scroll-driven animations demos and tools.
04:13 @keyframes.
05:22 animation-timeline.
11:35 animation-range.
08:49 View-based timelines.
17:45 Neat uses: Dave Rupert on styling :stuck.

Hit us up on Socials!

812: CSS 4, 5, and 6! With Google’s Una and Adam

Fri, 23 Aug 2024 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more!

Show Notes

00:00 - Welcome to Syntax!.
01:43 - Brought to you by Sentry.io.
02:19 - The evolution of CSS.
04:07 - CSS versioning and spec levels.
- CSS RFC.
17:49 - Use-cases for allow-discrete.
20:34 - State queries.
24:19 - Where does the baseline data come from?
25:17 - Will the RFC become official?
- The latest in Web UI (Google I/O ‘24).
27:33 - New features Una is excited about.
29:44 - Select.
- https://open-ui.org/components/customizableselect.
- https://codepen.io/argyleink/pen/YzoEPOG.
38:31 - New features Adam is excited about.
39:24 - text-box-trim.
40:59 - State queries.
54:56 - Sick Picks + Shameless Plugs.

Sick Picks

Una: Logitech MX Master 3
Adam: Teenage Engineering K.O. II

Shameless Plugs

Una: Una.im
Adam: The CSS Podcast

Hit us up on Socials!

811: NodeJS Evolves

Wed, 21 Aug 2024 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about the latest features in Node.js, including native support for TypeScript, .env parsing, a built-in test runner, watch mode, SQLite integration, glob support, and top-level await. They also discuss some wishlist items, and experimental features like WebSocket support and the require module.

Show Notes

00:00 Welcome to Syntax!
01:13 Brought to you by Sentry.io.
01:37 Node.js new features.
- Deno.
- Bun.
02:51 TypeScript.
- tsx.
- swc/wasm-typescript.
10:03 SQLite v22.5.
14:35 .env support.
16:24 Test runner.
- Jest.
19:42 Watch Mode.
- nodemon.
21:22 Glob support.
22:48 Top-Level Await.
- Top-level await is a footgun.
26:40 Experimental require module.
29:39 Experimental WebSocket support.
30:13 Async local storage.
31:43 Single file executables.
32:46 Wishlist.
- 32:54 Hot reload.
- 34:20 Window shim.
  - globalThis.
- 35:30 Better server.
- 35:56 Better terminal integration.
  - NIM.
  - styleText.
  - chalk.
  - warp.
41:36 Twitter responses.
- Coolify.
- n.
46:54 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Cascadia
Wes: Roborock Qrevo

Shameless Plugs

Scott: YouTube Channel

Hit us up on Socials!

810: Effortless Light and Dark Mode × Theme Styling

Mon, 19 Aug 2024 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about the latest CSS theming properties and techniques for better controlling light and dark modes, as well as creating comprehensive color systems for applications and websites. Make sure to check out the video version of this episode for practical code examples, and explanations of light/dark function, CSS variables, meta tags for theme colors, accent color, color mix, and upcoming features like style queries and color contrast.

Show Notes

00:00 Welcome to Syntax!
01:36 Brought to you by Sentry.io.
03:45 theme-color.
10:12 color-scheme.
15:14 light-dark().
17:44 How to force light or dark mode.
23:03 Live debugging box-shadow.
28:05 color-mix().
29:53 accent-color.
31:27 Relative color syntax.
35:49 Style queries and color-contrast().

Hit us up on Socials!

809: How To Stay Up To Date with Daily.dev’s Francesco Ciulla

Fri, 16 Aug 2024 10:00:00 -0000

In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape.

Show Notes

00:00 Welcome to Syntax!
00:36 Brought to you by Sentry.io
01:24 Overview and features of daily.dev
07:05 daily.dev's origin story
10:06 How Product Hunt fueled initial growth
12:21 Monetization and business model
13:53 Content and user experience
- Syntax Squad
22:21 Written content vs video content
24:29 Tech stack
- Terraform
- Pulumi
- React
- Vercel
- Fastify
- Postgres
- Go
25:37 Building a positive community
30:32 Moderation and tagging
35:03 Francesco's favorite place to publish right now
36:56 Quadrupling down on Rust
- Rust
39:38 Francesco's favorite Rust framework
- Actix
41:18 Sick Picks & Shameless Plugs

Sick Picks

Francesco: daily. dev

Shameless Plugs

Francesco: Francesco's YouTube Channel

Hit us up on Socials!

808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!

Wed, 14 Aug 2024 10:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more!

Show Notes

00:00 - Welcome to Syntax!
01:48 - Brought to you by Sentry.io
04:37 - The future of JavaScript frameworks
09:09 - How to use Caddy for local development
- SvelteKit
- Vite
14:27 - When to use an API
- Strapi
17:38 - Where does Scott get his amazing t-shirts?
- Sentry.shop
- Syntax Snack Pack
21:33 - Best screwdriver for kids toys
- PicQuic Sixpac Plus
- LTT Screwdriver
24:31 - Strategies for database design
- MongoDB
- Prisma
30:21 - Do we need frameworks?
- 796 - Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native
- Frontend Masters
32:19 - Best tech stack for building a basic login system
- 336 - How To Build Your Own Auth
37:56 - Syntax video episodes
40:25 - Component props in JSX
45:26 - Sick Picks & Shameless Plugs

Sick Picks

Scott: Loop Quiet Ear Plugs
Wes: Gecko’s Toes Water Hose Rack

Shameless Plugs

Scott: Syntax YouTube Channel

Hit us up on Socials!

807: CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!

Mon, 12 Aug 2024 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them.

Show Notes

00:00 - Welcome to Syntax!
01:30 - Brought to you by Sentry.io.
02:11 - What makes a good CSS component system?
07:54 - Component vs part of a component
13:26 - CSS Modules
15:56 - Scoped CSS
- @scope - (82% support!) ff behind flag
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
21:07 - How is Panda different from style components?
- Panda
- StyleX
00:00 - Utility CSS
- TailwindCSS
- Uno
31:08 - Utility Sprinkles
34:13 - CSS variables
- open-props.style

Hit us up on Socials!

806: The King of Drag and Drop: Alex Reardon

Fri, 09 Aug 2024 10:00:00 -0000

Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks.

Show Notes

00:00 Welcome to Syntax!
01:18 Brought to you by Sentry.io.
01:51 What Alex does at Atlassian
- react-beautiful-dnd
- Pragmatic drag and drop
04:38 What makes drag and drop tricky.
06:38 Use-cases.
10:54 What security is in place?
12:30 How to make it feel native.
19:20 Is the drag and drop spec ongoing?
20:03 How do you build this headless?
21:33 How does drag and drop work with frameworks?
23:48 Making drag and drop feel the same across mobile and desktop.
26:09 What’s the key to really good drag performance?
29:58 How do you make drag and drop accessible?
34:57 Pragmatic drag and drop code vs application code.
- Shoelace
- shadcn
40:00 How does testing work?
- Playwright
- Cypress
43:15 Internal adoption at Atlassian.
44:27 Working on high-impact projects.
49:15 Versioning and internal adoption at Atlassian.
51:29 Sick Picks + Shameless Plugs.

Sick Picks

Alex: Coffee, James Hoffmann YouTube Channel.

Shameless Plugs

Alex: Dom Events.

Hit us up on Socials!

805: We React to State of React Survey

Wed, 07 Aug 2024 11:00:00 -0000

Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem.

Show Notes

00:00 Welcome to Syntax!
01:41 Brought to you by Sentry.io.
02:28 The State of React 2023.
03:11 The Main API Painpoints.
- 04:31 forwardRef.
- 05:27 memo.
- 06:39 Context API.
- 07:18 StrictMode.
- 08:45 Double rendering.
- 09:36 State management.
11:58 Hooks Pain Points.
- 12:11 useEffect.
- 12:33 Dependency arrays.
13:11 New API Pain Points.
- 13:19 React Server Components.
- 14:40 Taint API.
15:19 Libraries.
- 17:02 Jotai.
- 17:45 Apollo Client.
- 19:05 Redux.
- 20:57 Redwood.
- 21:26 React Aria.
- 21:55 Astro.
- 22:04 The most negative.
23:35 Component Libraries.
25:50 Other Component Libraries.
- 25:53 Mantine.
- 27:47 Details element.
- Tolin.ski/demos.
- 28:59 Honorable mentions.
29:07 Animations.
29:28 Data Visualization.
31:26 CSS Tools and Libraries.
33:14 Styled Components.
34:16 Meta Frameworks.
38:50 Hosting.
40:08 Other Services.
40:45 Back-end language trivia.
43:00 State management.
43:40 Data Loading.
44:08 Other Tools.
44:09 Testing Libraries.
44:45 React Renderers.
47:58 Podcasts, thank you!
48:14 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Thermacell.
Wes: Nerf Guns

Shameless Plugs

Wes: Syntax.fm.

Hit us up on Socials!

804: Should Your Website Work Without JavaScript?

Mon, 05 Aug 2024 11:00:00 -0000

Scott and Wes debate whether your website really needs JavaScript to function. They explore the principles of web standards, progressive enhancement, and test popular websites like Shopify and Netflix to see how they perform without JavaScript.

Show Notes

00:00 Welcome to Syntax!
00:11 Take 2
01:43 Brought to you by Sentry.io.
02:19 The clip summarized.
- 03:16 Your website should load, be readable and be (mostly) styled without JavaScript.
- 07:32 Web standards first. If it can be done without JavaScript, it should be.
  - 08:09 What if the CSS doesn’t load?
  - 10:20 Linking
  - 10:24 Forms.
  - 12:11 Links (Duh, but also c’mon!)
  - 12:35 Query parameters.
- 13:57 Server render if possible.
15:20 Progressive Enhancement.
- 17:24 CSS Page Transitions.
19:07 Let’s test websites out.
- 19:15 Shopify.
- 22:16 Syntax.fm.
- 25:23 Netflix.
  - 27:27 Local first and offline service workers.
- 29:27 TikTok.
- 29:33 GitHub.

Hit us up on Socials!

803: The SQLite Takeover with Turso’s Glauber Costa

Fri, 02 Aug 2024 11:00:00 -0000

Scott and Wes chat with Glauber Costa from Turso about the evolution of databases and the fascinating technology behind Turso. They dive into topics like the benefits of massive multi-tenancy, vector search, and why Glauber made the switch from NoSQL to relational databases.

Show Notes

00:00 Welcome to Syntax!
00:36 Turso’s relationship with Drizzle.
02:10 What is Turso?
04:23 Brought to you by Sentry.io.
04:48 Using libSQL without Turso.
06:21 An explanation of Vector Search.
07:16 Vector databases are being ‘Sherlocked’ by larger databases.
09:24 Why did you move from NoSQL to Relational?
12:00 Allows for massive multi-tenancy - what does that mean?
15:27 Transactional schema changes.
16:30 Why would you want 10,000 databases?
19:02 What makes SQLite cheaper?
22:59 The strategy for building a business around an inexpensive tool.
26:13 Pull requests and branching within SQLite.
28:52 Database snapshots for rollbacks.
31:14 Driving the cost of a database to zero allows for rethinking architecture.
32:35 SQLite informing Turso’s edge functionality.
36:56 Automatic replica database syncing.
39:10 Is the database a bottleneck?
39:25 Embedded Replicas.
40:04 How do embedded replicas handle conflict resolution from offline users?
41:43 If the server is offline, can the database live in the client or WASM?
43:09 Conflict resolution.
44:47 What makes Turso stand out?
47:51 What was it like working on the Linux Kernel?
51:57 Do you use Linux?
52:46 Sick Picks & Shameless Plugs.

Sick Picks

Glauber: Understanding yourself, What is Aphantasia.

Shameless Plugs

Glauber: React Rally Park City, UT, Turso, Laravel.

Hit us up on Socials!

802: Tree Shaking × useMemo vs useCallback × JavaScript Event Loop - STUMP'd

Wed, 31 Jul 2024 11:00:00 -0000

Scott and Wes serve up a gameshow-style quiz with STUMP’d, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights!

Show Notes

00:00 Welcome to Syntax!
01:17 Brought to you by Sentry.io.
02:03 The longest game of Rock, Paper, Scissors.
Round 1
03:22 In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other?
05:56 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits?
Round 2
09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area.
11:34 What is the “Temporal Dead Zone” in JavaScript, and how does it relate to variables declared with let and const
Round 3
13:29 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue.
17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM?
Round 4
20:05 Explain the process of Critical Rendering Path optimization in modern web browsers
26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript.
Round 5
30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development.
32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores.
Round 6
35:26 Explain the concept of “code splitting” in modern JavaScript applications.
37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility.
Round 7
45:15 Explain the concept of “Server-Sent Events” (SSE) in web development.
47:37 What’s the difference between contain layout and contain paint?
49:30 Sick Picks & Shameless Plugs.

Sick Picks

Scott: diskprices.
Wes: Slime Tire Sealant.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

801: 6 New JavaScript Proposals

Mon, 29 Jul 2024 11:00:00 -0000

Scott and Wes serve up six exciting new JavaScript proposals, including Promise.try and Math.sumPrecise. They break down what each proposal means for developers and how these new features could change the way we write JavaScript.

Show Notes

00:00 Welcome to Syntax!
01:45 Understanding the stages of JavaScript Proposals.
04:04 Promise.try - Stage 3.
05:39 Math.sumPrecise - Stage 2.7.
07:28 Floating point math.
09:07 ShadowRealm - Stage 2.7.
11:39 Brought to you by Sentry.io.
12:03 Regex Escape - Stage 2.
13:33 Defer Module Evaluation - Stage 2.7.
15:09 Iterator Sequencing - Stage 2.

Hit us up on Socials!

800: Why the jQuery Creator Uses React and Typescript - John Resig

Fri, 26 Jul 2024 11:00:00 -0000

In episode 800 of Syntax, Scott and Wes sit down with John Resig, the creator of jQuery, to discuss the current state of React and TypeScript. They dive into the evolution of frontend frameworks, the challenges of server-side rendering, and the tech stack at Khan Academy.

Show Notes

00:00 Welcome to Syntax!
00:59 Brought to you by Sentry.io.
01:32 What is jQuery?
05:31 Did you anticipate the success jQuery had?
07:16 allow-discrete, @starting-style.
- Install Nothing: App UIs With Native Browser APIs - Scott Tolinski.
07:54 Building the community around jQuery.
11:16 jQuery plugins.
13:00 Did you ever make money from jQuery?
16:13 What is your role at Khan Academy.
17:58 What is the tech stack at Khan Academy?
21:56 Why do you want to change your CSS and JS framework?
24:03 TypeScript vs Flow.
25:25 GraphQL federation.
28:08 What was your frontend framework journey?
30:23 Is there any part of React you wish would improve?
32:37 Reservations using React Router.
33:14 Khan Academy web platform vs native platform.
35:21 What do you use for state management?
38:48 What’s harder than it should be on the web today?
- Kilian’s Question On X.
- Polypane.app.
42:46 Opinions on JavaScript Sprinkles.
44:04 What’s with the $ sign in jQuery?
45:29 The challenges of having your name in such a widely used software.
51:06 Challenges with server-side rendering in React.
52:42 Sick Picks & Shameless Plugs.
54:48 What are the performance issues associated with internationalization?
56:57 Back to Sick Picks & Shameless Plugs.

Sick Picks

John: Biome, Remix, Lingui.

Shameless Plugs

John: Khan Academy.

Hit us up on Socials!

799: Hot New and Under-Utilized Browser APIs

Wed, 24 Jul 2024 11:00:00 -0000

Scott and Wes serve up the latest and most under-utilized browser APIs that are changing the game for web development. From the @starting-style CSS API to scroll-snap and popovers, they break down how these tools can elevate your projects with minimal effort.

Show Notes

00:00 Welcome to Syntax!
- Install Nothing: App UIs With Native Browser APIs – Scott Tolinski.
- Tolin.ski Demos.
01:03 Brought to you by Sentry.io.
02:15 When to use these tools.
03:45 @starting-style CSS API.
08:23 Transition behavior allow-discrete.
- Dialog CSS.
11:56 calc-size(auto).
16:19 scroll-snap.
22:05 View Transitions.
- Cross-document view transitions for multi-page applications
33:28 Popover API.
41:15 Dialog.
- Tolin.ski Demos Drawer CSS.
48:12 Details.
- Tolin.ski Cool-Treats Accordion.
53:26 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Emerge Tools.
Wes: Apple TV+ Hacks.

Shameless Plugs

Scott: Local First from Scratch.

Hit us up on Socials!

798: Self Hosting: Reverse Proxy Servers

Mon, 22 Jul 2024 11:00:00 -0000

Scott and Wes serve up an episode on reverse proxy servers. They discuss popular options like CF Tunnels, Caddy, Nginx, Apache, and more, explaining why you might need one for load balancing, SSL certificates, security, and managing multiple servers.

Show Notes

00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io.
02:25 What is reverse proxy?
03:16 Some examples of reverse proxies.
05:04 Why do you need a reverse proxy?
- 05:09 Combining multiple servers.
- 06:51 Load balancing.
- 07:23 SSL certificates.
- 10:30 Security.
  - 10:37 Conceal your true IP.
  - 11:24 Access management.
- 12:31 Routing static assets.
- 13:31 CDN / local.
15:55 Caddy × websocket support.

Hit us up on Socials!

797: Drizzle: The TypeScript SQL ORM

Fri, 19 Jul 2024 11:00:00 -0000

Scott and Wes chat with Alex Blokh and Andrew Sherman, the co-founders of Drizzle ORM, about building a modern ORM from the ground up. They dive into the importance of type safety, creating filters with Drizzle, and the differences between Drizzle and other ORMs like Prisma.

Show Notes

00:00 Welcome to Syntax!
- Syntax × Drizzle Swag.
01:15 What is Drizzle?
02:36 The genesis of Drizzle.
04:15 The process of building an ORM.
05:38 ‘100% Type-Safe’ and why that’s not a great goal.
07:50 Who is responsible for writing the complicated TypeScript?
09:40 Is an ORM necessary for anyone working with data?
12:15 Creating a product that fits different complexities.
13:19 Brought to you by Sentry.io.
13:44 Creating filters in Drizzle. Callback-based, or imported. Why?
19:22 Drizzle vs Prisma vs Kysely.
22:45 Are you friendly with Prisma?
23:35 Relational queries.
25:17 Query vs select.
27:42 Maintaining so many different technologies.
30:37 Switching databases.
31:39 Drizzle Studio.
- Drizzle Studio Syntax Theme.
35:00 Accessing Cloudflare D1 SQLite requires connection through a worker.
37:40 Drizzle Kit.
41:37 Will you ever support MongoDB?
42:10 Supporting PGlite and local data storage landscape.
- DrizzleORM v0.30.6 release notes.
44:00 Being a developer in Ukraine in 2024.
- How to support Ukraine: Savelife, United24.
51:07 Drizzle is expanding.
53:50 Sick Picks + Shameless Plugs.

Sick Picks

Andrew - Smart Swim Goggles.

Shameless Plugs

Andrew - Savelife, United24. Scott - Syntax × Drizzle Swag.

Hit us up on Socials!

796: Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native

Wed, 17 Jul 2024 11:00:00 -0000

Scott and Wes tackle a variety of audience questions, from the nuances of over-engineering to the energy consumption of AI LLMs. They also discuss the pros and cons of monorepos, frameworks, and the ever-important question: Do you really need to learn all the developer tooling?

Show Notes

00:00 Welcome to Syntax!
00:41 Brought to you by Sentry.io.
01:07 Challenges around a resume playback function.
05:56 Why use Google Forms for Potluck questions?
07:57 What constitutes over-engineering and how to avoid it.
13:28 Webview vs native component based mobile apps.
18:06 Running and managing monorepos.
20:59 Energy consumption of AI LLMs vs static web content.
- A guide to LLM inference and performance.
- From Words to Watts: Benchmarking the Energy Costs of LLM Inference.
25:19 Why do we need frameworks?
- Frank M Taylor Blog Post.
33:05 Handling ad-blockers blocking Sentry and other tools.
- Syntax GitHub.
38:25 Creating sites without JavaScript.
42:49 Do I really have to learn all the various developer tooling?
- Wes Bos Tweet.
44:47 What are the best ways to network and meet other developers?
50:16 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Tweek App/
Wes: Rain-X Waterless Car Wash.

Shameless Plugs

Scott: Swag Store.
Wes: Audio Player Updates.

Hit us up on Socials!

795: Hosting Private Fonts on the Edge With Cloudflare

Mon, 15 Jul 2024 11:00:00 -0000

Scott and Wes dish out the intricacies of hosting private fonts using Cloudflare Pages. They explore the challenges of font security, the benefits of a font server, and the nuances of caching and whitelisting to keep your fonts secure and efficient.

Show Notes

00:00 Welcome to Syntax!
01:53 Behind the Code: Brought to you by Sentry.io.
03:12 The problem with hosting fonts.
- Scott’s Fonts.
05:42 The solution, a font server with Cloudflare Pages.
09:37 Utilizing a Key Value Store.
10:53 Storing a whitelist.
13:42 Why not just use a bucket?
- Check out the code.
15:24 Should whitelisting be done in JavaScript or cores?
17:23 How do you cache to multiple origins?
18:15 Multiple URLs in an allow origin.
19:17 Font security and foundry challenges.
21:43 Moving Domains on Cloudflare.

Check out the font Syntax uses! MD-IO.

Hit us up on Socials!

794: Prettier JavaScript with Vjeux

Fri, 12 Jul 2024 11:00:00 -0000

Scott and Wes sit down with Vjeux from Meta to dive deep into the origins and evolution of Prettier, the widely-used code formatter. They discuss the challenges faced, the decision-making process behind its features, and what the future holds for this indispensable tool in the developer’s toolkit.

Show Notes

00:00 Welcome to Syntax!
01:45 Brought to you by Sentry.io.
02:19 New swag!
03:25 Who is Vjeux?
06:56 Is management the key to successful projects?
08:50 The genesis of Prettier.
12:08 Why other JS formatters didn’t work.
16:56 Focusing on edge-cases.
17:41 The goal for Prettier.
- Prettier Philosophy.
18:31 Next step, integrations.
19:37 Should you run Prettier on save or commit?
21:34 Does Prettier’s limitations lead to higher adoption?
- Prettier Config.
25:01 What was the most controversial default setting?
28:14 Does Facebook use semicolons?
29:18 Getting approval to devote 6 months to Prettier.
31:42 Working with Mark Zuckerberg.
32:43 Was there ever consideration to augment ESLint instead?
- Prettier vs. Linters.
35:34 What are your thoughts on the Rust-based alternatives?
36:44 Prettier’s $10,000 bounty.
39:32 What is the future of Prettier?
44:54 Prettier is available in almost every language.
47:59 Advice for other open-source maintainers.
53:26 Sick Picks & Shameless Plugs.

Sick Picks

Vjeux: TransformersJS.

Shameless Plugs

Vjeux: Prettier x Syntax Swag.

Hit us up on Socials!

793: The Local First Landscape

Wed, 10 Jul 2024 11:00:00 -0000

Scott and Wes dive into the local first landscape, exploring the benefits and possibilities of local first apps. They highlight some of their favorite tools and discuss why local first is gaining traction among developers.

Show Notes

00:00 Welcome to Syntax!
00:27 Behind the Code: Brought to you by Sentry.io.
01:06 Catch up with Wes and Scott.
03:00 The local first space.
- Scott’s Blog: The Spectrum of Local First Libraries.
- Syntax 739: The Lofi Movement.
04:27 Some local first apps we love.
- Linear.
- Tweek.so.
- Superhuman.
05:15 The advantages of local first.
06:07 localfirstweb.dev.
- 09:21 Triplit.
- 15:33 Evolu.
- 22:32 RxDB.
- 24:08 ElectricSQL.
- 26:57 Pouchdb.
- 28:46 TinyBase.
- 32:08 Replicache.
- 44:31 PowerSync.
48:21 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Battery Jump Starter.
Wes: Battery Tire Pump.

Shameless Plugs

Wes: Syntax Swag

Hit us up on Socials!

792: Perfect Sitemaps for SEO

Mon, 08 Jul 2024 11:00:00 -0000

Scott and Wes break down the importance of sitemaps for SEO. They dive into the different file formats, essential fields, and common pitfalls to avoid when creating and submitting your sitemap to search engines.

Show Notes

00:00 Welcome to Syntax!
- New Swag Coming Soon.
- Tolin.ski.
02:09 Brought to you by Sentry.io.
02:39 Sitemaps.
04:36 Why do you need a sitemap?
06:34 Sitemap file formats.
- 08:31 Choosing a file format.
- 09:17 Site map file size limits.
- 10:32 Fully-qualified URLs.
10:50 Fields and metadata.
- 10:58 What fields matter for SEO?
14:20 What to avoid in your sitemap?
- 14:23 Dynamic user pages and account pages.
- 14:43 Parameter-based URLs.
- 16:01 Redirects, duplicates or disallowed pages.
- 16:11 Unlisted pages.
17:07 How do you make a sitemap?
20:06 What to do once you have a sitemap.
- 20:08 Validation.
- 20:20 Submit to search engine.
  - Bing Webmaster Tools.
  - Google Search Console.
- 22:11 Cache them!

Hit us up on Socials!

791: LLRT The Serverless Runtime w/ Richard Davison

Fri, 05 Jul 2024 11:00:00 -0000

Scott and Wes chat with Richard Davison from AWS about LLRT, a new runtime tailored specifically for Lambda. They dive into the benefits of using LLRT, challenges with JavaScript in serverless, and why Rust was chosen for its development.

Show Notes

00:00 Welcome to Syntax!
01:07 Who is Richard Davison?
05:11 What is LLRT and what’s the motivation for building it?
08:25 AWS Lambda example.
11:20 What makes LLRT specifically tailored to Lambda?
14:55 Brought to you by Sentry.io.
15:22 Node.js in Lambda.
16:00 What are some challenges that people have with JavaScript in serverless?
17:20 Lambda memory configuration.
19:23 Managing cost of compute.
21:29 Simpler and faster than Node, Bun, Dino, but not a replacement.
22:31 The benchmarks.
27:00 Quick.js, the main reason for the performance gains.
- Fabrice Bellard QuickJS.
28:03 The Quick.js engine.
30:35 What was the reason behind creating Quick.js?
33:46 What made you pick Rust for LLRT?
36:34 Abstractions and the value of speed.
39:08 The JIT Compiler.
42:38 Compile cache.
43:27 De-optimizations.
44:59 Node.js Compat, what to use and avoid with LLRT.
- GitHub AWS Labs Compatibility Chart.
47:52 Will you target with WinterCG spec?
50:22 Streams API.
52:06 What about WebSockets?
53:10 Is this going to be promoted from a labs project?
54:49 Sick Picks + Shameless Plugs.

Sick Picks

Richard: QuickJS Engine, JSLinux.

Shameless Plugs

Richard: Javascript

Hit us up on Socials!

790: State of JS 2023 Reactions

Wed, 03 Jul 2024 11:00:00 -0000

Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

Show Notes

00:00 Welcome to Syntax!
- State of JS 2023.
03:04 Brought to you by Sentry.io.
03:43 New Syntax Swag!
- Syntax Swag Store.
04:42 Front end frameworks.
08:30 Front end framework pain-points.
12:17 Metaframeworks.
17:45 Metaframework pain-points.
22:17 Build tools.
- Rolldown.
24:45 Build tool pain-points.
25:54 JavaScript runtimes.
28:19 Edge + serverless runtimes.
29:30 Backend frameworks.
33:17 Non-JavaScript languages.
36:12 Hosting service.
38:50 Usage.
40:05 Javascript usage.
41:03 Missing features.
45:04 Industry sector.
47:37 The awards.
51:34 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Electric Lighter.
Wes: Monkey Noodle.

Shameless Plugs

Wes: Syntax Swag Store.

Hit us up on Socials!

789: Do More With AI - LLMs With Big Token Counts

Mon, 01 Jul 2024 11:00:00 -0000

Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

Show Notes

00:00 Welcome to Syntax!
01:31 Brought to you by Sentry.io.
02:42 What is a token?
- Quizgecko GPT-4 Token Counter.
04:22 Context window sometimes called “max tokens”.
- OpenAI Platform Models.
- Claude Models.
10:42 Understanding input length.
11:59 Models + services with big token counts.
- Gemini Docs.
13:22 Generating open API documentation for a complex API.
17:29 Generating JSDoc style typing.
- Drop-In stolinski GitHub.
21:07 Generating seed data for a complex database.
- bytedash w3cj GitHub.
24:34 Summarizing 8+ hours of video.
29:35 Some things we’ve yet to try.
31:32 What about cost?
- Google AI for Developers Cost.

Hit us up on Socials!

CJ: X Instagram YouTube TwitchTV

788: Supabase: Open Source Firebase for Fullstack JS Apps

Fri, 28 Jun 2024 11:00:00 -0000

Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

Show Notes

00:00 Welcome to Syntax!
00:30 Who is Paul Copplestone?
01:17 Why ‘Supa’ and not ‘Super’?
02:26 How did Supabase start?
- 04:29 How long from inception to joining Y Combinator?
- 05:10 Was it always intended to be open source?
  - Why Open Source.
- 07:22 How many users chose to self-host?
- 07:49 Open source mindset.
08:42 Simplicity in design.
10:32 How do you take Supabase one step beyond the competition?
12:35 How do you decide which libraries are officially supported vs community maintained?
- 15:17 You don’t need a client library!
16:48 Edge functions for server-side functionality.
18:51 The genesis of pgvector.
20:59 The product strategy.
22:25 What’s the story behind Supabase’s awesome docs?
25:26 The tech behind Supabase.
- 25:39 What is the UI built on?
- 27:33 Consolidation follows kaizen.
- 28:54 What else is involved in the stack?
- 31:47 Authentication.
- 32:35 Storage engine.
- 33:13 For self-hosting.
35:46 How do you balance business goals with open source?
42:01 What’s next for Supabase?
44:15 Supabase’s GA + new features.
- Top 10 LAunches from Supabase GA Week.
48:24 Who runs the X account?
50:39 Sick Picks + Shameless Plugs.

Sick Picks

Paul: Apple Vision Pro.

Shameless Plugs

Paul: PostgreSQL.

Hit us up on Socials!

CJ: X Instagram YouTube TwitchTV

787: You Should Try Vue.js

Wed, 26 Jun 2024 11:00:00 -0000

Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

Show Notes

00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
02:24 What is Vue?
- 04:13 Similar to Svelte, different from React.
05:35 How to get started with Vue.
- 05:43 Script tag.
- 06:01 CLI.
- 07:10 The value of an opinionated CLI.
10:51 Why do you like Vue.js over React or Svelte?
- 11:03 Less boilerplate.
- 15:24 Self-closing tags.
- 16:09 Svelte parsing HTML tags incorrectly.
  - Hacker News Article.
- 17:08 Easily adding event handlers to elements.
- 18:20 Conditional rendering.
- 19:19 What is a directive?
- 20:29 ‘Borrowing’ from Angular One.
- 21:07 Styles are built in.
- 22:11 Tailwind for scoping.
- 26:08 State management.
- 30:28 Ref Functions similar to Svelte Runes.
- 32:03 Global state management.
- 34:24 Pinia.
36:18 What is the full-stack application platform for Next.js?
38:00 Nuxt auto-imports.
- sveltekit-autoimport.
39:37 Creating API functions and server side codes.
41:12 The future of Vue and compilers for front end frameworks.
41:43 Vue’s compiler.
44:19 Are people actually using Vue?
46:50 Laravel and Vue.
48:29 Sick Picks & Shameless Plugs.

Vue.js: The Documentary.

Sick Picks

Scott: Jordan Roam Slides.
CJ: USB Charging Hub

Shameless Plugs

Scott: Syntax on GitHub
CJ: Syntax.fm

Hit us up on Socials!

786: What Open Source license should you use?

Mon, 24 Jun 2024 11:00:00 -0000

Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

Show Notes

00:00 Welcome to Syntax!
00:54 Brought to you by Sentry.io.
- Sentry Open Source.
- Giving away $500,000 to open source projects.
01:56 What is open source?
03:19 This is not legal advice.
03:51 Source available ≠ open source.
- No Permission.
06:39 The benefits of open source.
- 07:26 Educational.
- 07:52 More Secure.
- 09:32 Community-oriented.
  - Scott’s Habit Path
11:29 Types of licenses.
- 12:09 Permissive licenses.
  - 12:26 MIT License.
  - 14:37 Apache 2.0 license.
- 15:31 Copy Left licenses.
  - 15:58 GNU GPLv3.
- 18:16 Copy Left + permissive.
  - 18:23 (Mozilla Public License) MPL.
- 19:31 Business licenses.
  - 19:35 Functional Source License.
  - 23:16 Companies using BUSL.
  - 24:41 Server Side Public License (SSPL).
26:56 Choosing and acknowledging licenses.
29:13 Applying a license to your directory.

Hit us up on Socials!

785: What’s Next for Next.js with Tim Neutkens

Fri, 21 Jun 2024 11:00:00 -0000

Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

Show Notes

00:00 Welcome to Syntax!
00:30 What does the React Compiler do?
05:04 Will React Compiler help with managing Context?
06:39 What happens if you’re not using a React Compiler?
- react.dev Playground.
09:30 Will this work on any NextJS version?
12:18 What are React Server Components?
16:28 Shipping all the data inside an encapsulated component.
20:17 Clearing up the frustrations around retrofitting server components.
23:13 Handing migration.
28:30 Is this just a fetch request with props?
36:41 How closely are the NextJS and React teams working?
41:53 Will we ever get Async Client Components?
43:52 Async Local Storage API.
45:31 Turbopack.
57:51 Sick Picks & Shameless Plugs.

Sick Picks

Tim: Apple TV Sci-Fi.

Shameless Plugs

Tim: Turbopack, Next.js 15 RC, Sentry NextJS.

Hit us up on Socials!

784: Logging × Blogging × Testing × Freelancing

Wed, 19 Jun 2024 11:00:00 -0000

In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

Show Notes

00:00 Welcome to Syntax!
00:13 How to submit a question for future episodes.
- Potluck Questions.
02:46 Brought to you by Sentry.io.
03:21 Logging from a site.
08:39 Blogging in 2024.
11:49 Sharing website environmental data.
17:38 Using LangChain when working with LLMs.
21:03 CSS Hyphens and Overflow-Wrap.
- Hyphens Browser Compatibility.
- Overflow-Wrap.
25:52 Similarities between WASM, JVM and .NET.
27:25 Writing unit testing and integration testing.
32:00 How can new parents stay current on web development trends?
34:47 Working globally as a freelance developer.
37:26 Scott’s audio setup. Why audio interfaces have DSP built in.
- ChaseBliss Pedal.
43:04 UI libraries for synth/audio plugins.
44:02 CSS module scripts.
- CSS Modules in CSS Module Scripts.
48:39 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Deep Cover Podcast.
Wes: Pressure Washer Surface Cleaner.

Shameless Plugs

Wes: Syntax.fm/videos.

Hit us up on Socials!

783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

Mon, 17 Jun 2024 11:00:00 -0000

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

Show Notes

00:00 Welcome to Syntax!
02:07 Brought to you by Sentry.io.
02:33 The file system API.
03:08 The Cache API.
- Mozilla Developer Cache API.
- Airhorner, a good example.
04:24 Size restrictions per browser.
07:04 How tools like Riverside.fm use IndexedDB.
08:47 Data eviction (too much data).
10:16 What we’re using it for and how.
12:17 How do we do this in code?
14:37 Creating the cache.
16:18 Retrieving from cache manually.
19:00 Adding metadata.
19:37 A live debugging.
22:39 Persistent storage.
- web.dev Persistent Storage.
- Hackernoon Persistent Storage.
26:10 Media score.
- Chrome Autoplay Policy.

Hit us up on Socials!

782: The Developer’s Guide To Fonts with Stephen Nixon

Fri, 14 Jun 2024 11:00:00 -0000

Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

Show Notes

00:00 Welcome to Syntax!
00:57 Who is Stephen Nixon?
- Process Type Foundry.
- Mark Simonson Proxima Nova.
05:42 What is a type foundry exactly?
- ArrowType.
09:09 Font / type making.
- 09:15 How do you make a font?
  - RoboFont.
  - Glyphs.
- 11:58 Fonts vs typefaces.
- 13:02 How many fonts have you made?
- 14:17 What are variable fonts and how can web developers utilize them?
- 19:22 Animating fonts.
  - Variable Fonts.
  - Recursive.
- 20:28 Do you code your demo sites yourself?
- 21:50 Are variable fonts more complex to design (and develop).
- 27:03 Hand painted fonts.
- 29:39 Creating a monospace font.
- 32:19 Creating fonts with dyslexia accessibility in mind.
37:58 Typography for the web.
- 38:29 What are some 80/20 rules developers can employ to make more visually appealing typography?
- 40:58 Type scale calculations.
  - Scott’s Fluid Type Calculator.
- 45:42 What are your biggest web type pet peeves.
- 48:46 Do you have any favorite type tools?
  - Wakamifondue.
  - Fixing Variable Font Inheritance.
50:34 Supper Club Questions.
- 50:44 How do you feel about ligatures in coding fonts?
  - Ligatures In Programming Fonts Hell No.
- 55:11 What font do you use?
  - Name Sans v05.
  - Name-Mono.
- 56:43 What is your favorite font of all time?
  - Typotheque.
  - Soehne.
  - Grillitype Typefaces.
  - Phnotype.
58:49 Sick Picks + Shameless Plugs.

Sick Picks

Stephen: Children of Time, No-Recipe Recipes.

Shameless Plugs

Stephen: ArrowType, Skewing Fonts.

Hit us up on Socials!

781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

Wed, 12 Jun 2024 11:00:00 -0000

In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

Show Notes

00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
01:49 Today’s format.
02:23 Beginner vs advanced TypeScript.
- DHH Tweet.
09:23 Does Sveltekit replace Svelte with Astro?
13:09 Handling multiple languages.
19:52 Falling out of love with React.
25:53 Shipping private packages via NPM.
- npm-install.
- Working with the npm registry.
29:00 How do you feel about importing packages from a URL?
30:36 VueJS vs Svelte.
36:15 Leetcode type interview questions.
41:58 Learning a new language for personal growth.
46:21 Always starting, never finishing.
- Scott’s Fluid Type Calculator.
50:23 Code quality vs tackling tickets.
55:36 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Quick Look Plugins.
CJ: Sony WFC700n-b.

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

780: Cloud Storage: Bandwidth, Storage and BIG ZIPS

Mon, 10 Jun 2024 11:00:00 -0000

Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.

Show Notes

00:00 Welcome to Syntax!
01:14 Brought to you by Sentry.io.
02:05 Why you might need a cloud storage provider.
03:07 How we use cloud storage.
- Dropshare.
08:16 Why you may need larger storage.
09:49 The big players in this space.
- Amazon S3.
- Cloudflare R2.
- Backblaze B2.
- Synology C2.
- Google Cloud Storage.
- Microsoft Azure.
- Digital Ocean Spaces.
- Oracle.
- Bunny.net.
- Amazon S3 Glacier.
14:34 Storage fees.
18:31 Why so cheap?
20:49 Bandwidth (egress).
- Cloudflare Bandwidth Alliance.
26:46 Operation fees - costs money.

Hit us up on Socials!

779: Why SQLite is Taking Over with Brian Holt & Marco Bambini

Fri, 07 Jun 2024 11:00:00 -0000

Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it!

Show Notes

00:00 Welcome to Syntax!
01:20 Who is Brian Holt?
02:26 Who is Marco Bambini?
05:12 Why are people starting to talk so much about SQLite now?
08:47 What makes SQLite special or interesting?
09:46 What is a big misconception about SQLite?
11:13 Installed by default in operating systems.
12:03 A perception that SQLite is intended for single users.
13:36 Convincing developers it’s a full-featured solution.
15:11 What does SQLite do better than Postgres or MySQL?
17:30 SQLite Cloud & local first features.
20:38 Where does SQLite store the offline information?
23:08 Are you typically reaching for ORMs?
25:00 What is SQLite Cloud?
27:29 What makes for an approachable software?
29:18 What make SQLite cloud different from other hosted SQLite options?
32:13 Is SQLite still evolving?
34:40 What about branching?
37:37 What is the GA timeline?
40:04 How does SQLite actually work?
41:19 Questions about security.
44:28 But does it scale?
45:52 Sick Picks + Shameless Plugs.

Sick Picks

Brian: Trainer Road Marco: Tennis

Shameless Plugs

Brian: SQLite Cloud, Frontend Masters - Containers.

Hit us up on Socials!

778: 11 Habits of Highly Effective Developers

Wed, 05 Jun 2024 11:00:00 -0000

Today, Scott and Wes dive into the 11 habits of effective web developers, from understanding stakeholder goals to maintaining a work-life balance. We’ll explore the importance of continuous learning, having a problem-solver mentality, and being empathetic towards coworkers and users—let’s get into it!

Show Notes

00:00 Welcome to Syntax!
- Previous Episode: 754.
00:50 Brought to you by Sentry.io.
- 01:24 Denver weather is something else.
02:15 Habit #1: You understand stakeholder and business goals.
05:34 Habit #2: You’re curious and always learning.
07:43 Habit #3: You have an open mind about new technology.
11:29 Habit #4: You ask for help.
13:43 Habit #5: You help others.
- 16:51 Chicken drumsticks.
17:35 Habit #6: You have a “problem solver” mentality.
- 24:44 Hose repair.
26:02 Habit #7: You have fun with what you do.
29:56 Habit #8: You understand work-life balance.
33:18 Habit #9: You are empathetic to your co-workers and users.
37:19 Habit #10: You pay attention to detail.
41:18 Habit #11: You’re part of the community.
45:55 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Solar Lanterns.
Wes: Ninja Obstacle Course.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

777: The Modern Dev CMS - Pocketbase

Mon, 03 Jun 2024 11:00:00 -0000

Today, Scott and Wes are diving into Pocketbase, a fantastic tool for web developers to quickly set up a CMS without breaking a sweat. We’ll cover everything from its Go-based architecture to its slick admin interface and how you can get started hosting it for free on Fly.io.

Show Notes

00:00 Welcome to Syntax!
01:34 Brought to you by Sentry.io.
02:26 Overview of Pocketbase.
06:51 Written in Go, but no extending needed.
- Host for free on Fly.io.
07:37 Hooks.
08:05 Authentication + roles.
09:23 The admin experience.
11:18 Managing export collections.
13:21 Creating your own schema.
13:53 Adding indexes.
14:08 API rules.
15:01 Adding complex roles.
16:15 Full-featured admin with a great UI.
16:59 Collection API preview.
17:41 Docs with app-specific context.
18:54 Logs.
19:02 Settings.
19:42 Executable vs npm install.
20:29 Are the collections fully typed?
21:01 Some more settings.
22:56 One click Coolify install.
- Svelte Kit / Svelte 5 / Pocketbase Example.
- Svelte / Pocketbase Starter.
- Pocketbase Typegen.

Hit us up on Socials!

776: How 1Password Uses WASM and Rust for Local First Dev With Andrew Burkhart

Fri, 31 May 2024 11:00:00 -0000

Today we’re serving up an episode on 1Password with Senior Rust Developer Andrew Burkhart, delving into how 1Password works, tackling conflict resolution and security challenges, and exploring the benefits of using Rust.

Show Notes

00:00 Welcome to Syntax
00:57 Who is Andrew Burkhart?
01:36 How does 1Password work?
03:24 What’s the data flow on creating a new login?
05:40 The conflict resolution challenges of pull first, push second.
06:46 Merging strategies: How do you chose which device wins the conflict?
08:27 1Password’s sync is fast and reliable.
11:20 Nuances of the extension.
12:59 The value of Hackathons.
13:40 What’s the main benefit of 1Password using Rust?
15:41 Watchtower processing.
17:15 1Password SSH.
18:17 1Password env.
19:11 Some other cool tools.
20:33 Does the increased security make developing challenging?
25:26 What’s 1Password’s security onboarding like?
27:47 1Password and WASM.
31:45 Tokio as the asynchronous runtime for Rust.
34:25 Scott’s Rust based video app.
35:03 What is an FFI?
38:13 How did you learn Rust?
- Jon Gjengset - Rust Nation UK YouTube.
- Let’s Get Rusty YouTube.
41:13 Why is the 1Password team so big?
42:40 Are there teams that manage individual applications for errors?
43:45 Challenges with WASM.
48:59 Syntax horror stories.
- Episode 586 with Eric Sartorius.
52:50 Sick Picks + Shameless Plugs.

Sick Picks

Andrew: Nix Mini 3, Asynchronous Programming in Rust.

Shameless Plugs

Andrew: 1Password.

Hit us up on Socials!

775: Components We Need on Every Project

Wed, 29 May 2024 11:00:00 -0000

In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons.

Show Notes

00:00 Welcome to Syntax!
01:48 Brought to you by Sentry.io.
02:53 Nav / Mobile Nav.
08:43 Header.
10:41 Toast message.
- Wes’ TikTok Demo.
18:51 Portal.
21:02 Drawer.
22:56 Auth forms.
28:49 Dialog / Modal.
31:30 Whats the difference between popover and dialog?
33:48 Confirm.
- Scott’s YouSureAboutThat.
35:46 Bonus tip on becoming a better developer.
36:29 Admin menu.
- Level Up Tutorials - Side Menu Demo.
37:51 Scott’s package directory rant.
40:26 Mobile only / Desktop only.
40:41 Client only.
40:57 Admin table.
41:23 The dump.
43:39 Share / Social links.
- Syntax ShareWindow.
45:44 Markdown renderer.
45:58 Tabs.
46:08 User menu.
46:18 Icon.
48:07 Loading.
49:21 Drop-down menu.
49:31 Accordion.
- CSS Tricks - How to Animate the Details Element.
52:13 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Supercommunicators.
Wes: Klack, Mech Vibes.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

774: Promise Flow Control, Concurrency, Libraries, TypeScript and Deferreds - Part 3

Mon, 27 May 2024 11:00:00 -0000

In today’s episode, Scott and Wes dive into the final part of our JavaScript Promises series, covering deferred promises, fetch, flow control, concurrency with libraries like p-map and p-limit, and integrating TypeScript.

Show Notes

00:00 Welcome to Syntax!
00:31 Brought to you by Sentry.io.
01:11 Deferred promises.
- Promise.withResolvers().
- Wes’ TikTok.
06:10 Fetch.
09:04 Flow Control.
12:19 Concurrency, Throttling, Queuing.
- p-map.
- p-limit.
16:13 TypeScript and Promises.

Hit us up on Socials!

773: React Native with Robin Heinze

Fri, 24 May 2024 11:00:00 -0000

Scott and Wes dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project.

Show Notes

00:00 Welcome to Syntax!
01:13 Brought to you by Sentry.io.
01:30 React Native is different than Cordova or other webview platforms.
04:18 Is there a ‘write once deploy everywhere’ aspect?
05:48 What are some React Native apps people may not realize?
- Mercari: Buying & Selling App.
07:13 What about Twitter + Facebook?
09:15 What is Expo? Is Expo Required?
- expo.dev.
13:27 Does it require a Mac to build an iOS app?
14:58 React Native and routing.
- Expo Router.
16:56 How do native apps normally work without a URL?
18:35 Can you use CSS with React Native?
20:27 Do React Native or Tamagui translate to CSS or Yoga?
- Tamagui.
- Yoga Layout.
21:02 React Native app styling on Android and iOS.
22:20 React Native’s own JavaScript engine.
- React Native Docs: Using Hermes.
23:30 Does Hermes have full JS support?
23:52 What is the new architecture of React Native?
- New Architecture.
- React Native JSI.
26:11 Avoiding translation errors.
27:24 Will this change break a lot of older React Native apps?
28:24 Has React Native improved update stability?
29:55 Where else can React Native run?
32:52 JavaScript on smart TVs and other smart devices.
33:57 Bridging to native APIs.
- Tauri.
37:14 State management.
- Redux.js.
- MobX State Tree.
39:30 What are some tools + libraries that you install on most projects?
- JestJS.
- Maestro.
- Detox.
41:58 How do you manage authentication?
44:55 Does Facebook use React Native?
47:15 Supper Club Questions.
50:29 Sick Picks + Shameless Plugs.

Sick Picks

Robin: Awesome Sock Club Wes’ X Post.

Shameless Plugs

Guest: Infinite Red, ChainReactConf, React Native Radio.

Hit us up on Socials!

772: React Server Components with PHP, Selling Accessibility, WTF is Cloudflare + more

Wed, 22 May 2024 11:00:00 -0000

In this Potluck episode of Syntax, Scott and Wes tackle community questions on handling overwork, teaching programming to family, and React’s Server Components. They also discuss quantifying accessibility improvements, choosing course platforms, and navigating professional growth in challenging workplaces.

Show Notes

00:00 Welcome to Syntax!
- Thanks to Codeium.
- Syntax Episode 728 with Codeium.
01:37 Brought to you by Sentry.io.
02:38 Rewarding hard work with more work.
07:14 April Fools Episode.
- Syntax Episode 750 on April Fools.
09:03 Teaching programming to your family.
- Codespark.
15:56 React Server Components using JS runtime.
19:58 What happened to the intro music?
23:06 How can I quantify my work to the executive leadership team?
29:16 Should I host my own course website or use Udemy?
35:34 Navigating professional growth in toxic workplaces.
40:43 Getting started in native dev with tools like Tamagui.
- Syntax Episode 601 on Tamagui.
45:42 Cloudflare, what the heck is it?
50:49 Sick Picks + Shameless Plugs.

You’re looking for this > Swag Drop.

Sick Picks

Scott: Folex.
Wes: CalDigit TS4.

Shameless Plugs

Scott: Syntax on YouTube
Wes: Ditto

Hit us up on Socials!

771: Promises: Error Handling, Aborts, and Helper Methods - Part 2

Mon, 20 May 2024 11:00:00 -0000

We’re diving into part 2 of our 3-part series on Promises, focusing on error handling, aborts, and essential helper methods. We’ll explore how to manage errors effectively and improve performance with abort signals. Let’s get into it!

Show Notes

00:00 Welcome to Syntax!
00:41 Brought to you by Sentry.io.
02:00 Cancelling promises.
05:16 Why would you reach for an abort signal?
06:26 Promise helpers.
- 07:04 Promise.all() vs Promise.allSettled().
- 09:12 promiseInstance.finally()
- 09:26 Promise.any() and Promise.race()
12:08 Error handling strategies.
- Tuple await-to-js.
- Youtube - 5 Async + Await Error Handling Strategies.
17:30 Promise.race() example.
18:54 Static Promise.reject() and .resolve() methods.

Hit us up on Socials!

770: Design Systems With Brad Frost (Rereleased)

Fri, 17 May 2024 11:00:00 -0000

In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects.

Show Notes

00:00 Welcome to Syntax!
00:49 Brought to you by Sentry.io.
01:14 Introducing Brad Frost.
Brad Frost.com.
Atomic Design by Brad Frost.
Brad (@brad_frost) on Twitter.
Brad on LinkedIn.
Brad on Mastodon.
Brad on YouTube.
Brad on GitHub.
Brad Frost on CodePen.
Big Medium | Design for What’s Next.
06:26 What is a design system?
11:48 How do you keep design and code in sync?
Material Design.
Shopify Polaris.
Carbon Design System.
The Design System Ecosystem | Brad Frost.
15:52 How do you use Shopify, WordPress, React, etc. through a design system?
19:19 How is CSS handled?
25:19 What’s the benefit of going all in on web components?
28:49 Do small startups need to worry about design systems?
32:36 How do design tokens work?
37:38 How do you deal with pushback on design systems?
41:05 How do you go outside the guidelines?
44:52 What system do you use for naming things?
49:06 How do you best document your language choices?
50:41 Supper Club questions.

57:12 Sick Picks + Shameless Plugs.

Sick Picks

Brad: Rubblebucket.

Shameless Plugs

Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024.

Hit us up on Socials!

769: React Miami Live Show

Wed, 15 May 2024 11:00:00 -0000

Welcome to a special live edition of Syntax, recorded at React Miami! Join Scott and Wes as they dish out games galore, from Spot the Syntax Error to JS or NAYS, all while engaging with the audience in this lively session of coding camaraderie. Plus, who’s the better programmer? Stay tuned to find out!

Show Notes

00:00 Welcome to Syntax!
00:54 Meet the Syntax team.
01:22 The plan for today.
02:38 .map() .filter() .reduce()
06:39 Syntax Error.
15:37 JS or NAYS.
21:08 Audience Stump’d.
24:51 Q + EH.

Hit us up on Socials!

768: React 19 is here!

Mon, 13 May 2024 11:00:00 -0000

Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects.

Show Notes

00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io.
02:03 What’s in the update?
React 19 Beta Release Notes.
- 03:03 Actions + server actions.
  - Syntax Episode 766.
  - 04:54 Using server actions for a checkout.
- 06:11 Web components.
  - Custom Elements Everywhere.
- 09:44 use() API.
  - 10:31 With promises.
  - 14:25 With context.
  - 17:32 How does Zustand work?
    - Stately.ai.
    - X @DavidKPiano.
- 18:26 No more ForwardRef.
- 20:05 Ref cleanup.
- 20:43 Document metadata.
24:14 Upgrading to React 19.

Hit us up on Socials!

767: Local First and TypeScript’s Missing Library with Johannes Schickling

Fri, 10 May 2024 11:00:00 -0000

In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality.

Show Notes

00:00 Welcome to Syntax!
01:10 Brought to you by Sentry.io.
01:28 What is Overtone?
03:45 Can you explain the experience you’re trying to achieve?
06:43 What makes the best music app? Is it local first?
08:03 Is it best to create a local first app from the ground up?
10:31 What are the considerations when making a local first app?
13:04 What database are you using?
Riffle.
16:12 How do you handle authentication?
19:15 Pick the tech based on the problem.
20:40 WASM for Non-JS or heavy lifting tasks.
24:39 How did you get SQLite running in the browser?
27:58 What about WA-SQLite, how does it compare to Riffle?
TLDraw Make-real.
29:24 The backstory of Effect for TypeScript.
34:04 What actually is Effect?
39:32 Consolidating tools.
42:30 What’s a cool aspect of Effect that is often overlooked?
45:47 Building a web server with this.
EffectTS RPC.
48:16 Will this ever get “Bluebirded”?
50:29 What about promises?
Zio World
52:19 Sick Picks + Shameless Plugs.

Sick Picks

Johannes: Open Telemetry, Sentry Open Telemetry.

Shameless Plugs

Johannes: localfirst.fm.

Hit us up on Socials!

766: React Server Components: Form Actions + Server Actions

Wed, 08 May 2024 11:00:00 -0000

Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications.

Show Notes

00:00 Welcome to Syntax!
Show 718 React Server Components.
02:04 Brought to you by Sentry.io.
03:04 What are form actions?
GitHub Add React.useActionState PR
04:05 Almost entirely React.
04:31 What is the ‘server’ in Vanilla React?
06:10 Would React ever ship their own server?
07:29 What are actions?
08:34 Two huge benefits to actions.
- 08:45 Avoid custom useEffects or third party libraries.
- 09:17 Calling server code from the client without any APIS.
11:31 Some examples of actions.
12:54 Can these actions be done in a client component?
13:40 Where to use actions.
- 13:49 On a form submit.
- 15:30 In an event handler.
- 15:57 In a useEffect().
17:13 How to actually use an action.
React Hooks
- 17:30 useActionState() hook.
  - 18:49 The state of the action.
  - 19:35 The bound action.
  - 19:46 The pending state.
- 23:16 useFormStatus() hook.
24:38 Action inputs.
26:13 Server vs client.
28:30 This is not PHP.
30:31 What is optimistic UI?
- 33:26 useOptimistic() hook.
37:02 Some final thoughts.
40:18 Sick Picks + Shameless Plugs.

Sick Picks

Good Follows: Alex Katt.
Scott: Tiny Portable Ultra-Mini Air Pump.
Wes: AVerMedia 4k Capture Card.

Hit us up on Socials!

765: JS Promises Fundamentals - Part 1

Mon, 06 May 2024 11:00:00 -0000

In this 3-course series, Scott and Wes serve up some JavaScript Promises treats. In part 1, they unravel the concept of promises and delve into common examples of their usage, from creating and waiting on promises, to database queries and user permissions.

Show Notes

00:00 Welcome to Syntax!
01:27 Brought to you by Sentry.io.
02:32 What is a promise?
Promise mdn web docs.
03:27 Common examples of promises.
- 03:45 A fetch call to an API returns a promise.
- 05:54 A database query or Insert command
- 07:18 A request for user permissions.
- 07:37 A wait function.
08:08 Resolve or rejecting promises.
09:33 Creating promises.
- 09:46 New promise.
- 11:09 Promise.withResolvers().
- 11:37 An async function.
14:34 Waiting on a promise.
- 15:09 .then().
- 16:50 Await.
- 17:44 Why use one wait method over the other?

Hit us up on Socials!

764: Biome JS with Emanuele Stoppa

Fri, 03 May 2024 11:00:00 -0000

Join Scott and Wes as they delve into the fascinating realm of Biome.JS alongside Emanuele Stoppa, the mastermind behind it all. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Grab a seat at the table and find out!

Show Notes

00:00 Welcome to Syntax!
00:10 Brought to you by Sentry.io.
01:49 Who is Emanuele Stoppa and what is Biome?
03:18 What happened to Rome?
05:49 Who’s paying for Biome to be developed?
07:28 How many people are working on Biome?
09:24 Why do we even need Biome?
11:38 Why are other tools so slow?
12:55 Cost of compute.
14:01 The cache management.
14:30 Why was the decision made to move to Rust?
16:35 The bigger the company, the pricier the compute.
19:49 How to get started with Biome.
23:08 Will Biome offer more features than Prettier?
24:12 Language support.
26:02 A language parser for every language?
27:45 Will plugins need to be written in Rust?
GritQL GitHub.
31:25 Ezno, TypeScript Compiler.
33:13 Will we ever see a new TypeScript type-checker?
35:38 What are your thoughts on the types proposal?
Proposal Type Annotations.
38:03 What does your average day look like?
41:10 What is your role at Astro?
41:46 What other languages do you know?
43:22 Biome VCS.
45:14 GitHub action setup.
47:04 Supper Club Questions.
47:09 What text editor, theme and font are you using?
48:26 What do you do to stay up to date?
48:54 Sick Picks & Shameless Plugs.

Sick Picks

Emanuele: Ripley IMDB, Netflix.

Shameless Plugs

Emanuele: Astro, BiomeJS.

Hit us up on Socials!

763: Web Scraping + Reverse Engineering APIs

Wed, 01 May 2024 11:00:00 -0000

Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you’ll gain invaluable insights and techniques to scrape (almost) any website with ease.

Show Notes

00:00 Welcome to Syntax!
03:13 Brought to you by Sentry.io.
05:00 What is scraping?
Socialblade.
08:01 Examples of past scrapers.
Canadian Tire.
10:06 Cloud app downloader.
16:13 Other use cases.
16:58 Scraping 101.
17:28 Client Side.
19:08 Private API.
Proxyman.
22:40 Server rendered.
23:27 Initial state.
24:57 What format is the data in?
Google Puppeteer Extension.
27:08 Working with the DOM.
27:12 Linkedom npm package.
29:02 querySelector everything.
31:28 How to find the elements without classes.
34:08 Use XPath selectors for select by word.
34:53 Make them as flexible as you can. Classes change!
35:10 AI is good at this!
36:26 File downloading.
38:20 Working with protected routes.
Proxyman.
40:41 Programatically retrieve authentication keys because they are short-lived.
Fetch Cookie.
43:20 Deal-breakers.
Mechanical Turk.
44:58 What happened with Amazon?
Uniqlo Self-Checkout
46:42 Wes’ portable refrigerator utopia.
47:25 Sick Picks & Shameless Plugs.

Sick Picks

Scott: KeyboardCleanTool.
Wes: Yabai.

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

762: What to Steal. Finding Inspiration in Web Development

Mon, 29 Apr 2024 11:00:00 -0000

Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it.

Show Notes

00:00 Welcome to Syntax!
01:57 Brought to you by Sentry.io.
02:26 What is okay to steal?
- 02:57 Color palettes.
- 03:14 Font stacks.
- 06:26 Type scales.
  - Warp’s CSS Gradient Border.
  - Sentry’s Date Picker.
- 08:52 General layout patterns.
- 10:39 General vibes.
11:20 What is NOT okay to steal?
- 11:26 Whole site designs.
- 13:32 Taking too many things from ‘what to steal’ list.
- 16:30 Text copy.
  - Wes’ Parity Purchasing Power.
18:48 What we’ve had stolen + how it feels.
21:45 Where to find inspiration.
- 21:56 Code inspiration.
  - CSS Scan Buttons.
  - CSS Scan Box Shadows.
  - Codrops.
  - CodePen
- 25:18 Design inspiration.
  - Bentro Grids.
  - Dribble.
  - Site Inspire.
  - SaaS Landing Pages.
  - One Page Love.
  - Type Wolf.
  - Mobbin.
  - Syntax Newsletter.
  - Hoverstat.es.
  - Internet Gems.
- 32:48 UX inspiration.
  - Good UI.
  - The Component Gallery.
  - Open UI.
  - Nicely Done.
35:25 How to capture inspiration.

Hit us up on Socials!

761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar

Fri, 26 Apr 2024 11:00:00 -0000

Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast.

Show Notes

00:00 Welcome to Syntax!
01:17 Who is Ben Vinegar?
Episode 434 with Ben.
02:21 Brought to you by Sentry.io.
04:00 Cloudflare analytics engine.
Counterscale.dev.
Episode 634 with Armin.
09:08 What is clickhouse?
11:01 Can Clickhouse be used for things outside of analytics tracking?
13:46 What kind of events are you able to track?
15:00 How do you assign values to track?
Counterscale Schema.
18:40 Data type limitations.
19:55 The troubles with sampling data.
23:57 Sample intervals.
24:24 Pricing for these services.
25:34 How it actually runs.
27:31 Infrastructure costs and pricing models.
30:19 Running production apps in Cloudflare.
31:49 Cloudflare and HonoJS.
32:47 One year with Sentry and Ben’s role with Syntax.
Episode 600 with David.
39:33 How does it feel going from a software project to a media project?
Syntax Team.
43:00 How do you sell Syntax to Sentry?
48:37 Sick Picks & Shameless Plugs

Sick Picks

Ben: Randy’s YouTube, Boom.

Shameless Plugs

Ben: Counterscale.dev

Hit us up on Socials!

760: Pro VSCode Setups

Wed, 24 Apr 2024 11:00:00 -0000

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.

Show Notes

00:00 Welcome to Syntax!
00:47 Brought to you by Sentry.io.
01:44 A recording bug.
03:18 VSCode versions.
05:59 Tabs or no tabs.
10:32 Navigation tips.
11:35 Mouse and trackpad input.
13:43 Move, select and expand by
19:07 Interface tips.
19:17 Sidebars.
24:23 Sticky headers.
26:21 Activity bar.
30:30 Show or hide?
31:35 Profiles.
32:43 Keyboard Shortcuts.
32:49 Renaming.
34:32 Extensions.
- 34:45 Text pastry.
- 36:43 Better comments.
- 39:03 Auto rename tag.
- 40:02 Change case.
- 40:25 Permute lines.
- 41:26 File utils.
- 43:20 Sort JSON objects.
- 43:50 SQLite viewer.
- 44:29 Spell checker.
- 45:42 APC.
49:19 Themes.
Syntax Theme
53:05 Final tricks.
Log Wrapper
57:44 What about the AI stuff?
01:00:10 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Flicker Free Ultra Definition Phillips Bulbs.
Wes: Clear Shoe Box Organizers.

Shameless Plugs

Scott: Syntax Newsletter.

Hit us up on Socials!

759: How to Easily Explore Coding Ideas

Mon, 22 Apr 2024 11:00:00 -0000

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights!

Show Notes

00:00 Welcome to Syntax!
02:16 Brought to you by Sentry.io.
03:14 JavaScript Services.
- 03:43 Valtown.
- 05:44 Observable.
- 06:35 Notebooks.
- 08:23 Deno Juypter Notebooks.
- 09:51 Svelte Repl.
- 10:32 Playgrounds: TypeScript, Tailwind, etc…
11:05 CSS Services.
- 11:10 CodePen.
13:14 Full stack services.
13:47 Your own stack. Hot Tips & Cool Treats.
- Wes’s Hot Tips.
- Scott’s Cool Treats.
- 21:01 Bun file routing.
- 24:25 Tooling and tips.
26:30 Database.
- 26:51 Write to a file.
- 27:40 LowDB.
- 29:00 SQLite + Drizzle.
- 29:40 Google Sheets.
- 30:06 Sheet DB.

Hit us up on Socials!

758: Web Awesome with Konnor Rogers + Cory LaViska

Fri, 19 Apr 2024 11:00:00 -0000

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome.

Show Notes

00:00 Welcome to Syntax!
00:47 Brought to you by Sentry.io.
02:49 What is Shoelace?
07:21 What is Font Awesome?
08:07 Font Awesome is getting into Web Components?
11:35 What is Shoelace’s relationship with Web Awesome?
13:33 Is the idea to make it quick to get up and running?
15:46 What is the autoloader?
16:29 Where does Web Awesome fit in the ecosystem?
18:13 What does the styling game look like?
20:33 What is Part in CSS?
CSS Part mdn web docs
22:06 The reason we’re so stoked with Web Components.
23:32 Custom elements are a natural progression.
24:51 What are your thoughts on Open UI initiatives?
Floating UI
Close Watcher
Can I Use
27:40 Wes’ escape key conundrum.
30:21 A bug on the Syntax site.
31:19 Let’s talk about Kickstarter.
35:24 Do you know what premium inputs will be available in Web Awesome?
36:12 Rich text editor.
40:18 Setting goals.
41:48 Kickstarter giveaways.
42:47 Have you tried drag and drop?
Pragmatic Drag and Drop
44:57 The layout component.
48:50 What are your favorite components?
50:29 Sick Picks + Shameless Plugs.

Sick Picks

Konnor: Enhance.dev, Extism.org
Cory: Lit.dev

Shameless Plugs

Cory: Kickstarter
Konnor: Everyone involved in open UI

Hit us up on Socials!

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

Wed, 17 Apr 2024 11:00:00 -0000

Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home.

Show Notes

00:00 Welcome to Syntax!
00:51 Brought to you by Sentry.io.
01:17 When should I use Light DOM or Shadow DOM?
03:43 Do you know of any good tools for extracting data/content from Markup/HTML?
LinkeDOM on GitHub
08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024.
LocalFirst.fm
MeteorJS UI Updates
15:05 Please get the Goodhertz creator on the pod! Would be a great show.
Goodhertz Audio Software
16:34 Effects that involve the JavaScript ‘wheel’ event.
Runway.com
GSAP Animate Anything
CSS Scroll-Driven Animations
23:15 Best tool for rapidly creating UI from the ground up.
Episode 751
Thinkmill.com
27:44 Wes, what’s with your frame rate?
Frame Rate Testing Results on X
32:31 Is there any way to host a whole website setting on my PC at home?
CJ and Self-Host 101
Hetzner.com
Cloudflare Docs Create a Tunnel
36:52 Offline functionality like saving data and syncing data to database?
Episode 739
Local-First Web Development
Syntax Side Dish Explainer Playlist
39:41 Creating a GPT-like tool that can listen to long audio files.
OpenAI Speech to Text
Insanely Fast Whisper
Deepgram
43:51 Sick Picks.

Sick Picks

Scott: Hair Powder
Wes: Mini Grease Gun

Hit us up on Socials!

756: CSS Is Getting Mixins + Functions

Mon, 15 Apr 2024 11:00:00 -0000

Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools.

Show Notes

00:00 Welcome to Syntax!
01:24 Brought to you by Sentry.io
03:00 CSS Is getting Functions and Mixins!
CSS Mixins and Functions Explainer
CSS Working Group Discussion
06:19 Functions and mixins, how are they different?
07:26 Don’t get hung up on the syntax, or maybe do.
09:12 CSS Functions.
12:02 Some use-cases.
15:58 CSS Mixins.
16:31 Tailwind-like classes.
17:53 Tailwind-like arbitrary syntax.
20:08 Fluid typography.
21:13 Let’s talk about logic.

Hit us up on Socials!

755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk

Fri, 12 Apr 2024 11:00:00 -0000

We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization.

Show Notes

00:00 Welcome to Syntax!
00:32 Who is Oliver Dunk?
02:00 Brought to you by Sentry.
03:17 Manifest V3.
08:59 How many rules can you add?
09:56 What even is a rule?
10:52 Is Google trying to kill ad blockers?
13:56 What are the bad guys doing with Chrome extensions?
15:17 Can a browser extension access HTTP-only cookies?
16:06 Is Chrome reviewing all of these extensions?
19:06 Is there a way to side-step Google’s review process?
Reddit Thread, The real threat of Manifest V3
20:32 Do you see the negative chatter?
21:18 Service workers - how do do you access the DOM?
23:32 Do you think we’ll see more DOM APIs in service workers?
25:58 Do you have a favorite Chrome extension?
28:33 Has Google ever explored something comparable to Boost?
SidePanel
33:09 Let’s talk about the development stack.
35:54 1Password and Chrome.
38:39 What is the best way to debug an extension?
YouTube Chrome for Developers
40:33 Manifest V3 and the web request blocking API.
41:57 Known tracking payloads.
44:04 Do you think there is a path forward that makes ad-block developers happy?
44:45 Do you run an ad blocker?
45:20 Whitelisting and opt-ins.
46:38 What’s your tech setup?
47:18 What do you do to stay up to date?
47:51 Sick Picks + Shameless Plugs.
51:47 Wait, is Safari adopting V3 as well?

Sick Picks

Oliver: Defunctland YouTube, LEMMiNO YouTube

Shameless Plugs

Oliver: Chrome Extensions Getting Started, WebExtension Playground

Hit us up on Socials!

754: How to Level Up Your Web Development Career

Wed, 10 Apr 2024 11:00:00 -0000

Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career.

Show Notes

00:00 Welcome to Syntax!
00:17 How can a front-end developer advance in their career?
01:10 Brought to you by Sentry.
01:30 Syntax newsletter.
Snack Pack
02:02 How do you get better at being a developer?
- 02:22 Asking questions.
- 08:09 Get your hands dirty.
- Hot Tips, Cool Treats
- 14:07 Share what you know.
- 17:35 Target your skills for what is needed.
- Ryan Carniato Tweet
- Episode 577
- Justin Fagnani Tweet
- Episode 595
- 21:12 Get out of your comfort zone.
26:55 Getting a better job.
- 27:27 Understand the stakeholders.
- 29:18 Find the metric the business cares about and do that.
- 30:01 Make an impression as being the person that gets things done fast and reliably.
- 31:47 Improve communications.
- 35:04 Be the person they want to have in meetings.
- 37:44 Use systems and tools to help your deficiencies.
- 39:01 Dress to impress.
- 39:32 Care.
- 39:40 Cut the cynicism.
- Energy Vampire
- 42:16 Don’t put bad stuff out into the world publicly.
- 44:29 Get your camera + mic dialed in.
46:23 Leveling up at life.
- 46:32 Take care of your shit.
- 47:40 Exercise.
- Episode 748
- 47:57 Eat well.
- 48:22 Sleep as much as you can.
- 48:26 Clean your workspace.
- 49:17 Learn new skills.
- 49:31 Take care of yourself.
- Habit Path
54:09 Sick Picks.

Sick Picks

Scott: Zeiss Lens Care Pack
Wes: Woosh Screen Cleaner

Hit us up on Socials!

753: Cache Ruins Everything Around Me

Mon, 08 Apr 2024 11:00:00 -0000

Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching.

Show Notes

00:00 Welcome to Syntax!
01:22 Syntax is on YouTube.
02:16 Let’s talk about the cache problem.
03:33 User-specific data and caching security.
06:27 Why might this pop up?
- 06:29 Marketing A/B testing - cookie based.
- 06:55 User-selected features - such as themes.
- 06:58 Language or geo-based items - accept language.
- 07:11 Images - WebP for some browsers, jpg for others.
- 07:45 JSON/HTML based on accept header.
- 08:17 Different encoding.
08:26 Content negotiation.
08:54 The solutions.
- 09:04 Provide different URLs/Query parameter.
- 11:19 Don’t cache the page, cache the data based on query.
- 15:01 Implement a “Cache Key” - one render for every option.
- Netlify
- Fastly
- Cloudflare
- 18:17 Use edge logic.
- 19:52 Just do it client-side.

Hit us up on Socials!

752: React vs Vue vs Angular with Corbin Crutchley

Fri, 05 Apr 2024 11:00:00 -0000

Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development.

Show Notes

00:00 Welcome to Syntax!
00:48 Who is Corbin Crutchley?
02:08 Brought to you by Sentry.io.
02:32 Hilton, like the hotel?
05:57 What is the best framework?
07:23 How do you compare these frameworks?
10:00 Do you feel like the metaframeworks are comparable?
11:02 Exciting announcements from ng-conf?
11:42 Are Wiz and Angular merging?
14:17 Angular signals and Vue comparison.
PreactJS Signals
17:53 Adding signals to vanilla JavaScript and browsers.
21:02 What is derived state?
23:11 How can we store state within these different frameworks?
24:37 Passing children.
26:40 Which has the best implementation for passing children?
28:52 What’s the approach for building framework agnostic components?
TanStack Store
30:31 How much of it is framework specific?
31:35 Headless or DOM-based?
32:48 What are the best practices for writing this?
35:28 What’s the biggest framework pain point?
36:21 Is there a language that requires significantly more code?
38:52 What about Web Components?
39:58 Your book is free?
Framework Field Guide
Shout-out Eduardo Pratti and Kevin Aguilar.
42:42 What’s the process of writing a book like this?
45:44 Not a physical book?
46:17 Walk us through the tech stack.
48:27 Supper Club Questions.
48:33 What text editor, theme and font do you use?
49:53 What terminal and shell do you use?
50:19 How do you stay up to date?
53:39 Do you have advice for beginners?
55:26 Sick Picks + Shameless Plugs.

Sick Picks

Corbin: Shiki Syntax Highlighter

Shameless Plugs

Corbin: Framework Field Guide

Hit us up on Socials!

751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

Wed, 03 Apr 2024 11:00:00 -0000

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.

Show Notes

00:00 Welcome to Syntax!
02:39 We’re on YouTube.
03:14 The four categories of UI libraries or frameworks.
03:46 What does a UI component need to do?
- 04:14 Must be functional.
- 06:20 They must fit styling.
- 06:33 They must be accessible.
- 08:09 “Internationalizationable.”
- 09:29 They must handle theming and variants.
10:05 A few common UI components.
- 10:14 Date Pickers.
- 12:10 Dropdowns.
- 13:21 Toast message.
- Svelte French Toast
- 15:11 Some honorable mentions.
16:10 Headless components.
26:00 Unstyled components.
- 28:04 Shoelace.
- 32:47 React Aria Components.
- 33:00 Headless UI.
- 33:04 Radix UI.
- 37:12 Base UI.
38:23 What’s up with Google’s design?
40:22 Styled Starters.
47:50 What is the process for overriding with custom elements.
51:10 UI Kits and Design Systems.
53:06 Some things to consider.
JS Nation
55:41 A few more options to consider.
- Pigment CSS
- Base UI
- Shoelace
- BaseLayer
- JollyUI
- DraftUI
- Radix UI
- PenguinUI
- Tailwind CSS
- TailwindUI
- VerveUI
- DaisyUI
- ChakraUI
- Flowbite
- FloatingUI
- Downshift JS
- Mantine
59:02 Sick Picks & Shameless Plugs.

Sick Picks

Wes: Battery Daddy
Scott: Lazy Susan, Rechargeable Batteries, Charger

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

750: New CSS and JavaScript You Should Be Using

Mon, 01 Apr 2024 11:00:00 -0000

Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year.

Show Notes

00:00 Welcome to Syntax!
01:16 Brought to you by Sentry.io.
02:17 jQuery 1.2 released!
07:38 jQuery Mobile.
09:34 Skeuomorphism.
10:25 How do you slice up your .PSDs?
Slicy By MacRabbit
12:34 Cufon, new font method.
14:06 CSS rounded corners.
CSS3Please
15:17 Coda Tip.
16:48 Top 5 CoffeeScript Features.
18:44 Conference Talks to Spotlight.
BatmanJS, your new favorite JavaScript superhero
20:35 WordPress 2.3!
21:15 PHP 5.2.0
PHP 5.2.0 Release Announcement
21:53 Sponsored by Media Temple.

Hit us up on Socials!

749: Coding Shopify with Anne and Trudy of Design Packs

Fri, 29 Mar 2024 11:00:00 -0000

Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites.

Show Notes

00:00 Welcome to Syntax!
00:59 Who is Anne Thomas?
02:30 Who is Trudy MacNabb?
04:06 Shopify themes, how does one build a theme?
05:34 Do you have enough control with LiquidJS?
07:52 Changing components of a liquid template.
08:58 LiquidJS improving their dev tools.
09:29 LiquidJS email marketing.
10:32 Can you make your own LiquidJS methods?
Too Many Tabs
11:34 How would you create a theme from scratch using modern tools?
13:30 What about local dev and live reload?
Shopify Tools CLI
15:17 Is Shopify improving?
17:13 What do you hate about Shopify themes?
Shopify Tools Theme Kit
18:59 Have you used Hydrogen?
Shopify Hydrogen
20:09 Headless has sacrifices.
22:02 Are people building full websites in Shopify?
23:56 Apps and integrations.
25:56 Are people creating businesses around these integrations?
29:16 What are design packs?
31:26 Do you run your own servers?
31:57 How does billing work with clients?
33:18 Apps being ‘Sherlocked’.
‘Sherlocking’ Explained
35:21 Where is the data stored?
36:35 Can you make a custom UI?
38:40 What are the downsides of building apps on Shopify?
39:17 Are you expected to maintain versions?
40:46 Do you manage all the support independently?
42:01 How do you match with their existing themes?
43:54 What are the most popular blocks?
45:17 Does Shopify provide bundlers or compilers?
46:47 Shopify moving to blocks.
47:38 Living as a digital nomad.
Syntax Episode 586 on Nomad Developing
49:48 A new app Anne and Trudy launched.
51:35 Limited by block size.
54:08 Sick Picks + Shameless Plugs.

Sick Picks

Trudy: Bar of Shampoo
Anne: Alie Ward Ologies Podcast

Shameless Plugs

Trudy: 25% off using SYNTAX25 at Design Packs

Hit us up on Socials!

748: Fitness Will Make You a Better Developer

Wed, 27 Mar 2024 11:00:00 -0000

Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements.

Show Notes

00:00 Welcome to Syntax!
01:14 Brought to you by Sentry.io.
03:10 A very quick disclaimer.
03:32 A brief view of our fitness history.
06:19 Why is fitness important for developers?
09:12 Setting your goals.
13:06 Getting started with fitness.
- 13:13 Body-weight.
- 13:58 Stretching.
- 16:47 Fun activities that don’t feel like workouts.
- 17:48 Lifting weights.
- Stronglifts
- StartingStrength
25:47 Home gym gear.
Rogue Stall Bar
37:14 Fitness programs.
40:53 I guess we have to talk about diet.
MacroFactorApp
46:37 Motivation.
47:42 Supplements.
BulkSupplements.com Creatine
51:23 Sick Picks.

Sick Picks

Wes: Wikday Pull Up Bands
Scott: Booty Bands

Hit us up on Socials!

747: Middleware Explained

Mon, 25 Mar 2024 11:00:00 -0000

Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills!

Show Notes

00:00 Welcome to Syntax!
00:41 Syntax on YouTube.
01:28 What is middleware?
05:04 Some real-world examples of middleware.
- 05:10 Authentication.
- 07:44 Redirecting users to a specific instance.
- 08:28 Logging + statistics.
- 09:41 Debugging.
- 10:00 Timers.
- 10:46 A/B testing.
- 11:59 Error handling + logging.
- 12:23 Caching.
- 13:02 Multi-tenant applications.
15:08 Where does it run?
18:07 What are the limitations?
21:52 Next.js middleware is one file only.
NextJS Middleware
23:35 Sveltekit solution.
Sveltekit Hooks
24:31 Connect style.
Fastify Express
Fastify Middle
25:28 One last thing, NPM Installing.

Hit us up on Socials!

746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan

Fri, 22 Mar 2024 11:00:00 -0000

Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work.

Show Notes

00:00 Welcome to Syntax!
01:55 Should developers know how to run their own servers?
04:57 What is “bare metal”?
11:49 What the hell is Kubernetes?
12:25 Why would somebody need Kubernetes?
15:37 Using Kubernetes to spin up different instances on cloud providers.
etcd
16:43 Kubernetes managing traffic spikes.
18:46 How much downtime can you handle?
22:11 What exactly is a container?
24:06 What containers do you prefer?
Docker
Containerd
25:28 Some additional terminology.
OCI Open Container Initiative
26:43 What about WASM?
WASM WebAssembly
29:31 Building a Docker container.
31:11 Why would someone want to use a WebAssembly container?
32:12 Are people shipping this technology?
33:36 What functions would you put in WASM?
36:57 How does someone make a WASM image?
39:22 A little more about Spin.
Fermyon Spin
39:56 What type of processors are used in these servers?
42:27 What are home servers running on?
Turing Pi 2
Daniel Mangum
Universal Blue
46:40 How should someone get started with Kubernetes?
Kubernetes.io
Rawkode YouTube
Kubesimplify
Learnk8s
48:51 Infrastructure as code.
CDK for Terraform
GraalVM
55:19 Sick Picks & Shameless Plugs.

Sick Picks

David:
- Golem.cloud
- Restate.dev

Shameless Plugs

David:
- Rawkode YouTube

Hit us up on Socials!

745: Modern JS Toolchains (Biome, Oxc + More)

Wed, 20 Mar 2024 11:00:00 -0000

Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers.

Show Notes

00:00 Welcome to Syntax!
01:37 Syntax is on YouTube.
02:09 Do we really need tooling?
04:02 Popular tools are predominantly plug and play.
06:15 What can tooling do for us?
07:16 The tools in today’s workflow.
- 07:21 Linters.
- 11:29 Compilers and transpilers.
- 13:30 Formatters.
- 16:18 Tokenizers and Parsers.
- 16:46 Bundlers.
- 17:59 Macros.
20:26 The new tools in the space.
- 20:47 Biome, one toolchain for your web project.
- 28:27 Oxc, the JavaScript oxidation compiler.
- 33:01 Deno, code formatting.
- 34:13 ESBuild, an extremely fast bundler for the web.
- 34:37 Rolldown, fast Rust-based bundler for JavaScript.
- 38:34 Ezno, TypeScript type checker.
- 40:24 UnJS, Unleash JavaScript’s Potential.
- 41:45 Lightning CSS, CSS parser, transformer, bundler, and minifier.
42:31 Is JavaScript good enough to handle these tools?
43:26 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Shinobi-Geddon: The 1980s Ninja Craze
Wes: Bachans Japanese Barbecue Sauce

Shameless Plugs

Scott: Syntax on YouTube

Hit us up on Socials!

744: Docker For Developers

Mon, 18 Mar 2024 11:00:00 -0000

Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology.

Show Notes

00:00 Welcome to Syntax!
01:19 Brought to you by Sentry.io.
02:20 Easily reproducible environments.
02:57 Containerization technology.
Containerization
OS-level Virtualization
04:42 Docker is brand name containerization, there are others.
- Podman
- Containerd
- Buildah
- LXD
05:26 Why would a web developer want to use Docker?
08:19 How do you get started with Docker?
- Download Docker Desktop
- Start With Docs
- Docker 101
09:14 How does Docker work?
Docker Sentry
Docker Registry
Docker Layers
16:46 Adding Docker to an existing project.
SvelteKit Dockerfile
Node.js / Express
CLI Runner Twitchbot
Development PHP / Mongodb Dockerfile
21:37 What is Docker Compose?
Docker Compose
22:50 What are some ‘gotchas’ or things to look out for when setting up a project?
Coding Garden Example

Hit us up on Socials!

CJ: X Instagram Tiktok TwitchTV YouTube

743: JavaScript Figma Plugins & Working at GitHub With Cameron McEfee

Fri, 15 Mar 2024 11:00:00 -0000

Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, Sentry.io, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director.

Show Notes

00:00 Welcome to Syntax!
01:06 Who is Cameron McEfee?
03:00 What does a Creative Director do?
09:47 In a creative and collaborative field, how do you deal with hurt feelings?
12:32 Experiences at GitHub (404/500 pages).
15:35 Who is responsible for all the Octocat variations?
GitHub Octodex
17:18 Did you ever get in trouble for using famous IP?
21:07 Working at Sentry.io.
25:08 What is your illustration process?
27:04 What is GuideGuide?
GuideGuide
Moo Tokenizer/Lexer
33:13 Grid Notation.
36:10 Can ‘good colors’ be calculated, can good design be math’d?
40:46 What was the process of building your own plugin?
43:37 Adding guides with JavaScript APIs.
44:44 Recreating application UIs within plugins.
GoodHertz
50:22 How are you architecting these plugins?
52:44 Sick Picks & Shameless Plugs.

Sick Picks

Cameron:

Shameless Plugs

Cameron: GuideGuide 50% off

Hit us up on Socials!

742: Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns

Wed, 13 Mar 2024 11:00:00 -0000

Scott and CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans.

Show Notes

00:00 Welcome to Syntax!
01:20 Brought to you by Sentry.io.
02:16 What book changed your life?
04:58 What are the web development fundamentals for beginners?
- Command Line Power User
08:39 What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks?
- Chris Coyer’s Post
11:51 Advice for migrating an existing React project to TypeScript.
20:38 Countdown apps, performance vs accuracy.
25:19 Are you listening to podcasts? Which ones?
31:46 With AI on the rise, will free-tier plans become a thing of the past?
- Coolify
- Syntax 730: Own Your Own Paas
35:59 What is SemVer anyway?
40:14 A question on ergonomics, home office aesthetics and productivity.
47:59 Do you ever stop to consider VueJS in 2024? Why or why not?
- unjs.io
52:12 Sick Picks + Shameless Plugs.

Sick Picks

Scott: Ellenos Yogurt
CJ: Flat Iron Pepper

Shameless Plugs

Syntax.fm YouTube

Hit us up on Socials!

741: TypeScript Interview Questions - STUMP’d

Mon, 11 Mar 2024 11:00:00 -0000

Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records.

Show Notes

00:00 Welcome to Syntax!
TypeScript
01:05 Brought to you by Sentry.io.
03:20 How do you combine string literal types?
Template Literal Types
06:34 What is a TypeScript Generic and why would you use one?
TypeScript Generics
08:12 How do you write a conditional type?
TypeScript Conditional Types
09:58 Generating TypeScript type from a function.
Stricter Generators
14:09 How do d.ts files work?
Module .d.ts
16:25 Name one difference between a type and an interface.
Types vs Interfaces
19:15 What is a tripple-slash directive and why would you use them?
Tripple-Slash Directives
20:52 What is a TypeScript record and what is it used for?
Utility Types

Hit us up on Socials!

740: Local AI Models in JavaScript - Machine Learning Deep Dive With Xenova

Fri, 08 Mar 2024 12:00:00 -0000

Scott and Wes are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning.

Show Notes

00:00 Welcome to Syntax!
00:41 Brought to you by Sentry.io
01:05 Who is Xenova?
02:08 What is Hugging Face?
03:29 What is Transformers.js?
06:16 How was the library developed?
SponsorBlock
09:04 How is it able to run?
10:09 Do they have to run in Python and how does Onnx work?
Onnx.ai
Hugging Face Optimum
14:19 What are some things you can do with this tech?
16:15 Vision tools.
17:38 This is actually running locally.
18:35 Doodle Dash
21:09 They currently run on CPU, what is required to make it run on GPU?
24:44 Can you run in JavaScript?
28:32 How it works with image vectors.
34:23 Why would people want to run it in another language?
35:55 Resizing images in the browser instead of on the server.
38:55 Applications distributed on the web vs running locally.
43:54 Electron has Node and Chrome, where would you run Transformers.js?
44:32 The API of Transformers.js
46:30 Object Detection.
Semantic Image Search Client
Real-Time Object Detection
Background Removal Tool
48:33 What is the easiest way to get started?
51:26 Real-time speech recognition on the horizon?
52:08 Will we ever be able to run Stable Diffusion via JavaScript?
56:10 The Web LLM.
57:22 Practical applications for YouTube.
59:39 What we want to build for Syntax.fm.
01:06:43 Mean pooling, why it’s necessary.
01:09:30 Stopping YouTube spam comments.
01:10:34 K-Means Clustering.
Text Clustering
01:13:49 Quantization.
01:17:35 Sick Picks + Shameless Plugs.

Sick Picks

Xeonva: WebGPU

Shameless Plugs

Xenova: Xenova on X

Hit us up on Socials!

739: The LoFi Movement: Building Local First Apps

Wed, 06 Mar 2024 12:00:00 -0000

Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights.

Show Notes

00:00 Welcome to Syntax!
03:18 Brought to you by Sentry.io.
04:08 What is LoFi?
localfirst.dev
05:02 The Seven Ideals for Local-first.
- 05:29 1: No Spinners.
- 06:48 2: Your work is not trapped on one device.
- 07:56 3: The network is optional.
- 08:50 4: Seamless collaboration with your colleagues.
- 09:35 Oops, we for got to read 5: The Long Now.
- 09:37 6: Security and privacy by default.
- 09:45 7: You retain ultimate ownership and control.
- Actual Budget Finance App
- Ink & Switch
13:01 Sounds great, let’s go! Not so fast, this stuff is hard.
14:07 The technology involved.
- 14:30 CRDT (Conflict-free Replicated Data Types).
- Wikipedia Definition
- James Long dotJS 2019 dotconfrences
- 17:48 How does it prioritize conflict resolutions?
- 19:36 Websockets.
- 20:17 IndexedDB + SQLite.
- 21:23 Service Workers.
22:16 The software involved.
- 22:24 Replicache.
- 24:48 YJS.
- 25:06 Electric SQL.
25:51 The most basic LoFi application.
31:26 Some bigger concepts.
32:34 Answering some common questions.
35:19 Some real-world examples of LoFi.
Habit Path by Scott Tolinski
37:18 What about Apple PWA nonsense?
38:20 This seems similar to real-time software and multiplayer.
38:47 Sounds like too much work.
Triplit Fullstack Database
Electric SQL
Evolu
40:46 Some useful links.
- Local-First Web Development
- Local-First Lo.fi YouTube
- Local-First Ink & Switch
- Local-First Reddit
- Syntax GitHub Local-First
43:30 Sick Picks + Shameless Plugs.

Sick Picks

Wes: Dresscode.dev
Scott: Monarch Money

Hit us up on Socials!

738: Little Scripts: Coding for your Co-workers

Mon, 04 Mar 2024 12:00:00 -0000

Process is important. This show is dedicated to examples of non-developer tasks that can be improved by coding scripts. Join Scott and Wes for a deep dive into automation magic.

Show Notes

00:00 Welcome to Syntax!
02:11 Brought to you by Sentry.io.
03:02 FFmpeg, a tool for video producers.
FFmpeg
FFprobe
06:35 Markdown validation.
Syntax Markdown Validation
09:21 AI timestamps for inform editing process.
Episode 456 Transcript
12:19 Generating clips for social media.
13:31 YouTube find and replace tool.
YouTube Find & Replace - work in progress
15:03 What other scripts can you create?
16:17 Packaging a tool for a non-developer to use.
- 16:54 Apple Scripts
- 17:45 Stand-alone website.
- 19:25 Script Kit: Shortcut to Everything
- 20:19 Other ways to run scripts.
- ZX
- Dax
22:05 Get in touch with your tips.

Hit us up on Socials!

737: JSR: The New TypeScript Package Registry (NPM Killer)

Fri, 01 Mar 2024 12:00:00 -0000

Get ready to learn all about the JSR package registry with Wes, Scott, and special guest Luca Casonato of Deno, as they discuss its benefits, share insights on when to use it, and teasing some secret features that promise to enhance your coding journey.

Show Notes

00:00 Welcome to Syntax!
00:37 Brought to you by sentry.io.
00:51 Who is Luca Casonato?
01:18 Why do we need another package registry?
Wes Bos Tweet
04:35 Is it ESM only?
06:08 What exactly is JSR?
07:22 How do you install things from this registry?
09:38 NPM specifier in NodeJS?
12:18 Why can’t we just fix NPM?
14:28 When you make things easier, people make cooler stuff.
17:49 A little bit about auto-documentation.
21:18 Auto-Types.
22:33 Can’t you just put TypeScript files on an NPM?
24:04 Package Provenance.
NPM Package Provenance
25:14 Does JSR have any plans for scanning dependencies?
27:56 GitHub action integration.
30:08 Does JSR replace url imports in Deno?
Import Maps, Ep.596
32:15 What about publishing JSX, TSX, CSS, WASM, etc?
34:16 What are Slow Types?
36:34 Do you think we’ll ever see another implementation of a TypeScript type checker?
38:23 Types as comments or adding types to JavaScript.
40:10 What is the anticipated timeline?
41:52 Are there any parts of TypeScript that you don’t like?
43:32 What about when TypeScript breaks?
46:20 JSR community funding.
49:39 Are you planning on pre-registering popular names?
52:26 Super secret new features!
56:39 Sick Picks + Shameless Plugs.

Sick Picks

Luca: Hono

Shameless Plugs

Luca: jsr.io

Hit us up on Socials!

736: CJ Reynolds is Joining Syntax

Wed, 28 Feb 2024 12:00:00 -0000

Scott and Wes introduce Syntax’s new Senior Content Producer, CJ Reynolds, who will be creating video deep-dives and companion content for topics covered on the podcast. CJ, also known as the host of Coding Garden, shares his passions for web development, teaching and experimenting with new technologies.

Show Notes

00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
04:39 What got you into web development?
09:23 Does a degree in computer sciences help you in your day to day as a web developer?
Bell Curve Meme
11:39 Wes downloads every single .com domain name.
15:19 What was your very first web development job?
18:12 How did you go from C# to websites?
21:12 What is the worst thing you’ve had to do as a developer?
22:31 What are some of your favorite projects?
Is It New Years Day
Dung Hero
26:32 What tech are you into right now? What inspires you?
27:52 Why do you like experimenting with new technologies?
29:39 Hono v4.0.5.
30:29 HTMZ
31:44 If you were to build a startup today, what would your stack be?
32:39 What’s your tech setup?
Coding Garden GitHub
RK Royal Kludge Keyboard
37:51 What got you into live-streaming?
40:13 Why do you use a blue screen?
41:19 What’s your philosophy on teaching?
Bloom’s Taxonomy
43:56 What are your non-developer hobbies?
CJ Skateboarding with Syntax deck
CJ’s floofy doggo, Pig
Sony VX10000
Sony Mavica
51:00 Sick Picks + Shameless Plugs.

Sick Picks

CJ: Ergonomics, More on Ergonomics
Scott: Project Farm YouTube trash bag comparison
Wes: Kitchy Pizza Cutter Wheel

Shameless Plugs

CJ: Coding Garden
Scott: Syntax on YouTube

Hit us up on Socials!

735: The Taliban Stole My Domain

Mon, 26 Feb 2024 12:00:00 -0000

Wes shares the story of how the Taliban stole his .af domain. Scott and Wes discuss top-level domain (TLD) best practices, how to find unique custom domain names for your website, and how to avoid having yours stolen.

Show Notes

00:00 Welcome to Syntax!
00:16 Brought to you by Sentry.io
01:11 The story of how the Taliban stole my domain.
05:10 When you purchase a domain, does that country receive the registration fee?
Country Code Top-Level Domain
Infrastructure Top-Level Domain
Generic Top-Level Domain
Sponsored Top-Level Domain
07:29 Notion lost their .so domain.
Notion
09:18 .ai domain names.
09:53 Other popular TLD options.
tolin.ski
wes.io
12:05 What are the best TLDs?
13:18 iwantmyname

Hit us up on Socials!

734: HTMX Web Apps with Carson Gross

Fri, 23 Feb 2024 12:00:00 -0000

Scott and Wes welcome HTMX creator Carson Gross to discuss the versatile applications and optimal scenarios for using HTMX, alongside insights into its creation and evolution. Join us as we explore the future prospects and improvements as we look towards HTMX 2.0.

Show Notes

00:00 Welcome to Syntax!
00:52 Brought to you by Sentry.io
02:22 Who is Carson Gross?
BigSkySoftware GitHub
BigSkySoftware
03:53 What exactly is HTMX?
htmx.org
htmx.org/examples
07:04 What made you want to create something like HTMX?
intercooler.js
10:01 Would HTML look more like HTMX if we were to rebuild it today?
12:54 Isn’t HTMX a step backward into old-school AJAX?
16:09 When would you avoid using HTMX?
17:56 Does HTMX put an unnecessary load on the server?
21:46 What are your thoughts on rendering everything on the server?
26:29 What is your favorite stack?
28:49 Things that are lost moving to the JavaScript framework world.
30:16 HTMX coupling your front end and back end.
32:28 How do you feel about web components?
33:40 What are the big templating engines and your top pick?
HTMX Essays
36:33 Object-oriented HTML.
37:38 Is there an offline story or a “local-first” story for HTMX?
38:44 What does the future of HTMX look like given its rise in popularity?
40:03 HTMX and X (Twitter).
Syntax Show 726
HTMX on X
42:30 The Microsoft story.
45:26 Carson’s thoughts on de-escalating the language around HTMX.
47:44 Sick Picks + Shameless Plugs.

Sick Picks

Carson: AlpineJS, Datastar

Shameless Plugs

Carson: Hypermedia Systems, HTMX Swag

Hit us up on Socials!

733: Egress, scraping, Safari EU changes, is SetInterval worth it?

Wed, 21 Feb 2024 12:00:00 -0000

In this potluck episode of Syntax, Wes and Scott discuss egress, scraping, Safari EU changes, and answer questions on updating dependencies and SetInterval.

Show Notes

00:00 Welcome to Syntax!
01:35 Brought to you by Sentry.io.
02:49 I have over 100,000 user images on Cloudinary. How do I migrate to another service?
Cloudflare-Cloudinary Proxy
07:27 Switching from Mac to PC.
Figma, DaVinci Resolve
12:32 What’s your take on the Safari 17.4 PWA removal debacle for EU users?
Bug Report
Fullscreen API Bug Report
19:45 Is there any clear front-runner when it comes to monorepo tools?
23:44 Some big web apps have a div relatively high in the DOM with a class like “scroll-container” or “cursor-events”, why is that?
32:15 Is ChatGPT Plus worth it? I’m trying to avoid death by 1000 subscriptions.
ElevenLabs
37:47 Performance vs accuracy when working with timers.
40:37 How do you update the dependencies to work with a current version of Node? Also, if you are building from scratch, how do you determine what dependencies to use?
Syntax show 425: Updating Project Dependencies
45:52 Clarification on the browser blocking.
Mozilla’s vision for Firefox MV3
49:19 Problems when working with JavaScript’s new Date().
54:27 Sick Picks + Shameless Plugs.

Sick Picks

Scott: LED Flashlight

Shameless Plugs

Wes: Syntax YouTube

Hit us up on Socials!

732: Stop going to Spam: DMARC, SPF and DKIM Explained

Mon, 19 Feb 2024 12:00:00 -0000

Wes and Scott explore the web standards and email authentication methods that keep your email from going to spam; DMARC, SPF and DKIM. If you send email via a custom domain name, you need to listen to this!

Show Notes

00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
02:08 What exactly are SPF, DKIM, and DMARC?
02:53 Different ways that you may want to send email.
- 03:23 Transactional emails.
- Resend, email for developers
- 05:07 Email marketing.
- 05:47 Anything else that sends email on your behalf.
07:13 SPF (Sender Policy Framework).
Postmark defines SPF
Postmark SPF in 5 Minutes
08:34 You can only have one SPF record.
10:18 DKIM (DomainKeys Identified Mail).
Postmark defines DKIM
13:39 DMARC (Domain-based Message Authentication, Reporting, and Conformance).
Convertkit
16:38 RUA Reporting.
18:03 How to set up reporting.
21:08 Does emails marked as spam hurt the IP that sends them?
22:18 Other things to consider.
Special thanks to David Flanagan for the help on this! @rawkode

Hit us up on Socials!

731: Client side security, XSS attacks & CSP with Stripe’s Alex Sexton

Fri, 16 Feb 2024 12:00:00 -0000

Scott and Wes are joined by security expert, Alex Sexton of Stripe to cover all things: client security, XSS, attack vectors, and CSP (content security policy).

Show Notes

00:00 Welcome to Syntax!
00:31 Brought to you by Sentry.io.
00:57 Who is Alex Sexton?
04:44 Stripe dashboard is a work of art.
05:08 Tell us about the design system.
React Aria
08:59 Who develops the iOS app?
09:50 Stripe’s CSP (content security policy).
12:50 What even is a content security policy?
Content Security Policy explanation
13:57 Douglas Crockford of Yahoo on security.
Douglas on GitHub
15:13 Security philosophy.
16:59 What about inline styles and inline JavaScript?
19:41 How do we safely set inline styles from JS?
20:20 Setting up with meta tags.
22:52 What are common situations that require security exceptions?
26:24 Potential damage with inline style tags.
32:45 Looping vulnerabilities.
36:32 What about JavaScript injection?
37:09 Myspace Samy Worm.
Myspace Samy Worm Wiki
Sentry.io Security Policy Reporting
42:02 Does a CSP stop code from running in the console?
43:28 What are some general security best practices?
46:35 Strategies for rolling out a CSP.
51:49 Final tip, Strict Dynamic.
Strict Dynamic
56:36 Where does the CSP live within Stripe?
Original Black Friday story
59:35 One last story.
01:01:20 Sick Picks + Shameless Plugs

Sick Picks + Shameless Plugs

Alex: Wes Bos’ Instagram

Hit us up on Socials!

730: Own Your Own PaaS

Wed, 14 Feb 2024 12:07:00 -0000

Scott and Wes talk about the benefits of owning your own PaaS (platform as a service), the main alternatives in the space, and ways to make passion projects more financially viable.

Show Notes

00:00 Welcome to Syntax!
01:12 Brought to you by Sentry.io.
01:56 What is a PaaS?
NGINX
04:21 Challenges with payment structures.
Render
07:02 What is Kubernetes?
Kubernetes
07:51 What are the differences between Kubernetes and Docker?
Docker Swarm
09:15 Reasons to own your own PaaS.
Nelify
Bluehost
15:05 “Pokémon or Web Service”
Original 150 Pokémon Characters
16:49 The players and their pros and cons.
18:51 Where can you host these services?
- 19:47 Kubero.
- Kubero
- 21:50 Coolify.
- Coolify
- Coolify pricing
- 28:15 Caprover.
- Caprover
- 29:03 Dokku.
- Dokku
- Shokku
- Ledokku
- Atlas
- Nixpacks
- 32:53 Piku.
- Piku
- 33:24 Cuber.
- Cuber
- 34:13 Acorn.
- Acorn
- Coolify creator, Andras Bacsai on X
36:44 The challenges of hosting your own PaaS.
38:46 Jekyll ran on a PC under a desk.
Jekyll
39:36 Sometimes less is, in fact, more.
40:09 Final thoughts.
45:03 Scott got Bun to work on Coolify.
51:01 Sick Picks + Shameless Plugs.

Sick Picks

Wes: GripStic Chip Bag Sealer Amazon, GripStic Chip Bag Sealer Aliexpress
Scott: Caseta Diva Smart Dimmer

Shameless Plugs

Wes: Syntax YouTube

Hit us up on Socials!

729: CSS Native @scope

Mon, 12 Feb 2024 12:00:00 -0000

In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations.

Show Notes

00:00 Welcome to Syntax!
01:00 Brought to you by Sentry.io.
01:33 Why scope your CSS?
03:21 Scott’s hot take.
05:43 How does @scope CSS work?
07:31 Similar to a component-based workflow.
08:00 Not having to specify a selector for your scope.
09:52 Pseudo inline hover styles.
11:31 Donut scope.
13:01 “Inverted donut-hole scope”
14:50 Browser support + limitations.

Mozilla @scope

The Style Element

Hit us up on Socials!

728: AI Superpowers with Kevin Hou and Codeium

Fri, 09 Feb 2024 12:00:00 -0000

In this supper club, Scott and Wes welcome Kevin Hou, Head of Product Engineering at Codeium, a blazing fast AI-powered code completion and chat tool for developers.

Show Notes

00:00 Welcome to Syntax!
05:31 An introduction to Codeium.
07:56 What information are you sending the AI to get such good completions?
Codeium compliance
09:15 Codeium runs a 'Language Server'.
11:15 Crawling dependency tree and abstract syntax tree.
12:07 Using Codeium Live.
12:34 How big of a codebase can you run this on?
14:39 Sending select amounts of data to AI.
16:06 Does Codeium maintain codebase preferences and styling (ie. snake case)?
17:39 Will Codeium scan the dependency?
19:23 AI UI, have we found the best format?
21:55 Crazy ideas in tech.
22:53 Additional AI UI inputs.
24:14 How do you make an AI model?
28:42 How does Codeium manage the product roadmap?
32:09 Do AI models get worse over time? How does Codeium validate that it's not?
Open AI Evals
35:39 How is Codeium THAT fast?
36:49 What programming langauges does Codeium use?
38:55 Codeium Playground.
Codeium Playground
39:15 Caching as a performance improvement.
39:58 What is the pipe between Codeium and editor?
40:17 Codeium chat service.
41:44 A WebSocket system allowing push and pull communication.
43:13 Closed Beta for GPT 4.0.
46:12 The dreaded closing quote bug.
48:26 Sometimes bugs bug Wes.
49:49 Supper Club Questions
51:40 Perplexity.ai
52:35 What editor does Kevin use?
55:31 Sick Picks + Shameless Plugs

Sick Picks

Kevin: Lapse.com

Shameless Plugs

Kevin: Codeium.com

Hit us up on Socials!

727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

Wed, 07 Feb 2024 12:00:00 -0000

Join Wes and Scott for a 30,000 foot, ‘soup-to-nuts’ view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting.

Show Notes

00:00 Welcome!
00:21 30,000 foot view of web development
02:37 Brought to you by Sentry.io
02:55 Starting with design tools.
06:10 Code Tooling
- 06:22 Text Editors
- 09:34 Terminal
- 14:28 Build Tools
- 16:07 Browser and dev tools
- 18:21 Formatter and linter.
21:43 CSS (how you style your website).
25:34 Programming languages.
27:14 Backend with metaframework.
29:36 Backend without metaframework.
32:20 Runtimes (JavaScript).
What is Bun? The New JS Runtime
The Deno Show
34:02 User interface libraries.
Shoelace.style
39:43 Data management: Databases
41:42 Data management: ORM
WTF is an ORM
You should learn Drizzle, the TypeScript SQL ORM
42:53 Other data management considerations.
43:33 Image pipelines.
45:52 Hosting, CDN, CI.
Where Should You Host Your App? Hosting Providers Compared
Hasty Treat WTF × SSR vs JamStack vs Serverless?
47:21 Hosting your site.
50:19 The finishing touches.
- 50:26 Brought to you by Sentry.io
- 52:18 Captcha
55:03 Sick Picks + Shameless Plugs.

Sick Picks

Scott: GreatScottLab, Show #594
Wes: AliExpress Board, Wes’ Demo

Shameless Plugs

Scott: Syntax on YouTube
Wes: Syntax on YouTube

Hit us up on Socials!

726: Is HTMX a Joke?

Mon, 05 Feb 2024 10:00:00 -0000

Scott and Wes unravel the mysteries of HTMX, exploring the essentials for getting started, its powerful capabilities, limitations, and possible stacks for building primarily server rendered applications.

Show Notes

00:00 Welcome
02:07 Brought to you by Sentry.io
02:53 What exactly is HTMX?
04:30 What you need to know before working in HTMX.
- 04:35 You need a server.
- 05:35 You’ll most likely need a templating engine.
- 06:42 You most likely do not need as much client-side JS.
- 08:33 You don’t work in JSON
- 11:15 Not something you can swap out your UI with in a SPA.
- 11:48 Brings back AJAX
13:32 So, what can it do?
15:20 And what it doesn’t do.
- 18:25 It doesn’t do server-side responses.
19:09 What about animations?
19:20 What about CSS?
19:57 What about Web Components?
20:06 What about third-party client-side JS?
20:18 What about WebSockets and SSE?
HTMX WebSockets
20:30 What about extensions?
HTMX Extensions
21:00 Wes’ “bomb” question.
24:16 What Scott likes about HTMX.
25:45 What Scott doesn’t like about HTMX.
HTMX Multi-Swap
30:33 Hype, Meta Framework.
Hype

Hit us up on Socials!

725: Safari is the New Chrome - Jen Simmons of Apple

Fri, 02 Feb 2024 10:00:00 -0000

Wes and Scott talk with Jen Simmons about the latest updates to Safari, reporting bugs to Apple, understanding color in CSS, new CSS switch controls, and testing your websites in Vision Pro hardware.

Show Notes

00:00 Welcome to Syntax!
00:03 Brought to you by Sentry.io
01:05 Meet Jen Simmons.
03:15 Safari has been killing it lately
Safari Release Notes
WebKit Features in Safari 17.0
WebKit Features in Safari 17.1
WebKit Features in Safari 17.2
10:25 Wes’ cOnSpirACy about Apple and APIs
18:18 Where is the best place to report bugs to Apple?
Bugs.Webkit.org
Jen on Mastodon
Web Compat
20:35 What’s happening with CSS Color gamuts and models?
33:57 Is contrast color ever going to to land?
36:25 Where is the CSS Grid and Masonry proposal at?
44:20 Will we be able to target a specific row in a grid?
46:17 What are CSS switch controls?
48:44 How can web devs view their websites in Vision Pro devices?
Apple Vision Pro
Running your app in Simulator or on a device
54:26 In what ways are HTML / CSS / JavaScript running where we don’t realize it?
58:43 Sick Picks

Sick Picks

Jen: Walking.

Shameless Plugs

Jen: webkit.org X

Hit us up on Socials!

724: Potluck: Is Virtual DOM Bad?

Wed, 31 Jan 2024 10:00:00 -0000

Is the Virtual DOM Bad? Are keyboard shortcuts important? What is S3 storage? In this potluck episode of Syntax, Wes and Scott answer your questions.

Show Notes

00:08 Welcome
01:27 Syntax Brought to you by Sentry.io
02:45 Welcome Randy, our new Producer!
Randy’s YouTube
04:14 A ‘Canadian Podcast’
04:43 Is Alpine JS or HTMX a replacement for pug or other templating libraries?
08:21 What powers the “in-app” browsers and how can we test our sites on it?
Inject tracking code
Tauri
13:16 A deep dive on generators and iterators.
An Insight into Iteration Protocol through Infinite Scroll in Angular
15:25 Video podcast observations
17:18 PROBLEM I need a way of managing state.
22:34 Why is Virtual Dom (a la React) suddenly bad?
28:31 In a recent episode (659), Wes mentioned he updated the OG image cards, and noticed a higher click through rate.
29:07 Updated logo and monster truck intro.
30:19 Back to OG Images.
31:51 Are “import * as X” exports build stripped?
36:46 What is the difference between S3 storage and a CDN.
Backblaze CDN
45:00 How important are keyboard shortcuts or extensions? Are they necessary to be a good developer?
50:04 Sick Picks + Shameless Plugs

Sick Picks

Scott: Perplexity.ai, Serversideup
Wes: Zojirushi Rice Cooker

Shameless Plugs

Wes: Wes Bos Courses
Scott: Sentry

Hit us up on Socials!

Randy: YouTube

723: Svelte 5: Speed Simplicity Size

Mon, 29 Jan 2024 10:00:00 -0000

Unveiling Svelte 5! delving into its latest features. From the impressive speed and simplicity to its compact size, discover what makes this new release so exciting.

Show Notes

00:00 Welcome
00:39 Syntax Is A Video Podcast!
@syntaxfm on YouTube
01:52 Brought To You By Sentry.io
02:42 Svelte 5 Introduction
Svelte 5 Intro
05:45 What Are Runes?
- 06:21 $state()
- 11:49 $props()
- Class as a rest prop
- 16:41 $effect()
- 21:17 $inspect()
23:03 What Are Snippets?
27:33 What Are Events?
30:02 Built In Functions
32:42 Smaller Output
Reddit example
33:31 Speed
Benchmarks
35:00 Anticipated Release
Try it today

Hit us up on Socials!

722: Next Level Web APIs. Bluetooth, File Access, Thomas Steiner - Project Fugu

Fri, 26 Jan 2024 10:00:00 -0000

Thomas Steiner talks with us about Project Fugu, an effort from Google to enable new classes of applications to run on the web. What is Project Fugu? What are some of Thomas’ favorite APIs to use? What is an IWA vs a PWA? And more!

Show Notes

00:32 Welcome
01:52 Who is Thomas Steiner?
02:57 What is the overall goal of Project Fugu?
08:17 When might we see these APIs come to all browsers?
14:10 Do you have examples of companies pushing for an API?
18:53 What happens with the face detection API?
28:33 What is an IWA?
35:17 What is the web transport API for?
37:11 What is MIDI?
41:20 Nintendo Joycon hack
45:28 File handlers in a PWA
50:38 File System Observer API coming soon
56:26 Sick Picks
Onnx
HuggingFace
Chrome for Developers
Fugu API Tracker
Google I/O 2023
LEGO Education SPIKE
Igalia
CapCut
Descript
Better Touch Tool

Sick Picks

Laser printers

Shameless Plugs

HowFuguIsMyBrowser

Hit us up on Socials!

721: You should learn Drizzle, the TypeScript SQL ORM

Wed, 24 Jan 2024 10:00:00 -0000

We’re doing a Tasty overview of Drizzle in this episode. What is Drizzle? What are different types of databases? How do you host databases? What have we built with Drizzle? And how does Drizzle handle relational data, TypeScript, querying, selects, transactions, and more!

Show Notes

00:10 Welcome
00:52 Syntax Brought to you by Sentry
01:50 What is Drizzle?
09:11 Different types of databases
17:58 Why pay for SQLite hosting?
20:36 Defining your data structures
24:27 What we’ve built using Drizzle
28:28 Relational data
36:17 TypesScript and Drizzle
40:53 Querying + Selects with Drizzle
46:23 Transactions
47:09 Syntax Drizzle Studio theme
48:27 Sick Picks
Drizzle ORM
Drizzle ORM - Overview
Meet Drizzle Studio
Benchmarks
Sequel Pro
TablePlus
phpMyAdmin
Cloudflare D1
Bun
habitpath.io
Chartable
Neon
Answer Overflow
Drizzle Studio Themes

Sick Picks

Scott: BlackBerry - Apple TV (CA)
Wes: Candle Warmer Lamp

Shameless Plugs

Syntax Tiktok

Hit us up on Socials!

720: Where Does Time Come From?

Mon, 22 Jan 2024 10:00:00 -0000

It is time. Wes and Scott attempt to blow your minds by talking about time, who’s tracking time, where does time come from, what time is it in your browser vs someone else’s server, and standards around time.

Show Notes

00:25 Welcome
00:55 Thanks to Chris Enns
LemonProductions.ca
Chris Enns on Twitter
Podcast tutorials by Chris Enns on YouTube
03:14 What is time in the browser?
06:27 What are atomic clocks?
Atomic Clocks and Cloudflare
08:22 Network time
09:35 Device time
11:11 Why is time so important?
14:35 Epoch time
Syntax epoch convertor
16:58 ISO 8601 standard
ISO 8601
19:20 RFC 3339
RFC3339
20:35 Time zone support
21:59 The Temporal API

Hit us up on Socials!

719: Fullstack TypeScript Apps with No Build Step?! with Brian LeRoux

Fri, 19 Jan 2024 10:00:00 -0000

Wes and Scott talk with Brian LeRoux about not using a bundler, handling TypeScript, live reloading, Enhance being a meta framework, how Enhance handles CSS, his experience at AWS: Reinvent, and the state of JavaScript run times in 2024.

Show Notes

00:31 Welcome
01:00 Introducing Brian Leroux
01:32 Syntax Brought to you by Sentry
01:54 You can’t fix bugs you can’t see
03:14 Not using a bundler
05:48 Downsides of not using a bundler
11:13 What about TypeScript?
13:58 Is there a waterfall of imports?
18:29 What happens to live reloading?
22:12 The browser upgrade path
26:39 Is Enhance a meta framework?
29:02 What are you doing about SSR web components?
33:24 Can you refresh part of the application?
36:22 What about state management and Enhance?
42:52 How does Enhance handle CSS?
48:26 How was AWS: Reinvent?
54:47 What’s happening with the Begin CLI?
55:55 Any thoughts on new JavaScript run times?
59:51 Sick Picks
brian.io
Quickstart - Architect documentation
Enhance
aws-lite

Sick Picks

Analogue Pocket

Shameless Plugs

Begin — The Cloud Platform for Functional Web Apps

Hit us up on Socials!

718: React Server Components

Wed, 17 Jan 2024 10:00:00 -0000

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more.

Show Notes

00:10 Welcome
00:52 Syntax Brought to you by Sentry
01:39 New Heights with Scott and Wes
04:33 What are React Server Components?
10:52 The difference between server components and client components
Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it.
11:37 Why would you want to run something server side?
15:22 Components are server rendered by default
16:40 What is JS sprinkles?
17:29 How do server components work?
18:51 Moving an existing site to React server components take a while
20:27 The rules
27:12 Form Actions + Server Actions
32:07 Buttons can have actions
36:32 React Suspense
39:13 What we like
Ryan Florence thread
41:54 What we don’t like
47:13 Design patterns
47:35 Other things
RSC Devtools
Introducing Waku
Mux
49:22 Sick Picks

Sick Picks

Scott: ASUS ZenDrive V1M External DVD Drive
Wes: Leatherman Arc

Shameless Plugs

Scott: Syntax YouTube
Wes: Wes Bos Courses

Hit us up on Socials!

717: How to be Productive

Mon, 15 Jan 2024 10:00:00 -0000

We’re kicking off 2024 by talking about productivity tips we’re using to stay focused, to do apps, calendars, focus states, and customizing our code editor.

Show Notes

00:25 Welcome
00:46 Syntax Brought to you by Sentry
01:11 Welcome to 2024
Anxiety and Uncertainty with Dr. Courtney Tolinski - Syntax #670
01:42 Getting systems in place
03:30 Examining your current habits
08:14 Tracking habits
12:16 Neural Pathway Chain Breakers
habitpath.io/waitlist
STREAKS
A Passwordless Future Passkeys with Anna Pobletts - Syntax #710
Clerk
14:26 Todos
Stronglifts app
Getting Things Done
Things
Height
20:14 The calendar as the ultimate tool
Cron Calendar
23:52 Using Focus states
Focus App
29:09 Customizing VS Code with an extension
Apc Customize UI++ - Visual Studio Marketplace
31:14 Momentum

Hit us up on Socials!

716: JS Perf Wins & New Node.js Features with Yagiz Nizipli

Fri, 12 Jan 2024 10:00:00 -0000

Yagiz Nizipli talks about his involvement with Node.js, implementing .env, how he finds areas to improve in performance, the happy path vs the hot path, and new features coming to Node.js.

Show Notes

00:32 Welcome
01:01 Introducing Yagiz Nizipli
02:21 What is your involvement in Node.js?
03:27 Implementing .env
07:03 Why was 20,000 lines of C required?
11:00 How do you begin to find performance issues?
15:17 How do you measure improvements?
26:27 The happy path vs the hot path
27:36 Is Rspack ready for prime time?
RSpack
28:47 Bundle Size VS runtime perf? Whats more important?
30:51 What’s it like working on a large project like Node?
38:26 Will Node ever get TypeScript support?
40:22 What are loaders?
44:24 Node.js is getting a config file?
51:37 Sick Picks

Sick Picks

Shameless Plugs

@yagiznizipli

Hit us up on Socials!

715: Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck)

Wed, 10 Jan 2024 10:00:00 -0000

Wes and Scott answer your questions about duopoly in tech, tech stacks for creating content, switching from frontend to full stack, DSA knowledge, email HTML, and more!

Show Notes

00:10 Welcome
02:21 Syntax Brought to you by Sentry
03:31 Are you concerned about duopolistic companies taking over the web?
11:29 What stack do you you use for videos and sharing content?
15:02 How do you know once your ready to officially make the switch from frontend to full stack?
17:58 As someone new to tech and looking to apply for junior front end positions, how much should i know about DSA’s?
Friends that work at big tech companies - did you need Data Structures and Algorithms to get hired? I get an lots of messages from new devs asking how to learn these things. Many of them say the need it to work at FAANG type companies
21:59 Which tools would you recommend for crafting HTML emails from scratch?
Foundation
MJML
React Email
25:03 Hey are you guys setting up your own CI/CD like github action or gitlab CI?
Netlify
Vercel
28:25 What do you think about unstyled component libs. Eg: Ark?
Ark UI
31:47 Do I need to have every single feature on mobile as I do on a desktop?
Obsidian - Sharpen your thinking
Missive ‐ Team Email, Chat & Tasks
39:15 How can I get better at planning my code?
shaky.github.bushong.net
Monodraw for macOS — Helftone
Octopus.do, Visual Sitemap Tool, Website Planner, Architecture
Mermaid | Diagramming and charting tool
42:32 What exactly makes it so that a piece of logic is client/frontend logic vs backend logic?
46:17 Sick Picks

Sick Picks

Scott: Sleeping Queens Card Game, 79 Cards : Toys & Games
Wes: Package drop box

Shameless Plugs

Scott: Syntax Newsletter
Wes: Wes Bos Courses

Hit us up on Socials!

714: CSS :has() in Every Browser! 10 Uses

Mon, 08 Jan 2024 10:00:00 -0000

CSS :has() is out in all browsers and Wes and Scott have got the top 10 reasons you should start using :has() now.

Show Notes

00:25 Welcome
02:28 Syntax Brought to you by Sentry
03:02 Overview of :has
07:09 The anywhere selector
09:41 Previous element
12:59 Layout targetting
15:45 Form validation styling
17:51 All siblings
21:07 Quantity queries
24:19 Empty children
24:56 Nested dropdown navs
26:36 Attribute matching

Hit us up on Socials!

713: The CSS OG Eric Meyer. 1994 CSS, JS in Fridges, Tailwind, and Web Standards

Fri, 05 Jan 2024 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Eric Meyer about his start on the web, the early days of CSS, where CSS is headed, are we going to lose a browser, and more!

Show Notes

00:32 Welcome
01:26 Who is Eric Meyer?
05:44 In the earliest days, what browsers supported CSS?
10:23 The current web platform test suite
web-platform-tests
17:59 Are CSS features shipping faster these days?
20:45 CSS learning from preprocessors
26:24 What do you think about Tailwind and inline CSS?
33:26 Alternative spaces where CSS may be used
CSS Speech Module Level 1
The World Wide Web Consortium Issues CSS2 as a W3C Recommendation
37:17 Do companies push CSS forward for a business use case?
44:06 Trying to keep up with all the things is difficult
48:19 What’s on Eric Meyer’s CSS wishlist?
54:35 Supper Club Questions
Bruce Lawson
Firefox Nightly desktop, Android and iOS.
SerenityOS
The Ladybird browser project
Thunderbird — Free Your Inbox. — Thunderbird
Arc from The Browser Company
Mozilla Foundation - Homepage
01:58 Sick Picks

Sick Picks

Polypane

Shameless Plugs

Hit us up on Socials!

712: 2024 Predictions

Wed, 03 Jan 2024 10:00:00 -0000

Wes and Scott give their predictions for 2024 in JavaScript, frameworks, server-side JS, tooling, CSS, developer ecosystem, and AI tooling.

Show Notes

00:10 Welcome
01:10 Syntax Brought to you by Sentry
02:00 Types in JS will have real movement
05:10 Temporal API will ship in 1 browser
06:38 Perf tooling gets easy for everyone to understand
07:32 CSS continues to get better where you need less JS
08:35 The year of the server in frameworks
10:32 Svelte v5 is very fast
SvelteKit • Web development, streamlined
12:04 Astro is going to have a good year
Astro
4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello)
14:22 React server components
dai-shi/waku: ⛩️ The minimal React framework
Waku
19:45 Remix moves away from page-based loaders, to component loaders
20:52 Hono will become more ubiquitous
Hono - Ultrafast web framework for the Edges
23:23 Node will introduce TypeScript support via loaders
24:48 We will see a route matching Proposal move ahead
URL Pattern Standard
26:34 Bun releases full node compat
27:34 We will see a new Linter + formatter entirely replace
Language support | Biome
HTML support · Issue #1326 · oxc-project/oxc
Prettier · Opinionated Code Formatter
31:44 New TypeScript typechecker
32:42 Lightning CSS pops - or does it?
34:37 You’ll hear more about Rspack and Turbopack
35:55 Vite isn’t going to release anything big in 2024
Vite | Next Generation Frontend Tooling
36:55 CSS contrast-color will land in chrome
37:27 Relative color will land in all major browsers
37:48 Scroll animation landing in 2 browsers
38:40 The year of CSS discovery
41:20 Safari will Ship 3 missing PWA Support
44:10 Firefox usage will continue to slip
47:43 Paid Arc features
47:55 More XR web experiences as Apple releases in Vision Pro
49:07 AI Tooling
Galileo AI
v0 by Vercel
Transformers.js
51:07 Small Models that run in the browser
52:08 Apps get sherlocked by OpenAI
53:24 On prem corporate AI
54:15 Sick Picks

Sick Picks

Scott: ISO100 protein power, Weekend at Bernie’s
Wes: Roborock S8 Pro Ultra Vaccum + Mop

Shameless Plugs

Scott: Syntax Newsletter
Wes: Wes Bos Courses

Hit us up on Socials!

711: The Surprisingly Exciting World of Print + PDF CSS

Mon, 01 Jan 2024 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more.

Show Notes

00:25:15 Welcome
01:27:04 Syntax Brought to you by Sentry
01:52:00 Examples of how Wes uses print CSS
03:42:16 Using it for invoices or receipts
05:08:24 Delivering a book as a PDF
05:42:16 How do you load CSS only for printing?
10:41:08 Using units in CSS
11:29:15 CSS Counters
MDN: CSS Counters

body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 { counter-reset: subchapter; /* set section to 0 */ } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; }

14:31:10 Named Pages

@page title { @top { /* no header for title pages */ content: “”; } } @page chapter { @top { content: “This is a chapter page”; } }

15:27:09 Margins, Headers + footers, Page Numbers
18:01:18 Debugging Print CSS
19:57:18 Getting into a PDF
Docraptor
Playwright
Puppeteer
JSPdf
24:45:04 Other Things to consider

Hit us up on Socials!

710: A Passwordless Future Passkeys with Anna Pobletts

Fri, 29 Dec 2023 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Anna Pobletts of Passage about passkeys, how passkeys work, how to implement passkeys on your website or app, what the recommended UI is for passkeys, what happens to your passkey if you lose your phone, and more.

Show Notes

00:32 Welcome
01:36 Why do we need something like Passkeys?
03:34 What are Passkeys for?
10:04 What took us so long to get to Passkeys?
11:07 Where’s the two factor part of Passkeys?
13:08 How are Passkeys phishing resistant?
14:44 What happens to your Passkey if you lose your phone?
18:40 What’s the password recovery workflow like with Passkeys?
23:08 Having a backup device helps a lot with Passkeys
24:58 Why companies should use two factor or Passkeys
29:26 What are the standards and tech behind Passkeys?
32:38 What kinds of companies are implementing Passkeys?
34:34 What is the recommended UI for telling users about Passkeys?
39:17 How do you implement Passkeys on your app or website?
41:47 1Password open sourced low level libraries
47:34 What does the future look like for Passkeys?
51:07 Supper Club questions
53:44 Sick Picks
1Password
Have I Been Pwned
1Password Watchtower
Passkeys.directory
passkeys.dev
FIDO Alliance - Open Authentication Standards More Secure than Passwords

Sick Picks

Cascadia

Shameless Plugs

Passage by 1Password

Hit us up on Socials!

709: Potluck × Naming Tech × Generators × Layers Follow Up × Sick Picks Page

Wed, 27 Dec 2023 10:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about naming things in programming, use case for generators, CSS @Layers follow up, database prefixes, generalist vs specialist, where’s the sick pick page, and more!

Show Notes

00:08 Welcome
01:20 Syntax Brought to you by Sentry
01:48 How much of programming is genuine advanced technical stuff vs just fancy complex sounding names for things?
05:10 I found a non-trivial use case for GENERATORS!
11:05 CSS @Layers follow up from 668
Hacking the Tonal - Proxying, Intercepting + Debugging Traffic? - Syntax #668
Allow authors to apply new css features (like cascade layers) while linking stylesheets · Issue #7540 · whatwg/html
15:37 On a previous episode, what did you mention regarding database-prefix?
18:20 Is it better to be a generalist or specialist as a front end dev?
23:20 I can’t find the sick picks page on the new site. Any plans to bring that back?
Filtering and Discovery Notes · Issue #935 · syntaxfm/website
24:25 Can you guys give some advice about how to grow and improve as developers while struggling with ADHD?
Supper Club × Coding with ADHD with Dr. Courtney Tolinski - Syntax #532
29:55 Any chance you could make an embeddable player?
31:32 Could you have the people behind Cards Against Humanity on a future supper club episode?
Cards Against Humanity
Poor Charlie’s Almanack: The Essential Wit and Wisdom of Charles T. Munger
Cards Against Humanity 99% Sale
Warehouse | Blackbox
Yowza
34:50 What are some of the differences between being a professional developer in Canada versus the United States?
40:58 Is HTML Over The Wire awesome, or super awesome?
42:52 How can I develop locally with a postgres database and Prisma / Vercel for hosting?
Env Variables and Modes | Vite
46:23 Sick Picks

Sick Picks

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

708: How We Made Syntax.fm Faster

Mon, 25 Dec 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk through the ways they improved performance on the Syntax.fm website, how they knew it was slow to begin with, and the various changes they made to caching, and loading transcripts to improve the speed of the site.

Show Notes

00:25 Welcome
01:32 Adding a database requires queries
03:32 How did we know the site was slow?
04:25 Syntax Brought to you by Sentry
07:45 Changing the way transcripts are being loaded
13:41 Caching
21:16 Caching Headers

Hit us up on Socials!

707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!

Wed, 20 Dec 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more!

Show Notes

00:24 Welcome
01:18 Syntax Brought to you by Sentry
02:05 SSR JS sites more the norm
solidjs.com
Remix - Build Better Websites
Next.js by Vercel - The React Framework
SvelteKit • Web development, streamlined
Astro
04:14 TypeScript Inferred becomes hot
05:20 Types In JS?
ECMAScript proposal for type syntax that is erased - Stage 1
07:55 Deno gets hotter
11:12 JS runtimes mature
htmx
11:50 We will see a new TS Type Checker written in Rust
14:06 New JS APIs
What’s the status of this project? · Issue #1101 · dudykr/stc
Wes Bos on X: "Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3
tc39/proposals: Tracking ECMAScript Proposals
JS Fundamentals - Decorators - Syntax #653
16:29 Writing towards Winter CG Spec Popular.
WinterCG
17:09 Edge Rendering More Common
Prettier on X: "We setup a $20k bounty for a rust-based compatible printer with prettier.
$20k Bounty was Claimed! · Prettier
18:09 A new JS framework
19:05 Page Transitions API
19:51 Rust becomes more popular
24:00 More WASM
Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion - Syntax #643
FFmpeg
Fastly
25:11 React Beta Docs launch after 5 year dev cycle
26:47 We start to see CSS Container Queries in production
29:05 CanIUse issues?
31:20 CSS Subgrid
32:56 More AI
34:06 Tooling
Vite | Next Generation Frontend Tooling
Announcing Biome | Biome
Lightning CSS
Rspack
Turbopack
36:08 People sour on React
36:47 People sour on eslint
37:16 Houdini does nothing
CSS Houdini| MDN
Is Houdini Ready Yet?
39:57 How’d we do?
40:40 Sick picks

Sick Picks

Scott: Super Mario Bros.™ Wonder
Wes: Tineco Pure ONE S11 Cordless Vacuum Cleaner

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

706: AI and ML - The Pieces Explained

Mon, 18 Dec 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about understanding the integration of different components in AI models, the choice between traditional models and Language Learning Models (LLM), the relevance of the Hugging Face library, demystify Llama, discuss spaces in AI, and highlight available services.

Show Notes

00:25:20 Welcome
00:55:00 Syntax Brought to you by Sentry
01:17:00 Understanding how the pieces fit together
02:31:18 Models or LLM?
04:43:22 What about Hugging Face?
08:05:18 What’s Llama?
08:51:15 What are spaces?
09:29:06 Services available to you
12:26:16 What are tokens in AI?
17:38:18 What is temperature with AI?
20:33:08 Using top_p
21:06:00 Using fine-tuning to extend existing models
22:11:19 Prompts are what you send to the model
23:17:00 Streaming
24:48:17 Embeddings
27:34:17 OpenAI maintains Evals
28:40:14 Different libraries for working with AI

Hit us up on Socials!

705: Is Running Random Code From npm Safe? With Feross Aboukhadijeh

Fri, 15 Dec 2023 10:00:00 -0000

In this Supper Club episode of Syntax, Wes and Scott talk with Feross Aboukhadijeh about his work on Socket which helps to make sure the code you get from npm is safe and secure. They also touch on his work on Wormhole and Web Torrent.

Show Notes

00:30 Welcome
00:57 Who is Feross Aboukhadijeh?
01:33 What is Socket?
[Socket.dev](https://socket.dev
dominictarr (Dominic Tarr)
pull-stream/pull-stream: minimal streams
03:59 Introducing AI package summaries
Example of the AI summaries
Introducing AI Package Summaries
07:04 Is Socket’s focus on visibility of a open source project?
10:01 What was the inspiration for Socket?
Introducing “safe npm”, a Socket npm Wrapper - Socket
16:22 How does Socket detect possible security issues?
Removed packages
event-source-polyfill protestware attack
john wick spam attack
18:55 How many projects are you injesting for Socket to scan?
26:00 What kinds of things are people trying to inject in code?
CS253 Web Security
29:54 How do I hook Socket up to my project or GitHub?
32:08 Do we still need to use shrink wrap?
36:34 How did you implement the torrent spec in JavaScript for WebTorrent?
WebTorrent Desktop
WebTorrent FAQ
43:11 Why did you build Wormhole?
Wormhole
47:33 How expensive is it to maintain Wormhole?
Riverside.fm - Record Podcasts And Videos From Anywhere
50:37 What do you think of decentralized code repos?
Radicle
Project Fugu
Fugu Tracker
54:29 Understanding passkeys
56:15 Supper Club questions
GitHub Theme - Visual Studio Marketplace
Web Serial API - Web APIs | MDN
01:03:04 Sick Picks

Sick Picks

Harry Potter audio books

Shameless Plugs

ChatGPT

Hit us up on Socials!

704: Stump'd JS + CSS Interview Questions

Wed, 13 Dec 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott try to stump each other with JavaScript and CSS interview style questions including CSS contain, naming the 7 parts of Houdini, what ARIA stands for, 5 limitations of serverless, and more.

Show Notes

00:25 Welcome
01:31 Syntax Brought to you by Sentry
02:01 Explain CSS Contain and why it exists?
07:27 In CSS Grid, how would I make a grid of 3 equal columns with 20 pixels between them?
Wes Bos on X: 🔥 A visual guide to getting equal width columns in CSS Grid / X
10:31 Which of the following elements are fake?
13:00 Which of the following HTML tags are deprecated?
16:38 What is the samp element?
17:27 Name the 7 parts of CSS Houdini
21:07 In JavaScript for loop with 10 items, how can you exit a loop early?
22:34 What is the difference between a pseudo element and a pseudo class?
25:59 How could you implement CSS :has with JavaScript?
27:56 What are two attributes that would make an SVG more accessible?
29:43 How can you stop your process from exiting if you have an unhandled rejection?
32:27 How do you prevent flex children from getting squished?
34:40 In TypeScript, what does using keyof and typeof together do?
37:19 What does ARIA stand for?
37:39 Name 5 limitations that a serverless or edge function have over tradtional long running server?
40:38 Write an item using Flex code, not grow to fill it’s container, or shrink, and the item will take up only the space based on it’s content size.
42:03 If I’m building an application that needs to announce a change to the user, how would I do that?
43:46 Name the 5 different Git elements methods on a document?
45:39 What does the CSS prospective property do?
48:23 Sick picks

Sick Picks

Scott: Pushpin hangers
Wes: Niimbot Label Maker, Bearclaw Screws)

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

703: The Observer Pattern

Mon, 11 Dec 2023 11:00:00 -0000

In this episode of Syntax, Wes and Scott give a high level overview of the observer pattern, what is the observer, what are downsides to too many observers, and more.

Show Notes

00:25 Welcome
01:42 Syntax Brought to you by Sentry
02:16 High level overview
Syntax 694: What’s Up With Angular with Mark Techson
Godot Engine
03:36 What might you observe in game development?
06:50 What is the observer?
08:11 What are some downsides to too many observers?
10:17 IntersectionObserver, MutationObserver, and PerformanceObserver
12:25 ResizeObserver
13:04 What about addEventListener?
@BenLesh on Callbacks being faster than observables
16:13 Signals are becoming a big thing

Hit us up on Socials!

702: New + Proposed JS APIs for 2024

Wed, 06 Dec 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk through new and proposed JavaScript APIs including ones related to regex, sourcemaps, structured clone, temporal, JSON modules, and more!

Show Notes

00:10 Welcome
01:26 Syntax Brought to you by Sentry
02:55 RegExp Escaping Proposal
tc39/proposal-regex-escaping: Proposal for investigating RegExp escaping for the ECMAScript standard
05:25 Intl.DurationFormat
tc39/proposal-intl-duration-format
07:55 Standardized Sourcemaps
tc39/source-map-rfc: RFCs for the source map debug format.
10:43 Structured Clone
structuredClone() global function - Web APIs | MDN
12:54 Temporal
Hasty Treat - Temporal Date Objects in JavaScript
Tracking issue for syncing with IETF standardization work (req’d before implementers can ship unflagged) · Issue #1450 · tc39/proposal-temporal
20:59 FindLast and findLastIndex
tc39/proposal-array-find-from-last: Proposal for Array.prototype.findLast and Array.prototype.findLastIndex.
22:27 JSON modules
tc39/proposal-json-modules: Proposal to import JSON files as modules
24:46 Regex Modifiers
RegExp Modifiers - June 2022.pptx - Microsoft PowerPoint Online
26:50 Array Grouping
tc39/proposal-array-grouping: A proposal to make grouping of array items easier
30:48 Array Methods
tc39/proposal-change-array-by-copy: Provides additional methods on Array.prototype and TypedArray.prototype to enable changes on the array by returning a new copy of it with the change.
6 or so New Approved and Proposed JavaScript APIs
32:12 Promise.withResolvers
35:08 Function.prototype.memo
tc39/proposal-function-memo: A TC39 proposal for function memoization in the JavaScript language.
37:48 Node has a Proposed ESM Detection flag
39:54 Node has navigator.userAgent
41:29 Built in .env support
42:52 Permissions model & test runner continues to be worked on
44:06 HTML Web charts
Proposal: Web Charts · Issue #9295 · whatwg/html
45:39 autopause
Add autopause attribute to media elements to allow automatic pausing of media · Issue #9793 · whatwg/html
46:30 Meta Tag for AI generated content
Proposal: Meta Tag for AI Generated Content · Issue #9479 · whatwg/html
Schema.org - Schema.org
Syntax × Sentry Swag Store – Syntax × Sentry Shop
Syntax - A Tasty Treats Podcast for Web Developers.
50:13 Poster frame
HTML Video Element: Proposal for adding [srcset] + [posterset] + [sizes] on video element as well [posterset] on source elements · Issue #9812 · whatwg/html
50:57 Popover invoker
Popover does not know what triggered it · Issue #9111 · whatwg/html
51:25 Autocomplete on ‘contenteditable’ Elements
Autocomplete on ‘contenteditable’ Elements · Issue #9065 · whatwg/html
52:17 Sick Picks

Sick Picks

Scott: Escaping Twin Flames cult documentary
Wes: Lao Gan Ma spicy Chili Oil

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

701: A11y Treats - Labels & Roles

Mon, 04 Dec 2023 11:00:00 -0000

In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects.

Show Notes

00:25 Welcome
01:18 Syntax Brought to you by Sentry
01:44 What is ARIA?
WAI-ARIA Roles | MDN
An in-depth guide to ARIA roles - The A11Y Project
02:48 What is aria-label?

// A button with an ARIA role and label

06:36 What’s the difference between a title and aria-label on a button?
08:34 Are you really going to get sued if your website isn’t accessible?
11:53 What are Roles for?
16:33 6 different types of Roles
21:25 What is aria-labelledby?

I agree to the Terms and Conditions.

23:13 Checking your code for accessibility
eslint-plugin-jsx-a11y - npm
WAVE Web Accessibility Evaluation Tools
Polypane
24:31 Feedback and future show ideas

Hit us up on Socials!

700: Payload is Rails for JS with TypeScript, React and Drizzle (James Mikrut)

Fri, 01 Dec 2023 11:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with James Mikrut about Payload, how Payload isn’t just a CMS, where Payload fits in a tech stack, why they picked Drizzle for an ORM, what Payload Cloud is, and where’s the Rails for JavaScript?

Show Notes

00:31 Welcome
02:00 Who is James Mikrut and what’s the idea behind Payload?
05:22 Payload isn’t just a CMS
Payload
Payload on GitHub
Payload on Twitter
Payload on YouTube
09:08 Where does Payload fit in the tech stack?
KeystoneJS
Supabase
Retool
11:22 Is Payload using TypeScript?
13:44 Why did you pick Drizzle?
Drizzle ORM
18:08 Do you have to maintain MongoDB and Drizzle?
SvelteKit
26:31 Does Payload have visual editing elements?
30:34 Do you build a custom UI for users?
35:10 What is Payload Cloud?
38:12 Where is the Rails for JavaScript?
Next.js by Vercel
Laravel Spark
Deploy your Laravel PHP application painlessly
RedwoodJS: The App Framework for Startups | RedwoodJS.com
41:39 How do you manage contributions from open source?
43:46 GitHub + AI
48:18 Syntax Brought to you by Sentry
Error Management Magic: Introducing the Sentry Plugin for Payload
50:26 Supper Club questions

Shameless Plugs

Payload on GitHub

Hit us up on Socials!

699: Potluck × TypeScript's Longevity × Canvas-Rendered Apps × Learning Rust × Executing Untrusted JS Code

Wed, 29 Nov 2023 10:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions, including: Will TypeScript ever go away? Should I write canvas-rendered web apps? How can I execute untrusted JS code in node? How can I use continuous integration with WordPress? Any advice for learning Rust?

Show Notes

00:09 Welcome
01:16 How to ask questions for potluck episodes
Ask a question for Syntax potluck episodes
02:19 Syntax Brought to you by Sentry
04:34 Will TypeScript ever go away?
Migrating millions of lines of code to TypeScript
08:12 What is your opinion on entirely canvas-rendered web apps, such as those built with Flutter?
Flutter on the Web
Flutter Gallery
html2canvas - Screenshots with JavaScript
13:43 Tailscale VPN is cool
Tailscale · Best VPN Service for Secure Networks
Tunnel | Zero Trust App Connector | Cloudflare
16:36 What is Bandcamp?
Bandcamp
Stream and listen to music online for free with SoundCloud
18:56 How can I execute untrusted JS code with node?
WebAssembly
Cloudflare Workers®
Deno, The next-generation JavaScript runtime
Fastly
23:46 I’d love to get your thoughts on modern devops and continuous integration for building out WordPress websites.
Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields
Vite | Next Generation Frontend Tooling
Alpine.js
30:39 How do I orchestrate color adapting icons for use inline and in background images?
svg.wesbos.com
svg.wesbos.com/cat.svg
35:53 Are there any publicly available libraries for web components?
Shoelace: A forward-thinking library of web components.
Open UI
40:20 What’s a good project idea for learning Rust?
Tauri Apps
45:17 Do you ever plan to do more podcasts with Scott’s wife or another psychologist / psychiatrist?
47:02 Have you tried MongoDB vector search for AI embeddings?
Atlas Vector Search | MongoDB
Vector Database for Vector Search | Pinecone
Xata
49:44 Syntax highlighting in VS Code
Comment tagged templates - Visual Studio Marketplace
52:38 Sick Picks

Sick Picks

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

698: Why You Should Be Using CSS @Layers

Mon, 27 Nov 2023 10:00:00 -0000

What are @Layers in CSS, when and where should you be using them, how do you write them, and who’s using them already?

Show Notes

00:23 Welcome
01:49 Syntax Brought to you by Sentry
02:55 Where is this supported?
07:21 How do we write layers?
10:47 How do you write your CSS?
16:20 Nesting
20:35 Who else is using @Layer?

Hit us up on Socials!

697: What is DevRel with Salma Alam-Naylor

Fri, 24 Nov 2023 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Salma Alam-Naylor all about her role in DevRel, what’s involved in working in DevRel, avoiding burnout, which platforms to focus on, and so much more.

Show Notes

00:31 Welcome
01:07 Syntax Brought to you by Sentry
01:52 New jobs and onboarding
03:34 What is Devrel?
11:34 How much of devrel is using your own product? Dogfooding the service?
14:49 What are things devrel people do?
20:32 Devrel burnout issues
24:53 Once you put a number on something, you’re measuring that number
29:31 Is there any way to know if devrel is working?
33:47 How could someone get into devrel?
37:37 What platforms should you focus on?
44:12 What’s something devrel gets wrong?
47:50 What do you think about speaking at conferences?
51:58 What do you use to stay up on with tech?
53:59 Sick picks

Sick Picks

Shameless Plugs

Follow Salma on Twitch

Hit us up on Socials!

696: How to Build a Website or App

Wed, 22 Nov 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott answer a listener’s question about their process for building a website in 2023. Do you start with design? With code? How do you decide on which CMS or if you need a CMS? How do you choose a backend framework? And where do you host it?

Show Notes

00:10 Welcome
02:12 Syntax Brought to you by Sentry
03:06 How do you build a website?
04:57 Start with the design
Figma
Design Systems with Brad Frost
11:12 Choose a Frontend / Components
Pug
EJS
React
Svelte
Remix
Storybook
25:16 Real data or fake data?
Polypane
DrizzleORM
29:34 Do you need a CMS or not?
Statamic
Syntax 254: Headless CMS Break Down & Roundup
WordPress.org
Astro
35:16 Choosing a backend language or framework
39:56 Testing
44:50 Where do you host your website?
Vercel
Netlify Drop
Glitch
CodePen
50:04 Sick Picks

Sick Picks

Scott: Chip clips
Wes: Soft close used toilet seat Amazon Warehouse Deals

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

695: 5 New CSS Features You Should Know

Mon, 20 Nov 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim.

Show Notes

00:25 Welcome
01:10 :nth-child(4 of .neat)
selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use
06:43 CSS Motion Path
10:38 Scroll Snap
Practical CSS Scroll Snapping
14:36 Scroll Driven Animations
Scroll-driven Animations
Supper Club × Bramus Van Damme on CSS
16:58 Margin Trim

Hit us up on Socials!

694: What's Up With Angular with Mark Techson

Fri, 17 Nov 2023 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Mark Techson about the recent Angular announcements and updates. How did Angular implement signals? What’s new in Angular 17? How does Angular handle CSS or UI component libraries?

Show Notes

00:30 Welcome
01:11 Syntax Brought to you by Sentry
01:39 What’s changing with Angular?
Special Angular Event
Angular
03:19 What happened to Angular.js, and what’s happening now?
StackBlitz
Analog | Analog
Supper Club × Self Hosted Backend-as-a-service with Brandon Roberts
08:19 What makes Angular special?
13:21 How did Angular implement signals?
17:17 What is a computed value?
18:54 What’s new in Angular 17?
25:10 What’s the meta framework story with Angular?
Angular Material UI component library
CDK | Angular Material
Angular - Angular elements overview
27:40 Adding close to the metal if statements
31:03 View transitions
32:34 How does Angular handle CSS?
39:31 How does Angular integrate with UI component libraries?
41:07 What are headless components?
41:45 Does Angular work well with web components?
42:43 Supper Club Questions
Accessibility in Visual Studio Code
Technology Radar Thoughtworks
RedMonk – The developer-focused analyst firm
Mermaid | Diagramming and charting tool
49:38 Sick Picks

Sick Picks

Godot Engine - Free and open source 2D and 3D game engine

Shameless Plugs

Hit us up on Socials!

693: Lessons Learned & Bugs Fixed from Launching Syntax.fm

Wed, 15 Nov 2023 11:00:00 -0000

In this episode of Syntax, Wes and Scott talk about the lessons they learned while launching the new Syntax website including launching now, transcription bugs, error monitoring, black text on black backgrounds, and more.

Show Notes

00:10 Welcome to Syntax
01:41 Syntax Brought to you by Sentry
02:43 Don’t wait. Launch!
04:28 Transcript bug
Most Powerful Speech-to-Text API | Deepgram
09:01 Error monitoring is a must
12:36 Timestamp error
16:20 Black text on black background might hide things
17:33 WASM Vercel file system
21:18 Things have gotten easier to launch
PlanetScale: The world’s most advanced database platform — PlanetScale
23:36 Switching from OpenAI to Anthropic Claude and AI Responses aren’t always JSON
25:34 Local dev is fast
Navigation API
31:37 Mind your payloads
32:41 GitHub Milestones
33:57 Almost forgot the Robots.txt
36:17 Chron job timeout
Inngest
40:06 TypeScript errors don’t need to be zero to launch
42:25 GitHub Actions pipeline bug
43:23 Basic testing will do
Playwright
44:56 Have a designer to work with
Airbase
52:07 Sick Picks

Sick Picks

Scott: Dog Poop Bags With Dispenser
Wes: Resistance band

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Courses

Hit us up on Socials!

692: You Need Stale While Revalidate

Mon, 13 Nov 2023 11:00:00 -0000

In this episode of Syntax, Wes and Scott explain what Stale While Revalidate is, why you should use it, and explore whether you should use it all the time on all the things.

Show Notes

00:25 Welcome
01:05 Syntax Brought to you by Sentry
01:34 What is Stale While Revalidate?
03:13 Why is caching important?
Max age calculator
Can I Use
05:09 Where does a cache live?
07:05 Limit how often an API is being hit
11:51 What about Stale while Revalidate?
18:30 Why wouldn’t you just use Stale While Invalidate on everything?
Syntax 484: Cache Control Headers Explained

Hit us up on Socials!

691: Cloudflare Workers Are Next Level With Rita Kozlov And Brendan Irvine-Broque

Fri, 10 Nov 2023 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Rita Kozlov And Brendan Irvine-Broque about Cloudflare Workers, Cloudflare AI, browser rendering API, Cloudflare’s D1 database, WinterCG, miniflare, and more!

Show Notes

00:32 Welcome
01:53 Syntax Brought to you by Sentry
02:20 What are Cloudflare Workers?
Announcing WinterJS
Cloudflare Workers®
Puppeteer | Puppeteer
06:23 How long did Workers take to ship?
07:31 Can you run your entire business on Cloudflare Workers?
10:52 Interesting use cases for Cloudflare Workers
12:33 What makes the edge important?
18:05 Managing GDPR compliance
19:02 What are the tradeoffs of building with Cloudflare Workers?
Cloudflare Queues
20:22 How does Workers pricing work?
26:54 What are situations where you might need longer times?
28:50 Browser rendering API
Browser Rendering docs
29:43 What is Cloudflare D1 database product?
Cloudflare D1
31:05 Cloudflare Hyperdrive
Hyperdrive
“Serverless” Databases
34:27 Cloudflare Workers don’t use a Node.js runtime
Introducing workerd: the Open Source Workers runtime
37:13 What is WinterCG?
WinterCG
45:09 Will we ever see a standard for server routing?
TCP sockets · Cloudflare Workers docs
49:30 What is miniflare?
🔥 Miniflare · Miniflare
54:05 Can I run Python on Cloudflare?
55:49 Cloudflare AI
Partnering with Hugging Face to make deploying AI easier
Cloudflare + AI
WebGPU API
Cache · Cloudflare Workers docs
57:04 Supper Club questions
59:38 Sick Picks

Sick Picks

Get a bench scrape

Shameless Plugs

Cloudflare Discord

Hit us up on Socials!

690: How To Dark Mode and Beyond

Wed, 08 Nov 2023 13:00:00 -0000

In this episode of Syntax, Wes and Scott talk about the process they are using for extending the Syntax website with themes, including a dark mode and secret custom themes. They also talk about issues encountered with theming and CSS, including flashes of un-themed content.

Show Notes

00:00 Syntax + Sentry Announcement!
01:35 Welcome
02:23 Syntax Brought to you by Sentry
03:16 How to implement a theme
10:27 Writing the CSS
11:38 Glasses wearers protip
13:02 Class on the body and server side rendering issue
14:02 CSS Variables
15:05 Color variables in CSS
21:07 Working in half pixel sizes
22:40 Variable usage
25:23 Naming variables after what they style
30:42 Component level variables
33:27 Using zones
38:41 Themes should be defined as light or dark
39:20 Issues: Moving from light to dark
42:29 Issues: Drop shadow in dark mode
44:00 Issues: Flash of unthemed content
44:40 Issues: Opacity values
49:45 Issues: SVG need change color
55:56 Help is on the way!
59:57 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Kala (@engineer.everything)

Shameless Plugs

Scott: Sentry
Wes: Wes Bos Tutorials

Hit us up on Socials!

689: You Should Be Using JavaScript Maps & Sets

Mon, 06 Nov 2023 10:00:00 -0000

In this episode of Syntax, Wes and Scott talk about why you should be using JavaScript maps sets, whether you can access them directly, what makes them great, and what weak versions of both are.

Show Notes

00:26 Welcome
01:34 Syntax Brought to you by Sentry
01:54 What makes Maps a spicy buffalo object?
07:46 API of Map
08:51 Looping over items in a Map
09:27 Can you change the size of a map after it’s been created?
10:07 Can you access properties directly?
12:13 Where have we used a map as a cache?
13:32 What makes a set an array honey garlic array?
17:28 When should you be using sets instead of an array?
Proposed Highlight API is built on Sets
21:47 Can you spread sets like an array?
22:40 Weak versions of map and set
WeakMap and Garbage collection

Hit us up on Socials!

688: Ex-npm Employee Making a New Package Manager?! Vlt with Darcy Clarke

Fri, 03 Nov 2023 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Darcy Clarke about his career path in tech, working with Wes back in the day, why he decided to build vlt volt, and the biggest sick pick list yet!

Show Notes

00:32 Welcome
01:38 Building a tweet wall back in the day
08:54 How did you land at npm?
npm
19:40 Why do we need another package manager and registry?
22:11 What is vlt volt?
vlt: a new home for open source
vlt /vōlt/ (@vltpkg) / X
Shipping ESM with Mark Erikson
Bun
Yarn
Nx
27:18 Do you see a future where we don’t pre-compile before shipping?
29:32 Why would pnpm be faster than npm?
31:14 What are the problems with symlinking?
33:08 What’s happening with Yarn?
Verdaccio
Cloudsmith
jfrong
Sonatype
socket.dev
Snyk.io
Dependency Confusion
37:42 What do you think about config files?
antfu Config of File Nesting for VS Code
The massive bug at the heart of the npm ecosystem
WebTorrent
41:02 VS Code tip - file nesting patterns
41:59 How does on-prem registry work?
47:29 Where does Socket.dev and Snyk security fit?
52:46 Sick Picks
04:41 How did you get vlt.sh?
05:30 How did you get @Darcy?

Sick Picks

Shameless Plugs

vlt: a new home for open source

Hit us up on Socials!

LearnWithJason.dev: Learn. Build. Grow. Together.

687: Hosting NextJS × Spicy Sidedishes × Modern Forms × Abandoning TypeScript

Wed, 01 Nov 2023 10:00:00 -0000

In this potluck episode of Syntax, Wes and Scott answer your questions about hosting NextJS, spicy sidedishes, putting forms in modern websites, why is everyone abandoning TypeScript, CSS Survey follow up, do devs need to be into CSS, and more!

Show Notes

00:10 How to submit a question to Syntax
Syntax Potluck Listener Questions
00:45 Syntax meet up in Toronto
02:11 Syntax Brought to you by Sentry
02:36 Vendor lock in with NextJS?
Next.js by Vercel
Vercel
SST
Supper Club × Next.js on AWS + Serverless with Dax Raad — Syntax Podcast 589
Cloudflare Pages
Netlify
Open source Next.js serverless adapter
09:48 🌶️ Spicy Sidedish: Stop calling Firefox the new IE
Jen Simmons
16:40 Can you compare Database as a service and provide your recommendation and suggestions?
“Serverless” Databases — Syntax Podcast 551
PlanetScale
Firebase
20:00 How do I do native forms outside of CMS like WordPress?
Builder.io
28:01 Why have Svelte and Turbo abandoned Typescript?
32:17 Why are companies hesitant to migrate to Next?
33:36 Is React Native dead?
38:33 Do I use the keyword “new” when throwing an Error or not?
41:59 touch-action use case
Announcing Quina
Quina - Menu
Announcing Hondo
Hondo - a word game in 100 words or less
42:57 Subgrid and the :has selector usage
46:02 Is it okay to be a front end developer and not be as interested in CSS?
Tool Academy (American TV series)
51:12 Could you explain what are workers, processes, jobs, tasks, and deamons?
56:29 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Scott: Syntax on TikTok
Wes: Wes Bos Tutorials

Tweet us your tasty treats

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

686: We Need Your Help With The Secret Sauce

Mon, 30 Oct 2023 10:00:00 -0000

In this Hasty Treat, Scott and Wes talk about the secret sauce that’s going into the creation of the new Syntax.fm website including the styling, search, tooling, database, hosting, and more.

Show Notes

00:21:15 Welcome
01:10:11 Where did the name “Secret Sauce” come from?
03:16:00 Syntax Brought to you by Sentry
04:32:11 What Syntax.fm is built in?
SvelteKit • Web development, streamlined
muxinc/media-chrome: Custom elements (web components) for making audio and video player controls that look great in your website or app.
Media Chrome Docs
07:24:01 How we’re doing search
flexsearch - npm
12:22:20 Styling
Prettier · Opinionated Code Formatter
PostCSS - a tool for transforming CSS with JavaScript
16:00:05 Tooling
Fast, disk space efficient package manager | pnpm
18:55:11 Database
Prisma | Next-generation ORM for Node.js & TypeScript
21:11:11 Services
Deepgram
OpenAI
Anthropic \ Introducing Claude
24:34:11 Hosting
Vercel: Develop. Preview. Ship. For the best frontend teams
PlanetScale: The world’s most advanced database platform — PlanetScale
Cloudflare - The Web Performance & Security Company | Cloudflare

Tweet us your tasty treats

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

685: Jason Lengstorf on Live Streaming, Creating Content, and Building a Studio Space

Fri, 27 Oct 2023 10:00:00 -0000

In this supper club episode of Syntax, Wes and Scott talk with Jason Lengstorf about his journey in video creation, live streaming, and tech education. What’s up with Jason’s new studio? How does he prep for a live stream?

Show Notes

00:32 Welcome
02:21 Syntax Brought to you by Sentry
02:39 Who is Jason Lengstorf?
05:43 Why did you decide to go full time on Learn with Jason?
10:04 Jason’s new YouTube series idea
13:36 Jason gets a special delivery
14:30 What’s in Jason’s new studio?
20:14 What’s the ideal medium for content in 2023?
24:28 Treat decisions as forever, for now.
26:01 Is live streaming as difficult to get into as it seems?
29:21 How do you prepare for a live stream?
32:58 How do you decide what to create?
38:23 How do you feel about React?
40:21 What are your thoughts on AI?
49:08 Supper Club questions
56:25 Sick Picks

Sick Picks

Synergy - Share one mouse & keyboard across computers

Shameless Plugs

Hit us up on Socials!