Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

10 Nifty Browser APIs

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 about 10 browser API’s you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more!</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> 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="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:13">00:13</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=01:05">01:05</a></strong> Dishwasher talk</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=04:30">04:30</a></strong> getUserMedia</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://hair.wesbos.com">Hair.WesBos.com</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://javascript30.com">Javascript 30</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=07:22">07:22</a></strong> FileSystem</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://leveluptutorials.com/tutorials/exploring-browser-apis/intro-to-exploring-browser-apis"> Level Up Tutorials: Browser APIs</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://www.electronjs.org">Electron</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=12:50">12:50</a></strong> Geolocation</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=15:07">15:07</a></strong> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=16:41">16:41</a></strong> Permissions</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=22:36">22:36</a></strong> Web Animations</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API"> Web Animations API</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.framer.com/motion/">Framer Motion</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://motion.dev">Motion One</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=26:31">26:31</a></strong> Resize Observer</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API"> Resize Observer API</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=29:33">29:33</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=30:45">30:45</a></strong> Clipboard</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API">Clipboard API</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=34:10">34:10</a></strong> Web storage</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API">Web storage</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=37:11">37:11</a></strong> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=38:09">38:09</a></strong> SpeechSynthesis</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <strong><a href="#t=41:32">41:32</a></strong> SpeechRecognition</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> <strong><a href="#t=46:14">46:14</a></strong> ××× SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="_SIIIIICK__PIIIICKS__43" name= "_SIIIIICK__PIIIICKS__43"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> Scott: <a href="https://amzn.to/3y5m7wz">RCA to HDMI adapter</a></li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Wes: <a href= "https://www.liteline.com/page/SlimLED">SlimLED</a></li> </ul> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Shameless_Plugs_48" name="Shameless_Plugs_48"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> Scott: <a href= "https://leveluptutorials.com/tutorials/keystone-js/introduction">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Tweet_us_your_tasty_treats_53" name= "Tweet_us_your_tasty_treats_53"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> 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 about 10 browser API’s you might not be familiar with including getUserMedia, Resize Observer, SpeechRecognition, and more!
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
 Show Notes  00:13 Welcome
 01:05 Dishwasher talk
 04:30 getUserMedia
 Hair.WesBos.com

 Javascript 30

 07:22 FileSystem
  Level Up Tutorials: Browser APIs

 Electron

 12:50 Geolocation
 15:07 Sponsor: Prismic
 16:41 Permissions
 22:36 Web Animations
  Web Animations API

 Framer Motion

 Motion One

 26:31 Resize Observer
  Resize Observer API

 29:33 Sponsor: LogRocket
 30:45 Clipboard
 Clipboard API

 34:10 Web storage
 Web storage

 37:11 Sponsor: Freshbooks
 38:09 SpeechSynthesis
 41:32 SpeechRecognition
 46:14 ××× SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: RCA to HDMI adapter

 Wes: SlimLED

  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

10 Nifty Browser APIs

Poslechněte si podcast