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 

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. <a></a>Show Notes <ul> <li> <a href="#t=00:25" rel="nofollow" target="_blank">00:25</a> Welcome</li> <li> <a href="#t=01:00" rel="nofollow" target="_blank">01:00</a> Are decorators finally here?</li> <li> <a href="https://github.com/tc39/proposal-decorators/blob/master/EXTENSIONS.md" rel="nofollow" target="_blank"> TC39 proposal</a></li> <li> <a href="https://github.com/tc39/proposal-decorators#how-does-this-proposal-compare-to-other-versions-of-decorators" rel="nofollow" target="_blank"> How this compares to other versions of decorators</a></li> <li> <a href="#t=06:47" rel="nofollow" target="_blank">06:47</a> What are use cases for decorators?</li> <li> <a href="#t=10:55" rel="nofollow" target="_blank">10:55</a> How do you define a decorator?</li> <li> <a href="#t=14:20" rel="nofollow" target="_blank">14:20</a> Auto Accessor</li> </ul> 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; } }; } // ... } <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

JS Fundamentals - Decorators

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 &amp; 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 

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. <a></a>Show Notes <ul> <li> <a href="#t=00:32" rel="nofollow" target="_blank">00:32</a> Welcome</li> <li> <a href="#t=01:28" rel="nofollow" target="_blank">01:28</a> Who is Brandon Bayer?</li> <li> <a href="https://twitter.com/flybayer?lang=en" rel="nofollow" target="_blank">Brandon 🚀 Flightcontrol (@flybayer) / X</a></li> <li> <a href="https://twitter.com/flightcontrolhq" rel="nofollow" target="_blank">Flightcontrol (@Flightcontrolhq) / X</a></li> <li> <a href="https://blitzjs.com/" rel="nofollow" target="_blank">Blitz.js - The Missing Fullstack Toolkit for Next.js</a></li> <li> <a href="https://www.flightcontrol.dev/" rel="nofollow" target="_blank">Flightcontrol — AWS Without Pain</a></li> <li> <a href="https://connect.tailwindcss.com/" rel="nofollow" target="_blank">Tailwind Connect 2023 | Tailwind CSS Live Event</a></li> <li> <a href="#t=03:00" rel="nofollow" target="_blank">03:00</a> How do you fly?</li> <li> <a href="#t=06:10" rel="nofollow" target="_blank">06:10</a> What is Flightcontrol?</li> <li> <a href="#t=10:00" rel="nofollow" target="_blank">10:00</a> Why doesn’t Amazon make it easier?</li> <li> <a href="#t=11:34" rel="nofollow" target="_blank">11:34</a> Which parts of the AWS stack should I use?</li> <li> <a href="#t=15:08" rel="nofollow" target="_blank">15:08</a> Creating the infrastructure</li> <li> <a href="#t=19:01" rel="nofollow" target="_blank">19:01</a> Ongoing deployment</li> <li> <a href="#t=20:05" rel="nofollow" target="_blank">20:05</a> What languages does Flightcontrol support?</li> <li> <a href="#t=23:35" rel="nofollow" target="_blank">23:35</a> How are events or cron handled?</li> <li> <a href="#t=25:24" rel="nofollow" target="_blank">25:24</a> What is Temporal?</li> <li> <a href="https://temporal.io/" rel="nofollow" target="_blank">Open Source Durable Execution Platform | Temporal Technologies</a></li> <li> <a href="#t=29:05" rel="nofollow" target="_blank">29:05</a> What are Nixpacks?</li> <li> <a href="https://github.com/railwayapp/nixpacks" rel="nofollow" target="_blank">GitHub - railwayapp/nixpacks: App source + Nix packages + Docker = Image</a></li> <li> <a href="#t=35:50" rel="nofollow" target="_blank">35:50</a> How is Flightcontrol priced?</li> <li> <a href="https://www.flightcontrol.dev/docs/guides/aws/aws-credits" rel="nofollow" target="_blank">How To Get Free AWS Credits - Flightcontrol</a></li> <li> <a href="#t=44:44" rel="nofollow" target="_blank">44:44</a> How does Flightcontrol help with scaling?</li> <li> <a href="https://aws.amazon.com/fargate/" rel="nofollow" target="_blank">Serverless Compute Engine – AWS Fargate – AWS</a></li> <li> <a href="#t=46:11" rel="nofollow" target="_blank">46:11</a> What are your thoughts on ReactJS, Server components?</li> <li> <a href="#t=49:57" rel="nofollow" target="_blank">49:57</a> Supper Club questions</li> <li> <a href="https://keychron.ca/products/keychron-k3-wireless-mechanical-keyboard" rel="nofollow" target="_blank"> Keychron K3 Ultra-slim Wireless Mechanical Keyboard (Version 2)</a></li> <li> <a href="https://www.codecademy.com/" rel="nofollow" target="_blank">Learn to Code - for Free | Codecademy</a></li> <li> <a href="#t=57:20" rel="nofollow" target="_blank">57:20</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> <a href="https://www.eaa.org/airventure" rel="nofollow" target="_blank">EAA AirVenture Oshkosh | Oshkosh, Wisconsin | Fly-In &amp; Convention</a></li> <li> <a href="https://en.wikipedia.org/wiki/Ko_Tao" rel="nofollow" target="_blank">Ko Tao</a></li> <li> <a href="https://en.wikipedia.org/wiki/Ko_Lanta_Yai" rel="nofollow" target="_blank">Ko Lanta Yai</a></li> </ul> <a></a>Shameless Plugs <ul> <li> <a href="https://www.flightcontrol.dev/" rel="nofollow" target="_blank">Flightcontrol — AWS Without Pain</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

Supper Club × Flightcontrol with Brandon Bayer

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 

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! <a></a>Show Notes <ul> <li> <a href="#t=00:11" rel="nofollow" target="_blank">00:11</a> Welcome</li> <li> <a href="#t=03:11" rel="nofollow" target="_blank">03:11</a> The Sunday scaries</li> <li> <a href="#t=06:03" rel="nofollow" target="_blank">06:03</a> Is TypeSctipt just a bunch of fancy Duck Tape?</li> <li> <a href="https://stackblitz.com/edit/typescript-xddko7?file=index.ts,index.html" rel="nofollow" target="_blank"> Is TypeScript saving us?</a></li> <li> <a href="#t=12:29" rel="nofollow" target="_blank">12:29</a> How do you go years into programming without back pain?</li> <li> <a href="https://syntax.fm/show/293/hasty-treat-stretching-for-developers-with-scott" rel="nofollow" target="_blank"> Hasty Treat - Stretching For Developers with Scott — Syntax Podcast 293</a></li> <li> <a href="#t=23:51" rel="nofollow" target="_blank">23:51</a> Why don’t cloud services provide an option to shut off services when a spending limit is reached?</li> <li> <a href="https://www.digitalocean.com/" rel="nofollow" target="_blank">DigitalOcean | Cloud Hosting for Builders</a></li> <li> <a href="https://vercel.com/" rel="nofollow" target="_blank">Vercel: Develop. Preview. Ship. For the best frontend teams</a></li> <li> <a href="#t=28:41" rel="nofollow" target="_blank">28:41</a> How do you choose a CSS library for any project?</li> <li> <a href="https://get.foundation/" rel="nofollow" target="_blank">The most advanced responsive front-end framework in the world. | Foundation</a></li> <li> <a href="https://960.gs/" rel="nofollow" target="_blank">960 Grid System</a></li> <li> <a href="#t=38:26" rel="nofollow" target="_blank">38:26</a> What’s happening to Level Up Tuts?</li> <li> <a href="https://levelup.video/" rel="nofollow" target="_blank">Level Up Tutorials - Learn modern web development</a></li> <li> <a href="https://sharkwheel.com/wheels/skateboard-wheels/60mm-cali-roll/" rel="nofollow" target="_blank">Wheels - Skateboard Wheels - 60mm Cali Roll - Shark Wheel</a></li> <li> <a href="#t=43:43" rel="nofollow" target="_blank">43:43</a> Not a sponsored Yeti spot</li> <li> <a href="#t=45:16" rel="nofollow" target="_blank">45:16</a> What do you do for email hosting?</li> <li> <a href="https://workspace.google.com/lp/business/" rel="nofollow" target="_blank">Google Workspace</a></li> <li> <a href="https://www.techsoup.ca/more-nonprofit-deals" rel="nofollow" target="_blank">TechSoup Canada</a></li> <li> <a href="https://proton.me/mail" rel="nofollow" target="_blank">Proton Mail: Get a private, secure, and encrypted email account</a></li> <li> <a href="https://outlook.live.com/owa/" rel="nofollow" target="_blank">Outlook</a></li> <li> <a href="https://www.microsoft.com/en-ca/microsoft-365/business/compare-all-microsoft-365-business-products" rel="nofollow" target="_blank"> Microsoft 365 Plans</a></li> <li> <a href="https://savvycal.com/" rel="nofollow" target="_blank">Scheduling Software Everyone Will Love · SavvyCal</a></li> <li> <a href="https://www.synology.com/en-global/dsm/feature/photos" rel="nofollow" target="_blank">Synology Photos</a></li> <li> <a href="#t=50:34" rel="nofollow" target="_blank">50:34</a> Is Firebase ok to run an app long term with?</li> <li> <a href="https://firebase.google.com/" rel="nofollow" target="_blank">Firebase</a></li> <li> <a href="#t=58:57" rel="nofollow" target="_blank">58:57</a> Am I wrong to not do productive work intensely?</li> <li> <a href="#t=01:34" rel="nofollow" target="_blank">01:34</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://www.amazon.com/dp/B09TT8GZK9?linkCode=sl1&amp;linkId=b868e82b9d8d18e560d2cb96bf83e2d0&amp;language=en_US" rel="nofollow" target="_blank"> MagSafe Charger, Anker 3-in-1 Cube with MagSafe</a></li> <li> Wes: <a href="https://www.amazon.ca/dp/B01LL3WG1U?keywords=aluminum+headphone+hook&amp;sprefix=headphone+hook+al,aps,130&amp;language=en_US&amp;sr=8-8&amp;linkCode=gs2&amp;linkId=acb6afc9455dd8a4e8570e525546d42d&amp;tag=isi777-20" rel="nofollow" target="_blank"> 6amLifestyle Headphone Hanger Stand Under Desk</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://sentry.io" rel="nofollow" target="_blank">Sentry</a></li> <li> Wes: <a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes Bos Tutorials</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

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

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 

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? <a></a>Show Notes <ul> <li> <a href="#t=00:10" rel="nofollow" target="_blank">00:10</a> Welcome</li> <li> <a href="https://www.threads.net/@stolinski" rel="nofollow" target="_blank">Scott on Threads</a></li> <li> <a href="https://www.threads.net/@wesbos" rel="nofollow" target="_blank">Wes on Threads</a></li> <li> <a href="#t=00:35" rel="nofollow" target="_blank">00:35</a> Threads has got divs</li> <li> <a href="#t=02:42" rel="nofollow" target="_blank">02:42</a> Tight scoping</li> <li> <a href="#t=09:44" rel="nofollow" target="_blank">09:44</a> Avoids specificity</li> <li> <a href="#t=10:37" rel="nofollow" target="_blank">10:37</a> Dealing with ad blockers and scraping</li> <li> <a href="#t=15:45" rel="nofollow" target="_blank">15:45</a> Divs are free, what’s the big deal?</li> <li> <a href="#t=20:19" rel="nofollow" target="_blank">20:19</a> Facebook is tracking everything</li> <li> <a href="#t=27:57" rel="nofollow" target="_blank">27:57</a> React Native</li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://sentry.io" rel="nofollow" target="_blank">Sentry</a></li> <li> Wes: <a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes Bos Tutorials</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

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

Ryan Florence

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 

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. <a></a>Show Notes <ul> <li> <a href="#t=00:35" rel="nofollow" target="_blank">00:35</a> Welcome</li> <li> <a href="https://ryanflorence.com/" rel="nofollow" target="_blank">Ryan Florence</a></li> <li> <a href="https://twitter.com/ryanflorence" rel="nofollow" target="_blank">Ryan Florence (@ryanflorence) / X</a></li> <li> <a href="https://reacttraining.com/" rel="nofollow" target="_blank">React Training</a></li> <li> <a href="https://reacttraining.com/react-router" rel="nofollow" target="_blank">React Router Docs Moved</a></li> <li> <a href="https://github.com/ryanflorence" rel="nofollow" target="_blank">ryanflorence (Ryan Florence) · GitHub</a></li> <li> <a href="#t=01:42" rel="nofollow" target="_blank">01:42</a> Collarbone update</li> <li> <a href="#t=06:47" rel="nofollow" target="_blank">06:47</a> What is Remix?</li> <li> <a href="https://remix.run/" rel="nofollow" target="_blank">Remix.run</a></li> <li> <a href="#t=11:43" rel="nofollow" target="_blank">11:43</a> Server actions</li> <li> <a href="#t=15:33" rel="nofollow" target="_blank">15:33</a> What was the history around licensing?</li> <li> <a href="#t=20:30" rel="nofollow" target="_blank">20:30</a> Open source is weird now</li> <li> <a href="#t=22:21" rel="nofollow" target="_blank">22:21</a> Working with Shopify and Hydrogen</li> <li> <a href="https://remix.run/blog/remixing-shopify" rel="nofollow" target="_blank">Remixing Shopify | Remix</a></li> <li> <a href="https://www.csszengarden.com/" rel="nofollow" target="_blank">CSS Zen Garden: The Beauty of CSS Design</a></li> <li> <a href="https://www.amazon.com/exec/obidos/ASIN/0321303474/mezzoblue-20?&amp;linkCode=sl1&amp;linkId=dfe79f27d8b7dace1e7a26065fcd58c4&amp;language=en_US" rel="nofollow" target="_blank"> The Zen of CSS Design: Visual Enlightenment for the Web: Shea, Dave, Holzschlag, Molly E.: 9780321303479: Amazon.com: Books</a></li> <li> <a href="#t=28:04" rel="nofollow" target="_blank">28:04</a> On quitting Twitter</li> <li> <a href="#t=35:33" rel="nofollow" target="_blank">35:33</a> What’s coming up with v2 of Remix?</li> <li> <a href="#t=40:30" rel="nofollow" target="_blank">40:30</a> The reality of breaking changes</li> <li> <a href="#t=44:18" rel="nofollow" target="_blank">44:18</a> What’s the status of React Server components?</li> <li> <a href="#t=49:46" rel="nofollow" target="_blank">49:46</a> Will Remix ever have React Server components in it?</li> <li> <a href="#t=50:55" rel="nofollow" target="_blank">50:55</a> How should we be fetching our data?</li> <li> <a href="#t=53:04" rel="nofollow" target="_blank">53:04</a> Do you have a wishlist for JSX?</li> <li> <a href="#t=58:45" rel="nofollow" target="_blank">58:45</a> Supper Club questions</li> <li> <a href="https://strapi.io/" rel="nofollow" target="_blank">Strapi - Open source Node.js Headless CMS 🚀</a></li> <li> <a href="https://sidekiq.org/" rel="nofollow" target="_blank">Sidekiq</a></li> <li> <a href="https://github.com/i-tu/Hasklig" rel="nofollow" target="_blank">GitHub - i-tu/Hasklig: Hasklig - a code font with monospaced ligatures</a></li> <li> <a href="https://github.com/sindresorhus/terminal-snazzy" rel="nofollow" target="_blank">GitHub - sindresorhus/terminal-snazzy: Elegant Terminal theme with bright colors</a></li> <li> <a href="#t=08:24" rel="nofollow" target="_blank">08:24</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Minivans</li> </ul> <a></a>Shameless Plugs <ul> <li> <a href="https://www.shopify.com/" rel="nofollow" target="_blank">Shopify</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

Supper Club × Ryan Florence of Remix

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 

In this episode of Syntax, Wes and Scott talk about JavaScript runtimes available to use, what to consider, and packages to use. <a></a>Show Notes <ul> <li> <a href="#t=00:10" rel="nofollow" target="_blank">00:10</a> Welcome</li> <li> <a href="#t=01:00" rel="nofollow" target="_blank">01:00</a> Scott’s glasses</li> <li> <a href="#t=03:46" rel="nofollow" target="_blank">03:46</a> All the runtimes</li> <li> <a href="https://bun.sh/" rel="nofollow" target="_blank">Bun — A fast all-in-one JavaScript runtime</a></li> <li> <a href="https://supabase.com/docs/guides/functions" rel="nofollow" target="_blank">Edge Functions Supabase Docs</a></li> <li> <a href="https://docs.netlify.com/edge-functions/overview/" rel="nofollow" target="_blank">Edge Functions Netlify Docs</a></li> <li> <a href="https://deno.land/" rel="nofollow" target="_blank">Deno — A modern runtime for JavaScript and TypeScript</a></li> <li> <a href="https://fastify.dev/" rel="nofollow" target="_blank">Fast and low overhead web framework, for Node.js | Fastify</a></li> <li> <a href="https://www.alibabacloud.com/knowledge/what-is-edge-computing" rel="nofollow" target="_blank">What Is Edge Computing? Alibaba</a></li> <li> <a href="#t=05:15" rel="nofollow" target="_blank">05:15</a> A note for anyone new to JavaScript</li> <li> <a href="#t=08:40" rel="nofollow" target="_blank">08:40</a> Winter CG</li> <li> <a href="https://wintercg.org/" rel="nofollow" target="_blank">WinterCG</a></li> <li> <a href="#t=11:05" rel="nofollow" target="_blank">11:05</a> Fetch</li> <li> <a href="https://github.com/sindresorhus/ky" rel="nofollow" target="_blank">sindresorhus/ky: JavaScript HTTP client based on the browser Fetch API</a></li> <li> <a href="https://github.com/syntaxfm/website/blob/v2/src/routes/shows/%2Bpage.svelte#L44" rel="nofollow" target="_blank"> website/src/routes/shows/+page.svelte</a></li> <li> <a href="#t=14:53" rel="nofollow" target="_blank">14:53</a> URL</li> <li> <a href="#t=20:02" rel="nofollow" target="_blank">20:02</a> addEVentListener</li> <li> <a href="https://github.com/wintercg/proposal-common-minimum-api/issues/5" rel="nofollow" target="_blank">whatwg/fs · Issue #5 · wintercg/proposal-common-minimum-api · GitHub</a></li> <li> <a href="#t=22:53" rel="nofollow" target="_blank">22:53</a> Web streams</li> <li> <a href="https://syntax.fm/show/587/web-streams-explained" rel="nofollow" target="_blank">Web Streams Explained — Syntax Podcast 587</a></li> <li> <a href="#t=26:03" rel="nofollow" target="_blank">26:03</a> Structured Clone</li> <li> <a href="https://workers.tools/structured-json/" rel="nofollow" target="_blank">Structured JSON | Worker Tools</a></li> <li> <a href="#t=33:43" rel="nofollow" target="_blank">33:43</a> What does JSON 5 do?</li> <li> <a href="#t=34:48" rel="nofollow" target="_blank">34:48</a> Markdown flavors</li> <li> <a href="#t=36:46" rel="nofollow" target="_blank">36:46</a> File</li> <li> <a href="#t=40:32" rel="nofollow" target="_blank">40:32</a> AbortController and AbortSignal</li> <li> <a href="https://dom.spec.whatwg.org/#abortsignal" rel="nofollow" target="_blank">DOM Standard</a></li> <li> <a href="https://dom.spec.whatwg.org/#abortcontroller" rel="nofollow" target="_blank">DOM Standard</a></li> <li> <a href="#t=42:45" rel="nofollow" target="_blank">42:45</a> Packages for building</li> <li> <a href="https://www.npmjs.com/package/linkedom" rel="nofollow" target="_blank">linkedom - npm</a></li> <li> <a href="#t=44:05" rel="nofollow" target="_blank">44:05</a> Honking the Hono.dev</li> <li> <a href="https://www.npmjs.com/package/itty-router" rel="nofollow" target="_blank">Itty Router</a></li> <li> <a href="https://itty.dev/" rel="nofollow" target="_blank">Itty Dev</a></li> <li> <a href="https://hono.dev/" rel="nofollow" target="_blank">Hono.dev</a></li> <li> <a href="#t=55:25" rel="nofollow" target="_blank">55:25</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://macrofactorapp.com/" rel="nofollow" target="_blank">Macro Factor</a></li> <li> Wes: <a href="https://crpproducts.com/" rel="nofollow" target="_blank">CRP Products</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://sentry.io" rel="nofollow" target="_blank">Sentry</a></li> <li> Wes: <a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes Bos Tutorials</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

Standard Server JavaScript - Deno, Workers, Bun and More

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 

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. <a></a>Show Notes <ul> <li> <a href="#t=00:26" rel="nofollow" target="_blank">00:26</a> Welcome</li> <li> <a href="#t=01:08" rel="nofollow" target="_blank">01:08</a> Wes’ big beer bottle and Red Green</li> <li> <a href="https://www.youtube.com/@RedGreenTV" rel="nofollow" target="_blank">RedGreenTV on YouTube</a></li> <li> <a href="#t=05:03" rel="nofollow" target="_blank">05:03</a> Thrift store finds</li> <li> <a href="#t=06:19" rel="nofollow" target="_blank">06:19</a> Rust in JavaScript</li> <li> <a href="https://toml.io/en/" rel="nofollow" target="_blank">TOML: Tom’s Obvious Minimal Language</a></li> <li> <a href="#t=11:07" rel="nofollow" target="_blank">11:07</a> Documentation</li> <li> <a href="https://docs.rs/" rel="nofollow" target="_blank">Docs.rs</a></li> <li> <a href="https://practice.rs/comments-docs.html" rel="nofollow" target="_blank">Practice.rs</a></li> <li> <a href="#t=16:46" rel="nofollow" target="_blank">16:46</a> Memory safety</li> <li> <a href="#t=17:43" rel="nofollow" target="_blank">17:43</a> What about promises in Rust?</li> <li> <a href="#t=19:24" rel="nofollow" target="_blank">19:24</a> Error handling in Rust</li> <li> <a href="#t=27:39" rel="nofollow" target="_blank">27:39</a> What’s with the double colon?</li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

Rust for JavaScript Developers - Node vs Rust Concepts

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 

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. <a></a>Show Notes <ul> <li> <a href="#t=00:36" rel="nofollow" target="_blank">00:36</a> Welcome</li> <li> <a href="#t=01:56" rel="nofollow" target="_blank">01:56</a> Introducing Andris Reinman</li> <li> <a href="https://github.com/andris9" rel="nofollow" target="_blank">Andris Reinman on GitHub</a></li> <li> <a href="https://twitter.com/andrisreinman" rel="nofollow" target="_blank">Andris Reinman (@andrisreinman)</a></li> <li> <a href="https://nodemailer.com/about/" rel="nofollow" target="_blank">Nodemailer :: Nodemailer</a></li> <li> <a href="#t=04:34" rel="nofollow" target="_blank">04:34</a> Why is email so difficult?</li> <li> <a href="https://dmarc.postmarkapp.com/" rel="nofollow" target="_blank">Free DMARC Monitoring from Postmark</a></li> <li> <a href="https://convertkit.com/" rel="nofollow" target="_blank">ConvertKit: The creator marketing platform</a></li> <li> <a href="#t=09:48" rel="nofollow" target="_blank">09:48</a> What has changed in email?</li> <li> <a href="#t=10:52" rel="nofollow" target="_blank">10:52</a> What are DMARK, SPF and BIMI?</li> <li> <a href="#t=18:48" rel="nofollow" target="_blank">18:48</a> Is Mailtrain an open source alternative to Mailchimp?</li> <li> <a href="https://github.com/Mailtrain-org/mailtrain" rel="nofollow" target="_blank">Mailtrain-org/mailtrain: Self hosted newsletter app</a></li> <li> <a href="#t=22:52" rel="nofollow" target="_blank">22:52</a> Why can’t we use CSS in email?</li> <li> <a href="#t=29:05" rel="nofollow" target="_blank">29:05</a> Why is email so expensive?</li> <li> <a href="#t=32:39" rel="nofollow" target="_blank">32:39</a> How do you keep your emails out of the spam folder?</li> <li> <a href="#t=35:42" rel="nofollow" target="_blank">35:42</a> What is Email Engine?</li> <li> <a href="https://emailengine.app/" rel="nofollow" target="_blank">EmailEngine Email API</a></li> <li> <a href="#t=40:16" rel="nofollow" target="_blank">40:16</a> Is Email Engine self hosted?</li> <li> <a href="#t=41:01" rel="nofollow" target="_blank">41:01</a> How does Ethereal email work?</li> <li> <a href="https://ethereal.email/" rel="nofollow" target="_blank">Ethereal Email</a></li> <li> <a href="#t=46:16" rel="nofollow" target="_blank">46:16</a> What email client do you use?</li> <li> <a href="#t=49:44" rel="nofollow" target="_blank">49:44</a> Are any email clients harder to send to?</li> <li> <a href="#t=55:23" rel="nofollow" target="_blank">55:23</a> Supper Club questions</li> <li> <a href="https://iterm2.com/" rel="nofollow" target="_blank">iTerm2 - macOS Terminal Replacement</a></li> <li> <a href="#t=59:29" rel="nofollow" target="_blank">59:29</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> <a href="https://www.amazon.ca/dp/1565924797?crid=2GCF7943U1NWA&amp;keywords=programming+internet+email&amp;sprefix=programming+internet+email,aps,136&amp;language=en_US&amp;sr=8-2&amp;linkCode=gs2&amp;linkId=37abb4935d4968e684fb8d17ca29e988&amp;tag=isi777-20" rel="nofollow" target="_blank"> Programming Internet Email: Mastering Internet Messaging Systems: Wood, David: 9781565924796: Books - Amazon.ca</a></li> </ul> <a></a>Shameless Plugs <ul> <li> <a href="https://emailengine.app/" rel="nofollow" target="_blank">EmailEngine Email</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

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

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 

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. <a></a>Show Notes <ul> <li> <a href="#t=00:10" rel="nofollow" target="_blank">00:10</a> Welcome</li> <li> <a href="#t=01:07" rel="nofollow" target="_blank">01:07</a> Toast follow up</li> <li> <a href="#t=02:45" rel="nofollow" target="_blank">02:45</a> What are transpiling, ponyfill, polyfill, and monkey patching</li> <li> <a href="https://github.com/tc39/proposals" rel="nofollow" target="_blank">TC39 Proposals</a></li> <li> <a href="https://twitter.com/wesbos/status/1593271021557239809" rel="nofollow" target="_blank">Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3</a></li> <li> <a href="#t=11:18" rel="nofollow" target="_blank">11:18</a> Transpiling unsupported CSS</li> <li> <a href="#t=15:11" rel="nofollow" target="_blank">15:11</a> Polyfills</li> <li> <a href="https://github.com/oddbird/popover-polyfill/blob/main/src/popover.ts" rel="nofollow" target="_blank"> Popover polyfill</a></li> <li> <a href="#t=19:22" rel="nofollow" target="_blank">19:22</a> Polyfilling CSS</li> <li> <a href="#t=21:06" rel="nofollow" target="_blank">21:06</a> HTML polyfills</li> <li> <a href="#t=27:47" rel="nofollow" target="_blank">27:47</a> How to transpile and polyfill</li> <li> <a href="https://babeljs.io/" rel="nofollow" target="_blank">Babel</a></li> <li> <a href="https://www.typescriptlang.org/" rel="nofollow" target="_blank">TypeScript: JavaScript With Syntax For Types</a></li> <li> <a href="https://coffeescript.org/" rel="nofollow" target="_blank">CoffeeScript</a></li> <li> <a href="https://civet.dev/" rel="nofollow" target="_blank">Civet</a></li> <li> <a href="https://github.com/cronn/jsxtransformer" rel="nofollow" target="_blank">cronn/jsxtransformer: Pipeline for transforming JSX files using Babel.js and Uglify.js</a></li> <li> <a href="https://svelte.dev/" rel="nofollow" target="_blank">Svelte • Cybernetically enhanced web apps</a></li> <li> <a href="https://polyfill.io/v3/" rel="nofollow" target="_blank">Polyfill.io</a></li> <li> <a href="https://www.npmjs.com/package/core-js" rel="nofollow" target="_blank">core-js - npm</a></li> <li> <a href="#t=35:46" rel="nofollow" target="_blank">35:46</a> Shiv and shims</li> <li> <a href="https://stackoverflow.com/questions/14429061/html5-shim-vs-shiv" rel="nofollow" target="_blank">Shim vs Shiv</a></li> <li> <a href="#t=38:16" rel="nofollow" target="_blank">38:16</a> Monkey patching</li> <li> <a href="#t=49:08" rel="nofollow" target="_blank">49:08</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://amzn.to/44vKgcW" rel="nofollow" target="_blank">Cable sleeve</a></li> <li> Wes: <a href="https://www.meross.com/en-gc/smart-air-purifier/homekit-air-purifier/112" rel="nofollow" target="_blank"> Air Purifier</a></li> <li> <a href="https://www.aliexpress.com/" rel="nofollow" target="_blank">AliExpress</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://sentry.io" rel="nofollow" target="_blank">Sentry</a></li> <li> Wes: <a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes Bos Tutorials</a></li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

Polyfills, Transpiling and Monkey Patching

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 

In this Hasty Treat, Scott and Wes talk about toast messages for validation, errors, confirmations, and more. <a></a>Show Notes <ul> <li> <a href="#t=00:24" rel="nofollow" target="_blank">00:24</a> Welcome</li> <li> <a href="#t=01:04" rel="nofollow" target="_blank">01:04</a> Why use these types of notifications</li> <li> <a href="#t=03:34" rel="nofollow" target="_blank">03:34</a> Old school checking stories</li> <li> <a href="#t=05:35" rel="nofollow" target="_blank">05:35</a> What kinds of toast messages are there?</li> <li> <a href="#t=10:02" rel="nofollow" target="_blank">10:02</a> Why toast?</li> <li> <a href="#t=11:38" rel="nofollow" target="_blank">11:38</a> Best practices for toast messages</li> <li> <a href="#t=17:09" rel="nofollow" target="_blank">17:09</a> Timeouts and manual close auto close</li> <li> <a href="#t=19:38" rel="nofollow" target="_blank">19:38</a> Multiple messages stacking on top of each other</li> <li> <a href="#t=22:56" rel="nofollow" target="_blank">22:56</a> Using a toast library</li> <li> <a href="https://web.dev/building-a-toast-component/" rel="nofollow" target="_blank">Building a toast component</a></li> <li> <a href="https://react-hot-toast.com/" rel="nofollow" target="_blank">react-hot-toast - The Best React Notifications in Town</a></li> <li> <a href="https://www.magicbell.com/" rel="nofollow" target="_blank">Real-time notification system for products | MagicBell</a></li> <li> <a href="#t=28:29" rel="nofollow" target="_blank">28:29</a> Form validation</li> <li> <a href="https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/" rel="nofollow" target="_blank"> Form validation with HTML5 and JavaScript</a></li> <li> <a href="#t=33:36" rel="nofollow" target="_blank">33:36</a> HTML inputs</li> </ul> <a></a>Tweet us your tasty treats <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> <li> <a href="https://bsky.app/profile/wesbos.com" rel="nofollow" target="_blank">Wes Bos on Bluesky</a></li> <li> <a href="https://bsky.app/profile/tolin.ski" rel="nofollow" target="_blank">Scott on Bluesky</a></li> <li> <a href="https://bsky.app/profile/syntax.fm" rel="nofollow" target="_blank">Syntax on Bluesky</a></li> </ul>

User Feedback UI - Toasts, Flash, Validation

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.

Wonderful people talking about an AWESOME topic with energy!

Simply amazing!

So many good topics—be sure to look through the archives.

great podcast

Syntax - Tasty Web Development Treats

In this episode of Syntax, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc. 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. FreshBooks - Sponsor Get a 30 day free trial of FreshBooks at FreshBooks and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:07 - Variables + Scoping  var/let/const Block scope Function scope Scope lookup  6:06 - Types  Objects  Reference vs. copy    7:15 - Functions  Types of functions  Anonymous vs. named Expressions Arrow functions   Methods  9:33 - DOM  Selecting Updating Creating  15:07 - Prototypes + this  this Objects  20:16 - Events  Listening, callbacks dispatchEvent Bubbling  22:05 - Arrays  Push, pop, manipulate Spread, rest Map, filter, reduce Arrays vs. objects Mutation vs. immutable  26:25 - Flow control  Looping If Promises + Async + Await  29:47 - Security and accessibility  XSS and innerHTML  32:04 - Things you should know, but not necessarily master  Modules Closures Ajax requests  35:26 - Clean code  Clean Code Javascript  Links   Syntax 043: 20 Javascript Array and Object Methods to make you a better developer  Syntax 141: Hasty Treat - Async + Await Error Handling Strategies Syntax 072: Accessibility  ××× SIIIIICK ××× PIIIICKS ×××  Scott: BaseCS Wes: Owlet Baby Monitor  Shameless Plugs  Scott’s new E-Commerce and Gatsby Course Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about the fundamentals of JavaScript - the set of core skills you should know before branching off into other frameworks, libraries, etc. <a></a>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 <a href="https://logrocket.com/syntax" rel="nofollow" target="_blank">LogRocket</a>. <a></a>FreshBooks - Sponsor Get a 30 day free trial of FreshBooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">FreshBooks</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 3:07 - Variables + Scoping <ul> <li>var/let/const</li> <li>Block scope</li> <li>Function scope</li> <li>Scope lookup</li> </ul> 6:06 - Types <ul> <li>Objects <ul> <li>Reference vs. copy</li> </ul> </li> </ul> 7:15 - Functions <ul> <li>Types of functions <ul> <li>Anonymous vs. named</li> <li>Expressions</li> <li>Arrow functions</li> </ul> </li> <li>Methods</li> </ul> 9:33 - DOM <ul> <li>Selecting</li> <li>Updating</li> <li>Creating</li> </ul> 15:07 - Prototypes + this <ul> <li>this</li> <li>Objects</li> </ul> 20:16 - Events <ul> <li>Listening, callbacks</li> <li>dispatchEvent</li> <li>Bubbling</li> </ul> 22:05 - Arrays <ul> <li>Push, pop, manipulate</li> <li>Spread, rest</li> <li>Map, filter, reduce</li> <li>Arrays vs. objects</li> <li>Mutation vs. immutable</li> </ul> 26:25 - Flow control <ul> <li>Looping</li> <li>If</li> <li>Promises + Async + Await</li> </ul> 29:47 - Security and accessibility <ul> <li>XSS and innerHTML</li> </ul> 32:04 - Things you should know, but not necessarily master <ul> <li>Modules</li> <li>Closures</li> <li>Ajax requests</li> </ul> 35:26 - Clean code <ul> <li><a href="https://github.com/ryanmcdermott/clean-code-javascript" rel="nofollow" target="_blank">Clean Code Javascript</a></li> </ul> <a></a>Links <ul> <li><a href="https://syntax.fm/show/043/20-javascript-array-and-object-methods-to-make-you-a-better-developer" rel="nofollow" target="_blank"> Syntax 043: 20 Javascript Array and Object Methods to make you a better developer</a></li> <li><a href="https://syntax.fm/show/141/hasty-treat-async-await-error-handling-strategies" rel="nofollow" target="_blank"> Syntax 141: Hasty Treat - Async + Await Error Handling Strategies</a></li> <li><a href="https://syntax.fm/show/072/accessibility" rel="nofollow" target="_blank">Syntax 072: Accessibility</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://www.codenewbie.org/basecs" rel="nofollow" target="_blank">BaseCS</a></li> <li>Wes: <a href="https://amzn.to/2Ruf8Ga" rel="nofollow" target="_blank">Owlet Baby Monitor</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s new E-Commerce and Gatsby Course</a></li> <li><a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">Wes’ Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

The Fundamentals — JS

Wes and Scott rattle through ~20 different Object and Arra Methods that will make you a better JavaScript developer. Freshbooks - Sponsor This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. They are also hiring! netlify.com/careers Show Notes For the docs for all these, just google mdn and the method you are looking for 😃 3:00  Why are these great? They are chainable Immutable  5:30  .filter() Truthy or Falsy  8:00  .map()  10:00  .reduce() - returns any shape! filter, create a new shape, add up numbers...  14:30  .forEach() Side effects  16:00  .some() can be used as a short circuit forEach  25:00  .every() .includes() (why not contains?)  26:00  Array.from() Array.from() takes a secondary map arg Array.of()  29:00  Object.values() Object.keys() Object.entries()  32:00  Array spread - converts iterable to array Array spread - Concats arrays Array Spread + Slice. Don't splice - remove an item from an array.  34:00  Object Spread  37:00  Function Rest  39:00  Object.freeze()  40:00  Object.seal()  41:00  Object.assign() - no longer needed because you can object spread  Reference vs Copy in JavaScript ×SICK×PICKS×   Scott: Tea Haus  Wes: SOG Folding Knife Wes: Sharpening Stone  Shameless Plugs  Vue.js for Everyone Wes' Course SMASH that Subscribe Button on Wes' YouTube  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 and Scott rattle through ~20 different Object and Arra Methods that will make you a better JavaScript developer. Freshbooks - Sponsor This is episode Wes mentions the free book <a href="https://www.freshbooks.com/ebooks/breaking-the-time-barrier" rel="noopener nofollow" target="_blank">Breaking The Time Barrier</a>. Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="noopener nofollow" target="_blank">freshbooks.com/syntax</a>. Netlify — Sponsor <a href="https://netlify.com/syntax" rel="noopener nofollow" target="_blank">Netlify</a> is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href="https://netlify.com/syntax" rel="noopener nofollow" target="_blank">netlify.com/syntax</a> for more info. They are also hiring! <a href="https://netlify.com/careers" rel="noopener nofollow" target="_blank">netlify.com/careers</a> Show Notes For the docs for all these, just google mdn and the method you are looking for 😃 3:00 <ul> <li>Why are these great?</li> <li>They are chainable</li> <li>Immutable</li> </ul> 5:30 <ul> <li>.filter()</li> <li>Truthy or Falsy</li> </ul> 8:00 <ul> <li>.map()</li> </ul> 10:00 <ul> <li>.reduce() - returns any shape! filter, create a new shape, add up numbers...</li> </ul> 14:30 <ul> <li>.forEach()</li> <li>Side effects</li> </ul> 16:00 <ul> <li>.some()</li> <li>can be used as a short circuit forEach</li> </ul> 25:00 <ul> <li>.every()</li> <li>.includes() (why not contains?)</li> </ul> 26:00 <ul> <li>Array.from()</li> <li>Array.from() takes a secondary map arg</li> <li>Array.of()</li> </ul> 29:00 <ul> <li>Object.values()</li> <li>Object.keys()</li> <li>Object.entries()</li> </ul> 32:00 <ul> <li>Array spread - converts iterable to array</li> <li>Array spread - Concats arrays</li> <li>Array Spread + Slice. Don't splice - remove an item from an array.</li> </ul> 34:00 <ul> <li>Object Spread</li> </ul> 37:00 <ul> <li>Function Rest</li> </ul> 39:00 <ul> <li>Object.freeze()</li> </ul> 40:00 <ul> <li>Object.seal()</li> </ul> 41:00 <ul> <li>Object.assign() - no longer needed because you can object spread</li> <li> <a href="https://www.youtube.com/watch?v=YnfwDQ5XYF4" rel="noopener nofollow" target="_blank">Reference vs Copy in JavaScript</a> ×SICK×PICKS× </li> <li> Scott: <a href="https://theteahaus.com/" rel="noopener nofollow" target="_blank">Tea Haus</a> </li> <li>Wes:<a href="https://amzn.to/2qZHrzk" rel="noopener nofollow" target="_blank"> SOG Folding Knife</a></li> <li>Wes: <a href="https://amzn.to/2HGNeob" rel="noopener nofollow" target="_blank">Sharpening Stone</a></li> </ul> Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/store" rel="noopener nofollow" target="_blank">Vue.js for Everyone</a></li> <li><a href="https://wesbos.com/courses" rel="noopener nofollow" target="_blank">Wes' Course</a></li> <li><a href="https://www.youtube.com/wesbos" rel="noopener nofollow" target="_blank">SMASH that Subscribe Button on Wes' YouTube</a></li> </ul> Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="noopener nofollow" target="_blank">Scott's Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="noopener nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="noopener nofollow" target="_blank">Wes' Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="noopener nofollow" target="_blank">Wes' Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="noopener nofollow" target="_blank">Wes' Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="noopener nofollow" target="_blank">Scott's Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="noopener nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

20 JavaScript Array and Object Methods to make you a better developer

In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important. 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”. Show Notes  2:15 - How do you build an API from scratch?  3:54 - Choose an API type   REST  GraphQL   8:15 - Setup some sort of server that will accept requests and send responses   Express  Koa  Meteor   11:11 - Document the endpoints   What is the end point  What parameters are required   Filters  Sorting    Headers required  What you get back when you hit this endpoint  Any request limits  Examples in common languages   JS  PHP  Ruby     21:20 - Naming   Make it obvious   27:39 - Securing   Only accept requests from logged-in users   oAuth  Cookie/Session  jwt    API key  CORS  Check roles - access level  Syntax 055: Hasty Treat - User Role Systems   32:42 - Protecting   Rate limit  Whitelist / blacklist  Cloudflare   36:00 - Write resolvers   Modify data if needed  Send back the data requested  Send back the correct HTTP code  Log what happened   37:56 - Tools   Postman  Swagger  Links   Stripe  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Hoax Podcast  Wes: Solar Lights  Shameless Plugs   Scott: LevelUpTutorials Pro - Advanced Gatsby &amp; Shopify  Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important. <a></a>Sanity - Sponsor <a href="http://sanity.io/" rel="nofollow" target="_blank">Sanity.io</a> 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 <a href="https://www.sanity.io/create" rel="nofollow" target="_blank">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href="https://www.sanity.io/syntax" rel="nofollow" target="_blank">sanity.io/syntax</a>. <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a> and using the coupon code “tastytreat”. <a></a>Show Notes 2:15 - How do you build an API from scratch? 3:54 - Choose an API type <ul> <li> <a href="https://restfulapi.net/" rel="nofollow" target="_blank">REST</a></li> <li> <a href="https://graphql.org/" rel="nofollow" target="_blank">GraphQL</a></li> </ul> 8:15 - Setup some sort of server that will accept requests and send responses <ul> <li> <a href="https://expressjs.com/" rel="nofollow" target="_blank">Express</a></li> <li> <a href="https://koajs.com/" rel="nofollow" target="_blank">Koa</a></li> <li> <a href="https://www.meteor.com/" rel="nofollow" target="_blank">Meteor</a></li> </ul> 11:11 - Document the endpoints <ul> <li> What is the end point</li> <li> What parameters are required <ul> <li> Filters</li> <li> Sorting</li> </ul> </li> <li> Headers required</li> <li> What you get back when you hit this endpoint</li> <li> Any request limits</li> <li> Examples in common languages <ul> <li> JS</li> <li> PHP</li> <li> Ruby</li> </ul> </li> </ul> 21:20 - Naming <ul> <li> Make it obvious</li> </ul> 27:39 - Securing <ul> <li> Only accept requests from logged-in users <ul> <li> oAuth</li> <li> Cookie/Session</li> <li> jwt</li> </ul> </li> <li> API key</li> <li> CORS</li> <li> Check roles - access level</li> <li> <a href="https://syntax.fm/show/055/hasty-treat-user-role-systems" rel="nofollow" target="_blank">Syntax 055: Hasty Treat - User Role Systems</a></li> </ul> 32:42 - Protecting <ul> <li> Rate limit</li> <li> Whitelist / blacklist</li> <li> <a href="https://www.cloudflare.com/" rel="nofollow" target="_blank">Cloudflare</a></li> </ul> 36:00 - Write resolvers <ul> <li> Modify data if needed</li> <li> Send back the data requested</li> <li> Send back the correct HTTP code</li> <li> Log what happened</li> </ul> 37:56 - Tools <ul> <li> <a href="https://www.getpostman.com/" rel="nofollow" target="_blank">Postman</a></li> <li> <a href="https://swagger.io/" rel="nofollow" target="_blank">Swagger</a></li> </ul> <a></a>Links <ul> <li> <a href="https://stripe.com/" rel="nofollow" target="_blank">Stripe</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://podcasts.apple.com/us/podcast/hoax/id1354226895" rel="nofollow" target="_blank">Hoax Podcast</a></li> <li> Wes: <a href="https://amzn.to/31NFwyH" rel="nofollow" target="_blank">Solar Lights</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">LevelUpTutorials Pro - Advanced Gatsby &amp; Shopify</a></li> <li> Wes: <a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

How to Build an API

It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more! Kyle Prinsloo Freelancing - Sponsor  Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at studywebdevelopment.com/freelancing. Use the coupon “SYNTAX” and get 25%. 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  2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages?  5:30 - Q: What makes a font “good”? I stumbled upon haleyfiege.fun/fonts, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective?  9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework?  12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out?  15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load?  21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks!  25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.?  28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription?  39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)?  44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm?  47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work? Links   Lighthouse  Syntax203: Hasty Treat - What Are Github Actions?  Lighthouse Batch NPM Package  Lighthouse Action GitHub Action  Next.js  haleyfiege.fun/fonts  Radnika Next  Sipsby  Babel  Shop Talk Show  CodePen Radio  Heist Podcast  Mixergy  The Dream  React Podcast  Indie Hackers  Akimbo  Command Line Heroes  Blazor  Braintree  Syntax055: Hasty Treat - User Role Systems  Clean Code concepts adapted for JavaScript  codecademy  Javascript30  CakePHP  Drupal  WordPress  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Aerial America  Wes: Streamer for Chromecast  Shameless Plugs   Scott: Level Up Tutorials Pro - Sign up for the year and save 25%!  Wes: Beginner Javascript - Use the coupon code ‘Syntax’ for $10 off!  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 

It’s another potluck! In this episode, Scott and Wes answer your questions about fonts, frameworks vs custom, drinking tea, learning to code, client work, and more! <a></a>Kyle Prinsloo Freelancing - Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at <a href="https://studywebdevelopment.com/freelancing" rel="nofollow" target="_blank">studywebdevelopment.com/freelancing</a>. Use the coupon “SYNTAX” and get 25%. <a></a>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 <a href="https://logrocket.com/syntax" rel="nofollow" target="_blank">logrocket.com/syntax</a>. <a></a>Show Notes 2:01 - Q: When you run audits like lighthouse on a website, do you run the audit on each page? Or have you found an app or hack to run the audit over the entire site / multiple pages? 5:30 - Q: What makes a font “good”? I stumbled upon <a href="https://www.haleyfiege.fun/fonts" rel="nofollow" target="_blank">haleyfiege.fun/fonts</a>, where she says her first font was not “good,” but it looks perfectly usable to me. When you are picking fonts for web apps, how do you judge them? Is it entirely subjective? 9:14 - Q: As a solo founder, speed is essential. What’s faster, building your own components, using a theme, or using a framework? 12:05 - Q: I’ve never been a tea drinker, but lately I’ve been wanting to start drinking a hot tea in the afternoon (instead of coffee). I know Scott is the Tea Guru, so what would your suggestions be for starting out? 15:30 - Q: Is it worth bundling JavaScript for websites that aren’t using a framework (i.e. WordPress / CMS websites)? The company I work for uses a large enterprise CMS and our JavaScript is just a minified mash of several different JS files, most of which are several hundred lines of spaghetti code. It would be nice to break up all these files in some sort of modular way, plus have the added benefit of using Babel so we can write modern JS. However, the output of the bundled JS file seems massive. Won’t that hurt performance and page load? 21:17 - Q: I know both of you put out a ton of content, both together and individually. I’m just curious to hear if you listen to any other podcasts out there in the land, or any other types of content that you consume to hone your skillz to pay the billz. Thanks! 25:14 - Q: What are your thoughts on Blazor? Is it a good move to be an early adopter of a framework like this, or should you focus on the ones that are already in a fully released state like React, Vue etc.? 28:51 - Q: I would like to ask Scott how you make subscriptions in a website? Also, how you give users a lifetime locked yearly subscription? 39:53 - Q: I feel like other developers’ code is always shorter, better structured, and easier to read than mine. Any tips (or resources) on writing clean, ‘good’ javascript code (or any other functional programming language)? 44:02 - Q: Both of you have CMS backgrounds, Scott with Drupal and Wes with WordPress. When you moved to freelancing, did you build for clients using a CMS? Or did you create custom admin interfaces for clients to manage their own site? You’ve mentioned some headless WordPress in the past, but was that the norm? 47:02 - Q: Hey Scott + Wes, you’re obviously very successful with your course creation careers, but do you miss client work? If people for some reason ever stopped buying your courses, would you go back to client work? <a></a>Links <ul> <li> <a href="https://github.com/GoogleChrome/lighthouse" rel="nofollow" target="_blank">Lighthouse</a></li> <li> <a href="https://syntax.fm/show/203/hasty-treat-what-are-github-actions" rel="nofollow" target="_blank">Syntax203: Hasty Treat - What Are Github Actions?</a></li> <li> <a href="https://www.npmjs.com/package/lighthouse-batch" rel="nofollow" target="_blank">Lighthouse Batch NPM Package</a></li> <li> <a href="https://github.com/jakejarvis/lighthouse-action" rel="nofollow" target="_blank">Lighthouse Action GitHub Action</a></li> <li> <a href="https://nextjs.org/" rel="nofollow" target="_blank">Next.js</a></li> <li> <a href="https://www.haleyfiege.fun/fonts" rel="nofollow" target="_blank">haleyfiege.fun/fonts</a></li> <li> <a href="https://hanken.co/products/radnika-next" rel="nofollow" target="_blank">Radnika Next</a></li> <li> <a href="https://www.sipsby.com/" rel="nofollow" target="_blank">Sipsby</a></li> <li> <a href="https://babeljs.io/" rel="nofollow" target="_blank">Babel</a></li> <li> <a href="https://shoptalkshow.com/" rel="nofollow" target="_blank">Shop Talk Show</a></li> <li> <a href="https://blog.codepen.io/radio/" rel="nofollow" target="_blank">CodePen Radio</a></li> <li> <a href="https://www.heistpodcast.com/" rel="nofollow" target="_blank">Heist Podcast</a></li> <li> <a href="https://mixergy.com/" rel="nofollow" target="_blank">Mixergy</a></li> <li> <a href="https://podcasts.apple.com/us/podcast/the-dream/id1435743296" rel="nofollow" target="_blank">The Dream</a></li> <li> <a href="https://reactpodcast.simplecast.fm/" rel="nofollow" target="_blank">React Podcast</a></li> <li> <a href="https://www.indiehackers.com/podcast" rel="nofollow" target="_blank">Indie Hackers</a></li> <li> <a href="https://www.akimbo.link/" rel="nofollow" target="_blank">Akimbo</a></li> <li> <a href="https://www.redhat.com/en/command-line-heroes" rel="nofollow" target="_blank">Command Line Heroes</a></li> <li> <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor" rel="nofollow" target="_blank">Blazor</a></li> <li> <a href="https://www.braintreepayments.com/" rel="nofollow" target="_blank">Braintree</a></li> <li> <a href="https://syntax.fm/show/055/hasty-treat-user-role-systems" rel="nofollow" target="_blank">Syntax055: Hasty Treat - User Role Systems</a></li> <li> <a href="https://github.com/ryanmcdermott/clean-code-javascript" rel="nofollow" target="_blank">Clean Code concepts adapted for JavaScript</a></li> <li> <a href="https://www.codecademy.com/" rel="nofollow" target="_blank">codecademy</a></li> <li> <a href="https://javascript30.com/" rel="nofollow" target="_blank">Javascript30</a></li> <li> <a href="https://cakephp.org/" rel="nofollow" target="_blank">CakePHP</a></li> <li> <a href="https://www.drupal.org/" rel="nofollow" target="_blank">Drupal</a></li> <li> <a href="https://wordpress.org/" rel="nofollow" target="_blank">WordPress</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://www.smithsonianchannel.com/shows/aerial-america/701" rel="nofollow" target="_blank">Aerial America</a></li> <li> Wes: <a href="https://apps.apple.com/us/app/streamer-for-chromecast/id1151425002" rel="nofollow" target="_blank">Streamer for Chromecast</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Level Up Tutorials Pro</a> - Sign up for the year and save 25%!</li> <li> Wes: <a href="https://beginnerjavascript.com/" rel="nofollow" target="_blank">Beginner Javascript</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Potluck - Fonts × Frameworks × Teas × Coding Subscriptions × Client Work × More!

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more… VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 2:40  Design Systems 101  Wes’ Tweet about Design Systems    9:40  Organizational elements of design systems  It’s all about consistency    23:07  Best tools for building design systems and style guides  Figma Relay for Figma InVision Design Systems Manager Airbnb Lona Brad Frost’s Pattern Library uiengine    41:52  Where to learn more  Links  Guide to Design Systems by InVision Shopify’s Design System Mailchimp’s Voice and Tone Zendesk Garden Material Design Awesome Design Systems Design Systems Repo Design Systems Docz Facebook Yoga StorybookJS Stuart Clarke-Frisby Tweet Figma’s Platform Figma Styles and Prototyping Design Systems Newsletter  ××× SIIIIICK ××× PIIIICKS ×××  Scott: CalDigit TS3 Plus Wes: Picasso Tiles  Shameless Plugs  Scott’s Level 1 Electron Course Wes’ Advanced React Course (Coming Soon)  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 highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more… <a></a><a href="http://vueschool.io/" rel="nofollow" target="_blank">VueSchool.io</a>'s Vue.js Masterclass — Sponsor Check out <a href="https://vueschool.io/" rel="nofollow" target="_blank">VueSchool.io’s new Vue.js Masterclass</a> taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit <a href="https://vueschool.io/syntax" rel="nofollow" target="_blank">VueSchool.io/syntax</a> to get 25% off. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 2:40 <ul> <li>Design Systems 101 <ul> <li><a href="https://twitter.com/wesbos/status/1012325994437529600" rel="nofollow" target="_blank">Wes’ Tweet about Design Systems</a></li> </ul> </li> </ul> 9:40 <ul> <li>Organizational elements of design systems <ul> <li>It’s all about consistency</li> </ul> </li> </ul> 23:07 <ul> <li>Best tools for building design systems and style guides <ul> <li><a href="https://figma.com/" rel="nofollow" target="_blank">Figma</a></li> <li><a href="https://relayforfigma.com/" rel="nofollow" target="_blank">Relay for Figma</a></li> <li><a href="https://www.invisionapp.com/design-system-manager/" rel="nofollow" target="_blank">InVision Design Systems Manager</a></li> <li><a href="https://github.com/airbnb/lona" rel="nofollow" target="_blank">Airbnb Lona</a></li> <li><a href="http://patternlab.io/" rel="nofollow" target="_blank">Brad Frost’s Pattern Library</a></li> <li><a href="https://github.com/dennisreimann/uiengine" rel="nofollow" target="_blank">uiengine</a></li> </ul> </li> </ul> 41:52 <ul> <li>Where to learn more</li> </ul> <a></a>Links <ul> <li><a href="https://www.invisionapp.com/blog/guide-to-design-systems/" rel="nofollow" target="_blank">Guide to Design Systems by InVision</a></li> <li><a href="https://polaris.shopify.com/content/product-content" rel="nofollow" target="_blank">Shopify’s Design System</a></li> <li><a href="https://styleguide.mailchimp.com/voice-and-tone/" rel="nofollow" target="_blank">Mailchimp’s Voice and Tone</a></li> <li><a href="https://garden.zendesk.com/" rel="nofollow" target="_blank">Zendesk Garden</a></li> <li><a href="https://material.io/design/" rel="nofollow" target="_blank">Material Design</a></li> <li><a href="https://github.com/alexpate/awesome-design-systems" rel="nofollow" target="_blank">Awesome Design Systems</a></li> <li><a href="https://designsystemsrepo.com/" rel="nofollow" target="_blank">Design Systems Repo</a></li> <li><a href="https://www.designsystems.com/" rel="nofollow" target="_blank">Design Systems</a></li> <li><a href="https://www.docz.site/" rel="nofollow" target="_blank">Docz</a></li> <li><a href="https://yogalayout.com/" rel="nofollow" target="_blank">Facebook Yoga</a></li> <li><a href="https://storybook.js.org/" rel="nofollow" target="_blank">StorybookJS</a></li> <li><a href="https://twitter.com/stuartfrisby/status/983274546802421760" rel="nofollow" target="_blank">Stuart Clarke-Frisby Tweet</a></li> <li><a href="https://blog.figma.com/introducing-figmas-platform-ee681bf861e7" rel="nofollow" target="_blank">Figma’s Platform</a></li> <li><a href="https://blog.figma.com/figma-3-0-217d6c248f85" rel="nofollow" target="_blank">Figma Styles and Prototyping</a></li> <li><a href="http://news.design.systems/" rel="nofollow" target="_blank">Design Systems Newsletter</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://amzn.to/2Mxz8nC" rel="nofollow" target="_blank">CalDigit TS3 Plus</a></li> <li>Wes: <a href="https://amzn.to/2IDzAOW" rel="nofollow" target="_blank">Picasso Tiles</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s Level 1 Electron Course</a></li> <li><a href="http://advancedreact.com/" rel="nofollow" target="_blank">Wes’ Advanced React Course (Coming Soon)</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Design Systems

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 2:30  Function components  4:50  What are React hooks?  8:12  What problem does this solve?  12:00  State hooks  21:50  Context hooks  26:02  Effect hooks  36:46  Reducer hooks  40:40  Ref Hooks  48:00  Libraries already using React hooks  Rehooks → Listing of hook libraries React Spring React Measure Formik Immer    50:30  Resources  Dan Abramov’s Talk Harry Wolf Use Hooks Newsletter Awesome React Hooks    ××× SIIIIICK ××× PIIIICKS ×××  Scott: Bad Blood Wes 1: Swindled Podcast Wes 2: Scrub Brush Drill  Shameless Plugs  Scott’s Pro Gatsby 2 Course Wes’ Advanced React Course - use the code SYNTAX for $10 off  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 Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry.io</a> and using the coupon code “tastytreat”. <a></a>Show Notes 2:30 <ul> <li>Function components</li> </ul> 4:50 <ul> <li>What are React hooks?</li> </ul> 8:12 <ul> <li>What problem does this solve?</li> </ul> 12:00 <ul> <li>State hooks</li> </ul> 21:50 <ul> <li>Context hooks</li> </ul> 26:02 <ul> <li>Effect hooks</li> </ul> 36:46 <ul> <li><a href="https://reactjs.org/docs/hooks-reference.html#usereducer" rel="nofollow" target="_blank">Reducer hooks</a></li> </ul> 40:40 <ul> <li>Ref Hooks</li> </ul> 48:00 <ul> <li>Libraries already using React hooks <ul> <li><a href="https://rehooks.com/" rel="nofollow" target="_blank">Rehooks</a> → Listing of hook libraries</li> <li><a href="http://react-spring.surge.sh/" rel="nofollow" target="_blank">React Spring</a></li> <li><a href="https://github.com/souporserious/react-measure" rel="nofollow" target="_blank">React Measure</a></li> <li><a href="https://jaredpalmer.com/formik" rel="nofollow" target="_blank">Formik</a></li> <li><a href="https://github.com/mweststrate/immer" rel="nofollow" target="_blank">Immer</a></li> </ul> </li> </ul> 50:30 <ul> <li>Resources <ul> <li><a href="https://www.youtube.com/watch?v=dpw9EHDh2bM" rel="nofollow" target="_blank">Dan Abramov’s Talk</a></li> <li><a href="https://www.youtube.com/watch?v=jd8R0a2Ur8Q" rel="nofollow" target="_blank">Harry Wolf</a></li> <li><a href="https://usehooks.com/" rel="nofollow" target="_blank">Use Hooks Newsletter</a></li> <li><a href="https://github.com/rehooks/awesome-react-hooks" rel="nofollow" target="_blank">Awesome React Hooks</a></li> </ul> </li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://amzn.to/2JMfowo" rel="nofollow" target="_blank">Bad Blood</a></li> <li>Wes 1: <a href="http://swindledpodcast.com/" rel="nofollow" target="_blank">Swindled Podcast</a></li> <li>Wes 2: <a href="https://amzn.to/2JMEpHV" rel="nofollow" target="_blank">Scrub Brush Drill</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s Pro Gatsby 2 Course</a></li> <li><a href="https://advancedreact.com/" rel="nofollow" target="_blank">Wes’ Advanced React Course</a> - use the code SYNTAX for $10 off</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

React Hooks

In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:54 - Learning fundamentals vs framework specialists  Learning vs getting a job Abstractions work well until they don’t and you need to debug them  HTML 7:58 - Semantic markup 9:15 - Accessibility basics 9:57 - Attributes CSS 16:13 - Specificity 22:42 - Selectors 24:52 - Layouts 27:53 - Box model 32:50 - Positioning 36:42 - Forms and inputs 40:45 - Block vs inline vs inline-block 43:09 - Sizing units 44:40 - Typography 47:53 - Media Queries Links  Interviewing candidates with a lack of fundamentals - Tweet Jean-Philippe Sirois Tweet Syntax 72: Accessibility Syntax 107: Hasty Treat - CSS Units  ××× SIIIIICK ××× PIIIICKS ×××  Scott: I Think You Should Leave with Tim Robinson Wes: Forearm Forklift Lifting and Moving Straps  Shameless Plugs  Scott’s new course - “Debugging and Dev Tools” Wes’ courses - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations and more! <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a> and using the coupon code “tastytreat”. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">Freshbooks</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 1:54 - Learning fundamentals vs framework specialists <ul> <li>Learning vs getting a job</li> <li>Abstractions work well until they don’t and you need to debug them</li> </ul> HTML 7:58 - Semantic markup 9:15 - Accessibility basics 9:57 - Attributes CSS 16:13 - Specificity 22:42 - Selectors 24:52 - Layouts 27:53 - Box model 32:50 - Positioning 36:42 - Forms and inputs 40:45 - Block vs inline vs inline-block 43:09 - Sizing units 44:40 - Typography 47:53 - Media Queries <a></a>Links <ul> <li><a href="https://twitter.com/wesbos/status/1137058712466722816" rel="nofollow" target="_blank">Interviewing candidates with a lack of fundamentals - Tweet</a></li> <li><a href="https://twitter.com/veksenn/status/1137187264486944770" rel="nofollow" target="_blank">Jean-Philippe Sirois Tweet</a></li> <li><a href="https://syntax.fm/show/072/accessibility" rel="nofollow" target="_blank">Syntax 72: Accessibility</a></li> <li><a href="https://syntax.fm/show/107/hasty-treat-css-units" rel="nofollow" target="_blank">Syntax 107: Hasty Treat - CSS Units</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://www.netflix.com/title/80986854?source=35" rel="nofollow" target="_blank">I Think You Should Leave with Tim Robinson</a></li> <li>Wes: <a href="https://amzn.to/2MD6AxU" rel="nofollow" target="_blank">Forearm Forklift Lifting and Moving Straps</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s new course - “Debugging and Dev Tools”</a></li> <li><a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">Wes’ courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

The Fundamentals: HTML + CSS

In this episode Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli &amp;&amp; sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com. Show Notes 3:59 - Our experiences   Scott:  Went to college - Go Blue! Worked odd jobs while self teaching Was mentored and taught more while working at my first job Self directed since then Started teaching via LUT in 2012    Wes:  Went to university for Business Tech - entirely self-taught Led and created part-time HTML + CSS program at HackerYou Led and created first bootcamp at HackerYou Led and created first JS part-time at HackerYou Been offered jobs at colleges + universities    10:02 - School - $$$   Pros  The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding Co-ops can help you find what you like and what you don’t like Life skills that involve you being on your own and figuring things out more You are exposed to interesting people and ideas CS Degree work can open more career doors Professional networking Many companies wont hire you without some sort of bachelor’s degree (this might change)    Cons  Not everyone has the time or money to devote two to five years to school — especially to something they might not end up enjoying Potentially outdated staff and course material  Wes was often asked to lead a video editing course, print design course and a web development course   Lot’s of distractions    23:10 - Bootcamp - $$   Pros  Very fast, lots of info, but can be a bit overwhelming You can get up-to-speed extremely quickly Focused on hire-ability and job-ready skills Focused information Personality is really the deciding factor here - lots of people do well, and some don’t    Cons  Hit or miss — quality of bootcamps aren’t vetted, so do your research Talk to someone who took it, find out who the instructors are You absolutely must continue learning after the bootcamp  The bootcamp is just a push and you are expected to continue learning once you are done   Not great for individuals that can’t handle the pace You have to quit your job    37:09 - Self-Taught - $   Pros  Self-directed people will prevail here Can be drip-fed while earning money at another job Can be supplemented by a job (e.g. you are front-end and want to go full stack) Can get real world experience as a freelancer while you evolve    Cons  Not for everyone Can be difficult to self-motivate Hard to get help - sometimes you can be stuck for hours on a two-second fix Potentially discouraging You might go down the wrong path without guidance on what you should learn    47:11 - Part Time Programs - $   Pros  Fantastic way to get up to speed with a new tech Goes at a good pace - twice a week usually Offered on weekends and evenings where you can maintain a regular job Very low risk - you can try it out    Cons  Might not be as fast as you like it Quality is all over the map    49:55 - Mentored Self Learning - $   Pros  Best to do with a mentor on the job Mentor can help steer what to learn in your free time Good feedback and a place to ask lots of questions    Cons  Can’t be done without someone willing to mentor you Only as good as your mentor    52:55 - What approach would we take?  Bootcamp &gt; then immediately supplement with courses  Links  Notion  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Digital Minimalism by Cal Newport Wes: American Kingpin  Shameless Plugs  Scott’s React Hooks For Everyone Wes’ All Courses  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 Wes and Scott talk about developer education — what to look for, what to avoid, and how to be a life-long learner with good problem solving skills. <a></a><a href="http://sanity.io/" rel="nofollow" target="_blank">Sanity.io</a> - Sponsor <a href="http://sanity.io/" rel="nofollow" target="_blank">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli &amp;&amp; sanity init in your command line. Get an awesome supercharged free developer plan on <a href="https://sanity.io/syntax?utm_source=syntax-fm&amp;utm_campaign=syntax1" rel="nofollow" target="_blank">sanity.io/syntax</a>. <a></a>The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram <a href="https://www.instagram.com/thearmourynyc/" rel="nofollow" target="_blank">@thearmourynyc</a> and check out their website <a href="https://thearmoury.com/" rel="nofollow" target="_blank">TheArmoury.com</a>. <a></a>Show Notes 3:59 - Our experiences <ul> <li> Scott: <ul> <li>Went to college - Go Blue!</li> <li>Worked odd jobs while self teaching</li> <li>Was mentored and taught more while working at my first job</li> <li>Self directed since then</li> <li>Started teaching via LUT in 2012</li> </ul> </li> <li> Wes: <ul> <li>Went to university for Business Tech - entirely self-taught</li> <li>Led and created part-time HTML + CSS program at HackerYou</li> <li>Led and created first bootcamp at HackerYou</li> <li>Led and created first JS part-time at HackerYou</li> <li>Been offered jobs at colleges + universities</li> </ul> </li> </ul> 10:02 - School - $$$ <ul> <li> Pros <ul> <li>The best thing about school was unrestricted free time to find out what I enjoyed, which lead me to coding</li> <li>Co-ops can help you find what you like and what you don’t like</li> <li>Life skills that involve you being on your own and figuring things out more</li> <li>You are exposed to interesting people and ideas</li> <li>CS Degree work can open more career doors</li> <li>Professional networking</li> <li>Many companies wont hire you without some sort of bachelor’s degree (this might change)</li> </ul> </li> <li> Cons <ul> <li>Not everyone has the time or money to devote two to five years to school — especially to something they might not end up enjoying</li> <li>Potentially outdated staff and course material <ul> <li>Wes was often asked to lead a video editing course, print design course and a web development course</li> </ul> </li> <li>Lot’s of distractions</li> </ul> </li> </ul> 23:10 - Bootcamp - $$ <ul> <li> Pros <ul> <li>Very fast, lots of info, but can be a bit overwhelming</li> <li>You can get up-to-speed extremely quickly</li> <li>Focused on hire-ability and job-ready skills</li> <li>Focused information</li> <li>Personality is really the deciding factor here - lots of people do well, and some don’t</li> </ul> </li> <li> Cons <ul> <li>Hit or miss — quality of bootcamps aren’t vetted, so do your research</li> <li>Talk to someone who took it, find out who the instructors are</li> <li>You absolutely must continue learning after the bootcamp <ul> <li>The bootcamp is just a push and you are expected to continue learning once you are done</li> </ul> </li> <li>Not great for individuals that can’t handle the pace</li> <li>You have to quit your job</li> </ul> </li> </ul> 37:09 - Self-Taught - $ <ul> <li> Pros <ul> <li>Self-directed people will prevail here</li> <li>Can be drip-fed while earning money at another job</li> <li>Can be supplemented by a job (e.g. you are front-end and want to go full stack)</li> <li>Can get real world experience as a freelancer while you evolve</li> </ul> </li> <li> Cons <ul> <li>Not for everyone</li> <li>Can be difficult to self-motivate</li> <li>Hard to get help - sometimes you can be stuck for hours on a two-second fix</li> <li>Potentially discouraging</li> <li>You might go down the wrong path without guidance on what you should learn</li> </ul> </li> </ul> 47:11 - Part Time Programs - $ <ul> <li> Pros <ul> <li>Fantastic way to get up to speed with a new tech</li> <li>Goes at a good pace - twice a week usually</li> <li>Offered on weekends and evenings where you can maintain a regular job</li> <li>Very low risk - you can try it out</li> </ul> </li> <li> Cons <ul> <li>Might not be as fast as you like it</li> <li>Quality is all over the map</li> </ul> </li> </ul> 49:55 - Mentored Self Learning - $ <ul> <li> Pros <ul> <li>Best to do with a mentor on the job</li> <li>Mentor can help steer what to learn in your free time</li> <li>Good feedback and a place to ask lots of questions</li> </ul> </li> <li> Cons <ul> <li>Can’t be done without someone willing to mentor you</li> <li>Only as good as your mentor</li> </ul> </li> </ul> 52:55 - What approach would we take? <ul> <li>Bootcamp &gt; then immediately supplement with courses</li> </ul> <a></a>Links <ul> <li><a href="https://www.notion.so/" rel="nofollow" target="_blank">Notion</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://amzn.to/2EJGRhi" rel="nofollow" target="_blank">Digital Minimalism by Cal Newport</a></li> <li>Wes: <a href="https://amzn.to/2tPFPdp" rel="nofollow" target="_blank">American Kingpin</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s React Hooks For Everyone</a></li> <li><a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes’ All Courses</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Bootcamps vs School vs Self-learning

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better! 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. Freshbooks - Sponsor  Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes  6:35 - Our backgrounds in design  12:41 - Foundations   Consistency makes a big difference  Use “training wheel” tools until you are confident  Always work within a system  Less is more - subtle is better   19:39 - Color   Color theory  Complementary colors and shades  Stick to color pallet generators until you are good enough   28:51 - Spacing   More spacing than you think you need  Vertical rhythm  Letter spacing: -1px  Consistent margin and padding   34:47 - Typography   Sans vs serifs  Finding fonts  Use proven combinations until you know your way around   41:49 - Interaction   Design for all states (e.g. standard, visited, active, hover, etc.)  Animations should be quick  Interactions should make sense   45:04 - Concerns beyond visuals   Accessibility via color contrast  Thin fonts and light grey are awful  Think about the poor Windows users   48:47 - Inspiration + Resources   Take inspiration from the best — you’ll find your own voice after enough work  Go easy on trends - blobby characters with purple hair  Take a trip around the world wide web  Stripe  Dribbble  Site Inspire  codrops  Refactoring UI  Links   Designer Starter Pack - Andrea Crofts  LastPass  Colour Lovers   Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google  Bloomberg  Dropbox  FontPair  FontJoy  Figma - Google Font Pairings  Type Scale  Creative Market  Radnika Next  Stripe  Dribbble  Syntax 72: Accessibility  Firefox  Site Inspire  codrops  Refactoring UI  Adam Wathan  Steve Schoger  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Reelgood  Wes: Magnesium  Shameless Plugs   Scott: FullStack React with NextJS - Sign up for the year and save 25%!  Wes: 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 

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better! <a></a>Sanity - Sponsor <a href="http://sanity.io/" rel="nofollow" target="_blank">Sanity.io</a> 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 <a href="https://www.sanity.io/create" rel="nofollow" target="_blank">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href="https://www.sanity.io/syntax" rel="nofollow" target="_blank">sanity.io/syntax</a>. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 6:35 - Our backgrounds in design 12:41 - Foundations <ul> <li> Consistency makes a big difference</li> <li> Use “training wheel” tools until you are confident</li> <li> Always work within a system</li> <li> Less is more - subtle is better</li> </ul> 19:39 - Color <ul> <li> Color theory</li> <li> Complementary colors and shades</li> <li> Stick to color pallet generators until you are good enough</li> </ul> 28:51 - Spacing <ul> <li> More spacing than you think you need</li> <li> Vertical rhythm</li> <li> Letter spacing: -1px</li> <li> Consistent margin and padding</li> </ul> 34:47 - Typography <ul> <li> Sans vs serifs</li> <li> Finding fonts</li> <li> Use proven combinations until you know your way around</li> </ul> 41:49 - Interaction <ul> <li> Design for all states (e.g. standard, visited, active, hover, etc.)</li> <li> Animations should be quick</li> <li> Interactions should make sense</li> </ul> 45:04 - Concerns beyond visuals <ul> <li> Accessibility via color contrast</li> <li> Thin fonts and light grey are awful</li> <li> Think about the poor Windows users</li> </ul> 48:47 - Inspiration + Resources <ul> <li> Take inspiration from the best — you’ll find your own voice after enough work</li> <li> Go easy on trends - blobby characters with purple hair</li> <li> Take a trip around the world wide web</li> <li> <a href="https://stripe.com/" rel="nofollow" target="_blank">Stripe</a></li> <li> <a href="https://dribbble.com/" rel="nofollow" target="_blank">Dribbble</a></li> <li> <a href="https://www.siteinspire.com/" rel="nofollow" target="_blank">Site Inspire</a></li> <li> <a href="https://tympanus.net/codrops/" rel="nofollow" target="_blank">codrops</a></li> <li> <a href="https://refactoringui.com/" rel="nofollow" target="_blank">Refactoring UI</a></li> </ul> <a></a>Links <ul> <li> <a href="https://twitter.com/andreacrofts/status/1172885155352125441/" rel="nofollow" target="_blank">Designer Starter Pack - Andrea Crofts</a></li> <li> <a href="https://www.lastpass.com/" rel="nofollow" target="_blank">LastPass</a></li> <li> <a href="https://www.colourlovers.com/" rel="nofollow" target="_blank">Colour Lovers</a></li> <li> <a href="https://syntax.fm/show/142/travis-neilson-on-skills-gap-design-focus-and-working-at-google/" rel="nofollow" target="_blank"> Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google</a></li> <li> <a href="https://www.bloomberg.com/" rel="nofollow" target="_blank">Bloomberg</a></li> <li> <a href="https://www.dropbox.com/" rel="nofollow" target="_blank">Dropbox</a></li> <li> <a href="https://fontpair.co/" rel="nofollow" target="_blank">FontPair</a></li> <li> <a href="https://fontjoy.com/" rel="nofollow" target="_blank">FontJoy</a></li> <li> <a href="https://www.figma.com/google-fonts/" rel="nofollow" target="_blank">Figma - Google Font Pairings</a></li> <li> <a href="https://type-scale.com/" rel="nofollow" target="_blank">Type Scale</a></li> <li> <a href="https://creativemarket.com/" rel="nofollow" target="_blank">Creative Market</a></li> <li> <a href="https://hanken.co/products/radnika-next/" rel="nofollow" target="_blank">Radnika Next</a></li> <li> <a href="https://stripe.com/" rel="nofollow" target="_blank">Stripe</a></li> <li> <a href="https://dribbble.com/" rel="nofollow" target="_blank">Dribbble</a></li> <li> <a href="https://syntax.fm/show/072/accessibility/" rel="nofollow" target="_blank">Syntax 72: Accessibility</a></li> <li> <a href="https://www.mozilla.org/en-US/firefox/new/" rel="nofollow" target="_blank">Firefox</a></li> <li> <a href="https://www.siteinspire.com/" rel="nofollow" target="_blank">Site Inspire</a></li> <li> <a href="https://tympanus.net/codrops/" rel="nofollow" target="_blank">codrops</a></li> <li> <a href="https://refactoringui.com/" rel="nofollow" target="_blank">Refactoring UI</a></li> <li> <a href="https://adamwathan.me/" rel="nofollow" target="_blank">Adam Wathan</a></li> <li> <a href="https://twitter.com/steveschoger" rel="nofollow" target="_blank">Steve Schoger</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://reelgood.com/" rel="nofollow" target="_blank">Reelgood</a></li> <li> Wes: <a href="https://www.amazon.com/Natures-Bounty-Magnesium-Supplement-Vegetarian/dp/B00H5PJ0HW/" rel="nofollow" target="_blank">Magnesium</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">FullStack React with NextJS</a> - Sign up for the year and save 25%!</li> <li> Wes: <a href="https://beginnerjavascript.com/" rel="nofollow" target="_blank">Beginner Javascript</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Design Foundations For Developers

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more! DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off. Kyle Prinsloo’s Freelancing &amp; Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off. Show Notes 1:40  Where is the best place to start with JS coming from WordPress?  5:36  How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.?  17:13  What new skills, frameworks, projects are you look forward to learning in 2019?  21:35  Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests?  28:24  What’s your best tip for young coders to stay productive and not lose time?  32:08  I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing?  37:26  What is React Native? How do people tend to use it? If you want a native and web app, do they share code?  Links  WordPress Gatsby Javascript30 Dead Man’s Snitch Corntab Syntax106: A Look Forward to 2019 Drip Segment.io Hotjar  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Tiding Up on Netflix Wes 1: Capital Gaines by Chip Gaines  Shameless Plugs  Scott’s Level 1 Styled Components Course Wes’ Courses  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 

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on frameworks for 2019, React Native, when should you start freelancing, where to start with JS, cron jobs, split testing and more! <a></a>DevLifts — Sponsor <a href="https://devlifts.io/" rel="nofollow" target="_blank">DevLifts</a> - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is <a href="https://devlifts.io/join" rel="nofollow" target="_blank">Fit.Start</a> - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is <a href="https://devlifts.io/join" rel="nofollow" target="_blank">DevLifts Premium</a> - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Just for January their eight-week plan is back. Use the coupon code “newyear19” to get $50 off. <a></a>Kyle Prinsloo’s Freelancing &amp; Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at <a href="https://studywebdevelopment.com/freelancing.html" rel="nofollow" target="_blank">https://studywebdevelopment.com/freelancing</a> and use the coupon code “syntax” at checkout to get 25% off. <a></a>Show Notes 1:40 <ul> <li>Where is the best place to start with JS coming from WordPress?</li> </ul> 5:36 <ul> <li>How do you set up cron jobs? What are the best tools to use, should they run on their own server or on the application server, etc.?</li> </ul> 17:13 <ul> <li>What new skills, frameworks, projects are you look forward to learning in 2019?</li> </ul> 21:35 <ul> <li>Do you use any software for tracking analytics on your site and do you ever use this data to run split tests? If so, what is your preferred method for running split tests?</li> </ul> 28:24 <ul> <li>What’s your best tip for young coders to stay productive and not lose time?</li> </ul> 32:08 <ul> <li>I’m 17 and learning web dev. I’m pretty concerned about my skills and feeling some impostor syndrome. Is it ok to start freelancing?</li> </ul> 37:26 <ul> <li>What is React Native? How do people tend to use it? If you want a native and web app, do they share code?</li> </ul> <a></a>Links <ul> <li><a href="https://wordpress.org/" rel="nofollow" target="_blank">WordPress</a></li> <li><a href="https://www.gatsbyjs.org/" rel="nofollow" target="_blank">Gatsby</a></li> <li><a href="https://javascript30.com/" rel="nofollow" target="_blank">Javascript30</a></li> <li><a href="https://deadmanssnitch.com/" rel="nofollow" target="_blank">Dead Man’s Snitch</a></li> <li><a href="http://corntab.com/" rel="nofollow" target="_blank">Corntab</a></li> <li><a href="https://syntax.fm/show/106/a-look-forward-to-2019" rel="nofollow" target="_blank">Syntax106: A Look Forward to 2019</a></li> <li><a href="https://www.drip.com/" rel="nofollow" target="_blank">Drip</a></li> <li><a href="https://segment.com/" rel="nofollow" target="_blank">Segment.io</a></li> <li><a href="https://www.hotjar.com/" rel="nofollow" target="_blank">Hotjar</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://www.netflix.com/title/80209379" rel="nofollow" target="_blank">Tiding Up on Netflix</a></li> <li>Wes 1: <a href="https://www.amazon.com/Capital-Gaines-Things-Learned-Stupid/dp/0785216308" rel="nofollow" target="_blank">Capital Gaines by Chip Gaines</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s Level 1 Styled Components Course</a></li> <li><a href="https://www.wesbos.com/courses" rel="nofollow" target="_blank">Wes’ Courses</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More

In this episode of Syntax, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer. Netlify - Sponsor  Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Prismic - Sponsor  Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at Prismic.io/syntax. Show Notes  2:43 - Gather info   What is this thing trying to do?  Use tools  DevTools are your best friend during this phase   8:01 - Know where to look (and use tools)   Dev tools for client side  Error logs  Sentry  LogRocket  The most experienced people in any field know how to ask the right questions.  Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve.   10:00 - Look at the end game   What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture.   13:17 - Read Again   Error logs provide the best clues. Read them closely.  Actually read your code — don’t skim it.  Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts.   18:08 - Make it simple (break it into smaller parts)   Limit the number of inputs and outputs  Get it working in a limited capacity (e.g. safe mode, Codepen, etc.)  Comment out major sections of code until you have a working example  Does this problem exist outside of the framework?  Does this work in a clean environment?   25:35 - Take yourself out of your environment   You should be able to take a look at the problem at all zoom levels  Does it work locally but not on the server?  Does it work in other browsers?   27:32 - Stay calm   It’s easy to get nervous or worked up when the stakes are high  It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath  Take a shower, lift weights (seriously)   30:14 - Talk it over   Getting the perspective of another developer can be invaluable   32:28 - Make things obvious   Use debugger or label logs — don’t let it be ambiguous  For CSS bugs, use primary colors to make things stand out  Use the right tool to make the problem stand out   Layers for CSS issues  Network for network issues  Performance tab (etc.)     35:12 - Use Git correctly to free up your techniques   If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix.   36:10 - Don’t jump at solutions   Take the time to fully dissect the problem  Question you assumptions  It can’t possibly be a problem with ____. Well maybe it is.   Wes once spent hours trying to diagnose a check engine light when the gas cap was lose.     43:51 - Get good at pattern matching   This comes with experience  When did this problem start?  Did we deploy any code? Did we change any logic?   44:54 - Get good at googling   Being able to describe your problem is key.  Search the error from Firefox  Links   DevTools  Sentry LogRocket CodePen Syntax 154: SVGs with Sara Soueidan @walpolea Syntax 152: Debugging Tools + Tips @bowlendev @dan_abramov Ryan Dahl on creating Node.js @LaurieonTech Firefox DuckDuckGo  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Jeremy Ethier Youtube Channel Wes: Marpac Rohm Sound Machine  Shameless Plugs  Scott: Typescript in React Course - Sign up for the year and save 25%! Wes: Beginner Javascript Course  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, Scott and Wes talk about how to get better at problem solving — one of the most important skills to build as a developer. <a></a>Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href="https://netlify.com/syntax" rel="nofollow" target="_blank">netlify.com/syntax</a> for more info. <a></a>Prismic - Sponsor Prismic is a Headless CMS for your next front end project. Create complex content type, relate data, and have your clients edit it all with the Prismic UI. Then pull the data into your project with their JSON or GraphQL API. Try it out with your next project - Gatsby, React + Apollo, or any other language. Check out their examples to get you started at <a href="https://prismic.io/syntax" rel="nofollow" target="_blank">Prismic.io/syntax</a>. <a></a>Show Notes 2:43 - Gather info <ul> <li> What is this thing trying to do?</li> <li> Use tools</li> <li> DevTools are your best friend during this phase</li> </ul> 8:01 - Know where to look (and use tools) <ul> <li> Dev tools for client side</li> <li> Error logs</li> <li> <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a></li> <li> <a href="https://logrocket.com/syntax" rel="nofollow" target="_blank">LogRocket</a></li> <li> The most experienced people in any field know how to ask the right questions.</li> <li> Some of this will come with experience and nothing else. If you’ve seen a problem before, it’s easier to solve.</li> </ul> 10:00 - Look at the end game <ul> <li> What are you really trying to do here? Don’t focus so much on the tech that you miss the bigger picture.</li> </ul> 13:17 - Read Again <ul> <li> Error logs provide the best clues. Read them closely.</li> <li> Actually read your code — don’t skim it.</li> <li> Write comments while reading it, or follow existing comments — good for documenting, but also for structuring your thoughts.</li> </ul> 18:08 - Make it simple (break it into smaller parts) <ul> <li> Limit the number of inputs and outputs</li> <li> Get it working in a limited capacity (e.g. safe mode, Codepen, etc.)</li> <li> Comment out major sections of code until you have a working example</li> <li> Does this problem exist outside of the framework?</li> <li> Does this work in a clean environment?</li> </ul> 25:35 - Take yourself out of your environment <ul> <li> You should be able to take a look at the problem at all zoom levels</li> <li> Does it work locally but not on the server?</li> <li> Does it work in other browsers?</li> </ul> 27:32 - Stay calm <ul> <li> It’s easy to get nervous or worked up when the stakes are high</li> <li> It won’t serve you to panic. If you are panicking, take a 10 min walk to deep breath</li> <li> Take a shower, lift weights (seriously)</li> </ul> 30:14 - Talk it over <ul> <li> Getting the perspective of another developer can be invaluable</li> </ul> 32:28 - Make things obvious <ul> <li> Use debugger or label logs — don’t let it be ambiguous</li> <li> For CSS bugs, use primary colors to make things stand out</li> <li> Use the right tool to make the problem stand out <ul> <li> Layers for CSS issues</li> <li> Network for network issues</li> <li> Performance tab (etc.)</li> </ul> </li> </ul> 35:12 - Use Git correctly to free up your techniques <ul> <li> If you’re code commits are up to date, you can heavily modify code without fear of deleting things — just revert to a previous commit once you find the issue and fix.</li> </ul> 36:10 - Don’t jump at solutions <ul> <li> Take the time to fully dissect the problem</li> <li> Question you assumptions</li> <li> It can’t possibly be a problem with ____. Well maybe it is. <ul> <li> Wes once spent hours trying to diagnose a check engine light when the gas cap was lose.</li> </ul> </li> </ul> 43:51 - Get good at pattern matching <ul> <li> This comes with experience</li> <li> When did this problem start?</li> <li> Did we deploy any code? Did we change any logic?</li> </ul> 44:54 - Get good at googling <ul> <li> Being able to describe your problem is key.</li> <li> Search the error from Firefox</li> </ul> <a></a>Links <ul> <li> <a href="https://developers.google.com/web/tools/chrome-devtools" rel="nofollow" target="_blank">DevTools</a></li> <li> <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a></li> <li><a href="https://logrocket.com/syntax" rel="nofollow" target="_blank">LogRocket</a></li> <li><a href="https://codepen.io/" rel="nofollow" target="_blank">CodePen</a></li> <li><a href="https://syntax.fm/show/154/svgs-with-sara-soueidan" rel="nofollow" target="_blank">Syntax 154: SVGs with Sara Soueidan</a></li> <li><a href="https://twitter.com/walpolea" rel="nofollow" target="_blank">@walpolea</a></li> <li><a href="https://syntax.fm/show/152/debugging-tools-tips" rel="nofollow" target="_blank">Syntax 152: Debugging Tools + Tips</a></li> <li><a href="https://twitter.com/bowlendev" rel="nofollow" target="_blank">@bowlendev</a></li> <li><a href="https://twitter.com/dan_abramov" rel="nofollow" target="_blank">@dan_abramov</a></li> <li><a href="https://youtu.be/EeYvFl7li9E" rel="nofollow" target="_blank">Ryan Dahl on creating Node.js</a></li> <li><a href="https://twitter.com/LaurieonTech" rel="nofollow" target="_blank">@LaurieonTech</a></li> <li><a href="https://www.mozilla.org/" rel="nofollow" target="_blank">Firefox</a></li> <li><a href="https://duckduckgo.com/" rel="nofollow" target="_blank">DuckDuckGo</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://www.youtube.com/channel/UCERm5yFZ1SptUEU4wZ2vJvw" rel="nofollow" target="_blank">Jeremy Ethier Youtube Channel</a></li> <li>Wes: <a href="https://amzn.to/2Ncp1rw" rel="nofollow" target="_blank">Marpac Rohm Sound Machine</a></li> </ul> <a></a>Shameless Plugs <ul> <li>Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Typescript in React Course</a> - Sign up for the year and save 25%!</li> <li>Wes: <a href="https://beginnerjavascript.com/" rel="nofollow" target="_blank">Beginner Javascript Course</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

How To Get Better At Problem Solving

In this episode Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more! Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. CSS In Depth and In Motion - Sponsor CSS in Depth in Motion from Manning Publications is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout. Show Notes 4:15  When to use position fixed/static/absolute/relative/sticky  15:18  When to use height, width, max-height, max-width, top, bottom, left, right, etc.  21:28  What about relationships between containers and their children?  27:37  What about positioning behaviors of elements like , , , etc.?  30:09  Floating and clearing  35:55  Flexbox, Grid and responsive design  36:58  Mobile-first or desktop-first?  41:20  Viewport units - vw, vh, vmin, vmax, etc  Links  Keycode.info  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Last Seen Podcast Wes: Flying a DJI Tello Drone with React and Node.js  Shameless Plugs  Scott’s Design Systems Course Wes’ Courses  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 Wes and Scott are talking all about CSS layout - how it works, things to watch out for and more! <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry.io</a> and using the coupon code “tastytreat”. <a></a>CSS In Depth and In Motion - Sponsor <a href="https://deals.manning.com/webdev" rel="nofollow" target="_blank">CSS in Depth in Motion from Manning Publications</a> is a great way to master CSS. Modern CSS can handle a dizzying array of styles and effects without external frameworks, and this liveVideo course from Manning Publications will get you there. As a Syntax listener, you can get 40% off all their books and courses by visiting <a href="https://deals.manning.com/webdev" rel="nofollow" target="_blank">deals.manning.com/webdev</a> and using the coupon code syntax40 at checkout. <a></a>Show Notes 4:15 <ul> <li>When to use position fixed/static/absolute/relative/sticky</li> </ul> 15:18 <ul> <li>When to use height, width, max-height, max-width, top, bottom, left, right, etc.</li> </ul> 21:28 <ul> <li>What about relationships between containers and their children?</li> </ul> 27:37 <ul> <li>What about positioning behaviors of elements like , , , etc.?</li> </ul> 30:09 <ul> <li>Floating and clearing</li> </ul> 35:55 <ul> <li>Flexbox, Grid and responsive design</li> </ul> 36:58 <ul> <li>Mobile-first or desktop-first?</li> </ul> 41:20 <ul> <li>Viewport units - vw, vh, vmin, vmax, etc</li> </ul> <a></a>Links <ul> <li><a href="http://keycode.info/" rel="nofollow" target="_blank">Keycode.info</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://www.wbur.org/lastseen" rel="nofollow" target="_blank">Last Seen Podcast</a></li> <li>Wes: <a href="https://wesbos.com/drone-javascript/" rel="nofollow" target="_blank">Flying a DJI Tello Drone with React and Node.js</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s Design Systems Course</a></li> <li><a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes’ Courses</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

CSS Layout

In this episode of Syntax, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor  Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes  2:53 - Requests and responses  9:21 - What is a server?  10:33 - Ports  13:50 - Database connection and interaction  15:16 - Cookies and sessions  15:48 - Writing files and directory permissions  19:34 - Headers  22:13 - Error Handling  22:50 - Logs  25:04 - Async data handling  26:33 - Routing  30:44 - Mime types  36:26 - Authentication  37:49 - Environmental variables  40:37 - Deployment  43:24 - Advanced Links   GraphQL  Node  React For Beginners  Next.js  Meteor  Papertrail  pjax  jQuery  Github  iMazing HEIC Converter  Now.sh  Netlify   Twitter streaming API  B is for Build  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Samcrac YouTube Channel  Wes: Wyze Plugs  Shameless Plugs   Scott: Svelte For Beginners - Sign up for the year and save 25%!  Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about server side fundamentals — the important things you should know if you’re interested in diving into server side. <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry.io</a> and using the coupon code “tastytreat”. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 2:53 - Requests and responses 9:21 - What is a server? 10:33 - Ports 13:50 - Database connection and interaction 15:16 - Cookies and sessions 15:48 - Writing files and directory permissions 19:34 - Headers 22:13 - Error Handling 22:50 - Logs 25:04 - Async data handling 26:33 - Routing 30:44 - Mime types 36:26 - Authentication 37:49 - Environmental variables 40:37 - Deployment 43:24 - Advanced <a></a>Links <ul> <li> <a href="https://graphql.org/" rel="nofollow" target="_blank">GraphQL</a></li> <li> <a href="https://nodejs.org/" rel="nofollow" target="_blank">Node</a></li> <li> <a href="https://reactforbeginners.com/" rel="nofollow" target="_blank">React For Beginners</a></li> <li> <a href="https://nextjs.org/" rel="nofollow" target="_blank">Next.js</a></li> <li> <a href="https://www.meteor.com/" rel="nofollow" target="_blank">Meteor</a></li> <li> <a href="https://papertrailapp.com/" rel="nofollow" target="_blank">Papertrail</a></li> <li> <a href="https://pjax.herokuapp.com/" rel="nofollow" target="_blank">pjax</a></li> <li> <a href="https://jquery.com/" rel="nofollow" target="_blank">jQuery</a></li> <li> <a href="https://github.com/" rel="nofollow" target="_blank">Github</a></li> <li> <a href="https://imazing.com/heic" rel="nofollow" target="_blank">iMazing HEIC Converter</a></li> <li> <a href="https://zeit.co/home" rel="nofollow" target="_blank">Now.sh</a></li> <li> <a href="https://www.netlify.com/" rel="nofollow" target="_blank">Netlify</a></li> <li> <a href="https://developer.twitter.com/en/docs/tutorials/consuming-streaming-data" rel="nofollow" target="_blank"> Twitter streaming API</a></li> <li> <a href="https://www.youtube.com/channel/UCl4-WBRqWA2MlxmZorKOV7w" rel="nofollow" target="_blank">B is for Build</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://www.youtube.com/channel/UCtn2hU9HKYQAgDtwrhux7Sw" rel="nofollow" target="_blank">Samcrac YouTube Channel</a></li> <li> Wes: <a href="https://amzn.to/2o2iXZ9" rel="nofollow" target="_blank">Wyze Plugs</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Svelte For Beginners</a> - Sign up for the year and save 25%!</li> <li> Wes: <a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

The Fundamentals - Server Side

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more! 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 and put SYNTAX in the “How did you hear about us?” section. Show Notes  3:38 - What is state?  4:58 - What kind of things are kept in state?   Data   Temporary client side data   From forms, button clicks, etc.    Cached server data  Data from API    UI status   AKA isModalOpen  isToggled     12:48 - Global state vs. Local state   Ask yourself: does the data need to be accessed outside this component?   If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.    Do you count Apollo API calls as global state?   21:15 - Managing Local state   useState, setState  Passing state &amp; update functions down  State machines   31:12 - Approaches to Global state    Redux   Complicated, hard to learn  Very useful, organized and structured  Actions, reducers and more  Time traveling do to nature of store  Immutability  Tons of Redux based hooks libs     Mobx   Based on Observables   An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.       Context   Functions just work and update global state.  Downside is there are no fancy tools     Apollo   Apollo quires for data in global cache  Apollo client for global UI state   Not quite there, isn’t super elegant      Links   Thinkso  Learn Node!  Meteor Session   xstate-react  React Context  Mobx  easy-peasy  hype.codes   providerCompose.js  Relay  React Podcast  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Command Line Heroes  Wes: MASSDROP CTRL MECHANICAL KEYBOARD  Shameless Plugs   Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up!  Wes: All Courses — Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more! <a></a>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 <a href="https://logrocket.com/syntax" rel="nofollow" target="_blank">logrocket.com/syntax</a>. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 3:38 - What is state? 4:58 - What kind of things are kept in state? <ul> <li> Data <ul> <li> Temporary client side data <ul> <li> From forms, button clicks, etc.</li> </ul> </li> <li> Cached server data</li> <li> Data from API</li> </ul> </li> <li> UI status <ul> <li> AKA isModalOpen</li> <li> isToggled</li> </ul> </li> </ul> 12:48 - Global state vs. Local state <ul> <li> Ask yourself: does the data need to be accessed outside this component? <ul> <li> If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.</li> </ul> </li> <li> Do you count Apollo API calls as global state?</li> </ul> 21:15 - Managing Local state <ul> <li> useState, setState</li> <li> Passing state &amp; update functions down</li> <li> State machines</li> </ul> 31:12 - Approaches to Global state <ul> <li> Redux <ul> <li> Complicated, hard to learn</li> <li> Very useful, organized and structured</li> <li> Actions, reducers and more</li> <li> Time traveling do to nature of store</li> <li> Immutability</li> <li> Tons of Redux based hooks libs</li> </ul> </li> <li> Mobx <ul> <li> Based on Observables <ul> <li> An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.</li> </ul> </li> </ul> </li> <li> Context <ul> <li> Functions just work and update global state.</li> <li> Downside is there are no fancy tools</li> </ul> </li> <li> Apollo <ul> <li> Apollo quires for data in global cache</li> <li> Apollo client for global UI state <ul> <li> Not quite there, isn’t super elegant</li> </ul> </li> </ul> </li> </ul> <a></a>Links <ul> <li> <a href="https://thinkso.com/" rel="nofollow" target="_blank">Thinkso</a></li> <li> <a href="https://wesbos.com/learn-node/" rel="nofollow" target="_blank">Learn Node!</a></li> <li> <a href="https://docs.meteor.com/api/session.html" rel="nofollow" target="_blank">Meteor Session</a></li> <li> <a href="https://github.com/davidkpiano/xstate/tree/master/packages/xstate-react#readme" rel="nofollow" target="_blank"> xstate-react</a></li> <li> <a href="https://reactjs.org/docs/context.html" rel="nofollow" target="_blank">React Context</a></li> <li> <a href="https://mobx.js.org/" rel="nofollow" target="_blank">Mobx</a></li> <li> <a href="https://github.com/ctrlplusb/easy-peasy" rel="nofollow" target="_blank">easy-peasy</a></li> <li> <a href="https://hype.codes/" rel="nofollow" target="_blank">hype.codes</a></li> <li> <a href="https://gist.github.com/stolinski/2d9545e19dd67bda64143cb1aae04ac0" rel="nofollow" target="_blank"> providerCompose.js</a></li> <li> <a href="https://relay.dev/" rel="nofollow" target="_blank">Relay</a></li> <li> <a href="https://reactpodcast.simplecast.fm/" rel="nofollow" target="_blank">React Podcast</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://www.redhat.com/en/command-line-heroes" rel="nofollow" target="_blank">Command Line Heroes</a></li> <li> Wes: <a href="https://drop.com/buy/massdrop-ctrl-mechanical-keyboard" rel="nofollow" target="_blank">MASSDROP CTRL MECHANICAL KEYBOARD</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">LevelUpTutorials - Gatsby Ecommerce</a> — Subscribe before price goes up!</li> <li> Wes: <a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">All Courses</a> — Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

State In React

Scott and Wes talk about how they learn new things quickly. Scott also tells a crazy story about his weekend. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. They are also hiring! netlify.com/careers Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 2:00  Scott recounts his crazy story about getting Lymphangitis  8:30  Know your learning type videos, blogs, docs, source no right or wrong way  15:00  Foundational Skills  23:00  Narrow your focus Should you learn Redux with React? blurring skills hurts future progress don't learn too many things at once  26:00  Get excited try to reclaim your initial excitement flow happens when you are excited pick projects around hobbies Star wars sucks  33:00  Grind Time write code first ask questions later break shit Submit to yourself that you are going to build this 3-4 times iteration driven development quality from quantity use smarter people snippet libs style guides  40:00  Immersion follow every kind of media you can put things on in the background permeate into your brain  ××× SIIIIICK ××× PIIIICKS ×××  Wes: Crushing It Book Wes: Crushing It AudioBook Scott: Popmotion Pose  Shameless Plugs  Wes' JavaScript30 Course Scott's Headless WordPress course  1:00:00  Scott comes out of nowhere with a story about TEA!  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 

Scott and Wes talk about how they learn new things quickly. Scott also tells a crazy story about his weekend. Netlify — Sponsor <a href="https://netlify.com/syntax" rel="noopener nofollow" target="_blank">Netlify</a> is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href="https://netlify.com/syntax" rel="noopener nofollow" target="_blank">netlify.com/syntax</a> for more info. They are also hiring! <a href="https://netlify.com/careers" rel="noopener nofollow" target="_blank">netlify.com/careers</a> Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. <a href="https://conferences.oreilly.com/fluent/fl-ca" rel="noopener nofollow" target="_blank">Fluent</a> covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. <a href="https://conferences.oreilly.com/fluent/fl-ca" rel="noopener nofollow" target="_blank">Fluent</a> is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 2:00 <ul> <li>Scott recounts his crazy story about getting Lymphangitis</li> </ul> 8:30 <ul> <li>Know your learning type</li> <li>videos, blogs, docs, source</li> <li>no right or wrong way</li> </ul> 15:00 <ul> <li>Foundational Skills</li> </ul> 23:00 <ul> <li>Narrow your focus</li> <li>Should you learn Redux with React?</li> <li>blurring skills hurts future progress</li> <li>don't learn too many things at once</li> </ul> 26:00 <ul> <li>Get excited</li> <li>try to reclaim your initial excitement</li> <li>flow happens when you are excited</li> <li>pick projects around hobbies</li> <li>Star wars sucks</li> </ul> 33:00 <ul> <li>Grind Time</li> <li>write code first ask questions later</li> <li>break shit</li> <li>Submit to yourself that you are going to build this 3-4 times</li> <li>iteration driven development</li> <li>quality from quantity</li> <li>use smarter people</li> <li>snippet libs</li> <li>style guides</li> </ul> 40:00 <ul> <li>Immersion</li> <li>follow every kind of media you can</li> <li>put things on in the background</li> <li>permeate into your brain</li> </ul> ××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Wes:<a href="https://amzn.to/2FC4PIv" rel="noopener nofollow" target="_blank"> Crushing It Book</a></li> <li>Wes:<a href="https://amzn.to/2JL8ZQQ" rel="noopener nofollow" target="_blank"> Crushing It AudioBook</a></li> <li>Scott: <a href="https://popmotion.io/pose/" rel="noopener nofollow" target="_blank">Popmotion Pose</a></li> </ul> Shameless Plugs <ul> <li><a href="https://javascript30.com/" rel="noopener nofollow" target="_blank">Wes' JavaScript30 Course</a></li> <li><a href="https://leveluptutorials.com/store" rel="noopener nofollow" target="_blank">Scott's Headless WordPress course</a></li> </ul> 1:00:00 <ul> <li>Scott comes out of nowhere with a story about TEA!</li> </ul> Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="noopener nofollow" target="_blank">Scott's Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="noopener nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="noopener nofollow" target="_blank">Wes' Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="noopener nofollow" target="_blank">Wes' Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="noopener nofollow" target="_blank">Wes' Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="noopener nofollow" target="_blank">Scott's Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="noopener nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

How to Learn New Things Quickly

In this episode Wes and Scott discuss their favorite top 18 new things in Javascript. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Show Notes 6:02  Const / Let  10:00  Template literals / Template strings  Toggle Quotes Extension Prettier  14:29  Object destructuring  21:28  Array destructuring  27:25  Function Param destructuring  30:14  Promises Wes’ Async + Await Talk  36:24  Async + Await Syntax Ep 028 - Async + Await  40:59  Object Computed Property Name  43:42  Object Method Syntax  Links  Denver Startup Week  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Red Bull VC One World Final 2018 Wes: Jura Impressa  Shameless Plugs  Scott’s Better Javascript Course Wes 1: CSS Grid in 45 Minutes Wes 2: Async + Await Talk  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 Wes and Scott discuss their favorite top 18 new things in Javascript. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → <a href="https://mlab.com/" rel="nofollow" target="_blank">https://mlab.com</a>. <a></a>Show Notes 6:02 <ul> <li>Const / Let</li> </ul> 10:00 <ul> <li>Template literals / Template strings</li> <li><a href="https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes" rel="nofollow" target="_blank"> Toggle Quotes Extension</a></li> <li><a href="https://prettier.io/" rel="nofollow" target="_blank">Prettier</a></li> </ul> 14:29 <ul> <li>Object destructuring</li> </ul> 21:28 <ul> <li>Array destructuring</li> </ul> 27:25 <ul> <li>Function Param destructuring</li> </ul> 30:14 <ul> <li>Promises</li> <li><a href="https://youtu.be/9YkUCxvaLEk?t=469s" rel="nofollow" target="_blank">Wes’ Async + Await Talk</a></li> </ul> 36:24 <ul> <li>Async + Await</li> <li><a href="https://syntax.fm/show/028/async-await" rel="nofollow" target="_blank">Syntax Ep 028 - Async + Await</a></li> </ul> 40:59 <ul> <li>Object Computed Property Name</li> </ul> 43:42 <ul> <li>Object Method Syntax</li> </ul> <a></a>Links <ul> <li><a href="https://www.denverstartupweek.org/" rel="nofollow" target="_blank">Denver Startup Week</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://www.youtube.com/watch?v=N3jwdh-6Bi0" rel="nofollow" target="_blank">Red Bull VC One World Final 2018</a></li> <li>Wes: <a href="https://us.jura.com/en" rel="nofollow" target="_blank">Jura Impressa</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="https://leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott’s Better Javascript Course</a></li> <li><a href="https://youtu.be/DCZdCKjnBCs?t=1179s" rel="nofollow" target="_blank">Wes 1: CSS Grid in 45 Minutes</a></li> <li><a href="https://youtu.be/9YkUCxvaLEk?t=469s" rel="nofollow" target="_blank">Wes 2: Async + Await Talk</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Top 18 New Things in JS - Part 1

In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the State of Javascript - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:48  What is the State of JS survey  3:58  The tech behind State of JS  12:55  How was the data collected?  16:38  JavaScript Flavors  23:14  Frameworks  31:49  DataLayer  34:53  Backend  40:09  Other Tools  44:37  Opinions  47:48  Awards  49:58  Criticism  Links  Nivo Gatsby Netlify Reason Parcel Relay Express KeystoneJS Ghost Jest GraphQL VueX Storybook Real Analysis of Angular, React, and Vue  ××× SIIIIICK ××× PIIIICKS ×××  Sacha: DIY and woodworking Wes: Alex French Guy Cooking Scott: Silverback Open 2018  Shameless Plugs  Sacha - Vulcan.js Scott - Level Up Pro Wes - All courses  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 Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the <a href="https://stateofjs.com/" rel="nofollow" target="_blank">State of Javascript</a> - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry. <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry.io</a> and using the coupon code “tastytreat”. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 1:48 <ul> <li>What is the State of JS survey</li> </ul> 3:58 <ul> <li>The tech behind State of JS</li> </ul> 12:55 <ul> <li>How was the data collected?</li> </ul> 16:38 <ul> <li>JavaScript Flavors</li> </ul> 23:14 <ul> <li>Frameworks</li> </ul> 31:49 <ul> <li>DataLayer</li> </ul> 34:53 <ul> <li>Backend</li> </ul> 40:09 <ul> <li>Other Tools</li> </ul> 44:37 <ul> <li>Opinions</li> </ul> 47:48 <ul> <li>Awards</li> </ul> 49:58 <ul> <li>Criticism</li> </ul> <a></a>Links <ul> <li><a href="https://nivo.rocks/" rel="nofollow" target="_blank">Nivo</a></li> <li><a href="https://www.gatsbyjs.org/" rel="nofollow" target="_blank">Gatsby</a></li> <li><a href="https://www.netlify.com/" rel="nofollow" target="_blank">Netlify</a></li> <li><a href="https://reasonml.github.io/" rel="nofollow" target="_blank">Reason</a></li> <li><a href="https://en.parceljs.org/" rel="nofollow" target="_blank">Parcel</a></li> <li><a href="https://facebook.github.io/relay/" rel="nofollow" target="_blank">Relay</a></li> <li><a href="https://expressjs.com/" rel="nofollow" target="_blank">Express</a></li> <li><a href="https://keystonejs.com/" rel="nofollow" target="_blank">KeystoneJS</a></li> <li><a href="https://ghost.org/" rel="nofollow" target="_blank">Ghost</a></li> <li><a href="https://jestjs.io/" rel="nofollow" target="_blank">Jest</a></li> <li><a href="https://graphql.org/" rel="nofollow" target="_blank">GraphQL</a></li> <li><a href="https://vuex.vuejs.org/" rel="nofollow" target="_blank">VueX</a></li> <li><a href="https://storybook.js.org/" rel="nofollow" target="_blank">Storybook</a></li> <li><a href="https://youtu.be/UnEPBQvkNrg" rel="nofollow" target="_blank">Real Analysis of Angular, React, and Vue</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Sacha: DIY and woodworking</li> <li>Wes: <a href="https://www.youtube.com/user/FrenchGuyCooking" rel="nofollow" target="_blank">Alex French Guy Cooking</a></li> <li>Scott: <a href="https://www.youtube.com/playlist?list=PLipSUxfAla6D257xn14FgxHaFUyKDMY14" rel="nofollow" target="_blank">Silverback Open 2018</a></li> </ul> <a></a>Shameless Plugs <ul> <li><a href="http://vulcanjs.org/" rel="nofollow" target="_blank">Sacha - Vulcan.js</a></li> <li><a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Scott - Level Up Pro</a></li> <li><a href="https://wesbos.com/courses" rel="nofollow" target="_blank">Wes - All courses</a></li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

The State of JavaScript 2018

In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more! 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes  1:26 - Hooks vs Render Props   Hooks win hands down  useState  useReducer  useRef  useContext  useEffect  Custom hooks to hide and encapsulate functionality   35:06 - How we use them    Scott   Index that imports all custom hooks  Babel alias to hooks folder  Import { useHook } from ‘hooks’  useContextState     Wes   useResizeObserver  useForm  useGridRower  useWickedFavIcon     45:54 - Which built-in hooks do we not use?   useImperativeHandle  useCallback  useDebugValue   48:22 - Are hooks harder to learn?   Wes: Yes — but easier to maintain after the fact  Scott: Yes — harder conceptually and initially but easier after concepts are understood   50:29 - Are classes going away?   Wes: I say yes  Scott: Double yes  Links   Syntax Ep 092: React Hooks   Making setInterval Declarative with React Hooks - Dan Abramov  babel-plugin-module-resolver   awesome-uses  uses.tech  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Ars Technica War Stories  Wes: Mpow CH1 Kids Headphones  Shameless Plugs   Scott: All Courses - Sign up for the year and save 25%!  Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, and more! <a></a>Sanity - Sponsor <a href="http://sanity.io/" rel="nofollow" target="_blank">Sanity.io</a> 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 <a href="https://www.sanity.io/create" rel="nofollow" target="_blank">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href="https://www.sanity.io/syntax" rel="nofollow" target="_blank">sanity.io/syntax</a>. <a></a>Sentry - Sponsor If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href="https://sentry.io/" rel="nofollow" target="_blank">Sentry.io</a> and using the coupon code “tastytreat”. <a></a>Show Notes 1:26 - Hooks vs Render Props <ul> <li> Hooks win hands down</li> <li> useState</li> <li> useReducer</li> <li> useRef</li> <li> useContext</li> <li> useEffect</li> <li> Custom hooks to hide and encapsulate functionality</li> </ul> 35:06 - How we use them <ul> <li> Scott <ul> <li> Index that imports all custom hooks</li> <li> Babel alias to hooks folder</li> <li> Import { useHook } from ‘hooks’</li> <li> useContextState</li> </ul> </li> <li> Wes <ul> <li> useResizeObserver</li> <li> useForm</li> <li> useGridRower</li> <li> useWickedFavIcon</li> </ul> </li> </ul> 45:54 - Which built-in hooks do we not use? <ul> <li> useImperativeHandle</li> <li> useCallback</li> <li> useDebugValue</li> </ul> 48:22 - Are hooks harder to learn? <ul> <li> Wes: Yes — but easier to maintain after the fact</li> <li> Scott: Yes — harder conceptually and initially but easier after concepts are understood</li> </ul> 50:29 - Are classes going away? <ul> <li> Wes: I say yes</li> <li> Scott: Double yes</li> </ul> <a></a>Links <ul> <li> <a href="https://syntax.fm/show/092/react-hooks" rel="nofollow" target="_blank">Syntax Ep 092: React Hooks</a></li> <li> <a href="https://overreacted.io/making-setinterval-declarative-with-react-hooks/" rel="nofollow" target="_blank"> Making setInterval Declarative with React Hooks - Dan Abramov</a></li> <li> <a href="https://github.com/tleunen/babel-plugin-module-resolver" rel="nofollow" target="_blank">babel-plugin-module-resolver</a></li> <li> <a href="https://github.com/wesbos/awesome-uses/blob/master/src/components/FavIcon.js" rel="nofollow" target="_blank"> awesome-uses</a></li> <li> <a href="https://uses.tech/" rel="nofollow" target="_blank">uses.tech</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://www.youtube.com/playlist?list=PLKBPwuu3eCYkScmqpD9xE7UZsszweVO0n" rel="nofollow" target="_blank">Ars Technica War Stories</a></li> <li> Wes: <a href="https://www.amazon.com/Mpow-Headphones-Protection-Function-Tangle-Free/dp/B078YQW26K/" rel="nofollow" target="_blank">Mpow CH1 Kids Headphones</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">All Courses</a> - Sign up for the year and save 25%!</li> <li> Wes: <a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li> <a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li> <a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li> <a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li> <a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li> <a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li> <a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li> Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

React Hooks - 1 Year Later

In this episode of Syntax, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year! 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  6:39 - CSS Subgrid  8:10 - CSS Houdini  11:20 - CSS features not supported in older browsers yet   Scrollsnap - IE 11 and up. Lot’s of mobile issues.  position:sticky - no IE at all   14:24 - NPM tink   installer-less npm  Load packages at runtime into a shared cache across all projects  Intelligently download the parts you need   17:25 - Yarn PnP   Hard links to eliminate package duplication  Shared cache across all projects   18:31 - Pika &amp; Snowpack  21:10 - Deno   New Node?   25:39 - React   Suspense in more libraries  Suspense for Server Rendering  Meteor   New ownership. v1.9 just dropped with lots of promise for future growth    Svelte 3  Vue 3  Apollo  Next.js   36:37 - Serverless   Going to get easier  Begin.com  Next.js / Now Functions   38:14 - Gatsby  A single useQuery (made possible by suspense)   39:36 - Headless CMS Thunderdome  42:20 - Next Gen Frameworks   Keystone  Strapi  Meteor  Vulcan.js   43:46 - Cypress   End to end testing  Currently no Firefox support, but hopeful for 2020   44:21 - Modulz   Exports to JS component   45:00 - Figma   Was already amazing in 2019  Constantly improving and adding new features  Can import from Sketch  Links    Syntax 109: CSS Grid Level 2 aka Subgrid  CSS Houdini  Interactive Introduction to CSS Houdini  Tweetdeck   Next Generation Package Management  tink  Pika  Yarn PnP  Syntax 212: Pika Pkg  Snowpack  Entropic Deno Ryan Dahl - 10 Things I regret About Node.js https://github.com/denoland/deno Cloudflare Hover Meteor Meteor roadmap tiny Svelte 3 Apollo Nextjs Vue Begin  Firefox Keystone Strapi Vulcan.js Prisma Hasura  Syntax 209: Hasty Treat - Wes Teaches Scott about Keystone.js Cypress Modulz Framer Figma Sketch James Quick YouTube Channel  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Govee Thermometer Wes: Rack Mount Power Bar  Shameless Plugs  Scott: Fullstack React and Firebase - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about tech to watch in 2020 — things you should keep an eye on and learn this year! <a></a>Sanity - Sponsor <a href="http://sanity.io/" rel="nofollow" target="_blank">Sanity.io</a> 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 <a href="https://www.sanity.io/create" rel="nofollow" target="_blank">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href="https://www.sanity.io/syntax" rel="nofollow" target="_blank">sanity.io/syntax</a>. <a></a>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 <a href="https://logrocket.com/syntax" rel="nofollow" target="_blank">logrocket.com/syntax</a>. <a></a>Show Notes 6:39 - CSS Subgrid 8:10 - CSS Houdini 11:20 - CSS features not supported in older browsers yet <ul> <li> Scrollsnap - IE 11 and up. Lot’s of mobile issues.</li> <li> position:sticky - no IE at all</li> </ul> 14:24 - NPM tink <ul> <li> installer-less npm</li> <li> Load packages at runtime into a shared cache across all projects</li> <li> Intelligently download the parts you need</li> </ul> 17:25 - Yarn PnP <ul> <li> Hard links to eliminate package duplication</li> <li> Shared cache across all projects</li> </ul> 18:31 - Pika &amp; Snowpack 21:10 - Deno <ul> <li> New Node?</li> </ul> 25:39 - React <ul> <li> Suspense in more libraries</li> <li> Suspense for Server Rendering</li> <li> Meteor <ul> <li> New ownership. v1.9 just dropped with lots of promise for future growth</li> </ul> </li> <li> Svelte 3</li> <li> Vue 3</li> <li> Apollo</li> <li> Next.js</li> </ul> 36:37 - Serverless <ul> <li> Going to get easier</li> <li> <a href="http://begin.com/" rel="nofollow" target="_blank">Begin.com</a></li> <li> Next.js / Now Functions</li> </ul> 38:14 - Gatsby <ul> <li>A single useQuery (made possible by suspense)</li> </ul> 39:36 - Headless CMS Thunderdome 42:20 - Next Gen Frameworks <ul> <li> Keystone</li> <li> Strapi</li> <li> Meteor</li> <li> Vulcan.js</li> </ul> 43:46 - Cypress <ul> <li> End to end testing</li> <li> Currently no Firefox support, but hopeful for 2020</li> </ul> 44:21 - Modulz <ul> <li> Exports to JS component</li> </ul> 45:00 - Figma <ul> <li> Was already amazing in 2019</li> <li> Constantly improving and adding new features</li> <li> Can import from Sketch</li> </ul> <a></a>Links <ul> <li> <a href="https://syntax.fm/show/109/hasty-treat-css-grid-level-2-aka-subgrid" rel="nofollow" target="_blank"> Syntax 109: CSS Grid Level 2 aka Subgrid</a></li> <li> <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini" rel="nofollow" target="_blank">CSS Houdini</a></li> <li> <a href="https://css-tricks.com/interactive-introduction-to-css-houdini/" rel="nofollow" target="_blank">Interactive Introduction to CSS Houdini</a></li> <li> <a href="https://tweetdeck.twitter.com/" rel="nofollow" target="_blank">Tweetdeck</a></li> <li> <a href="https://blog.npmjs.org/post/178027064160/next-generation-package-management" rel="nofollow" target="_blank"> Next Generation Package Management</a></li> <li> <a href="https://www.npmjs.com/package/tink" rel="nofollow" target="_blank">tink</a></li> <li> <a href="https://www.pika.dev/" rel="nofollow" target="_blank">Pika</a></li> <li> <a href="https://next.yarnpkg.com/features/pnp" rel="nofollow" target="_blank">Yarn PnP</a></li> <li> <a href="https://syntax.fm/show/212/pika-pkg" rel="nofollow" target="_blank">Syntax 212: Pika Pkg</a></li> <li> <a href="https://www.snowpack.dev/" rel="nofollow" target="_blank">Snowpack</a></li> <li> <a href="https://www.entropic.dev/" rel="nofollow" target="_blank">Entropic</a></li> <li><a href="https://deno.land/" rel="nofollow" target="_blank">Deno</a></li> <li><a href="https://www.youtube.com/watch?v=M3BM9TB-8yA" rel="nofollow" target="_blank">Ryan Dahl - 10 Things I regret About Node.js</a></li> <li><a href="https://github.com/denoland/deno" rel="nofollow" target="_blank">https://github.com/denoland/deno</a></li> <li><a href="https://www.cloudflare.com/" rel="nofollow" target="_blank">Cloudflare</a></li> <li><a href="https://www.hover.com/" rel="nofollow" target="_blank">Hover</a></li> <li><a href="https://www.meteor.com/" rel="nofollow" target="_blank">Meteor</a></li> <li><a href="https://github.com/meteor/meteor/blob/devel/Roadmap.md" rel="nofollow" target="_blank">Meteor roadmap</a></li> <li><a href="https://www.tinycapital.com/" rel="nofollow" target="_blank">tiny</a></li> <li><a href="https://svelte.dev/" rel="nofollow" target="_blank">Svelte 3</a></li> <li><a href="https://www.apollographql.com/" rel="nofollow" target="_blank">Apollo</a></li> <li><a href="https://nextjs.org/" rel="nofollow" target="_blank">Nextjs</a></li> <li><a href="https://vuejs.org/" rel="nofollow" target="_blank">Vue</a></li> <li><a href="https://begin.com/" rel="nofollow" target="_blank">Begin</a></li> <li><a href="https://www.mozilla.org/en-US/firefox/new/?redirect_source=firefox-com" rel="nofollow" target="_blank"> Firefox</a></li> <li><a href="https://www.keystonejs.com/" rel="nofollow" target="_blank">Keystone</a></li> <li><a href="https://strapi.io/" rel="nofollow" target="_blank">Strapi</a></li> <li><a href="http://vulcanjs.org/" rel="nofollow" target="_blank">Vulcan.js</a></li> <li><a href="https://www.prisma.io/" rel="nofollow" target="_blank">Prisma</a></li> <li><a href="https://hasura.io/" rel="nofollow" target="_blank">Hasura</a></li> <li><a href="https://syntax.fm/show/209/hasty-treat-wes-teaches-scott-about-keystone-js" rel="nofollow" target="_blank"> Syntax 209: Hasty Treat - Wes Teaches Scott about Keystone.js</a></li> <li><a href="https://www.cypress.io/" rel="nofollow" target="_blank">Cypress</a></li> <li><a href="https://www.modulz.app/" rel="nofollow" target="_blank">Modulz</a></li> <li><a href="https://www.framer.com/" rel="nofollow" target="_blank">Framer</a></li> <li><a href="https://www.figma.com/" rel="nofollow" target="_blank">Figma</a></li> <li><a href="https://www.sketch.com/" rel="nofollow" target="_blank">Sketch</a></li> <li><a href="https://www.youtube.com/channel/UC-T8W79DN6PBnzomelvqJYw" rel="nofollow" target="_blank">James Quick YouTube Channel</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li>Scott: <a href="https://amzn.to/2uQYFVz" rel="nofollow" target="_blank">Govee Thermometer</a></li> <li>Wes: <a href="https://amzn.to/2QR3eHK" rel="nofollow" target="_blank">Rack Mount Power Bar</a></li> </ul> <a></a>Shameless Plugs <ul> <li>Scott: <a href="https://www.leveluptutorials.com/pro" rel="nofollow" target="_blank">Fullstack React and Firebase</a> - Sign up for the year and save 25%!</li> <li>Wes: <a href="https://wesbos.com/courses/" rel="nofollow" target="_blank">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Tech To Watch In 2020

In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Freshbooks - Sponsor  Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes  4:05 - What is Serverless?   URL driven  Startup/shut down (Heroku works this way)  Digital Ocean droplet works differently   8:15 - What are the benefits?   Scale up specific functions rather than everything - aka potentially cheaper  Security - your singular server instance being hacked is not a possibility  Less knowledge overhead required   You don’t need to manage your own server  Empowers front-end devs to do more    Faster deploys   Only re-deploy the code that changed     17:05 - What can you host on Serverless?   Static Files - SPA (React)  Single functions  It can be in JS, Python, GO, PHP   18:07 - What can’t you host on Serverless?   Entire applications  Large apps have slow coldstarts  500mb limit   23:40 - Raw Providers   Google Cloud  Azure  AWS Lambda  SAP  Red Hat  IBM Cloud Functions  Cloudflare Workers  Kind of cool because they work like service workers where you can intercept any HTTP request   27:33 - Easy Providers + Frameworks   Begin + Arc.codes  Zeit Now + Next.js  Anything + Serverless  Netlify  AWS Amplify  Apex Up - TJ Holowaychuk  Open Faas + Digital Ocean  Links   Heroku  Digital Ocean  Meteor Galaxy  Codepen Radio: Preprocessors and Lambda  Zeit Now  Wes’ tweet about serverless  @maxsteenbergen  uses.tech  Google Cloud  Azure  AWS Lambda  SAP  Red Hat  IBM Cloud Functions  Cloudflare Workers  Begin  Arc.codes  Severless  Netlify  AWS Amplify  Apex Up  Open Faas  @tjholowaychuk  Scott tries Begin.com  SyntaxFM Reddit  ××× SIIIIICK ××× PIIIICKS ×××   Scott: Matt McMuscles YouTube Channel  Wes: Modern Vintage Gamer  Shameless Plugs   Scott: Scott’s YouTube Channel  Wes: Beginner Javascript Course - Use the coupon code ‘Syntax’ for $10 off!  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, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more! <a></a>.TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at <a href="https://go.tech/syntax2020" rel="nofollow" target="_blank">go.tech/syntax2020</a>. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. <a></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href="https://freshbooks.com/syntax" rel="nofollow" target="_blank">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section. <a></a>Show Notes 4:05 - What is Serverless? <ul> <li> URL driven</li> <li> Startup/shut down (Heroku works this way)</li> <li> Digital Ocean droplet works differently</li> </ul> 8:15 - What are the benefits? <ul> <li> Scale up specific functions rather than everything - aka potentially cheaper</li> <li> Security - your singular server instance being hacked is not a possibility</li> <li> Less knowledge overhead required <ul> <li> You don’t need to manage your own server</li> <li> Empowers front-end devs to do more</li> </ul> </li> <li> Faster deploys <ul> <li> Only re-deploy the code that changed</li> </ul> </li> </ul> 17:05 - What can you host on Serverless? <ul> <li> Static Files - SPA (React)</li> <li> Single functions</li> <li> It can be in JS, Python, GO, PHP</li> </ul> 18:07 - What can’t you host on Serverless? <ul> <li> Entire applications</li> <li> Large apps have slow coldstarts</li> <li> 500mb limit</li> </ul> 23:40 - Raw Providers <ul> <li> Google Cloud</li> <li> Azure</li> <li> AWS Lambda</li> <li> SAP</li> <li> Red Hat</li> <li> IBM Cloud Functions</li> <li> Cloudflare Workers</li> <li> Kind of cool because they work like service workers where you can intercept any HTTP request</li> </ul> 27:33 - Easy Providers + Frameworks <ul> <li> Begin + Arc.codes</li> <li> Zeit Now + Next.js</li> <li> Anything + Serverless</li> <li> Netlify</li> <li> AWS Amplify</li> <li> Apex Up - TJ Holowaychuk</li> <li> Open Faas + Digital Ocean</li> </ul> <a></a>Links <ul> <li> <a href="https://www.heroku.com/" rel="nofollow" target="_blank">Heroku</a></li> <li> <a href="https://www.digitalocean.com/" rel="nofollow" target="_blank">Digital Ocean</a></li> <li> <a href="https://www.meteor.com/hosting" rel="nofollow" target="_blank">Meteor Galaxy</a></li> <li> <a href="https://blog.codepen.io/2017/10/03/145-preprocessors-lambda/" rel="nofollow" target="_blank">Codepen Radio: Preprocessors and Lambda</a></li> <li> <a href="https://zeit.co/home" rel="nofollow" target="_blank">Zeit Now</a></li> <li> <a href="https://twitter.com/maxsteenbergen/status/1226994154510725120" rel="nofollow" target="_blank">Wes’ tweet about serverless</a></li> <li> <a href="https://twitter.com/maxsteenbergen" rel="nofollow" target="_blank">@maxsteenbergen</a></li> <li> <a href="https://uses.tech/" rel="nofollow" target="_blank">uses.tech</a></li> <li> <a href="https://cloud.google.com/gcp/" rel="nofollow" target="_blank">Google Cloud</a></li> <li> <a href="https://azure.microsoft.com/" rel="nofollow" target="_blank">Azure</a></li> <li> <a href="https://aws.amazon.com/lambda/" rel="nofollow" target="_blank">AWS Lambda</a></li> <li> <a href="https://www.sap.com/index.html" rel="nofollow" target="_blank">SAP</a></li> <li> <a href="https://www.redhat.com/" rel="nofollow" target="_blank">Red Hat</a></li> <li> <a href="https://cloud.ibm.com/functions/" rel="nofollow" target="_blank">IBM Cloud Functions</a></li> <li> <a href="https://workers.cloudflare.com/" rel="nofollow" target="_blank">Cloudflare Workers</a></li> <li> <a href="https://begin.com/" rel="nofollow" target="_blank">Begin</a></li> <li> <a href="https://arc.codes/" rel="nofollow" target="_blank">Arc.codes</a></li> <li> <a href="https://serverless.com/" rel="nofollow" target="_blank">Severless</a></li> <li> <a href="https://www.netlify.com/" rel="nofollow" target="_blank">Netlify</a></li> <li> <a href="https://aws.amazon.com/amplify/" rel="nofollow" target="_blank">AWS Amplify</a></li> <li> <a href="https://apex.sh/docs/up/" rel="nofollow" target="_blank">Apex Up</a></li> <li> <a href="https://www.openfaas.com/" rel="nofollow" target="_blank">Open Faas</a></li> <li> <a href="https://twitter.com/tjholowaychuk" rel="nofollow" target="_blank">@tjholowaychuk</a></li> <li> <a href="https://www.youtube.com/watch?v=dpHizW9Ojsg" rel="nofollow" target="_blank">Scott tries Begin.com</a></li> <li> <a href="https://www.reddit.com/r/SyntaxFM/" rel="nofollow" target="_blank">SyntaxFM Reddit</a></li> </ul> <a></a>××× SIIIIICK ××× PIIIICKS ××× <ul> <li> Scott: <a href="https://www.youtube.com/channel/UCiP_FwGyJQ_6P8k5ON5mncQ" rel="nofollow" target="_blank">Matt McMuscles YouTube Channel</a></li> <li> Wes: <a href="https://www.youtube.com/channel/UCjFaPUcJU1vwk193mnW_w1w" rel="nofollow" target="_blank">Modern Vintage Gamer</a></li> </ul> <a></a>Shameless Plugs <ul> <li> Scott: <a href="https://www.youtube.com/user/LevelUpTuts/videos" rel="nofollow" target="_blank">Scott’s YouTube Channel</a></li> <li> Wes: <a href="https://beginnerjavascript.com/" rel="nofollow" target="_blank">Beginner Javascript Course</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <a></a>Tweet us your tasty treats! <ul> <li><a href="https://www.instagram.com/stolinski/" rel="nofollow" target="_blank">Scott’s Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" rel="nofollow" target="_blank">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" rel="nofollow" target="_blank">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos" rel="nofollow" target="_blank">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer" rel="nofollow" target="_blank">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski" rel="nofollow" target="_blank">Scott’s Twitter</a></li> <li>Make sure to include <a href="https://twitter.com/SyntaxFM" rel="nofollow" target="_blank">@SyntaxFM</a> in your tweets</li> </ul>

Serverless / Cloud Functions - Part 1

What is this?
1 quote, 3 ideas & 1 question from a carefully curated podcast episode.
Every Monday & Wednesday.

Want a 3rd insight and episode every week? Email me at curation@owltail.com.

OwlTail

OwlTail 1-3-1

The best podcast episodes of anyone with an interesting story. With famous guests like Obama, LeBron James, Drake, Oprah Winfrey, Richard Branson, Michelle Obama, Serena Williams, to anyone who has a unique and interesting story to tell. Add episodes you're interested into your queue below!