Reactathon LIVE

In this potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:10 Welcome 01:53 TikTok update 02:46 What strategies do you use to find the good stuff? Tweetdeck 11:17 What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? 15:56 Should we use TypeScript for a new blog? 20:45 Sponsor: Sanity 21:45 Is there any reason to still use string concatenation over template literals? 26:13 What should React devs use to get initial scaffolding in place? Create React App Vite Turbo Pack 29:38 What’s the deal with Playwright? Playwright 34:28 Sponsor: LogRocket 35:19 What separates a “scripting” language from a “programming” language? 39:37:14 Sponsor: Prismic 40:23:02 Do you have any tips on how to change a defeated programmer mindset? Partydown 47:34:07 How has your use of and work in the browser changed with Arc? Arc Browser Syntax 514 - Supper Club × Arc Browser with Hursh Agrawal 49:18:15 Why would I attach an event listener with the useCapture argument as true? 51:33:24 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Screwless plates / 4 pack of screwless plates Wes: Shoe Boxes for Cords Shameless Plugs Scott: LevelUp TikTok Wes: Wes Bos TikTok 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

30 Marras 202257min

In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project. 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. MagicBell - Sponsor MagicBell is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. Show Notes 00:23 Welcome 01:08 Sponsor: Sentry 01:59 Sponsor: MagicBell 03:11 Topic introduction 04:44 Function limit Puppeteer 08:51 Node support 10:00 Cron jobs 11:12 Local development Miniflare 11:45 Database access SQLite 12:42 Sharing code 13:07 Environmental variables Netlify environmental variables 14:37 Timeouts 15:47 Sass is expensive 17:26 Infastructure as code 19:02 Search Algolia 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

28 Marras 202220min

In this supper club episode of Syntax, Wes and Scott talk with Scott and Wes! Talking about BBQ, electric cars, workout equipment, home renos - but they do sneak in a bit of coding talk! Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications.Spin up a new project today and discover Kontent. Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. https://tuple.app/syntax Show Notes 00:37:11 Welcome 03:18:10 Saskatchewan and Saskatoon Berries Saskatoon Berry Barn 05:02:14 TV shows we’re watching Amazing Race Canada America’s Dance Crew Lakefront Luxury 12:49:12 New house vibe 18:29:06 Sponsor: Kontent 19:13:20 Sauna thoughts 22:58:24 Home gym thoughts Woodupp Tonal 40:22:16 Sponsor: Tuple 41:17:11 3D printer 44:11:09 How many things can you take on? 48:23:11 BBQ talk Amazing Ribs 55:26:11 Electric car update Ioniq 5 57:45:07 Supper Club questions Level Up Tutorials VS Code Theme Quokka VS Code Extension Quokkajs Console-Ninja 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

25 Marras 20221h 1min

In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:47 Clean Talk 03:55 The menu of responsive design Syntax 154 with Sara Soueidan 06:52 Responsive design basics 11:54 What should you build for first in 2022? 16:15 Shrink and grow until it looks bad 21:36 Menus in responsive 23:43 Sponsor: Linode 24:13 Grid systems 28:08 Grid and Flexbox CSS Grid Course Flexbox Course Can I Use 35:02 Sponsor: LogRocket 36:00 Container queries 45:56 FitText 49:12 How do you test these types of things? 51:15 Future techniques coming 53:28 Sponsor: Freshbooks 53:56 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Lutron Light switches Wes: Sunco Lighting BR30 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

23 Marras 20221h 1min

In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up. 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 00:13 Welcome 01:39 Sponsor: Sentry 02:41 Auth0 03:57 A bit more auth 05:24 New RFC RFC: First class support for promises and async/await 08:30 What are the basics of this proposal? 10:12 Scott gets a little Svelte-y 11:44 Why is this being proposed? 17:14 Infinite loop possibility 18:44 Why is Svelte API better in this use case? Tanstack Smooshgate 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

21 Marras 202222min

In this supper club episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno. Why was Deno created? What is Deno written in? How is Deno so much faster? And what’s the future of Deno? Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit Gatsby.dev/Syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️ 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. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 00:36 Welcome Tinyclouds.org Ry on GitHub Deno Deno Discord 01:18 The introduction of Node 02:51 Why are you still betting on JavaScript for the web? 05:34 Why did you make Deno? 09:04 How does TypeScript fit into the landscape? 11:40 How is Deno so much faster? 13:28 Sponsor: Sanity 14:17 What is Deno written in? 15:56 Should developers be learning Rust? 18:27 Will libraries that work on npm eventually work in Deno? 21:52 Are we going to use Node API’s or web spec? 24:31 Sponsor: Sentry 25:31 What is tooling like for Deno? WinterCG Deno VS Code Extension 29:27 What is Deno deploy? Deno Deploy 34:01 Deno’s framework Fresh 38:56 Client side vs server side rendering 41:27 Sponsor: Gatsby 42:28 What’s the future of Deno? 43:39 Supper club questions 53:30 SIIIIICK ××× PIIIICKS ××× 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

18 Marras 202255min

In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 00:06 Welcome Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1 01:22 Smart home updates 04:05 Box sizing: border box 06:57 CSS Columns 09:20 Aspect Ratio Can I Use CSS Properties Rotate 09:53 Transitions and animations 13:36 Transition time 17:05 Steps as a timing function 19:01 Sponsor: Prismic 19:43 Blend modes 23:57 Responsive web design 26:31 Prefers Color Scheme 27:48 Popular breakpoints 30:57 Sponsor: LogRocket 32:06 Feature queries and @ supports 34:59 Logical and physical properties 37:59 css-in-js Sam Magura - Why We’re Breaking Up with CSS-in-JS Brad Frost - Why We’re Breaking Up with CSS in JS 42:28 Sass 43:20 Print styles 45:38 Sponsor: Sanity 46:38 Longhand properities 48:21 Non-existant properties 52:06 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Front Bumper Drillless Plate Holder Wes: 1U Server Rack 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

16 Marras 202258min

In this Hasty Treat, Scott and Wes talk about creating short form content for TikTok, Reels, Shorts, and tweets. What are some of the benefits and limitations of creating for vertical video, and what tools are they using to create videos. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:23 Welcome 01:39 Sponsor: Sentry 02:40 Sponsor: Freshbooks 04:05 Short form content intro WesBos.com/tips Wes on TikTok LevelUp Tutorials on TikTok Scott Stolinski on TikTok 07:16 The good and the bad of short form content 17:13 Repurposing content 18:36 Content that works 21:12 Tips for making short form content 24:19 Limitations of short form content 31:49 Tools for editing Screenflow Descript Detail.co 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

14 Marras 202236min