In this episode of Syntax, Wes and Scott talk about what polyfills, transpiling, and monkey patching mean, how and when to do it, and libraries that can help you out.

• 00:10 Welcome
• 01:07 Toast follow up
• 02:45 What are transpiling, ponyfill, polyfill, and monkey patching
• TC39 Proposals
• Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3
• 11:18 Transpiling unsupported CSS
• 15:11 Polyfills
• Popover polyfill
• 19:22 Polyfilling CSS
• 21:06 HTML polyfills
• 27:47 How to transpile and polyfill
• Babel
• TypeScript: JavaScript With Syntax For Types
• CoffeeScript
• Civet
• cronn/jsxtransformer: Pipeline for transforming JSX files using Babel.js and Uglify.js
• Svelte • Cybernetically enhanced web apps
• Polyfill.io
• core-js - npm
• 35:46 Shiv and shims
• Shim vs Shiv
• 38:16 Monkey patching
• 49:08 SIIIIICK ××× PIIIICKS ×××

• Scott: Cable sleeve
• Wes: Air Purifier
• AliExpress

• Scott: Sentry
• Wes: Wes Bos Tutorials

• 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 toast messages for validation, errors, confirmations, and more.

• 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

• 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.

• 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 ×××

• Luther TV Series
• Forrest Gump

• Fiddle on Fastly
• js-compute

• 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.

• 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 ×××

• Scott: Ancient Architects
• Wes: Small Rig

• Scott: Sentry
• Wes: Wes Bos Tutorials

• 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.

• 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

• 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.

• 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 ×××

• SwitchBot Wi-Fi Smart Lock

• Val Town

• 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.

• 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 ×××

• Scott: Projector
• Wes: USB plug

• Scott: Sentry
• Wes: Wes Bos Tutorials

• 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.

• 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

• 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.

• 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 ×××

• Ready To Drink Cold Brew Coffee | Trader Joe’s

• Colby Fayock on YouTube

• 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.

• 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

• Scott: Hacker News Recap /Hacker News Recap on Apple Podcasts
• Wes: Calipers

• Scott: Sentry
• Wes: Wes Bos Tutorials

• 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