Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

JavaScript in 2022

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.

<p class="has-line-data" data-line-start="0" data-line-end="1">In this episode of Syntax, Wes and Scott look at the the Web Almanac’s report on the role of JavaScript on the web in 2022.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Auth0___Sponsor_2" name="Auth0___Sponsor_2"></a>Auth0 - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. <a href="https://a0.to/syntax">https://a0.to/syntax</a></p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Sentry__Sponsor_6" name="Sentry__Sponsor_6"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9">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.</p> <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> <p class="has-line-data" data-line-start="12" data-line-end="13"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a></p> <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="17"> <strong><a href="#t=00:11">00:11</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=01:17">01:17</a></strong> College football update</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=04:07">04:07</a></strong> Web almanac for 2022</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://almanac.httparchive.org/en/2022/javascript">JavaScript in the 2022 Web Almanac</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=06:25">06:25</a></strong> Unused JavaScript</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=07:47">07:47</a></strong> JavaScript requests per page</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=09:38">09:38</a></strong> Bundlers</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=14:01">14:01</a></strong> Pages using Babel</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=16:01">16:01</a></strong> How JavaScript is requested</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=19:22">19:22</a></strong> Sponsor: Sentry</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=20:56">20:56</a></strong> Loading render blocking tags</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=22:48">22:48</a></strong> Dynamic import, web workers, source maps</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=24:33">24:33</a></strong> Libraries and frameworks</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://owlcarousel2.github.io/OwlCarousel2/">Owl Carousel</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://github.com/aFarkas/lazysizes">Lazy Sizes</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=29:30">29:30</a></strong> Websites using web components</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=31:35">31:35</a></strong> Websites with JavaScript security issues</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=32:43">32:43</a></strong> Sponsor: Auth0</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=33:58">33:58</a></strong> Jamstack</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=37:09">37:09</a></strong> JavaScript used by Jamstack sites</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=38:03">38:03</a></strong> Jamstack hosting</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=39:46">39:46</a></strong> Popular Static site generators</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=44:49">44:49</a></strong> Progressive web apps and service workers</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=50:29">50:29</a></strong> jQuery inside WordPress themes</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://en.wikipedia.org/wiki/WeCrashed">WeCrashed</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <strong><a href="#t=51:13">51:13</a></strong> Project Fugu</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://developers.google.com/learn/pathways/fugu-apis">Project Fugu</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <strong><a href="#t=52:51">52:51</a></strong> Web push notifications</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <strong><a href="#t=55:49">55:49</a></strong> CMSs</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <strong><a href="#t=00:45">00:45</a></strong> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> <strong><a href="#t=01:40">01:40</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="_SIIIIICK__PIIIICKS__48" name= "_SIIIIICK__PIIIICKS__48"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> Scott: <a href="https://www.hbo.com/the-white-lotus">White Lotus</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Wes: <a href="https://www.ui.com/wi-fi">Ubiquiti</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Shameless_Plugs_53" name="Shameless_Plugs_53"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Scott: <a href="https://levelup.video">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Tweet_us_your_tasty_treats_58" name= "Tweet_us_your_tasty_treats_58"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> 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 look at the the Web Almanac’s report on the role of JavaScript on the web in 2022.
 Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
 Show Notes  00:11 Welcome
 01:17 College football update
 04:07 Web almanac for 2022
 JavaScript in the 2022 Web Almanac

 06:25 Unused JavaScript
 07:47 JavaScript requests per page
 09:38 Bundlers
 14:01 Pages using Babel
 16:01 How JavaScript is requested
 19:22 Sponsor: Sentry
 20:56 Loading render blocking tags
 22:48 Dynamic import, web workers, source maps
 24:33 Libraries and frameworks
 Owl Carousel

 Lazy Sizes

 29:30 Websites using web components
 31:35 Websites with JavaScript security issues
 32:43 Sponsor: Auth0
 33:58 Jamstack
 37:09 JavaScript used by Jamstack sites
 38:03 Jamstack hosting
 39:46 Popular Static site generators
 44:49 Progressive web apps and service workers
 50:29 jQuery inside WordPress themes
 WeCrashed

 51:13 Project Fugu
 Project Fugu

 52:51 Web push notifications
 55:49 CMSs
 00:45 Sponsor: Freshbooks
 01:40 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: White Lotus

 Wes: Ubiquiti

  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

JavaScript in 2022

Poslechněte si podcast