Syntax - Tasty Web Development Treats

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

21 Mars 202225min

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

16 Mars 20221h

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

14 Mars 202224min

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

9 Mars 202258min

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

7 Mars 202235min

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

2 Mars 202253min

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

28 Feb 202226min

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

23 Feb 20221h 3min