Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about Signals - what are signals and why is everyone talking about them suddenly? Show Notes 00:25 Welcome 01:40 Chipping away at projects 03:20 WTF are signals? Signals Framework reimagined for the edge! - Qwik SolidJS · Reactive Javascript Library Zone Vanilla 09:03 What are the boundaries on signals? 10:49 Why are signals so popular now? 15:57 When wouldn’t you use signals? 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 Dylan Jhaveri about his work at Mux, how Mux ingests and spits out video, and where Mux fits in a tech stack for developers working with video and audio. Show Notes 00:36 Welcome 01:27 Who is Dylan Jhaveri? Dylan (@dylanjha) The Internet’s video infrastructure | Mux Mux Player 03:04 Why did you build Mux Player? FFmpeg FFmpeg WASM 06:19 How did you chose to go with web components? CanIUse Mediasource 09:36 What is Mux? 15:20 Can you stitch or clip video via the API with Mux? 18:07 Do you think hls will be supported in Chromium or Firefox? 21:56 How does Mux process videos into 5 versions? 26:35 Is Web assembly in use for video? 27:55 Has Mux researched AI for video? 31:13 Building a podcast transcription video 36:49 Do you have to use MP4? What about webM? 39:36 Media Chrome video player Elements for building media players 44:58 What’s Mux Data? Mux Data 49:33 Slick Mux website Mux.com 52:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Cruise 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 UI elements and best practices with UI elements, as well as UI elements that exist in browsers. Show Notes 00:10 Welcome 01:10 Making demos for fun 02:47 Why we’re talking UI elements 03:48 Bad UI elements in the browser Syntax 602: Modals, Popups, Popovers, Lightboxes Progress 10:47 Decent UI elements in browser 19:49 Enter Open UI Open UI 34:39 Accordion hunks 38:15 Pop overs 42:15 Focus group 46:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Fishskyn Wes: Flavacol & Butter Flavoured Coconut Oil Shameless Plugs Scott: Sentry replays 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 all things Bluesky, the AT Protocol it’s built in, the terminology of Bluesky, and how the API currently works. Show Notes 00:07 Welcome 00:53 Welcome to the Bluesky Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky 03:14 What could the new Twitter be? 07:56 What is Bluesky? Nostr Bluesky Twitter Blue Bluesky Staging Bluesky FAQ 10:25 Why is social media important? 14:01 What is AT Protocol? 22:06 Lexicon for Bluesky 28:10 Small group of devs building Bluesky Cravings by Chrissy Teigen | Fun Recipes & Cookware 29:54 Blocking issues 31:53 Bluesky API Samy on Darknet Diaries ep61 Shameless Plugs Scott: Sentry) 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 supper club episode of Syntax, Wes and Scott talk with Zach Lloyd about how Google Sheets works, why Zach wanted to build Warp, why did they use Rust to write Warp in, is Warp going to come to Windows, and more! Show Notes 00:20 Welcome 01:12 Who is Zach Lloyd? Zack on Twitter Zack on LinkedIn Warp Terminal × Next Gen Terminals — Syntax Podcast 579 Warp: The terminal for the 21st century 03:41 How does Google Sheets work? GWT 13:38 What is Warp and why did you build it? Introducing Warp 16:50 Why did you build Warp in Rust? Rust Programming Language Harfbuzz Adventures in Text Rendering: Kerning and Glyph Atlases 23:20 How would you move Warp to Windows? 26:02 How would you run Warp on the web? 31:24 How are the blocks done inside Warp? 36:23 Would Warp ever add a shell? 40:04 Is better completion support coming to Warp? 44:42 Warp AI features 52:08 Supper Club questions 56:52 SIIIIICK ××× PIIIICKS ××× Oh My Zsh - a delightful & open source framework for Zsh ××× SIIIIICK ××× PIIIICKS ××× Tonal | The World’s Smartest Home Gym Machine For Strength & Fitness Shameless Plugs Join Us | Warp 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 tech stack they used to create the Syntax giveaway site for the Sentry + Syntax announcement week. What were the features of the site, how’d they generate proper codes, and how’d they stop developers from hacking the system? Show Notes 00:07 How to do a giveaway and distribute it? 04:26 Building in the spirit of Syntax 05:44 The tech stack SvelteKit • Web development, streamlined Prisma | Next-generation ORM for Node.js & TypeScript Syntax × Sentry MMXXIII | Product Blog • Sentry PlanetScale: The world’s most advanced database platform My Places - Google My Maps sveltekit-basic-auth/hooks.server.ts at main · ghostdevv/sveltekit-basic-auth Voucherify: Free Random Codes Generator 09:48 Hosted on Vercel Vercel 13:04 What are the features of the site? 19:10 Generating the codes properly 26:48 Releasing locked coupon codes 29:13 Client to server side connections 32:56 Stopping developers from gaming the giveaway 46:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: The Super Mario Bros. Movie (2023) - IMDb Wes: The Strong National Museum of Play Shameless Plugs Scott: Application Performance Monitoring & Error Tracking Software | Sentry 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 RPC, what it means, why are we talking about it now, tRPC, and will RPC take off? Show Notes 00:22 Welcome 01:51 What does RPC mean? 04:52 Why are we talking RPC now? 10:27 Hype around RPC Supper Club × Solid.js with Ryan Carniato — Syntax Podcast 577 11:05 Isn’t this just a REST endpoint? 13:23 Considerations around RPC 16:11 What about tRPC? Supper Club × tRPC With Alex KATT Johansson — Syntax Podcast 526 18:08 Will RPC take off? Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this supper club episode of Syntax, Wes and Scott talk with Donata and Hans Skillrud of Termageddon on GDPR, privacy policies, cookie pop ups, and the various legal and ethical reasons to implement them properly. Show Notes 00:36 Welcome 01:47 Who are Donata and Hans? Donata Stroink-Skillrud Esq., CIPP on Twitter Hans Skillrud on Twitter Termageddon Termageddon on Instagram Termageddon on LinkedIn 03:39 What are privacy policies and a terms of service? 4 Things to Look for in a Privacy Policy Generator - Termageddon Why accessibility is important when it comes to cookie consent - Termageddon 09:15 Does scrolling to the bottom and pretending to read terms work? 10:49 Do people ever read the terms of service? 15:57 Do companies ever actually get in trouble for violating privacy? 20:06 What is GDPR and the impact on small business owners? 32:30 Cookie war and pop ups 35:40 Essential cookies 42:42 Alternatives to Google Analytics The Google Analytics alternative without compromise - Fathom Analytics Self-hosted website analytics | Ackee 43:39 Denying cookies, but still able to create accounts? 48:57 Is there legal concerns with AI? Can ChatGPT (AI) write your Privacy Policy? - Termageddon 56:25 What is Termageddon? 58:59 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× EPIX From TV Series 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 type guards vs type casting, crypto usage, feedback for Syntax, custom status pages, SEO and metadata, uploading images, home automation, and more! Show Notes 00:12 Welcome 01:23 Scott’s new gear MT-48 Volt USB Audio Interfaces 07:36 Are type guards safer and superior to type casting? 13:51 I know you guys (lightly) rag on Crypto, but do you see any use-case there for proof-of-personhood? 23:34 Where do I give feedback outside of Twitter? User Feedback | Sentry Documentation 27:19 Do you have custom status pages created for your platforms? UptimeRobot: Free Website Monitoring Service Privacy Badger Status.io - Hosted Status Pages Statuspage | Atlassian DigitalOcean Status 35:12 Is metadata only good for SEO? Does SEO matter on pages you can only view if you’re logged in? 39:00 How do you upload images from authenticated users? 46:30 What do you think of Zed? Zed - Code at the speed of thought 53:21 I’ve got ADHD - any tips for focusing and staying on track? 56:54 How do I convince my partner to accept more home automation? 02:15 What kind of tools and processes do you use and find effective when learning? Obsidian Mind Map & Brainstorm Ideas - MindNode 06:42 Would it make any sense to use the Fetch API with a long running stream? 08:31 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Project Farm Wes: Splatypus Shameless Plugs Scott: Sentry 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 CSS Color Functions, the benefits of dynamic css color, relative color syntax, color contrast, and color mix. Show Notes 00:26 Welcome 00:49 Why we’re talking CSS Color Functions 01:57 Benefits of dynamic CSS color 03:14 Relative color syntax 06:51 Color contrast 09:26 Color mix 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 Nicholas Zakas about his creation of ESLint, what’s coming up in ESLint, and his work as a coach and mentor for programmers. Show Notes 00:34 Welcome 01:20 Guest introduction Human Who Codes Nicholas C. Zakas (@[email protected]) Twitter @slicknet nzakas on GitHub @humanwhocodes) on Instagram Human Who Codes on YouTube 04:24 Why did you want to build ESLint? 09:08 How does ESLint work? 13:25 How do you work on a project for a decade? 17:12 At what point do you pay attention to JavaScript proposed changes? 20:37 Config systems in JavaScript 31:18 ESLint in Rust? 41:07 Are we going to see ESLint for more languages? 47:06 What kind of coaching do you do for programmers? 02:46 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Apollo Neuro Shameless Plugs Understanding JavaScript Promises 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 go through all the features of Sass and decide where we are at with Native CSS alternatives, giving each feature a rating of replaceable, plausible, or missing. Show Notes 00:11 Welcome 01:17 Easter updates 04:17 Getting into Sass 06:03 What is PostCSS? 09:52 CSS Variables 13:49 CSS Nesting CSS Nesting - Chrome Developers postcss-plugins/plugins/postcss-nesting at main · csstools/postcss-plugins 23:13 Colors CSS5 Color Functions — Syntax Podcast 479 29:08 CSS Looping 34:20 Mixins or extends 39:34 CSS Partials Features - PostCSS Preset Env - CSSTools 44:29 CSS Math 49:40 Functions Is Houdini Ready Yet? 52:04 Firefox and Safari support 55:08 Back to Functions 56:21 BEM Syntax 58:51 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Solar Lantern Wes: Cotton Candy Machine Shameless Plugs Scott: Sentry 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 through the differences between modals, popups, popovers, lightboxes, and dialog boxes. Show Notes 00:31 Welcome 02:25 What’s popping up? 02:59 What’s a modal? 08:33 Pop overs and lightboxes 10:41 Explicit dismiss and light dismiss 11:30 Inert property inert 16:30 Backdrop pseudo element Dialog with animation 19:26 Dialog 28:12:11 Making accessibility easier const showButton = document.getElementById('showDialog'); const favDialog = document.getElementById('favDialog'); const outputBox = document.querySelector('output'); const selectEl = favDialog.querySelector('select'); const confirmBtn = favDialog.querySelector('#confirmBtn'); // "Show the dialog" button opens the modally showButton.addEventListener('click', () => { favDialog.showModal(); }); // "Favorite animal" input sets the value of the submit button selectEl.addEventListener('change', (e) => { confirmBtn.value = selectEl.value; }); // "Confirm" button of form triggers "close" on dialog because of [method="dialog"] favDialog.addEventListener('close', () => { outputBox.value = `ReturnValue: ${favDialog.returnValue}.`; }); 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 Nate Weinert, creator of Tamagui, about what Tamagui is, how styling works in React native, building and designing the Tamagui website, and more. Show Notes 00:29 Welcome 01:22 Who is Nate Weinert? Nate (@natebirdman) natew on GitHub Tamagui — React Native + Web UI kit tamagui: The worlds fastest React UI kit also happens to work on Native + Web seamlessly 🙏 02:34 What is Tamagui? 04:02 How does styling work in React native? 05:35 What is React native web? 08:27 What does Tamagui do besides styling? 14:38 How did you build and design the Tamagui website? Stitches — CSS-in-JS with near-zero runtime Next.js by Vercel - The React Framework 16:50 What are the docs made with? 20:25 What are Atomic Styles? 26:16 How is layout handled in react native? 29:26 Where are things going in the React world? App.js Conference 2023 react-native-reanimated - npm 37:45 Supper Club questions iTerm2 - macOS Terminal Replacement 47:15 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× ABEO Footwear - Shop Biomechanical Sandals, Shoes and Orthotics Shameless Plugs foobully - Twitch Tamagui — React Native + Web UI kit 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 the 600th episode of Syntax, Wes and Scott talk about the big announcement about Syntax’s future, exciting new opportunities coming for the show, and more! Show Notes 00:11 Scott’s big announcement 00:58 Our big announcement 01:39 Guest introduction David Cramer (@zeeg) Application Performance Monitoring & Error Tracking Software | Sentry Sentry (@getsentry) 02:28 Background on how we got here 05:53 What does this mean for the podcast? 08:58 Why did Sentry want to partner with Syntax? 15:39 What does this mean for more + better Syntax? 18:56 We want to hear from you 23:17 Clarifications 23:42 What’s David Cramer’s background? 31:44 Helping spread the Syntax vibe World Famous HOTBOYS 35:40 Silly questions 37:52 What’s the ROI on Wes’ TikToks? 38:37 Is Syntax going to become purple? 40:46 The new Syntax website 47:16 Giveaway coming! 51:32 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× David Cramer: Vitest | A blazing fast unit test framework powered by Vite Scott: Valley Heat Podcast - A Podcast About The Neighborhood Wes: CCS - The Premier Online Skate Shop for Skateboards & Skate Gear 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 things oAuth - what is oAuth? What terms do you need to understand when working with oAuth? And tips for working with oAuth. Show Notes 00:26 Welcome Office Space HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more! — Syntax Podcast 590 01:56 What is oAuth? 05:30 Terminology in oAuth 07:52 Once you have a client ID 09:41 The callback URL 12:11 The refresh token 14:09 How a token could be stolen 17:43 State token 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 Fabian Kägy about modern WordPress development, including what the local dev experience is like, changes to the block editor, how version control is handled, and more! Show Notes 00:34 Welcome 01:20 Who is Fabian Kägy? Fabian Kägy Fabian Kaegy (@fabiankaegy) Fabian Kägy (@fabiankaegy) on Instagram fabiankaegy on GitHub 10up | finely crafted websites and tools 03:32 What is the local WordPress development workflow like in 2023? @wordpress/env Free Local WordPress Development 05:35 Why do people still want to use WordPress? Builder.io - Drag & Drop Headless CMS Website Builder — Create a Website in Minutes — Squarespace Website Builder | Wix.com Build optimized websites quickly, focus on your content | Docusaurus 09:08 Changes because of the block editor 11:50 Using a JSON file to configure design styles for your site 13:48 What is it like to develop with headless WordPress? 10up/10up-toolkit: Official 10up asset building toolkit. 16:59 Are people using WordPress for applications besides websites? 19:20 What does version control look like in WordPress? 21:57 Are plugins using the database or the file system? 23:38 Is jQuery still a must have for WordPress? 25:30 How do you enqueue JavaScript? 27:56 Does WordPress support live reloading? 28:22 How can you host WordPress on the web? WordPress Hosting | WP Engine® WordPress for the Enterprise | WordPress VIP 29:11 What is the editing experience like in WordPress in 2023? The Composable Content Cloud - Sanity.io WPML - The WordPress Multilingual Plugin Polylang – Making WordPress multilingual 34:01 How is WordPress handling CSS in 2023? 41:44 How do you make WordPress fast? Simplenote Tumblr Pocketcasts 47:23 Where can you learn about WordPress development? Learn WordPress - There’s always more to learn | Learn WordPress 10up - Gutenberg Best Practices | 10up - Gutenberg Best Practices 50:12 With blocks, do you write less PHP? ACF | Advanced Custom Fields Plugin for WordPress 50:59 Supper Club Questions 55:09 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Watch Shrinking | Apple TV+ 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 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

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

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

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

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

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

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

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

In this supper club episode of Syntax, Wes and Scott talk with Dax Raad about building on serverless infrastructure, Next.js, and SST. 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:36 Welcome 01:05 Sponsor: Sentry 02:05 Who is Dax Raad? Dax on Twitter thdxr.com Tomorrow.fm Podcast SST.dev 04:22 Why doesn’t AWS have a simple way to build on top of it? 07:46 What is Open Next? Vercel Next.js Open-Next.js 10:25 How many people are involved in building Open Next? 11:14 Mapping Next.js to Amazon products 14:25 What is the edge? 18:56 Pricing in serverless 23:33 What about image assets? 25:02 Is the CDK a layer on top of something Amazon is doing? Amazon CDK 27:23 What is terraform? Terraform 28:50 What is SST and why SST? 30:54 Do I build with SST or on top of SST? 32:06 How do you do local development with SST? 37:01 What about databases with SST? 40:12 What about build pipelines? 42:28 What is Seed? Seed 43:52 Any advice for someone learning AWS? SST on YouTube 46:05 Supper Club questions Neovim Toyko Night theme Nerd Fonts Astro TypeScript Alacritty i3 Cloudflare Inside the Meteoric Rise—and More Epic Flop—of HQ Trivia 52:45 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Planetscale Shameless Plugs Rebase.tv @RebaseTV on Twitter Tomorrow.fm episode on Rebase.tv 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 are in the same room together brainstorming new ideas for the Syntax.fm website: search, transcripts, video, tags, audio player, podcast hosting, 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 01:08 Sponsor: Sentry 01:43 Brainstorming for Syntax’s new website 02:27 Are there good podcast websites out there? 03:26 Homepage design 07:33 How would you handle login? 09:40 Search on the site SvelteKit docs Flexsearch 13:59 Transcripts Open AI Whisper Whisper AI for podcasters 18:25 The player 21:11 Tagging 23:45 Video Linus Tech Tips - WAN Show 27:45 Show notes 29:57 Surfacing good content on the podcast 35:30 Interactions 36:25 Deploy to Podcast Host Libsyn Editor Chris on Mastodon 38:43 Code base Syntax website on GitHub 45:21 Listener feedback 46:27 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Screen door dog Wes: Apple Watch bands 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 the what, why, and how of web streaming, and some of the jargon you might encounter with web streams. 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:11 Welcome 00:59:07 Sponsor: Sentry 01:39:17 What are Web Streams? 03:15:11 Why are web streams picking up steam lately? 04:41:21 How are web streams streaming? 09:28:11 Searching a database can use streaming 13:07:11 Web stream jargon 18:06:11 FileReader is a Stream 19:31:05 Other Types of Streams Cloudlfare HTML Rewriter 21:50:05 ReadableStream and Writable Stream 27:23:00 Creating a Writable Stream 28:39:11 TextDecoderStream 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 Eric Sartorius about his life as a digital nomad - including recently climbing Kilimanjaro, his tips for travel deals, crazy experiences while travelling, and what he brings on the road with him. Show Notes 01:02 Guest introduction EricSartorius.com Eric on GitHub PureFunc Train Surfing Get Stream 02:51 Where have you travelled? 04:27 What are the challenges of being a digital nomad? 09:08 How do you research before travel? 13:04 How do you approach applying for a job? 21:10 Do you travel with other digital nomads? R16 video 22:43 What are the best locations you’ve been? 24:21 What about health and insurance? Tiny Toones TSA post raw meat on carousel 28:21 What motivated you to want to climb Kilimanjaro? 41:14 What gear do you travel with for web dev? Osprey Talon 33 Packing cubes Outlier Google Fi Google Flights explore 51:12 Using credit card points for flights 54:45 How do you handle customs? 00:13 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Comfort 2.0 Czech sock shoes Shameless Plugs PureFunc @TheEpicLife on Instagram Pamoja Safaris 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 all the reasons your website might be slow, and how you can troubleshoot a slow website such as issues on the server, large assets, caching, CSS, JavaScript, latency, 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 Glove 80 keyboard Raycast 03:06 Sponsor: Sentry 05:15 What makes a website slow? Uses.tech 06:29 Server Generation Times 13:33 Large payloads Redis Gzip Brotli compression Cloudflare Cloudinary 18:13 Assets being too large 23:01 Caching assets 28:25 CDN 30:35 Caching 101 37:04 Render blocking requests 40:01 CSS 42:25 JavaScript 44:51 Latency 49:17 Flash of dark mode or unsigned out 55:00 Data uris Content-visibility vite-plugin-singlefile Pool in your URL 58:11 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: 3Blue1Brown Wes: Suavecito Firme Clay Pomade 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 two new services that allow you to run Node in the browser, WebContainers + NodeBox. Why Node in the browser? How does it work? And what are the differences and limitations of the services? 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:25 Welcome 01:14 Sponsor: Sentry 02:45 Webcontainers and NodeBox Introducing WebContainers Code Sandbox CodePen Replit GitHub Codespaces 06:42 Why Node.js in the browser? 11:08 How does it work? 13:10 Clientside APIs 14:27 Using iFrame to proxy messages 17:39 Are these open source? 19:22 Differences between the two services 21:10 Wes to Figma, Scott to Penpot Figma Penpot 24:51 Limitations 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 Sewell about Builder.io, Qwik, Partytown, and the tricks and tips he’s learned in building apps for the modern web. Show Notes 00:37 Welcome 01:14 Guest introduction Steve on Twitter Steve on GitHub Builder.io Builder.io/demo 04:07 Builder works with any tech stack? 06:29 Where is the structure of the site coming from? 07:28 What is Builder.io? 11:34 What’s the workflow for updating content? 13:03 What is Builder built in? Mobx 14:36 Moving from Figma to HTML 18:41 Is an app like this divs all the way down? 24:55 Stories of browser gremlins building? 26:29 Advice for anyone building drag and drop Fullstory 29:04 Does FPS play a part in development? 33:31 Do you use SVG? 36:15 Where does Qwik and Partytown fit into all of it? Qwik Partytown 46:45 How does accessibility play into Builder? 49:44 Supper club questions 54:30 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Dead Space Remake 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 current landscape of AI, how AI is trained, is AI going to take your job, who’s going to train AI, and adding AI to your applications. 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:10 Welcome 01:58:01 Sponsor: Sentry 03:16:05 What this episode is not going to be 07:36:11 The current landscape Chat GPT GitHub Copilot Warp Completions Midjourney Bing AI From Bing to Sydney Why a Chat with Bing Left Me Deeply Unsettled Tensorflow Stable Diffusion Amazing AI Dall E 15:26:11 Timeline of growth of AI AI Timeline 16:24:11 What is a model for AI? 24:20:11 How do you use AI? 33:14:00 Code brushes 35:57:18 Midjourney Yandex 40:13:18 Is it going to take your job? Canva Cal 50:22:19 Cost prohibitive 52:26:20 Who’s going to train the robots? 57:29:12 Adding AI to your apps 58:50:11 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Motion sensor Wes: Apple Watch Ultra 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 difference between sloppy code and clean code, how to establish rules for your code base, and how to enforce your rules. 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 00:46 Sponsor: Sentry 01:51 Uses performance issues Uses.tech 04:23 Understand Sloppy Code 10:17 Syntax website timestamp issue 12:56 Establish rules to fix sloppy code 16:35 Adding a feature, do you refactor an unrelated function? 23:07 How do you enforce rules? GitHub Actions 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 Fred Schott about all things Astro v2.0. What is Astro and why should you use it? How do islands work? Images, edge, AI, error overlays, hybrid rendering, and more! Show Notes 00:40 Welcome 01:08 Guest introduction FredKSchott.com @Fredkschott on Twitter Fred on GitHub 02:17 What is Astro and why should someone use it? 04:57 What can you build with Astro? 06:11 What’s an island in content? 09:43 How do routes work with Astro? 12:30 How is Markdown handled in Astro? mdxjs 14:32 How does Astro work on the edge? 18:15 How does Astro v2 handle data fetching? 23:25 Integrations with Astro 26:38 Astro AI bot? AI Langchain 30:40 Error overlay design 36:10 What are some of the most important upgrades in v2? 37:18 Hybrid rendering 40:27 Astro’s image component Squoosh 44:39 What happened to snowpack? Pikapkg? 46:48 What is the financial model for Astro? 50:28 Supper Club questions Obsidian ××× SIIIIICK ××× PIIIICKS ××× Chat Langchain Shameless Plugs Astro Astro 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

In this episode of Syntax, Wes and Scott talk about why they’re digging Warp as their terminal app of choice, what the terminal is, and some of their wishlist items for Warp. Show Notes 00:09 Welcome 02:11 Disclaimers 04:17 What is the terminal? 06:54 What we’ve used for terminal Get Warp Hyper Terminal iTerm Alacritty 11:14 Terminal terminology CommandLinePowerUser.com WSL OhMyPosh OhMyZsh Starship Ion 17:35 The basic features of Warp 20:45 Autocomplete issues Fig 25:06 Sticky header 26:13 Blocks 29:17 The prompt 30:38 Sharing blocks and live sessions 32:29 AI Command Search AI Command search 35:51 Remote SSH 37:53 Window management Launch configurations 38:42 Workflows 40:19 The command palette 42:36 How does Warp make money? 43:54 Warp requires an account 46:09 Annoyances and wishlists 58:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: 50 Pokemon Cards for $5 Wes: iPad Sorter Station 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 reasons why you should log errors, how it’s not just for debugging, where to save logs, and apps and packages to help with logging. 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:25 Welcome 01:37 Sponsor: Sentry 02:16 What is logging? Why log? 04:59 Logging isn’t just for debugging 08:22 What do we log? 13:34 What not to log 14:58 Development, staging, and production 17:36 Logging bots 19:33 Where to put logs 20:59 How to log Log Tail Paper Trail Sematext Logs DataDog Winston Pino 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 Ryan Carniato about Solid.JS, SolidStart, how web components work with Solid, why he chose JSX, and what the future of Solid is. Show Notes 00:37 Welcome 01:38 Who is Ryan Carniato? @RyanCarniato on Twitter Ryan on Dev.to Solid.JS 02:37 Why did you build Solid? Knockout.JS Marko JS 09:15 What is Solid? 12:55 What does it mean to compile to vanilla JavaScript? SolidStart Tanstack Query 19:39 What are observables and signals? 27:17 How are web components used inside of Solid? 29:38 Why aren’t we using web components more? 32:37 Why would someone pick SolidStart vs Solid? 39:07 Why did you choose JSX? 44:45 How did you build live code examples into documentation? SolidJS Docs Solid-Movies.app 47:19 What is Solid.JS built on? 53:36 What is the future of Solid? 00:39 Supper club questions 02:57 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Alice in Borderland Shameless Plugs Ryan on Twitch Ryan on YouTube Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

In this potluck episode, Scott and Wes talk home electicity, and then answer your questions about native web components, JS class mixins, JavaScript for marketers, managing application secrets, 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:10 Welcome 01:09 Sponsor: Sentry 02:18 Electrical house update Klien Wirestrippers 07:45 Custom Syntax podcast browser Custom Syntax browser 09:29 When using browser native web components (i.e. extends HTMLElement), should the whole application be wrapped in a component tree similar to how React apps do it? Deno Using Web Components with Next or any SSR Framework 16:12 Should I avoid JS/TS class mixins? 21:07 Is it acceptable to have any string value as a value for a CSS custom property? 26:48 Should agencies consider building marketing sites with JS frameworks or is Wordpress still the best option here? 33:56 What are the main things to think about when laying the foundations for an app or project that will hopefully grow into something big? 41:24 Will Javascript skills give me an edge over other local digital marketers? WordPress Ghost 46:00 What tool, if any, do you use for publishing packages? 50:19 Do you have any suggestions on how I can find time to code more? Bit 54:17 how do you both manage your application secrets (API keys, database credentials etc) when deploying to Digital Ocean or Linode? 58:52 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Physical 100 Wes: Leviton D23LP-2RW Decora Smart Wi-Fi Mini Plug-In Dimmer 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 what you can do to better organize your config files. Show Notes 00:21 Welcome 02:20 Electric car ski tripping 05:01 Why config files? 07:47 Custom Vite config files Wes’ Vite config define: { __VERSION__: JSON.stringify(process.env.npm_package_version), }, 11:16 Node has failed us 13:30 Cosmic config Cosmiconfig 16:46 File nesting 21:01 Standardize on a format 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 Miško Hevery about why developers should check out Qwik, the benefits of lazy loading, sharing state between components, and other Builder.io projects like Partytown and Mitosis. Show Notes 00:35 Welcome 01:19 Guest intro Miško Hevery @MHevery 01:58 What is Resumability? 05:06 What is Qwik? Qwik Qwik City 07:03 Why would you want to make a component resumable? 12:08 Qwik code can be lazy loaded 15:28 How is server side rendering handled? 18:12 How does Vite help? 22:40 A bit more about hydration 31:03 How does the server collection information? 32:11 How do you share state between components? 34:45 How is data fetching handled? 37:47 Why are you using JSX? 41:53 Dealing with components in other frameworks Mitosis 49:21 What is Partytown? Partytown 54:30 Supper Club questions ××× SIIIIICK ××× PIIIICKS ××× Thinking Fast and Slow Shameless Plugs Builder.io 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 respective processes for converting JavaScript to TypeScript in their projects, why you might want to, and tooling for moving to TypeScript. 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:36 Sponsor: Sentry 02:23 Electrical updates 08:16 Moving to TypeScript 09:34 What are you doing with GraphQL? GraphQL Codegen 11:35 Why move to TypeScript? 12:00 Refactoring is easier 14:58 Better DX 18:42 Adding a tsconfig.json file 22:43 Figure out your tooling 23:50 Type Checker 25:13 MongoDB to TypScript Generator 26:44 Eslint-Typescript 28:03 Deprank Deprank 29:18 Refactor and rename to .ts 32:40 Typing your code 43:04 Utilities and unions 46:11 Where do you put your types? 49:29 Typing Dependencies Definitely Typed Raycast Search npm 54:26 Global types 01:08 Now what? 03:58 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Elegrp USB C Walloutlet Wes: Barrina Shop Lights 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 through quick tips to improve performance of your website, and the tools available to help diagnose and fix perf issues. Show Notes 00:25 Welcome 00:50 Polish And Perf explained 02:05 What kinds of tools are available to improve performance Lighthouse in Chrome PageSpeed 09:32 Identify route caching and http caching 14:25 Partytown Partytown 15:19 Unnecessary network calls 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 Tim McNamara, author of Rust in Action about what Rust is, how to get started learning Rust, and ideas of good projects to begin learning Rust with. Show Notes 00:37 Welcome 01:26 Guest introduction Rust in Action Tim on Twitter Tim on YouTube 03:51 What was it like to write a book on Rust? 07:52 What drew you to Rust? 13:01 The approachability of Rust 21:41 What’s a good introductory project with Rust? 25:15 Why would someone learn Rust? It’s time to try WASM 40:23 What is a crate and cargo in Rust? 44:17 Running Rust in various places 50:53 Should the average web developer try Rust? 52:13 Supper club questions 54:17 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× kokako Shameless Plugs Tim McNamara - How to learn Rust 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 ESM is, and why you want to move your projects to ESM. 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:51 Sponsor: Sentry 02:32 Our experiences with ESM 06:54 Why ESM? 11:42 Top Level Await 16:16 Assert Import type eventually Scott’s Vite chunk import map 21:00 Converting code to ESM 27:22 .JS on end of files 32:12 Imports and exports 37:52 TypeScript 40:24 Bundling / Transpiling Vite Node 43:42 Dependencies Sindre thread 45:16 Publishing 53:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Egg dispenser Wes: Pure Cinema Podcast 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 through their wishlist for CSS in 2023 including mixins, range selectors, fit text, robust color functions, overflown, and more. Show Notes 00:26 Welcome 01:09 Snow skate update 03:01 Mixins 05:06 Range selector 09:36 :first-of-column :last-of:column / row Ability to target items in nth-row of autofilled, implicit grid 11:43 Fit Text 13:34 Overflow-x, overflow-y control 15:36 Full support for CSS with Inline Styles 16:24 nth-of-found() 18:18 Robust Color functions 22:19 resize: both but no overflow or scroll 23:39 Animate height auto 23:57 Full attr() support 25:07 CSS References CSS References 26:59 overflown + :stuck 28:56 Multi-line selectors 30:35 Container Queries - select the container itself 32:04 :is-scrolled - select a container when it’s scrolled 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 Caleb Porzio about Livewire, Alpine.js, what is it with PHP devs making cool stuff, TypeScript thoughts, and more. Show Notes 00:36 Welcome 01:05 Buffalo and Canada History of Target in Canada 06:23 Who is Caleb Porzio? @CalebPorzio on Twitter 09:26 What is Livewire? Livewire Alpine.js HotWired 12:58 Are these MVC frameworks? 18:11 What is the process behind the scenes? 20:36 How does Hotwire handle rendering? 25:38 What is Alpine.js? 33:19 Why are PHP devs making interesting things? Laravel Tailwind 40:32 What is a nextTick in JavaScript? Microtask Guide 46:20 TypeScript thoughts 48:05 Server side rendering? Morph 49:25 Supper Club questions Ergodox Keyboards Glove 80 Keyboards Natty Theme MonoLisa 59:40 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Ugmonk Analog Shameless Plugs Make VS Code Awesome Alpine.js Livewire 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 look through the results of the State of JS survey for 2022. Show Notes State of JS 2022 00:26 Welcome 01:24 Thoughts on the survey in general 04:24 Country of origin 05:53 Salaries 08:14 Higher education 08:58 JavaScript features 15:41 Browser APIs 21:15 Library Usage 26:11 Interest in frontend frameworks 28:40 Framework usage 31:41 Rendering frameworks 34:57 Build tools usage over time 39:37 Monorepo tools Moon 46:41 Backend frameworks Civet 47:42 JavaScript run times 51:01 TypeScript JavaScript balance 52:17 JavaScript flavors 57:03 Resources Fireship Dev 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 container queries are, use cases for them, new units of measurement, and possible issues with container queries. Show Notes 00:28 Welcome 01:46 What are Container Queries? Tweet about Container Queries 03:28 Use cases for Container Queries Home Assistant Can I Use? 06:11 The syntax of container queries 13:42 New units 22:27 Old iOS versions may cause issues 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 Simen & Espen from Sanity about what Sanity is, who uses Sanity, what is a content lake, how Sanity works with React or TypeScript, what GROQ is, how portable text works, and of course, the supper club questions. Show Notes 00:36 Welcome 01:37 Who are you and what is Sanity? 04:04 What kinds of services use Sanity? 06:18 What is a content lake? 07:26 Enabling code access to Sanity Studio 13:12 Implenting Sanity into a React app 14:49 What is GROQ? 21:04 Is GraphQL still the best way to query data? 25:32 Workflows in Sanity 27:48 What is portable text? 35:19 How does Sanity work with TypeScript? 38:51 Ecommerce options with Sanity 41:29 Supper club questions 50:33 SIIIIICK ××× PIIIICKS ××× Syntax 533 - Zod Schema Elden Ring Risk of Rain Sharp Syntax 526 - Supper Club with on TRPC ××× SIIIIICK ××× PIIIICKS ××× Espen bread Medium Tall Shameless Plugs Sanity Syntax code 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