Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Use The Platform!

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 the benefits of sticking to the web platform that is available to you through APIs you may not know about.</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= "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="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="12" data-line-end="13"> 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="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:15">01:15</a></strong> Fogging the boats</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=04:25">04:25</a></strong> Use the platform</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=06:32">06:32</a></strong> URLSearchParams</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=10:04">10:04</a></strong> Pushstate and History API</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/History">Pushstate</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=13:46">13:46</a></strong> Internationalization API</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"> Internationalization API</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://syntax.fm/show/153/hasty-treat-new-intl-methods-are-straight-fire"> Syntax episode 153</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=16:03">16:03</a></strong> FormData API</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://developer.mozilla.org/en-US/">MDN Docs</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://leveluptutorials.com/posts/you-don-t-need-a-dependency-clipboard-api"> Clipboard API tutorial</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=20:31">20:31</a></strong> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=21:23">21:23</a></strong> All of the DOM API</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=24:12">24:12</a></strong> Vanilla JS</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=26:06">26:06</a></strong> Localstorage and IndexDB</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=29:18">29:18</a></strong> Web Animations API</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=31:10">31:10</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=32:39">32:39</a></strong> Endless other browser apis</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=38:22">38:22</a></strong> Shadow DOM and Web Components</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://leveluptutorials.com/tutorials/web-components-for-beginners/what-are-web-components"> Web Components for beginners</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=42:57">42:57</a></strong> CSS variables</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=46:05">46:05</a></strong> HTML</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=47:27">47:27</a></strong> Sponsor: Sanity</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <strong><a href="#t=49:19">49:19</a></strong> More HTML</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> <strong><a href="#t=54:12">54:12</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/3UE3toy">Cable sleeve</a></li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Wes: <a href= "https://www.princessauto.com/en/wall-mount-kindling-splitter-with-10-in-blade/product/PA0008667727"> Kindling splitter</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/">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="63"> 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 the benefits of sticking to the web platform that is available to you through APIs you may not know about.
 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.
 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  00:11 Welcome
 01:15 Fogging the boats
 04:25 Use the platform
 06:32 URLSearchParams
 10:04 Pushstate and History API
 Pushstate

 13:46 Internationalization API
  Internationalization API

  Syntax episode 153

 16:03 FormData API
 MDN Docs

  Clipboard API tutorial

 20:31 Sponsor: Prismic
 21:23 All of the DOM API
 24:12 Vanilla JS
 26:06 Localstorage and IndexDB
 29:18 Web Animations API
 31:10 Sponsor: LogRocket
 32:39 Endless other browser apis
 38:22 Shadow DOM and Web Components
  Web Components for beginners

 42:57 CSS variables
 46:05 HTML
 47:27 Sponsor: Sanity
 49:19 More HTML
 54:12 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Cable sleeve

 Wes: Kindling splitter

  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

Use The Platform!

Poslechněte si podcast