Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Fundamentals - Web Workers and Service Workers

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 talk through the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, and more.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "LogRocket___Sponsor_2" name="LogRocket___Sponsor_2"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> 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">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> <a href="http://Sanity.io">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">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</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=04:34">04:34</a></strong> What are threads?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=06:12">06:12</a></strong> Concurrent vs parallel</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=09:22">09:22</a></strong> Green screen web cam example</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=13:02">13:02</a></strong> Examples of what you could use web workers for</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://partytown.builder.io">Party Town</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://deno.land">Deno</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=19:52">19:52</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=20:42">20:42</a></strong> Post Message API and Web Workers</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=25:57">25:57</a></strong> What about WASM?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=27:28">27:28</a></strong> Offline sync</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=28:14">28:14</a></strong> What are service workers?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=31:20">31:20</a></strong> How do you caching sites for offline use?</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=32:39">32:39</a></strong> Web worker vs service worker</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=34:12">34:12</a></strong> Sponsor: Sanity</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=35:40">35:40</a></strong> What is the lifecycle of a service worker</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=38:18">38:18</a></strong> Possible issues with Service Workers</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=42:46">42:46</a></strong> Debugging service workers</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://kit.svelte.dev/docs/service-workers">Svelte Kit Service workers</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://developer.chrome.com/docs/workbox/">Workbox</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=43:04">43:04</a></strong> Testing and local development</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href= "https://github.com/wesbos/Web-App-Workshop/blob/master/notes/08%20-%20Offline%20Support%20with%20Service%20Workers.md"> Service Workers notes from Wes’ Workshop</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=46:45">46:45</a></strong> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <strong><a href="#t=49:59">49:59</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="41" data-line-end="42"> <a id="_SIIIIICK__PIIIICKS__41" name= "_SIIIIICK__PIIIICKS__41"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Scott: <a href="https://amzn.to/3w1LFZB">Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads</a></li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Wes: <a href="https://amzn.to/3dvLDTw">Samsung Frame TV</a></li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="Shameless_Plugs_46" name="Shameless_Plugs_46"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Scott: <a href="https://leveluptutorials.com/">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="49" data-line-end="51"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="51" data-line-end="52"> <a id="Tweet_us_your_tasty_treats_51" name= "Tweet_us_your_tasty_treats_51"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> 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 talk through the fundamentals of web workers and service workers - examples, when you should use them, how to debug, local dev, 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.
 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
 Show Notes  00:11 Welcome
 04:34 What are threads?
 06:12 Concurrent vs parallel
 09:22 Green screen web cam example
 13:02 Examples of what you could use web workers for
 Party Town

 Deno

 19:52 Sponsor: LogRocket
 20:42 Post Message API and Web Workers
 25:57 What about WASM?
 27:28 Offline sync
 28:14 What are service workers?
 31:20 How do you caching sites for offline use?
 32:39 Web worker vs service worker
 34:12 Sponsor: Sanity
 35:40 What is the lifecycle of a service worker
 38:18 Possible issues with Service Workers
 42:46 Debugging service workers
 Svelte Kit Service workers

 Workbox

 43:04 Testing and local development
  Service Workers notes from Wes’ Workshop

 46:45 Sponsor: Freshbooks
 49:59 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Setex Gecko Grip 1mm Anti Slip Eyeglass Nose Pads

 Wes: Samsung Frame TV

  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

Fundamentals - Web Workers and Service Workers

Poslechněte si podcast