Syntax - Tasty Web Development Treats

In this potluck episode of Syntax, Wes and Scott answer your questions about HTML tags, budgeting, recession proofing your business, software dev vs software engineer, taking payments, and more. Show Notes 00:11:11 Welcome 01:29:11 When should you use article and section in HTML? 08:03:08 Does your business suffer from the economic recession? 15:47:18 How do you manage your money or budget? PlainTextAccounting YNAB Copilot 20:51:11 What should I consider using? There’s a lot of options. CommonJS, AMD, UMD, es modules? 26:30:09 What’s the difference between a software developer and software engineer? 30:36:11 How do you handle payment for your course platforms? Braintree Gumroad Paddle Stripe 38:33:23 Why is this false? “I’m a string” instanceof String 40:38:22 Do you all use Mac spaces for organizing windows? Arc 45:55:21 Do you have any tips that would help my front end team avoid rendering a DOM with invalid element nesting? 48:48:14 Would you do an episode commenting on the CSS Nesting survey released this week? Help Choose CSS Nesting Syntax 53:57:01 How do you guys go about prioritizing your work? Height.app Things 58:50:19 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Bundle of Eucalyptus Wes: Recycling bin brackets Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about the differences between building it yourself vs paying for a service to do it for you, such as cron jobs, checkout, hosting, images, video, and more. Show Notes 00:24 Welcome 03:19 Buying vs building topic 07:09 Strategy 09:50 Escapability 14:56 Services You Could Use Sentry Postmark 16:34 Efficiency of using a service 18:08 Cron jobs 20:43 Checkout Recurly Lemon Squeezy Stripe Braintree 24:29 Hosting 26:00 Screenshots and open graph images Cloudinary Vercel OG Puppeteer 29:25 Search Algolia Elastic MongoDB 33:32 Auth PasswordJS 36:55 Images 39:46 Video Hosting Vimeo Mux Amazon Kinesis 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

In this supper club episode of Syntax, Wes and Scott talk with Katherine Mello about her journey into coding from liberal arts to bootcamp education, data visualization, and coding for a sustainable focused company. Show Notes 00:34 Welcome 01:10 Guest introduction Rolling With Kat 03:05 Bag milk? 04:34 What is Tangible Materials? Tangible Materials 07:27 How did you end up at Tangible? Full Stack Academy 10:05 Are bootcamps worth it? 14:46 How important were in person classes to you? All We Can Save Braiding Sweetgrass 20:46 What do you enjoy about data visualization? D3 Data visualization society Three.js Observable Color Wheel 27:21 Working at WeWork WeWork: Or the Making and Breaking of a $47 Billion Unicorn • Official Trailer 34:14 What is your tech stack at Tangible? 38:26 What backend would Wes use for a project? Svelte Kit Supabase Super Bass 42:10 Is there environmental web hosting? 43:47 Supper Club Questions Uplift Desks 50:22 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Climavores Shameless Plugs Drinking from the Garden Hose Hiring at Tangible Materials 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

In this episode of Syntax, Wes and Scott talk through their goals for 2023 including coding, tooling, courses and platforms, social media, and fitness. Show Notes 00:17 Welcome 02:38 What’s a cantina? 06:33 Scott’s coding goals Animated grid layouts Tauri 14:39 Wes’ code goals Uses Stripe Stripe Elements Shoelace 23:17 Tooling Vite Plugin List Directory Contents 26:39 Scott’s courses and platform LevelUp.video 29:36 Wes’ courses Wes Bos Tutorials 31:11 Scott’s fitness goals 35:55 Wes’ fitness goals 39:44 Apple Watch for fitness 41:54 Syntax podcast goals 50:13 Scott’s social media goals Scott on TikTok LevelUp Newsletter 52:35 Wes’ social media goals Wes on TikTok 58:02 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Menu Wes: JB Weld Clearweld, big version Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about Satisfies and as const. Show Notes 00:25 Welcome 02:04 Xmas recap Peloton 04:09 Satisfies and as const 06:16 What is const? 10:30 Helping with currency 12:44 Bos monster server update 14:13 Satisfies export const currencies = { USD: 'US Dollars', CAD: 'Canadian Dollar', EUR: 'Euro', } as const; export type Currency = typeof currencies; export type CurrencyCode = keyof Currency; 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

In this supper club episode of Syntax, Wes and Scott talk with Sarah Drasner about her new book, Engineering Management for the Rest of Us, what it’s like moving from management to coding and back, the book writing process, and her Fortnite VS Code theme. Show Notes 00:36 Welcome 01:59 Who is Sarah Drasner? @Sarah_Edo on Twitter @Sarah_Edo on Mastodon @Sdras on CodePen @SDras on GitHub SarahDrasnerDesign.com Google Engineering Management for the Rest of Us Amazon: Engineering Management for the Rest of Us Netlify 05:25 How did you figure out what to do in management? 07:20 How do you get out of engineer’s way? The Engineer Manager pendulum 09:39 Do you spend time on making the person happy in the job? 15:51 Should managers code? 19:16 Was it difficult to step out of coding? 21:07 Why do people leave jobs? 24:04 Dealing with conflict and reorgs 28:36 What makes a good retro? 31:25 What was your process for writing a book? SVG Animations: From Common UX Implementations to Complex Responsive Animation Scrivener Egghead Mayfly Design Sarah Drasner’s articles on CSS Tricks Sarah Drasner’s articles on Smashing Magazine 43:44 Supper Club questions Sarah Drasner’s VS Code snippets and themes Creating a VS Code theme Wes Bos Cobalt 2 VS Code theme Partytown beta 53:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Paper Koi Lantern: a DIY Kit Shameless Plugs Engineering Management for the Rest of Us 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

In this episode of Syntax, Wes and Scott talk about their predictions in web development for 2023. Show Notes 00:07 Welcome 01:25 SSR JS sites more the norm 03:32 React doing forms 05:39 TypeScript Inferred becomes hot 08:11 Deno gets hotter 12:51 JS Runtimes Mature HTMX 15:00 We will see a new TS Type Checker written in Rust 19:20 New JS APIs 23:37 Writing towards Winter CG Spec Popular. “Worker Ready” script STC 27:05 A new JS framework SolidJS Qwik 29:44 Page Transitions API 32:40 Scott was right / Scotts gonna be right 34:06 Rust becomes more Popular 36:00 React Beta Docs launch after 5 year dev cycle 37:45 CSS Container Queries in Production 41:07 Svelte and Sveltekit Glow Up 43:38 CSS Subgrid 49:19 WASM 51:51 AI Open AI 53:16 Houdini 54:30 People souring on React, Eslint 57:47 Machine learning 01:08 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Cron Wes: Wyze Headphones Shameless Plugs Scott: LevelUp SvelteKit Tutorial 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

In this episode of Syntax, Wes and Scott talk through some TypeScript Fundamentals around type narrowing, type guards, and type predicates. Show Notes 00:24 Welcome 01:40 Rocking predicates 02:54 What is a type in TypeScript? 04:11 Type Narrowing 08:18 Type Guard 16:19 Type Predicates Shameless Plugs Scott: LevelUp Tutorials 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

In this supper club episode of Syntax, Wes and Scott talk with Kilian Valkhof about his work on Polypane, a browser for developers. How is Polypane built? Why does he have a focus on accessibility in Polypane? Show Notes 00:39 Welcome 01:48 Who is Kilian Valkhof? kilianvalkhof.com @kilianvalkhof on Twitter 04:50 What is Polypane? Polypane @Polypane on Twitter FromScratch 09:31 How is Polypane built? 14:18 What about the Dev tools tab? 20:15 Outline tab 23:23 Color picker 27:33 Canvas rules and guides 32:16 Accessibility background and tools 40:28 How do you parse the CSS? 42:51 What else do you want people to know about Polypane? 44:42 Supper Club questions 53:59 SIIIIICK ××× PIIIICKS ××× Shameless Plugs Fix Contrast Superposition 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

In this episode of Syntax, Wes and Scott revisit their 2022 predictions and see which ones they got right, and which they got wrong. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:09 Welcome Syntax 420: 2022 Predictions 01:44 Svelte popularity Svelte Svelte Kit 04:09 Next.js data layer 05:06 Web components UI Open UI 06:19 Rust popularity Rust 10:07 Serverless and Cloud functions 10:42 Tailwind popularity 16:20 Sponsor: Sentry 17:59 Next gen dev tools 19:46 CSS Container queries 21:45 GraphQL 26:26 Deno 29:44 TypeScript 34:28 Sponsor: Sanity 35:07 Server comeback 36:21 Checkouts and payment processers Lemon Squeezy 43:05 Sponsor: Auth0 44:18 Temporal API 46:44 Remote dev thin client popularity 49:49 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: JADENS Label Maker Machine with Tape Wes: Chipolo One Spot Shameless Plugs Scott: LevelUp Svelte Kit Tutorial 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

In this Hasty Treat, Scott and Wes talk about the current state of building desktop apps with Electron or Tauri. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 00:33 Welcome 01:18 Sponsor: Sentry 02:47 Sponsor: Prismic 04:01 Our experience with building desktop apps Level Up Tutorials: Level 1 Electron Hair.WesBos.com 10:04 Frameworks for building apps 10:56 Tauri vs Electron Tauri Electron 23:38 Tooling vite-plugin-electron 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

In this supper club episode of Syntax, Wes and Scott talk with Kenneth Lyerly about his career path into coding, and how he manages to hold two jobs. Show Notes 00:38 Welcome Ken.dev Ken on Github 01:59 How do you have two jobs? 09:46 When did you start a second job? 16:02 Any tips for someone wanting to switch into coding? 24:03 Do you have advice for people trying to market themselves? 31:38 What is working these days for marketing efforts? 34:47 Where can devs learn about marketing? 35:50 Barbershop culture 39:47 Supper club questions Snazzy Labs custom Touch ID button Tech Meme Ride Home podcast 44:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Traeger Grills Shameless Plugs Suavecito ResortPass 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

In this potluck episode of Syntax, Wes and Scott answer your questions about how to give feedback on the podcast, deciding on a business model for courses, what to do about Twitter, and more. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:51 Podcast feedback 04:46 Can you talk about how you made the decision to re-write LevelUp? Strangler Fig 13:54 How did you get a score for your website? Google Pagespeed 19:30 Where will we move to when Twitter implodes? Twitter Blue 26:29 Sponsor: Linode 27:06 How did you arrive at your business model? 33:15 Advice for getting into freelancing web dev? 38:49 Sponsor: Sentry 40:07 How to feel more “senior” as a developer 43:30 How do you manage notifications between various apps? Hazel 50:46 Label makers Nimbot label makers 54:14 Sponsor: Freshbooks 54:45 How are people testing node apps? JestJS Vitest Mocha ChaiJS 56:38 What are your thoughts on the TanStack Router? Tanstack Astro SvelteKit Nozzle 01:09 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Sensibo Air Wes: We Crashed Shameless Plugs Scott: LevelUp Tutorials 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

In this episode of Syntax, Wes and Scott talk about your options for database when you’re working with serverless. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:25 Welcome 00:51 Sponsor: LogRocket 01:44 Sponsor: Prismic 03:17 Why Serverless and related databases? 07:45 Deploying on Deno Deno 08:44 Using a database with serverless functions Syntax 542 - Serverless Limitations 11:53 Using purpose built databases Planetscale Supabase Cloudflare D1 Cloudflare Key Value Store AWS DynamoDB AWS Auroa FaunaDB Neon Railway MongoDB Serverless Redis Cassandra 15:01 The results of the test 17:35 Solutions 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

In this supper club episode of Syntax, Wes and Scott talk with Jonny Burger about why and how he built Remotion, his app that lets you create MP4 videos using React. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Show Notes 00:36 Welcome 01:24 Who is Jonny Burger? Jonny.io Jonny on GitHub Jonny on Twitter 03:51 Why did you create Remotion? Remotion.dev 07:36 What types of videos are people making? 10:53 What is the tech stack? Puppeteer Lottie 18:31 What is Idempotence? 19:50 What is lottie? 22:56 Motion blur trail Motion blur trail demo 25:17 Sponsor: Gatsby 26:12 Chrome rendering 29:58 When would you choose JPG or PNG? 31:43 Are you using ffmpeg in the browser? ffmpeg 36:00 Sponsor: Tuple 37:43 What player do you use for playback? 39:54 How did you take this idea to a product? 44:05 Supper Club questions LG C9 TV iTerm 50:12 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Yoga with Adriene Cosmic Kids Yoga Shameless Plugs Toopo.art 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

In this episode of Syntax, Wes and Scott look at the the Web Almanac’s report on the role of JavaScript on the web in 2022. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 01:17 College football update 04:07 Web almanac for 2022 JavaScript in the 2022 Web Almanac 06:25 Unused JavaScript 07:47 JavaScript requests per page 09:38 Bundlers 14:01 Pages using Babel 16:01 How JavaScript is requested 19:22 Sponsor: Sentry 20:56 Loading render blocking tags 22:48 Dynamic import, web workers, source maps 24:33 Libraries and frameworks Owl Carousel Lazy Sizes 29:30 Websites using web components 31:35 Websites with JavaScript security issues 32:43 Sponsor: Auth0 33:58 Jamstack 37:09 JavaScript used by Jamstack sites 38:03 Jamstack hosting 39:46 Popular Static site generators 44:49 Progressive web apps and service workers 50:29 jQuery inside WordPress themes WeCrashed 51:13 Project Fugu Project Fugu 52:51 Web push notifications 55:49 CMSs 00:45 Sponsor: Freshbooks 01:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: White Lotus Wes: Ubiquiti Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk through the various rendering methods in use today and the pros / cons of each. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:26 Welcome 01:31 What is rendering? 02:41 Sponsor: Sentry 03:58 Sponsor: Sanity 04:55 Rendering methods 05:48 Single page application (SPA) 07:36 Multi-page Application 09:14 Static Site Generation (SSG) 11:10 Service Side Rendered (SSR) 13:08 Partial hydration 14:03 Progressive hydration 15:38 Island architecture 16:25 Progressive enhancement 18:18 Incremental Static Generation 19:12 Streaming SSR 19:53 Resumability 21:51 Edge rendering 23:11 Missing from the list 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

In this supper club episode of Syntax, Wes and Scott talk with Vu Le about his path to working at Disney. How did he learn to code? How do you get a job at Disney? What’s the tech stack inside a Disney team? Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Show Notes 01:40 Who is Vu Le? 03:33 How did you learn to code? 04:57 How do you get a job at Disney? 09:01 Internal CMS development at Disney 10:19 What types of languages do you use internally? 15:22 Do you have a design system? 19:52 How do you handle versions and updates? 22:42 Sponsor: Tuple 23:37 Do you get involved in testing? Vitest 25:06 What are you using for GraphQL? GraphQL 25:34 How are you handling CSS? Theme UI 31:43 Does Disney do remote work? 34:38 Perks of working at Disney 38:16 Supper Club questions GMMK Pro Keyboard Santa Cruz bicycles JetBrains Mono 45:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Garden hose connectors 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

In this episode of Syntax, Wes and Scott talk about their preferred coding styles and preferences they use, and why. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 02:35 Function definition 06:43 File path aliases 09:36 Implicit vs Explicit Return 13:49 Array.reduce() VS literally anything else 17:37 Loop vs array method 22:55 Sponsor: Linode 23:37 Updating vs creating a new var 30:36 Iterable to Array 34:46 Sponsor: LogRocket 36:16 Destructuring vs Object.property 39:22 Destructuring Arrays vs Reference by index 41:40 Number(string) vs +string 43:35 Incrementing 45:06 Multiple ifs 47:48 Multiple ifs vs switch vs Ternary 51:05 Promises / Error Catching 53:50 if(falsy) block VS return false; 55:51 Sponsor: Freshbooks 56:26 Spaces vs tabs 58:39 Trailing commas 00:40 Semicolons 02:49 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Video Archives Podcast Wes: Ubiquiti Wifi Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about new features coming to GitHub including Hey, GitHub!, GitHub Blocks, GitHub Copilot CLI, and more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:23 Welcome 01:49 Responsive web design update 03:12 Let’s go 05:32 Sponsor: Linode 06:01 Sponsor: LogRocket 07:23 GitHub Next GitHub Next 08:17 GitHub Copilot for the CLI 11:52 Synthesizing results Syntax 540 - Responsive Design Techniques 13:31 Hey GitHub Syntax 481 - Supper Club Voice Coding with Pokey Rule 16:55 GitHub Blocks 18:58 GitHub Code search 21:36 GitHub Collaborative workspaces 23:43 GitHub Copilot for your own codebase 25:10 GitHub Copilot Radar 29:15 GitHub AI Pull Requests 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

In this supper club episode of Syntax, Wes and Scott talk with Jared Sumner about why and how he created Bun, what Zig is, and the future of Bun. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. Tuple.app. Show Notes 00:37 Welcome 01:44 Who is Jared Sumner? Jarred Sumner on Twitter Bun Bun Discord Bun on GitHub 02:31 Why did you make Bun? 09:43 Using web API vs Node modules? 13:25 Do we still use npm? 15:42 Support for HTML Rewriter 16:46 Where do you see Bun being used? 19:25 Do you think someone will write a type checker? 21:18 Sponsor: Tuple 22:07 What is Zig? 24:57 Did you have a history of learning languages? 28:16 Have you ever thought of putting Bun on hardware? 29:59 Is there a package.json file in Bun projects? 31:34 What can’t Node just get faster? 32:16 What is the future of Bun? 36:27 Thoughts on types in JavaScript? 41:16 Why did you build an SQLite client into Bun? 42:54 Supper Club questions Starship Warp 48:52 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Bun meme 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

In this potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:10 Welcome 01:53 TikTok update 02:46 What strategies do you use to find the good stuff? Tweetdeck 11:17 What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? 15:56 Should we use TypeScript for a new blog? 20:45 Sponsor: Sanity 21:45 Is there any reason to still use string concatenation over template literals? 26:13 What should React devs use to get initial scaffolding in place? Create React App Vite Turbo Pack 29:38 What’s the deal with Playwright? Playwright 34:28 Sponsor: LogRocket 35:19 What separates a “scripting” language from a “programming” language? 39:37:14 Sponsor: Prismic 40:23:02 Do you have any tips on how to change a defeated programmer mindset? Partydown 47:34:07 How has your use of and work in the browser changed with Arc? Arc Browser Syntax 514 - Supper Club × Arc Browser with Hursh Agrawal 49:18:15 Why would I attach an event listener with the useCapture argument as true? 51:33:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Screwless plates / 4 pack of screwless plates Wes: Shoe Boxes for Cords Shameless Plugs Scott: LevelUp TikTok Wes: Wes Bos TikTok 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

In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:23 Welcome 01:08 Sponsor: Sentry 01:59 Sponsor: MagicBell 03:11 Topic introduction 04:44 Function limit Puppeteer 08:51 Node support 10:00 Cron jobs 11:12 Local development Miniflare 11:45 Database access SQLite 12:42 Sharing code 13:07 Environmental variables Netlify environmental variables 14:37 Timeouts 15:47 Sass is expensive 17:26 Infastructure as code 19:02 Search Algolia Shameless Plugs Scott: LevelUp Tutorials 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

In this supper club episode of Syntax, Wes and Scott talk with Scott and Wes! Talking about BBQ, electric cars, workout equipment, home renos - but they do sneak in a bit of coding talk! Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. https://tuple.app/syntax Show Notes 00:37:11 Welcome 03:18:10 Saskatchewan and Saskatoon Berries Saskatoon Berry Barn 05:02:14 TV shows we’re watching Amazing Race Canada America’s Dance Crew Lakefront Luxury 12:49:12 New house vibe 18:29:06 Sponsor: Kontent 19:13:20 Sauna thoughts 22:58:24 Home gym thoughts Woodupp Tonal 40:22:16 Sponsor: Tuple 41:17:11 3D printer 44:11:09 How many things can you take on? 48:23:11 BBQ talk Amazing Ribs 55:26:11 Electric car update Ioniq 5 57:45:07 Supper Club questions Level Up Tutorials VS Code Theme Quokka VS Code Extension Quokkajs Console-Ninja 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

In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:47 Clean Talk 03:55 The menu of responsive design Syntax 154 with Sara Soueidan 06:52 Responsive design basics 11:54 What should you build for first in 2022? 16:15 Shrink and grow until it looks bad 21:36 Menus in responsive 23:43 Sponsor: Linode 24:13 Grid systems 28:08 Grid and Flexbox CSS Grid Course Flexbox Course Can I Use 35:02 Sponsor: LogRocket 36:00 Container queries 45:56 FitText 49:12 How do you test these types of things? 51:15 Future techniques coming 53:28 Sponsor: Freshbooks 53:56 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Lutron Light switches Wes: Sunco Lighting BR30 Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:13 Welcome 01:39 Sponsor: Sentry 02:41 Auth0 03:57 A bit more auth 05:24 New RFC RFC: First class support for promises and async/await 08:30 What are the basics of this proposal? 10:12 Scott gets a little Svelte-y 11:44 Why is this being proposed? 17:14 Infinite loop possibility 18:44 Why is Svelte API better in this use case? Tanstack Smooshgate 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

In this supper club episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno. Why was Deno created? What is Deno written in? How is Deno so much faster? And what’s the future of Deno? Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:36 Welcome Tinyclouds.org Ry on GitHub Deno Deno Discord 01:18 The introduction of Node 02:51 Why are you still betting on JavaScript for the web? 05:34 Why did you make Deno? 09:04 How does TypeScript fit into the landscape? 11:40 How is Deno so much faster? 13:28 Sponsor: Sanity 14:17 What is Deno written in? 15:56 Should developers be learning Rust? 18:27 Will libraries that work on npm eventually work in Deno? 21:52 Are we going to use Node API’s or web spec? 24:31 Sponsor: Sentry 25:31 What is tooling like for Deno? WinterCG Deno VS Code Extension 29:27 What is Deno deploy? Deno Deploy 34:01 Deno’s framework Fresh 38:56 Client side vs server side rendering 41:27 Sponsor: Gatsby 42:28 What’s the future of Deno? 43:39 Supper club questions 53:30 SIIIIICK ××× PIIIICKS ××× 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

In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:06 Welcome Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1 01:22 Smart home updates 04:05 Box sizing: border box 06:57 CSS Columns 09:20 Aspect Ratio Can I Use CSS Properties Rotate 09:53 Transitions and animations 13:36 Transition time 17:05 Steps as a timing function 19:01 Sponsor: Prismic 19:43 Blend modes 23:57 Responsive web design 26:31 Prefers Color Scheme 27:48 Popular breakpoints 30:57 Sponsor: LogRocket 32:06 Feature queries and @ supports 34:59 Logical and physical properties 37:59 css-in-js Sam Magura - Why We’re Breaking Up with CSS-in-JS Brad Frost - Why We’re Breaking Up with CSS in JS 42:28 Sass 43:20 Print styles 45:38 Sponsor: Sanity 46:38 Longhand properities 48:21 Non-existant properties 52:06 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Front Bumper Drillless Plate Holder Wes: 1U Server Rack Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about creating short form content for TikTok, Reels, Shorts, and tweets. What are some of the benefits and limitations of creating for vertical video, and what tools are they using to create videos. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:39 Sponsor: Sentry 02:40 Sponsor: Freshbooks 04:05 Short form content intro WesBos.com/tips Wes on TikTok LevelUp Tutorials on TikTok Scott Stolinski on TikTok 07:16 The good and the bad of short form content 17:13 Repurposing content 18:36 Content that works 21:12 Tips for making short form content 24:19 Limitations of short form content 31:49 Tools for editing Screenflow Descript Detail.co 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

In this supper club episode of Syntax, Wes and Scott recorded a live open table episode with guests calling in to talk about Wasm, building Riverside.fm, home networking, getting a job at Microsoft, Svelte and Sveltekit, htmx, and more! Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch! Show Notes 00:30 Welcome 01:49 Safari aspect ratio bug 04:17 Thoughts on Vercel announcements? NextJS Conf 10:07 Gideon Riverside CTO Riverside.fm Careers 14:44 Do JS devs need to branch out? 16:52 Wasm Web Assembly (WASM) Rustlings 19:46 Sponsor: Auth0 21:03 Which company will Vercel aquire next? Guillermo Rauch Akamai Acquires Linode 27:12 Svelte Kit and Vercel 30:20 Why don’t you terminate your own ethernet cables? 30:58 How does Fly.io compare to Vercel? Fly.io 31:36 Did Wes learn Vue? 32:10 Brad jumping on the Remix train Remix 34:18 Layout shift caused by images in Markdown 38:30 Maintaining home networking Ubiquiti 44:44 Taking a course lead to a job with Microsoft Soumya’s YouTube - Geekysrm / website / Twitter 47:38 Sponsor: Appwrite 48:39 Are you still using your Synology NAS? Synology 53:53 Is Svelte ready for smaller team projects? Svelte Kit Wyze 56:03 HTMX htmx Alpine.js 01:49 Docker Wasm preview Introducing the Docker+Wasm Technical Preview WebAssembly System Interface 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

In this Potluck episode of Syntax, Wes and Scott answer your questions about meeting IRL, bookmarks, SSG vs SSR, domain privacy, deploying monorepos, and more. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:08 Welcome 01:20 Weather updates 02:21 How often have you gotten together in real life? Jamstack Conf Reactathon 05:33 What are people using to bookmark sites? Arc Browser 09:03 When not to use Static Site Generation (SSG), and when to use Server-side Rendering (SSR)? Svelte Kit 13:53 How do you do correct error handling to catch everything? Sentry.io 21:13 Sponsor: Sentry 22:50 Is there any benefit to using getters and setters in classes set them over plain methods? 27:47 Will there ever be a js framework that can SSR on a non-JS backend? Render pnpm 32:40 Have either of you thought about learning and teaching Python or Django? 34:56 What is your opinion on purchasing “Domain Privacy” with each domain? 37:49 Sponsor: Sanity 38:44 Domain privacy continued 39:22 How you deploy monorepo packages? Tanstack Vite 43:48 As a member of a non margin group should I avoid applying for jobs when they say they welcome applicants who are of a marginalized group to support diversity? 46:12 When would you, if ever, choose good-old React over something like Next JS? 53:24 Sponsor: Freshbooks 54:16 Is it preferred to import via absolute reference or relative reference? 00:23 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Air Compressor Wes: Blue Flush Cutter Mini Diagonal Cutting Pliers Side Cutter Nippers Wire Cutter Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about Zod, a TypeScript-first schema validation with static type inference. How are we using Zod? What do we like? And our thoughts on the Zod ecosystem. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:24 Welcome 01:48 Sponsor: LogRocket 02:54 Sponsor: Linode 04:07 Minecraft thoughts Minecraft 06:25 Scratch Scratch 07:19 What is Zod? Zod Zod comparison 10:05 Features of Zod 13:24 How we’re using Zod 14:40 How Zod works with MongoDB 15:51 3rd party plugins 19:35 Zod ecosystem Zod Ecosystem 22:22 Asynchronous validation 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

In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about ADHD, how to tell if you have ADHD, issues related to ADHD for computer workers, anxiety vs ADHD, and more. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch! Show Notes 00:36 Welcome 02:11 Guest introduction 03:00 Do I have ADHD? CHADD 09:12 What is the threshold for diagnosis? 11:43 Are there other issues for computer workers? Arc Browser Syntax 513 - The Productivity Episode 15:27 Avoiding difficult or boring things 17:04 Structuring your day 18:41 Sponsor: LogRocket 20:12 Any tips for working in a distracting environment? MyNoise.net Headspace 23:40 Can I learn to deal with things? 27:28 How can I support a team member with ADHD? Missive 31:51 Sponsor: Appwrite 32:47 Any lifestyle changes to help with ADHD? 38:26 How do you find medical help? 42:39 How do you tell the difference between discipline vs ADHD? 47:05 Anxiety vs ADHD? 48:36 Dyslexia and ADHD 53:31 Inheritable or genetic 54:50 Don’t rely on self-diagnoses Psychology Today 55:48 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Taking Charge of Adult ADHD Bird feeder 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

In this episode of Syntax, Wes and Scott tell more of your scary web dev stories including lorem ipsum mistakes, naming something Skynet, blackouts, Twitch streaming, and more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:12 Weeeeeelcome 02:11 Slipsum mistake Slipsum 03:40 Brotli scaling explosion When JavaScript Bytes 05:14 Email loop Breaking Production with 56,000 emails 05:36 DevOops Magento store Example.com 08:26 Scary animal stories 11:09 Naming something Skynet 11:58 2003 Blackout 13:16 ExtJS error binding 17:09 Sponsor: Linode 17:55 Lead gen forms and captcha Issue Renaming upper-case ‘Sirupsen’ to ‘sirupsen’ Follow up 19:51 Scarlet Letter 21:51 MongoDB achievement story Adam Coster 26:14 Sponsor: Auth0 28:11 Drupal and mysql database fun 30:10 Nervous Twitch 34:03 FTP access story 37:24 Sponsor: LogRocket 38:53 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Ear foam tips Wes: Stepped drill bit / Aliexpress link Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes explain more buzz words like schema, promises, async, sync, dom vs shadow dom vs page HTML, props, and more. Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the Appwrite Cloud launch. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:21 Welcome 01:17 Sponsor: Appwrite 03:16 Sponsor: Sanity 04:08 Schema Zod Apollo GraphQL 07:25 Promises 08:47 Async, Sync, Parallel and Concurrent 13:15 Dom vs Shadow Dom VS Page HTML 16:21 Methods vs Functions 18:18 Props 20:27 HTTP Requests are Stateless 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

In this supper club episode of Syntax, Wes and Scott talk with Filipe Ferreira of Sky TV about the tech stack used to deliver streaming TV content, build Apple TV apps, host media, and more. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Sponsorname - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. retool.com/syntax Sponsorname - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. Show Notes 00:36 Welcome 02:15 Guest introduction fbritoferreira.com @SkyShowtime Peacock 04:13 What do the systems look like inside of Sky? GraphQL Redis Apollo GraphQL 06:26 Do you use federation? 07:50 How do you handle caching? 11:24 What’s the tech stack for the front end? 13:30 Do you cache on client side? 15:27 How long has Sky been serverless? 16:55 Sponsor: Gatsby 18:05 How was Sky’s Apple TV app built? 21:17 Where did you host media? AWS Streaming Mux 24:37 Supporting live events 28:03 Sponsor: Storyblok 30:05 What language are you writing the GraphQL layer? The Guild 32:22 How do you define your types? 36:40 Supper Club questions Apple Magic Keyboard with Touch ID Magic Keyboard with Touch ID and Numeric Keypad 44:28 Sponsor: ReTool 45:22 AppWrite AppWrite 48:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Anker 733 Power Bank (GaNPrime PowerCore 65W) 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

In this episode of Syntax, Wes and Scott tell your spookiest scary web dev stories including spooky render times, push notification hell, dark Friday, and more! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:15 Welcome 03:00 Spooky Render Times React Virtualized React Window 09:19 Push Notification Hell 13:11 Dark Friday 14:19 Tiny Ints with Big Problems 16:57 A/B Testing 18:47 Confirm Purchase button mistake 21:21 Sponsor: Sentry 22:34 Dike Leak 25:14 A Steep Grade 32:41 Falkland Islands mixup 33:40 Conference mixup 36:34 Sponsor: Prismic 37:58 Doctor Who Ipsum 43:55 Marketplace payouts 46:38 Sponsor: Freshbooks 47:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: PopSocket Wallet Wes: Water flosser Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about Qwik, a new framework designed for the edge. How are things like hydration, lazy loading, rendering, and optimization handled by Qwik? Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:18 Welcome 01:25 Sponsor: Sentry 02:47 Sponsor: Sanity 04:50 What is Qwik? Qwik 08:05 What is SSR? 09:25 Working with hydration 15:31 Lazy loading, reduced rendering, and Qwik optimizer 17:30 Edge first 18:55 Data loading or data actions issues 20:49 Qwik City Qwik City 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

In this supper club episode of Syntax, Scott talks with Alex Johansson about his work on tRPC, how it compares to other tools like GraphQL, and what’s next for tRPC? Polypane - Sponsor If you want to build a great website or web app, there’s a million things you need to take care of: responsive design, accessibility, SEO, Meta tags and page structure, to name just a few. Polypane is the browser for developers with tools that help with literally every part of modern web development, helping you save hours (and frustration!) with every project. It shows your site in multiple fully-synced viewports at once, Gives you advice on better accessibility and gives you insight into your performance and quality. Go to polypane.app/syntax to start a 14 day free trial and use SYNTAX20 for a 20% discount at checkout. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. Show Notes 00:37 Welcome 01:56 Guest introduction @Alexdotjs on Twitter Alex on GitHub Katt.dev tRPC.io 02:47 What is tRPC? 06:56 How does type safety work? 10:38 Sponsor: Polypane 13:20 What is Zod? 17:39 How does tRPC relate to GraphQL? 23:47 Sponsor: FireHydrant 25:25 What about a data loader? 29:04 React or NextJS adapters 30:41 How does it feel when people start building off your project? 33:58 Sponsor: Kontent by Kentico 37:34 What’s next for tRPC? 42:42 How is error handling done? 48:43 Supper Club questions 54:42 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Kysely 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

In this episode of Syntax, Wes and Scott talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 02:15 Cleaning Sick Pick Bar Keepers Friend 04:40 Web Almanac Web Almanac 08:23 CSS stylesheets size grow 09:49 Popular CSS Class names 15:29 How many websites use !important? 18:11 Popular pseudo classes 20:27 Sponsor: Prismic 21:38 CSS Attribute Selectors 27:03 Most popular units 32:23 calc properties 33:13 Sponsor: LogRocket 35:15 Top operators when using calc 36:21 Custom Property Names 37:39 Property Value types 38:00 Functions 39:27 Color names 42:02 Format of color 43:50 Most popular gardient on the web 47:27 Sponsor: Freshbooks 47:57 We don’t know the web 50:39 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Dawn Wes: Flat speaker wire Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes take Matt Busche’s suggestion and talk all about bookmarklets and scripts to modify or manipulate web pages. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. NAME - Sponsor COPY HERE Show Notes 00:25 Welcome 02:02 What are bookmarklets? Matt Busche’s fav bookmarklets Gist Bookmarklet Maker CSS Tricks - Web Development Bookmarklets 04:49 Using an Immediately invoked function expression 09:22 Greasemonkey Greasemonkey 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

In this supper club episode of Syntax, Wes and Scott talk with TJ DeVries about his work on Neovim, programming in Lua, the benefits of RPC, live streaming your work day, and PDE. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Show Notes 00:36 Welcome 01:13 Guest introduction Teej_dv on Twitter TJ Devries Teej_DV on Twitch TJ on YouTube Telescope on GitHub Neovim on GitHub Syntax 508 with The Primeagan 03:15 The difference between Vim and Neovim 06:14 Why did you choose to write in Lua? Lua Luajit 13:26 What is adapative UI in Neovim? 17:38 Lunarvim and alternatives Fvim LunarVim 20:24 Personalized development environment PDE PDE Firenvim 22:40 Sponsor: FireHydrant 23:21 Benefits of RPC 30:34 Is working on Neovim your job? Sponsor Neovim Sourcegraph 31:30 What is your approach to streaming? 34:11 Did you go to school for computer science? 39:12 Sponsor: Gatsby 39:46 Supper Club questions System76 Pop Dactyl Manuform Keyboard Kit Jetbrains Mono 49:52 Sponsor: Hasura 50:47 SIIIIICK ××× PIIIICKS ××× 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

In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:11 Welcome 01:15 Fogging the boats 04:25 Use the platform 06:32 URLSearchParams 10:04 Pushstate and History API Pushstate 13:46 Internationalization API Internationalization API Syntax episode 153 16:03 FormData API MDN Docs Clipboard API tutorial 20:31 Sponsor: Prismic 21:23 All of the DOM API 24:12 Vanilla JS 26:06 Localstorage and IndexDB 29:18 Web Animations API 31:10 Sponsor: LogRocket 32:39 Endless other browser apis 38:22 Shadow DOM and Web Components Web Components for beginners 42:57 CSS variables 46:05 HTML 47:27 Sponsor: Sanity 49:19 More HTML 54:12 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Cable sleeve Wes: Kindling splitter Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:25 Welcome 01:06 Sponsor: Sentry 01:59 Sponsor: Freshbooks 02:27 What does that even mean? 02:55 Everything in JavaScript is an Object! 04:43 X is just Syntactic Sugar 09:00 Functions are first class citizens 10:04 Object Literals or Template Literals 11:12 Declarative vs Imperative 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

In this supper club episode of Syntax, Wes and Scott talk with Nikolas Burk from Prisma about the role an ORM plays in a tech stack, how Prisma has changed over the years, ways to query data in Prisma, and how migrations work with Prisma. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax. Show Notes 00:35 Welcome 01:30 Guest intro @NikolasBurk on Twitter 04:56 How has Prisma evolved? Prisma Keystone GraphQL 10:44 What was Prisma V1? 17:04 Is there any GraphQL specific functions in Prismic? 21:26 Sponsor: Hasura 22:26 What role does an ORM play in a tech stack? 29:54 What is Planetscale? Planetscale The T3 Stack 32:22 Where does TRPC fit? tRPC 33:46 Sponsor: Storyblok 35:28 What is an ORM? Prisma VS Code plugin 42:00 How do migrations work with Prisma? 45:58 Query your data with Prisma client 49:43 Have you looked into alternative JavaScript environments? 55:16 Sponsor: FireHydrant 57:05 Supper Club questions 58:50 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Lichess Shameless Plugs Prisma blog 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

In this episode of Syntax, Wes and Scott answer your questions about whether you should use emoji in naming grid elements, how to estimate project times, responsive design tips, animating gradient backgrounds, and more. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:10 Welcome 01:22 Shooting some pucks at the football game 04:06 Should we use emoji naming conventions for our grid template areas instead of just words? Screenshot of Grid question 08:38 How do you estimate a reliable timeline for a project? 12:18 Do you think about sustainable web development? 16:24 What kind of tips and tricks around responsive design do you have? 18:22 Sponsor: Linode 18:55 How would you go about documenting your achievements throughout your career to reflect on during interviews and employee reviews? 23:33 How do you plan long term for projects or goals? Forever Jobless Goals worksheet 28:22 Can you please make a fundamentals episode that only cares about clarifying the terms everyone assume to be well known to even beginner devs? 22 Buzzwords Explained 31:01 Sponsor: LogRocket 32:20 How would one go about animating a gradient background based on mouse movement? JavaScript 30 38:13 Is there any way using the children API to render the close button and menu items in different locations in the menu component? @Luke_lafr come on the show! 42:04 Where should I begin with design systems? 48:10 Sponsor: Sanity 49:24 Is JSON always safe? 55:01 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Thorn Razor, Rockwell Blade Bank Wes: Milwaukee 48-22-1902 Fastback II Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials / Beginner JavaScript 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

In this Hasty Treat, Scott and Wes talk about the ways they get unstuck when working on the last bit of a project to help push it over the finish line. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:26 Welcome 02:05 Sponsor: Linode 02:59 Sponsor: LogRocket 03:48 The last 10 percent 05:25 Break those things into Tasks 08:11 Just do it 09:10 Rewards 11:25 Be ok with good enough 14:21 Keep the end in sight 15:00 Do it “Quick a minute” 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

In this supper club episode of Syntax, Wes and Scott talk with bdougie about his work on Open Sauced, thoughts on getting into open source development, and his live streaming set up. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Get started at Firehydrant.com/syntax Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. Show Notes 00:36 Welcome 01:52 Guest introduction OpenSauced.pizza @Bdougieyo on TikTok bdougie on Twitch Open Sauced on YouTube bdougie on YouTube Jamstack Netlify 03:36 What was the inspiration for Open Sauced? 08:23 GitHub GraphQL API 13:22 What are your thoughts on GraphQL? GraphQL 14:36 What is the T3 stack? 16:30 Sponsor: Hasura 17:53 What is the goal for Open Sauced? Open Sauced Beta for Hacktoberfest 20:08 What is your focus with live streaming? T3 Stack Vite The Primeagan on Syntax Episode 508 Octoverse Hot Open Sauced Pizza 21:39 What hardware and software do you live stream with? Rode Procaster Wave XLR GoXLR OBS 25:26 Should adults be on TikTok? 30:31 How do you build an algorithm? 32:44 Sponsor: Storyblok 34:01 Supper club questions Keychron K2 Warp Ghostwriter from Replit A first look at GitHub Copilot Stable Diffusion Fig 43:17 Sponsor: FireHydrant 44:36 Interviews with open source maintainers 45:55 How should maintainers get paid? Patreon GitHub Sponsors Neovim Vim Adventures Lunar Vim 47:47 SIIIIICK ××× PIIIICKS ××× 51:34 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× bdougie: Warp Shameless Plugs bdougie on Twitter saucedopen on Twitter 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

In this episode of Syntax, Wes talks through all the gear, renovations, and upgrades he’s made to his new home office. Lighting, soundproofing, desk, windows, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:38 Welcome 02:24 Scouting a house with an office 03:54 Why didn’t you hire someone? 08:50 Goals for the office 10:30 Soundproofing 19:49 Decouple the ceiling 25:52 Sponsor: LogRocket 26:54 The door 33:23 Sponsor: Prismic 33:59 The desk 40:40 Cable management 47:12 Lighting 49:03 The room and windows 51:22 Flooring 55:12 Sponsor: Freshbooks 55:47 Things yet to be done 01:03:49 Costs 01:06:10 SIIIIICK ××× PIIIICKS ××× Desk Haus Apex Pro Max Alien Tape ××× SIIIIICK ××× PIIIICKS ××× Scott: Pretend Podcast Wes: Nano Tape Shameless Plugs Scott: LevelUp Tutorials 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

In this Hasty Treat, Scott and Wes talk about a new framework called Enhance. What is Enhance and how does it differ from other new frameworks like Astro? Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:27 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:40 What is Enhance? Enhance.dev 06:17 Singe file components export default function HelloWorld({ html, state }) { const { attrs } = state const { greeting='Hello World' } = attrs return html` body { color: #222; } ${greeting} ` } Astro 09:23 State and Props 14:01 CSS 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