477 episodes

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Syntax - Tasty Web Development Treats Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

    • Technology
    • 4.9 • 122 Ratings

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

    Browser CSS Page Transitions API aka Shared Element Transitions

    Browser CSS Page Transitions API aka Shared Element Transitions

    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

    • 20 min
    Supper Club × Authoring Browser Extensions with Tim Leland

    Supper Club × Authoring Browser Extensions with Tim Leland

    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

    • 48 min
    Home Automation - A Look Ahead

    Home Automation - A Look Ahead

    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

    • 1 hr 9 min
    New Viewport Units

    New Viewport Units

    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

    • 19 min
    Supper Club × Edge Functions and Deno with Eduardo Bouças of Netlify

    Supper Club × Edge Functions and Deno with Eduardo Bouças of Netlify

    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

    • 55 min
    Potluck - Headless WordPress, Databases, Regex

    Potluck - Headless WordPress, Databases, Regex

    In this episode of Syntax, Wes and Scott answer your questions about headless WordPress, Regex, their health and fitness, CSS custom properties in media queries, and more.
    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.
    .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
    Show Notes 00:10 Welcome 03:30 If I host a NextJS app on Digital Ocean, should I use a Digital Ocean database? 09:14 Will either of you ever do a regex course? Regex101 13:58 Is it possible to use the WordPress users database as the same database that the app uses? WPGraphQL 18:46 Sponsor: Sentry 19:43 How is health and fitness going for the both of you? 26:08 Does Wes know who Gendo Ikari is? 27:36 Dart popularity follow up 29:40 Is it vital that I should learn another programming language? 33:42 Sponsor: Sanity 34:54 If I’m trying to get my first job in web development, do I need to be familiar with design software? Figma 40:01 Thank you for the confidence to apply for a web dev job Syntax 463 with Tom Preston-Werner 41:55 What advice will you give in terms of setting up core important things around network, state management, folder structure? 45:37 .TECH Domain Names 46:22 I just had an interview with a “major tech company” and your article on using string templates was really helpful. Template Strings 48:43 If 80% of the time ew need to use preventDefault on form submission, why don’t the simply change the HTML spec? 50:01 What’s the rationale for not supporting CSS custom properties in media queries when using max/min width? CSS Env MDN CSS Env 55:37 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: * You Must Remember This Podcast Wes: Tools 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 hr

Customer Reviews

4.9 out of 5
122 Ratings

122 Ratings

florentcm ,

My favourite podcast

This pod cast is a gem, I've been listening for more than a year now and I recommend it to any Front-end dev who want to keep up with latest trends

Tyrone Buckets ,

Please Change the Intro

Great podcast but literally takes me out of whatever Im doing once I hear the super loud, radio show-esque intro.

WwHG10 ,

Fantastic show

Great topics and smart content.
This show is wonderful and a great listen.

Top Podcasts In Technology

Lex Fridman
Jason Calacanis
Jack Rhysider
Gimlet
PJ Vogt
NPR

You Might Also Like

Changelog Media
CodeNewbie
ShopTalk
The Stack Overflow Podcast
Software Engineering Daily
Allen Underwood, Michael Outlaw, Joe Zack