In this Hasty Treat, Scott and Wes talk about toast messages for validation, errors, confirmations, and more. Show Notes 00:24 Welcome 01:04 Why use these types of notifications 03:34 Old school checking stories 05:35 What kinds of toast messages are there? 10:02 Why toast? 11:38 Best practices for toast messages 17:09 Timeouts and manual close auto close 19:38 Multiple messages stacking on top of each other 22:56 Using a toast library Building a toast component react-hot-toast - The Best React Notifications in Town Real-time notification system for products | MagicBell 28:29 Form validation Form validation with HTML5 and JavaScript 33:36 HTML inputs 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Jake Champion about his work with Fastly and Polyfill, the difference between WASY and WASM, what Winter CG is, and what makes Fastly different. Show Notes 00:35 Welcome 02:06 Who is Jake Champion? Jake (@JakeDChampion) JakeChampion on GitHub 04:31 How long as Polyfill been around? 06:11 What is Fastly? Fastly Polyfill WASMTime SpiderMonkey JavaScript/WebAssembly Engine 12:09 What are people running on the edge with Fastly? 16:29 What is Winter CG compliance? Winter CG proposal 17:55 What about node API’s being in platforms 21:18 What is WASY vs WASM? 24:37 Who is Web Assembly for? 31:34 Is there anything WASM is not good for? 41:39 What makes the Fastly runtime different from others Hono Smashing Mag - Web Workers Worker Tools 47:07 Supper Club questions iTerm2 Zsh for Humans 50:26 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Luther TV Series Forrest Gump Shameless Plugs Fiddle on Fastly js-compute 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this potluck episode of Syntax, Wes and Scott answer your questions about Prisma, CSS variables in React components, JS notebooks, transcribing podcasts, keeping up with dev skills, selling a domain, and more. Show Notes 00:10 Welcome 00:42 Harassed by a big truck 03:20 Corrections and omissions Syntax 627 - Electronics for Beginners 05:57 Should I be using $executeRawUnsafe with Prisma? 09:48 unset and initial 11:54 true and false outside ARIA attributes 14:56 Is there a way to modify the CSS variables from the React component? 18:58 How do you feel about the JS notebooks landscape? Jupyter yunabe/tslab: Interactive JavaScript and TypeScript programming with Jupyter Val Town The notes app for your working memory - Stashpad Obsidian - Sharpen your thinking Light Table 27:39 Is it possible to transcribe your podcasts? World’s Most Powerful Speech-to-Text API | Deepgram 29:05 Any tips for keeping my developer skills up without burning out? 36:35 Any advice for selling a domain? Escrow.com | Never buy or sell online without using Escrow.com. 42:13 How do you update and future-proof project dependencies? Syntax 425 - Updating Project Dependencies 47:14 When I write TypeScript code, I always wonder if it’s a generally good practice to use Type-Only import when importing types? 53:54 How would you go about conditional wrapper tags in Astro, Svelte or React? 56:07 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Ancient Architects Wes: Small Rig 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about how to get help for a bug or error you’re getting in someone else’s code. Show Notes 00:26 Welcome 01:54 Building a reproduction of the error 03:55 Creating a gist Gist 04:48 Be responsive. Be ready. 08:03 Where do you go first for support? 09:44 Search for your issue first GitHub Issues 10:53 Be nice 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Steve Krouse about val.town, what it is, his philosophies on teaching people to code, the tech stack for val.town, and the benefits of inspiring kids to learn to code. Show Notes 00:36 Welcome 01:27 Who is Steve Krouse? Steve Krouse Future of Coding stevekrouse (Steve Krouse) · GitHub Steve Krouse (@stevekrouse) on Twitter Coding Classes for Kids & Teens | Coding for Kids | The Coding Space 03:06 What is Val.town? Val Town 08:35 Where did the inspiration for social dev environments come from? 12:52 WYSIWYG code vs being code first 16:30 How does val.town inspire people? 20:26 How do you prevent people abusing val.town? 24:57 What’s the UI story for snippets on val.town? 27:31 Do you plan to support express? 29:03 What’s the tech stack behind the front end of val.town? 30:35 What’s the tech stack for the back end of val.town? 34:37 How do you measure for pricing? 37:07 Who is using val.town? 42:00 What’s your methodology for teaching kids to code? 47:44 Supper Club questions GitHub - pomdtr/sunbeam: Generate powerful TUIs from simple scripts written in any language. Deno — A modern runtime for JavaScript and TypeScript A Small Matter of Programming The Unison language CodeMirror A Small Matter of Programming: Perspectives on End User Computing Stripe Press — Ideas for progress pomdtr/sunbeam: Generate powerful TUIs from simple scripts written in any language. Seymour Papert woofjs.com Bret Victor Welcome | Future of Coding Tom MacWright (@tmcw) 55:54 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× SwitchBot Wi-Fi Smart Lock Shameless Plugs Val Town 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott try to stump each other with questions about JavaScript, HTTP status error codes, memory safety, and a bit of web history thrown in. Show Notes 00:11:07 Welcome Displaced Gamers 00:46:00 In which year was JavaScript introduced? 02:59:16 What status code is returned by server when a resource isn’t found? 03:32:00 Which http status code indicates the client must authenticate itself? 04:34:17 What is a pseudo class and give an example? 05:15:11 What JavaScript function allows you to delay the execution of a function? 06:02:06 Who first proposed using separate style sheet language for the web? 08:08:14 Which of the following statements about JavaScript strict are true? 08:50:11 What is event driven programming in Node.js? 10:26:08 In GraphQL, how do you mark a field as deprecated? 10:47:24 How does xHTML differ from HTML? 11:48:21 Which of the following statements is true about objects in JavaScript? 13:20:19 What is a type erase in TypeScript? 14:21:23 In TypeScript which syntax can be used to define a user defined type guard? 16:02:12 What is a closure in JavaScript? 17:40:00 Which node.js module provides asynchronus file I/O? 18:54:08 What does memory safety mean? 21:57:11 What does http2 introduce to improve speed? 23:58:05 What are strategies for optimizing HTML5 video? 26:28:11 Which of the following is not a correct way to create a new object? 28:13:20 What is the difference between function declaration and function expression? 30:49:11 What is the value of this inside an arrow function defined in a non-arrow function? 31:22:11 What is a type guard? 33:03:11 What is the order of execution in JavaScript? 35:11:01 Which version of ecmascript was scrapped? 39:41:00 What is the result of the following comparison in JavaScript? 41:37:21 What were the major criticisms of CSS in it’s early days? 46:48:10 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Projector Wes: USB plug 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about various AI tools for developers that are available. Show Notes 00:25 Welcome 01:36 AI creeping into real life 04:03 Cody AI Cody - Business AI Employee Trained on Your Knowledge Base Sourcegraph 06:24 How AI coding help works 09:57 Amazon Code Whisper AI Code Generator - Amazon CodeWhisperer - AWS Amazon Code Whisperer VS Github Copilot 10:44 Copilot Labs GitHub Next GitHub Next | GitHub Copilot Labs 14:25 LintRule Lintrule 18:06 Open Commit di-sukharev/opencommit: Auto-generate impressive commits with AI in 1 second 24:03 Code Geex CodeGeeX - A Multilingual Code Generation Tool - CodeGeeX Ghostwriter - Code faster with AI - Replit Meaningful Code Tests for Busy Devs | CodiumAI 30:20 Tab9 and Kite AI assistant for software developers | Tabnine Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More! — Syntax Podcast 364 33:06 Sloppy prompt example 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this supper club episode of Syntax, Wes and Scott talk with Colby Fayock about Cloudinary’s new AI tools, media flow, removing backgrounds, using AI for video templates, and Colby’s stack for creating YouTube content. Show Notes 00:36 Welcome 01:11 Who is Colby Fayock? ColbyFayock.com Colby Fayock (@colbyfayock)on Twitter ColbyFayock - Twitch colbyfayock on GitHub Colby Fayock (@colbyfayock) • Instagram 01:57 What is Cloudinary? Image and Video Upload, Storage, Optimization and CDN 03:03 What’s with the space jellyfish? 03:52 How is Cloudinary using AI for the web? Developer resources for using images and videos in your apps 09:54 What is media flow? 13:00 Who is the target audience for AI tools from Cloudinary? 17:03 Removing backgrounds Remove Background from Image for Free – remove.bg iPhone Messages stickers: How to make and use them - 9to5Mac 21:14 Cloudinary’s Video API ascorbic/unpic-img: Multi-framework responsive image component 22:44 Function calling in OpenAI 26:22 How do you deal with the random generation of AI? 29:00 What are the community SDKs for Cloudinary? 37:04 What’s your process for creating content for YouTube? 42:49 Supper Club Questions Open Broadcaster Software | OBS Facecam Pro – Elgato Recut — Automatic Video Editor Night Owl - Visual Studio Marketplace iTerm2 - macOS Terminal Replacement Oh My Zsh - a delightful & open source framework for Zsh 51:40 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Ready To Drink Cold Brew Coffee | Trader Joe’s Shameless Plugs Colby Fayock 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this episode of Syntax, Wes and Scott talk about what headless components are, the why and when to use headless components, and how to best implement them. Show Notes 00:07 Welcome 02:33 Tailwind Connect Tailwind Connect 2023 | Tailwind CSS Live Event 04:37 Headless component overview Downshift Headless UI 06:57 A country dropdown component 12:52 Possibly like Svelte actions? 18:46 What do headless components provide? 19:13 Examples of headless component projects Microsoft Edge Demo 24:24 How does this compare to web components? Tanstack Table Tanstack Virtual 26:29 Checking out Shoelace Shoelace 28:42 Figma announcements What’s New in Figma 31:21 What does headless mean? 36:24 SIIIIICK ××× PIIIICKS ××× 41:20 AI Voices ××× SIIIIICK ××× PIIIICKS ××× Scott: Hacker News Recap /Hacker News Recap on Apple Podcasts Wes: Calipers 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

In this Hasty Treat, Scott and Wes talk about what Lightning CSS is, how it works, and why you should consider using it in your projects. Show Notes 00:25:22 Welcome 01:04:11 Overview of Lightning CSS Lightning CSS Devon Govett (@devongovett) Parcel 04:56:11 What’s in Lightning CSS? OKLCH 21:39:11 CSS Layers 24:57:14 Text decoration 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 Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky