Syntax - Tasty Web Development Treats cover image

Syntax - Tasty Web Development Treats

Latest episodes

undefined
Aug 14, 2023 • 22min

JS Fundamentals - Decorators

In this Hasty Treat, Scott and Wes talk about whether decorators are finally here, what the uses cases are for decorators, how to define a decorator, and what auto accessor is. Show Notes 00:25 Welcome 01:00 Are decorators finally here? TC39 proposal How this compares to other versions of decorators 06:47 What are use cases for decorators? 10:55 How do you define a decorator? 14:20 Auto Accessor on classes @loggged class C {} on fields class C { @logged x = 1; } Auto Accessor class C { accessor x = 1; } sugar for below class C { #x = 1; // # means private get x() { return this.#x; } set x(val) { this.#x = val; } } Can be decorated and decorator can return new get and set and init functions function logged(value, { kind, name }) { if (kind === "accessor") { let { get, set } = value; return { get() { console.log(`getting ${name}`); return get.call(this); }, set(val) { console.log(`setting ${name} to ${val}`); return set.call(this, val); }, init(initialValue) { console.log(`initializing ${name} with value ${initialValue}`); return initialValue; } }; } // ... } 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
undefined
Aug 11, 2023 • 1h 4min

Supper Club × Flightcontrol with Brandon Bayer

Can you have a Vercel like experience on your own AWS? Scott and Wes talk with Brandon Bayer about Flightcontrol - what it is, how to use it on your app, pricing, and more. Show Notes 00:32 Welcome 01:28 Who is Brandon Bayer? Brandon 🚀 Flightcontrol (@flybayer) / X Flightcontrol (@Flightcontrolhq) / X Blitz.js - The Missing Fullstack Toolkit for Next.js Flightcontrol — AWS Without Pain Tailwind Connect 2023 | Tailwind CSS Live Event 03:00 How do you fly? 06:10 What is Flightcontrol? 10:00 Why doesn’t Amazon make it easier? 11:34 Which parts of the AWS stack should I use? 15:08 Creating the infrastructure 19:01 Ongoing deployment 20:05 What languages does Flightcontrol support? 23:35 How are events or cron handled? 25:24 What is Temporal? Open Source Durable Execution Platform | Temporal Technologies 29:05 What are Nixpacks? GitHub - railwayapp/nixpacks: App source + Nix packages + Docker = Image 35:50 How is Flightcontrol priced? How To Get Free AWS Credits - Flightcontrol 44:44 How does Flightcontrol help with scaling? Serverless Compute Engine – AWS Fargate – AWS 46:11 What are your thoughts on ReactJS, Server components? 49:57 Supper Club questions Keychron K3 Ultra-slim Wireless Mechanical Keyboard (Version 2) Learn to Code - for Free | Codecademy 57:20 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× EAA AirVenture Oshkosh | Oshkosh, Wisconsin | Fly-In & Convention Ko Tao Ko Lanta Yai Shameless Plugs Flightcontrol — AWS Without Pain 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
undefined
Aug 9, 2023 • 1h 11min

Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits

In this potluck episode of Syntax, Wes and Scott answer your questions about TypeScript just being fancy duct tape, dealing with back pain while coding, rate limits on cloud services, what to use for email provider, is Firebase a legit platform, and more! Show Notes 00:11 Welcome 03:11 The Sunday scaries 06:03 Is TypeSctipt just a bunch of fancy Duck Tape? Is TypeScript saving us? 12:29 How do you go years into programming without back pain? Hasty Treat - Stretching For Developers with Scott — Syntax Podcast 293 23:51 Why don’t cloud services provide an option to shut off services when a spending limit is reached? DigitalOcean | Cloud Hosting for Builders Vercel: Develop. Preview. Ship. For the best frontend teams 28:41 How do you choose a CSS library for any project? The most advanced responsive front-end framework in the world. | Foundation 960 Grid System 38:26 What’s happening to Level Up Tuts? Level Up Tutorials - Learn modern web development Wheels - Skateboard Wheels - 60mm Cali Roll - Shark Wheel 43:43 Not a sponsored Yeti spot 45:16 What do you do for email hosting? Google Workspace TechSoup Canada Proton Mail: Get a private, secure, and encrypted email account Outlook Microsoft 365 Plans Scheduling Software Everyone Will Love · SavvyCal Synology Photos 50:34 Is Firebase ok to run an app long term with? Firebase 58:57 Am I wrong to not do productive work intensely? 01:34 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: MagSafe Charger, Anker 3-in-1 Cube with MagSafe Wes: 6amLifestyle Headphone Hanger Stand Under Desk 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
undefined
Aug 7, 2023 • 30min

Why is Facebook’s HTML + CSS Such a Mess?

In this episode of Syntax, Wes and Scott talk about why Threads, Instagram, and all things Facebook have what seems like really messy HTML and CSS? Show Notes 00:10 Welcome Scott on Threads Wes on Threads 00:35 Threads has got divs 02:42 Tight scoping 09:44 Avoids specificity 10:37 Dealing with ad blockers and scraping 15:45 Divs are free, what’s the big deal? 20:19 Facebook is tracking everything 27:57 React Native 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
undefined
Aug 4, 2023 • 1h 12min

Supper Club × Ryan Florence of Remix

In this supper club episode of Syntax, Wes and Scott talk with Ryan Florence about Remix, working at Shopify, the history of licensing and pricing, quitting Twitter, the state of React Server components, and more. Show Notes 00:35 Welcome Ryan Florence Ryan Florence (@ryanflorence) / X React Training React Router Docs Moved ryanflorence (Ryan Florence) · GitHub 01:42 Collarbone update 06:47 What is Remix? Remix.run 11:43 Server actions 15:33 What was the history around licensing? 20:30 Open source is weird now 22:21 Working with Shopify and Hydrogen Remixing Shopify | Remix CSS Zen Garden: The Beauty of CSS Design The Zen of CSS Design: Visual Enlightenment for the Web: Shea, Dave, Holzschlag, Molly E.: 9780321303479: Amazon.com: Books 28:04 On quitting Twitter 35:33 What’s coming up with v2 of Remix? 40:30 The reality of breaking changes 44:18 What’s the status of React Server components? 49:46 Will Remix ever have React Server components in it? 50:55 How should we be fetching our data? 53:04 Do you have a wishlist for JSX? 58:45 Supper Club questions Strapi - Open source Node.js Headless CMS 🚀 Sidekiq GitHub - i-tu/Hasklig: Hasklig - a code font with monospaced ligatures GitHub - sindresorhus/terminal-snazzy: Elegant Terminal theme with bright colors 08:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Minivans Shameless Plugs Shopify 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
undefined
Aug 2, 2023 • 1h 4min

Standard Server JavaScript - Deno, Workers, Bun and More

In this episode of Syntax, Wes and Scott talk about JavaScript runtimes available to use, what to consider, and packages to use. Show Notes 00:10 Welcome 01:00 Scott’s glasses 03:46 All the runtimes Bun — A fast all-in-one JavaScript runtime Edge Functions Supabase Docs Edge Functions Netlify Docs Deno — A modern runtime for JavaScript and TypeScript Fast and low overhead web framework, for Node.js | Fastify What Is Edge Computing? Alibaba 05:15 A note for anyone new to JavaScript 08:40 Winter CG WinterCG 11:05 Fetch sindresorhus/ky: JavaScript HTTP client based on the browser Fetch API website/src/routes/shows/+page.svelte 14:53 URL 20:02 addEVentListener whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api · GitHub 22:53 Web streams Web Streams Explained — Syntax Podcast 587 26:03 Structured Clone Structured JSON | Worker Tools 33:43 What does JSON 5 do? 34:48 Markdown flavors 36:46 File 40:32 AbortController and AbortSignal DOM Standard DOM Standard 42:45 Packages for building linkedom - npm 44:05 Honking the Hono.dev Itty Router Itty Dev Hono.dev 55:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Macro Factor Wes: CRP Products 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
undefined
Jul 31, 2023 • 33min

Rust for JavaScript Developers - Node vs Rust Concepts

In this Hasty Treat, Scott and Wes talk about Rust, and how the concepts might translate for JavaScript developers looking to try writing in Rust. Show Notes 00:26 Welcome 01:08 Wes’ big beer bottle and Red Green RedGreenTV on YouTube 05:03 Thrift store finds 06:19 Rust in JavaScript TOML: Tom’s Obvious Minimal Language 11:07 Documentation Docs.rs Practice.rs 16:46 Memory safety 17:43 What about promises in Rust? 19:24 Error handling in Rust 27:39 What’s with the double colon? 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
undefined
Jul 28, 2023 • 1h 3min

Supper Club × Email Sending, Spam, DMARC, SPF, Styling, and more with Andris Reinman

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
undefined
Jul 26, 2023 • 59min

Polyfills, Transpiling and Monkey Patching

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
undefined
Jul 24, 2023 • 38min

User Feedback UI - Toasts, Flash, Validation

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

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode