Syntax - Tasty Web Development Treats

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

In this supper club episode of Syntax, Wes and Scott talk with Hursh Agrawal of The Browser Company about Scott’s favorite browser, Arc. How do you make a browser in 2022? Will there be a Windows version? And who is the target market for Arc? FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:34 Welcome HurshAgrawal.com @Hursh 02:53 What is Arc and why create another browser? Arc browser The browser company 05:36 What is different about Arc? 08:20 Who is the target market for Arc? 09:30 Sponsor: Auth0 10:39 How do you make a browser? 13:38 Will there be a Windows version of Arc? 15:57 Where did the CMD-T functionality come from? 19:27 Sponsor: FireHydrant 20:39 How do you build on top of the Chrome engine? 24:17 How does The Browser Company make money? 27:26 Do you mess with the user agent? 29:05 Why do you require account set up to use Arc? 32:58 Sponsor: Gatsby 33:59 How did you come up with your theming engine? 36:15 Supper Club Questions Warp Hacker News Changelog Every Ben Thompson Bundling and Unbundling 42:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Jabra speakerphone Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk through what they do to get things done - apps for to do list tracking, calendar blocking, and how they determine a productive day. StoryBlok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 02:49 What is a productive day? 04:56 What’s an unproductive day? 07:43 Techniques for work Getting Things Done Eat That Frog Height 14:57 Weighting tasks 18:29 Pomodoro technique 20:53 Sponsor: StoryBlok 22:46 The hard schedule 29:24 Blocking out distractions Focus Self Control 32:20 Sponsor: LogRocket 33:34 Tips We Have 42:55 Sponsor: Freshbooks 43:32 Software to help get things done. Things Todoist Omnifocus Transmit Savvycal Centered Remarkable 56:21 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: USB C Female to USB Male Adapter Wes: Measuring tape Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk all about GitHub Co-Pilot and whether it’s ethical, secure, worth it, gonna make you dumb, just going to get in your way, or the greatest thing for programmers to use. Sentry - Sponsor Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry Dex conference is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. Show Notes GitHub Copilot Code Whisperer 00:29 Welcome 01:12 Sponsor: Sentry 02:06 Sponsor: Sanity 03:07 GitHub Co-Pilot is now paid 05:51 Is it ethical? 08:02 Is it secure? 10:16 Is it going to take our jobs? 13:34 Is it worth it? 16:21 Does it make you dumb? 17:53 Does it get in the way? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Thomas Mann about Raycast - an app that can replace Spotlight on your Mac, and do so much more. FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Did we mention that FireHydrant is free? Get started at Firehydrant.com/syntax Show Notes @ThomasPaulMann 01:49 What is Raycast? Raycast Raycast Store 08:11 Do you have designers on your team to help guide UI? 10:13 Why build it native instead of HTML and CSS? 13:12 Why did you choose React? 21:54 How do you figure out what’s possible in system level APIs? 26:40 Snippets make use of SQLite SQLite 29:05 Encrypted local storage data 33:11 Any plans for theming for Raycast? 35:20 What is the pricing model? 37:06 What was your Y combinator experience like? Y Combinator Careers 42:08 Any plans for future features? 44:08 Supper Club questions Leopold FC660C Black 65% Dye Sub PBT Mechanical Keyboard iTerm Starship 51:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Nothing Ear Buds Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk about what APIs are, the API standards that exist, and walk through the various layers of what goes into making an API. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:10 Welcome 02:40 What are APIs? 06:09 API Standards 13:56 What about GRPC? 15:52 What is TRPC? 19:19 Sponsor: Payments Hub 20:25 API Cake Layers mySQL Postgres Mongo DB SQLite SQLizer 26:51 Server layer 33:28 Sponsor: LogRocket 34:36 Authentication layer 43:28 Caching layer 46:09 Sponsor: Freshbooks 46:38 Client layer Prisma: Package, but also a service keystone: Package Strapi: Package Sanity: Service Prismic: Service Hasura: Open Source and Service Contentful https://hygraph.com/ 48:01 Should I use x or y? 51:35 Tools GraphQL Playground Graphiql Postman Insomnia TablePlus Studio3T 56:27 SIIIIICK ××× PIIIICKS ××× 00:20 Knife Talk ××× SIIIIICK ××× PIIIICKS ××× Scott: Sharp Pebble Wes: Laser level Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, and more. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:27 Welcome 01:30 Sponsor: Prismic 02:54 Sponsor: Sentry 03:53 Do we use Post CSS? 05:22 Presets and plugins 06:19 Plugins we’re using "postcss-import" @import './elements/headings.css'; 09:48 PostCSS Nested 12:59 Variables (Custom Properties) 15:50 Media Query Ranges PostCSS Media Minmax 17:16 Custom Media Queries "postcss-media-minmax" @media screen and (width >= 500px) and (width <= 1200px) "postcss-custom-media" @custom-media --below_small (width < env(--small_bp)); @media (--above_small) {} 18:35 Env Vars "postcss-env-function" env(--small_bp) 20:12 Color Function and Color Function Notation /* color-function */ p { color: color(display-p3 1 0.5 0); color: color(display-p3 1 0.5 0 / .5); } Syntax 479: CSS Color Functions Post CSS Color Functional Notation Post CSS Preset Env Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with The Primeagan about his streaming set up, how he decides what to stream, why he makes the kind of content he does, and why he loves Vim. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. Show Notes 00:35 Welcome 01:48 Guest introduction ThePrimeagen on YouTube ThePrimeagen on Twitch @ThePrimeagen on Twitter Why I Make Content 03:53 Dropping in on skateboarding Tony Hawk’s Pro Skater 05:43 What do you do? 07:17 How do you plan your live streams? 10:05 Sponsor: Hasura 11:27 Do you do interactive content via OBS on stream? OBS 16:22 What languages do you use on stream? Bun Zig 22:03 What do you try to build on stream? 24:53 Sponsor: StoryBlok 25:45 Why do you use Vim? 38:42 Do you ever have to do pair programming with Vim? 40:43 What kind of hardware are you playing with? Arduino 42:52 Supper club questions Lemur Pop Kinesis Advantage 2 56:20 SIIIIICK ××× PIIIICKS ××× Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott answer your questions about picking the right tech stack, whether useEffect is still useful, benefit to use uses setTimeout, and more! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. a0.to/syntax Show Notes 00:23 Welcome 02:39 What’s the best way of comparing the efficiency of object literals created from a factory function vs objects created by new’ing a class. Perf.link 06:54 How can I always see the full signature in VS Code? 10:40 What’s your process for picking a stack when starting a project? 14:41 Sponsor: Linode 15:23 Is snapshot testing really worth it? TS QuickFixes 20:54 What are your thoughts on ISR Incremental Static Regeneration? 25:20 Is useEffect public enemy #1? Goodbye, useEffect: David Khourshid 29:02 Sponsor: LogRocket 30:17 Is there any benefit to use uses setTimeout instead of setInterval? MongoDB Prisma 37:13 HTML to PDF a great solution I use is gotenberg.dev gotenberg.dev 40:12 Although async/await might make for code that is easier to grok, I find it worse for chaining functions. Pipeline Operator proposal 45:07 How do you guys stay focused for meaningful periods of time? 48:36 How should code formatters be configured and combined? Prettier ES Lint Editor Config No-Sweat™ Eslint and Prettier Setup 51:56 What’s your opinion on the latest Sveltekit changes with load, file based routing, and more? Major Svelte Kit API Change - Fixing load, and tightening up SvelteKit’s design before 1.0 Astro Nano Store 55:53 Sponsor: Auth0 56:47 SIIIIICK ××× PIIIICKS ×××

In this Hasty Treat, Scott and Wes talk about the changes announced by Deno and their thoughts on the changes. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:24 Welcome 01:37 Sponsor: LogRocket 02:34 Sponsor: Linode 03:18 Standing and getting mic’d 04:20 What is Deno? Deno Changes 07:13 What were they doing before this? How could we support typescript without vendoring it? 21:22 Enterprise support and search Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, and more. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Show Notes 00:34 Welcome 03:23 Who is Steve Ruiz? Steve Ruiz 04:45 What is tldraw and what was your inspiration for it? tldraw Globs Excalidraw tldraw on GitHub 11:04 Why didn’t you use canvas? 16:15 How do you make an algorithm? Perfect Free Hand 19:33 Do you use pointer events? 23:44 What are you using to manage state? 29:42 How do you handle zooming? Creating Zoom UI 32:28 Where do you store the data for tldraw? Project Fugu 37:08 Why use indexdb? 38:05 Sponsor: Gatsby 39:49 How difficult was it to make it work on mobile? React Use Gesture 41:59 Does it work offline? 43:25 Supper Club Questions Monokai Pro Framer Classic Hacker News One Lone Coder on YouTube Displaced Gamer Coding Secrets 52:28 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Last Call BBS Shameless Plugs Steve: tldraw.dev Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott review the websites you’ve submitted including Ruben Oliveira, Adam Collier, Consolecmnd, Brad Preston, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:16 Welcome 02:05 Setting up Wes’ new office 06:18 rubenoliveira.tech Ruben Oliveira 17:22 adamcollier.co.uk Adam Collier 22:56 Sponsor: Sanity 24:13 Consolecmnd.com ConsoleCMND 32:37 sz-development.tech SZ-Development 44:07 Sponsor: LogRocket 44:57 Richardcarrigan.com Richard Carrigan 49:52 Bradpreston.dev Brad Preston 54:18 Sponsor: MagicBell 55:17 Mikemneves.com Mike Mneves 01:05 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Packing Cubes Wes: Volt 1 Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about margins. There are a lot of techniques for dealing with margins - padding instead of margin, only margin or padding bottom, Flexbox for everything, Grid for everything, or a spacing Div. Sentry - Sponsor Find out about Sentry’s Dex Conference. From controlling chaotic workflows to maintaining stable code, there’s a lot that can drive a developer mad. We’re hosting DEX, the conference for developers by developers, to give us all a chance to come together and sort through that madness. This is a free, one-day event to share best practices, epic fails, and seasoned insights on how to improve productivity. Whether you join us in-person in San Francisco or virtually from your home, you’ll have the opportunity to share your thoughts, engage with other developers, and walk away with your own personal madness sorting algorithm. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:30 Welcome 01:39 Sponsor: Sentry 02:50 Sponsor: Auth0 04:25 Introduction to margins 08:28 Margin vs padding 11:46 New techniques 14:32 The spacer div 17:36 Why do it as a component vs a class? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Brandon Roberts about Appwrite, how Appwrite works, who it’s for, as well as his thoughts on Angular, Remix, and more. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:36 Welcome 01:10 Who is Brandon Roberts? @BrandonTRoberts 02:00 What is Appwrite? Appwrite Getting started with Appwrite 03:17 What database layer does Appwrite use? 08:17 Is this working client side or server side? 09:54 Great docs and examples 12:55 How is deployment handled? Appwrite on Digital Ocean 15:30 Sponsor: Lightstep Incident Response 16:36 Appwrite’s focus on developer experience Appwrite to do with Svelte 19:56 Realtime database options with Appwrite 22:40 Cloud functions in Appwrite 26:01 How does Appwrite scale? Docker Swarm 27:28 Who is Appwrite for? Flutter 30:03 What is Ionic? Ionic 32:12 What do you enjoy about working in Angular? Angular 35:08 Sponsor: Hasura 36:30 Supper club questions Night owl Shameless Plugs Guest: React Router Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk through the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, and more. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 04:34 What are threads? 06:12 Concurrent vs parallel 09:22 Green screen web cam example 13:02 Examples of what you could use web workers for Party Town Deno 19:52 Sponsor: LogRocket 20:42 Post Message API and Web Workers 25:57 What about WASM? 27:28 Offline sync 28:14 What are service workers? 31:20 How do you caching sites for offline use? 32:39 Web worker vs service worker 34:12 Sponsor: Sanity 35:40 What is the lifecycle of a service worker 38:18 Possible issues with Service Workers 42:46 Debugging service workers Svelte Kit Service workers Workbox 43:04 Testing and local development Service Workers notes from Wes’ Workshop 46:45 Sponsor: Freshbooks 49:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads Wes: Samsung Frame TV Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about the past 499 episodes of Syntax, what have been the most downloaded episodes, their favorite episodes, and the sickest of sick pics. Sentry - Sponsor Attend Dex If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:28 Welcome 01:44 Sponsor: Sentry 03:28 Sponsor: Payments Hub 04:36 20 million! 05:57 Our current recording process Libsyn 09:09 Top 10 episodes 162 - The Fundementals JS 92 - React Hooks 158 - The Fundamentals HTML + CSS 66 - The React Episode 44 - How to Learn New Things Quickly 198 - How to Get Better at Problem Solving 20 JavaScript Array and Object Methods to make you a better developer 188 - The Fundamentals - Server Side 174 - How to Build an API 120 - Gatsby vs Next 18:00 Our favorite episodes 193 - Spooky Stories 400 - Horror Stories 2021 250 - Scott Teaches Wes Svelte and Sapper 60 - Undocumented Web 23:00 Questions from Twitter Twitter questions Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with the author of Svelte, Rich Harris, about what influenced the creation of Svelte, his thoughts on web components, the virtual DOM, why companies are switching to Svelte, and what’s next for Svelte. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:33 Welcome 02:10 Who is Rich Harris? Rich Harris on Twitter 02:55 What is Svelte? Svelte Vercel Svelte Kit 06:52 What influenced the template language for Svelte? 10:03 What do you use the const tag for? 10:49 Sponsor: Gatsby 12:04 What about immutability issues? 17:49 What about web components? 21:51 Why does Svelte not need the virtual DOM? 27:34 Sponsor: Lightstep Incident Response 28:45 What is your favorite part of working in Svelte? 32:31 Why are companies switching to Svelte? 34:35 What is the SvelteKit timeline? 38:52 What’s the next version of Svelte include? Motion 41:36 Any thoughts on new backend JavaScript environments? Web Interoperability 45:39 Supperclub Questions 52:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Rich: Mullvad VPN Shameless Plugs Svelte Origins Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about their thoughts on the different types of tech jobs you can get, and the pros and cons of each style of job in tech. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:10 Welcome 01:47 The types of jobs Wes’ tweet about developer jobs 03:02 Our experiences 05:58 Tech company 09:46 Freelancer or Entrepreneur 11:14 What are the pros of working at a agency? 18:38 Cons to agency life 26:19 Sponsor: Lightstep Incident Response 27:49 Pros of tech company jobs 30:47 Cons of working at tech companies 37:46 Sponsor: Freshbooks 38:51 Pros of in house tech jobs 46:01 Cons of tech work 51:29 Sponsor: LogRocket 52:28 Pros of freelance or entrepreneur 57:20 Cons of entrepreneur life 00:03 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Wes: Soap pump Scott: Pro breaking tour Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk about proposals to CSS including @when, CSS Masonry, CSS Caret, ENV Vars, and Media Query Ranges. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:11 Welcome 00:58 Sponsor: Sentry 02:17 Sponsor: Sanity 03:32 CSS @when and @else CSS When and Else @when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ } 05:42 CSS Grid 3 Masonry CSS Grid .grid { display: inline-grid; grid: masonry / repeat(3, 2ch); border: 1px solid; masonry-auto-flow: next; } David Desandro Rachel Andrew 09:00 CSS Caret CSS Caret 10:32 CSS Nesting CSS Nesting Syntax 343 CSS Nesting Postcss-preset-env 13:14 ENV Vars ENV Variables 14:58 Media Query Ranges MDN Media Queries @media (width < env(--small_bp)); @media (100px < width < 1000px); Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Josh Larson from Shopify about headless ecommerce, including Hydrogen from Shopify, how integrations work with Shopify, and what the tech stack is behind Hydrogen. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:38 Welcome 01:12 Guest introduction 03:16 What is Hydrogen from Shopify? Hydrogen Shopify Oxygen 11:23 Why would you want to go headless? 15:26 Sponsor: Hasura 16:56 Where does custom logic fit? 18:45 What is the stack behind Hydrogen? 24:16 Sponsor: Lightstep Incident Response 25:33 How much code is JavaScript vs React? 33:43 How do integrations work? 38:28 Supper Club Questions In Bed By 7pm VS Code Theme Zsh Hyper Laravel Vite Cloudflare Workers Rust Rust for JS 48:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Story Of by Vice Shameless Plugs @JPLHomer Shopify Editions Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this potluck episode of Syntax, Wes and Scott answer your questions about middleman for API fetching, when to introduce SvelteKit, generating PDFs serverside, trade offs of being an entrepreneur vs employee, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:18 Welcome 02:50 Is there a way to create a “middleman” to fetch data from an API once a day? Redis 06:53 Should I wait before introducing team members to SvelteKit? SvelteKit V1 issues 10:28 What options do we have for generating PDFs serverside? WKHTML to PDF Puppeteer PhantomJS html2canvas Generate Invoice Workers 15:47 Sponsor: Prismic 17:08 How do you say thank you to sponsors? 18:32 How would you compare the tradeoffs of working at a tech company vs. an agency vs. freelancing vs. entrepreneurship? 20:47 What’s the best way for an oldie like me to catch up? CSS Grid.io Modern CSS Layouts 26:08 I’m wondering what do you think about tRPC? trpc.io Create t3 app 29:00 Sponsor: LogRocket 30:03 PDF creator Cloudflare worker 32:50 How do you feel about keeping separate accounts for things like Twitter? 37:28 Does using prototypes mean you are not doing functional programming? 42:09 PHP vs JavaScript based CMS Ghost Keystone Strapi 45:15 Sponsor: Auth0 46:21 Why do you think this mindset that with age comes an inability to learn? Syntax 44 How to Learn New Things Quickly 51:32 Are there other payment providers you guys recommend or should I stick with Stripe and hope for the best? Stripe Paypal 56:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Literature and History Wes: Kitchen faucet Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about the various web browers that might show up in your analytics and whether you need to worry about supporting them or not. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:25 Welcome 01:19 Sponsor: Sentry 02:29 Sponsor: MagicBell 03:51 Big browsers and their engines 05:29 Cloaked browsers 08:16 What’s so great about Arc? Arc 11:33 JavaScript engines 13:30 iOS Browsers Open Web Advocacy 15:07 Android browsers 18:04 The rest of the browsers 19:24 Tor browser 20:20 Opera mini 22:48 UC browser 23:42 Opera mobile 24:57 KaiOS 26:26 Ringtone memories Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Lee Robinson from Vercel about React Suspense, server components, the edge, and more! Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Show Notes 00:35 Welcome 01:34 Guest introduction LeeRob.io Vercel 02:25 Syntax hosted on Vercel 04:08 What is suspense? 06:50 Benefits of selective hydration 13:15 Sponsor: Lightstep Incident Response 14:24 How does suspense know you’re doing something inside of it? 18:02 How does this connect to server components in React? 22:00 How do we use this in NextJS? 24:32 NextJS routing future Layouts RFC 33:11 Will I ever be able to use web components inside NextJS? 36:12 Sponsor: Gatsby 37:14 What’s happening with the Edge? Edge Runtime 47:37 What should we use for databases? 50:39 Supper Club dessert questions OhMyPosh Hyper Warp Svelte Hackernews Reddit 58:57 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× AirPods Shameless Plugs Careers at Vercel Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk through their web dev wish list of things they want to just work already! Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome 02:20 Write Custom animation transitions 03:32 date input translate to JavaScript date 06:48 Smooth and animated drag and drop 08:35 TypeScript Interfaces are faster than Types 10:35 Request animation frame 12:52 Custom Elements / Web Components 13:52 Authentication Web Authentication API 16:12 Sponsor: Linode 17:48 useIsomporphic vs useLayoutEffect 19:48 useEffect dependency array 21:27 fragments without fragments 24:46 Overflow hidden without hiding shadows 27:11 Fluid text 28:52 Sponsor: Sentry 29:34 translate3d vs translate 30:59 Gradient borders 33:33 Independent transforms 36:16 animate height auto 38:40 Sponsor: Freshbooks 39:02 Auto synced deps when changing package file 40:36 Peer dependencies 42:32 VS Code Reload after plugins install is kinda annoying 43:04 Safari updates 44:20 Apps checking for passwords 45:02 File name casing as changes 45:56 Better sounding commit names 46:33 Test runner that is the same and just works 47:32 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Arc browser / Video Wes: Battery powered glue gun Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk the appreciation of coding projects that supposedly serve no purpose, but can be great ways to learn something new. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 00:39 I am excited about coding 02:40 Sponsor: LogRocket 03:58 Sponsor: Linode 04:24 Projects that serve no purpose Bookit 05:46 Scratching your own itch 10:06 Discount finder 11:20 Webcam or audio manipulation 12:43 TTFS Parcel Vite Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Syed Balkhi about his experiences blogging and developing plugins in the WordPress ecosytem. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Sponsorname - Sponsor Show Notes 00:32 Welcome 01:52 Guest introduction WPBeginner WP Beginner YouTube CSS Tricks Smashing Magazine 04:33 What tips do you have for blogging and audience building? AnswerthePublic 09:09 How do you manage so many people? 13:07 What was your background before this all got big? 13:43 Sponsor: Hasura 15:01 How do you design your products? 18:40 YouTube, TikTok, and video 25:12 Why the WordPress hate? 29:03 What types of websites are being created in WordPress? Easy Digital Downloads WooCommerce MemberPress 34:13 Sponsor: Lightstep Incident Response 35:26 What schools are you building? Balkhi Foundation Pencils of Promise 40:51 Supper Club questions Copyhackers Swiped Uncanny Automator 53:07 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Streaks App Ready Player Two WP Forms AwesomeMotive Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Potluck episode of Syntax, Wes and Scott answer your questions about resolving node version errors, using social media, bundler for building React component, and how does Syntax get made? Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes OhMyPosh OhMyZ.sh Warp 02:34 How do you resolve errors when starting up a project with npm that you haven’t touched in awhile? 07:50 Any advice for using social media to network? 16:44 What bundler are you reaching for when building a React component library? tsdx Vite 18:37 Do you have experience with optimizing third party scripts like Google Analytics? Partytown 21:37 What’s your opinion on a “offline-first” mentality? PouchDB CouchDB Supabase MongoDB Realm 25:09 Sponsor: Prismic 26:48 How do you make web components with Svelte? Build web components in Svelte Using custom elements in Svelte 30:35 When talking about “responsive” web design do people generally mean using flexbox or grid? Responsive Design at 10 Responsive Web Design A Book Apart - Responsive Web Design 35:24 Sponsor: Sentry 36:53 Do you have any tips for staying in React-land for just spinning up a fresh site quickly? 40:47 Who or what helps you produce and distribute the podcast? Lemon Productions Chris Enns on Twitter 46:08 Should a majority of _lodash functions be considered deprecated follow up 48:18 Sponsor: Freshbooks 48:52 Do you have any tips or tricks to deal with backend data date issues? 52:23 Is the “col” system the peak of how we handle CSS, or should we start using more built-in functions? 55:25 Why you you need CSS Color Functions at runtime instead of just pre-calculating these values once as a build step using LESS or SASS? 58:58 SIIIIICK ××× PIIIICKS ××× 03:12 Shameless Plugs ××× SIIIIICK ××× PIIIICKS ××× Scott: Can tumbler glasses Wes: Car Sound Deadener Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about Bun, a new all-in-one JavaScript runtime. What makes Bun so fast? What’s on Bun’s roadmap? And why do we need another JavaScript runtime? Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:21 Sponsor: Freshbooks 02:07 Sponsor: Lightstep Incident Response 03:20 What is Bun? Bun Deno 08:20 Why is Bun so fast? Zig 12:32 Module support 15:11 What’s not implemented yet in Bun? What’s not implemented in Bun yet 17:01 Config file in toml 18:08 Bun roadmap Bun roadmap 20:27 Why do we need another JavaScript environment? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Adam Cowley about how Neo4j Database can help when working with data for your next app. Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:15 Welcome 01:24 Guest introduction 03:15 Browser innovation and testing 05:01 What is a graph database? Neo4j Cypher Sanity Groq 08:11 Is there a specific type of data that works best in a graph database? 11:57 Sponsor: Lightstep Incident Response 13:14 What’s AuraDB vs Neo4js? 15:01 Whiteboard friendly data model 19:52 How are GraphQL and graph related? 23:08 Can you sync with MongoDB? 24:41 How do you pull data into a div on the web? 29:19 Why are you used for data science a lot? 30:43 Sponsor: Gatsby 31:51 Is visualization an important part of Neo4js? Neo4j Bloom 36:01 Do you have to think about indexing with graph databases? 39:43 Are there uses Neo4j isn’t as good for? 40:22 Do you have to cache queries? 41:26 Dessert questions Intellijet Idea Cobalt 2 Theme 50:36 Shameless Plug Neo4j Desktop Neo4j Cloud 54:45 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Hue Lights Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this episode of Syntax, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:07 Welcome 01:56 Functional vs object oriented 03:49 Interfaces vs types 05:38 Tabs vs spaces 07:02 Semicolons vs no semicolons 08:10 Let vs const 09:33 Do you explicitly type or allow TypeScript do it’s magic? 11:26 Naming variables Naming convention for programming 15:13 Methods of looping 18:03 if statement curlys 20:57 Naming files 24:46 Inline testing vs running test as a process 25:31 Sponsor: Freshbooks 26:37 CSS property:val; or property: val; 27:40 CSS nesting? 29:49 Alphabetizing CSS properties 31:11 Rems, Ems, PX, Etc… 33:37 How do you center something in CSS? 35:22 How do you make something 100% height? 36:52 Sponsor: Sentry 37:30 Should comments exist? Better Comments Wes’ custom parser for VS Code Todo Tree 42:31 Creating HTML 45:28 Components in app or in isolation? 47:41 Sponsor: Sanity 48:45 Single component per file vs multiple Storybook 50:22 Naming components 51:19 General stuff 53:55 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Scott’s iPad case for kids Wes: Garbage can with custom bags. Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes try to stump each other with coding interview questions like what is a higher order component? What is functional programming? And more! Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:26 Welcome 01:47 Sponsor: Lightstep Incident Response 03:00 Sponsor: Sentry 04:10 What is a higher order component? 05:34 What is functional programming? 09:00 What’s the purpose of cache busting and how do you achieve it? Wes’ course for Beginner JavaScript 10:37 What is short circuit evaluation? 13:19 What is a closure? 15:49 What is the reason for wrapping the contents of a JavaScript source file in a function that is then invoked? 17:30 Can you describe how CSS specificity works? 20:15 How does prototypal inheritance differ from classical inheritance? 23:56 What is the difference between a parameter and an argument? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Kristi Perreault of Liberty Mutual about why they’re using serverless functions, what languages they write in, managing security and montoring, and Kristi’s journey into tech as a career. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Stack Overflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. Lightstep Incident Response - Sponsor Streamline on-call, collaboration, incident management, and automation with a free 30-day trial of Lightstep Incident Response, built on ServiceNow. Usage-based pricing on active services promotes collaboration across your entire team to build a culture of service ownership. Listeners of Syntax will also receive a free Lightstep Incident Response T-shirt after firing an alert or incident. Pay for the services you use, not the number of people on your team with Lightstep Incident Response, built on ServiceNow. Streamline on-call, collaboration, incident management, and automation with a free 30-day trial. Fire an alert or incident today and receive a free Lightstep Incident Response t-shirt. Show Notes 00:33 Welcome 03:24 Guest introduction @kperreault95 Kristi Perreault on Dev.to Kristi Perreault AWS Hero Liberty Mutual 04:55 Developers at Mutual Liberty 07:05 What did you do before serverless functions? 08:36 Why are you using serverless functions? 12:39 What languages are you writing for serverless functions? 15:53 Sponsor: Hasura 17:22 Where does all the code live? 20:58 AWS CDK AWS CDK CDK Workshop 25:55 Sponsor: Lightstep Incident Response 27:07 How did you get into tech? 31:44 How do you organize all the functions? 33:51 How important is security? 35:23 What are IM roles? 36:16 How do you deal with spiking and monitoring? Datadog Splunk 41:20 Sponsor: Stackoverflow Podcast 42:02 Have you used Edge functions? 42:50 Supper Club Questions Off by None newsletter Ready Set Cloud ××× SIIIIICK ××× PIIIICKS ××× Loki on Disney+ Shameless Plugs Real World Serverless Podcast Serverless Denver Group AWS Summits @ServerlessCO Kristi Perreault on Medium Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this potluck episode of Syntax, Wes and Scott answer your questions about peer dependencies, Vitest, NVM and PNPM, using sprites for images, common MongoDB operations, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:03 Welcome 01:53 Configuring home internet routers 04:42 Scott’s Home Assistant update Mushroom Theme 07:52 Could you explain to me peer-dependencies and how does it work? 13:24 Using Vitest do you still have to transpile code? 16:14 Can you talk about helpful and common MongoDB operations, beyond just CRUD. 18:49 How can I update the “updatedAt” field of the document on every save automatically? 20:40 What is aggregation, and when do you use it? 25:33 Sponsor: Prismic 27:27 How does NVM relate to PNPM? pnpm nvm 30:45 I’m looking to upskill from front-end JavaScript? 33:53 Is it possible to have a private NPM repo I can “npm install” from, or do I put my components up on NPM publicly? Creating a private npm package 37:51 Sponsor: LogRocket 39:14 Should a majority of lodash functions be considered deprecated? angus c just 42:36 Please do an episode on programming/learning with ADHD. 44:04 Should I still be putting images in sprites? 49:20 Does Mux have a simple mechanism for adding auth to each video or group of videos? Mux Create playback restriction 53:48 Sponsor: Sanity.io 55:02 Is there copyright issues with using public APIs? Moneypuck 59:38 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Toto Bidet Wes: Sodastream Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about clamp and interpolate and how you might want to use them in your next project. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. NAME - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! Show Notes 00:25 Welcome 00:52 Sponsor: Sentry 01:31 Sponsor: Payments Hub 02:40 Topic introduction 05:05 What is Clamp? CSS clamp: font-size: clamp(1rem, 10vw, 2rem); JavaScript Clamp: const clamp = (num, min, max) => Math.min(Math.max(num, min), max) 09:12 What is Interpolate? D3 Interpolate 12:56 Interpolate in colors 14:37 Quantize D3 Quantize Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Pokey Rule about using his voice to code, and the current state of voice coding software. Stackoverflow Podcast - Sponsor For over a dozen years, the Stack Overflow Podcast has been exploring what it means to be a developer, and how the art and practice of software programming is changing our world. Hosted by Ben Popper, Cassidy Williams, and Ceora Ford, the Stack Overflow Podcast is your home for all things code. Listen to new episodes twice a week, wherever you get your podcasts. directus - Sponsor Directus is an open-source data platform that instantly layers on top of any SQL database. Our Data Engine empowers engineers with dynamic REST+GraphQL APIs, workflow automation, built-in auth, caching, and asset transformations. And the included Data Studio democratizes your database, allowing even non-technical users to browse, manage, and visualize database content through a no-code data collaboration app. Get started in minutes with a free Directus Community Cloud project. Show Notes 00:33 Welcome 01:35 Guest introduction Con 2021 - Cursorless: keyboards and mice are sooo last year!! by Pokey Rule Emily Shea 05:12 How does coding with your voice work? Talon Voice Cursorless Talon 09:45 How do you handle triggering wrong words? 11:41 Sponsor: The Stack Overflow Podcast 12:26 Example of voice coding Parrot 14:21 What are the noises you make for? 24:29 Working on multiple lines at the same time 27:37 How do you decide where the hats go? 31:18 Sponsor: directus 32:59 What is the community of users like for this? Tree Sitter “Incremental, zero-config Code Nav using stack graphs” by Douglas Creager 35:20 Does eye tracking work? 36:48 What kind of mic do you use? DPA Microphone The Voice Book 39:25 Supper Club questions Dark Abyss VS Code theme Kinesis Freestyle 2 Charybdis Nano keyboard Nexstand Arxiv Sanity Subvocal Recognition Imagen Research Midjourney 54:11 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Git Imerge Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Pokey: YouTube channel, Sponsor Pokey on GitHub Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets