Syntax - Tasty Web Development Treats

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

27 Des 202130min

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

22 Des 20211h 3min

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

20 Des 202119min

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

15 Des 202158min

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

13 Des 202133min

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

8 Des 20211h 4min

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

6 Des 202130min

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

1 Des 20211h 3min