876: MIDI & Music in the Browser

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 managementFull 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? Aputure Light Dome Aputure Amaran 150c Sony FX3 Electro-Voice RE20 27:46 Snake case vs camel caseEye 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:XInstagramTiktokLinkedInThreads Wes:XInstagramTiktokLinkedInThreads Scott:XInstagramTiktokLinkedInThreads Randy:XInstagramYouTubeThreads

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott talk about the 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 proposal-defer-import-eval proposal-deferred-reexports Rob Palmer 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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and 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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes 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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott talk about the 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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Wes and Scott talk about the 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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Scott and Wes 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! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads