Syntax - Tasty Web Development Treats

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