Zod Schema Validation and Type Generation

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

In this supper club episode of Syntax, Wes and Scott talk with Hursh Agrawal of The Browser Company about Scott’s favorite browser, Arc. How do you make a browser in 2022? Will there be a Windows version? And who is the target market for Arc? 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. 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. ⚡️ 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:34 Welcome HurshAgrawal.com @Hursh 02:53 What is Arc and why create another browser? Arc browser The browser company 05:36 What is different about Arc? 08:20 Who is the target market for Arc? 09:30 Sponsor: Auth0 10:39 How do you make a browser? 13:38 Will there be a Windows version of Arc? 15:57 Where did the CMD-T functionality come from? 19:27 Sponsor: FireHydrant 20:39 How do you build on top of the Chrome engine? 24:17 How does The Browser Company make money? 27:26 Do you mess with the user agent? 29:05 Why do you require account set up to use Arc? 32:58 Sponsor: Gatsby 33:59 How did you come up with your theming engine? 36:15 Supper Club Questions Warp Hacker News Changelog Every Ben Thompson Bundling and Unbundling 42:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Jabra speakerphone 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 what they do to get things done - apps for to do list tracking, calendar blocking, and how they determine a productive day. 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. 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 02:49 What is a productive day? 04:56 What’s an unproductive day? 07:43 Techniques for work Getting Things Done Eat That Frog Height 14:57 Weighting tasks 18:29 Pomodoro technique 20:53 Sponsor: StoryBlok 22:46 The hard schedule 29:24 Blocking out distractions Focus Self Control 32:20 Sponsor: LogRocket 33:34 Tips We Have 42:55 Sponsor: Freshbooks 43:32 Software to help get things done. Things Todoist Omnifocus Transmit Savvycal Centered Remarkable 56:21 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: USB C Female to USB Male Adapter Wes: Measuring 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 all about GitHub Co-Pilot and whether it’s ethical, secure, worth it, gonna make you dumb, just going to get in your way, or the greatest thing for programmers to use. Sentry - Sponsor Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. 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. Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. Show Notes GitHub Copilot Code Whisperer 00:29 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:07 GitHub Co-Pilot is now paid 05:51 Is it ethical? 08:02 Is it secure? 10:16 Is it going to take our jobs? 13:34 Is it worth it? 16:21 Does it make you dumb? 17:53 Does it get in the way? 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 Thomas Mann about Raycast - an app that can replace Spotlight on your Mac, and do so much more. 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 @ThomasPaulMann 01:49 What is Raycast? Raycast Raycast Store 08:11 Do you have designers on your team to help guide UI? 10:13 Why build it native instead of HTML and CSS? 13:12 Why did you choose React? 21:54 How do you figure out what’s possible in system level APIs? 26:40 Snippets make use of SQLite SQLite 29:05 Encrypted local storage data 33:11 Any plans for theming for Raycast? 35:20 What is the pricing model? 37:06 What was your Y combinator experience like? Y Combinator Careers 42:08 Any plans for future features? 44:08 Supper Club questions Leopold FC660C Black 65% Dye Sub PBT Mechanical Keyboard iTerm Starship 51:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Nothing Ear Buds 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 what APIs are, the API standards that exist, and walk through the various layers of what goes into making an API. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! 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:40 What are APIs? 06:09 API Standards 13:56 What about GRPC? 15:52 What is TRPC? 19:19 Sponsor: Payments Hub 20:25 API Cake Layers mySQL Postgres Mongo DB SQLite SQLizer 26:51 Server layer 33:28 Sponsor: LogRocket 34:36 Authentication layer 43:28 Caching layer 46:09 Sponsor: Freshbooks 46:38 Client layer Prisma: Package, but also a service keystone: Package Strapi: Package Sanity: Service Prismic: Service Hasura: Open Source and Service Contentful https://hygraph.com/ 48:01 Should I use x or y? 51:35 Tools GraphQL Playground Graphiql Postman Insomnia TablePlus Studio3T 56:27 SIIIIICK ××× PIIIICKS ××× 00:20 Knife Talk ××× SIIIIICK ××× PIIIICKS ××× Scott: Sharp Pebble Wes: Laser level 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 next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, 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. 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. Show Notes 00:27 Welcome 01:30 Sponsor: Prismic 02:54 Sponsor: Sentry 03:53 Do we use Post CSS? 05:22 Presets and plugins 06:19 Plugins we’re using "postcss-import" @import './elements/headings.css'; 09:48 PostCSS Nested 12:59 Variables (Custom Properties) 15:50 Media Query Ranges PostCSS Media Minmax 17:16 Custom Media Queries "postcss-media-minmax" @media screen and (width >= 500px) and (width "postcss-custom-media" @custom-media --below_small (width 18:35 Env Vars "postcss-env-function" env(--small_bp) 20:12 Color Function and Color Function Notation /* color-function */ p { color: color(display-p3 1 0.5 0); color: color(display-p3 1 0.5 0 / .5); } Syntax 479: CSS Color Functions Post CSS Color Functional Notation Post CSS Preset Env 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 The Primeagan about his streaming set up, how he decides what to stream, why he makes the kind of content he does, and why he loves Vim. 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. Show Notes 00:35 Welcome 01:48 Guest introduction ThePrimeagen on YouTube ThePrimeagen on Twitch @ThePrimeagen on Twitter Why I Make Content 03:53 Dropping in on skateboarding Tony Hawk’s Pro Skater 05:43 What do you do? 07:17 How do you plan your live streams? 10:05 Sponsor: Hasura 11:27 Do you do interactive content via OBS on stream? OBS 16:22 What languages do you use on stream? Bun Zig 22:03 What do you try to build on stream? 24:53 Sponsor: StoryBlok 25:45 Why do you use Vim? 38:42 Do you ever have to do pair programming with Vim? 40:43 What kind of hardware are you playing with? Arduino 42:52 Supper club questions Lemur Pop Kinesis Advantage 2 56:20 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 answer your questions about picking the right tech stack, whether useEffect is still useful, benefit to use uses setTimeout, 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. 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. a0.to/syntax Show Notes 00:23 Welcome 02:39 What’s the best way of comparing the efficiency of object literals created from a factory function vs objects created by new’ing a class. Perf.link 06:54 How can I always see the full signature in VS Code? 10:40 What’s your process for picking a stack when starting a project? 14:41 Sponsor: Linode 15:23 Is snapshot testing really worth it? TS QuickFixes 20:54 What are your thoughts on ISR Incremental Static Regeneration? 25:20 Is useEffect public enemy #1? Goodbye, useEffect: David Khourshid 29:02 Sponsor: LogRocket 30:17 Is there any benefit to use uses setTimeout instead of setInterval? MongoDB Prisma 37:13 HTML to PDF a great solution I use is gotenberg.dev gotenberg.dev 40:12 Although async/await might make for code that is easier to grok, I find it worse for chaining functions. Pipeline Operator proposal 45:07 How do you guys stay focused for meaningful periods of time? 48:36 How should code formatters be configured and combined? Prettier ES Lint Editor Config No-Sweat™ Eslint and Prettier Setup 51:56 What’s your opinion on the latest Sveltekit changes with load, file based routing, and more? Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0 Astro Nano Store 55:53 Sponsor: Auth0 56:47 SIIIIICK ××× PIIIICKS ×××

In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes. 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:37 Sponsor: LogRocket 02:34 Sponsor: Linode 03:18 Standing and getting mic’d 04:20 What is Deno? Deno Changes 07:13 What were they doing before this? How could we support typescript without vendoring it? 21:22 Enterprise support and search 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 Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, 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. ⚡️ Show Notes 00:34 Welcome 03:23 Who is Steve Ruiz? Steve Ruiz 04:45 What is tldraw and what was your inspiration for it? tldraw Globs Excalidraw tldraw on GitHub 11:04 Why didn’t you use canvas? 16:15 How do you make an algorithm? Perfect Free Hand 19:33 Do you use pointer events? 23:44 What are you using to manage state? 29:42 How do you handle zooming? Creating Zoom UI 32:28 Where do you store the data for tldraw? Project Fugu 37:08 Why use indexdb? 38:05 Sponsor: Gatsby 39:49 How difficult was it to make it work on mobile? React Use Gesture 41:59 Does it work offline? 43:25 Supper Club Questions Monokai Pro Framer Classic Hacker News One Lone Coder on YouTube Displaced Gamer Coding Secrets 52:28 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Last Call BBS Shameless Plugs Steve: tldraw.dev 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 review the websites you’ve submitted including Ruben Oliveira, Adam Collier, Consolecmnd, Brad Preston, and more! 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. 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:16 Welcome 02:05 Setting up Wes’ new office 06:18 rubenoliveira.tech Ruben Oliveira 17:22 adamcollier.co.uk Adam Collier 22:56 Sponsor: Sanity 24:13 Consolecmnd.com ConsoleCMND 32:37 sz-development.tech SZ-Development 44:07 Sponsor: LogRocket 44:57 Richardcarrigan.com Richard Carrigan 49:52 Bradpreston.dev Brad Preston 54:18 Sponsor: MagicBell 55:17 Mikemneves.com Mike Mneves 01:05 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Packing Cubes Wes: Volt 1 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 margins. There are a lot of techniques for dealing with margins - padding instead of margin, only margin or padding bottom, Flexbox for everything, Grid for everything, or a spacing Div. Sentry - Sponsor Find out about Sentry’s Dex Conference. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. This is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. Whether you join us in-person in San Francisco or virtually from your home, you’ll have the opportunity to share your thoughts, engage with other developers, and walk away with your own personal madness sorting algorithm. 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:30 Welcome 01:39 Sponsor: Sentry 02:50 Sponsor: Auth0 04:25 Introduction to margins 08:28 Margin vs padding 11:46 New techniques 14:32 The spacer div 17:36 Why do it as a component vs a class? 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 Brandon Roberts about Appwrite, how Appwrite works, who it’s for, as well as his thoughts on Angular, Remix, and more. 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. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:36 Welcome 01:10 Who is Brandon Roberts? @BrandonTRoberts 02:00 What is Appwrite? Appwrite Getting started with Appwrite 03:17 What database layer does Appwrite use? 08:17 Is this working client side or server side? 09:54 Great docs and examples 12:55 How is deployment handled? Appwrite on Digital Ocean 15:30 Sponsor: Lightstep Incident Response 16:36 Appwrite’s focus on developer experience Appwrite to do with Svelte 19:56 Realtime database options with Appwrite 22:40 Cloud functions in Appwrite 26:01 How does Appwrite scale? Docker Swarm 27:28 Who is Appwrite for? Flutter 30:03 What is Ionic? Ionic 32:12 What do you enjoy about working in Angular? Angular 35:08 Sponsor: Hasura 36:30 Supper club questions Night owl Shameless Plugs Guest: React Router 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 the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, 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. 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:11 Welcome 04:34 What are threads? 06:12 Concurrent vs parallel 09:22 Green screen web cam example 13:02 Examples of what you could use web workers for Party Town Deno 19:52 Sponsor: LogRocket 20:42 Post Message API and Web Workers 25:57 What about WASM? 27:28 Offline sync 28:14 What are service workers? 31:20 How do you caching sites for offline use? 32:39 Web worker vs service worker 34:12 Sponsor: Sanity 35:40 What is the lifecycle of a service worker 38:18 Possible issues with Service Workers 42:46 Debugging service workers Svelte Kit Service workers Workbox 43:04 Testing and local development Service Workers notes from Wes’ Workshop 46:45 Sponsor: Freshbooks 49:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads Wes: Samsung Frame TV 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 past 499 episodes of Syntax, what have been the most downloaded episodes, their favorite episodes, and the sickest of sick pics. Sentry - Sponsor Attend Dex 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. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:28 Welcome 01:44 Sponsor: Sentry 03:28 Sponsor: Payments Hub 04:36 20 million! 05:57 Our current recording process Libsyn 09:09 Top 10 episodes 162 - The Fundementals JS 92 - React Hooks 158 - The Fundamentals HTML + CSS 66 - The React Episode 44 - How to Learn New Things Quickly 198 - How to Get Better at Problem Solving 20 JavaScript Array and Object Methods to make you a better developer 188 - The Fundamentals - Server Side 174 - How to Build an API 120 - Gatsby vs Next 18:00 Our favorite episodes 193 - Spooky Stories 400 - Horror Stories 2021 250 - Scott Teaches Wes Svelte and Sapper 60 - Undocumented Web 23:00 Questions from Twitter Twitter questions 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 the author of Svelte, Rich Harris, about what influenced the creation of Svelte, his thoughts on web components, the virtual DOM, why companies are switching to Svelte, and what’s next for Svelte. 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. ⚡️ Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:33 Welcome 02:10 Who is Rich Harris? Rich Harris on Twitter 02:55 What is Svelte? Svelte Vercel Svelte Kit 06:52 What influenced the template language for Svelte? 10:03 What do you use the const tag for? 10:49 Sponsor: Gatsby 12:04 What about immutability issues? 17:49 What about web components? 21:51 Why does Svelte not need the virtual DOM? 27:34 Sponsor: Lightstep Incident Response 28:45 What is your favorite part of working in Svelte? 32:31 Why are companies switching to Svelte? 34:35 What is the SvelteKit timeline? 38:52 What’s the next version of Svelte include? Motion 41:36 Any thoughts on new backend JavaScript environments? Web Interoperability 45:39 Supperclub Questions 52:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Rich: Mullvad VPN Shameless Plugs Svelte Origins 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 their thoughts on the different types of tech jobs you can get, and the pros and cons of each style of job in tech. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/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:47 The types of jobs Wes’ tweet about developer jobs 03:02 Our experiences 05:58 Tech company 09:46 Freelancer or Entrepreneur 11:14 What are the pros of working at a agency? 18:38 Cons to agency life 26:19 Sponsor: Lightstep Incident Response 27:49 Pros of tech company jobs 30:47 Cons of working at tech companies 37:46 Sponsor: Freshbooks 38:51 Pros of in house tech jobs 46:01 Cons of tech work 51:29 Sponsor: LogRocket 52:28 Pros of freelance or entrepreneur 57:20 Cons of entrepreneur life 00:03 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Wes: Soap pump Scott: Pro breaking tour 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 proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges. 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:11 Welcome 00:58 Sponsor: Sentry 02:17 Sponsor: Sanity 03:32 CSS @when and @else CSS When and Else @when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ } 05:42 CSS Grid 3 Masonry CSS Grid .grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; } David Desandro Rachel Andrew 09:00 CSS Caret CSS Caret 10:32 CSS Nesting CSS Nesting Syntax 343 CSS Nesting Postcss-preset-env 13:14 ENV Vars ENV Variables 14:58 Media Query Ranges MDN Media Queries @media (width @media (100px 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 Josh Larson from Shopify about headless ecommerce, including Hydrogen from Shopify, how integrations work with Shopify, and what the tech stack is behind Hydrogen. 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. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:38 Welcome 01:12 Guest introduction 03:16 What is Hydrogen from Shopify? Hydrogen Shopify Oxygen 11:23 Why would you want to go headless? 15:26 Sponsor: Hasura 16:56 Where does custom logic fit? 18:45 What is the stack behind Hydrogen? 24:16 Sponsor: Lightstep Incident Response 25:33 How much code is JavaScript vs React? 33:43 How do integrations work? 38:28 Supper Club Questions In Bed By 7pm VS Code Theme Zsh Hyper Laravel Vite Cloudflare Workers Rust Rust for JS 48:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Story Of by Vice Shameless Plugs @JPLHomer Shopify Editions 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 middleman for API fetching, when to introduce SvelteKit, generating PDFs serverside, trade offs of being an entrepreneur vs employee, 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. 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:18 Welcome 02:50 Is there a way to create a “middleman” to fetch data from an API once a day? Redis 06:53 Should I wait before introducing team members to SvelteKit? SvelteKit V1 issues 10:28 What options do we have for generating PDFs serverside? WKHTML to PDF Puppeteer PhantomJS html2canvas Generate Invoice Workers 15:47 Sponsor: Prismic 17:08 How do you say thank you to sponsors? 18:32 How would you compare the tradeoffs of working at a tech company vs. an agency vs. freelancing vs. entrepreneurship? 20:47 What’s the best way for an oldie like me to catch up? CSS Grid.io Modern CSS Layouts 26:08 I’m wondering what do you think about tRPC? trpc.io Create t3 app 29:00 Sponsor: LogRocket 30:03 PDF creator Cloudflare worker 32:50 How do you feel about keeping separate accounts for things like Twitter? 37:28 Does using prototypes mean you are not doing functional programming? 42:09 PHP vs JavaScript based CMS Ghost Keystone Strapi 45:15 Sponsor: Auth0 46:21 Why do you think this mindset that with age comes an inability to learn? Syntax 44 How to Learn New Things Quickly 51:32 Are there other payment providers you guys recommend or should I stick with Stripe and hope for the best? Stripe Paypal 56:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Literature and History Wes: Kitchen faucet 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 various web browers that might show up in your analytics and whether you need to worry about supporting them or not. 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:25 Welcome 01:19 Sponsor: Sentry 02:29 Sponsor: MagicBell 03:51 Big browsers and their engines 05:29 Cloaked browsers 08:16 What’s so great about Arc? Arc 11:33 JavaScript engines 13:30 iOS Browsers Open Web Advocacy 15:07 Android browsers 18:04 The rest of the browsers 19:24 Tor browser 20:20 Opera mini 22:48 UC browser 23:42 Opera mobile 24:57 KaiOS 26:26 Ringtone memories 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 Lee Robinson from Vercel about React Suspense, server components, the edge, and more! Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. 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:35 Welcome 01:34 Guest introduction LeeRob.io Vercel 02:25 Syntax hosted on Vercel 04:08 What is suspense? 06:50 Benefits of selective hydration 13:15 Sponsor: Lightstep Incident Response 14:24 How does suspense know you’re doing something inside of it? 18:02 How does this connect to server components in React? 22:00 How do we use this in NextJS? 24:32 NextJS routing future Layouts RFC 33:11 Will I ever be able to use web components inside NextJS? 36:12 Sponsor: Gatsby 37:14 What’s happening with the Edge? Edge Runtime 47:37 What should we use for databases? 50:39 Supper Club dessert questions OhMyPosh Hyper Warp Svelte Hackernews Reddit 58:57 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× AirPods Shameless Plugs Careers at Vercel 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 web dev wish list of things they want to just work already! 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:11 Welcome 02:20 Write Custom animation transitions 03:32 date input translate to JavaScript date 06:48 Smooth and animated drag and drop 08:35 TypeScript Interfaces are faster than Types 10:35 Request animation frame 12:52 Custom Elements / Web Components 13:52 Authentication Web Authentication API 16:12 Sponsor: Linode 17:48 useIsomporphic vs useLayoutEffect 19:48 useEffect dependency array 21:27 fragments without fragments 24:46 Overflow hidden without hiding shadows 27:11 Fluid text 28:52 Sponsor: Sentry 29:34 translate3d vs translate 30:59 Gradient borders 33:33 Independent transforms 36:16 animate height auto 38:40 Sponsor: Freshbooks 39:02 Auto synced deps when changing package file 40:36 Peer dependencies 42:32 VS Code Reload after plugins install is kinda annoying 43:04 Safari updates 44:20 Apps checking for passwords 45:02 File name casing as changes 45:56 Better sounding commit names 46:33 Test runner that is the same and just works 47:32 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Arc browser / Video Wes: Battery powered glue gun 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 the appreciation of coding projects that supposedly serve no purpose, but can be great ways to learn something new. 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. 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. Show Notes 00:39 I am excited about coding 02:40 Sponsor: LogRocket 03:58 Sponsor: Linode 04:24 Projects that serve no purpose Bookit 05:46 Scratching your own itch 10:06 Discount finder 11:20 Webcam or audio manipulation 12:43 TTFS Parcel Vite 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 Syed Balkhi about his experiences blogging and developing plugins in the WordPress ecosytem. 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. Sponsorname - Sponsor Show Notes 00:32 Welcome 01:52 Guest introduction WPBeginner WP Beginner YouTube CSS Tricks Smashing Magazine 04:33 What tips do you have for blogging and audience building? AnswerthePublic 09:09 How do you manage so many people? 13:07 What was your background before this all got big? 13:43 Sponsor: Hasura 15:01 How do you design your products? 18:40 YouTube, TikTok, and video 25:12 Why the WordPress hate? 29:03 What types of websites are being created in WordPress? Easy Digital Downloads WooCommerce MemberPress 34:13 Sponsor: Lightstep Incident Response 35:26 What schools are you building? Balkhi Foundation Pencils of Promise 40:51 Supper Club questions Copyhackers Swiped Uncanny Automator 53:07 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Streaks App Ready Player Two WP Forms AwesomeMotive 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 resolving node version errors, using social media, bundler for building React component, and how does Syntax get made? 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. 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 OhMyPosh OhMyZ.sh Warp 02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile? 07:50 Any advice for using social media to network? 16:44 What bundler are you reaching for when building a React component library? tsdx Vite 18:37 Do you have experience with optimizing third party scripts like Google Analytics? Partytown 21:37 What’s your opinion on a “offline-first” mentality? PouchDB CouchDB Supabase MongoDB Realm 25:09 Sponsor: Prismic 26:48 How do you make web components with Svelte? Build web components in Svelte Using custom elements in Svelte 30:35 When talking about “responsive” web design do people generally mean using flexbox or grid? Responsive Design at 10 Responsive Web Design A Book Apart - Responsive Web Design 35:24 Sponsor: Sentry 36:53 Do you have any tips for staying in React-land for just spinning up a fresh site quickly? 40:47 Who or what helps you produce and distribute the podcast? Lemon Productions Chris Enns on Twitter 46:08 Should a majority of _lodash functions be considered deprecated follow up 48:18 Sponsor: Freshbooks 48:52 Do you have any tips or tricks to deal with backend data date issues? 52:23 Is the “col” system the peak of how we handle CSS, or should we start using more built-in functions? 55:25 Why you you need CSS Color Functions at runtime instead of just pre-calculating these values once as a build step using LESS or SASS? 58:58 SIIIIICK ××× PIIIICKS ××× 03:12 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Can tumbler glasses Wes: Car Sound Deadener 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 Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What’s on Bun’s roadmap? And why do we need another JavaScript runtime? Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:21 Sponsor: Freshbooks 02:07 Sponsor: Lightstep Incident Response 03:20 What is Bun? Bun Deno 08:20 Why is Bun so fast? Zig 12:32 Module support 15:11 What’s not implemented yet in Bun? What’s not implemented in Bun yet 17:01 Config file in toml 18:08 Bun roadmap Bun roadmap 20:27 Why do we need another JavaScript environment? 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 Adam Cowley about how Neo4j Database can help when working with data for your next app. 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. ⚡️ Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:15 Welcome 01:24 Guest introduction 03:15 Browser innovation and testing 05:01 What is a graph database? Neo4j Cypher Sanity Groq 08:11 Is there a specific type of data that works best in a graph database? 11:57 Sponsor: Lightstep Incident Response 13:14 What’s AuraDB vs Neo4js? 15:01 Whiteboard friendly data model 19:52 How are GraphQL and graph related? 23:08 Can you sync with MongoDB? 24:41 How do you pull data into a div on the web? 29:19 Why are you used for data science a lot? 30:43 Sponsor: Gatsby 31:51 Is visualization an important part of Neo4js? Neo4j Bloom 36:01 Do you have to think about indexing with graph databases? 39:43 Are there uses Neo4j isn’t as good for? 40:22 Do you have to cache queries? 41:26 Dessert questions Intellijet Idea Cobalt 2 Theme 50:36 Shameless Plug Neo4j Desktop Neo4j Cloud 54:45 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Hue Lights 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 coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/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. 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:07 Welcome 01:56 Functional vs object oriented 03:49 Interfaces vs types 05:38 Tabs vs spaces 07:02 Semicolons vs no semicolons 08:10 Let vs const 09:33 Do you explicitly type or allow TypeScript do it’s magic? 11:26 Naming variables Naming convention for programming 15:13 Methods of looping 18:03 if statement curlys 20:57 Naming files 24:46 Inline testing vs running test as a process 25:31 Sponsor: Freshbooks 26:37 CSS property:val; or property: val; 27:40 CSS nesting? 29:49 Alphabetizing CSS properties 31:11 Rems, Ems, PX, Etc… 33:37 How do you center something in CSS? 35:22 How do you make something 100% height? 36:52 Sponsor: Sentry 37:30 Should comments exist? Better Comments Wes’ custom parser for VS Code Todo Tree 42:31 Creating HTML 45:28 Components in app or in isolation? 47:41 Sponsor: Sanity 48:45 Single component per file vs multiple Storybook 50:22 Naming components 51:19 General stuff 53:55 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Scott’s iPad case for kids Wes: Garbage can with custom bags. 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 try to stump each other with coding interview questions like what is a higher order component? What is functional programming? 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. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:26 Welcome 01:47 Sponsor: Lightstep Incident Response 03:00 Sponsor: Sentry 04:10 What is a higher order component? 05:34 What is functional programming? 09:00 What’s the purpose of cache busting and how do you achieve it? Wes’ course for Beginner JavaScript 10:37 What is short circuit evaluation? 13:19 What is a closure? 15:49 What is the reason for wrapping the contents of a JavaScript source file in a function that is then invoked? 17:30 Can you describe how CSS specificity works? 20:15 How does prototypal inheritance differ from classical inheritance? 23:56 What is the difference between a parameter and an argument? 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 Kristi Perreault of Liberty Mutual about why they’re using serverless functions, what languages they write in, managing security and montoring, and Kristi’s journey into tech as a career. 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. Stack Overflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:33 Welcome 03:24 Guest introduction @kperreault95 Kristi Perreault on Dev.to Kristi Perreault AWS Hero Liberty Mutual 04:55 Developers at Mutual Liberty 07:05 What did you do before serverless functions? 08:36 Why are you using serverless functions? 12:39 What languages are you writing for serverless functions? 15:53 Sponsor: Hasura 17:22 Where does all the code live? 20:58 AWS CDK AWS CDK CDK Workshop 25:55 Sponsor: Lightstep Incident Response 27:07 How did you get into tech? 31:44 How do you organize all the functions? 33:51 How important is security? 35:23 What are IM roles? 36:16 How do you deal with spiking and monitoring? Datadog Splunk 41:20 Sponsor: Stackoverflow Podcast 42:02 Have you used Edge functions? 42:50 Supper Club Questions Off by None newsletter Ready Set Cloud ××× SIIIIICK ××× PIIIICKS ××× Loki on Disney+ Shameless Plugs Real World Serverless Podcast Serverless Denver Group AWS Summits @ServerlessCO Kristi Perreault on Medium 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 peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, 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:03 Welcome 01:53 Configuring home internet routers 04:42 Scott’s Home Assistant update Mushroom Theme 07:52 Could you explain to me peer-dependencies and how does it work? 13:24 Using Vitest do you still have to transpile code? 16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD. 18:49 How can I update the “updatedAt” field of the document on every save automatically? 20:40 What is aggregation, and when do you use it? 25:33 Sponsor: Prismic 27:27 How does NVM relate to PNPM? pnpm nvm 30:45 I’m looking to upskill from front-end JavaScript? 33:53 Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly? Creating a private npm package 37:51 Sponsor: LogRocket 39:14 Should a majority of lodash functions be considered deprecated? angus c just 42:36 Please do an episode on programming/learning with ADHD. 44:04 Should I still be putting images in sprites? 49:20 Does Mux have a simple mechanism for adding auth to each video or group of videos? Mux Create playback restriction 53:48 Sponsor: Sanity.io 55:02 Is there copyright issues with using public APIs? Moneypuck 59:38 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Toto Bidet Wes: Sodastream 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 clamp and interpolate and how you might want to use them in your next 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. NAME - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:25 Welcome 00:52 Sponsor: Sentry 01:31 Sponsor: Payments Hub 02:40 Topic introduction 05:05 What is Clamp? CSS clamp: font-size: clamp(1rem, 10vw, 2rem); JavaScript Clamp: const clamp = (num, min, max) => Math.min(Math.max(num, min), max) 09:12 What is Interpolate? D3 Interpolate 12:56 Interpolate in colors 14:37 Quantize D3 Quantize 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 Pokey Rule about using his voice to code, and the current state of voice coding software. Stackoverflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. directus - Sponsor Directus is an open-source data platform that instantly layers on top of any SQL database. Our Data Engine empowers engineers with dynamic REST+GraphQL APIs, workflow automation, built-in auth, caching, and asset transformations. And the included Data Studio democratizes your database, allowing even non-technical users to browse, manage, and visualize database content through a no-code data collaboration app. Get started in minutes with a free Directus Community Cloud project. Show Notes 00:33 Welcome 01:35 Guest introduction Con 2021 - Cursorless: keyboards and mice are sooo last year!! by Pokey Rule Emily Shea 05:12 How does coding with your voice work? Talon Voice Cursorless Talon 09:45 How do you handle triggering wrong words? 11:41 Sponsor: The Stack Overflow Podcast 12:26 Example of voice coding Parrot 14:21 What are the noises you make for? 24:29 Working on multiple lines at the same time 27:37 How do you decide where the hats go? 31:18 Sponsor: directus 32:59 What is the community of users like for this? Tree Sitter “Incremental, zero-config Code Nav using stack graphs” by Douglas Creager 35:20 Does eye tracking work? 36:48 What kind of mic do you use? DPA Microphone The Voice Book 39:25 Supper Club questions Dark Abyss VS Code theme Kinesis Freestyle 2 Charybdis Nano keyboard Nexstand Arxiv Sanity Subvocal Recognition Imagen Research Midjourney 54:11 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Git Imerge Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Pokey: YouTube channel, Sponsor Pokey on GitHub 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 experiences speaking at conferences, why they’ve done it, how they prepare talks, and tips for anyone interested in wanting to give talks. 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:02 Welcome 01:38 Stanley Cup update 03:13 Legoland update 04:09 Topic introduction Nicole Sullivan Tweet looking for questions 05:03 Why speak at conferences? 08:56 Travelling for free 09:50 Getting paid to speak at conferences 12:23 Doing in person workshops 14:55 How do you get into speaking? 19:25 Meetups 20:30 Sponsor: Linode 21:15 What should you speak about? 26:27 Something you did a deep dive on 29:21 Sponsor: Freshbooks 30:04 Flight protection and travel insurance 32:59 Idea: update to a library 33:28 How to get conferences to invite you to speak? 36:03 How do you prepare for a talk? 42:40 How to find conferences looking for speakers 44:09 How to create a topic that will get picked 46:59 Sponsor: Sentry 48:06 Software for your slides Slides.js Slides.com MDX Deck Notion Figma Google Slides Lydia Hallie Keynote 56:28 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Risk for iOS Wes: Barrina LED T5 Integrated Single Fixture 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 CSS color functions, and tips for viewing the different options and ways of presenting color that are coming. 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. Show Notes 00:25 Welcome 01:35 Sponsor: Linode 02:22 Where the CSS spec for Color functions are at the moment 05:13 New CSS Color mix function 10:29 Color for the color challenged 12:53 Color contrast function 15:06 Programatically alter colors Anyone have a really great CSS Variables color system strategy? Color for the color challenged Better color tools the color-contrast() function Benjamin Moore Paints as CSS Colours 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 Shawn Wang about his thoughts on developer experience, why DX is important, and the importance of learning in public. 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. 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:32 Welcome 01:56 Guest introduction swyx.io Why Temporal? 06:09 What is Developer Experience? Sarah Drasner 08:35 Is VS Code considered DX? 09:28 Why is internal DX important? Vercel NextJS 11:44 Is DX helpful to small organizations as well? 15:27 Parsimony Parsimony 16:43 Is productivity the main focus? 21:09 Sponsor: Hasura 22:48 What are your thoughts on React? 27:31 Designing for API success 30:44 Sponsor: LogRocket 32:07 What is external developer experience? 36:05 Learning in public 40:46 Supper Club questions dx.tips Retreon VS Code Theme Agnoster ZSH Theme freeCodeCamp Frontend Masters QConf Learn in Public ××× SIIIIICK ××× PIIIICKS ××× Scott: The Stormlight Archive 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 their tips for better communication in email, Zoom calls, code reviews, or asking for help. 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:10 Welcome 01:39 Furnace wiring fun Ecobee Tweet asking for communication tips 05:37 Email communication SavvyCal Calendly 15:07 Recognizing a big ask Simeon Griggs - How to ask for things 24:01 Sponsor: Sentry 25:52 Code review communication 30:39 Sponsor: Sanity 32:22 Sharing information with a video 35:42 In person or one on ones 39:36 Video calls Storyboard.fm 40:54 Realize it’s ok to stop talking 42:27 Sponsor: Auth0 44:13 Tips from Twitter 53:08 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Drachinifel Wes: Lepy LP-2020A Hi-Fi Stereo Audio Shameless Plugs Scott: LevelUp Tutorials on YouTube 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 Browser CSS Page Transitions API proposal and what features it opens up for developers 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. 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 WICG Shared Element Transitions 00:21 Welcome 01:33 Sponsor: Prismic 02:43 Sponsor: LogRocket 04:18 Browser animations on the web vs native apps 06:15 What is the targeted use case for it? 06:56 Shared Element to Root Transitions 11:14 Entry and Exit 17:33 How to enable this in Chrome Example Code Shared Element Transition history Sarah Drasner’s demo async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // Set up animations using WA-API on the next frame. requestAnimationFrame(() => { document.documentElement.animate(keyframes, { ...animationOptions, pseudoElement: "::page-transition-container(message)", }); }); // Note that when this callback finishes, the animations will start with the tagged elements. }); } 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 Tim Leland - developer of browser extensions like WeatherExtension and Link Shortener Extension. Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time. WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more! Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:33 Welcome 02:21 Guest introduction @tim_leland TimLeland.com WeatherExtension Link Shortener Extension 03:40 Why develop browser extensions? 07:58 How did you market your extensions? 09:43 Where is a Chrome extension running? Caddy 14:29 What’s your URL shortener extension? 18:50 OneLink service 20:30 SSL Domains 21:35 Sponsor: The Postlight Podcast 23:00 Maliciousness with URL shorteners 28:26 How do you come up with ideas? 30:03 Running Chrome extensions as Firefox extensions 34:03 Does blogging still work? 36:38 Sponsor: Sendlayer 37:53 Supper club questions Tim Leland /uses/ 45:12 ××× SIIIIICK ××× PIIIICKS ××× Tchibo Coffee machine 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 Tasty Treat, Scott and Wes talk about the current state of home automation, and the kinds of software and hardware they’re using in their homes to automate their lives. 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 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome Syntax Ep181 Automating Stuff 02:18 Protocols 07:35 Software Homebridge Hoobs Home Assistant 11:28 Using Homebridge 16:51 Home Assistant vs Homebridge 24:35 Home Assistant automations 27:26 Wyze cams 33:13 Sponsor: Sentry 34:31 Hardware Philips Hue Leviton Synology Node-RED Docker Wyze Bridge U-Tec 38:00 Bulbs 40:24 Buttons Lutron Aurora Smart Bulb Dimmer Switch Flic Button 42:53 IR Blasters 45:57 Sensors 47:56 Motion sensors 52:05 Sponsor: Auth0 53:28 Switched switches 57:36 Sprinklers 58:54 NFC /r/Homeassistant Shelly 01:04:03 Sponsor: Freshbooks 01:05:01 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Severence on Apple TV+ Wes: INKZALL Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos 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 episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them? 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.io - 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:25 Welcome 01:14 Sponsor: LogRocket 02:24 Sponsor: Sanity 04:19 What are viewport units? The Large and small and dynamic viewports 05:22 What are the new viewport units? Large small and dyanmic viewports 07:57 What’s small and large? 11:52 How do viewport units help developers? 12:39 What about the keyboard on mobile? Keycode.info 16:37 When can we start using new viewport units? 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 edge functions and Deno with Eduardo Bouças of Netlify. 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. Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time. WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more! Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:36 Welcome 02:31 Who is Eduardo? EduardoBoucas.com @eduardoboucas 04:29 What is a serverless function? 06:42 What is the edge and an edge function? Edge Functions Explained Deno 08:41 Sponsor: Hasura 09:18 The internet is global, and server locations matter 17:09 Chaining multiple edge functions 20:18 Sponsor: WP Mail SMTP 21:18 Why use Deno? 25:06 What are the limitations of using Deno? 28:12 Why not run NodeJS servers on the edge? 30:02 Do you see a future where people are writing packages that work anywhere? 32:00 Sponsor: Postlight Podcast 32:53 What about databases and serverless functions? Planetscale 38:14 What language does Netlify use to write apps in? Netlify Edge Handlers 44:08 Supper Club questions Warp S Town Podcast 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 answer your questions about headless WordPress, Regex, their health and fitness, CSS custom properties in media queries, 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. .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. Show Notes 00:10 Welcome 03:30 If I host a NextJS app on Digital Ocean, should I use a Digital Ocean database? 09:14 Will either of you ever do a regex course? Regex101 13:58 Is it possible to use the WordPress users database as the same database that the app uses? WPGraphQL 18:46 Sponsor: Sentry 19:43 How is health and fitness going for the both of you? 26:08 Does Wes know who Gendo Ikari is? 27:36 Dart popularity follow up 29:40 Is it vital that I should learn another programming language? 33:42 Sponsor: Sanity 34:54 If I’m trying to get my first job in web development, do I need to be familiar with design software? Figma 40:01 Thank you for the confidence to apply for a web dev job Syntax 463 with Tom Preston-Werner 41:55 What advice will you give in terms of setting up core important things around network, state management, folder structure? 45:37 .TECH Domain Names 46:22 I just had an interview with a “major tech company” and your article on using string templates was really helpful. Template Strings 48:43 If 80% of the time ew need to use preventDefault on form submission, why don’t the simply change the HTML spec? 50:01 What’s the rationale for not supporting CSS custom properties in media queries when using max/min width? CSS Env MDN CSS Env 55:37 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: * You Must Remember This Podcast Wes: Tools 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 CSS selectors :has, :where, and :is. 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. 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 01:19 Sponsor: MagicBell 02:31 Sponsor: LogRocket 03:40 Don’t say stupid 05:03 :Has MDN :Has // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find Hi // would not find hi 06:13 Jargon check 11:01 Some examples 13:25 Nest navigations 13:51 Can I use it? 15:52 Is and Where MDN :where In the past we would write header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } :where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer :where(header, main, footer) p:hover {} Also super handy in avoiding css blocks being ignored for unsupported features. // Doesn't work div:has(p), div:some_new_selector(p) // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p)) When to use :Where 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 Connor Finlayson about his experience building and teaching no code projects. Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster. You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code. Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube. Show Notes 00:38 Welcome to Syntax 01:54 Guest introduction Unicorn Factory ConnorFinlayson.com Connor’s YouTube channel 04:49 What is no code? 10:57 Is no code going to replace programmers? 14:57 Sponsor: Postlight Podcast 15:59 What are your favorite tools for no code? Zapier Webflow Make.com Airtable Memberstack Jetboost Bubble 19:23 When do you need to use real JavaScript? 23:23 Where do you find information about no code? 25:26 Sponsor: SeedProd 39:25 How do you handle version control? 43:26 Are there native apps in no code land? Notion Editor X 46:16 What is AirTable? 49:36 Cost of no code tools 52:45 Sponsor: Strapi 53:45 Supperclub Questions 06:42 Shameless Plugs CodeMeetsNoCode 09:49 Sick Picks Flowbase Relume 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 are live from Reactathon 2022! 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. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes Live video version 00:32 Welcome 04:10 Hot Take Tweets What is your JavaScript Hot Take or unpopular opinion? 05:42 Semi colons are not optional 06:11 For loops are not needed 07:19 People forget about ES Harmony 08:11 Sponsor: Sentry 09:23 A good website should function without JavaScript 10:28 Classes were a mistake 10:54 Stay as close to the platform primatives 11:36 TypeScript is overrated and overhyped 11:50 Kickin it old school PNG Fix MM Swap image Rounded Corner images (sliding Doors) var that = this; IE CSS Hack Test for Opera var test = /^function \(/.test([].sort); 25:09 Sponsor: Payments Hub 26:29 Syntax Error Mercurius Library 31:19 JS or NAY-S 39:02 Sponsor: Freshbooks 39:23 Q&A Syntax episode with Josh Wardle 39:57 Using Array methods or for loops 41:12 What web tech is overhyped and what’s under hyped? 43:01 Would you rather use Dvorak or Mac butterfly keyboard? 43:41 Name all provinces and territories in Canada 44:39 Fav Syntax.fm episode 45:38 How did Wes and Josh meet? 46:52 What’s your favorite Trader Joes snack? 47:29 Would you hire a European or American developer? 49:04 How would you validate a product idea for Saas business? 49:48 What podcasts do you listen to? Steve O Podcast 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 ways to prevent malicious people from using or abusing your app. 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. Show Notes 00:26 Welcome 01:04 Sponsor: Linode 02:06 Sponsor: Sentry 02:59 What kind of bad things can happen to your application? 06:24 How do you stop bad actors? 12:20 Nonce tokens 14:10 CSRF CSRF Explained 14:50 Captcha hCaptcha 17:06 DDOS Cloudlfare DDOS 17:38 Ban known bad ASNS 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 Anselm Hannemann about burning out, trying out gardening, and how getting away from the screen can help restore your creative energy. 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. Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at Strapi.io/demo, find your missing content workflow piece on our marketplace, and learn more about Strapi and how it help you on our Youtube. SeedProd - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, SeedProd, a fast growing drag & drop WordPress website builder that helps you create custom WordPress themes & page layouts without any code. Over 1 million websites are using SeedProd to build WordPress sites faster. You can start with one of their hundreds of pre-made website templates to save time or use the blank canvas to build a no-code website. It has built-in email marketing integrations, dynamic personalization, and many other powerful features to help you build a fast WordPress website without writing code. Try SeedProd Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:39 Welcome 01:58 Guest introduction HelloAnselm.com Anselm on Twitter Web Development Reading List Newsletter 10:04 Doing things yourself as a form of therapy 14:33 Sponsor: Hasura 16:34 Rules for digital usage? 19:25 How do you learn you’re burned out? 26:30 Sponsor: Strapi 28:10 Gardening Gardening site Garden on Instagram The Post Apocalyptic Inventor 29:46 What do you feed your plants? 34:09 Irrigation issues 35:52 Sponsor: SeedProd 38:03 Dealing with weeds 40:54 What about chickens? 44:20 Farming as a business 45:39 Incorporating tech into the gardening 54:06 Supper Club Questions Today I Learned Stefan Judis Web Design Weekly 59:09 ××× SIIIIICK ××× PIIIICKS ××× 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 all about how they use Git inside of VS Code, extensions they use, and the various ways to interact with Git in VS Code. 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. SPONSOR - 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. SPONSOR - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:21 Recording Syntax in Riverside Riverside 01:22 Welcome 04:57 CLI vs VS Code VS Code 07:27 Git Jargon 11:50 UI tools we’ve used Git Tower Git Kraken GitHub for Desktop iTerm Warp Git SCM 14:09 Ways to interact with Git in VS Code 19:41 Source control tab 26:28 Sponsor: Linode 27:47 File History 30:29 Diffing or Compare 36:24 Conflict resolution 42:56 Automation with post-commit commands 46:10 Sponsor: LogRocket 47:14 Extensions GitLens Git History Git Graph Conventional Commits 53:59 Git config tip 55:24 Sponsor: Freshbooks 56:02 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Espanso Wes: AirPod cleaning kit 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 answer a question about caching, cache control headers, an explanation of the fields for caching. 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. 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 Time to live calculator Reminx Conf Opera The United States of Insanity - Official Trailer 00:24 Welcome 01:11 Sponsor: Sentry 02:28 Sponsor: LogRocket 03:08 My struggle has been with caching, cache control headers and would love a better explanation on some of the fields? 04:48 What is a header? 06:05 What is caching? 08:21 Time to live (TTL) 09:08 Benefits of a cache 10:03 Specifying how long to cache 11:06 max-age 12:45 stale-while-revalidate 16:17 stale-if-error 16:54 must-revalidate 17:21 private 18:03 immutable 19:29 no-transform 20:45 Cache Control Request Directives 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 Tom Pretson-Werner about his work on RedwoodJS, the importance of documentation, and the new Redwood Startup Fund. AIOSEO - Sponsor Our Sponsor for today’s episode is a popular WordPress plugin, AIOSEO, also known as All in One SEO for WordPress. It’s becoming one of the most powerful SEO toolkit and is now used by over 3 million websites to improve search rankings. Shipshape (Whiskey, Web and Whatnot) - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Show Notes 00:34 Welcome 01:36 Guest introduction Tom Preston-Werner on Twitter Kai’s Power Tools 04:23 Math is weird 07:21 User interface design 08:53 Sponsor: AIOSEO 10:24 What is RedwoodJS? RedwoodJS Chatterbug 15:31 Is JavaScript the stack you should be using these days? 18:40 Freedom vs decisions in software Where Good Ideas Come From 23:10 RedwoodJS docs and video strategy RedwoodJS Docs Readme Driven Development 29:13 The tech behind RedwoodJS Apollo Storybook 36:20 Sponsor: Shipshape (Whiskey, Web and Whatnot) 36:58 Redwood Startup Fund The Redwood Startup Fund 42:28 Supper club questions VS Code Netlify Hacker News RedwoodJS on Discord RedwoodJS Discourse RedwoodJS on Twitter 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 through TypeScript tooling, build tools, configs, and editors. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:08 Welcome 01:57 Tooling tsc esbuild swc bun Zig 13:45 LogRocket 15:01 Server side or node-ish Deno ts-node wds 26:09 MagicBell 27:42 Build tools Vite Parcel Nextjs Svelte Kit Rome 33:25 Configs tsconfig typescript-eslint 39:08 Sponsor: Freshbooks 40:00 Editors VS Code Webstorm 44:58 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Tonie Wes: Burst Toothbrush 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, Scott talks about his new office setup where he records videos and podcasts, writes codes, and gets his steps in. 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:15 Welcome 01:24 Office ideas Heat pumps on Technology Connections Neewer lighting 05:00 Sponsor: Sanity 06:10 Sponsor: Sentry 07:37 Levelup Lodge tour 09:40 Lighting 13:57 The desk Karlby Countertop Fully Jarvis legs Desk Haus 19:32 Audio gear M-Audio BX8 Gik Acoustics Nero Scarlett 2i2 Caldigit TS3 Plus Electrovoice RE20 Cloudlifter cL1 DBX 286s Sony Alpha 7 III Audeze LCD 1 25:25 Tech setup 33:00 Misc items 35:43 Movie posters Shaw Brothers posters 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 Jared Palmer about Turbo Repo, how it fits in your tech stack, and what it was like being acquired by Vercel. Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Show Notes 00:35 Welcome Jared Palmer 02:15 What is Turbo Repo? Turbo Repo Vercel tsdx 03:27 Where does Turbo Repo fit in your stack? 06:04 What are Google, Meta, or Twitter doing? 15:35 Sponsor: Whiskey, Web and Whatnot 16:45 What’s the cost of adding Turbo Repo to a project? 21:19 Changing based on environmental variables 23:18 Does this replace how you define your workplace? 24:08 How do you share the cache? 25:25 What don’t you cache? 27:35 What about Gatsby images? 28:44 Can Turbo Repo help with re-running compiles? 36:54 Supper Rapid Fire Questions Oceanic Next GitHub Dark Kotlin 52:47 Selling Turbo Repo to Vercel 55:49 Shameless Plugs 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 potluck episode of Syntax, Wes and Scott answer your questions about protestware, NoSQL, Next.js, the Syntax.fm website, ESM, Jest, 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. 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:10 Welcome 01:30 What are the good reasons to use nextjs apart from personal preference? 05:15 How did you decide to build Syntax.fm? Uses.tech 09:09 Why does my M1 Mac feel slower than my Intel Mac? 14:44 Do you alphabetize your larger javascript objects by key name? 17:14 Sponsor: Prismic 19:06 Why did you choose noSQL database over SQL databse? 25:13 What does it mean to support ESM? 30:23 Sponsor: LogRocket 31:35 Are open source maintainers doing harm by inserting protestware into packages? Protestware found lurking in popular npm package 40:30 Should I write the game logic on the backend or on the frontend? 46:30 Sponsor: Auth0 48:20 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Eons Mysteries of Time podcast Wes: Mr Bio Multi cable 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 why we need Web Interop? Yet another standards body? Our thoughts on Serverless, Edge Compute, 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. Show Notes 00:23 Welcome 01:25 Sponsor: Sentry 02:25 Sponsor: Sanity 04:10 The Syntax Lift adventure 06:04 A new Community Group for Web-interoperable JavaScript runtimes. 07:07 JavaScript environments 09:19 What’s bun? Bun 13:28 Are we excited about this? 16:27 What’s the future of this? 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 Victor Savkin about NX Monorepo development. Whiskey Web and Whatnot - Sponsor Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, and of course Wes Bos! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, Cincinnati Chili, the best casseroles, and of course whiskey! Visit whiskeywebandwhatnot.fm or find them wherever you listen to podcasts. Strapi - Sponsor Strapi enables developers to build projects faster by providing a customizable API out of the box and giving them the freedom to use their favorite tool as it has both REST and GraphQL endpoints. Strapi is extensible and frontend agnostic, built to cover all your content use cases. Give Strapi a try at strapi.io/demo, find your missing content workflow piece on our marketplace,and learn more about Strapi and how it help you on our Youtube channel. Show Notes 00:29 Welcome 02:42 Guest introduction 04:07 What tools did Google use? 10:49 What do bigger companies use for version control? 14:40 What is Nx? Nx 21:02 How does Nx help you upgrade projects? 27:42 Sponsor: Whiskey Web and Whatnot 28:33 How does Nx fit into the existing tooling? 37:27 Sponsor: Strapi 39:02 Caching and skipping builds 44:50 The problem with caching 48:44 Is it used for images or video? 51:40 Small projects can benefit as well 53:13 Lightning questions Happy Hacking KB IntelliJ LunarVim VS Code 02:23 Shameless Plugs 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 10 browser API’s you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, 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:13 Welcome 01:05 Dishwasher talk 04:30 getUserMedia Hair.WesBos.com Javascript 30 07:22 FileSystem Level Up Tutorials: Browser APIs Electron 12:50 Geolocation 15:07 Sponsor: Prismic 16:41 Permissions 22:36 Web Animations Web Animations API Framer Motion Motion One 26:31 Resize Observer Resize Observer API 29:33 Sponsor: LogRocket 30:45 Clipboard Clipboard API 34:10 Web storage Web storage 37:11 Sponsor: Freshbooks 38:09 SpeechSynthesis 41:32 SpeechRecognition 46:14 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: RCA to HDMI adapter Wes: SlimLED 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 TypeScript Fundamentals, including narrowing, discriminating unions, and type guards. 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. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:24 Welcome 01:35 Sponsor: Sentry 02:23 Sponsor: Payments Hub 05:21 Intro to TypeScript fundamentals 06:28 What is Type Narrowing? 09:32 typeof 11:58 instanceof 13:29 Custom typeguards 16:12 this is 17:59 discriminated unions 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 what edge functions are, the upsides and downsides of edge functions, and what they’re used for. 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:10 Welcome 01:56 A big announcement 04:33 What is the Edge? 08:27 The upsides of edge functions 12:13 Cold start 18:21 Sponsor: Linode 19:24 What are downsides of edge functions? 27:27 Sponsor: LogRocket 28:35 What is the use case for an edge function? 34:52 Authentication 37:23 Caching 40:51 Are there flavors of edge functions? 44:00 Sponsor: Freshbooks 46:06 What are edge functions not used for? 47:39 What companies offer this? 50:58 Sick Picks Netlify announcing serverless compute with edge functions Syntax 310 Serverless, Deno and TypeScript with Brian Leroux Vercel Middleware AWS Lambda ××× SIIIIICK ××× PIIIICKS ××× Scott: Patented History of Innovations Wes: Fastmov Precut Parchment Paper 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 why people still use Axios over Fetch, and why people wouldn’t use Axios. 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. Show Notes 00:22 Welcome Twitter thread of questions from listeners 01:25 Sponsor: Linode 02:07 Sponsor: Sentry 03:04 What’s Axios? Syntax 224 - Serverless Cloud Functions 04:10 Why someone wouldn’t use Axios? 07:06 Interceptors 09:30 Catching expired JWT and renewing it 10:26 Upload or download progress events 12:03 Valid status API 13:45 Defaults 15:32 Custom timeouts 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 ask each other hiring questions asked of JavaScript developers in job interviews. 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. 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 JavaScript Interview Questions 00:13 Let’s get STUMP’d 01:08 Cleaning out the garage 05:05 What are 4 methods available on weakmap? 07:07 How do you make an object iterable in JavaScript? 09:29 How do you make the first letter of a string into uppercase? 10:26 What is the typeof operator? 11:53 What are classes in ES6? 13:21 How do you enumerate key and value pairs of an object? 15:44 Kontent by Kentico 17:08 What is an event queue? 21:05 Why do you need JSON? 24:49 Why do you need a promise? 25:45 Explain the range overflow property 28:21 How do you return all matching strings against a matching expression? 30:14 Sponsor: LogRocket 30:51 What is a thunk function? 33:46 Can you redeclare let or const variables? 34:17 What are enhanced object literals? 35:56 What is the difference between call, apply, and bind? 38:52 Sponsor: Freshbooks 39:57 What are benefits of modules and why would you need them? 43:50 ××× SIIIIICK ××× PIIIICKS ××× 48:47 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Who ARTed Podcast Wes: Patio furniture 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 coupon engines they’ve built and use on their courses. 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:26 Welcome 01:12 Sponsor: Prismic 02:32 Sponsor: LogRocket 04:06 What we use for coupons Stripe Braintree 06:27 Structure of our coupons 10:43 Products and carts 13:59 Country validation 15:11 Affiliate codes 16:36 Chaining rules together 19:41 Tracking coupons 20:54 Automatically applied coupons 22:12 Quick tips for coupons 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 working on a team, dealing with imposter syndrome, animating on the web, using the table element, landing pages for apps, and building full stack apps with NextJS. 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:10 Welcome 01:05 The mustard bandit podcast 02:54 How can Developers work with designers and Product managers seamlessly? 06:37 How do I deal with imposter syndrome? 10:46 Any good coffee shops in Denver? 17 of Denver’s Best Coffee Shops 11:38 Do you use Table element or CSS Grid for tabular data? 13:18 How do you manage animations without a library? Greensock 17:05 Sponsor: Sentry 18:01 What do you use for icon libraries? Icons8 Font Awesome Icons React Icons Flat Icons 25:10 How do you unregister the service worker to clear site data? Syntax 346 - Selling T Shirts 29:15 Sponsor: Sanity.io 30:47 Since NextJS has API routes, could you build a full-stack application using just NextJS? 35:41 Do you keep your landing pages and home pages seperate from your app? 37:35 Where’s the line for moving something hosted on a developer server to moving it to production? CodePen Replit Netlify 41:44 How do you deal with ignorant or demanding clients? 45:54 As a JS/TS developer, which other language should I learn to compliment my skills? Rust PHP 50:58 Sponsor: Freshbooks 51:49 ××× SIIIIICK ××× PIIIICKS ××× 58:41 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Glass Drinking Straws Wes: Lawn Lift Shameless Plugs Scott: LevelUp Tutorials Wes: 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 Svelte Cubed and working in 3D in the browser. 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:21 Welcome 01:00 Sponsor: LogRocket 01:41 Sponsor: Prismic 02:45 Intro to 3D in the browser Svelte Cubed Getting started with Svelte Cubed 03:49 Declarative vs imperative 07:43 How does Three.JS work? ThreeJS 12:28 Orbit controls 15:47 Svelte Cannon Svelte Cannon Blender 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 multi tenant apps, JS sprinkles, kids coding, server error handling, 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:26 Welcome 01:01 Buying a new car Hyundai Ioniq 5 08:20 What would you recommend old-school jQuery folks, external agency vendors, and modern devs that want to work together? 11:59 Are React dumb/presentational components only possible at the leaf components of an application? 15:35 How old should a kid be to learn programming? Scratch Minecraft 20:28 Sponsor: Sentry 21:34 Without pointing me to a paid error program like sentry, how do you guys manage this rabbit hole? 27:05 How do you judge how much server you need? MongoDB Atlas Google Pagespeed 31:57 For websites that aren’t applications how would you best organize your JavaScript? 35:17 How do you diagnose slowdowns and bad user experience? 41:31 Sponsor: Sanity 43:13 Do you default export your React components when using TypeScript? 47:42 Besides web sockets or polling at a predefined interval and refreshing the page to fetch new data, can you think of any Next-specific solutions or recommend any packages that could help make this relatively simple? Supabase Firebase Meteor 52:13 We should look into ‘tunneling’. 56:42 How do I build a multi-tenant app? Caddy Server nginx Approximated.app Vercel offers this via a middleware Cloudflare SSL for SaaS 00:56 Sponsor: Freshbooks 01:34 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: Vivid Wes: Right angle Lightning cables 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 their tips and tricks for being consistent if you’re trying to create. 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:44 String cheese theory 01:49 Sponsor: Sentry 03:41 Sponsor: MagicBell 05:26 Being consistent is the key to success 07:12 Commit to it 09:13 Plan and schedule 13:42 Being accountable to someone 18:11 Break things down into smaller tasks 20:25 Measure goals 22:14 Revise the plan 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 process for making content on the internet for their YouTube channels, blog posts, courses, conference talks, and podcasts. 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. 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:09 Welcome 03:02 Creating YouTube videos Scott’s YouTube channel 09:42 Conference talks Notion Stackblitz Reactathon Raycast 17:05 Sponsor: Linode 17:32 Tech for making slides 19:37 Courses - how to decide what to do? 26:44 How Wes breaks down a course topic 30:00 Arranging a course layout 33:19 Sponsor: LogRocket 34:17 Writing blog posts 41:58 Sponsor: Sanity 43:32 How we organize the podcast 51:10 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: ZENOVA Under Desk Treadmill Walking Pad Wes: Trader Joe’s Hot Sauce with Yuzu 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 proposal for type syntax in JavaScript. 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. Show Notes 00:25 Welcome 01:13 Sponsor: Sentry 02:03 Sponsor: Sentry 02:44 The proposal announced A proposal for type syntax in JavaScript Proposal types as comments 03:24 What are types? 08:33 Types as comments 10:51 Why not JS Doc? 13:39 What it looks like 19:02 Possible downsides 21:37 Why not define a type system for JS in TC39 instead? Why not define a type system for JS in TC39 instead? 22:41 The Proposal vs Typescript 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 review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more. Prismic - Sponsor NEEDS AUDIO RECORDING FIRST 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 Uses.tech 00:10 Welcome 03:35 How to submit your site for highlight 04:11 bald.design https://www.bald.design 10:38 Anh Hoang Nguyen https://www.hoanganh.dev 15:08 kennytye.com https://www.kennytye.com 22:42 Sponsor: Freshbooks 24:10 rubenoliveira.tech http://rubenoliveira.tech 28:47 abgn.me https://abgn.me 32:02 Sponsor: LogRocket 33:19 bradleyshellnut.com https://bradleyshellnut.com 41:11 hunterjennings.dev https://www.hunterjennings.dev 46:19:16 Sponsor: Prismic 47:42:19 matthewfarlymn.com https://matthewfarlymn.com 55:00:01 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: Bad Vegan Wes: 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 Vitest, how testing is handled, how code coverage works, and whether they think they’ll use it. 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:21 Welcome 02:47 Sponsor: Sentry 03:48 Sponsor: MagicBell 04:55 What’s is Vitest? 09:06 How is testing handled? 10:59 HappyDOM 14:13 Code coverage baked in 16:25 Files acting as folders 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 the tech stack they use to manage their course websites. 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. 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. .TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc. Show Notes 00:10 Welcome 02:50 CSS Redesign of LevelUpTuts 03:56 Overview of our platforms 06:06 The API ExpressJS MongoDB GraphQL Fastify Mercurius Mongoose 15:13 Sponsor: Kontent by Kentico 17:07 Customer dashboard Svelte Kit 21:21 Viewing experience React GitHub VideoJS Mux Vimeo 30:53 Hosting 35:51 Sponsor: LogRocket 36:45 Admin tooling Flexbox Postmark Drip Pancake Charts 47:37 Authentication PassportJS 50:30 Transactional Email Nodemailer Pug Inky mjml 52:36 Checkout Stripe Stripe Checkouts Stripe Elements Braintree Paypal 55:58 Hosting Digital Ocean Digital Ocean Platform Render Cloudflare 57:48 Sponsor: .TECH 59:39 Other parts ××× SIIIIICK ××× PIIIICKS ××× Scott: Toniebox Audio Player Starter Set Wes: Vissles v84 Keyboard Shameless Plugs Scott: LevelUp Tutorials - Svelte 3D Course 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 getting SSL certificates set up between your hosting, Cloudflare, and other web apps you may use. 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:21 Welcome 01:13 Sponsor: LogRocket 02:06 Sponsor: Prismic 03:23 Wes’ story of SSL Render 05:43 How LetsEncrypt works LetsEncrypt 08:32 What is Cloudflare? Cloudflare 10:33 The problem Wes ran into 12:27 Support is tricky 13:54 What is Cloudapp? Cloudapp Vercel 15:34 Two SSL Certs are needed 16:41 First solution 17:36 Second solution 22:36 What about A Records? 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 handling auth, are web dev real developers, handling Git conflicts, converting PNG to Box-Shadow, bad docs vs no docs, making Shopify headless, 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:10 Welcome 01:32 Fool’s winter 03:25 How do you handle authentication in an app? 09:42 Responding to people who don’t think developers are real developers? 12:21 How do you handle git conflicts in package-lock.json and/or yarn.lock files? 14:42 I built a small project which converts .png images to CSS box-shadow values. Img to Box Shadow 16:37 January 19th, 2038 at 03:14:08 is the end of epoch Office Space 20:31 Sponsor: Sentry 22:44 Should I begin to add PropTypes to my packages and projects? 25:59 What’s worse: bad documentation or no documentation? 27:37 How do you find the motivation or discipline to follow through in side projects? 29:48 I need to take an existing Shopify site and make it headless - what should I use? 37:55 Sponsor: Sanity 39:18 You have a ?token= query param and some token value for it. Could you explain a bit more on what is that for? 44:05 Have you thought about selling Syntax.fm shirts? 46:05 Can I migrate my Express routes to Next.js’ API and get the same httpOnly cookies workflow? 52:03 Sponsor: Freshbooks 52:52 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Okeeffe’s Lip Balm Wes: Okeef’s Working Hands Level Up Course Drop - https://youtu.be/LATf_lVYoMQ?t=829 Shameless Plugs Scott: Level Up Course Drop Wes: Wes Bos Course player update 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 SSR, JamStack, and Serverless. 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. Retool - 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. Visit Retool.com/syntax for more information. Show Notes 00:21 Welcome 01:20 Sponsor: LogRocket 02:26 Sponsor: Retool 03:49 What exactly is server side rendering vs. tech like Jamstack and serverless? Cloudinary Mux 12:15 Why use one or the other? Svelte Kit Syntax.fm 16:55 Where does Serverless fit into this? 19:12 What’s the ideal scenario? 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 second part episode of Syntax, Wes and Scott continue talking about the 2021 State of JavaScript survey: mobile and desktop libraries, testing, monorepo, runtimes, flavors of JavaScript, 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:10 Welcome 01:20 Scott’s new sound panels 03:32 Instacart 2021 State of JS Survey Tauri 07:46 Mobile and Desktop libraries 13:50 Testing Vitest Playwright Cypress 19:48 Sponsor: Sentry 21:26 Monorepo tooling 27:00 Sponsor: Sanity.io 28:18 JavaScript Runtimes 30:51 JavaScript Flavors 32:32 Non JavaScript Languages 39:38 Utilities Syntax 401: Monorepo pnpm Turborepo 40:19 Resources Syntax.fm 403: JavaScript in 2022 - New, Coming and Proposed Features 43:18 Opinions 47:21 Features missing from JavaScript 49:30 Awards 52:58 Sponsor: Freshbooks 53:38 SIIIIICK ××× PIIIICKS 56:41 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: StoryPal Wes: Heartbeat Hot Sauce Matty Matheson on Hot Ones Gordon Ramsay on Hot Ones 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 Wes' experience designing, printing, and shipping out his sticker packs. 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 01:26 Sponsor: LogRocket 02:15 Sponsor: Linode 03:51 How Wes sells stickers Syntax 346: Selling And Shipping T Shirts with TypeScript 04:27 Where the stickers are printed Zigpac 06:30 How the stickers were designed 07:38 How do you ship them anywhere in the world for $5? 10:46 Packing the stickers 13:58 How did Wes sell the stickers? 16:51 Any concern about two people ordering at the same time? 17:13 One thing that did break Pushover 18:13 How the stickers were shipped Stallion Express APC 25:42 Costs for stickers 28:37 TypeScript sticker logo 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 take a look at the 2021 State of JS survey that was recently published, including demographics, salary, browser APIs, overall happiness, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 2021 State of JS Survey 01:51 Winter birthday fun 05:38 The State of JS survey 07:37 Demographics 09:18 Salary range 09:58 Language features 14:05 Browser APIs 17:36 Custom elements and Shadow DOM 18:18 Page visibility API 19:28 File system API 19:58 Web share API 22:15 Sponsor: Linode 23:12 Libraries 27:30 Stimulus 29:21 Trends 31:32 Happiness with the state of front end frameworks 32:28 Sponsor: LogRocket 34:04 Backend Frameworks 38:16 Backend tool satisfaction 44:35 Happiness of build tools 46:32 Sponsor: Freshbooks 48:27 The best podcast in web development 49:05 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Inventing Anna Wes:Everlane Crewneck Sweater Shameless Plugs Scott: LevelUp Course Drop Party 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 do a little this vs that with map vs reduce, forEach vs for in, .hasOwnProperty() vs in vs .hasOwn(), CSS absolute + left/right/top/bottom vs transform, 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. 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. Show Notes 01:30 Sponsor: Prismic 02:58 Sponsor: Sentry 04:21 .filter() and .map() (every, one, etc…) VS Reduce 09:17 .forEach() vs for in / for of 15:52 .hasOwnProperty() vs in vs .hasOwn() 19:37 CSS absolute + left/right/top/bottom vs transform 22:54 Object.assign({}, obj) vs {…spread} Animal Friendly idioms 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 with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites. 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. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Show Notes Ben Vinegar 00:20 Guest introduction 05:58 Seeing bug reports from Sentry 07:38 Distributed tracing for full stack developers 12:16 Amazon X Ray AWS Xray 15:32 Using Tracing 19:40 Sponsor: Kontent by Kentico 20:58 Cloudflare Worker Integration 22:30 How does Sentry have open source and a business? Heroku App Platform Media Temple Dreamhost WordPress Calypso 32:30 Sponsor: Hashnode 34:07 What is the tech stack of Sentry? 38:20 Sentry switching to TypeScript Sentry switching to TypeScript 44:36 Running JavaScript on other websites 51:24 Sponsor: Sentry 53:08 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Last Seen Wes: SEOUL Sisters Korean Kimchi Seasoning Ben: Worst Scene / Best Scene I Was There Too 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 proposed features coming to JavaScript in 2022. MagicBell - Sponsor Magic Bell 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. 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. Show Notes 00:23 Welcome 01:25 Sponsor: MagicBell 02:50 Sponsor: Sentry 04:20 Weird audio tics 05:19 Fetch in Node.js 09:54 URL imports in Node.js 11:41 JSON Modules 15:01 Node in import url scheme 17:30 Pipeline Operator 21:21 Reversible String Split 23:56 JavaScript Module Blocks 25:22 String.cooked 26:34 BigInts Math URL imports in Node.js @MylesBorins Pipeline Operator String.cooked BigInts Math 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 selling themes, which browser to use, where to keep your 2FA codes, Remxi vs Svelte Kit, 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:11 Welcome 02:10 Can you explain import.meta? 07:20 What are your thoughts on publishing and selling HTML & CSS/SASS templates/themes? 12:00 When is it best to use a semantic menu vs a nav? 16:14 Sponsor: Sentry.io 17:36 As a newbie in web dev., which browser do you recommend, Chrome or Firefox Dev. Edition? 20:25 Are TypeScript types are like creating models in Mongoose? 26:16 If you use 2FA, where do you store your recovery codes? 1Password 29:32 Do you know a programming language which similar syntax to js and without the need of a runtime-framework? Syntax 429 - Cloudflare Workers 32:54 I am not feeling the hype for Remix. I would rather put my energy into SvelteKit. Remix Svelte Kit 36:41 Sponsor: Sanity 38:09 Do you guys have any advice on getting unstuck from tutorial hell and at what point do you think someone is ready to apply for junior web dev jobs? 41:36 Do you feel frameworks like Next.js, Remix, etc. abstract too much the complexity that it takes to build full-stack web apps? 44:19 How do you keep up on new technologies? Swyx Scott’s Newsletter Intent to Ship 54:04 Sponsor: Freshbooks 55:06 Sick Picks! ××× SIIIIICK ××× PIIIICKS ××× Scott: The River Runner (2021) - IMDb Wes: Mike’s Hot Honey Shameless Plugs Scott: LevelUp YouTube channel Wes: Wes Bos on 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 Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos. Retool - 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. Visit retool.com/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 01:42 Sponsor: LogRocket 02:54 Sponsor: Retool 04:33 Topic introduction 06:44 How to get a handle on something new in a library? 10:27 How to contribute to comments 12:55 Looking through Issues 15:01 Looking at Pull Requests 15:43 Check Milestones 17:58 Look at Files Changed tab 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 with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work? 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:27:02 Guest introduction Wordle 02:45:13 How did Wordle go viral initially? 05:27:14 Where did the idea for Wordle come from? 07:07:06 What's your background? Reddit.com 12:52:23 Writing just HTML CSS and JavaScript 15:58:24 Wordle has 2 external dependancies 16:41:06 Sponsor: Sentry 17:40:23 The tech stack of Wordle Lit Elements just-merge gzip Cloudflare AWS S3 22:21:04 Would you use web components again? 29:36:08 How much did hosting cost? 29:55:01 How does Wordle remember my streak? 33:56:07 Do you play Wordle everyday? 36:28:11 Sponsor: Sanity 37:16:07 How do you land on internet hits so often? 40:33:15 Are you aware of the clones? Gordle 44:33:15 Sponsor: Freshbooks 45:17:10 Selling Wordle to the New York Times 49:05:20 Dealing with the domain name 54:15:09 What's his opener word? 56:03:03 Juice Juice it or Lose it talk 59:10:06 Sick Picks! ××× SIIIIICK ××× PIIIICKS ××× Josh: Tupperware Scott: Giant tub of Epsom Salt Wes: Shameless Plugs Josh: Wordle Scott: KeystoneJS Course Wes: All Courses 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 pros and cons of JavaScript servers, Serverless, and Cloudflare Workers. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! 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. Show Notes 00:26:13 Welcome 01:12:15 Sponsor: Hashnode 02:27:10 Sponsor: Linode 03:30:09 Topic introduction Netlify Functions Fastify AWS Lambda 09:46:02 Hosted Linux servers 13:41:11 Serverless functions MongoDB SvelteKit 16:34:02 Connecting to a database in serverless 20:14:14 Cloudflare Workers Cloudflare Workers Works with Workers 25:39:09 What do we recommend? Render.com 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, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, 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. Tabnine - Sponsor Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code. It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours. Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams. Show Notes 00:11 Welcome 01:05 This chapter is mid Wes does TikTok 04:28 Harry xli Harryxli 15:00 AustinBaird.software AustinBaird.software 19:45 Sponsor: Linode 21:10 ognjenbostjancic.com ognjenbostjancic.com 28:19 ndo.dev ndo.dev 35:37 Sponsor: LogRocket 37:02 jacksportfolio.com JacksPortfolio.com 41:51 einargudni.com einargudni.com 43:22 Kids advert break 46:05 Back to einargudni.com 48:24 Sponsor: Tabnine 50:41 cyrillappert.ch hslu.cyrillappert.ch 54:30 Sick Picks 59:02 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: The Alpinist (2021) - IMDb Wes: Instant Pot Air Fryer Lid Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses 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 are inspired by a Reddit post to talk about how to work better with your team. 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:24 Welcome 01:57 Sponsor: Sentry 03:26 Sponsor: Sanity 04:48 Summary of the Reddit post 06:46 We are a team 09:05 Coding with ego 12:32 Follow the leader 13:59 Getting better at asking questions 15:01 Ask for clarity 15:43 Understanding the guidelines 18:12 Interpersonal tips 19:49 Celebrating wins 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, Scott and Wes talk all about monorepos - the why's and the how's of using them on your projects. 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. 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 and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11 Welcome 01:46 Our experiences with monorepos 05:04 Why use monorepos? 09:37 How long have we been using monorepos? 10:16 Tools for starting a monorepo pnpm Nom link 16:22 Sponsor: Kontent by Kentico 17:33 What's the process for managing libraries? 20:10 Installing / uninstalling things 21:07 Shared dependencies 27:45 Sponsor: LogRocket "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", "update": "pnpm recursive up -L -i" 29:23 Turborepo Turborepo 39:32 nX nx 45:38 Sponsor: Freshbooks 46:32 Lerna Lerna 48:09 Rushjs Rushjs 52:35 Sick Picks 59:17 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze v3, 10 micro sd Wes: Tineco A11 Vaccum Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses 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 their process for updating project dependencies. Sponsor - LogRocket 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. Sponsor - MagicBell 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:25 Weeeeelcome 00:52 Sponsor: LogRocket 01:29 Sponsor: Magic Bell 03:32 What are dependancies? 04:04 Wes updates all the things 05:30 How to check if there are any updates 07:05 Upgrade isolated, Minor deps first. 09:16 Upgrade Minor groups after that 09:56 Then upgrade Major dependencies 14:47 Finally upgrade any stand along dependencies 15:44 Test test test 16:19 Watch error logging 17:05 Pray 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, Scott and Wes talk through what to focus on at a beginner, intermediate, and advanced levels of coding skills. 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. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 02:30 Semantic HTML 07:36 JavaScript Data 08:54 Issues & technical workflow 11:40 Emailing People Syntax 117: How to Email Busy People 13:49 Make something animated with CSS Open Props Style 16:04 Make a full stack contact form in a framework 16:52 Sponsor: Sentry 18:59 CSS Variables 22:36 Server Side fundamentals 24:28 Meeting Skills 28:36 Help organize a codebase or repo. 30:26 Make something animated with JS 31:40 Write a bot 33:35 Sponsor: Linode 34:51 Write CI / CD actions / tools 37:55 Advanced Typescript 38:32 Teach at your company 39:35 Speak at a conference 40:45 Make something 3D Frame 3D React 3 Fiber Svelte Cubed 42:03 Scrape and write something to collect data 44:15 Sick Picks! 48:43 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: 14 Peaks: Nothing Is Impossible - Netflix Wes: Booty Slippers Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 CSS + JS Hacks that they're ok with using. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Sponsor - Sentry 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. Show Notes 00:53 What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do? 02:09 Sponsor: Sentry 03:12 Sponsor: Freshbooks 05:32 Negative margins in CSS 07:53 Not Passing a radix to parseInt() 10:17 -50% translation 50% direction 11:27 Overwriting Arguments in a function 13:20 non-standard-element 17:26 Button must have a type 18:56 Triangles out of borders 20:40 Overflow:hidden to clear a float 20:55 Always pass noopener to links! 22:16 Inline styles 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, Scott and Wes answer your questions on a Potluck episode of Syntax. 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. Retool - 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 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 Intro 01:10 Watching movies with kids 02:49 How do you protect images on your website? 07:21 How did you guys learn Typescript? 13:26 Should I worry about learning Typescript now or stay focused on mastering JS first? 18:16 Sponsor: Prismic 20:03 How do you decide what to learn? 26:26 I want to become full stack and learn a backend language, which one should I choose? 28:07 Do Svelte components not support media queries? 29:30 Any advice or suggestions on how to approach Auth or Payment? 32:53 Sponsor: LogRocket 33:59 Any experience working with a team on a different time zone? 42:49 Do you have any experience or recommendations for introducing prettier late in a project? 48:57 What are your thoughts on monorepos? 52:57 Sponsor: Retool 55:14 What does it mean to know JS? 59:39 What would you do if you had to start over? 03:49 Sick Picks 07:09 Shameless Plugs Paw Patrol Movie Encanto Luca Tweet: When should a JR dev learn typescript? Typescript Handbook Selling and Shipping T-Shirts with Typescript Svelte Kit Remix Height Clocker iState Menus Turborepo Nx ××× SIIIIICK ××× PIIIICKS ××× Scott: Learning Differently Wes: Truff Hot Sauce Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 Remix! Sponsor - Sanity 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. Sponsor - Sentry 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. Show Notes 00:32 Rrrremix Remix 02:03 Sponsor: Sentry 03:48 Sponsor: Sentry 05:51 What is Remix? 07:51 Built on Fetch 12:28 Frameworks are getting so good 13:30 Data loading 14:36 Actions 19:09 Error boundary and catch boundary differences 20:15 Differences between Remix and Gatsby, and other SSG 21:33 What about hot reloading? 22:47 Nested layouts and nested routes 24:25 Typescript support 26:33 Hosting anywhere Remix Docs Remix on GitHub Remix on Twitter Remix on YouTube 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 predictions for 2022. 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. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11 Welcome... 01:31 Svelte is king Svelte Svelte Kit 03:57 Next.js Next.js Next.js Live 06:40 Web components Open UI Syntax 353 Stylin the Unstylables 11:42 Rust popularity Rust Rome 15:58 Sponsor: LogRocket 17:12 Serverless and Cloud Functions 18:19 Cloudflare becoming a major player Cloudflare Pages 20:05 Tailwind Tailwind Open Props 24:10 Glow Up 24:35 Next gen dev tools OhMyZsh Warp Fig iTerm Starship 27:32 Sponsor: Hashnode 29:48 CSS Container queries, Layers, and More! 31:45 GraphQL 34:13 Deno Deno 37:41 Typescript 43:36 Server come back 45:13 Sponsor: Freshbooks 46:02 Checkouts and payment processors Wise 51:30 Temporal API 53:20 Remote Dev / Thin Client 55:16 Sick Picks 00:16 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: A Show About Animals Wes: Wise Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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 some Javascript one liners that speed up your coding experience in one line. Sponsor - Linode 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. Sponsor - Sentry 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. Show Notes 00:24:12 Welcome 01:24:11 Sponsor: Linode 02:11:02 Sponsor: Sentry 03:54:18 Twitter ask for One Liners 04:24:05 Math random const getPsuedoID =() => Math.floor(Math.random() * 1e15); 05:43:09 Random color Paul Irish random color '#'+Math.floor(Math.random()*16777215).toString(16); 06:41:06 Console.log as an object. console.log({ dog, person }); VS Marketplace Link 08:29:17 Edit anything document.designMode = "on" 10:15:15 Temporal date export const today = Temporal.Now.plainDateISO(); 11:44:05 Console(log) const myFunc = (age) ⇒ console.log(age) || updateAge() 13:26:13 Remove a prop const { propToRemove, ...rest } = obj; 15:29:01 PHP style debugging preElement.innerText ={JSON.stringify(val, '', ' ')}` 16:31:00 First and Last Destructure var {0: first, length, [length - 1]: last} = [1,2,3]; 17:34:17 Speed up audio video document.querySelector('audio, video’).playbackRate = 2 Overcast 19:44:15 Sleep function let sleep = (time = 0) => new Promise(r => setTimeout(r, time)) 20:26:00 If statements on one line If (!thing) return 'something' 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, Scott and Wes review their predictions and highlights for 2021. .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you're looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code "syntax5". 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:21 Wes highlights 05:33 Scott's highlights 07:42 Writing admin tools for fun 13:33 Sponsor: .TECH Domain Name 14:30 Tech that was hot in 2021 17:18 Sveltekit Pancake by Rich Harris Svelte Svelte Kit 19:54 Remix Remix 20:36 Astro Astro 22:51 NextJS 11 and 12 NextJS 25:14 Vite and Parcel 2 Vite Parcel 26:52 Web3 28:00 Prisma Prisma 30:35 Typescript Typescript 33:08 Sponsor: Sentry 35:25 Reviewing past predictions 36:54 ESM 39:47 Remote work will grow up Discord Notion Height 40:38 Deno 45:11 React 46:02 Tooling fade away 47:29 Rome Rome 48:47 Rust 49:36 Programming communities Twitter Spaces Clubhouse Circle Github Discussions Tiktok Benawad on TikTok Wes Bos on TikTok 51:08 Wasm 51:26 Typescript 52:35 React 53:40 More web component frameworks 56:43 Gatsby 57:26 CSS updates Syntax 354 with Miriam Suzanne 01:00:06 Serverless 01:01:13 Enterprise jamstack 01:02:01 Sponsor: Mux 01:03:05 Sick Picks 01:08:03 Shameless Plug ××× SIIIIICK ××× PIIIICKS ××× Scott: Rocket League Sideswipe Wes: Home Work on Discovery+ Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes. Sponsor - Sanity 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. Sponsor - LogRocket 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:54 Luks of the past 03:19 Sponsor: Sanity 04:26 Sponsor: LogRocket 05:04 Has package-lock.json ever saved your bacon? 08:27 Why do you not talk about Angular? 11:28 How do you handle package updates? Wes Bos tweet on npm-update 17:43 How do you keep learning in your career? 21:02 How does the movie selection work on planes? Emby 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, Scott and Wes talk with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. 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. 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. Show Notes 01:20 Guest introduction 02:46 Coding in the browser anywhere Gitpod JetBrain 04:58 How does GitPod work in the browser? NoYaml Cobalt2 Finding VS Code Extensions for Gitpod 09:27 How does GitPod actually work? 10:57 What is Kubernetees? 13:11 Is there a full VS Code environment? 18:21 Sponsor: Linode 19:01 Who are the heavy users of Gitpod? 24:32 Teams on Gitpod Gitpod Roadmap Centered.app 30:11 Do the developers of Gitpod use Gitpod to build Gitpod? Gitpod Careers 32:51 What language is Gitpod written in? 33:15 Sponsor: Logrocket 34:10 Living in a van coding 38:16 How do you stay productive on the go? 40:18 What was The NFT Bay? The NFT Bay 44:54 Is there any good in Web3 ideas? Lularoe Documentary 49:42 Sponsor: Freshbooks 50:13 Selling NFTs is difficult 51:34 Sick Picks! 58:40 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Sweet Bobby Podcast Wes: Woosh Cloths Pauline Uniqlo Geoff Helinox Chair Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com 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, Wes and Scott talk about what's new in Gatsby v4. Sponsor - Prismic 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. Sponsor - Sentry 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. Show Notes 00:26 Welcome 01:41 Sponsor: Prismic 02:35 Sponsor: Sentry 03:26 Gatsby v4! Gatsby What’s new in Gatsby 4 04:26 Any node version requirements? 05:22 Three rendering options 15:47 Parallel Queries 16:28 Data sync 16:57 Gatsby admin deprecated Nextjs 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, Scott and Wes answer your questions on a Potluck episode of 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. 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. 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. Show Notes 02:07 Google Chrome to start measuring user experience beyond the completion of page load 05:47 How can I ensure that I am executing npm commands safely? 07:58 How should I prefix booleans? 09:46 How do I decide between using an enum vs a union type in Typescript 13:40 What is Web Assembly? 18:34 Sponsor: Sanity 19:45 what happened to Scott using Linux? PopOS 22:44 Sponsor: Linode 23:57 How do you batch requests in nodejs to an api? 26:15 What are micro-frontends? 29:55 Sponsor: Sentry 31:16 Since Astro seems so amazing, aren’t you tempted to rebuild your site now in Astro instead of Sveltekit? Astro 33:04 Can you please shed some light on redirects in express/ koa? 36:41 How do deal with ADHD? 41:52 Should I repeat the name of the issue in the commit message or just "Resolves #$issue-number"? 44:21 Do browsers update automatically? 47:52 What do you do when working on a big project? 49:55 Can you guys help to breakdown and explain jargons and differences of RPC, REST, gRPC, GraphQL? 53:25 How to ask a question 53:42 Sick Picks 56:17 Shamless plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Satechi 3-in-1 Magnetic Wireless Charging Stand Wes: The Always Sunny podcast Shameless Plugs Scott: Astro Course Wes: All Courses 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, Wes and Scott talk about how to do things in Svelte. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Sponsor - LogRocket 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:28 Welcome 02:18 Lead pipe talk 04:33 Sponsor: Freshbooks 05:05 Sponsor: Logrocket 06:34 Intro to Svelte 07:44 Get Local State running Writable-stores 10:47 Arrow functions 11:53 Functions that update state React Hooks in Svelte React Use Svelte Store 14:36 Live / Reactive Variables 17:03 Context 20:45 Conditional rendering 24:57 Input binding 28:02 Should Wes rewrite his video player in Svelte? 30:07 Child elements 32:10 Vercel hires Rich Harris 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, Scott and Wes talk with Anth Rogan about JavaScript and hardware - from cars, to factories, and the internet. Bryntum - Sponsor Bryntum’s suite of web components help developers quickly add powerful project and resource scheduling capabilities to their React, Angular, Vue or vanilla JS apps. The SDKs include extensive API docs and plenty of examples. Try them online at bryntum.com/examples/gantt or bryntum.com/examples/scheduler-pro. Visit Bryntum.com/syntax for a 45-day free trial. 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. 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. Show Notes 01:02 Guest introductions Anth Rogan on LinkedIn 05:44 What kinds of things did you work on at Nissan? 09:02 Why are car head units based in the past? 11:35 What are cars running for UI? 14:04 What are PLC's? 17:02 What kinds of regulations exist for automotive software? 22:28 Sponsor: LogRocket 23:03 Deeper look at PLC's 26:56 What's Node-RED? Node-RED 29:37 JavaScript is popular in industry? What else is used? 31:06 Sponsor: Brymtum Products 32:57 How do you learn about this tech? PLC Subreddit 35:24 What were you doing with Nissan head units? OBD2 Scanner 37:15 Web bluetooth API research 39:13 What's MQTT? MQTT 41:29 Sponsor: Linode 42:14 Using IoT and machine learning to find issues 46:53 New opportunities in industry tech coming 52:40 Cottage IoT dreams 56:27 Relaxing in Minecraft 57:42 Sick Picks - Anth 58:38 Sick Pick - Scott 59:49 Sick Pick - Wes 02:12 Shameless plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Spotless for macOS Wes: Wago Lever Nuts Anth: Daily.dev Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! 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, Wes and Scott talk about Meta Tags. Sponsor - Sanity 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. Sponsor - Sentry 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. Show Notes 00:25 Welcome Syntax 379 - The Link Tag 01:24 Sponsor: Sanity 02:50 Sponsor: Sentry 04:28 What are Meta Tags? 05:01 What is charset? 07:41 The viewport tag That’s a Nice Touch on TikTok 10:25 SEO and page data 12:03 Browser display tags 14:20 Dead tags 16:24 Robot tags 17:53 Adult ratings tag 18:18 Google site verification tags Google Verification tags 19:35 Open Graph social tags Facebook Meta tags Open Graph 22:54 Generator tag 25:54 http-equiv tag http equiv 27:20 Apple specific tags Apple specific tags 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, Scott and Wes talk about all the things that have improved the lives of web developers over the years. 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 and put SYNTAX in the "How did you hear about us?" section. 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. Show Notes 00:16:18 Topic introduction 01:03:00 Leaf blowing and house updates 02:57:01 We complain a lot 04:13:22 Typescript improvements 06:20:00 Optional chaining 07:01:06 Async, Await and Promises 07:57:05 Array methods and tools for immutability 09:13:16 DOM interactions with getElementBy 10:34:10 Arrow functions 11:13:06 Classes! + All of ES6 was a huge breath of fresh air 12:18:07 Looping 13:22:00 Prettier Code is a huge game changer Prettier ESLint 15:51:00 Sponsor: Freshbooks 17:04:15 CSS updates 17:41:11 CSS Variables 18:41:15 Flexbox and Grid 20:16:10 VH, VW units 20:47:24 Overflow scroll on mobile 21:54:10 Color formats 23:08:06 Sticky headers 23:45:06 HTML 5 Introducing HTML5 By Bruce Lawson and Remy Sharp A Book Apart 27:54:00 Web components 28:29:09 Sponsor: Sentry 30:01:17 Tooling Syntax 12 Why Is Everyone Switching to VS Code? 31:28:13 Speed of latest crop → ESBuild, Vite, Snowpack, parcel Vite Snowpack 33:33:03 Image compression 37:08:21 Hot module reloading 39:11:09 Image resizing, video hosting, accepting credit cards Gatsby Cloudinary Spritecow SmushIt Stripe Braintree Entrepreneur friendly licensing 39:48:18 Entrepreneur friendly licensing 40:43:18 Sponsor: Linode 42:11:10 Developer Tools in the browser Tweet from @Bentlegen Chris Coyier - Let’s Suck at Github Together Chrome.io 43:52:17 Insights into errors and troubleshooting 44:49:13 Cross browser and cross device testing 47:12:19 Hosting and SSL Certificates 48:14:08 Scaling up 49:53:13 Scaling with containers 50:14:09 When did we start using Github? 53:52:12 ××× SIIIIICK ××× PIIIICKS ××× Scott 59:42:22 ××× SIIIIICK ××× PIIIICKS ××× Wes ××× SIIIIICK ××× PIIIICKS ××× Scott: Tonal Wes: Reboot your Portfolio / Canadian Couch Potato Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! 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, Wes and Scott talk about their experiences using Github Co-pilot. Show Notes 00:58 Wake up early and let's go 02:19 Sponsor: LogRocket 03:21 Sponsor: Freshbooks 03:56 What is Github Co-Pilot? GitHub Co-Pilot 06:01 Scott is a GitHub Star 07:03 Examples of GitHub Co-Pilot usage 09:43 Writing pseudo code Emmet 12:51 Using it for loop callbacks 13:52 What langauges does GitHub Co-Pilot work with? 14:54 It plays nice with HTML files 15:48 Svelte component example 16:31 Benefits for course creators 17:35 Some scary things 21:04 Could GitHub start charging for this? 22:30 Good at writing types 23:59 Gripes 24:54 Converting code to Parcel 2 Parcel 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, Scott and Wes talk about ways they troubleshoot issues with their code. 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 and put SYNTAX in the "How did you hear about us?" section. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 01:13 Furniture shortages 02:29 Managing stuff 03:05 Basic troubleshooting skills are missing 06:09 Sanity check CodePen Codesandbox 08:05 Isolate the issue 08:57 Commenting out code is free 12:17 Replicate the issue 15:07 Svelte and VS Code error Svelte VS Code 17:02 Wes' course upgrades Parcel 2 Patch package 18:07 Sponsor: Logrocket 19:15 Rollback 20:30 Reading the error message Syntax 47 - How to Get Better at Debugging Syntax 152 - Debugging Tools 23:59 Crack open the node modules directory 26:06 Sponsor: Freshbooks 27:29 Write step by step comments to the code 29:01 Consider outside sources 30:56 Using the right tools for the job 33:19 Rubber ducking it 34:16 Wes' Big Mouth Bass story 37:20 Scott's blown away by his leaf blower 39:56 Copy paste a message into Google Twitter - What are your tips for troubleshooting code or a system that doesn't work? 41:33 Logs and metrics 42:36 CI CD issues and Error Handler 43:41 Using a step debugger 44:24 Explain what's happening to someone else 45:31 Read the documentation 47:05 Take a break, have a cuppa 48:42 Sponsor: Mux 50:57 SIIIIICK PIIICKS 57:05 Shamless plugs Links @jimbomoso - Do you know of any resources for developing/improving code trouble shooting? ××× SIIIIICK ××× PIIIICKS ××× Scott: Forehead Wes: EGO EXINNO 240W/120W Chargers Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code 'Syntax' for $10 off! 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, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU. 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. 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. Show Notes 04:30 The last time we upgraded 07:05 Initial thoughts on new MacBook Pro Apple MacBook Pro 09:23 How much RAM you might need 11:33 M1 Pro or M1 Max? 12:37 Justification as a business expense Figma Sketch We recently found that the new 2021 M1 MacBooks cut our Android build times in half. VS Code Microsoft releases M1-native Visual Studio Code for developing apps Notion Height Sublime Text 14:52 Shortening the feedback cycle 15:57 Using VS Code 21:20 Video editing on M1 MacBook Pro Mkbhd - M1 Macbook Pro review Synology Syntax.fm Ep220 The Synology Show Recut Davinci Resolve 24:27 Screenflow export comparison Screenflow 29:32 VS Code improvements SWC pnpm 32:57 The tools are no longer the bottleneck 33:37 Hardware upgrades 34:10 The notch Bartender 36:11 macOS icons have more padding 37:03 Charging and battery TS3 Plus 38:32 Fans and heat 39:18 Touch bar is gone 39:36 External displays 41:03 Battery 41:54 LG Display issue 42:51 Touch ID reader in a better spot 43:25 What's happening to your old MacBook Pro? 45:21 Ports and keyboards 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much 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 and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off? 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!! 11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks. 16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener. 21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this? 24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.? 27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go). 31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming! 38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for creating new content types or adding new features? Or do they only see the input fields of all the contents that can be added to a specific page? Thank you! 42:14 - Dave: Hey guys, love the podcast! I understand that CORS prevention is in place in the browser to help improve security/prevent malicious requests across domains, but I don’t understand why you can get around this by performing the request server side, for example via cURL? If I were a malicious actor, surely I could just send my cross domain request through a proxy to avoid the CORS issue? I’m sure I’m missing something obvious here, can I please get your thoughts on this? 44:48 - Lemon: How do you implement authentication with GraphQL? Especially in Fastify, I know Scott recently moved over from Meteor to Fastify, so I too was checking Fastify but couldn’t find a satisfying auth solution that fits well with GraphQL. 48:08 - Zack Vogel: I love when you play games on the podcast. I’m a high school technology teacher and I play a game with my students called the 5 Second Rule. It’s based on a board game, but I have changed the topics to technology-themed questions. The game works like this. One person reads a topic “Name Three VS Code Extensions” and the other person has five seconds to respond with three correct answers. I think this could be a fun game to play on the podcast. Links http://www.seeeyewear.com/ https://www.warbyparker.com/ https://www.costco.com/ MariaDB dynamic columns https://en.wikipedia.org/wiki/Grok https://twitter.com/argyleink https://remarkable.com/ https://figma.com/ https://graphql.org/ https://www.meteor.com/ https://www.fastify.io/ https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing ××× SIIIIICK ××× PIIIICKS ××× Scott: myQ Chamberlain Smart Garage Control Wes: ATOTO Head Unit Shameless Plugs Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Next.js 12 and all of its hot new goodness and updates! 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 04:00 - Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds 06:25 - Middleware (beta): Enabling full flexibility in Next.js with code over configuration 08:16 - React 18 Support: Native Next.js APIs are now supported, as well as suspense 09:56 -  AVIF Support: Opt-in for 20% smaller images 11:58 - Bot-aware ISR Fallback: Optimized SEO for web crawlers 13:10 - Native ES Modules Support: Aligning with the standardized module system 14:39 - URL Imports (alpha): Import packages from any URL, no installs required Links https://twitter.com/mattgperry Introducing Middleware 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, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. 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. Guests Tomek Sulkowski Show Notes 02:45 - What is StackBlitz? 05:28 - What makes it different? 08:20 - How does offline work? 12:18 - What are web containers? How does this fit in? 17:45 - How does this all work (WASM, Node.js in the browser, etc.)? 21:00 - What does performance look like? 31:06 - What about VS Code extensions? 32:48 - Monorepos? 35:12 - Databases? Sqlite? 35:36 - Are there any limitations? 37:02 - What is Turbo? 40:58 - How is this different from similar apps? Links https://stackblitz.com/ https://jsbin.com/?html,output https://jsfiddle.net/ https://codepen.io/ https://code.visualstudio.com/ Fugu API Tracker (fugu-tracker.web.app) https://www.docker.com/ https://spidermonkey.dev/ https://github.com/chakra-core/ChakraCore https://sli.dev/ https://vscode.dev/ https://codesandbox.io/ https://www.gitpod.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: HaloLock Universal Ring Wes: Car LED Light Upgrade Tomek: The Dresden Files Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tomek StackBlitz 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 Astro — what it is and why you should check it out! 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. Show Notes 03:08 - What is it, what does it do? Framework for server-first static apps Use any front-end framework Does not ship JS unless you explicitly define a component to ship JS 05:20 - The syntax .astro files is a mash-up of Svelte and React Frontmatter for server-side JS Template syntax is basically JSX TS baked in --> --> --> --> --> 07:48 - State management In client-side JS only, no state in .astro files 10:50 - CSS Svelte style Local, scoped tags SCSS baked in 11:16 - Data fetching Fetch in frontmatter via fetch() 12:06 - Vs React? Vs Next? Vs Gatsby? Vs Svelte? 15:24 - Tooling There is a Syntax highlighter Uses Snowpack under the hood 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, Scott and Wes are back with another edition of “Stump’d!” where they try to stump each other with interview questions. 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 06:05 - Which property allows you to control the shape or appearance of the marker of a list? 06:33 - What is a pseudo element? What is a pseudo class? 09:15 - What is the difference between block, inline and inline-block elements? 10:15 - What is a combinator selector? 11:12 - What is specificity? How do you calculate specificity? 14:37 - True or False — The translate() function can move the position of an element on the z-axis? 16:44 - What is the difference between “resetting” and “normalizing” CSS? 17:51 - How can you load CSS resources conditionally? 19:45 - Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? 22:30 - When to use CSS grid vs flexbox? 25:12 - What are all eight @-rules in CSS? 28:01 - Which property is used to underline, overline, and strikethrough text? 29:52 - What is DOM reflow? 32:14 - How do you serve your pages for feature-constrained browsers? What techniques do you use? 34:00 - What is the property for controlling image-scroll? 36:23 - What are the three different types of CSS gradients? Links https://github.com/sudheerj/javascript-interview-questions https://github.com/learning-zone/css-interview-questions ××× SIIIIICK ××× PIIIICKS ××× Scott: https://height.app/ Wes: Anker Mini Car Charger Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off! 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 PNPM and monorepos! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 4:40 - What is pnpm? https://pnpm.io/ Performant npm https://www.youtube.com/watch?v=hiTmX2dW84E Find and remove node modules find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 08:30 - Why monorepo? Internal packages all in one place Forks and custom packages easier Commands that control everything at once 10:33 - Workspaces Not exclusive to pnpm Yarn, npm, pnpm all have them now Different syntax packages: - "packages/**" 12:48 - How it works in practice All commands run through root Use in host, hook up my monorepo to render run commands Filter and recursive "install:all": "pnpm recursive install", "clean": "pnpm recursive exec -- rm -rf node_modules; rm shrinkwrap.yaml; rm -rf node_modules", "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", 16:35 - Using submodules https://paigeniedringhaus.substack.com/p/march-2021-git-submodules Why submodules? Public and private Links https://www.npmjs.com/package/npx https://yarnpkg.com/ 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

For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition! 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. 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. Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could useEffect be right?) Next thing you know, they ended up bringing in a guy with an angle grinder to get access to the server cage. 04:15 - No one from Denver can buy 06:38 - Bug accidentally gives $90 million to users https://www.cnbc.com/2021/10/01/defi-protocol-compound-mistakenly-gives-away-millions-to-users.html 08:34 - Share Pointy Knives Hi! I’m a developer at a consulting firm in Sweden, writing C# on the backend and using React with either JavaScript or TypeScript and hosting things in Azure 99% of the time (and 1% in SharePoint). I was in my last week at my last job before I was due to start my new job. Worked 12 h/day to keep up with all the handovers etc. to colleagues so they would have a chance to continue working on the solutions I have taken care of. One project was a process tool hosted in SharePoint Online. The guy who would oversee it had -1% experience with SharePoint (which I pointed out to my bosses). But to make things a bit easier, I wrote a deploy script to ease things a bit. Starts the terminal and runs the script towards the acceptance environment. Umpteen million errors appear… Which is strange, because there would only be about 20 commands (which can cause errors like these). I log into the environment to double check if I now accidentally entered the wrong values in the script (which looked okay according to me). But I get a 404 error when I try to reach the environment… I log into the admin interface; I discover that the site is gone… Also checking the trash can, there are no things there. Very strange. I find that I’m in a different folder than the one where I saved my script… In that folder there is an old deploy script that was used when the project was started a thousand years ago (which was not used after the project was “finished”). The first thing the script does is force delete the site and then try to create a new empty site… The site is gone with lists and everything (lists are a SharePoint thing, think of it as sql-lite), there are no backups of the acceptance environment (although it is very important). I just feel a little panicked about how I’m going to solve this. However, I remember testing a tool six months ago to copy entire environments. Where the first attempt was made on the acceptance environment. Finds the cloned environment and can use the same tool to clone it back. It took only 8-12 hours of work to create all the new things done in the environment in the last 6 months instead of X number of hours to build everything from scratch. Once I updated a feature that saves accessories on orders (same solution). However, I failed to add all the new fields to the production environment. Which meant that accessories were not saved at all… Which was discovered after a week… I fixed the error in 5 minutes and the sellers had to contact x number of customers to double check what kind of accessories they would have for their orders… 11:22 - External HD One time I needed to format a server. It was an outdated Windows server. I selected all the files and copied and pasted to an external hard drive. My drive was pretty fast and it took like a minute. I was like: “Wow! That’s a great external hd”. Formatted the server and, as soon as I realized it didn’t copy 10% of the files, I had that face. We all know that face. Anyways. Tried to restore the files using some HD recovery tools but they were all corrupted, not by the formatting itself but for the installation of the new OS. My boss was pissed! I was very young so I blame it on the server. I’m not proud of it. But why the heck they would ask a developer to format a server in the first place? By the way, my birthday is on Halloween. Spoooky. 13:07 - Hey Loser I was testing new code to automate mass-mailings to our customers. Who knows what demon drove me but I wrote the “test” mailings like ransom notes: “Dear loser! Fork over all your $$$ or else!” Well, all was looking great and I wa s feeling pretty pleased with myself. Progress bars were sliding and counters were spinning. But I could hear a rising commotion from the marketing guys behind me. Phones ringing, voices raised. Turns out I had moronically wired myself to the production database! Even worse for me, I’d only been at the company a month or two. I thought my goose was cooked and the Big Boss was plenty mad, but I owned up right away and apologized. We put out a cover story that we’d been hacked and all was forgiven. 15:01 - HE HATE ME I was part of the developer team that accidentally leaked the 8 cities the XFL, an alternate football league, a week before their press conference. ewrestling.com/article/wwe-ac… We were using Contentful and Gatsby. A junior dev entered the information into the prod space instead of the UAT space and when we released some bug fixes, it picked up the contact us content update. I found out after seeing stories pop up in Google News when I was about to go to sleep. Was taking the content down when we started getting calls from the CIO of the WWE. The league went bust because of COVID. 19:23 - I Don’t Have Memory of This I had two pretty bad code changes that only showed their problems when they went live in production. Around 6 years ago, I was running into a large performance issue with some of our queries running slowly against this giant DB. We were using JPA/Hibernate and we had a bunch of joins that were done lazily. I switched a few of them to eager so that they would create a single SQL statement instead of a bunch (or thousands). The change worked fine on my dev environment, QA, and staging. Staging was supposed to be representative of production. So we went live and within minutes the entire system went down because of out of memory errors. We quickly switched back to the lazy joins. We found out that staging had more memory and fewer DB records than production though they were supposed to be exactly the same. 21:05 - Your Performance is Slowing us down Back when VMWare was becoming a thing, like 2010 or so. I was working at an ecomm site and we were seeing slow performance between the app server and some data services. I decided to build a little multithreaded logger that could track when a query to Oracle Financials was running too slow and generate a warning. Oracle Financials was doing the credit card transactions, orders, and all the rest of the sites DB work. The code had no impact on my dev, QA, and staging environments. We were hitting well over our minimum number of concurrent users. We deployed it to production and then the system got slower and slower, but never crashed. Again, production and staging were set up differently. Staging was a bare-metal server. Production was running on an ESXi server on a host that was split 4 ways. The multi-threaded code meant to detect performance degradations was slowing the whole system down when it tried to synchronize data across threads. I was pretty embarrassed by both these two issues. It went to show that production is its own special thing and that you really don’t know if your server-side code is really going to work until it starts running there. 23:15 - Dead Button Way back when mainframes were king, a guy I worked with pushed a button in, that if released, would immediately take down the entire company. He stood there for 4 hours, holding the button in, until we could let it crash after business hours. We gave him a chair after 2 hours. 25:12 - No Deploys on Fridays I was a junior dev working on our company’s website. They were HTML + nunjucks templates that were later being integrated with the backend using some Python witchcraft. There was also a metric ton of JS libraries added (like Babra for page transitions, threejs for a cool interactive animation on the landing page etc.). Didn’t really get much of all this package.json stuff at that seniority level. So after running yarn or npm or whatever, and seeing some warnings about a couple packages being outdated, I decided to update some of them. It ran great locally, but I didn’t build the prod version, as I didn’t know there could be any differences. I was working on some minor feature (or maybe even some minor bug) and the PM decided there’s no time for code review. So I pushed it to the repo, the backend guy did his integration, and launched it on prod. As it turned out, there were some breaking changes in one of the libraries I decided to update. It crashed the entire site. On Friday. At 4:30PM. And that, kids, is why you don’t deploy on Fridays. 27:33 - Stupid Selfie Horror story for you Wes. I work for one of the biggest retailers in the UK and we were working on an app that would go on a ‘media wall’ in their flagship store in London. Basically a giant 200-inch screen in the middle of the store that social content can go on. Turns out that I left my local Dev version connected to the production API when I uploaded a couple of stupid selfies of my big head in the office. Get a call the next day to ask why my face is on the medial wall. 28:37 - Soda I was a computer operator back in the late 1960’s, operating a Honeywell mainframe. The consoles were huge, about the size of a dishwashing machine, with the console typewriter and printer inset in the middle, on top. I had a soft drink on the console, next to the typewriter mechanism. We were told never to bring a drink into the room but we all did it, especially on third shift. Long story short, someone called my name, I turned around and knocked the glass of soda into the console. Had to be completely replaced – machine was down for two days. My boss was not happy. 31:22 - Oof A bigger horror story. I had my own software company in the 90’s and was in Singapore, customizing my software package for Johnson & Higgins Insurance Brokers – I had their Asian contract for my Insurance Broker/Accounting package. I spent a good 40 hours on Saturday and Sunday, making all the changes they asked for, getting ready for a demo on Monday morning. I finished up about 4am on Monday morning and was cleaning up my files. All this work was done on a Novell server. Print files had an extension of .prt and I had a ton of them in the main directory from all of the testing I had done. I was cleaning out old files, getting ready to back everything up and I thought I would delete all of the print files. I mistakenly keyed in erase *.prg, instead of erase *.prt (or whatever the delete command was – can’t remember it now). Programming files have a .prg extension – I had deleted all of my updated files from the weekend. In desperation I called Novell in Utah, hoping they could help me recover the files, but no-go. The demo Monday morning was not fun. 33:24 - Young Dev I was a young dev right out of college. My first job was at a child support company where we had desktop apps that would handle case information more efficiently than using Excel. My first project was to write a POC that would later be implemented into a new, bigger app that consolidated all the “POCs” for various parts of the child support process. For some odd reason, I still don’t know why to this day, my boss wanted me to write this “new” app on top of an old app with a bunch of legacy code. I never understood why but as a young dev fresh out of school, you tend to just do what you’re told. In school, I mainly used PHP/HTML/CSS for learning how to work with a database; this job however used C#/.NET for their desktop apps so I was doing a lot of learning as I went. I remember finally learning how to connect to the database and run some SQL after fighting with this old pile of legacy code. In early versions, I chose to handle creates/updates for these records in the same function. My young, dumb self wrote a try catch statement that would attempt to create the record and if it failed, it would try to update the record. Before the first production release, I updated the flow to handle creates/updates in separate functions - but never removed the update in the catch block of the original function now used for creates only. Somehow I, or any PM/QA, never failed on a create and hit this catch block while testing. Fast-forward probably 9-12 months later, I got a ticket to investigate why every case’s data looked the same in Production. I login to the app, search a few case numbers and sure enough, every case’s data is the same. I began freaking out as I had no clue how this could’ve happened. I mean it had never happened in all the dev work, testing, and months of live Production use. After I investigated with a senior dev, we realized the try block had failed and the update query in the catch block ran for that record - we also realized that I left off the where clause in the related SQL query to specify which record needs updating - so ALL records got updated with this data. Thankfully, we kept regular back-ups and were able to restore the data to a recent timeframe without users losing a ton of work. We commented out that database update call and redeployed the code ASAP. Also the senior dev was cool about it and was like “hey, it happens to all of us at some point”. Let’s just say I’ve learned a ton since then and definitely steer clear from writing code like that. You live and you learn I suppose. 38:40 - Where Wolf Here’s my development tale of terror: One night I was burning the midnight oil trying to get caught up on a never-ending workload. At the time I was working for an online travel booking site. It was after 11, and the last thing I had to do for the night was to rename one of the hotels in our production database. So I wrote my query: UPDATE hotels SET name=‘Some Hotel Chain’; One problem, I FORGOT THE WHERE CLAUSE. Suddenly, over 5,000 hotels in our production database all had the same name. This was around 2003, so well before the time of point-in-time restores, and we were only backing up the database every week at that point. I was panicking. Fortunately, I had a dump of the production database that I had created only a couple of hours earlier sitting on my local hard drive. So thankfully, I was able to restore almost all of the hotel names, save for a couple that signed up after that data dump, and my boss was none the wiser. That’s when I learned that working late hours is not worth it, because at some point you are so tired that you can no longer make good decisions. 41:19 - I Want Your Job When I first started out I worked for a consultancy and they trained us in sales meetings to help managers get promoted because we were coming in to make them “look good”. This was okay b/c obviously, we were coming in as a contractor; however, after being laid off due to 9/11 (yes, this was about 20 years ago), I was looking for a new job and during an interview when asked where I’d like to be in X years, I mentioned to the hiring manager that I wanted to eventually do what he was doing. Well, I guess he didn’t take it that I wanted to make him get promoted to then take his spot. Safe to say I didn’t get hired. 🤦‍♂️😜 ××× SIIIIICK ××× PIIIICKS ××× Scott: Portable Air Compressor Wes: ESR Magnet Phone Mount Shameless Plugs Scott: Latest courses on Prisma and Astro - Sign up for the year and save 25%! Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off! 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 web dev horror stories — real things that have happened to real developers 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. Show Notes 03:36 - https://twitter.com/CameronPak/status/1445051951843061767 04:48 - https://twitter.com/susanlangenes/status/1445049321871712257 05:29 - https://twitter.com/DevJordanW/status/1445052979644706823 06:12 - https://twitter.com/HerbieDuah/status/1445088892177108994 07:04 - https://twitter.com/bbbryan14/status/1445400072921956357 07:43 - https://twitter.com/stephendennis30/status/1445074683062362114 07:59 - https://twitter.com/Tim__Moran/status/1445102727701221377?s=20 08:37 - https://twitter.com/SoyAlejandroAl/status/1445063677896450048 09:34 - https://twitter.com/sudonetizen/status/1445132694531231760 11:09 - https://twitter.com/chrislaughlin/status/1445049210840178690?s=20 11:58 - https://twitter.com/sbitaxi/status/1445208793072156675 12:44 - https://twitter.com/AlexHBruns/status/1445067663919755269 13:05 - https://twitter.com/costerad/status/1445069263568580616 14:02 - https://twitter.com/gcnx86/status/1445045635250638853 14:25 - https://twitter.com/JustMetMe_app/status/1445041678167920640 14:47 - https://twitter.com/alanshortis/status/1445048899899645959 15:50 - https://twitter.com/Swizec/status/1445191324215353347 16:17 - https://twitter.com/_RobJohansen/status/1445137057236467722 17:14 - https://twitter.com/fienen/status/1445040513678196743 17:57 - https://twitter.com/TechBill777/status/1445172824822452226 18:54 - https://twitter.com/Zircoz/status/1445041440770252806 Links https://twitter.com/wesbos/status/1445039778035032068 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks! 06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like. 11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I’m curious what you think about hosting your own MongoDB server? I’m relatively new to Mongo but want to start working with it for smaller projects. I’ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I’m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it’s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work. 14:42 - Mike: Not a question but more of a rant… It’s 2021, almost 2022, can we all stop using ‘foo’ and ‘bar’ and ‘baz’ when teaching a programming concept? I applaud both of you because I don’t recall seeing any of your content ever using such atrocious terms, however, I’m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ‘foo’ is just confusing to beginners. That’s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo 18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs? 23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don’t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that’s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this? 27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I’ve read about these topics and watched videos but haven’t really seen how to implement these things. Any good resource recommendations? 31:57 - Matt: How do you know if you can trust an NPM package, from an unknown developer, that does not have many GitHub stars and has relatively few downloads? (The repo that made me ask this question is https://github.com/Wondermarin/react-color-palette). NPM audit automatically runs when you install a package, do any of you ever use additional security checks? 38:32 - Yosef: Hi I’m a beginner front-end developer and I heard you saying that being able to copy prototypes is a valuable skill, so I found some Figma free template and I copied them, the question is can I put them in my portfolio or deploy them? 40:00 - Nick: Hey dudes! I picked up a freelance project to make a brochure-style website and found myself having trouble to decide on what tools to pick for this site. I wanted to ask you and get your take, what tools/tech would you use to build a brochure site? By this, I mean the site should have mainly company information that is ideally editable by the stakeholders and has a contact form. Thanks! 44:22 - Casey: Hi Scooter and Wild Wes! Why do I feel so dirty when I’m forced to use negative values in CSS? 45:45 - Gnommer: Do you use some cloud sync service to backup your directory with projects? I mean OneDrive, Dropbox etc. I tried to use it alongside with Git, and it just messed my files so badly. On the other side I feel very uncomfortable without any backup apart from Github. BTW, according to last Potluck: polish ‘ł/Ł’ is pronounced like ‘w’ in ‘what a sick podcast you have’. Best from Poland ;) Links https://www.ryzerobotics.com/tello https://www.mongodb.com/cloud/atlas https://snyk.io/ https://deno.land/ https://kit.svelte.dev/ https://astro.build/ https://www.gatsbyjs.com/ https://www.dropbox.com/ https://www.backblaze.com/ https://www.synology.com/ https://support.apple.com/en-us/HT201250 ××× SIIIIICK ××× PIIIICKS ××× Scott: The Way Down Wes: Wooster Shortcut Shameless Plugs Scott: Modern GraphQL with Prisma - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 handy utility functions with Just! 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 03:44 - What is Just? https://github.com/angus-c/just No dependencies It’s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5 06:46 - Some nice ones just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake just-compare 10:54 - Why? This is the NPM install of Stack Overflow copy+paste Handy as hell Battle-tested Lots of ways to do simple stuff Sometimes the simple stuff has weird edge cases - these are caught Sometimes your checks can be messy Check if an object is empty 25 lines Just install it 12:05 - Other Great to learn and test yourself There are tests for each function Run them See them fail Try and make it so all the tests pass without looking at the source Links https://github.com/angus-c/just https://github.com/antony 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, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:45 - Recording Setup Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter dbx 286s 09:13 - Notes Shows begin as a Notion doc Big outlines with a point-based outline to where to go Sometimes points are detailed, other times are just one-word reminders as to what to hit Sponsors pulled from a Notion relational table Shows are created in a kanban board but moved to a calendar view 12:37 - How do you find stuff to talk about?! Technical skills Hasty Tasty Potluck Game shows Collabs ShopTalk Collab Changelog Collab Soft skills Productivity Apps We Cooked It: Explainer Episode Add ideas to the list anytime it pops into your head 21:02 - Editing Podcast Royale We record a clap for syncing Upload to Dropbox for our editors 22:07 - Hosting Libsyn Archaic feeling, but covers everything 22:36 - The website Next.js Open source PRs are submitted adding the latest episodes 24:10 - Transcripts Generated 24:40 - Would you still start one? Podcast vs YouTube vs Twitch 29:20 - Getting popular / Marketing How do you do it? Consistency is key Need external audience 35:34 - Sponsors Five to six hours per week in prep Most of our sponsors are products we already used We sell and manage all our sponsors ourselves 42:17 - What about Patreon? Ad-free version? 46:04 - Live shows Confs Livestream Links Delicious Brains Syntax Ep 004: JavaScript Tooling LulaRich ××× SIIIIICK ××× PIIIICKS ××× Scott: Untold: Crime & Penalties Wes: Roadrunner: A Film About Anthony Bourdain Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 all things color in CSS, both current and coming soon! 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 04:39 - color-contrast() Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. 06:01 - Accent color https://davidwalsh.name/css-accent-color 07:34 - currentcolor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword 08:54 - Profiled color values - color() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() 11:00 - color-mix() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix() The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Would be handy for programmatically generating colors - 10% more blue for a border? Sure! 14:18 - Space-separated functional color notations rgba(255 255 255 0) instead of rgba(255,255,255,0.5) 15:28 - RGB and HSL with Alpha rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5) 18:22 - Hex + Alpha values RRGGBBAA How do you remember?!?! Transparent 21:49 - lch(), lab(), hwb() notation CIELAB color space aka Lab is a color space. A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color Lab is intended as perceptually uniform Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ Links https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://twitter.com/argyleink 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, 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. 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 02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you’ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro… do you keep the box? Why or why not? 06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app? 11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It’s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I’m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is…it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I’m afraid they’ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I’ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers! 16:14 - Scott, I just finished your “SvelteKit” course and now I’m working on “Building Svelte Components”. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it’s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I’ve only ever written unit tests with Jest in Vue. I’m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you’ve got on testing with SvelteKit would be much appreciated. I’ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you’ve both taught me so much! Thank you, peace, love, and happiness 20:25 - Hi Wes and Scott, I am weak when it comes to dev ops. I would like to confidently set up and deploy my applications on AWS and manage dev/prod environments. Any course recommendations to learn how to do this and how it all works so I really understand? If you don’t personally, can you tweet this out so other developers can share their thoughts? 22:30 - You both have praised MDX in the past but why would you use it? I understand that it lets you put JSX in your Markdown, but that seems counter to the purpose of using Markdown files for content. Markdown is a portable format for static content and independent of any front-end framework. That makes it a good choice for writing posts and rendering them in any site. Once you inject a React component into it, doesn’t that eliminate the portability and the static nature of Markdown? At that point, why not just have a dynamic website where you have complete control of how content is rendered? What are your thoughts? 27:14 - Hey Scott and Wes! I, like you both, am a developer with young kids (I have 3 boys age 6 and under). Needless to say, my house has a lot of energy in it. My job is quite flexible, which I appreciate, because it gives me some freedom to structure my day in a way that helps out my family. My question for you both is this: as a web developer with a spouse and young kids working from home, how do you both maintain a healthy work-life balance (avoid working too much, find time for yourselves, family time, etc.) Thanks so much! 33:46 - Should I write a portfolio site using just the three fundamentals (HTML, CSS, JS) or should I write them in something I am comfortable with such as Angular/React? Unsure if using a framework for a portfolio site is a good idea. 36:38 - How do you handle hosting when using WordPress as a headless CMS with something like Gatsby? WordPress needs good PHP hosting, while Gatsby needs good CI integration. 38:52 - How frequently do you use div tags, versus trying to find a ‘better’ tag? Love the pod btw. 40:48 - This is less of a question and more of a heads up for other listeners. Beware of scam job opportunities. I recently encountered a scam where they used a website that seemed like a very normal and reasonable job board for a major company. I went through the whole process until they asked for personal info, and I asked for verification of their person. They couldn’t provide it so I left. But they had profiles matching the actual employees at the company. They had emails. They had an HR department and employees. They had a very legitimate operation going on. Make sure to take a second and verify with the company before giving away personal information or depositing any of their money into your account. 47:38 - What percentage of North Americans keep their mobile device longer than three years? Five years? Eight years? I am a freelancer and I want to put a clause in my contract of what age of device my app will support, but I can’t seem to find this information. Just more general answers like “most people expect a phone to last two-three years.” Links https://kit.svelte.dev/ https://www.cypress.io/ https://www.svelteradio.com/ https://www.digitalocean.com/blog/ https://caddyserver.com/ https://daringfireball.net/ ××× SIIIIICK ××× PIIIICKS ××× Scott: LuLaRich Wes: Flame Bulb Shameless Plugs Scott: Web Components For Beginners - Sign up for the year and save 25%! Wes: Beginner JavaScript Course - Use the coupon code ‘Syntax’ for $10 off! 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 how much modern web development has taken from PHP! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 03:56 - Why much of modern web development is just recreating PHP Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP 05:44 - Mixing templating and logic We do this with JSX 07:39 - Each request has its own scope 08:57 - Massive standard lib Format a date? No sweat! Image resizing? Sure! Audio bindings? Sure! 10:16 - URL-based routing Next.js pages Serverless functions 11:13 - Server-rendered Hotwire 11:38 - $_GET, $_POST, are just available Next.js hooks 12:29 - Variable interpolation 12:59 - All-in-one frameworks Laravel did it CakePHP CodeIgnighter 13:32 - Direct DB access SQL statements 14:37 - Why do people hate PHP? WordPress Inconsistent API Their first code was PHP and they sucked PHP has come a long way It used to not be safe Blocking by default - no async/await 17:48 - Why is JS still better? Shared code between frontend and backend Single language Huge ecosystem (could be a con) Links Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles https://vuejs.org/ https://www.hey.com/ 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, Scott and Wes do a crossover episode with Changelog’s JS Party! Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin! .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:49 - Frontend Feud Rules 04:06 - Round 1 10:28 - Round 2 17:26 - Round 3 25:37 - Round 4 35:15 - Round 5 42:03 - Round 6 Links Changelog JS Party Chris Coyier Dave Rupert Wes Bos Scott Tolinski Jerod Santo Amelia Wattenberger Divya The Feud At The Seventh Mountain Amelia’s repo visualizer CSS-Tricks freeCodeCamp Wes Bos’ courses Changelog Merch Level Up Tutorials Shameless Plugs Scott: All courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 hottest new tech they love! 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. Show Notes 03:30 - Lucy Language https://lucylang.org/ A concise language for describing Finite State Machines 06:10 - MDSvex https://github.com/pngwn/MDsveX Mdx for Svelte Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities https://github.com/rehypejs/awesome-rehype 09:56 - RECut https://getrecut.com/ 12:26 - Fig https://fig.io/ It’s an app you install on your computer, it adds autocomplete to your terminal Works with most popular terminals Autocompletes git commands NPM commands + tons more - npm install ___ works Adds descriptions of what each command does Mac only - again another reason why Mac is best! Themeable Why not use Fish/ZSH? This isn’t a replacement for anything, it’s just autocomplete on top These fish plugins are to vim, as Fig is to VS Code Better UI is KEY 15:56 - Warp https://www.warp.dev/ Rust-based termnial Very fast Extensions and themes Share commands and sessions Great for remote server dev Share terminal state - with share links 19:33 - Raycast https://www.raycast.com/ App launcher File Finder Workflow runner Everyone is asking why is it better than Alfred better UI Better outputs math Better defaults - currency conversion Fast as hell Better integrations More Flexible 21:26 - Table Plus https://tableplus.com/ Fantastic little DB tool 23:59 - Obsidian Update https://obsidian.md/ Wes: I haven’t got into it - find myself still going back to VS Code 26:50 - Descript Update https://www.descript.com/ All-in-one audio and video editing, like a doc Links https://chriscoyier.net/ https://hyper.is/ https://www.alfredapp.com/ https://strapi.io/ https://studio3t.com/ https://www.mindnode.com/ https://remarkable.com/ https://www.notion.so/ https://joplinapp.org/ http://www.telestream.net/screenflow/overview.htm https://shinywhitebox.com/ 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, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:28 - Thoughts Apples to oranges, so unfortunately, no super legit ability to compare. SvelteKit isn’t analogous with a custom React setup that uses CSR SSR is usually going to be faster - we can ship less JS Some big things changed beyond React → SvelteKit Apollo → GFetch Plyr → Vime HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer. Whole conversion took a couple of months. Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough 16:14 - Converting React components to Svelte useState becomes just a straight-up variable Graphql calls were hooks now just imported generated functions Remove extranous fragments Convert {things && } to {#if thing}{/if}  becomes  24:06 - Spark joys State Our checkout flow became way more transparent, way easier with Svelte stores Render flow Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to Overall developer experience It’s honestly a joy to work in and I don’t want to go back Making a library Package dir, new SvelteKit project, svelte-kit package I made svelte-toy - https://github.com/leveluptuts/svelte-toy svelte-element-query - https://github.com/leveluptuts/Svelte-Element-Query svelte-simple-datatable fork Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props Animations are all done with Svelte’s internal animations lib 32:45 - Hosting adapter-node Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU, Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere 35:50 - Things to do Admin tools Pancake lib for charts 37:00 - Challenges ESM is not always smooth sailin Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod. Solution was to use lodash.has as the dependency Apollo included all React as a dep unless you import from @core TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible Drag animations Cloudinary 42:46 - Wes’ questions What about the ecosystem? What about forms + DOM data? Serverless functions? Do you always bind to state? Or just access directly? formData = writable({ title: "yo" }) {$formData.title} Is it stable? Deno - Snel Links https://leveluptutorials.com/ https://vitejs.dev/ ××× SIIIIICK ××× PIIIICKS ××× Scott: The Skeptics Guide To The Universe Podcast Wes: Pressure Washer Nozzle Shameless Plugs Scott: Web Components 101 - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 webhooks — one of those concepts that seems a lot scarier than it actually is. 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 03:42 - What are webhooks? User-defined HTTP callbacks When something happens, ping this URL with this data Examples: When something sells, ping this URL When someone reverses a charge, lock their account Trigger a build of the website when the content changes Then someone buys a shirt, generate a shipping label and save it to the DB 07:57 - Sending End Can be a great way to hook two services together 09:13 - Receiving End Often you will be the one that accepts the webhook ping In this case, you set up an endpoint 11:00 - Payloads Almost all will send a JSON body that you parse out The method send is variable 11:51 - Auth On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not. On the sending end, you can often set up headers with auth - same with the method Can be a replacement for a serverless function 13:18 - Testing webhooks Can be a pain in the ass ngrok - expose locally localtunnel Insomnia Postman Stripe has a great VS code extension Snipcart has an awesome dashboard Will also tell you when one failed webhook.site https://expose.dev/ IFTTT Zapier 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, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it. 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. 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 04:50 - Regex indicies New d flag in a regex https://regex101.com/ This will tell you the indexes (indicies) of the regex matches Handy if you need to highlight or replaces matches in a string We can ask for the start and end positions of each matched capture group 07:16 - Class updates Private fields Properties and Methods to be kept private Prefix them with a # =Helpful for internal state and methods which should not be accessed directly or at all by external In React how we have __INTERNTAL_NEVER USE THIS class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside Getters and setters introduced in es5 https://www.w3schools.com/js/js_object_accessors.asp class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works 09:07 - Class fields This may seem super old because we have been polyfilling it forever Right now if you want an instance field on a class, you need to declare it in the constructor Now we can just declare them inside the class 10:36 - Static fields and methods As above can also be static with the static keyboard Works for methods too Explain what a static method is 13:17 - Top level await So handy in modules. Need to pull in some data? Simple. 15:19 - Ergonomic brand checks for private fields Used for checking if a private field on a class exists using the in keyword 16:00 - .at() method Strings and arrays - we can use square brackets to reference items of the array Super handy for grabbing the last item of an array // 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B Why not use array[-1]? We used to use slice(-1) What about indexOf? 21:34 - Handy hasOwn method https://github.com/tc39/proposal-accessible-object-hasownproperty 24:51 - Class static block A static block allows you to run code before creating an optional static property during initialization https://github.com/tc39/proposal-class-static-block Links https://github.com/tc39/proposals/blob/master/finished-proposals.md ××× SIIIIICK ××× PIIIICKS ××× Scott: Ultraloq Smart Lock Wes: Magnatiles Shameless Plugs Scott: Web Components Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Wes’ new satellite internet setup — best use-cases and how to set it 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 04:06 - Rural internet is huge for: Access to information Remote work Opens up job opportunities for many residents who can’t relocate due to family Home values Big city folk moving into rural areas and driving prices up is another issue altogether Smart rural home 05:46 - Previous setup We have a cottage LTE Routers Yagi Antennas Worked well, but slow $4/gig over 100gb Grey market - one went up/down Alternatives WISP - no access XPLORNET @ (hughesnet) - BRUTAL Bell LTE - $$$ - slow 08:35 - The signup, install, price $129 CAD Deposit ($100 USD) $650 for the dish $120/month Unlimited bandwidth Needs a clear view of the northern sky Clear from obstructions is key Every 1 foot up is 2 foot of obstructions cleared I put it on a 25ft piece of wood Bought a pipe adaptor from Starlink 09:59 - The performance These numbers are not impressive to anyone with fiber, but are LIFE CHANGING to rural folks From 30mbps - 200mbps down - some users posted ~350 down Upload from 25mpbs - 80mbps (better than you can pay for where I live in the city) Ping is around 40ms Downtime is measured in seconds Youtube streams super smoothly Zoom works great Facebook + Instagram issues Many reported changing DNS fixed it 14:21 - The equipment Starlink comes with a router Does not support bridge mode Doesn’t have WPS Only one hard-wired port POE-only UniFi Dream Machine Three access points POE switch for Starlink Router Gives you stats The ethernet is hard-wired into the dish, so you have to drill a huge hole in the house Links Starlink Wyze UniFi Dream Machine 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide 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 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project? 05:26 - What ever happened to CSS Houdini? 08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it. 11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud? 15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career? 18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation? 22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription! 29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers. 32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier? 37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript. 40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any! 43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed? Links https://sass-lang.com/ https://postcss.org/ https://ishoudinireadyyet.com/ https://astro.build/ https://kit.svelte.dev/ https://www.widevine.com/ https://frame.work/ https://www.prisma.io/ https://www.mongodb.com/ https://www.postgresql.org/ https://mongoosejs.com/ https://keystonejs.com/ https://frontity.org/ https://webpack.js.org/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Hot App Wes: Pet Food Mat Shameless Plugs Scott: Web Components Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Typescript strict flag — what it does and why you might use it. 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 02:50 - What is it? Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior. 03:26 - noImplicitAny The any type in TypeScript is exactly that - it can be anything. TypeScript will try to infer the type. When it can’t it will be any. Sometimes you need any, but if that is the case, you must explicitly type it as any. If something is implicitly any - it might be a mistake, or you forgot to type it. Risky! 06:01 - noImplicitThis You must type this - it can’t be implicitly inferred. 06:47 - strictFunctionTypes If you have a type that is a function and it doesn’t 100%. 07:44 - alwaysStrict Always turns on strict mode. You can’t do things like redeclare var variables. 09:25 - strictNullChecks Makes you check that the item is actually there before accessing a value or method from it. Imagine you filter or find on an array, or query selector a DOM element. There is a possibility that nothing is there. strictNullChecks makes you check that it’s there - like an if statement. Optional chaining is super handy here. 11:18 - strictBindCallApply 12:38 - strictPropertyInitialization 13:37 - useUnknownInCatchVariables Links https://www.typescriptlang.org/tsconfig#strict 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, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide 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 03:10 - What is STUMP’D? 04:27 - What is a first class function? 06:27 - What is the purpose of using object is method? 09:31 - What is the purpose of Error object? 11:00 - What are the advantages of minification? 12:37 - How do you declare namespace? 15:38 - What are JS labels? 19:20 - List the methods that are available on a WeakSet? What is the difference between a set and a WeakSet? 23:33 - What is the use of preventDefault method? 26:15 - What is a spread opperator? 27:35 - What is the output of below spread operator array? [...'John Resig'] 30:19 - How do you load CSS and JS files dynamically? 32:00 - What are tasks in event loop? 34:15 - What is a WeakMap? 37:35 - How do get query string values in JavaScript? 40:50 - What is the purpose of some method in arrays? 42:15 - How do you delete a cookie? Links https://30secondsofinterviews.org/ https://www.interviewbit.com/javascript-interview-questions/ https://github.com/sudheerj/javascript-interview-questions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label https://es6.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Builderment Wes: Lawn Mower Blade Balancer Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 toxic clients — how to identify them, and what to do about them. 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. Show Notes 05:33 - Warning Signs of a potential toxic client Doesn’t have project well thought out. Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget. Ill Communicator Contacts you at odd times. Thinks that you should answer every email in an hour. Contacts you in inappropriate ways, via text message, social media. OR doesn’t respond to emails in a timely manner giving you blockers. Jerk The rude client Thinks they can be rude because they are giving you money Hundreds of emails Tries to be flashy upfront (dinners, etc.) Scatterbrain or way too big. Facebook for nurses 18:06 - What to do about toxic clients Communicate your needs clearly. Set expectations. “I work best when…” “I answer emails once every two days” Set clear deadlines for deliverables, feedback and revisions (one revision backed in, more at x hourly rate, etc.). Just be VERY clear. If something doesn’t work for them, they will hopefully tell you. Get things in writing. Put things clearly in a working agreement for your client to approve. That way you have something to show in case things go south and you can say, “You agreed to the following things”. Fire them You can fire clients. Honestly, some of them just aren’t worth the time and effort. It’s usually the cheapest clients who demand the most from you. Don’t let them take more of your time and energy than they are paying for. Firing clients is very simple. Hi so and so, I don’t feel like we’re a good match for this project, so I’ll be canceling our work agreement. Good luck on your project. 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, Scott and Wes talk about advice for new devs, our advice and opinions for how new devs can level 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:59 - Get comfortable with your code not working All of our code is broken much of the time. 02:40 - Compound learning and momentum is your biggest tool There is no formation without repetition. It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs. 04:05 - Learn to read error messages Is this error coming from my code? Is this coming from the library? If so, maybe the library wasn’t expecting that. Is this coming from the browser? An extension? Is it even related? Stack trace is a treasure map 09:42 - Take the time to learn the concepts that scare you They are often easier than they seem (though not every time). 10:40 - We all struggle This stuff is hard — give yourself a break. 12:56 - Taking a walk is good for solving bugs It’s hard to walk away from broken code, but it really helps. 14:33 - Get comfortable with the command line You’ll need it 18:09 - The ability to replicate a design pixel perfect is a valuable skill You will be shocked at how many devs can’t or don’t do this. If you want to avoid spending extra time on something, don’t make the designers tell you to go back and fix simple spacing, color, and detail things. 21:26 - You are on a team Don’t get stuck in the "us vs them" mentality of internal company teams (e.g. devs vs designers). You are all working together to make something. 24:10 - You are not an expert Even if you think you are an expert, you should always be seeking out alternate viewpoints and ideas. You are a student forever in this game. 26:14 - Scaffold with comments It helps keep you organized once you get into the mess 28:30 - From Twitter Tweet thread - https://twitter.com/wesbos/status/1417139639861735424 29:30 - Ben Newton Soft skills are about as important as coding skills if you want to go far. https://twitter.com/BenENewton/status/1417140062211526658 32:46 - Eric McCormick Don’t be afraid to push yourself beyond your comfort zone. https://twitter.com/edm00se/status/1417140503527792640 33:31 - Jason Liggi You don’t have to code for fun. https://twitter.com/Liggi/status/1417141600124346371 35:34 - Andrew Nickerson Start by building a project that’s interesting to you. https://twitter.com/Nickvisual/status/1417140742531674118 37:15 - Michael Powers Ask questions, break things once in a while, learn vanilla everything even if it feels like a waste of time. https://twitter.com/mgrpowers/status/1417141364525912064 39:33 - Jason Liggi Doesn’t matter how long you do this job, MOST stuff out there will probably be unknown and confusing. https://twitter.com/Liggi/status/1417141322478235653 40:14 - Swashata Learn to read documentation https://twitter.com/swashata/status/1417142055436910598 49:59 - Max Stoiber Know your tradeoffs. https://twitter.com/mxstbr/status/1417142461709828101 43:34 - Pat Clarke Build a rapport with PMs/clients beyond the technical. https://twitter.com/LeftShotDev/status/1417142505494269954 44:21 - Musa Barighzaai Leave things better than you found them. https://twitter.com/mbarighzaai/status/1417142734993907715 45:20 - David Moore Build things that excite you. https://twitter.com/DavidIMoore/status/1417145783581741067 Links https://johnlindquist.com/ https://github.com/albertlauncher/albert ××× SIIIIICK ××× PIIIICKS ××× Scott: Raycast Wes: Amazon iPhone Repair Kits Shameless Plugs Scott: Web Components 101 - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 why people hate CSS, some common issues, and how you can level 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. 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 03:20 - Layout is hard block vs inline vs inline-block Learn what this means! Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid Avoid floats Wes’ Flexbox Course Wes’ CSS Grid Course Scott’s Modern CSS Layouts Course 07:43 - I can’t get my thing to get the right style Use a scoping system like BEM, CSS in JS, CSS Modules Don’t style via IDs Avoid !important 11:00 - My thing isn’t looking the way it’s coded Dev tools Write CSS in the browser Check class names 12:11 - I don’t know if I can delete this CSS Use tools like https://purgecss.com/ http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ 15:51 - Look at things holistically 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about memoization, how to know when you’re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:07 - Can you explain the concept of memoization in JS? 07:27 - I’ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams “you’re ready for a full-time job”? 09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn’t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it’s very close, and I never looked at their code base, so there’s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else’s design. I’m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this? 16:36 - How do you decide how specific a (React) component should be? 22:03 - My question is about the npm run eject feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists? 24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on leveluptutorials.com using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique? 31:13 - I’m setting up a webinar. I’m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I’m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they’re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I’d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover? 33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site? 38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What’s your approach? 41:07 - Can you disable local fonts from the OS and check if the site actually loads them? 46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do? 49:09 - Question to Scott: Have you ever thought of calling your students Scott’s Tots? Links https://mux.com/ https://vimeo.com/ https://github.com/cure53/DOMPurify https://wesbos.com/sanitize-html-es6-template-strings https://svelte.dev/ https://vercel.com/ https://begin.com/ https://en.wikipedia.org/wiki/Scott%27s_Tots ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave Season 2 Wes: Underground Wire Locator Shameless Plugs Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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   tag — why it’s weird and wonderful, and what you can do with it! 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. 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. Show Notes 04:16 - What is it? https://ryanflorence.dev/p/ship-weird The link tag is weird. First, it’s not for links! It’s for establishing a relationship between the current HTML document and a resource. 05:11 - CSS / Media attr 07:13 - Web fonts 08:09 - Favicons Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons 08:36 - Preload + Prefetch Resource Audio, document, fetch, font, image, script, style, track, video, worker + more 10:15 - Fetch request (shoutout Ryan) 11:27 - Preconnect Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. 13:01 - Module 13:30 - Integrity SHA 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, Scott and Wes talk about the basics of building a website — how to get started for beginners! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:20 - HTML HTML is the language you write to get text and elements to show up on the screen Elements can describe the content they contain p img Or be structural and describe the areas of the website div h header, footer Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements HTML elements have default styling applied to them before you write any CSS This comes from the browser and can be manipulated However, by default all elements are either block or inline-display 08:11 - CSS If HTML is the bones, CSS is the clothes and skin CSS dictates how a website looks Without CSS, you have text on a blank page and images CSS stands for Cascading Style Sheets (“cascading” being the key word) Adding CSS to a page Link tag Style tag Inline styles Selectors You can select an element on the page via element, class, id, attribute Syntax is selector, brackets, property, value Property A property is what you are changing (e.g. background-color) Value determines how the thing looks background: red; Specificity Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS. People develop systems like BEM to organize this General rules - Use elements for base styling and classes for specific styling. Don’t use IDs for styling. !important exists to override everything, but as a general rule, NEVER use it. Seriously. Some interaction Most interaction is done in JavaScript, but CSS has some basics hover, active, focus Pseudo selectors You’ll often see people reaching for libraries to make CSS easier and more consistent Common examples are Bootstrap, Foundation, and TailwindCSS For the most part you’ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS. In addition to properties, you can now write your own custom properties for CSS. While this could be seen as an advanced technique, I believe the new normal is CSS variables first. CSS variables are indicated by —variableName: value; where variable name takes the place of a property. You can then use the variable via var(—variableName) in place of a property. This allows for easy duplication of same values across your style sheet. 37:08 - JavaScript JavaScript is used to add interaction to a website It makes your website dynamic JavaScript the Language We have a base programming language that has nothing to do with HTML It has things like: Variables - ways to store things Numbers + Math Data Containers - Objects and Arrays Functions - Code grouped together to achieve a certain purpose It also has a “Standard Lib” which means JavaScript comes with built-in support for doing common things: Formatting time + money Alerting the user Logging a value to developer tools Capitalizing things Sorting lists of things Round or randomize numbers Fetch data Talk to a sever Promises Logic and flow control JavaScript the DOM When the HTML is loaded, it’s parsed into something called the DOM (Document Object Model) Events JavaScript is mostly event-driven - when something happens, do something else When you click something and want something else to happen There are lots of events mouse, touch, pointer Ready Forms Submit, change, keyboard, etc. Can be used to fetch data fetch() - you’ll often hear it called Ajax, or XMLHttpRequest Can be used to make more HTML Whole set of APIs for creating elements The DOM can be traversed Links https://css-tricks.com/ https://getbootstrap.com/ https://get.foundation/ https://tailwindcss.com/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Tony Hawk’s Pro Skater 1 + 2 Wes: Mini Split Air Conditioner Shameless Plugs Scott: 1: Level Up Tuts Pro - Sign up for the year and save 25%! 2: Become a Level Up Tutorials Author Wes: 1: All Courses - Use the coupon code ‘Syntax’ for $10 off! 2: Javascript Notes & Reference 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 TypeScript utility types — what they are, why you might use them, why they exist, 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 03:35 - Levels of using TypeScript Typing your code Typing your code, but getting a little bit more dynamic using utility types Creating your own utility types! TypeScript is a language in itself Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/ https://www.typescriptlang.org/docs/handbook/utility-types.html 07:29 - Partial 08:23 - ReadOnly 09:00 - Required 09:33 - Record A record is an object type that is a bit more restrictive Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk. 10:47 - Omit I find this one handy when I want to create a “Create Item” type, where it has all the item fields except the ID field 11:34 - Pick Given a type, pick these properties 12:39 - Return Types Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function. 13:30 - Case These case types are useful for when you are doing template literal types Uppercase Lowercase Capitalize Uncapitalize 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you’re just starting out, scoped CSS, 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. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Show Notes 01:48 - Most small businesses I know have heard of WordPress and it seems like it’s the industry standard for brochure sites. I’m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to “sell” people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I’m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance. 08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and how would you decide which to use? 16:03 - I recently took Wes’ Advanced React course and went on to build my first custom React app! Thanks Wes! When the time came to deploy the app, I was surprised by the asymmetry in hosting options for the front vs. backend. It seems that there are 1000 slick, free-teir options for hosting my front-end. But finding a host for my Keystone backend: barf. I messed around with Heroku but troubleshooting was a nightmare, and I eventually settled on a Digital Ocean droplet. My inner system admin is secretly happy to have another OS instance to manage, but I hate paying 5 dollars a month to host a silly project that will probably never be seen by anyone, and I’m already irritated with the amount of care and feeding the backend needs. What gives? Why are there so many choices for frontend hosts and so few for the backend? Are there hosted backends that have auth, database, image hosting, etc and take care of the nitty-gritty with a newbie-friendly free-tier? Maybe I should I be looking into serverless? 23:21 - Since Drupal has evolved beyond awkward kloog of v7 entity/ctools/json-services/phptemplate erc into v9 with excellent graphql/json/rest support and tomb(?) for non drupal web would you recommend Drupal as for a blogger/businesses’ internal network doc/publishing/communications system (ie Drupal not as website itself)? 29:43 - I have just started my web development freelancing business and I feel like I am having a hard time getting a lot of response from small business who currently don’t even have a website (or have a terrible one). Is there any advice you can give about talking people into hiring a web developer when they CLEARLY need help? I plan to use NextJS and Sanity for all of my sites. My first client project is already built using it and it was a great developer experience! 34:30 - What would you guys consider the best alternative to the BEM naming convention? I personally follow a method with very few classes (I’ve seen this called GPS) which takes advantage of the CSS cascade, but I do think it may suffer from readability problems if I handed my stuff to another developer to work on. Interested to hear your thoughts. 39:16 - I have been self teaching myself web development for a little over a year now and your show has been a big help! I am getting to the point now where I feel I am nearly qualified for jobs and will be starting the application journey soon. I currently work in supply chain management at a big corporation with a background in industrial engineering (of which I hold a Bachelors degree). My question for you is - seeing that I have work experience at a big company and a STEM background, do you think this holds any weight in terms of being qualified for a dev job? What I am mainly wondering is how much I should leverage this during interviews and on my resume. Links https://www.gatsbyjs.com/ https://tina.io/ https://vercel.com/ https://www.netlify.com/ https://circleci.com/ https://github.com/Nexedi/renderjs https://keystonejs.com/ https://www.drupal.org/ https://medium.com/@jescalan/bem-is-terrible-f421495d093a ××× SIIIIICK ××× PIIIICKS ××× Scott: I Was There Too Podcast Wes: Mattias Random Stuff YouTube Channel Shameless Plugs Scott: Advanced Svelte Techniques - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 launch a new series called Git the Latest — New Things In Tech. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 03:47 - GitHub CoPilot AI-powered autocompletion Not going to take your job 07:18 - Next.js 11 Image updates Multiplayer 08:20 - Astro Build faster websites with less client-side JavaScript 09:50 - Notion API Get database Query database Pages Block children 11:27 - Petite Vue Petite Vue is an alternative distribution of Vue optimized for progressive enhancement Similar to Alpine.js Without a build step 13:58 - Stackblitz Node in the browser Not in the cloud Rolled 15:22 - Solid.js Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs. 16:37 - Stately From the company that made xState 18:05 - Web3 Let us know if you want a show about it Ethereum JavaScript API Apps that run on the Blockchain Links https://alpinejs.dev/ https://svelte.dev/ https://xstate.js.org/ 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, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 07:23 - What’s your favorite stack right now? 28:52 - What are your thoughts on WordPress? Do you still use it? 33:59 - What do you want for listeners of Syntax? 38:21 - How do you deal with FOMO / the pressure to learn new tech? Links https://shoptalkshow.com/469/ Chris Coyier Dave Rupert Syntax 372: CSS Container Queries, Layers, Scoping and More with Miriam Suzanne https://svelte.dev/ https://kit.svelte.dev/ https://mercurius.dev/ https://www.prisma.io/ https://keystonejs.com/ https://graphql.org/ https://redwoodjs.com/ https://nuxtjs.org/ https://astro.build/ https://vercel.com/ https://wordpress.org/ https://dayoneapp.com/ https://automattic.com/ https://mongoosejs.com/ https://www.blink182.com/ https://newsroom.spotify.com/2021-02-22/a-new-era-for-podcast-advertising/ Chase Reeves YouTube Channel https://xdebug.org/ ××× SIIIIICK ××× PIIIICKS ××× Dave: 1: Haikyu!! 2: Nintendo Garage Chris: Ray App Wes: 1: Connor Ward YouTube Channel 2: Ryan Knorr YouTube Channel Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 favicons. Favicons are a bit of mystery and something people don’t talk about that often. 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 03:48 - What are favicons? Requesting favicons by default /favicon.ico 07:38 - Sizing favicons 16x16 is OG - don’t do that now You can specify multiple sizes 09:41 - File formats .ico files .png favicons 13:40 - Animated favicons Canvas Base64 11:36 - SVG favicons 17:19 - Dark mode favicons 18:55 - App Coloring Isn’t there a new Safari version? Links https://en.wikipedia.org/wiki/Favicon https://caniuse.com/ https://keycode.info/ https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons https://fav.farm/ https://deno.land/ https://uses.tech/ Missive 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more! .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3? 8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project. 11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong? 19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?) 25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward. 27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this. 30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I’m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it’s hard sometimes if I don’t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they’re doing. I’m just afraid if I leave I won’t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated. 34:24 - Unpopular opinion: Authentication isn’t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions? 40:21 - What are your thoughts on ReScript as an alternative to TypeScript? 44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it’s a big deal - was just curious of it was to keep up with costs or just because you could and then you’d make more? Either way, the show is awesome and really appreciate your opinions on everything! 48:01 - Have you tried Angular 12? I’d think you’d be pleasantly surprised if you gave it a chance! 52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction. Links Svelte Create React App Next.js Vercel iShowU Descript Screenflow Aria Air FitBit Apple Health https://www.gov.uk/ Keystone rescript TypeScript Angular Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript Puppeteer uses.tech wes.tech ××× SIIIIICK ××× PIIIICKS ××× Scott: SvelteKit Wes: Wyze Sprinkler Controller Shameless Plugs Scott: Svelte Components Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Stylelint, what it is and why you should use it! 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. 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. Show Notes 03:15 - What is a linter anyway? Why do you want to lint your CSS? Does stylelint fix errors or just tell you errors? 04:42 - Getting setup .stylelintrc stylelint extension Sass High perf animations stylelint order Max nesting depth Declaration strict value { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links https://github.com/stylelint/awesome-stylelint JSLint JSHint ESLint VS Code 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, Scott and Wes talk about everything coming in React 18! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Show Notes 04:32 - Automatic Batching Don’t worry about re-renders 08:32 - New Render API const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!) 10:44 - Suspense }> Suspense is basically a promise resolver component - nothing inside will render until promise is resolved. SuspenseList lets you coordinate the order in which loading indicators show up. 16:43 - StrictEffects Mode https://github.com/reactwg/react-18/discussions/19 Will allow components to mount, unmount, and mount again Will help with fastrefresh and really good dev experience 18:43 - useTransition() Hook Not an animation hook. They named it this because of the future ability to add animations to React core. Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete. We classify state updates in two categories: Urgent updates reflect direct interaction, like typing, hover, dragging, etc. Transition updates transition the UI from one view to another. 23:11 - SSR Improvements React.Lazy will work on the Server Finally! https://github.com/reactwg/react-18/discussions/37 Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs. React Server Components 34:45 - ELI5 https://github.com/reactwg/react-18/discussions/46 36:37 - Next.js Next.js will probably have support for a lot of these features soon. Links https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj https://github.com/reactwg/react-18 https://github.com/reactwg/react-18/discussions Svelte Syntax 127: Hasty Treat - React Suspense Deno ××× SIIIIICK ××× PIIIICKS ××× Scott: SoundSource App Wes: The Changelog 443: Exploring Deno Land Shameless Plugs Scott: Building Svelte Components - Sign up for the year and save 25%! Wes: Beginner JavaScript - Use the coupon code ‘Syntax’ for $10 off! 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 modern build tools, comparisons between them, and makes them modern and next-level. 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 03:08 - Next Gen Bundlers are here! They are easy They are fast They are bundlers They are code splitters They are dev environments HMR / Fast Refresh 07:13 - What do they use under the hood? Parcel uses SWC (Rust) Vite uses esbuild (Go) 10:29 - How do you use them? Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there They have adaptors for different types of files CSS Images Etc. You can also point it directly at files 14:59 - Common use-cases React / JSX OOTB Vue Svelte TypeScript Both just work Custom Babel config Plugins for both Sass Vite: Detects it, asks to install it Parcel: Detects it, installs it for you PostCSS Processors 20:29 - Custom API Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed. Example use-case: a really nice WordPress dev package. 20:57 - Which one? Both are really good! Parcel 2 has been in dev for 2+ years - unsure when it will launch. Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev. Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.) Life is good! Links Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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, Scott and Wes review your portfolios! 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 03:59 - cudd.io Shared component animation between home / about really nice Readable, clear Simple Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2 Nice SSR from Next.js CSS vars Very tall cards without much text, looks like a mistake Better on a short browser window - peep the tall and skinny Card heading should be h3 or h4 10:35 - damonbolesta.com Nice design = super fun! Good color palette Shows your skills straight up Animation Not accessible - EASY fixes with Axe Dev Tools Text on background images hard to read White text on buttons Bold some words in your bio Border radius 21:52 - walterkjenkins.com Map is fun Contrast issues with the color choices Transparency not needed on body content Cursive font for links / buttons is a no for me dog Labels on social media icons Hero overlaps section below it Maps data processing should be h4 29:40 - suhit.me This is an example of a really good one Wicked domain name Design is ON POINT, like this is the type of polish I like to see - I’d hire on this Can’t get enough Inter font Fun little animation I’d go a little easier on the box-shadow Github even has a custom readme Resume Very modern - JS, TS, Bootstrap TypeScript A+ Drop the “5” and “3” from “HTML” and “CSS” I’d add color to the resume, its likely not printed Don’t need to say Github and LinkedIn in front of the URLs 37:20 - jacobpawlak.com Initial loading is great - transitions are hot Typography looks nice - not sure about those serif all-cap nav items Slider not very usable View circle on hover is cool, but I’m not sure about following your mouse, covers text T-shirt portfolio is awesome Fun little bits in the footer SSL is broken - fix that sh!t Links don’t show over background images - common issue today External links should probably be indicated as such HTML, paragraphs as h3 & h4, h5, should be - (i.e. “here are a few of my recently completed…” should be a ) Design of resume is KEY - different colors, eh? 47:04 - mrtnvh.com This is a good example of subtle flex of skills FAST AF Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites) Personal Photo A+ Position sticky Love the skills layout on the about page Email is a button I can’t copy your email We have mailto links - don’t reinvent A+ Links Top Chef Syntax 354: The Surprisingly Exciting World of HTML Elements ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: WAGO Lever-Nuts Shameless Plugs Scott: Building Svelte Components - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 define some JavaScript Buzzwords and talk about what they mean! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 03:24 - Synchronous / Async 05:23 - Multi-threaded JavaScript has a single “main thread” But you can have more threads with web workers 08:12 - Blocking JavaScript can stop other things on the page from running A script tag can block HTML from being parsed Most stuff in JavaScript is non-blocking Node.js write to filesystem can be blocking 10:27 - Concurrent + Parallel JavaScript start/stop are concurrent The API runs on a different thread Doesn’t REALLY matter https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html 13:22 - Consecutive / Waterfall One after another 13:48 - Callback A function to run when this thing happens or is done Click event callback Websocket on data callback Like a tweet stream Data fetch callback Almost entirely replaced with async + await http://callbackhell.com/ https://caolan.github.io/async/v3/ 17:56 - Script Tag Async + Defer Doesn’t block other content Runs when ready - doesn’t care about DOMcontentLoaded Wait until the page is loaded before running If the script tag is above content, don’t wait for it Good for things that aren’t called on page load 21:54 - Lazy Load it in later - maybe when it’s scrolled into view, or as needed Not mission-critical 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, Scott and Wes talk about the Dev Tools Elements Tab — all the features, and when you would use them! 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 03:13 - Elements Learn to open the Elements panel and the console right away — right-click inspect element is weak! Drag-and-drop elements Edit as HTML Click to select use in JS console $0 → Add Attribute Breadcrumbs Flex (Chrome now!) Break on → Node removal Scroll into view Expand / Collapse 16:59 - Styles :hov .cls Element style Layout - Box Model Layout - Grid Layout - Flexbox Toggle Print/Light/Dark 25:03 - Panel Escape to open close No longer has to be JUST Console Computed Styles Great to find out what value it’s actually using without scrolling through the cascade Toggle browser styles on and off Fonts Tab Super handy to find the used font, spacing, size, weight, etc. You can also see all fonts used on a page Animations Tab Changes Shows the CSS that has changed since you have been goofing around. 38:18 - Settings Show what’s new https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo Experiments 43:39 - Compatibility Links Firefox Chrome Canary Brave Can I Use ××× SIIIIICK ××× PIIIICKS ××× Scott: Problematic Roller Coasters Wes: Scrapyard Finds! Repair-A-Thon! Cordless Tools Galore! Shameless Plugs Scott: Svelte Kit - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 seven new JavaScript proposals — what they do, where they’re at, and how you might use them. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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 03:32 - Seven new JavaScript proposals https://github.com/tc39/proposals 06:25 - JSON Modules https://github.com/tc39/proposal-json-modules Builds on the import assertions No named exports Not executed, to avoid security issues Not in Node yet 09:55 - Array Find From Last https://github.com/tc39/proposal-array-find-from-last The problem: you need to group together async code.The only way to do that right now is to wrap it in a function. 11:40 - Async Do https://github.com/tc39/proposal-async-do-expressions Async do will allow you to group together a block of code and mark it as async. No need for an iife Downside to this is that it’s a code block, so if you need to return any values, you’ll need to jump that up a scope level. Promise.all([ async do { let result = await fetch('thing A'); await result.json(); }, async do { let result = await fetch('thing B'); await result.json(); }, ]).then(([a, b]) => console.log([a, b])); 14:33 - Change Array By Copy https://github.com/tc39/proposal-change-array-by-copy Like old array methods, but returns a new array rather than mutating 17:48 - Temporal https://github.com/tc39/proposal-temporal Stage 3, looking good! Amazing, large, very good Date API Syntax 295: Hasty Treat — Temporal Date Objects in JavaScript 18:35 - As Patterns https://github.com/zkat/proposal-as-patterns Scott don’t get it Stage 0 when ([ ‘go’, (‘north’ | ‘east’ | ‘south’ | ‘west’) as dir ]) { … } 20:47 - Pattern Matching https://github.com/tc39/proposal-pattern-matching VERY Rust-like https://doc.rust-lang.org/1.6.0/book/patterns.html Stage 1 {props => match (props) { when ({ loading }) { ; } when ({ error }) { ; } when ({ data }) { ; } }} 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, and more! 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. 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. Show Notes 04:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component? 11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it’s all a little expensive for me to mimic what you have; at least before I’ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev? 22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development. 26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn’t seem super common to use since few GitHub projects have Dockerfiles in their repos. 32:19 - I’ve often heard you two talk about the idea of the “golden handcuffs”, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I’ve tried organizing my day so my time is better segmented. I can’t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what’s next would be much appreciated. 37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google’s rendering engine? 39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the “traditional” way of doing things, 100% server-rendered. What’s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon “modern” way to do a server-rendered monolithic app? 43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code’s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation? 47:18 - Is there any benefit to using prop types in TypeScript for React projects? 48:14 - I’m currently planning to build an audio-focused app (maybe even more than one actually), and I’ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I’ve got some deep reservations against AWS, although I’m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I’m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts? Links https://www.npmjs.com/package/react-to-webcomponent https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 LearnNode.com Transistor.fm ××× SIIIIICK ××× PIIIICKS ××× Scott: A Death In Cryptoland Podcast Wes: Affinity Designer Shameless Plugs Scott: Svelte Kit - Sign up for the year and save 25%! Wes: Beginner JavaScript Notes 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 CSRF (Cross Site Request Forgery)! 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. 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. Show Notes 05:40 - What is it? https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute Someone can submit a form FROM or TO your domain, automatically. 07:50 - Solutions SameSite Cookie https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6 Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link. Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent. None — Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests. CSRF Token Check Origin / Referrer Headers Captcha Ask for Password Token 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, Scott and Wes talk with Miriam Suzanne about all things CSS — container queries, layers, scoping, 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. 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. RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com. Guests Miriam Suzanne Show Notes 02:21 - When did you come on board with container queries? 10:27 - How would you declare specificity? Layer example: @layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } } 13:08 - What is your background? 18:20 - What are container queries? 22:06 - What is the background on contain? How does it work? https://developer.mozilla.org/en-US/docs/Web/CSS/contain 29:25 - Is it still under development? https://www.igalia.com/open-prioritization/index 33:51 - Have you tried the EQ polyfill from Johnathan Neal yet? 35:21 - How far out are we? 38:10 - What is Scope? 44:00 - How will MQ and CQ work together? 45:49 - Do you use inline and block? 48:44 - What browser do you use? Links OddBird Susy Jonathan Neal FireFox Codepen https://github.com/w3c/csswg-drafts https://twitter.com/TerribleMia ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Embroidery machine Shameless Plugs Miriam: OddBird Scott: 1: SvelteKit 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 SvelteKit — what it is and why you might want to use it. 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 03:28 - What is it? Total platform for building Svelte apps Built in Vite.js Includes all of the Vite goodness but it hides behind the scenes for the most part Host anywhere 05:16 - Is it CSR, SSR, SSG, WTF?! All of the above. Uses adapters to control the output: kit: { // hydrate the element in src/app.html target: '#svelte', adapter: adapter() } 09:45 - What you get out of the box File-based routing API routes Layouts and layout resets Fancy file titles [slug] __layout Code splitting & preloading PostCSS TypeScript support 17:03 - Neat small things Glob import https://github.com/svelte-add/svelte-add Links SvelteKit Next.js Gatsby.js Sapper tailwindcss @chriscoyier 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Coudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:24 - I’m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I’m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the “mutation” terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes? 06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you’re trying to go to sleep and your brain just wants to keep on coding? 12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file? 21:41 - I am new to using CMSs and I was wondering for applications that require a lot of content management where a CMS or headless CMS such as Contentful is ideal but also requires dynamic queries such as recommended content to the end-user based on browsing history. How do you approach integrating the user data in combination with the data being received and handled from the CMS? A separate API and database? Or is this a scenario that a CMS doesn’t fit? 25:56 - When solving a problem, do you do it through trial and error? Or do you carefully think through every solution and choose the best one before actually implementing it into code? 28:14 - How can we take advantage of this new partnership between 1Password + SecretHub! I feel like this is getting into DotEnv but sounds so much more interesting. 32:34 - When creating types in TypeScript, when should someone use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. I am struggling to understand why I would ever use a type. 36:34 - I’ve recently started using TypeScript in React, and typically I’m just using function components. I’ve seen some people saying that classes are really great with TypeScript in React but I haven’t found any real use case/benefits myself yet. How about you guys, do you use classes in React/TypeScript? 38:17 - What are your opinions on generators like Yeoman? 44:26 - I’ve been looking for a career in web for a couple of years now and I’ve recently landed a job with a small agency getting paid hourly making WordPress websites, that I’ll be starting in two weeks. I’m worried that I’m going to get stuck pushing Divi sites all the time. I know this is a good opportunity for me but I was hoping you guys can shed some light and give me some tips on how I can put my skills to good use. 48:35 - What are your approaches for caching a GraphQl API? 52:30 - You mentioned in an earlier Potluck that Svelte is probably the easiest framework to learn. How confident can one be to start a new project with Svelte? Being a technical lead, can I propose our team to work with Svelte? Are there enough material/solution on the web and is the community established? Links ZMA Supplement Tina https://twitter.com/gusfune/status/1372243283758419977 1Password SecretHub TypeScript Syntax 348: TypeScript Fundamentals — Getting a Bit Deeper Syntax 042: Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman https://www.npmjs.com/package/zx Yeoman Mercurius Apollo Svelte ××× SIIIIICK ××× PIIIICKS ××× Scott: Contigo Shake & Go Wes: Deli Containers Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Wes’ experiment building a vaccine bot! 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. 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. Show Notes 07:32 - First step Finding the data. Open up dev tools. Copy as Node.js Fetch in Chrome Two ways to do this - Puppeteer, or raw requests, or a mix. 11:03 - Variablizing it Store IDs Booking form IDs Vaccine IDs 12:56 - Finding out any restrictions Is there a cookie? Is there an XSRF? Do these things change? How often can you hit it? 15:20 - Caching Array variable 16:59 - Delivering the notifications Telegram Links https://github.com/wesbos/vaxbot 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, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. 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. Show Notes 04:55 - Components Strategies Example: type Props = { value: string; } const App = (props: Props) => div /> Return type? JSX.Element FC or FunctionComponent It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to It could be useful for a return type 12:13 - Props Default props: const defaultJoke: JokeProps = { joke: 'LOL JOE', id: 'YEAH', status: 200, }; function JokeItem({ joke = defaultJoke }: JokeProps): JSX.Element { return ( {joke.joke} = {joke.id} ); } Because props are always destructured, you often have to make a new type for your props. You can’t just type each argument by itself. 18:38 - State Just like Generics, State can be inferred If your type is simple and you’re using useState, it just works: const [user, setUser] = useState(null); 22:27 - useEffect Nothing special required Good use of void: If you want to use a Promise function but not worry about await or .then(), you can pop a void in front of it: useEffect(() => { console.log('Mounted'); // getJoke().then(console.log).catch(console.error); void getJoke(); }, [getJoke]); 26:09 - Refs Very similar to state however some interesting things with null: const ref1 = useRef(null!); “Instantiating the ref with a current value of null but lying to TypeScript that it’s not null.” 29:33 - Custom Hooks This is a great use case for Tuples 31:00 - Context This is probably the most complex thing in this list First define the types Use generic to pass in types OR null This can also be non-null if you have default values in createContext: const AppCtx = React.createContext(null); 35:21 - Events The React events system is better than Vanilla JS Can handle them inline and have it inferred: onClick={e ⇒ yeah(e.target)} const onSetType = (e: React.ChangeEvent) => setType(e.target.value) React has a bunch of events built in — many of them take a Generic argument so you can specify the type of element that triggered it. Handy for native API methods like play and pause. 39:27 - ForwardRef Again use of to pass in forwarded ref type as param 1, Props types as param 2: type Props = { children: React.ReactNode; type: "submit" | "button" }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); 41:30 - ESLint Typescript-react is good Extend your own Most JS rules apply to TS 46:20 - React as Global React 17 Also add JSX: True to eslint globals for typing things like JSX.Element global.d.ts import * as react from "react" import * as react_dom from "react-dom" declare global { type React = typeof react type ReactDOM = typeof react_dom } 48:08 - TSConfig jsx: "react" React emit .js files with JSX changed Preserve .jsx file output React-native → .js files with jsx not changed 53:05 - Frameworks? Next.js makes this a TREAT Gatsby just use .tsx extensions https://www.gatsbyjs.com/plugins/gatsby-plugin-ts-config/ Links https://github.com/typescript-cheatsheets/react Tanner Linsley https://github.com/wesbos/eslint-config-wesbos Deno Architect https://fav.farm/ Snowpack Vite Parcel 2 Foam ××× SIIIIICK ××× PIIIICKS ××× Scott: Obsidian Wes: Folding Allen Keys Shameless Plugs Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: SvelteKit Course Wes: Beginner Javascript Course - Use the coupon code ‘Syntax’ for $10 off! 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 making money as a creator — how to do what you love, make money doing it, and not feel yucky about it! Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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 06:37 - Community supported Sell licenses Premium plugin Single payment $x per year Sell training Online In-person Sell support Donation-supported Patreon (usually has bonus content) Tips Open Collective Sell merch Teespring 16:00 - Corporation supported Display ads Sponsored segments Corporate sponsors Sponsored content Interesting collabs Stickers Links Syntax 330: React Query + More React with Tanner Linsley Syntax 340: Servers with Matt from Caddy Wes’ CSS Grid Course 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, Scott and Wes bike shed some common developer opinions. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:27 - Event params e, evt, ev, or event? 06:36 - CSS variables —red or —primary? 09:31 - CSS colors https://twitter.com/rem/status/1386694431710007298 RGB, HSL, HEX? 11:52 - Default exports vs named exports 14:45 - JavaScript import ordering 17:09 - Foo / Bar / Baz in examples 21:18 - Light vs dark themes 24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x 26:54 - VScode vs WebStorm (IDE) vs Vim 31:12 - TypeScript Generics: vs 34:39 - Indentation-base syntax https://twitter.com/LeahLundqvist/status/1386693374305095680 37:37 - Max line length 40:21 - One reduce, vs multiple .map()/flat(),filter() async function getStatus() { const res = await sendCommand('AT!GSTATUS'); const result = res.result .split('\n') .map((x: string) => x.split(`\t\t`)) .flat() .filter(Boolean) .map((x: string) => x.trim()) .map((x: string) => x.split(` \t`)) .flat() .filter((x: string) => x.includes(':')) .map((x: string) => x.split(`:`)) .map(([prop, val]: [string, string]) => [prop, val.trim()]) return Object.fromEntries(result); } 42:50 - index.js files https://twitter.com/sevilhelm/status/1386693971112562694 ComponentName.js vs ComponentName/index.js https://twitter.com/rleggos/status/1386694773021552641 48:20 - Ligatures and fancy fonts https://twitter.com/badsyntax/status/1386695010859507713 50:30 - Regular functions vs anon functions in a variable vs arrow functions function hey() {} const hey = function() {} const hey = () ⇒ {} 52:44 - Explicit return vs implicit return ××× SIIIIICK ××× PIIIICKS ××× Scott: Ego Mower Wes: Pass-Through Socket Set Shameless Plugs Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: Github Actions with Brian Douglas Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 JavaScript’s drag and drop API — how it works, concerns, best practices, and more! .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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. Show Notes 04:45 - What is it? Drag and drop is really for desktop apps You can drag and drop anything from any browser to any browser The important thing here is that this is a set of browser standards that allow different apps to communicate 07:50 - How to implement Make an element draggable Listen on elements for drag events The events bubble up, so you can listen on the parent element as items are added/removed 09:06 - DataTransfer API You can store anything you want in it getData / setData API Reference strings 11:35 - Accepting drops When you dragOver, you need to preventDefault() Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location 13:01 - Drop Image Set whatever you want 16:00 - Drop Effect What does it look like when you drop it? Does it go back? dataTransfer.effectAllowed e.dataTransfer.setDragImage(nothing, 0, 0); 18:02 - Security concerns 20:34 - Shortcomings: Edge cases out the WAZOO Margin caused dragout events Lots of if statements It’s up to you to do EVERYTHING CSS, classes, hover styles, etc. Accessibility Inaccessible by default, unless using mouse keys Have to announce everything Mobile 26:14 - Lbs Transmat API Links Figma Notion Missive 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, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:34 - What is semantic HTML? What is the content? HTML should describe the content first and foremost. 04:04 - Why semantic HTML? Accessibility SEO Styling is easier HTML tags that have meaning: Almost all of them Common ones: / and to 20:04 - Structural / Layout tags You can have more than one header Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know / and strike? / / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. and While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range). 32:12 - Visual vs Semantic tags Almost all tags in HTML are semantic vs and vs and are NOT deprecated like many have said The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important. 35:40 - HTML tags with no meaning: 37:51 - Some elements have special functionality or styling and tag + 40:59 - What elements would we like to see? Modal element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog Textarea that grows with content Animated accordion A better table One that works with grid/flex/modern CSS, auto-sizing, max/min widths From Twitter: VirtualList Carousel - HOT DRAMA Date range Hero tag that figured its level out by itself. Useful for components that can go anywhere Icon tag Cookie banner tag that shows HTML elements without encoding You can kinda do this with display block on script and style tags Links Sara Soueidan ××× SIIIIICK ××× PIIIICKS ××× Scott: Hat Washer Wes: Netflix's This is a Robbery Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code 'Syntax' for $10 off! 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 different kinds of things that are difficult to style, how you can style them, and some future tech to look out for! 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 Can it be styled? Solutions 04:28 - Just style the defaults Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style. This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs. Select Input - number, date, etc. Very hard to style Often need appearance: none; for mobile Checkbox / Radio Generally speaking, these CSS Properties can be applied to all inputs: font-size color padding margin background / images outline (remember focus) border 08:20 - Overlap with more dom elements, set background images Checkbox / Radio / Toggle buttons Often used :before and :after along with labels — e.g. label + input:checked Select can have element overlap 14:13 - Re-implement the UI with JavaScript Video / Audio HUGE rabbit hole of things to code Very important to maintain accessibility 15:46 - Use a UI Library Bootstrap Foundation Ant Design Carbon Design Fast Lightning Design System Material Design Chakra 17:20 - Open UI Documenting all the different types of web UI controls https://open-ui.org/ https://twitter.com/stubbornella/status/1384889551924121605 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”? How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience? 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work. 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful. 12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish? 18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use? 23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this? 28:28 - Why are radio buttons called radio buttons? 30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible: Could make me money now Help me to hit the ground running when I graduate Get me a job easily Make me all kinds of cash Thoughts? 35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js? (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) ) 39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well? 45:31 - What’s the best way to be able to host personal projects (frontend + backend) for free on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway. Links https://type-scale.com https://www.leveluptutorials.com/tutorials/modern-css-design-systems https://www.npmjs.com/package/soap Vercel Glitch Codepen Code Sandbox PM2 ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze Sprinkler Controller Wes: Retevis Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it. 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. 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. Show Notes 03:17 - What is technical debt Outdated or hard to update code If you groan when you have to work on it, it might be a sign of technical debt Brittle code, easily breakable Quirks and features 06:55 - Why does it occur Over time, any garden left un-pruned will become overgrown Many people, many code styles Using hot new frameworks / techniques This is why seasoned developers don’t jump on new things You allow users to do literally anything 13:18 - Techniques for avoiding it Deny your FOMO of new things Abstract Write good tests Don’t put off refactors Update dependencies frequently Good standards Etsy has thousands of devs 20:08 - Examples in the real world Airline websites open in new windows all the time Cellphone carrier flashes the screen 100x 22:15 - Unfixable technical debt Agency work sometimes Links Next React Router TailwindCSS Redux Etsy Dave Ramsey 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, and more! 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website. 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line? 18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support? 07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular 22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money. 30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch? 36:52 - Do you guys ever see your premium courses pirated on sites like Udemy, Skillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this? 39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it? 42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys! 50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work. 54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice? Links Fastify RedwoodJS Keystone.js 10up Vite Safari + Dev tools Browsersync localtunnel ngrok Xcode simulator Mike Birbiglia Brian Douglas YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: 3 in 1 Multi USB Charging Cable Wes: Milk Frother Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 future tech — some things you may not have heard about yet, and why we’re excited about them! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 05:20 - Astro What it is: astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React. https://twitter.com/georges_gomes/status/1380801812656226304 Why we’re excited about it: Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data. Scoped CSS by default (a la Svelte). Sass out of the box. Collections import for .md files // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- main> h1>Blog Postsh1> {blogPosts.map((post) => ( PostPreview post={post} /> )} main> 12:06 - ViteKit What it is: Framework-agnostic API routes Pages (frontend, optional hydration) Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit. 15:58 - Svelte Kit What it is: https://kit.svelte.dev/docs https://svelte.dev/blog/sveltekit-beta New framework for building Svelte apps 19:07 - Remix.run What it is: Remix.run Fullstack React framework Why we’re excited about it: Made by Michael Jackson, Ryan Florence License-based React-based Caching-focused, uses “the platform” Centralized data loading, works without client JS if needed Better nested routing Links Sapper Vite Snowpack 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, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes Deep end stuff 03:30 - any vs unknown 06:20 - never https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts Definition files Usually for existing libraries that don’t have types Can be generated or hand-written Also really handy for pure JS projects, you still get good autocomplete because of these 13:25 - Type generation Can be generated from GraphQL, or Schemas, or from JSON Output 17:20 - TypeScript generics (variables) Kind of like functions, they return something different based on what you pass it makeFood makeFood This function makes food and shares lots of the same functionality between making a pizza and sandwich If the only thing that differs is the type returned, we can use generics You often see this as a single char T It can be anything Promise is a generic querySelector uses generics 21:48 - Promises / Async + Await Functions now return a Promise type, but with a generic Promise Promise Promise>, Request, Request stringified added headers 29:48 - Type assertion (type casting) Type assertion is when you want to tell TypeScript “Hey I know better than you”. Two ways: as keyword (most popular) someValue as HTMLParagraphElement Tagged before someValue 34:14 - TypeScript without TypeScript (JSDoc / TSDoc) Really nice! You can also add comments / descriptions https://github.com/developit/redaxios/blob/master/src/index.js 40:08 - Interfaces vs Types Interfaces have better perf https://twitter.com/wesbos/status/1362418379919937545 https://blog.logrocket.com/types-vs-interfaces-in-typescript/ What do you default to? How we write TypeScript 44:27 - Interface or Types Scott - Types Wes - Interfaces 44:50 - any vs unknown Scott - any Wes - unknown / any 46:52 - Any (No Implicit or Implicit Allowed) Scott - No implicit any Wes - No implicit any 48:31 - Return types (Implicit or Explicit) Scott - Explicit always Wes - Not always 50:49 - Compile (TSC, Strip TS) Scott - Strip Wes - Both 52:38 - Type Assertion (as or ) Scott - as Wes - as 53:09 - Arrays (Dog[] or Array) Scott - Dog[] Wes - Dog[] 54:02 - Assert or Generic (if both work) querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’); Scott - querySelector(’.thing’); Wes - querySelector(’.thing’); Links Syntax 324: TypeScript Fundamentals Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools Axios VS Code Syntax 310: Serverless, Deno and TypeScript with Brian Leroux Cloudinary Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Powerowl 16 Battery Recharger Wes: Fairywill Pro P11 Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%! Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off! 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 Git Rebase — what it is and how and when to use it! 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. 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. Show Notes 05:12 - Why and when to rebase? git rebase -i is interactive Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits. Common uses: Squash all commits into one or multiple commits Reword commits These lines can be re-ordered — they are executed from top to bottom. p, pick = use commit r, reword = use commit, but edit the commit message e, edit = use commit, but stop for amending s, squash = use commit, but meld into previous commit f, fixup = like “squash”, but discard this commit’s log message x, exec = run command (the rest of the line) using shell b, break = stop here (continue rebase later with ‘git rebase --continue’) d, drop = remove commit l, label = label current HEAD with a name t, reset = reset HEAD to a label m, merge [-C | -c ] [# ] Links Git Rebasing 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, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript! 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. 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. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. Show Notes 01:58 - T-Shirts 101 T-Shirts are cool I sold 100 right away to get the kinks out Then I did pre-order The stack TypeScript React Next.js 09:08 - Selling: Front-end Snipcart It’s a button When Someone buys, they scrape the site for the HTML If you only have a client-side rendered button, you use the JSON API instead Integrated into Gatsby pretty easily Wrote one custom hook to count inventory and disable when sold out I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment. 10:10 - Selling: Shipping Quotes Snipcart has integration for USPS, etc. You can also do custom shippers It’s a webhook They also take care of customs declaration 13:30 - Selling: Backend Next.js Dashboard Integrate with ChitChats, Stallion Express, and SnipCart. The tech Shipping Labels Packing slip 18:05 - Fulfilling Printing labels Designed with CSS + React Print CSS is wild Fan Fold labels were way better I switched to Stallion Express Cheaper Printing packing slips Batch scanning Scanning → Mark as shipped Started with webcam Bought scanner for cheap QR code was better because my tokens were long Data matrix is often better Sending notifications Hit the endpoint via Snipcart 28:48 - The physical part T-Shirts printed from local supplier U-Haul to get them here Bags printed in China (about 40 cents each) I wrote a bunch of code to organize by size This cut down on moving around (14 hours if you save 30 seconds per shirt) Some got stickers Multiples were the hardest 24 different types of shirts some wanted 4xl some wanted tall 36:30 - Common questions Why did you do this yourself? Fun project I learned a ton This is how you don’t burn out Why not print-on-demand? (DTG) Tonal Embroidery Quality Money Pay people in my community Control Bags, stickers, etc… stickermule Why not $companyThatHandlesIt I want to do stickers I want to do decks Why not Shopify Large orders still need major fulfillment strategies Code has to be written or money spent 44:16 - Other lessons learned Queues would be good here Sometimes you had to wait 3+ seconds for the confirmation of shipping No one reads, it was pre-order Don’t buy shipping right away — people email about incorrect addresses Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds) Pre-order is great because you can offer many sizes Async JS to do things at most 50 at a time Links Wyze Plug ××× SIIIIICK ××× PIIIICKS ××× Scott: Pixeleyes AutoMounter Wes: Baratza Encore Conical Burr Coffee Grinder Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 CSS container queries, what they are and how to use them. 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 07:22 - Why? Container queries are media queries for components (e.g. they are based on the element’s size, not the browser). This is in line with how we write components. It will change the way we write CSS. 08:49 - The Syntax Containers need to be defined as containers via containment context .container { contain: size layout; } New contain value: .inline-container { contain: inline-size; } This is the same as the logical properties. Assuming you read LTR, or RTL: size - width and height inline-size = width block-size = height /* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } } 18:49 - How to try them today Download and/or update Chrome Canary Go to chrome://flags Search and enable “CSS Container Queries” Restart the browser 19:27 - Demos Need Chrome Canary + Flag https://codepen.io/collection/XQrgJo https://codepen.io/una/pen/LYbvKpK?editors=1100 Links Miriam Suzanne Susy Miriam’s CSS Sandbox https://css.oddbird.net/rwd/query/explainer/ Canary @addyosmani The CSS Podcast @jon_neal 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, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 3:50 - Network See all requests, filter by type or name Used to understand all requests coming or going Turn off caching View timing See the true GZIP size Slow down network speed See time for page load Copy as fetch or CURL View request, response, and headers See CORS issues See which requests have happened See if an asset is cached (both in dev tools, also Cloudflare) See blocked requests because of extensions Tip: You can see the network info from the console in Firefox 22:03 - Memory See what is taking up memory Strings DOM nodes Objects Actual .js 26:44 - Performance Click record and use the site Flame chart useful for finding slow functions and debugging janky animations Get FPS in coordination with flame chart Save performance recording data to be able to share for debugging You can also upload saved data to debug without using the site 30:48 - Console Interfaces with the JS runtime Shows errors, warnings, and logs Tip: Negate noisy warnings/errors that clutter your console with - Tip: Use $0 to select current element $1 for second last $r for current React element Tip: Use $$ to shortcut Query SelectorAll and Array.from Tip: Use $ to shortcut Query Selector 40:28 - Storage / Application Working with LocalStorage, Cookies, Index DB, and Session Storage 44:56 - Audit / Lighthouse (Chrome and Firefox) Run lighthouse to check for performance, accessibility, and UI stuff Not the silver bullet audit that many people think it is Colors are sometimes like “Really?!” Can be helpful regardless 50:28 - DOM Tab Firefox only Shows everything that is in the scope of the browser Links Adam Wathan Ben Vinegar ××× SIIIIICK ××× PIIIICKS ××× Scott: dupeGuru Wes: Moccamaster Coffee Maker Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 CSS nesting — what it is, when to use it, and why. 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. 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. Show Notes 04:22 - What is it? https://drafts.csswg.org/css-nesting-1/#nest-prefixed https://twitter.com/argyleink/status/1371874777548267520 06:02 - Why nest? Easier to read Easier to write Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up. 08:13 - When to use nesting Nesting is often overused Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it) .container .item {} .container .item a {} Use it for scoping 10:06 - Nesting prefixes In order to nest CSS, you must first start it with a nesting selector .tweet { & > p { } &.media-included { color: green; } & + .tweet { } // sibling & p { } // descentang } Component-based — tweet, card, company, Link article{ color: blue; & { color: red; } } and must be the first child of a compound selector 12:44 - @nest rule / media queries Mostly just a visual way to show nested .foo { display: grid; @media(orientation: landscape) { & { grid-auto-flow: column; } } } .foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } @media (min-inline-size > 1024px) { & { max-inline-size: 1024px; } } } } /* equivalent to .foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-inline-size > 1024px) { .foo { max-inline-size: 1024px; } } */ 16:30 - How to use nesting today Literally any CSS preprocessor PostCSS to use spec Links Syntax 274: How does stuff get added to CSS? Adam Argyle answers! Sass PostCSS CSS Variables 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, Scott and Wes talk about how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, and more! 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. 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it? 06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts. 15:22 - I’m trying to teach myself web development and I’m having problems making up the logic for my personal projects. I would have to watch YouTube tutorials or look at other people’s code in order to implement simple features to my website and I’ve been feeling pretty stupid for not spending the time to think of it. I feel like I’m missing out on knowing how to problem solve for myself whenever I copy other people’s code and try to understand them afterwards. 19:27 - I just landed my first web development job after following The Odin Project and building personal projects for about a year. It tripled my income so I am incredibly excited! I have been using a PHP framework which was developed by one of my coworkers and has no documentation. In order to understand the code, I either have to read a bunch of source code or ask one of the other developers questions. While I am doing well, I can’t help but feel as if I am working way too slow and asking way too many questions. I assume this is imposter syndrome and lots of people deal with it, but how would you suggest dealing with this type of anxiety? 25:11 - Monorepos, yes or no? 29:43 - As a brand new self-taught web developer, how would you know if you’re ready to apply for junior positions? 32:03 - Will there ever be a .eat domain or are the pre-order sites just ripping you off? Would like to know who decides what TLDs are possible or not. 35:26 - I’m currently employed as a fullstack developer but want to build a portfolio for future job hunting. Would you say it’s ok to reference a project or two from an employer? My problem is that the only projects I have outside are mostly just smaller tools built for myself for fun. 39:29 - Should developers always use their real first and last name when presenting themselves as a professional online (e.g. Twitter, LinkedIn, Github, personal site). Or is it acceptable to use a fake last name for example? My wife is quite conscious about privacy online, so would prefer I retain some anonymity. But also, my last name is a bit generic, and not very Googleable. I thought having a more snappy and interesting name would help me stand out, and be easier to find with a quick Google. You guys both have awesome names that are very unique and are hard to forget. 43:59 - How do you find time to work and keep up with updates and libraries etc. having a wife & kids? 46:06 - I am a beginner in making course content. I am trying to create a programming tutorial, but every time I try to record some tutorials I have to compromise on audio quality. Lots of background noises get captured on audio. Can you both share some tips to make soundproofing room? What tricks do you both use? 53:33 - As someone who recently learned/is learning how to build websites using express/node/react, with a little know how with Python and Django too, how do you start building a portfolio that isn’t just a bunch of practice/show-pieces? How do I get a client? 59:53 - Should I be using multiple web apps on a single site or try to make them all one? If I have a site that displays blog posts about parks for example, then a page with all the parks listed out that link to a page about each single park’s details, should I be making the entire thing in one app? Or make a blog app and publish it, then make a different app for the other content and publish it using a subdomain? Links Syntax 266: Video for the Web 2020 and Beyond Cloudinary Mux Vimeo LesMills Bitmovin Brightcove Wista Cloudflare AWS MediaLive Keystone.js Gatsby Syntax 331: Hasty Treat - Hireable Skills for 2021 ICANN dbx 286s Electro-Voice RE20 reMarkable ××× SIIIIICK ××× PIIIICKS ××× Scott: CamLink 4k Wes: TS80p Mini Soldering Iron Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Fullstack Advanced React & GraphQL - Use the coupon code ‘Syntax’ for $10 off! 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 their favorite VSCode extensions, tips, and workflows! .TECH - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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 04:05 - Easy Snippet https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet 05:33 - Add Missing Function Declaration https://twitter.com/wesbos/status/1369393437062074377 07:30 - Error Lens https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 09:08 - Declare Missing Members https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension 10:29 - ES7 React/Redux/GraphQL/React-Native Snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 11:59 - File Utils: https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils 13:59 - GitLens — Git supercharged https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 15:15 - ES6-String-HTML https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html 16:41 - Wrap Console Log Simple https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple 17:18 - Text Pastry https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry 19:14 - Better Comments https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments 20:14 - Tip: Use Emmet everywhere https://emmet.io/ 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, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, best practices, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Guests Matt Holt Show Notes 02:08 - Who are you and what do you do? 03:22 - Why would you want to build a web server? 08:45 - How do SSL certs work? 14:03 - Why do you even need a web server? 23:03 - Is it better to have a web server serve your images? 20:31 - What is load balancing and why might you need it? 31:35 - Is server administration a lost art? 38:03 - What is a sidecar proxy? 38:50 - How do chron jobs work? 39:50 - Why is GO so fast? Why is it good? 46:32 - Should every website have an SSL certificate? Links Floss Weekly 364 Caddy Let’s Encrypt Certbot PM2 https://doesmysiteneedhttps.com Tello Drone ××× SIIIIICK ××× PIIIICKS ××× Matt: LG Stick Vacuum Scott: Alen Pure BreatheSmart Air Purifier Wes: Tello EDU Shameless Plugs Matt: Matt Holt Sponsorships Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 common problem you’ll encounter in your development career — the n+1 problem. 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. 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. Show Notes 05:00 - What is the n+1 problem? The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships. 09:33 - The solution The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids. 11:11 - Should you care? Sometimes no: its often fine to do multiple DB Calls Facebook DataLoader Mercurious Many ORMs take care of this for you These then break it down into my appropriate SQL MongoDB Ruby: eager loading Laravel ORM does it Aggregation pipelines Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en Mongoose Populate Apollo Studio 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

It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager. 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. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:50 - https://shaquilhansford.com/ Not optimized for desktop Lots of spacing issues overall Too many accordions - could be lists in multiple columns Social links could be in the footer Twitter is on point - iwantyoutohire.me Phone number on website is good 11:31 - https://www.benlammers.dev/ Gimmy dat yellow The design and polish is really good Data URI images can overload CPU Semantic headings, but HTML should use some work Four H1s on the page 20 H2s 40 H3s Main tag 20:28 - https://www.zubairaziz.com/ Lots of empty space Photo is key Not sure what to do when I land on the page Blog is nice, but two posts from May - add more or drop it Portfolio is just enough Nav animation should only happen on initial load 29:39 - https://codebyfil.dev/ This is a great example of something that is good, but needs a bit of polish Tone down the border radius Tone down the box shadow Border and drop shadow Images aren’t links Footer padding or space - contact is ridding the bottom Scott’s HTML breakdown Four H1s Six H2s Four H3s 18 H4s Five H5s 37:39 - https://www.johngeorgesample.com/ Clean but maybe too clean Nav is too distractingly too big Need active link indicator in main nav div div div div - take a look at those semantic HTML tags No H1 or H2 HTML needs work brother Use × instead of X Asterisk doesn’t work on mobile 46:52 - https://stordahl.dev/ Great images Nice typography Sign-up for newsletter is great Store = A+ Scott’s HTML breakdown Two H1s, one of which is just nice to meet you Zero H2s Articles should be articles No section 1px move on hover is nice - could use a transition Links Axe Accessibility Testing Gatsby Next.js https://feathericons.com/ Snipcart GeoGuessr ××× SIIIIICK ××× PIIIICKS ××× Scott: Walkabout Mini Golf Wes: 60w Portable Charger Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off! 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 GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL. .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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 03:38 - What is it? https://graphql-code-generator.com/ Code generation for GraphQL APIs 04:34 - What can it do? Generate React hooks for any of the major player Apollo client (urql) Types for the full stack — resolvers, mutations 07:49 - How we use it Generate a schema file to keep client and server in sync in mono repo Creates all React Hooks Generates all types for both resolvers, and anything client-side Links React Query Apollo Typescript Cypress https://periqles.herokuapp.com/ https://the-guild.dev/ Swagger 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, Scott and Wes talk about building your own authentication — diving deep into JWT, sessions, tokens, cookies, local storage, CSRF, and how it all works! 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. 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. Show Notes 01:51 - Overview Level Up uses a JWT & secure cookie-based authentication and tracks sessions via a db table. Accounts.js 05:13 - JWT Base 64 encoded (not encrypted) token that contains data. We have both accessTokens and refreshTokens. JWT has three parts: Header What kind of algo was used Payload Data about the user Email Username UserID refreshToken, authToken, sessionId Signature This ensures that no one monkeyed with the above parts. If you change your email in the payload, the signature is not invalid, because in order to generate the signature, it uses the header and payload as part of it. accessToken A short lived JWT that contains the sessionToken, userId and expires after 90min. refreshToken A long lived JWT that contains just the sessionToken and doesn’t expire. JWT can be decoded and read, but you have to encode them with your secret. JWT can be stored anywhere, there are two main places: 20:26 - Cookies We use httpOnly, secure cookies to store the accessToken and the refreshToken. The accessToken is a session cookie and is removed whenever the browser is closed. The refreshToken is valid for 100 days but is also re-created and revalidated for 100 more days each time the accessToken is generated. Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server. Note: Safari has stricter rules than others for same domain cookies (e.g. localhost won’t work). 34:26 - Sessions Sessions are when a user logs in on a device. If you open a phone and log in and a computer and log in, those will create two different sessions. A session contains information about the user’s connection (like their IP) but it also contains the userId which allows us to create new accessTokens from a valid session. Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false. Sessions also have sessionToken which are generated on authentication or create account. 38:10 - CORS Cross-origin-resource-sharing Can be super tricky to get working cross-domain You usually have to actually visit the website for the cookie to be set, even with lax cors 46:06 - CSRF 48:47 - Authentication process bcrypt.js 52:13 - Helper Packages NextAuth.js is super easy Passport.js auth0 Links Caddy Fastify ××× SIIIIICK ××× PIIIICKS ××× Scott: reMarkable 2 Wes: Opration Odessa Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off! 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 environment variables — what they are, where you should keep them, and more! 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. 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. Show Notes 03:54 - What are they? API Keys Secrets Database URLs NODE_ENV 06:16 - Type of env variables Plain text Encrypted Frontend Backend .env files .env is a good package for all langs .env.local Framework env variables System env variables Host-provided variables 16:20 - Where should you keep them? 1Password 1Password CLI 17:34 - Other gotchas Netlify Limit is 4096 Netlify needs a clear cache before it works THING=yo node index.js cross-env NODE_OPTIONS="–inspect" Require before run Links Digital Ocean App Platform Render Vercel Netlify 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

It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file? 04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects? 10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks! 18:32 - Should a model name be singular or plural? 22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app? 25:46 - What’s the difference between adaptive and responsive design? 32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier? 36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching. 42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in? 45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks. 48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this? Links VSCode Peek Definition Obsidian Render Adam Wathan Gumroad Braintree MJML https://github.com/unlayer/react-email-editor Redwings shoes ××× SIIIIICK ××× PIIIICKS ××× Scott: Tosowoong Enyme Powder Wash Wes: Carhartt Gloves Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off! 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 are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, 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. Show Notes 03:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed? 05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast? 09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects? 10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses) 12:48 - Could you all talk about protected/private routes in Next.js? I’m coming from create react app type routing. 16:07 - What would be doing for a living if not a developer? 17:50 - What do you think about Clubhouse? Are you guys planning to talk over there some time? 24:18 - Vue or React? Which do you think will be the top? And should developers learn both? Links https://twitter.com/aaronendsley/status/1361375032342110210 Svelte 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, Scott and Wes talk about their desk setups and how they’ve evolved, both as coders and video and course creators. 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. 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. Show Notes 03:36 - Desk Scott Ikea countertop on Jarvis Legs. Four presets - sit, stand, horse stance, lunge Wes 8" Ikea Butcher Block countertop on legs LackRack on wheels underneath Desk at cottage is Maple Live Edge Slab on Hairpin Legs 09:01 - Chair Scott Steelcase Gesture Wes Polished Aluminum Herman Miller Aeron Roller Blade Wheels! 15:39 - Display Scott Vivo Stand 38" LG Curved Ultrawide Vissles-M, Portable Touchscreen Monitor BenQ Monitor Light Wes LG 32" 4k Ultra HD Dell Ultra HD 4k Monitor Rain Design 10032 mStand Laptop Stand 22:49 - Headphones Scott Ultrasone Wes QC35s w/ Wicked Cushions - wish they charged over Wireless 24:58 - Mouse + Keyboard Scott Keychron K3 with optical Apple Magic Trackpad Wes Apple Magic Keyboard - extended in Space Grey Logitech Mx2 29:18 - Laptop Both MacBook Pro 33:43 - Dock + Connecting it all together Scott Caldigit TS3+ Satechi USB-C Slim Multi-Port with Ethernet Adapter Under desk rack Wes Everything is in a Lackrack Caldigit TS3+ Single Cable Hookup Two monitors 6+ webcams Elgato CamLink 2 HDDs Microphone Amazon Powered USB Hub Startech Rack Mounted Power Strip 41:36 - Camera + Capture Scott Sony a7 iii Elgato CamLink Wes Sony RX100 iii 44:11 - Microphone + Capture Scott Audient Nero Monitor Controller M-Audio BX8 EV RE20 Focusrite Scarlett 2i2 dbx 286s Cloudlifter CL-1 BSW RE320POP Wes Heil PR40 + shock mount, boom arm, pop filter Focusrite Scarlett 2i2 ART EQ 351 dbx 286s BSW RE320POP 49:06 - Lighting Scott Neewer Bi-Color 480 LED Traditional three-point lighting (key, fill, backlight) Philips Hue above for color pop Wes Neewer Bi-Color 480 LED on a Wyze Plug Two Backfill LED Color lights BenQ Screenbar 55:22 - Storage / Backup / Home Server Syntax 220: The Synology Show - Backups and Home Server Scott Synology DS918+ 8TB Wes Synology DS918+ 16TB (DS920+ is the latest) 16TB of drives - I don’t use anywhere NEAR that LaCiE Rugged or WD Passport for Time Machine 57:50 - Other / Wish list Scott ReMarkable 2 tablet Apple Pro Display XDR Wes Mindnode Elgato Stream Deck LG 5K2K Curved Display Links GraphQL Code Generator KeystoneJS BSW Ikea Lack Side Table Better Touch Tool Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off! 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 hireable skills or 2021 — what you need to know to get a job and grow in your career this year! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 04:17 - Code in general Clean, commented, organized Take the extra hour before an application and polish it 06:10 - JS Basics of the language - storing data in Arrays and Objects Looping and flow control Array methods Promises + async await DOM basics - select an element, listen for clicks, update elements Node basics Most of your JS basics apply here Read Files, write files Fetch data and return it 08:38 - CSS Attention to detail - pixel-perfect replication of designs Works well on mobile No reliance on libraries - complete reliance on Bootstrap or Tailwind is a red flag. If you use these things, explain clearly why they are useful to you (e.g. augment your skills, not relied on). 12:54 - Real-world libraries One of the following: React, Vue, Angular Node.js - sending Server data as a response JSON Express, Next.js Popular helper libs Date functions / Moment (Moment is old but its still 2x more popular) Lodash CSS Scoped CSS Pattern libraries 17:15 - What about data structures and algorithms? Yes you obviously need to know about arrays and objects - probably maps and sets too Links lists? Tree structures? Traversal? https://twitter.com/wesbos/status/1353729683486076930 20:26 - Soft skills Know how to talk to PMs and other devs. Know how to stay on top of timelines and schedules while communicating. You won’t last long in any work environment where you aren’t able to fit in. Many devs sometimes get a big head about doing tech - this is not something you want to emulate. Ignore any kind of internal “us vs them” attitude. It’s about the big picture and you’ll go further. Write good, short, emails that don’t sound like you are mad. Links LeetCode Syntax 117: Hasty Treat - How To Email Busy People 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, Scott and Wes talk with Tanner Linsley about React Query, how it works, why you might want to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Guests Tanner Linsley Show Notes 01:56 - What do you do? nozzle.io React Query 06:04 - What is React Query? 24:19 - How does React Query use dev tools? 31:20 - What about React Context? 36:59 - Server-rendered components? 42:40 - Thoughts on static sites? 50:38 - What is the stack? Links Redux Axios Syntax 206: State Machines, CSS and Animations with David K Piano RTK Query Relay Remix Twin.macro Tailwind CSS React Static Next TanStack ××× SIIIIICK ××× PIIIICKS ××× Tanner: React Query - Essentials Course Scott: Govee TV LED Backlights Wes: 1Password Shameless Plugs Tanner: Nozzle.io Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 future of testing with Cypress — what it is, how to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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 03:55 - What Is Cypress? A visual testing studio that uses a jQuery-like syntax to test your application in browser. Very modern testing solution. 07:36 - Used to be only Chrome Now available for Safari, Firefox, Edge, etc. ??? - What frameworks is it for? Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results. Can also run on ci/cd via a headless mode. React component testing is experimental. 10:58 - Automation Cypress studio new feature that writes tests for you. 12:37 - Data Intercept + Fixtures or through plugins 15:01 - Cost? It’s free! There is a paid product called Cypress Dashboard that allows you to record tests long-term. Links Cypress bos.af Jest Better Touch Tool 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

It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected. 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions? 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee? 12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over! 18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this? 22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it? 29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new? 35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem. 42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue? Links SnipCart Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More! FileReader API Syntax 322: The Deno Show Syntax 044: How To Learn Things Quickly Twilio Postmark Begin.com RabbitMQ Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry. ××× SIIIIICK ××× PIIIICKS ××× Scott: Hario Filter-In Cold Brew Tea Bottle Wes: Slonik USB Headlamp Shameless Plugs Scott: Testing With Cypress - Sign up for the year and save 25%! Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off! 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 compilers and build tools in TypeScript. 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. 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. Show Notes 03:38 - What is a TypeScript compiler? Do we still need Babel / WebPack? 07:49 - Babel Transpiler It doesn’t do typechecking New JS features that aren’t in TypeScript yet 10:22 - SWC Rust based compiler Doesn’t do type checking (yet) https://github.com/swc-project/swc/issues/571 13:03 - Deno Uses tsc right now Might move to Rust https://github.com/denoland/deno/issues/5432 13:36 - Surcase https://github.com/alangpierce/sucrase#transforms 14:46 - ESBuild Compiles, but doesn’t do any type checking Fastest 17:39 - What about bundlers? Parcel Snowpack Webpack ESBuild When might you still need a bundler? To handle different types of files that are non-standard Like importing CSS and images Treeshaking Smaller bundle files Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that Polyfills Typescript does convert to syntax, but will not polyfill features Something like Promise Syntax can be transpiled to old code Methods like allSettled aren’t Links Syntax 324: TypeScript Fundamentals Syntax 322: The Deno Show 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, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 04:32 - Why does an impression matter? All of this stuff comes together to work in your favour when you are hunting for a job. 05:14 - What goes into an online presence? Twitter Share what you know Online website Design Messaging Effort Personal life Blog Resume It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them. 07:25 - A couple stories @HenriHelvetica You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries. I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work. I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.” 09:40 - Ash Connolly https://ashconnolly.com/ https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0 Software Engineer Using new tech with high end clients Review Pros Clean, simple design, but doesn’t feel like it’s missing something Animations are a nice touch Easy to see their work (e.g. photo, title, short paragraph, link) Testimonials is good, I might change the word testimonials, but that’s small Cons Nitpick - footer emphasis color looks like a link HTML is good, but missing some semantic tags like , , , too reliant on divs Resume Pros Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog). Work history - good way of describing what he did. “Carried out performance audits and site speed improvements” Links to writings and side projects Cons Lists Brad Frost as someone who shared his post. This feels a little weird. Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS. Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that. 20:48 - Matthew Bidwell https://matty.dev/ Backend dev Not focused on dev Review: Banging domain It’s clear who he is, what he is about Links to Twitter, Github and LinkedIn right away Blog posts showing he knows what he’s talking about 24:42 - Leah Lundqvist https://leah.link Review: Pros Fantastic aesthetics on site Good lead paragraph Cons I’m not sure what work she actually does Github pages are great for digging but not curation or showing off Same with Twitter For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone. Don’t make them hunt for it Twitter review: Unreal Pinned tweet 31:04 - Ismail Ghallou https://smakosh.com/ Best one yet Clear explanation right off the bat Dribbble - shows me he’s up on the latest Open source Testimonials Talks Blog https://twitter.com/smakosh - Twitter lines up Most recent tweets about tech 40:18 - Jhey Tompkins https://jhey.dev/ Whimsey Sound! Good use of CSS and SVG animation 46:28 - Wes’ website websos.com Can’t view source Whimsey The right kind of animation The link to the Syntax podcast has no indication that it’s going to take you offsite. The background image is good, but not as good with a wide browser. Custom scrollbars are nice Overall the site is a delight 53:25 - Scott’s website scotttolinski.com Font’s a little big Link to documentary is great Bio should include links Page animations are great Showing personal life / interests is good Super fast Links https://twitter.com/wesbos/status/1350961135269400580 Syntax 298: Voice Coding is Really Good with Josh Comeau Josh Comeau Doug DeMuro ××× SIIIIICK ××× PIIIICKS ××× Scott: Swedish Dishcloths Wes: Paper Wheels Knife Sharpening System Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 keyboard events and some of the fascinating things you can do with them! 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 03:04 - The Events http://keycode.info/ keydown beforeInput Keypress - deprecated inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc. keyup change event - only fires when you focus out https://github.com/w3c/uievents/issues/220 08:02 - Event meta data "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale .repeat 16:46 - Media keys https://developers.google.com/web/updates/2019/02/chrome-73-media-updates play, pause, ect Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow 18:32 - When might you use key codes? Space bar to stop a video on a page Building a game Making a web app feel more like an app Links Better Touch Tool Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management 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, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more! 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes What is TypeScript? 03:12 - Types? What are types and why should you care? JS is a typed language, it’s just not strongly typed JS does not care about reassignment of a variable to a new type Does not care about your types, but they do exist 06:34 - The Fundamentals You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like. Create a variable: Will it be a string? A number? A custom type of show? Create a function: What params does it take? What type are they? What does it return? Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed. This can allow you to prevent shipping code that has these errors by checking your code. Some of the biggest benefits here come via errors in your text editor 13:30 - Explaining the types You can create your own types Strings Numbers We only have numbers in TS, no floats/ints We do have BigInt though, but not something most people will use Arrays Will be a list of another type Unions This type will be one of the possible options String of DRAFT PUBLISHED or ARCHIVED Intersections An intersection type combines multiple types into one Objects These are custom types where each property is its own type Any Explicit any Implicit any Language types These things are technically just Objects, but they have their own types Dates Timeouts DOM Elements / Nodes Void When a function returns nothing — usually used with side effects like click handlers Enum A set of named constants Used when you have a select amount of values — I like to think of these as the select lists of TS String unions are also used for this same thing 30:28 - Inference Automatic detection of types Typescript will try to infer your types based on their definition Not every type can be inferred, leading to implicit anys and the need for explicit types 33:25 - Getting types Most popular packages already have types — you install them like npm i @types/whatever If a package doesn’t have types, you have to create them yourself, which can be annoying MakeTypes Console log a JSON.stringify(obj), and pipe it in Node has types Vanilla JS has types, for the language and all of the DOM - HTMLInputElement React has types Typing Node modules that don’t have types Overall benefits 40:39 - Type hinting With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect This seems like a small deal but in practice leads to being much more efficient 42:50 - Refactoring Rename a function, type, or variable and it will be updated everywhere in the project! Moving a function to a new file is actually part of TypeScript Drag + Drop file, update imports 48:10 - Compiling TSC vs Babel / Esbuild Only TSC type checks Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD Links Snipcart GraphQL Snowpack ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: LumiPets 2: LumiPets Bear Wes: Phomemo Label Printer Shameless Plugs Scott: ESM & Snowpack - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 02:55 - Previous iterations Originally on Drupal 7 Full re-write to Meteor + Blaze Two sites — store.leveluptutorials.com and leveluptutorials.com Meteor + React Meteor + Apollo Combine store and site Move to TypeScript NOW 05:30 - Big choices No Babel up and down the stack UI Mostly unchanged — React + Styled Components + SCSS Moving more to SCSS, CSS vars Build and dev done via Snowpack 50ms hot reloadin’ Mega fast development workflow has been a huge plus Errors in the UI via Snowpack Wrote a custom GraphQL importer plugin API ESBuild Insane speeds Wrote a custom GraphQL importer plugin Mercurious / Fastify Codegen GraphQL code gen to create everything we need for a fully typed codebase Auto-generated React Hooks Hosting render.com for both CLI Custom avalanche CLI that removes the guesswork and makes bulk operations easy Caddy server for easy leveluptutorials.dev in local environments Testing Jest → API Cypress → UI Links Digital Ocean app platform https://beta.leveluptutorials.com/ 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, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:13 - What is it? A secure runtime for JavaScript and TypeScript Built by Ryan Dhal — same guy who initially built Node.js API is JS or TS out of the box 04:55 - Does it replace / what is it in relation to? Node It’s a replacement for Node.js Express Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs https://github.com/oakserver/oak Serverless Deno can be used for anything, so it can be used for serverless functions, or a traditional web server Serverless, Deno and TypeScript with Brian Leroux React / Vue / Svelte These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until. https://alephjs.org/ SSR It comes with all browser APIs out of the box! Fetch Window + Add Event listener Webpack / Parcel / Snowpack Deno is a bundler Prettier Deno is a formatter TSC Deno is a TypeScript compiler and runtime ESLint Deno is a linter Jest Deno is a Test Runner NPM Deno is a package manager - it pulls in packages from URLs 14:51 - Modules ES modules from the start Modules are loaded from URLs Why? No package registry to worry about This is how the browser works Import from URL You can also specify it in the json file https://github.com/oakserver/oak/blob/main/deps.ts https://deno.land/ Fetch is built in! It’s a browser API, but who cares?! Browser APIs window.add event Listener Deno is event based, like the browser 20:10 - A nice standard library https://github.com/denoland/deno/tree/master/std 22:14 - WASM Deno can run WASM with the same APIs that the browsers can Node is doing this too (experimental) 25:06 - Multi-threading with Web Workers 26:13 - Speed It’s fast! They took everything they learned from Node - good and bad Built in Rust From what we understand: V8 is written in C++ Node is written in C, C++ and JavaScript How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two. https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs 29:44 - Security Sandboxed —allow-read —allow-net -allow-write https://deno.land/manual@v1.6.3/getting_started/permissions#permissions-list You can specify which dirs it can access 33:39 - Run from anywhere https://www.npmjs.com/package/npx Deno run https://cool.com/whatever.ts 37:43 - Async out of the box Everything is based on async + await / promises right away. No callback APIs, no promise wrapping. Top level await 38:53 - Node Compatibility Node APIs are being filled This means if a browser package ships an ES module of a package, we can just import it 42:21 - What we’ve built A bunch of sample scripts Lots of simple demos Very intuitive Fetched and downloaded every single Syntax mp3 https://twitter.com/wesbos/status/1326345600141582336 46:54 - Hosting Literally any linux server (Linode, Digital Ocean, etc.) https://begin.com/ https://fly.io/ 48:29 - Final thoughts Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source. Wes: If You know JS or TS, you are already 90% there. The package ecosystem isn’t there yet Battle-tested ××× SIIIIICK ××× PIIIICKS ××× Scott: Boom/Bust: The Rise and Fall of HQ Trivia Wes: Orthopaedic Pillow Shameless Plugs Scott: Deno 101 For Web Developers - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 AVIF — what it is and how you might use it! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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. Show Notes 03:10 - What is AVIF? AVIF is derived from the keyframes of an AV1 video Royalty free (big deal) What about WebP? Basically half the file size of a WebP for free, which was already about half the size of a jpeg It’s a lossy format — ie it inherently will degrade the image https://jakearchibald.com/2020/avif-has-landed/ No animation 10:53 - How to implement Cloudinary is in beta, but you can try it Gatsby supports it https://squoosh.app/ Imagemin https://github.com/nucliweb/imagemin-avif https://avif.io/ https://github.com/dreampiggy/AVIFQuickLook https://github.com/vercel/next.js/pull/20765 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

It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, 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. 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. Show Notes 02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more. 04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice? 11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it? 18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical? 22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects! 25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch? 30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc. 35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal? 40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose? 47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming? 55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users? Links Syntax Listener Questions Bundle Phobia Shopify Snipcart Styled Components BEM Mux ××× SIIIIICK ××× PIIIICKS ××× Scott: Double Sided Mounting Tape Wes: Secret Aardvark Habanero Hot Sauce Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 CSS typography, and how to quickly get up and running with type systems. 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. 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. Show Notes 05:00 - How do you define type at the start of a new project? 15:03 - How do media queries and screen sizes affect your system? 16:58 - Why are systems in type important? 20:21 - How do you design a type system? Scott’s type system: /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links https://type-scale.com/ 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, Scott and Wes are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Magic Bell - Sponsor MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 04:17 - All I Want for Christmas in React is: Suspense for data fetching On mount animations Unmount for me Single file components preventDefault shortcut Input to state mapping 09:45 - JS or Nay-s (or Both) Shout out to Pigeonhole Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python? Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces? Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines? Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri? Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger? Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors? Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte? Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine? 18:44 - Overrated / Underrated Deno ESM import from URL (no npm) Remix.run Xstate 27:49 - Hot Take Tweets https://twitter.com/wesbos/status/1336367385683636225 34:34 - Listener Questions Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance? Q: TypeScript all the things? Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.? Q: Can you share some exclusive BBQ tips? Q: What do you expect of Blitz.js in the next few years? Q: What’s the first node module you install in a brand new React project besides React itself? Q: Thoughts on using languages other than JS and TS with React like Kotlin? Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website? Links Watch the live recording of this episode: https://www.youtube.com/watch?v=8xJpxj6T1BQ Formik Mux Syntax Ep 206: State Machines, CSS and Animations with David K Piano Check My Hair - Wes Bos Houdini.How Rust Cloudinary LockPickingLawyer YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: VS Code color conversion extensions Wes: Acrylic lock picking kit Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 nothing — null, undefined, void, false, 0, ‘’, NaN, [], {}, never — all sorts of values that could mean the things that do not exist. 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 03:35 - Undefined Implicitly nothing A variable declared, but not set is undefined 04:25 - Null Explicitly nothing 04:41 - Null vs Undefined Null has a value of nothing Undefined does not have a value You can set variables to either If you want to set a score variable to nothing, set it to null If you want to un-set a value, set it to undefined == will check if a value is either null or undefined 05:35 - Void In Javascript You can pop void in front of calling a function and it will return undefined (even if that function returns a value) I’ve seen it on links that go nowhere (don’t do this — use a button) To prevent an arrow function from leaking onSubmit="javascript:void()" is a quick-n-easy prevent default on forms In Typescript Void is when you don’t care about what is returned from a function, or if nothing is returned A click handler that goes off and does stuff (side effect) can return void 09:15 - Never (in Typescript) Some functions will never return: Functions that throw errors Functions that have infinite loops Also, unreachable variables have a type of never if(true == false) { let var = 'this will never be true'; } 11:05 - Falsy values 0, -0, 0n false ‘’ (empty string) Empty array Is a value Its .length can be falsy Empty object Is a value Its object.keys(object) length can be falsy (0) 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, Scott and Wes talk about their predictions for 2021! 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. 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. Show Notes 02:06 - ESM Scott: It’s going to be big Snowpack Wes: Everything going forward should be ESM 05:44 - Wes: Remote work will grow Whole new talent pool opens up Whole new living situations open up 08:23 - Scott: Deno will grow Deno 101 for Web Developers 11:12 - Wes: Tooling will fade away Less setup, more behind the scenes Rome Deno Linter Formatter Transpiler Tester Parcel2 Snowpack Nextjs 14:14 - Scott: Greater usage of other languages to build Javascript esbuild Rust Go 19:35 - Wes: Programming communities will gain traction Github Discussions Forem Circle spectrum Discourse 23:25 - Scott: More WASM Mongo Spline 27:19 - Typescript Wes: Typescript will become more popular Scott: Tooling will get better VS Code 29:37 - React Scott: Scoped CSS in React will evolve SSR and hydration will be better Wes: People will fall out of love with React Or more magic will get added to React 32:52 - Scott: More web component frameworks Stencil 33:17 - Scott: Markdown and mdx-like frameworks will skyrocket in use 33:59 - Wes: Gatsby Hosted GraphQL / SSR / Render on demand Solve the pain of long build times Syntax 308: Gatsby vs Next.js in 2021 Next.js 35:24 - Scott: AR tech will grow Target AR app 36:38 - Wes: AI will become accessible Something as easy as a search result RTX Voice 38:43 - VS Code Scott: It will continue dominating Cloud and shared coding env will become better Figma Wes: Github Codespaces 40:18 - CSS Wes: Color functions More use of built-in features Scoped CSS Scott: People are going to love and use CSS variables Modern CSS Design Systems Course 42:39 - Serverless Scott: Ease of use will get better and better Wes: Netlify Vercel 45:30 - Wes: Enterprise Jamstack will become a thing Cloudflare hosting Next.js Gatsby Sapper SvelteKit 46:30 - PWAs might become more popular Apple will never want you to go around the app store ××× SIIIIICK ××× PIIIICKS ××× Scott: Ted Lasso Wes: Neewer Dimmable Bi-Color LED Shameless Plugs Scott: Deno 101 for Web Developers - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 keyboard shortcuts, window management, and how to stay productive. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:54 - Karabiner-Elements 06:11 - Better Touch Tool 13:55 - ScreenFlow 17:52 - VS Code Shortcuts 21:20 - Text Expander 23:00 - Clipy Links Davinci Resolve Divvy Uberlayer Elgato Stream Deck iShowU Rocket Clipy source 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, Scott and Wes talk about 2020 in review — predictions, hits and misses, hot tech, what they worked on, 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 01:43 - Predictions from 2020 CSS Subgrid CSS Houdini CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot’s of mobile issues. position:sticky - no IE at all NPM tink Installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need Yarn PnP / Yarn 2 Hard links to eliminate package duplication Shared cache across all projects Pika & Snowpack Deno React Suspense in more libraries Suspense for Server Rendering Meteor New ownership. v1.9 just dropped with lots of promise for future growth Svelte 3 Vue 3 Apollo 3.0 came out Fine grain cache control Hooks API Custom logic over how things are read and merged New dev tools Next.js 10.0 came out Images! Gatsby A single useQuery (made possible by suspense) Serverless Going to get easier Begin Next.js / Now Functions Headless CMS Thunderdome Sanity WordPress WPGraphQL Keystone Strapi RedwoodJS Blitz.js Cypress End to end testing We got Firefox support in 2020 Modulz Exports to JS component Figma Was already amazing in 2019 Constantly improving and adding new features Can import from Sketch Auto Layout Spline 42:24 - What other tech was hot in 2020? ES Modules is king We’re ready in the browser Node shipped stable Deno has it Snowpack Bundlers and tools Snowpack Vite Rollup made gains Rome GraphQL got way easier Battle of the Types Typescript Flow Reason Rust Wasm Viable to use Starting to exist in more real ways 52:53 - Working from home Remote work is hotter than ever Starlink is coming Webcams - Cam Link Discord Remote Pairing Live Share - I used VS Code with Jed from Keystone Tuple 57:13 - Code libraries React Query Alpine.js Stencil 59:25 - Personal / Professional updates Hard year for productivity Published more than 100 episodes of Syntax Links Syntax 216: Tech To Watch In 2020 Adam Argyle https://ishoudinireadyyet.com/ Syntax 212: Pika Pkg Fred Schott Level Up Tutorials: Deno 101 For Web Developers React Suspense Sapper How to Supercharge Your Productivity with GraphQL Tooling by Scott Tolinski Wes’ Master Gatsby Course Syntax 308: Gatsby vs Next.js in 2021 Syntax 299: Hasty Treat - Bundlers in 2020 https://github.com/ffmpegwasm/ffmpeg.wasm ××× SIIIIICK ××× PIIIICKS ××× Scott: Innr Bulbs Wes: Pendleton Weighted Blanket Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 how hosting and web services pricing works, and how to figure out what you need, and what you don’t. 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 01:55 - Per minute Spin up, do the work, spin down Popular in serverless space Can apply to other types of computing such as graphics, AI, machine learning, etc. 03:49 - By resources Ram CPU Disk space 06:02 - Per “dyno” These are Heroku Linux servers You can add more dynos and make your app faster They scale it for you 08:54 - By bandwidth Sitting files Inbound (ingress) Output 12:24 - By DB calls or entries Databases 14:04 - By users This is more of a Sass thing, but can bleed into hosting too Seat-based - Netlify does something like this 17:23 - By apps Digital Ocean app platform Each app is $5 21:22 - By “work” Cloudinary does transforms on images Mux Links Heroku AWS Digital Ocean Meteor Galaxy Linode Rackspace MediaTemple GoDaddy Bluehost Backblaze B2 Mux GraphQL Github Netlify 1Password Cloudinary Firefox Containers Chrome grouped tabs Brave Digital Ocean app platform Cloudflare Vercel Prisma 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

It’s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 00:47 - Roch Tolinski — You guys are doing a downtown job!!! 02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition? 10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro? 13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute. 19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains. 24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses? 31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version? 35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients? 39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen? 42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time. 44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this. 47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do? 53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved? Links https://isapplesiliconready.com/ https://github.com/ThatGuySam/doesitarm https://www.electronjs.org/blog/apple-silicon#how-does-it-work Missive VS Code Screenflow Figma Sketch Brew MongoDB iTerm2 Hyper Davinci Resolve https://remix.run/ React Router ExpressionEngine Keystone.js Advanced Custom Fields Dreamweaver Sapper Svelte https://svelte.dev/blog/whats-the-deal-with-sveltekit Rollup https://www.snowpack.dev/ Udemy Laravel https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys Vercel Netlify Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills? Design is a Job by Mike Monteiro ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Chameleon: Hollywood Con Queen 2: Q Clearance: The Hunt for QAnon Wes: truLOCAL Shameless Plugs Scott: Deno 101 For Web Developers - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 PS5 bot debacle, and how they would do it differently! 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 03:12 - Scott’s strategy Go to Reddit and refresh until someone posts a link and then GO GO GO Don’t buy on sites that allow simple bots to work TBH I don’t know how to code this type of bot and would prob end up accidentally buying a ton of stuff 05:06 - Wes’ strategy https://mcbroken.com/ You need a way to find out of there is stock Find out of there is an API endpoint you can hit (inspect element) If there is not, you’ll need to scrape the site. Fetch(url). text() Regex Cheerio Puppeteer (slower, easier to run) Save any data that you want in a database. Text-based database is great. Lowdb SQLite DynamoDB (if doing serverless) Re-run the scrape every N mins When there IS a match you can: Send a text message - Twilio Send an email - Postmark Try to fill out the form and submit it yourself document.querySelector() 11:35 - Things that get in the way Blocked IP Use a VPN Captcha or Cloudflare Run it on your local computer Use Puppeteer to get all cookies and headers Links https://twitter.com/bahamagician/status/1329430249151533066 stocktrack.ca 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, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Guests Brian Leroux Show Notes 02:17 - What’s your background? 06:18 - What is serverless? Why is serverless so awesome? 14:07 - What changes from moving from an existing app to a new app? 16:15 - What is a cold start? 17:46 - What languages are suitable for serverless? 19:14 - What do you think about Deno? 24:23 - How does Architect work? 31:14 - What do you think about Typescript? 40:35 - Do you think websites should work without JavaScript? 44:51 - What about sharing code? Links Begin Architect Scott Tries Begin Lambda https://alephjs.org/ Deno Typescript Digital Ocean Azure Remix Svelte Puppeteer Yumda DynamoDB ××× SIIIIICK ××× PIIIICKS ××× Brian: Begin Fingerprinting Scott: Been Here For Too Long Wes: Grabber Tool Shameless Plugs Brian: Begin Proxy Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 their 300th episode and the tech behind it. 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 02:15 - The things we tried Zoom Breakout rooms Hopin - $$$ Streamyard 04:24 - What we used Discord Room as a waiting room Roles to give access An a/v room where Wes and Scott were hanging Lots of questions about Slack vs Discord OBS ObS to stream to three locations ObS Streamlabs does this easily Screen capture did a better job than using the video source from Discord Youtube, Youtube, and MUX Streamlabs can stream to 4 sources at once MUX How we got Syntax.fm/live to work Create a new live stream on Mux via their UI Get stream address and key Point Streamlabs to it HLS m3u8 address from Mux into a HLS react player Looping intro video Principle for mac Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY Music Song Scott wrote Recording Audio Wes recorded two streams locally All audio on stream was piped through BlackHole on Scott’s machine Used Loopback to pipe Discord audio into an input Scott + Guest were on the same channel, possibly compressed Sounded good! Links Zoom Hopin Streamyard Discord OBS MUX Slack Spectrum Streamlabs VLC Twitch react-hls-player Principal BlackHole Loopback 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, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true? 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:34 - Server-rendered Both do server rendered Gatsby is gone at build time Next is done at build and on deploy 05:26 - Static generation getStaticProps() getServerSideProps() 08:25 - Re-rendering pages Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed. Gatsby-cloud Next.js has the revalidate flag that will re-render when stale 18:54 - Data management Gatsby has a built in GraphQL API feature with Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want. 23:16 - Client-side data Neither do anything, next. 26:33 - Dynamic Pages List of 100 shoes, each one gets a page List of four types of shoes: basketball, runners, casual, bowling, etc. List of 10 colors: each color gets its own page. List of 12 sizes, each size gets its own page. Now it gets complicated when you do this: Show me basketball shoes, in red, in size 5 600 pages minimum What about size 6+7? Then you get into having to fetch data on the client side - but all your data is in GraphQL?! The queries are different! Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794 30:41 - Routing Neither do nested routing still Both do folder based wrapper 34:50 - Hosting Anywhere 35:54 - Images Compression/resize Lazy loading SVG Blur up Next 10 released first revision of Next.js image It’s not as good as Gatbsy-image Must specify width and height, whereas gatsby has fixed and fluid Compression No blur up Yes lazy loading both don’t support gifs Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it Not for long! https://twitter.com/ascorbic/status/1320770231657238529 Next.js is just  Next does remote images Neither have quality or format auto like Cloudinary does Gatsby images have to be compressed at build time Next.js can do it on the fly assuming your server has the right tooling installed The GOLD STANDARD - https://gridsome.org/docs/images/ Lib authors need to give this a look https://twitter.com/mxstbr/status/1323279745275101184 https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image 46:20 - Server or Serverless Gatsby - none. You can do it with Netlify, Begin, AWS, Gatsby doesn’t care. Next.js - can do server with API routes. Can do serverless if you host on Vercel. 49:44 - SEO Tags Gatsby - Helmet Next - Head Sitemap Plugin for both 49:55 - Plugin Ecosystem Gatsby has lots of plugins that you install Next.js has some too. Seems Gatsby is easier in this regard because plugins can manage and normalize data into the GRaphQL Layer. 53:10 - Auth Neither do auth The first to do baked-in auth solution could get big gains. See Scott’s Svelte Meteor accounts set up. It good. https://github.com/leveluptuts/svelte-accounts-ui 55:00 - E-commerce Gatsby - options are mostly limited to Snipcart and Shopify like iframe drop in solutions where the majority of operations take place on another site and service. Next.js - hey released a starter boilerplate that leans on an existing headless cart https://rainierwatch.com/ Links Syntax 120: Gatsby vs Next Gatsby Next.js Svelte Meteor Vercel GraphQL https://www.swyx.io/react-sfcs-here/ React Query SWR React Router gatsby-image Cloudinary imgIX Begin Netlify https://reactioncommerce.com/ Shopify SnipCart WooCommerce ××× SIIIIICK ××× PIIIICKS ××× Scott: Cobra Drain Zip It Wes: Deli Containers: Mixed Boys Small Boys Medium Boys Large Boys Shameless Plugs Scott: Animating Svelte - Sign up for the year and save 25%! Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off! 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 React Hooks and why you might want to use them instead of class components. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:54 - Decouple the UI from the logic This wasn’t impossible with class-based components, but we started using HOC to do this. With hooks, it makes you decouple what it does and how it looks. Makes things like GraphQL code gen possible Multiple pieces of state or functionality Share commonly used functionality among projects and components 10:31 - Reduction in code Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.” 13:30 - useEffect’s dependencies These give you access to targeted control over side effects rather than just something changed. 14:15 - Easier to grok What happens? When? Where? It’s mostly in the hook. 16:09 - Simplicity in usage Thing, updateThing is more targeted than set state Ref makes way more sense with useRef String refs weren’t great, the function ref thing was obnoxious 21:07 - Gripes about Hooks Naming is kind of odd Vue did a better job with the names Links https://github.com/pmndrs/jotai https://github.com/rehooks https://twitter.com/youyuxi/status/1327328144525848577/photo/1 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

It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide! 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 and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:17 - Home + Cooking Cold Brew Maker 1 Gal - https://amzn.to/3pcKkKM 2 Quart - https://amzn.to/3eIV921 Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit Precut parchment - https://amzn.to/35dtWld Gaffers Tape - https://amzn.to/3lfH7aG Tineco Pure S12 - https://amzn.to/3kelPsX Instant Read Thermometer - https://amzn.to/3k9VNHf Tea Haus - https://teahaus.com/ Whetstone - https://amzn.to/32nYi2z Re-usable Silicone Mats - https://amzn.to/35dtWld Air Fryer - https://amzn.to/38uX4X1 13:27 - Games Baba Is You Untitled Goose Game Hades Jackbox Party Pack 17:16 - Tech Headphones Sony WH1000XM4 - https://amzn.to/2Ube8c8 Bose QC35 - https://amzn.to/3lrKrQp Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html USB-C Hub - https://amzn.to/3keljem Black Camo Wicked Cushions - https://amzn.to/3eGQA8q Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3 Braided USB Cables Lightning: https://amzn.to/2IkqLiT USB-C: https://amzn.to/3lfrBeX 25:24 - Smart Home Wyze Cams - https://amzn.to/2UmPINf Light Switches Lutron Dimmer - https://amzn.to/2U7OBk2 Leviton Dimmer: https://amzn.to/3pbzaFZ Google Nest Hub 33:22 - Desk Stuff Fatigue Mat - https://amzn.to/3eIXXw5 Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ MX3 Mouse - https://amzn.to/3lg8SQn Wireless Charger Pad - https://amzn.to/36gIdNj Anker USB charging Hub - https://amzn.to/3n7IGYV 36:43 - Live Streaming / Sick WFH Setups Elgato Stream Deck - https://amzn.to/35ehXnk Elgato Camlink - https://amzn.to/3kih6Gl Knockoff Camlink - https://amzn.to/3eIX0Ux Husky Adjustable Desk: https://www.homedepot.com/p/Husky-62-in-Adjustable-Height-Work-Bench-Table-HOLT62XDB12/301810799 Neewer Dimmable Bi-Color LED Studio Key - https://amzn.to/32rYAVX RGB LED - https://amzn.to/3kg1LWZ Vivo Pneumatic Mic Arm - https://amzn.to/2Ube8c8 49:07 - Fitness Concept 2 Rower Powerblocks Cheap bands - https://amzn.to/35cZ1W4 Kettle Bells - https://amzn.to/3eFocnc 51:44 - Clothes https://www.dvlpr.io/ Naked and Famous Super Guy Jeans https://huckberry.com/ https://shop.lululemon.com/p/men-joggers/Abc-Jogger/_/prod8530240?color=29283 Everlane Uniform Crewneck Levis Denim Shirts: Barstow Western Fjallraven Flannels Links https://www.eufylife.com/ Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 system for writing good commit messages. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:46 - What are conventional commits? https://www.conventionalcommits.org/en/v1.0.0/ 04:55 - How do you keep track of all the details? https://commitizen-tools.github.io/commitizen/ https://github.com/commitizen/cz-cli https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits 07:42 - How does it relate to SemVer? Links https://github.com/conventional-changelog/conventional-changelog https://github.com/netflix/unleash Deno 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

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more! 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow. 03:20 - Which JS library/framework do you think beginners might find the easiest to understand? 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere? 09:23 - My question is about the difference between a framework and a library. Should we have two separate words? 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas. 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library? 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects? 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored? 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something? 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website? 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER. 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.) 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev? 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)? 54:20 - What’s your approach for handling padding + margin with components? 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do? 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines? Links Syntax 002: Webcam and audio access with WebRTC and getUserMedia() Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy Daily.co Twilio Svelte https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case Master Gatsby Syntax 292: How to Make Freelancing Easier https://github.com/formium/tsdx https://nx.dev/react https://github.com/lerna/lerna https://www.npmjs.com/package/babel-plugin-module-resolver Deno Rust wasm-pack https://rocket.rs/ Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More! Modern CSS Layouts Modern CSS Design Systems Digital Ocean App Platform ××× SIIIIICK ××× PIIIICKS ××× Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook Wes: Levi’s Barstow Western Shirt Shameless Plugs Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%! Wes: Master Gatsby - Black Friday Sale: All courses 50% off! 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 client- and server-side validation, and what each is used for! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 02:49 - Wes’ story 06:28 - What is the role of client-side validation? Help the user input the correct data as they type it. Show correct data in UI. Show correct UI. Just about all of these things are for the user’s benefit, and how they feel when using the site. 11:10 - What is the role of server-side validation? Validate that all the data is correct before it’s saved to the database Security first and foremost 15:03 - What process should a store follow to validate on the server? Check that correct types are coming in. Very easy with Graphql. Get current stock and price information from unique ids from the database. Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user. 17:17 - What do you do if you don’t want people messing with your React state? @fvilers/disable-react-devtools if (process.env.NODE_ENV === 'production') disableReactDevTools() We do this on LUT. Why? Because it’s a deterrent. Links uses.tech Flipp App GraphQL 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, Scott and Wes talk with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world! 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 and put SYNTAX in the “How did you hear about us?” section. Guests Benjamin Dunphy Show Notes 03:48 - How do you get started running a conference? 10:05 - Which conferences have you run? 18:05 - How do you get speakers? 23:21 - What about paying speakers? 28:26 - Speaker goody bags? 32:40 - You started your own catering company? 35:32 - How has Coronavirus affected the conference space? 43:06 - Should online conferences try to replicate live conferences? Links Reactathon Jamstackconf Epicodus Meetup Flutter Lifted Plate DevRelCon EventLoop Modern Web Summit @Swizec Sanity Review Changes @tylermcginnis Syntax 250: Scott Teaches Wes Svelte and Sapper ××× SIIIIICK ××× PIIIICKS ××× Ben: Serverless Handbook for Frontend Engineers Scott: Tineco Pure One S12 Wes: Chromecast Shameless Plugs Ben: EventLoop Modern Web Summit Scott: Animating Svelte - Sign up for the year and save 50%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long. 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 04:33 - The spec https://drafts.csswg.org/css-grid-3/ https://twitter.com/wesbos/status/1320735900343668738 06:10 - How it works masonry-auto-flow: next; It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry. 09:06 - The implicit grid https://drafts.csswg.org/css-grid-3/#%23implicit-grid The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis. Interesting in a column situation (see images). 13:25 - Thoughts Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS. Links David DeSandro https://metafizzy.co/ Chris Coyier https://caniuse.com/ Isotope Flickity 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

It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 03:30 - How is this going to work? Ask a Potluck Question Do a Sick Pick Take on a Stump’d Question Do a Shameless Plug 04:45 - Brad https://bradgarropy.com/ Sick Pick: Rogue Fitness Weighted Vests Shameless Plug: Murphy 11:54 - Brittany Shameless Plug: ZTM Academy Andrei Neagoie 16:43 - Jesse Stump’d Question: What are portals in React? Shameless Plug: codeSTACKr YouTube Channel Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount 23:44 - Henri Shameless Plug: https://twitter.com/HenriHelvetica Shameless Plug: JamstackTORONTO 31:27 - Jason Stump’d Question: What does “use strict” do and what are the benefits? 36:48 - Spence mdx-embed https://github.com/PaulieScanlon/mdx-embed 41:33 - James Potluck Question: How do you keep people engaged in a workshop? Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators? Shameless Plug: YouTube for Developers Shameless Plug: James Q Quick YouTube Channel 54:24 - Austin Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together Shameless Plug: https://erickka.art/ 66:21 - Dave Sick Pick: mmhmm Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS? 78:56 - Gareth Potluck Question: What do you think about the future of mobile development vs traditional mobile app development? Sick Pick: https://darkreader.org/ Shameless Plug: Level Up Tutorials Discord 89:51 - Ackzell and Lewis Ackzell: Sick Pick: JSConf Mexico Shameless Plug: Ackzell YouTube Channel Lewis: Potluck Question: What is your daily routine like, and you do you decide to prioritize projects? Links What Syntax 300 live on Twitch Discord Mux React HLS Player https://30secondsofinterviews.org/ https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek https://madewithsvelte.com/mdsvex OBS Streamlabs ESLint Prettier Missive Shameless Plugs Scott: Level Up Pro - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, 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. Show Notes 02:39 - What is a bundler? On the one hand, you can write HTML, CSS and JavaScript and open it in the browser On the other hand, your build could be super complex 03:24 - What goes into configuring a bundler? Templating language you use (Jsx, Pug, Vue, etc.) JavaScript you write and compile to: ES6/7/8/9 Typescript CoffeeScript Polyfills Environmental variables CSS loading Image compression Asset Chunking Tree shaking 05:12 - Webpack Hardest to learn, most used currently 07:38 - Rollup Scott’s pick as best option for most features vs ease of use Very powerful Mmmr, tree shaking, plugins, esm 09:52 - Parcel Scott’s simplicity winner pick Easiest to get started with It’s a bundler, but also a dev tool Hot reload Local server Config is done via your package.json Lots of plugins available 12:01 - Npm, Yarn and Yarn 2 It’s a dependency installer rather than a bundler 13:27 - Snowpack Scott’s speed pick of the week Uses ESM by default Like Sonic after a triple shot of espresso HRM Perfect for dev builds, as well as production builds 15:51 - Isobuild / Meteor Scott’s underdog pick of the litter 16:48 - Rome Scott’s mystery pick of the week New tool to do it all Bundler, but also a linter 17:54 - Deno Linter Typescript formatter Bundler (bundle into a single .js file) 20:44 - Let your tool take care of it Gatsby (webpack) Next.js (webpack) Gridsome Create React App Vite (Rollup) Broccoli.js Links Babel Gulp Syntax 212: Pika Pkg Fred Schott Pika Rust Go Software Engineering Daily: Deno and TypeScript with Elio Rivero 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, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with