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