920: How to Build MCP Servers

In this supper club episode of Syntax, Wes and Scott talk with Andris Reinman about his work on all things email - spam, DMARC, SPF, why there’s no good CSS in email, and his current project: Email Engine. Show Notes 00:36 Welcome 01:56 Introducing Andris Reinman Andris Reinman on GitHub Andris Reinman (@andrisreinman) Nodemailer :: Nodemailer 04:34 Why is email so difficult? Free DMARC Monitoring from Postmark ConvertKit: The creator marketing platform 09:48 What has changed in email? 10:52 What are DMARK, SPF and BIMI? 18:48 Is Mailtrain an open source alternative to Mailchimp? Mailtrain-org/mailtrain: Self hosted newsletter app 22:52 Why can’t we use CSS in email? 29:05 Why is email so expensive? 32:39 How do you keep your emails out of the spam folder? 35:42 What is Email Engine? EmailEngine Email API 40:16 Is Email Engine self hosted? 41:01 How does Ethereal email work? Ethereal Email 46:16 What email client do you use? 49:44 Are any email clients harder to send to? 55:23 Supper Club questions iTerm2 - macOS Terminal Replacement 59:29 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Programming Internet Email: Mastering Internet Messaging Systems: Wood, David: 9781565924796: Books - Amazon.ca Shameless Plugs EmailEngine Email 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

28 Jul 20231h 2min

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. Show Notes 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 ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Cable sleeve Wes: Air Purifier AliExpress 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

26 Jul 202358min

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

24 Jul 202337min

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

21 Jul 202354min

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

19 Jul 20231h 3min

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

17 Jul 202316min

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

14 Jul 202358min

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

12 Jul 202353min