Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!

In this episode of Syntax, Wes and Scott answer coding questions posed by ChatGPT like what’s the difference between rem and em in CSS, the difference between a callback function and a promse in Node, what are Fastify plugins, and more! Show Notes 00:19 The premise for this Stump’d 05:46 Scott’s weekend story 09:36 What is the difference between a for loop and a while loop in JavaScript? 11:11 What is the difference between the “em” and “rem” units in CSS, and when would you use each of them? 13:15 What is the difference between a callback function and a promise in Node.js? 14:57 In JavaScript, what is the difference between a function declaration, a function expression, and an arrow function, and how do they affect the concept of hoisting? 18:39 How do you define a custom scalar type in GraphQL? 21:30 With Deno, can you provide an example of an experimental API that requires the “–unstable” flag and explain its purpose? 26:59 What’s the difference between a div and a span? 28:01 What is aspect ratio? 29:07 If it’s not supported by all browsers, how could you maintain aspect ratio? 30:11 Can you explain the purpose of the beforeUpdate lifecycle function in Svelte, and provide a simple use case for it? 32:33 What is the difference between unknown and any in TypeScript, and when should each be used? 34:42 In TypeScript, what is a mapped type, and how can you use it to create a new type that makes all properties of an existing type optional? 36:21 What are Fastify plugins, and how can they be used to extend the functionality of a Fastify application? 37:57 In React, what is the purpose of the React.memo higher-order component, and how does it help improve the performance of a functional component? 39:53 How would you create a custom HTML element that is styled with CSS and has dynamic behavior using JavaScript? 41:57 What is the Intersection Observer API, and how can you use it to implement infinite scrolling in a web application? 49:00 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Rodge Tapes Wes: Shenzhen Rebow Technology - Neon Sign 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

5 Apr 202354min

In this Hasty Treat, Scott and Wes talk about the fact that import maps are in Safari Technical preview, and what that means for web developers. Show Notes 00:26 Welcome 02:16 Import maps just dropped 04:09 Which browsers support it? 06:01 What is a map? 06:40 How does the syntax work? 09:35 What about dependency resolution? 10:25 What about bundlers? 13:17 How does this work with Deno? Deno — A modern runtime for JavaScript and TypeScript Import Maps | Manual | Deno whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api 20:12 What about with node? Support import maps and bare import specifiers · Issue #43326 · microsoft/TypeScript Policies | Node.js v17.9.1 Documentation 21:22 What about Typescript? 22:43 Downsides to import maps 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

3 Apr 202328min

In this supper club episode of Syntax, Wes and Scott talk with Justin Fagnani about working with web components, using Lit, how routing and state are handled, thoughts on signals, and what is the future of web components? 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:49:11 Guest introduction 01:03:00 Sponsor: Sentry 02:02:11 Why do people use React when we have web components and lit? 03:57:14 Who is Justin Fagnani? Justin Fagnani Justin Fagnani (@justinfagnani) Justin Fagnani · GitHub Justin Fagnani - Fosstodon Lit (@buildWithLit) Lit Google App Maker 04:55:02 What are web components? The Extensible Web Manifesto 05:59:08 What is the shadow dom? 08:56:02 Was there an intention for a layer on top of web components? 13:22:09 What is Lit? 16:19:23 What are the benefits of using a library for web components? Custom Elements Everywhere 21:20:14 Why would write in React and not in web components? 24:24:18 How does CSS work with web components and Lit? 28:00:14 Using constructable stylesheets ::part Constructable stylesheets/ 29:58:18 Does Lit do anything with CSS? 32:01:01 Does Lit do routing? Lit Mobx 34:06:02 How does Lit work with state? 34:52:15 What about signals? 38:49:00 Is Server Side Rendering possible with web components? 41:03:07 What websites are using Lit and/or web components? 44:26:08 What’s the difference between Lit and Polymer? 45:44:17 What is the future of web components? 48:09:14 Supper club questions GitHub - w3c/csswg-drafts: CSS Working Group Editor Drafts 56:36:20 SIIIIICK ××× PIIIICKS ××× 55:27 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Last of Us | Official Website for the HBO Series | HBO.com Shameless Plugs Lit Lit Discord 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

31 Mar 202358min

In this potluck episode of Syntax, Wes and Scott answer your questions about what to do with client projects, testing animations, evaluating front-end frameworks, tools to use when learning, and coding related injuries. 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:10 Welcome 00:25 Sponsor: Sentry 01:22 Landscaping update 02:27 What do you do when you are done a client project? 10:09 Should I keep animations in our tests so our tests match prod behavior? 14:05 How does ChatGPT fill the responses to the prompt? 17:14 What is the best way to evaluate and choose a front-end framework for a project? 21:10 Should functions only be used strictly for code that is going to be re-used? 26:03 What kind of tools and processes do you use when learning? Obsidian Roam Research – A note taking tool for networked thought. 30:19 What are your opinions on using “display: grid” simply to be able use the gap property on the elements inside? 33:57 What do you guys think of being a 1-language dev? 36:38 What are some tips you have to push back on requirements from clients? 41:11 Have you guys ever had any coding related stress injuries, like back issues or carpal tunnel? MoErgo Glove80 Wireless Split Ergonomic Keyboard GitHub Next | Hey, GitHub! 48:41 What do you think of using “Feature Flags” in the codebase to enable / disable features at runtime? 51:19 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: History for Granite Wes: GreatScott!, bigclivedotcom Shameless Plugs Scott: LevelUp Discord 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

29 Mar 202357min

In this Hasty Treat, Scott and Wes talk about what can be done with the OpenAI API, how to get started with it, pricing, tuning your model, and gotchas for getting started with the OpenAI API. 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:26 Welcome 01:17 Sponsor: Sentry 02:39 What is the OpenAI API? 05:11 Getting started with the API 07:41 How run OpenAI OpenAI API 14:16 GPT4 update 17:58 Tune your models 19:46 Generating questions with ChatGPT 24:30 Speech to text Otter.ai - Voice Meeting Notes & Real-time Transcription Descript | All-in-one video & podcast editing, easy as a doc. 26:12 Related API 27:33 LangChain 32:12 Save your replies 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 Mar 202334min

In this supper club episode of Syntax, Wes and Scott talk with Travis Neilson about his work at Google, YouTube music, and where AI is at now, and where it’s headed in the future. Show Notes 00:37 Welcome 00:55 Guest introduction Travis Neilson (@travisneilson) Travis Neilson dot com Travis Neilson on Skills Gap, Design, Focus and Working at Google — Syntax Podcast 142 Awwards Conference talk https://www.youtube.com/LittleMusicBoxes 06:29 Convos about AI 07:49 How do we keep humanity with AI? 15:42 Is this the printing press or is this putting everyone out of a job? 19:21 What is Google using AI for these days? 25:59 How do we keep human interface via AI? 31:18 What is the evolution of AI chat windows? 34:05 How do you nourish your AI with data? 39:59 Halluncinations in AI 47:46 What models are exciting to you? 52:01 We’re building the window for the next generation 54:55 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× The Age of Spiritual Machines The Singularity is Near The Shape of Design Shameless Plugs 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

24 Mar 202359min

In this episode of Syntax, Wes and Scott answer your questions about learning web dev at an older age, making your apps look better, building a video streaming site, mono repo vs regular, 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. Show Notes 00:11 Welcome 00:31 Sponsor: Sentry 01:43 DST update Tales of Taboo 03:45 Is it too late to learn web dev at an older age? 10:20 How do people produce work so quickly? 13:47 How can I make my web apps look better visually? Dribbble - Discover the World’s Top Designers & Creative Professionals Tailwind UI - Official Tailwind CSS Components & Templates CSS · Bootstrap 18:41 Not losing the niceties with not having to do a full page load 22:23 Should I use a script to generate an index JS/TS file? 24:55 If you were going to make a video streaming website, what technologies would you use? The API to Video | Mux Vimeo – Video Experience Platform Live Streaming on AWS | AWS Solutions Video on Demand | AWS Solutions Cloudflare Stream | Video streaming made easy and affordable at scale 29:11 What should I do if my boss wants me to move up the business ladder? 31:58 I’m confused about hydration in frameworks like SvelteKit. 37:07 What’re the advantages of a mono repo over a regular one? 39:50 Is it better to stay put at a place even if you’re unhappy right now? 43:13 How should I ingest tv scripts into a database? 46:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Stronger By Science Podcast Wes: Merten and Storck Carbon Steel 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

22 Mar 202352min

In this Hasty Treat, Scott and Wes talk about why you might need to tunnel to your local computer, and how to set that up securely. 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:24 Welcome 01:09 GitHub tarball web streams 05:09 Sponsor: Sentry 05:48 Why would I need security locally? Caddy Server 11:23 Cookie issues 13:04 Examples of things that need a secure context MDN Features restricted to secure contexts 14:58 What is tunneling? 19:22 Cloudflare Tunnels Cloudflared Cloudflare Tunnel 20:50 nGrok ngrok 23:22 Local tunnel Local Tunnel 24:55 Tunnel to Tunnel to dev - Expose your local web server to the internet with a public URL 26:02 Cloudflare subdomain 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 Mar 202330min