Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Syntax Live at Reactathon

Syntax - Tasty Web Development Treats

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.

In this episode of Syntax, Wes and Scott are live from Reactathon 2022! <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Sentry___Sponsor_2" name="Sentry___Sponsor_2"></a>Sentry - Sponsor</h2> If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Payments_Hub__Sponsor_6" name= "Payments_Hub__Sponsor_6"></a>Payments Hub - Sponsor</h2> There are hundreds of payments processing companies out there. Hit up <a href= "https://developer.paymentshub.com/syntax">developer.paymentshub.com/syntax</a> to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API! <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor</h2> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <h2 class="code-line" data-line-start="14" data-line-end="15"> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="https://www.youtube.com/watch?v=PXO0iopa5QI">Live video version</a> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=00:32">00:32</a> Welcome </li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=04:10">04:10</a> Hot Take Tweets </li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://twitter.com/wesbos/status/1520074336463429637?s=21&t=mO9-2O0DO5fZ-uycIIbIcg"> What is your JavaScript Hot Take or unpopular opinion?</a> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=05:42">05:42</a> Semi colons are not optional </li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=06:11">06:11</a> For loops are not needed </li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=07:19">07:19</a> People forget about ES Harmony </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=08:11">08:11</a> Sponsor: Sentry </li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=09:23">09:23</a> A good website should function without JavaScript </li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=10:28">10:28</a> Classes were a mistake </li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=10:54">10:54</a> Stay as close to the platform primatives </li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=11:36">11:36</a> TypeScript is overrated and overhyped </li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=11:50">11:50</a> Kickin it old school </li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/7eaa615a-4f84-4f56-9183-552cac4a5609/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220606%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220606T214149Z&X-Amz-Expires=86400&X-Amz-Signature=2fa8be31a737a4a682db588382392c610b9ebb0b55036c977ffb6ae7a97d6356&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22&x-id=GetObject"> PNG Fix</a> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href= "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/e87aa8f9-0a24-4fa5-ad56-346e58e9c079/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220606%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220606T214119Z&X-Amz-Expires=86400&X-Amz-Signature=00eeacc735b72e354c23e37fdb69f011a9dc6160906bf9b83ab2c279c8d47801&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22&x-id=GetObject"> MM Swap image</a> </li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href= "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/746c04de-b14d-445c-9d4d-0897989affa0/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220606%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220606T214210Z&X-Amz-Expires=86400&X-Amz-Signature=c221f4fbc1606ca395f6110a29908d0327d00a19ef917db6d4eea5d76d6c1ffa&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22&x-id=GetObject"> Rounded Corner images (sliding Doors)</a> </li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <code>var that = this;</code> </li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href= "https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11"> IE CSS Hack</a> </li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Test for Opera <code>var test = /^function \(/.test([].sort);</code> </li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=25:09">25:09</a> Sponsor: Payments Hub </li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=26:29">26:29</a> Syntax Error </li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://pypi.org/project/mercurius-core-library/">Mercurius Library</a> </li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=31:19">31:19</a> JS or NAY-S </li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="#t=39:02">39:02</a> Sponsor: Freshbooks </li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="#t=39:23">39:23</a> Q&A </li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://syntax.fm/show/430/creator-of-wordle-josh-wardle">Syntax episode with Josh Wardle</a> </li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="#t=39:57">39:57</a> Using Array methods or for loops </li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="#t=41:12">41:12</a> What web tech is overhyped and what’s under hyped? </li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="#t=43:01">43:01</a> Would you rather use Dvorak or Mac butterfly keyboard? </li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="#t=43:41">43:41</a> Name all provinces and territories in Canada </li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="#t=44:39">44:39</a> Fav <a href= "http://Syntax.fm">Syntax.fm</a> episode </li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="#t=45:38">45:38</a> How did Wes and Josh meet? </li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="#t=46:52">46:52</a> What’s your favorite Trader Joes snack? </li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="#t=47:29">47:29</a> Would you hire a European or American developer? </li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="#t=49:04">49:04</a> How would you validate a product idea for Saas business? </li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="#t=49:48">49:48</a> What podcasts do you listen to? </li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href="https://www.steveo.com/pages/podcast">Steve O Podcast</a> </li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="Shameless_Plugs_55" name="Shameless_Plugs_55"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Scott: <a href= "https://leveluptutorials.com/tutorials/keystone-js/introduction">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="60" data-line-end="61"> <a id="Tweet_us_your_tasty_treats_60" name= "Tweet_us_your_tasty_treats_60"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Wes and Scott are live from Reactathon 2022!
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Payments Hub - Sponsor There are hundreds of payments processing companies out there. Hit up developer.paymentshub.com/syntax to learn more about how Payments Hub Developers not only processes ecommerce and in-person payments, but also boards and underwrites your merchants in as little as 90 minutes. We are currently offering Syntax listeners who become new partners 6 months free data through our Business Reporting API!
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
 Show Notes  Live video version

  00:32 Welcome

  04:10 Hot Take Tweets

  What is your JavaScript Hot Take or unpopular opinion?

  05:42 Semi colons are not optional

  06:11 For loops are not needed

  07:19 People forget about ES Harmony

  08:11 Sponsor: Sentry

  09:23 A good website should function without JavaScript

  10:28 Classes were a mistake

  10:54 Stay as close to the platform primatives

  11:36 TypeScript is overrated and overhyped

  11:50 Kickin it old school

  PNG Fix

  MM Swap image

  Rounded Corner images (sliding Doors)

  var that = this;

  IE CSS Hack

  Test for Opera var test = /^function \(/.test([].sort);

  25:09 Sponsor: Payments Hub

  26:29 Syntax Error

  Mercurius Library

  31:19 JS or NAY-S

  39:02 Sponsor: Freshbooks

  39:23 Q&A

  Syntax episode with Josh Wardle

  39:57 Using Array methods or for loops

  41:12 What web tech is overhyped and what’s under hyped?

  43:01 Would you rather use Dvorak or Mac butterfly keyboard?

  43:41 Name all provinces and territories in Canada

  44:39 Fav Syntax.fm episode

  45:38 How did Wes and Josh meet?

  46:52 What’s your favorite Trader Joes snack?

  47:29 Would you hire a European or American developer?

  49:04 How would you validate a product idea for Saas business?

  49:48 What podcasts do you listen to?

  Steve O Podcast

  Shameless Plugs  Scott: LevelUp Tutorials

 Wes: Wes Bos Tutorials

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Syntax Live at Reactathon

Poslechněte si podcast