Syntax - Tasty Web Development Treats

In this episode of Syntax, Wes and Scott review your websites that you submitted including bald.design, Anh Hoang Nguyen, bradleyshellnut.com, and more. Prismic - Sponsor NEEDS AUDIO RECORDING FIRST Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes Uses.tech 00:10 Welcome 03:35 How to submit your site for highlight 04:11 bald.design https://www.bald.design 10:38 Anh Hoang Nguyen https://www.hoanganh.dev 15:08 kennytye.com https://www.kennytye.com 22:42 Sponsor: Freshbooks 24:10 rubenoliveira.tech http://rubenoliveira.tech 28:47 abgn.me https://abgn.me 32:02 Sponsor: LogRocket 33:19 bradleyshellnut.com https://bradleyshellnut.com 41:11 hunterjennings.dev https://www.hunterjennings.dev 46:19:16 Sponsor: Prismic 47:42:19 matthewfarlymn.com https://matthewfarlymn.com 55:00:01 SIIIIICK ××× PIIIICKS ××× SIIIIICK ××× PIIIICKS ××× Scott: Bad Vegan Wes: Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about Vitest, how testing is handled, how code coverage works, and whether they think they’ll use it. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:21 Welcome 02:47 Sponsor: Sentry 03:48 Sponsor: MagicBell 04:55 What’s is Vitest? 09:06 How is testing handled? 10:59 HappyDOM 14:13 Code coverage baked in 16:25 Files acting as folders Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk through the tech stack they use to manage their course websites. Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. .TECH Domains - Sponsor Dot Tech domains has launched a new game with wicked prizes. It’s a windows 98 inspired game where you need to find and solve puzzles in each of the drives. This is unreal and you need to see it to believe it - good luck and start the game March 25th at go.tech/syntaxbtc. Show Notes 00:10 Welcome 02:50 CSS Redesign of LevelUpTuts 03:56 Overview of our platforms 06:06 The API ExpressJS MongoDB GraphQL Fastify Mercurius Mongoose 15:13 Sponsor: Kontent by Kentico 17:07 Customer dashboard Svelte Kit 21:21 Viewing experience React GitHub VideoJS Mux Vimeo 30:53 Hosting 35:51 Sponsor: LogRocket 36:45 Admin tooling Flexbox Postmark Drip Pancake Charts 47:37 Authentication PassportJS 50:30 Transactional Email Nodemailer Pug Inky mjml 52:36 Checkout Stripe Stripe Checkouts Stripe Elements Braintree Paypal 55:58 Hosting Digital Ocean Digital Ocean Platform Render Cloudflare 57:48 Sponsor: .TECH 59:39 Other parts ××× SIIIIICK ××× PIIIICKS ××× Scott: Toniebox Audio Player Starter Set Wes: Vissles v84 Keyboard Shameless Plugs Scott: LevelUp Tutorials - Svelte 3D Course Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about getting SSL certificates set up between your hosting, Cloudflare, and other web apps you may use. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:21 Welcome 01:13 Sponsor: LogRocket 02:06 Sponsor: Prismic 03:23 Wes’ story of SSL Render 05:43 How LetsEncrypt works LetsEncrypt 08:32 What is Cloudflare? Cloudflare 10:33 The problem Wes ran into 12:27 Support is tricky 13:54 What is Cloudapp? Cloudapp Vercel 15:34 Two SSL Certs are needed 16:41 First solution 17:36 Second solution 22:36 What about A Records? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this potluck episode of Syntax, Wes and Scott answer your questions about handling auth, are web dev real developers, handling Git conflicts, converting PNG to Box-Shadow, bad docs vs no docs, making Shopify headless, and more. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:32 Fool’s winter 03:25 How do you handle authentication in an app? 09:42 Responding to people who don’t think developers are real developers? 12:21 How do you handle git conflicts in package-lock.json and/or yarn.lock files? 14:42 I built a small project which converts .png images to CSS box-shadow values. Img to Box Shadow 16:37 January 19th, 2038 at 03:14:08 is the end of epoch Office Space 20:31 Sponsor: Sentry 22:44 Should I begin to add PropTypes to my packages and projects? 25:59 What’s worse: bad documentation or no documentation? 27:37 How do you find the motivation or discipline to follow through in side projects? 29:48 I need to take an existing Shopify site and make it headless - what should I use? 37:55 Sponsor: Sanity 39:18 You have a ?token= query param and some token value for it. Could you explain a bit more on what is that for? 44:05 Have you thought about selling Syntax.fm shirts? 46:05 Can I migrate my Express routes to Next.js’ API and get the same httpOnly cookies workflow? 52:03 Sponsor: Freshbooks 52:52 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Okeeffe’s Lip Balm Wes: Okeef’s Working Hands Level Up Course Drop - https://youtu.be/LATf_lVYoMQ?t=829 Shameless Plugs Scott: Level Up Course Drop Wes: Wes Bos Course player update Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about the differences between SSR, JamStack, and Serverless. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. Visit Retool.com/syntax for more information. Show Notes 00:21 Welcome 01:20 Sponsor: LogRocket 02:26 Sponsor: Retool 03:49 What exactly is server side rendering vs. tech like Jamstack and serverless? Cloudinary Mux 12:15 Why use one or the other? Svelte Kit Syntax.fm 16:55 Where does Serverless fit into this? 19:12 What’s the ideal scenario? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this second part episode of Syntax, Wes and Scott continue talking about the 2021 State of JavaScript survey: mobile and desktop libraries, testing, monorepo, runtimes, flavors of JavaScript, and more! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 01:20 Scott’s new sound panels 03:32 Instacart 2021 State of JS Survey Tauri 07:46 Mobile and Desktop libraries 13:50 Testing Vitest Playwright Cypress 19:48 Sponsor: Sentry 21:26 Monorepo tooling 27:00 Sponsor: Sanity.io 28:18 JavaScript Runtimes 30:51 JavaScript Flavors 32:32 Non JavaScript Languages 39:38 Utilities Syntax 401: Monorepo pnpm Turborepo 40:19 Resources Syntax.fm 403: JavaScript in 2022 - New, Coming and Proposed Features 43:18 Opinions 47:21 Features missing from JavaScript 49:30 Awards 52:58 Sponsor: Freshbooks 53:38 SIIIIICK ××× PIIIICKS 56:41 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: StoryPal Wes: Heartbeat Hot Sauce Matty Matheson on Hot Ones Gordon Ramsay on Hot Ones Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about Wes' experience designing, printing, and shipping out his sticker packs. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 01:26 Sponsor: LogRocket 02:15 Sponsor: Linode 03:51 How Wes sells stickers Syntax 346: Selling And Shipping T Shirts with TypeScript 04:27 Where the stickers are printed Zigpac 06:30 How the stickers were designed 07:38 How do you ship them anywhere in the world for $5? 10:46 Packing the stickers 13:58 How did Wes sell the stickers? 16:51 Any concern about two people ordering at the same time? 17:13 One thing that did break Pushover 18:13 How the stickers were shipped Stallion Express APC 25:42 Costs for stickers 28:37 TypeScript sticker logo Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott take a look at the 2021 State of JS survey that was recently published, including demographics, salary, browser APIs, overall happiness, and more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 2021 State of JS Survey 01:51 Winter birthday fun 05:38 The State of JS survey 07:37 Demographics 09:18 Salary range 09:58 Language features 14:05 Browser APIs 17:36 Custom elements and Shadow DOM 18:18 Page visibility API 19:28 File system API 19:58 Web share API 22:15 Sponsor: Linode 23:12 Libraries 27:30 Stimulus 29:21 Trends 31:32 Happiness with the state of front end frameworks 32:28 Sponsor: LogRocket 34:04 Backend Frameworks 38:16 Backend tool satisfaction 44:35 Happiness of build tools 46:32 Sponsor: Freshbooks 48:27 The best podcast in web development 49:05 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Inventing Anna Wes:Everlane Crewneck Sweater Shameless Plugs Scott: LevelUp Course Drop Party Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes do a little this vs that with map vs reduce, forEach vs for in, .hasOwnProperty() vs in vs .hasOwn(), CSS absolute + left/right/top/bottom vs transform, and more. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 01:30 Sponsor: Prismic 02:58 Sponsor: Sentry 04:21 .filter() and .map() (every, one, etc…) VS Reduce 09:17 .forEach() vs for in / for of 15:52 .hasOwnProperty() vs in vs .hasOwn() 19:37 CSS absolute + left/right/top/bottom vs transform 22:54 Object.assign({}, obj) vs {…spread} Animal Friendly idioms Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk with Ben Vinegar about his work with Sentry, their migration to TypeScript, and advice for running JavaScript on other websites. Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Show Notes Ben Vinegar 00:20 Guest introduction 05:58 Seeing bug reports from Sentry 07:38 Distributed tracing for full stack developers 12:16 Amazon X Ray AWS Xray 15:32 Using Tracing 19:40 Sponsor: Kontent by Kentico 20:58 Cloudflare Worker Integration 22:30 How does Sentry have open source and a business? Heroku App Platform Media Temple Dreamhost WordPress Calypso 32:30 Sponsor: Hashnode 34:07 What is the tech stack of Sentry? 38:20 Sentry switching to TypeScript Sentry switching to TypeScript 44:36 Running JavaScript on other websites 51:24 Sponsor: Sentry 53:08 Sick Picks ××× SIIIIICK ××× PIIIICKS ××× Scott: Last Seen Wes: SEOUL Sisters Korean Kimchi Seasoning Ben: Worst Scene / Best Scene I Was There Too Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about new proposed features coming to JavaScript in 2022. MagicBell - Sponsor Magic Bell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:23 Welcome 01:25 Sponsor: MagicBell 02:50 Sponsor: Sentry 04:20 Weird audio tics 05:19 Fetch in Node.js 09:54 URL imports in Node.js 11:41 JSON Modules 15:01 Node in import url scheme 17:30 Pipeline Operator 21:21 Reversible String Split 23:56 JavaScript Module Blocks 25:22 String.cooked 26:34 BigInts Math URL imports in Node.js @MylesBorins Pipeline Operator String.cooked BigInts Math Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott answer your questions about selling themes, which browser to use, where to keep your 2FA codes, Remxi vs Svelte Kit, and more! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Show Notes 00:11 Welcome 02:10 Can you explain import.meta? 07:20 What are your thoughts on publishing and selling HTML & CSS/SASS templates/themes? 12:00 When is it best to use a semantic menu vs a nav? 16:14 Sponsor: Sentry.io 17:36 As a newbie in web dev., which browser do you recommend, Chrome or Firefox Dev. Edition? 20:25 Are TypeScript types are like creating models in Mongoose? 26:16 If you use 2FA, where do you store your recovery codes? 1Password 29:32 Do you know a programming language which similar syntax to js and without the need of a runtime-framework? Syntax 429 - Cloudflare Workers 32:54 I am not feeling the hype for Remix. I would rather put my energy into SvelteKit. Remix Svelte Kit 36:41 Sponsor: Sanity 38:09 Do you guys have any advice on getting unstuck from tutorial hell and at what point do you think someone is ready to apply for junior web dev jobs? 41:36 Do you feel frameworks like Next.js, Remix, etc. abstract too much the complexity that it takes to build full-stack web apps? 44:19 How do you keep up on new technologies? Swyx Scott’s Newsletter Intent to Ship 54:04 Sponsor: Freshbooks 55:06 Sick Picks! ××× SIIIIICK ××× PIIIICKS ××× Scott: The River Runner (2021) - IMDb Wes: Mike’s Hot Honey Shameless Plugs Scott: LevelUp YouTube channel Wes: Wes Bos on TikTok Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about how best to explore and contribute to code on GitHub repos. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. Visit retool.com/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:25 Welcome 01:42 Sponsor: LogRocket 02:54 Sponsor: Retool 04:33 Topic introduction 06:44 How to get a handle on something new in a library? 10:27 How to contribute to comments 12:55 Looking through Issues 15:01 Looking at Pull Requests 15:43 Check Milestones 17:58 Look at Files Changed tab Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk with the creator of Wordle, Josh Wardle. What's the tech stack for Wordle? Does he care about the clones of Wordle? And how did selling Wordle work? Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Show Notes 00:27:02 Guest introduction Wordle 02:45:13 How did Wordle go viral initially? 05:27:14 Where did the idea for Wordle come from? 07:07:06 What's your background? Reddit.com 12:52:23 Writing just HTML CSS and JavaScript 15:58:24 Wordle has 2 external dependancies 16:41:06 Sponsor: Sentry 17:40:23 The tech stack of Wordle Lit Elements just-merge gzip Cloudflare AWS S3 22:21:04 Would you use web components again? 29:36:08 How much did hosting cost? 29:55:01 How does Wordle remember my streak? 33:56:07 Do you play Wordle everyday? 36:28:11 Sponsor: Sanity 37:16:07 How do you land on internet hits so often? 40:33:15 Are you aware of the clones? Gordle 44:33:15 Sponsor: Freshbooks 45:17:10 Selling Wordle to the New York Times 49:05:20 Dealing with the domain name 54:15:09 What's his opener word? 56:03:03 Juice Juice it or Lose it talk 59:10:06 Sick Picks! ××× SIIIIICK ××× PIIIICKS ××× Josh: Tupperware Scott: Giant tub of Epsom Salt Wes: Shameless Plugs Josh: Wordle Scott: KeystoneJS Course Wes: All Courses Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about the pros and cons of JavaScript servers, Serverless, and Cloudflare Workers. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 00:26:13 Welcome 01:12:15 Sponsor: Hashnode 02:27:10 Sponsor: Linode 03:30:09 Topic introduction Netlify Functions Fastify AWS Lambda 09:46:02 Hosted Linux servers 13:41:11 Serverless functions MongoDB SvelteKit 16:34:02 Connecting to a database in serverless 20:14:14 Cloudflare Workers Cloudflare Workers Works with Workers 25:39:09 What do we recommend? Render.com Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes review your portfolios and websites including some from Harryxli, Austin Baird, Jacks Portfolio, and more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Tabnine - Sponsor Tabnine is your teams' go to AI assistant. Using a variety of machine learning models, Tabnine learns from your team's best practices, and suggests code completions based on your code. It supports over 30 languages and is available in most IDEs. Tabnine's universal models are trained strictly on fully permissive open source code, and can run locally, meaning that your code stays yours. Get the free version at tabnine.com/now or go to tabnine.com/promo/syntax to get 50% off your first 3 months of Tabnine Teams. Show Notes 00:11 Welcome 01:05 This chapter is mid Wes does TikTok 04:28 Harry xli Harryxli 15:00 AustinBaird.software AustinBaird.software 19:45 Sponsor: Linode 21:10 ognjenbostjancic.com ognjenbostjancic.com 28:19 ndo.dev ndo.dev 35:37 Sponsor: LogRocket 37:02 jacksportfolio.com JacksPortfolio.com 41:51 einargudni.com einargudni.com 43:22 Kids advert break 46:05 Back to einargudni.com 48:24 Sponsor: Tabnine 50:41 cyrillappert.ch hslu.cyrillappert.ch 54:30 Sick Picks 59:02 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: The Alpinist (2021) - IMDb Wes: Instant Pot Air Fryer Lid Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes are inspired by a Reddit post to talk about how to work better with your team. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:24 Welcome 01:57 Sponsor: Sentry 03:26 Sponsor: Sanity 04:48 Summary of the Reddit post 06:46 We are a team 09:05 Coding with ego 12:32 Follow the leader 13:59 Getting better at asking questions 15:01 Ask for clarity 15:43 Understanding the guidelines 18:12 Interpersonal tips 19:49 Celebrating wins Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk all about monorepos - the why's and the how's of using them on your projects. Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11 Welcome 01:46 Our experiences with monorepos 05:04 Why use monorepos? 09:37 How long have we been using monorepos? 10:16 Tools for starting a monorepo pnpm Nom link 16:22 Sponsor: Kontent by Kentico 17:33 What's the process for managing libraries? 20:10 Installing / uninstalling things 21:07 Shared dependencies 27:45 Sponsor: LogRocket "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", "update": "pnpm recursive up -L -i" 29:23 Turborepo Turborepo 39:32 nX nx 45:38 Sponsor: Freshbooks 46:32 Lerna Lerna 48:09 Rushjs Rushjs 52:35 Sick Picks 59:17 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze v3, 10 micro sd Wes: Tineco A11 Vaccum Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about their process for updating project dependencies. Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Sponsor - MagicBell MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:25 Weeeeelcome 00:52 Sponsor: LogRocket 01:29 Sponsor: Magic Bell 03:32 What are dependancies? 04:04 Wes updates all the things 05:30 How to check if there are any updates 07:05 Upgrade isolated, Minor deps first. 09:16 Upgrade Minor groups after that 09:56 Then upgrade Major dependencies 14:47 Finally upgrade any stand along dependencies 15:44 Test test test 16:19 Watch error logging 17:05 Pray Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk through what to focus on at a beginner, intermediate, and advanced levels of coding skills. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 02:30 Semantic HTML 07:36 JavaScript Data 08:54 Issues & technical workflow 11:40 Emailing People Syntax 117: How to Email Busy People 13:49 Make something animated with CSS Open Props Style 16:04 Make a full stack contact form in a framework 16:52 Sponsor: Sentry 18:59 CSS Variables 22:36 Server Side fundamentals 24:28 Meeting Skills 28:36 Help organize a codebase or repo. 30:26 Make something animated with JS 31:40 Write a bot 33:35 Sponsor: Linode 34:51 Write CI / CD actions / tools 37:55 Advanced Typescript 38:32 Teach at your company 39:35 Speak at a conference 40:45 Make something 3D Frame 3D React 3 Fiber Svelte Cubed 42:03 Scrape and write something to collect data 44:15 Sick Picks! 48:43 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: 14 Peaks: Nothing Is Impossible - Netflix Wes: Booty Slippers Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about CSS + JS Hacks that they're ok with using. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:53 What are the things in web dev, that feel wrong or hacky when starting out, but are actually totally accepted to do? 02:09 Sponsor: Sentry 03:12 Sponsor: Freshbooks 05:32 Negative margins in CSS 07:53 Not Passing a radix to parseInt() 10:17 -50% translation 50% direction 11:27 Overwriting Arguments in a function 13:20 non-standard-element 17:26 Button must have a type 18:56 Triangles out of borders 20:40 Overflow:hidden to clear a float 20:55 Always pass noopener to links! 22:16 Inline styles Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Retool - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. retool.com/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:11 Intro 01:10 Watching movies with kids 02:49 How do you protect images on your website? 07:21 How did you guys learn Typescript? 13:26 Should I worry about learning Typescript now or stay focused on mastering JS first? 18:16 Sponsor: Prismic 20:03 How do you decide what to learn? 26:26 I want to become full stack and learn a backend language, which one should I choose? 28:07 Do Svelte components not support media queries? 29:30 Any advice or suggestions on how to approach Auth or Payment? 32:53 Sponsor: LogRocket 33:59 Any experience working with a team on a different time zone? 42:49 Do you have any experience or recommendations for introducing prettier late in a project? 48:57 What are your thoughts on monorepos? 52:57 Sponsor: Retool 55:14 What does it mean to know JS? 59:39 What would you do if you had to start over? 03:49 Sick Picks 07:09 Shameless Plugs Paw Patrol Movie Encanto Luca Tweet: When should a JR dev learn typescript? Typescript Handbook Selling and Shipping T-Shirts with Typescript Svelte Kit Remix Height Clocker iState Menus Turborepo Nx ××× SIIIIICK ××× PIIIICKS ××× Scott: Learning Differently Wes: Truff Hot Sauce Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about Remix! Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:32 Rrrremix Remix 02:03 Sponsor: Sentry 03:48 Sponsor: Sentry 05:51 What is Remix? 07:51 Built on Fetch 12:28 Frameworks are getting so good 13:30 Data loading 14:36 Actions 19:09 Error boundary and catch boundary differences 20:15 Differences between Remix and Gatsby, and other SSG 21:33 What about hot reloading? 22:47 Nested layouts and nested routes 24:25 Typescript support 26:33 Hosting anywhere Remix Docs Remix on GitHub Remix on Twitter Remix on YouTube Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk through their predictions for 2022. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Hashnode - Sponsor Everything you need to start blogging as a developer. Own your content, share ideas, and connect with the global dev community! Hashnode is a free developer blogging platform that allows you to publish articles on your own domain and helps you stay connected with a global developer community. Hashnode: Everything you need to start blogging as a developer! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Show Notes 00:11 Welcome... 01:31 Svelte is king Svelte Svelte Kit 03:57 Next.js Next.js Next.js Live 06:40 Web components Open UI Syntax 353 Stylin the Unstylables 11:42 Rust popularity Rust Rome 15:58 Sponsor: LogRocket 17:12 Serverless and Cloud Functions 18:19 Cloudflare becoming a major player Cloudflare Pages 20:05 Tailwind Tailwind Open Props 24:10 Glow Up 24:35 Next gen dev tools OhMyZsh Warp Fig iTerm Starship 27:32 Sponsor: Hashnode 29:48 CSS Container queries, Layers, and More! 31:45 GraphQL 34:13 Deno Deno 37:41 Typescript 43:36 Server come back 45:13 Sponsor: Freshbooks 46:02 Checkouts and payment processors Wise 51:30 Temporal API 53:20 Remote Dev / Thin Client 55:16 Sick Picks 00:16 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: A Show About Animals Wes: Wise Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about some Javascript one liners that speed up your coding experience in one line. Sponsor - Linode Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:24:12 Welcome 01:24:11 Sponsor: Linode 02:11:02 Sponsor: Sentry 03:54:18 Twitter ask for One Liners 04:24:05 Math random const getPsuedoID =() => Math.floor(Math.random() * 1e15); 05:43:09 Random color Paul Irish random color '#'+Math.floor(Math.random()*16777215).toString(16); 06:41:06 Console.log as an object. console.log({ dog, person }); VS Marketplace Link 08:29:17 Edit anything document.designMode = "on" 10:15:15 Temporal date export const today = Temporal.Now.plainDateISO(); 11:44:05 Console(log) const myFunc = (age) ⇒ console.log(age) || updateAge() 13:26:13 Remove a prop const { propToRemove, ...rest } = obj; 15:29:01 PHP style debugging preElement.innerText ={JSON.stringify(val, '', ' ')}` 16:31:00 First and Last Destructure var {0: first, length, [length - 1]: last} = [1,2,3]; 17:34:17 Speed up audio video document.querySelector('audio, video’).playbackRate = 2 Overcast 19:44:15 Sleep function let sleep = (time = 0) => new Promise(r => setTimeout(r, time)) 20:26:00 If statements on one line If (!thing) return 'something' Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes review their predictions and highlights for 2021. .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you're looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code "syntax5". Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 02:21 Wes highlights 05:33 Scott's highlights 07:42 Writing admin tools for fun 13:33 Sponsor: .TECH Domain Name 14:30 Tech that was hot in 2021 17:18 Sveltekit Pancake by Rich Harris Svelte Svelte Kit 19:54 Remix Remix 20:36 Astro Astro 22:51 NextJS 11 and 12 NextJS 25:14 Vite and Parcel 2 Vite Parcel 26:52 Web3 28:00 Prisma Prisma 30:35 Typescript Typescript 33:08 Sponsor: Sentry 35:25 Reviewing past predictions 36:54 ESM 39:47 Remote work will grow up Discord Notion Height 40:38 Deno 45:11 React 46:02 Tooling fade away 47:29 Rome Rome 48:47 Rust 49:36 Programming communities Twitter Spaces Clubhouse Circle Github Discussions Tiktok Benawad on TikTok Wes Bos on TikTok 51:08 Wasm 51:26 Typescript 52:35 React 53:40 More web component frameworks 56:43 Gatsby 57:26 CSS updates Syntax 354 with Miriam Suzanne 01:00:06 Serverless 01:01:13 Enterprise jamstack 01:02:01 Sponsor: Mux 01:03:05 Sick Picks 01:08:03 Shameless Plug ××× SIIIIICK ××× PIIIICKS ××× Scott: Rocket League Sideswipe Wes: Home Work on Discovery+ Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Wes and Scott talk about Package-lock, Angular, package updates, how to learn, and media servers on planes. Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:54 Luks of the past 03:19 Sponsor: Sanity 04:26 Sponsor: LogRocket 05:04 Has package-lock.json ever saved your bacon? 08:27 Why do you not talk about Angular? 11:28 How do you handle package updates? Wes Bos tweet on npm-update 17:43 How do you keep learning in your career? 21:02 How does the movie selection work on planes? Emby Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk with Geoff and Pauline from Gitpod about developing on Gitpod, Web3, and The NFT Bay. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 01:20 Guest introduction 02:46 Coding in the browser anywhere Gitpod JetBrain 04:58 How does GitPod work in the browser? NoYaml Cobalt2 Finding VS Code Extensions for Gitpod 09:27 How does GitPod actually work? 10:57 What is Kubernetees? 13:11 Is there a full VS Code environment? 18:21 Sponsor: Linode 19:01 Who are the heavy users of Gitpod? 24:32 Teams on Gitpod Gitpod Roadmap Centered.app 30:11 Do the developers of Gitpod use Gitpod to build Gitpod? Gitpod Careers 32:51 What language is Gitpod written in? 33:15 Sponsor: Logrocket 34:10 Living in a van coding 38:16 How do you stay productive on the go? 40:18 What was The NFT Bay? The NFT Bay 44:54 Is there any good in Web3 ideas? Lularoe Documentary 49:42 Sponsor: Freshbooks 50:13 Selling NFTs is difficult 51:34 Sick Picks! 58:40 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Sweet Bobby Podcast Wes: Woosh Cloths Pauline Uniqlo Geoff Helinox Chair Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Psychology of Devx Gitpod Community Workshops as Code Ghuntley.com Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Wes and Scott talk about what's new in Gatsby v4. Sponsor - Prismic Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:26 Welcome 01:41 Sponsor: Prismic 02:35 Sponsor: Sentry 03:26 Gatsby v4! Gatsby What’s new in Gatsby 4 04:26 Any node version requirements? 05:22 Three rendering options 15:47 Parallel Queries 16:28 Data sync 16:57 Gatsby admin deprecated Nextjs Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes answer your questions on a Potluck episode of Syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 02:07 Google Chrome to start measuring user experience beyond the completion of page load 05:47 How can I ensure that I am executing npm commands safely? 07:58 How should I prefix booleans? 09:46 How do I decide between using an enum vs a union type in Typescript 13:40 What is Web Assembly? 18:34 Sponsor: Sanity 19:45 what happened to Scott using Linux? PopOS 22:44 Sponsor: Linode 23:57 How do you batch requests in nodejs to an api? 26:15 What are micro-frontends? 29:55 Sponsor: Sentry 31:16 Since Astro seems so amazing, aren’t you tempted to rebuild your site now in Astro instead of Sveltekit? Astro 33:04 Can you please shed some light on redirects in express/ koa? 36:41 How do deal with ADHD? 41:52 Should I repeat the name of the issue in the commit message or just "Resolves #$issue-number"? 44:21 Do browsers update automatically? 47:52 What do you do when working on a big project? 49:55 Can you guys help to breakdown and explain jargons and differences of RPC, REST, gRPC, GraphQL? 53:25 How to ask a question 53:42 Sick Picks 56:17 Shamless plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Satechi 3-in-1 Magnetic Wireless Charging Stand Wes: The Always Sunny podcast Shameless Plugs Scott: Astro Course Wes: All Courses Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Wes and Scott talk about how to do things in Svelte. Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Sponsor - LogRocket LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:28 Welcome 02:18 Lead pipe talk 04:33 Sponsor: Freshbooks 05:05 Sponsor: Logrocket 06:34 Intro to Svelte 07:44 Get Local State running Writable-stores 10:47 Arrow functions 11:53 Functions that update state React Hooks in Svelte React Use Svelte Store 14:36 Live / Reactive Variables 17:03 Context 20:45 Conditional rendering 24:57 Input binding 28:02 Should Wes rewrite his video player in Svelte? 30:07 Child elements 32:10 Vercel hires Rich Harris Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk with Anth Rogan about JavaScript and hardware - from cars, to factories, and the internet. Bryntum - Sponsor Bryntum’s suite of web components help developers quickly add powerful project and resource scheduling capabilities to their React, Angular, Vue or vanilla JS apps. The SDKs include extensive API docs and plenty of examples. Try them online at bryntum.com/examples/gantt or bryntum.com/examples/scheduler-pro. Visit Bryntum.com/syntax for a 45-day free trial. Logrocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 01:02 Guest introductions Anth Rogan on LinkedIn 05:44 What kinds of things did you work on at Nissan? 09:02 Why are car head units based in the past? 11:35 What are cars running for UI? 14:04 What are PLC's? 17:02 What kinds of regulations exist for automotive software? 22:28 Sponsor: LogRocket 23:03 Deeper look at PLC's 26:56 What's Node-RED? Node-RED 29:37 JavaScript is popular in industry? What else is used? 31:06 Sponsor: Brymtum Products 32:57 How do you learn about this tech? PLC Subreddit 35:24 What were you doing with Nissan head units? OBD2 Scanner 37:15 Web bluetooth API research 39:13 What's MQTT? MQTT 41:29 Sponsor: Linode 42:14 Using IoT and machine learning to find issues 46:53 New opportunities in industry tech coming 52:40 Cottage IoT dreams 56:27 Relaxing in Minecraft 57:42 Sick Picks - Anth 58:38 Sick Pick - Scott 59:49 Sick Pick - Wes 02:12 Shameless plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Spotless for macOS Wes: Wago Lever Nuts Anth: Daily.dev Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Wes and Scott talk about Meta Tags. Sponsor - Sanity Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sponsor - Sentry If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:25 Welcome Syntax 379 - The Link Tag 01:24 Sponsor: Sanity 02:50 Sponsor: Sentry 04:28 What are Meta Tags? 05:01 What is charset? 07:41 The viewport tag That’s a Nice Touch on TikTok 10:25 SEO and page data 12:03 Browser display tags 14:20 Dead tags 16:24 Robot tags 17:53 Adult ratings tag 18:18 Google site verification tags Google Verification tags 19:35 Open Graph social tags Facebook Meta tags Open Graph 22:54 Generator tag 25:54 http-equiv tag http equiv 27:20 Apple specific tags Apple specific tags Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk about all the things that have improved the lives of web developers over the years. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 00:16:18 Topic introduction 01:03:00 Leaf blowing and house updates 02:57:01 We complain a lot 04:13:22 Typescript improvements 06:20:00 Optional chaining 07:01:06 Async, Await and Promises 07:57:05 Array methods and tools for immutability 09:13:16 DOM interactions with getElementBy 10:34:10 Arrow functions 11:13:06 Classes! + All of ES6 was a huge breath of fresh air 12:18:07 Looping 13:22:00 Prettier Code is a huge game changer Prettier ESLint 15:51:00 Sponsor: Freshbooks 17:04:15 CSS updates 17:41:11 CSS Variables 18:41:15 Flexbox and Grid 20:16:10 VH, VW units 20:47:24 Overflow scroll on mobile 21:54:10 Color formats 23:08:06 Sticky headers 23:45:06 HTML 5 Introducing HTML5 By Bruce Lawson and Remy Sharp A Book Apart 27:54:00 Web components 28:29:09 Sponsor: Sentry 30:01:17 Tooling Syntax 12 Why Is Everyone Switching to VS Code? 31:28:13 Speed of latest crop → ESBuild, Vite, Snowpack, parcel Vite Snowpack 33:33:03 Image compression 37:08:21 Hot module reloading 39:11:09 Image resizing, video hosting, accepting credit cards Gatsby Cloudinary Spritecow SmushIt Stripe Braintree Entrepreneur friendly licensing 39:48:18 Entrepreneur friendly licensing 40:43:18 Sponsor: Linode 42:11:10 Developer Tools in the browser Tweet from @Bentlegen Chris Coyier - Let’s Suck at Github Together Chrome.io 43:52:17 Insights into errors and troubleshooting 44:49:13 Cross browser and cross device testing 47:12:19 Hosting and SSL Certificates 48:14:08 Scaling up 49:53:13 Scaling with containers 50:14:09 When did we start using Github? 53:52:12 ××× SIIIIICK ××× PIIIICKS ××× Scott 59:42:22 ××× SIIIIICK ××× PIIIICKS ××× Wes ××× SIIIIICK ××× PIIIICKS ××× Scott: Tonal Wes: Reboot your Portfolio / Canadian Couch Potato Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%! Wes: All Courses - Black Friday sale! Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Wes and Scott talk about their experiences using Github Co-pilot. Show Notes 00:58 Wake up early and let's go 02:19 Sponsor: LogRocket 03:21 Sponsor: Freshbooks 03:56 What is Github Co-Pilot? GitHub Co-Pilot 06:01 Scott is a GitHub Star 07:03 Examples of GitHub Co-Pilot usage 09:43 Writing pseudo code Emmet 12:51 Using it for loop callbacks 13:52 What langauges does GitHub Co-Pilot work with? 14:54 It plays nice with HTML files 15:48 Svelte component example 16:31 Benefits for course creators 17:35 Some scary things 21:04 Could GitHub start charging for this? 22:30 Good at writing types 23:59 Gripes 24:54 Converting code to Parcel 2 Parcel Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 01:13 Furniture shortages 02:29 Managing stuff 03:05 Basic troubleshooting skills are missing 06:09 Sanity check CodePen Codesandbox 08:05 Isolate the issue 08:57 Commenting out code is free 12:17 Replicate the issue 15:07 Svelte and VS Code error Svelte VS Code 17:02 Wes' course upgrades Parcel 2 Patch package 18:07 Sponsor: Logrocket 19:15 Rollback 20:30 Reading the error message Syntax 47 - How to Get Better at Debugging Syntax 152 - Debugging Tools 23:59 Crack open the node modules directory 26:06 Sponsor: Freshbooks 27:29 Write step by step comments to the code 29:01 Consider outside sources 30:56 Using the right tools for the job 33:19 Rubber ducking it 34:16 Wes' Big Mouth Bass story 37:20 Scott's blown away by his leaf blower 39:56 Copy paste a message into Google Twitter - What are your tips for troubleshooting code or a system that doesn't work? 41:33 Logs and metrics 42:36 CI CD issues and Error Handler 43:41 Using a step debugger 44:24 Explain what's happening to someone else 45:31 Read the documentation 47:05 Take a break, have a cuppa 48:42 Sponsor: Mux 50:57 SIIIIICK PIIICKS 57:05 Shamless plugs Links @jimbomoso - Do you know of any resources for developing/improving code trouble shooting? ××× SIIIIICK ××× PIIIICKS ××× Scott: Forehead Wes: EGO EXINNO 240W/120W Chargers Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code 'Syntax' for $10 off! Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:30 The last time we upgraded 07:05 Initial thoughts on new MacBook Pro Apple MacBook Pro 09:23 How much RAM you might need 11:33 M1 Pro or M1 Max? 12:37 Justification as a business expense Figma Sketch We recently found that the new 2021 M1 MacBooks cut our Android build times in half. VS Code Microsoft releases M1-native Visual Studio Code for developing apps Notion Height Sublime Text 14:52 Shortening the feedback cycle 15:57 Using VS Code 21:20 Video editing on M1 MacBook Pro Mkbhd - M1 Macbook Pro review Synology Syntax.fm Ep220 The Synology Show Recut Davinci Resolve 24:27 Screenflow export comparison Screenflow 29:32 VS Code improvements SWC pnpm 32:57 The tools are no longer the bottleneck 33:37 Hardware upgrades 34:10 The notch Bartender 36:11 macOS icons have more padding 37:03 Charging and battery TS3 Plus 38:32 Fans and heat 39:18 Touch bar is gone 39:36 External displays 41:03 Battery 41:54 LG Display issue 42:51 Touch ID reader in a better spot 43:25 What's happening to your old MacBook Pro? 45:21 Ports and keyboards Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

It’s another Potluck! In this episode, Scott and Wes answer your questions about GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off? 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!! 11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks. 16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener. 21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this? 24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.? 27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go). 31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming! 38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for crea

In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 04:00 - Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds 06:25 - Middleware (beta): Enabling full flexibility in Next.js with code over configuration 08:16 - React 18 Support: Native Next.js APIs are now supported, as well as suspense 09:56 - AVIF Support: Opt-in for 20% smaller images 11:58 - Bot-aware ISR Fallback: Optimized SEO for web crawlers 13:10 - Native ES Modules Support: Aligning with the standardized module system 14:39 - URL Imports (alpha): Import packages from any URL, no installs required Links https://twitter.com/mattgperry Introducing Middleware Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Guests Tomek Sulkowski Show Notes 02:45 - What is StackBlitz? 05:28 - What makes it different? 08:20 - How does offline work? 12:18 - What are web containers? How does this fit in? 17:45 - How does this all work (WASM, Node.js in the browser, etc.)? 21:00 - What does performance look like? 31:06 - What about VS Code extensions? 32:48 - Monorepos? 35:12 - Databases? Sqlite? 35:36 - Are there any limitations? 37:02 - What is Turbo? 40:58 - How is this different from similar apps? Links https://stackblitz.com/ https://jsbin.com/?html,output https://jsfiddle.net/ https://codepen.io/ https://code.visualstudio.com/ Fugu API Tracker (fugu-tracker.web.app) https://www.docker.com/ https://spidermonkey.dev/ https://github.com/chakra-core/ChakraCore https://sli.dev/ https://vscode.dev/ https://codesandbox.io/ https://www.gitpod.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: HaloLock Universal Ring Wes: Car LED Light Upgrade Tomek: The Dresden Files Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tomek StackBlitz Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about Astro — what it is and why you should check it out! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:08 - What is it, what does it do? Framework for server-first static apps Use any front-end framework Does not ship JS unless you explicitly define a component to ship JS 05:20 - The syntax .astro files is a mash-up of Svelte and React Frontmatter for server-side JS Template syntax is basically JSX TS baked in 07:48 - State management In client-side JS only, no state in .astro files 10:50 - CSS Svelte style Local, scoped tags SCSS baked in 11:16 - Data fetching Fetch in frontmatter via fetch() 12:06 - Vs React? Vs Next? Vs Gatsby? Vs Svelte? 15:24 - Tooling There is a Syntax highlighter Uses Snowpack under the hood Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes are back with another edition of “Stump’d!” where they try to stump each other with interview questions. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 06:05 - Which property allows you to control the shape or appearance of the marker of a list? 06:33 - What is a pseudo element? What is a pseudo class? 09:15 - What is the difference between block, inline and inline-block elements? 10:15 - What is a combinator selector? 11:12 - What is specificity? How do you calculate specificity? 14:37 - True or False — The translate() function can move the position of an element on the z-axis? 16:44 - What is the difference between “resetting” and “normalizing” CSS? 17:51 - How can you load CSS resources conditionally? 19:45 - Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? 22:30 - When to use CSS grid vs flexbox? 25:12 - What are all eight @-rules in CSS? 28:01 - Which property is used to underline, overline, and strikethrough text? 29:52 - What is DOM reflow? 32:14 - How do you serve your pages for feature-constrained browsers? What techniques do you use? 34:00 - What is the property for controlling image-scroll? 36:23 - What are the three different types of CSS gradients? Links https://github.com/sudheerj/javascript-interview-questions https://github.com/learning-zone/css-interview-questions ××× SIIIIICK ××× PIIIICKS ××× Scott: https://height.app/ Wes: Anker Mini Car Charger Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about PNPM and monorepos! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 4:40 - What is pnpm? https://pnpm.io/ Performant npm https://www.youtube.com/watch?v=hiTmX2dW84E Find and remove node modules find . -name "node_modules" -type d -prune -exec rm -rf '{}' + 08:30 - Why monorepo? Internal packages all in one place Forks and custom packages easier Commands that control everything at once 10:33 - Workspaces Not exclusive to pnpm Yarn, npm, pnpm all have them now Different syntax packages: - "packages/**" 12:48 - How it works in practice All commands run through root Use in host, hook up my monorepo to render run commands Filter and recursive "install:all": "pnpm recursive install", "clean": "pnpm recursive exec -- rm -rf node_modules; rm shrinkwrap.yaml; rm -rf node_modules", "ui:dev": "pnpm recursive run dev --filter @leveluptuts/ui", 16:35 - Using submodules https://paigeniedringhaus.substack.com/p/march-2021-git-submodules Why submodules? Public and private Links https://www.npmjs.com/package/npx https://yarnpkg.com/ Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

For episode 400, Scott and Wes talk about web dev horror stories - 2021 edition! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 02:54 - Hi guys, love the show. I wanted to share with you something that happened just the other day (Oct 4th), I was starting my new job today at a large tech company. They use React for everything (even DNS!, don’t ask me how, it’s complicated). I figured I’d celebrate my first day and push some code to prod, (how hard could useEffect be right?) Next thing you know, they ended up bringing in a guy with an angle grinder to get access to the server cage. 04:15 - No one from Denver can buy 06:38 - Bug accidentally gives $90 million to users https://www.cnbc.com/2021/10/01/defi-protocol-compound-mistakenly-gives-away-millions-to-users.html 08:34 - Share Pointy Knives Hi! I’m a developer at a consulting firm in Sweden, writing C# on the backend and using React with either JavaScript or TypeScript and hosting things in Azure 99% of the time (and 1% in SharePoint). I was in my last week at my last job before I was due to start my new job. Worked 12 h/day to keep up with all the handovers etc. to colleagues so they would have a chance to continue working on the solutions I have taken care of. One project was a process tool hosted in SharePoint Online. The guy who would oversee it had -1% experience with SharePoint (which I pointed out to my bosses). But to make things a bit easier, I wrote a deploy script to ease things a bit. Starts the terminal and runs the script towards the acceptance environment. Umpteen million errors appear… Which is strange, because there would only be about 20 commands (which can cause errors like these). I log into the environment to double check if I now accidentally entered the wrong values in the script (which looked okay according to me). But I get a 404 error when I try to reach the environment… I log into the admin interface; I discover that the site is gone… Also checking the trash can, there are no things there. Very strange. I find that I’m in a different folder than the one where I saved my script… In that folder there is an old deploy script that was used when the project was started a thousand years ago (which was not used after the project was “finished”). The first thing the script does is force delete the site and then try to create a new empty site… The site is gone with lists and everything (lists are a SharePoint thing, think of it as sql-lite), there are no backups of the acceptance environment (although it is very important). I just feel a little panicked about how I’m going to solve this. However, I remember testing a tool six months ago to copy entire environments. Where the first attempt was made on the acceptance environment. Finds the cloned environment and can use the same tool to clone it back. It took only 8-12 hours of work to create all the new things done in the environment in the last 6 months instead of X number of hours to build everything from scratch. Once I updated a feature that saves accessories on orders (same solution). However, I failed to add all the new fields to the production environment. Which meant that accessories were not saved at all… Which was discovered after a week… I fixed the error in 5 minutes and the sellers had to contact x number of customers to double check what kind of accessories they would have for their orders… 11:22 - External HD One time I needed to format a server. It was an outdate

In this Hasty Treat, Scott and Wes talk about web dev horror stories — real things that have happened to real developers Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:36 - https://twitter.com/CameronPak/status/1445051951843061767 04:48 - https://twitter.com/susanlangenes/status/1445049321871712257 05:29 - https://twitter.com/DevJordanW/status/1445052979644706823 06:12 - https://twitter.com/HerbieDuah/status/1445088892177108994 07:04 - https://twitter.com/bbbryan14/status/1445400072921956357 07:43 - https://twitter.com/stephendennis30/status/1445074683062362114 07:59 - https://twitter.com/Tim__Moran/status/1445102727701221377?s=20 08:37 - https://twitter.com/SoyAlejandroAl/status/1445063677896450048 09:34 - https://twitter.com/sudonetizen/status/1445132694531231760 11:09 - https://twitter.com/chrislaughlin/status/1445049210840178690?s=20 11:58 - https://twitter.com/sbitaxi/status/1445208793072156675 12:44 - https://twitter.com/AlexHBruns/status/1445067663919755269 13:05 - https://twitter.com/costerad/status/1445069263568580616 14:02 - https://twitter.com/gcnx86/status/1445045635250638853 14:25 - https://twitter.com/JustMetMe_app/status/1445041678167920640 14:47 - https://twitter.com/alanshortis/status/1445048899899645959 15:50 - https://twitter.com/Swizec/status/1445191324215353347 16:17 - https://twitter.com/_RobJohansen/status/1445137057236467722 17:14 - https://twitter.com/fienen/status/1445040513678196743 17:57 - https://twitter.com/TechBill777/status/1445172824822452226 18:54 - https://twitter.com/Zircoz/status/1445041440770252806 Links https://twitter.com/wesbos/status/1445039778035032068 Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

It’s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I’m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks! 06:45 - Fumbles O’Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I’d like to start teaching her basic concepts when she’s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like. 11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I’m curious what you think about hosting your own MongoDB server? I’m relatively new to Mongo but want to start working with it for smaller projects. I’ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I’m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it’s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work. 14:42 - Mike: Not a question but more of a rant… It’s 2021, almost 2022, can we all stop using ‘foo’ and ‘bar’ and ‘baz’ when teaching a programming concept? I applaud both of you because I don’t recall seeing any of your content ever using such atrocious terms, however, I’m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ‘foo’ is just confusing to beginners. That’s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo 18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs? 23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don’t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that’s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this? 27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I’ve read about these topics and watched videos but haven’t really seen how t

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 03:44 - What is Just? https://github.com/angus-c/just No dependencies It’s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5 06:46 - Some nice ones just-safe-set → deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake just-compare 10:54 - Why? This is the NPM install of Stack Overflow copy+paste Handy as hell Battle-tested Lots of ways to do simple stuff Sometimes the simple stuff has weird edge cases - these are caught Sometimes your checks can be messy Check if an object is empty 25 lines Just install it 12:05 - Other Great to learn and test yourself There are tests for each function Run them See them fail Try and make it so all the tests pass without looking at the source Links https://github.com/angus-c/just https://github.com/antony Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Scott and Wes talk about running a podcast — recording, sponsoring, where to start, and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:45 - Recording Setup Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter dbx 286s 09:13 - Notes Shows begin as a Notion doc Big outlines with a point-based outline to where to go Sometimes points are detailed, other times are just one-word reminders as to what to hit Sponsors pulled from a Notion relational table Shows are created in a kanban board but moved to a calendar view 12:37 - How do you find stuff to talk about?! Technical skills Hasty Tasty Potluck Game shows Collabs ShopTalk Collab Changelog Collab Soft skills Productivity Apps We Cooked It: Explainer Episode Add ideas to the list anytime it pops into your head 21:02 - Editing Podcast Royale We record a clap for syncing Upload to Dropbox for our editors 22:07 - Hosting Libsyn Archaic feeling, but covers everything 22:36 - The website Next.js Open source PRs are submitted adding the latest episodes 24:10 - Transcripts Generated 24:40 - Would you still start one? Podcast vs YouTube vs Twitch 29:20 - Getting popular / Marketing How do you do it? Consistency is key Need external audience 35:34 - Sponsors Five to six hours per week in prep Most of our sponsors are products we already used We sell and manage all our sponsors ourselves 42:17 - What about Patreon? Ad-free version? 46:04 - Live shows Confs Livestream Links Delicious Brains Syntax Ep 004: JavaScript Tooling LulaRich ××× SIIIIICK ××× PIIIICKS ××× Scott: Untold: Crime & Penalties Wes: Roadrunner: A Film About Anthony Bourdain Shameless Plugs Scott: All Courses - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 04:39 - color-contrast() Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. 06:01 - Accent color https://davidwalsh.name/css-accent-color 07:34 - currentcolor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword 08:54 - Profiled color values - color() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color() 11:00 - color-mix() https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix() The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Would be handy for programmatically generating colors - 10% more blue for a border? Sure! 14:18 - Space-separated functional color notations rgba(255 255 255 0) instead of rgba(255,255,255,0.5) 15:28 - RGB and HSL with Alpha rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5) 18:22 - Hex + Alpha values RRGGBBAA How do you remember?!?! Transparent 21:49 - lch(), lab(), hwb() notation CIELAB color space aka Lab is a color space. A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color Lab is intended as perceptually uniform Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ Links https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://twitter.com/argyleink Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets