2019 YEAR END Definitely Not a Clip Show

In this Hasty Treat, Scott and Wes talk about new CSS color functions, and tips for viewing the different options and ways of presenting color that are coming. 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. Show Notes 00:25 Welcome 01:35 Sponsor: Linode 02:22 Where the CSS spec for Color functions are at the moment 05:13 New CSS Color mix function 10:29 Color for the color challenged 12:53 Color contrast function 15:06 Programatically alter colors Anyone have a really great CSS Variables color system strategy? Color for the color challenged Better color tools the color-contrast() function Benjamin Moore Paints as CSS Colours 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

4 Jul 202224min

In this supper club episode of Syntax, Wes and Scott talk with Shawn Wang about his thoughts on developer experience, why DX is important, and the importance of learning in public. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. 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:32 Welcome 01:56 Guest introduction swyx.io Why Temporal? 06:09 What is Developer Experience? Sarah Drasner 08:35 Is VS Code considered DX? 09:28 Why is internal DX important? Vercel NextJS 11:44 Is DX helpful to small organizations as well? 15:27 Parsimony Parsimony 16:43 Is productivity the main focus? 21:09 Sponsor: Hasura 22:48 What are your thoughts on React? 27:31 Designing for API success 30:44 Sponsor: LogRocket 32:07 What is external developer experience? 36:05 Learning in public 40:46 Supper Club questions dx.tips Retreon VS Code Theme Agnoster ZSH Theme freeCodeCamp Frontend Masters QConf Learn in Public ××× SIIIIICK ××× PIIIICKS ××× Scott: The Stormlight Archive 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

1 Jul 202253min

In this episode of Syntax, Wes and Scott talk about their tips for better communication in email, Zoom calls, code reviews, or asking for help. 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. 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:10 Welcome 01:39 Furnace wiring fun Ecobee Tweet asking for communication tips 05:37 Email communication SavvyCal Calendly 15:07 Recognizing a big ask Simeon Griggs - How to ask for things 24:01 Sponsor: Sentry 25:52 Code review communication 30:39 Sponsor: Sanity 32:22 Sharing information with a video 35:42 In person or one on ones 39:36 Video calls Storyboard.fm 40:54 Realize it’s ok to stop talking 42:27 Sponsor: Auth0 44:13 Tips from Twitter 53:08 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Drachinifel Wes: Lepy LP-2020A Hi-Fi Stereo Audio Shameless Plugs Scott: LevelUp Tutorials on YouTube 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

29 Jun 202259min

In this Hasty Treat, Scott and Wes talk about the new Browser CSS Page Transitions API proposal and what features it opens up for developers 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. 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 WICG Shared Element Transitions 00:21 Welcome 01:33 Sponsor: Prismic 02:43 Sponsor: LogRocket 04:18 Browser animations on the web vs native apps 06:15 What is the targeted use case for it? 06:56 Shared Element to Root Transitions 11:14 Entry and Exit 17:33 How to enable this in Chrome Example Code Shared Element Transition history Sarah Drasner’s demo async function doTransition() { let transition = document.createDocumentTransition(); // Specify offered elements. The tag below is used to refer // to the generated pseudo elemends in script/CSS. document.querySelector(".old-message").style.pageTransitionTag = "message"; // The start() call triggers an async operation to capture // snapshots for the offered elements, await transition.start(async () => { // This callback is invoked by the browser when the capture // finishes and the DOM can be switched to the new state. // No frames are rendered until this callback returns. // Asynchronously load the new page. await coolFramework.changeTheDOMToPageB(); // Clear the old message if that element is still in the page document.querySelector(".old-message").style.pageTransitionTag = ""; // Set new message as the shared element 'message' document.querySelector(".new-message").style.pageTransitionTag = "message"; // Set up animations using WA-API on the next frame. requestAnimationFrame(() => { document.documentElement.animate(keyframes, { ...animationOptions, pseudoElement: "::page-transition-container(message)", }); }); // Note that when this callback finishes, the animations will start with the tagged elements. }); } 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

27 Jun 202220min

In this supper club episode of Syntax, Wes and Scott talk with Tim Leland - developer of browser extensions like WeatherExtension and Link Shortener Extension. Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time. WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more! Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:33 Welcome 02:21 Guest introduction @tim_leland TimLeland.com WeatherExtension Link Shortener Extension 03:40 Why develop browser extensions? 07:58 How did you market your extensions? 09:43 Where is a Chrome extension running? Caddy 14:29 What’s your URL shortener extension? 18:50 OneLink service 20:30 SSL Domains 21:35 Sponsor: The Postlight Podcast 23:00 Maliciousness with URL shorteners 28:26 How do you come up with ideas? 30:03 Running Chrome extensions as Firefox extensions 34:03 Does blogging still work? 36:38 Sponsor: Sendlayer 37:53 Supper club questions Tim Leland /uses/ 45:12 ××× SIIIIICK ××× PIIIICKS ××× Tchibo Coffee machine 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

24 Jun 202248min

In this Tasty Treat, Scott and Wes talk about the current state of home automation, and the kinds of software and hardware they’re using in their homes to automate their lives. 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 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax Show Notes 00:11 Welcome Syntax Ep181 Automating Stuff 02:18 Protocols 07:35 Software Homebridge Hoobs Home Assistant 11:28 Using Homebridge 16:51 Home Assistant vs Homebridge 24:35 Home Assistant automations 27:26 Wyze cams 33:13 Sponsor: Sentry 34:31 Hardware Philips Hue Leviton Synology Node-RED Docker Wyze Bridge U-Tec 38:00 Bulbs 40:24 Buttons Lutron Aurora Smart Bulb Dimmer Switch Flic Button 42:53 IR Blasters 45:57 Sensors 47:56 Motion sensors 52:05 Sponsor: Auth0 53:28 Switched switches 57:36 Sprinklers 58:54 NFC /r/Homeassistant Shelly 01:04:03 Sponsor: Freshbooks 01:05:01 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Severence on Apple TV+ Wes: INKZALL Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Beginner JavaScript 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

22 Jun 20221h 9min

In this episode of Syntax, Wes and Scott talk about the new viewport units coming to the web - what are they and when can we use them? 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. Sanity.io - 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:25 Welcome 01:14 Sponsor: LogRocket 02:24 Sponsor: Sanity 04:19 What are viewport units? The Large and small and dynamic viewports 05:22 What are the new viewport units? Large small and dyanmic viewports 07:57 What’s small and large? 11:52 How do viewport units help developers? 12:39 What about the keyboard on mobile? Keycode.info 16:37 When can we start using new viewport units? 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

20 Jun 202219min

In this supper club episode of Syntax, Wes and Scott talk edge functions and Deno with Eduardo Bouças of Netlify. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Postlight Podcast - Sponsor Postlight is a strategy, design, and engineering firm that builds platforms for some of the biggest organizations in the world. The Postlight Podcast is hosted by senior leaders Rich Ziade, Paul Ford, Gina Trapani, and Chris LoSacco. If you’re looking for answers to tough leadership questions, the Postlight Podcast has you covered. Listen to new episodes every Tuesday, wherever you get your podcasts. WP Mail SMTP - Sponsor Did you know that many WordPress sites are not properly configured to send emails? With WP Mail SMTP, you can easily optimize your site to send emails, avoid the spam folder, and make sure your emails land in the inbox every time. WP Mail SMTP comes with detailed email logs, email engagement tracking, visual email reports, weekly email summaries, integrations with popular email providers like SendLayer, Gmail, Outlook, and more! Try WP Mail SMTP Pro today and get 50% off or start with their free version by downloading it from the WordPress plugin directory. Show Notes 00:36 Welcome 02:31 Who is Eduardo? EduardoBoucas.com @eduardoboucas 04:29 What is a serverless function? 06:42 What is the edge and an edge function? Edge Functions Explained Deno 08:41 Sponsor: Hasura 09:18 The internet is global, and server locations matter 17:09 Chaining multiple edge functions 20:18 Sponsor: WP Mail SMTP 21:18 Why use Deno? 25:06 What are the limitations of using Deno? 28:12 Why not run NodeJS servers on the edge? 30:02 Do you see a future where people are writing packages that work anywhere? 32:00 Sponsor: Postlight Podcast 32:53 What about databases and serverless functions? Planetscale 38:14 What language does Netlify use to write apps in? Netlify Edge Handlers 44:08 Supper Club questions Warp S Town Podcast 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

17 Jun 202255min