Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Polyfills, Transpiling and Monkey Patching

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 what polyfills, transpiling, and monkey patching mean, how and when to do it, and libraries that can help you out.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:10">00:10</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:07">01:07</a></strong> Toast follow up</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:45">02:45</a></strong> What are transpiling, ponyfill, polyfill, and monkey patching</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://github.com/tc39/proposals">TC39 Proposals</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://twitter.com/wesbos/status/1593271021557239809">Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=11:18">11:18</a></strong> Transpiling unsupported CSS</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=15:11">15:11</a></strong> Polyfills</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://github.com/oddbird/popover-polyfill/blob/main/src/popover.ts"> Popover polyfill</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=19:22">19:22</a></strong> Polyfilling CSS</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=21:06">21:06</a></strong> HTML polyfills</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=27:47">27:47</a></strong> How to transpile and polyfill</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://babeljs.io/">Babel</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://www.typescriptlang.org/">TypeScript: JavaScript With Syntax For Types</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://coffeescript.org/">CoffeeScript</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://civet.dev/">Civet</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://github.com/cronn/jsxtransformer">cronn/jsxtransformer: Pipeline for transforming JSX files using Babel.js and Uglify.js</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://svelte.dev/">Svelte • Cybernetically enhanced web apps</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://polyfill.io/v3/">Polyfill.io</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://www.npmjs.com/package/core-js">core-js - npm</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=35:46">35:46</a></strong> Shiv and shims</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://stackoverflow.com/questions/14429061/html5-shim-vs-shiv">Shim vs Shiv</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=38:16">38:16</a></strong> Monkey patching</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <strong><a href="#t=49:08">49:08</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="28" data-line-end="29"> <a id="_SIIIIICK__PIIIICKS__28"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> Scott: <a href="https://amzn.to/44vKgcW">Cable sleeve</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Wes: <a href= "https://www.meross.com/en-gc/smart-air-purifier/homekit-air-purifier/112"> Air Purifier</a></li> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href="https://www.aliexpress.com/">AliExpress</a></li> </ul> <h2 class="code-line" data-line-start="34" data-line-end="35"> <a id="Shameless_Plugs_34"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="Tweet_us_your_tasty_treats_39"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this episode of Syntax, Wes and Scott talk about what polyfills, transpiling, and monkey patching mean, how and when to do it, and libraries that can help you out.
 Show Notes  00:10 Welcome
 01:07 Toast follow up
 02:45 What are transpiling, ponyfill, polyfill, and monkey patching
 TC39 Proposals

 Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3

 11:18 Transpiling unsupported CSS
 15:11 Polyfills
  Popover polyfill

 19:22 Polyfilling CSS
 21:06 HTML polyfills
 27:47 How to transpile and polyfill
 Babel

 TypeScript: JavaScript With Syntax For Types

 CoffeeScript

 Civet

 cronn/jsxtransformer: Pipeline for transforming JSX files using Babel.js and Uglify.js

 Svelte • Cybernetically enhanced web apps

 Polyfill.io

 core-js - npm

 35:46 Shiv and shims
 Shim vs Shiv

 38:16 Monkey patching
 49:08 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Cable sleeve

 Wes: Air Purifier

 AliExpress

  Shameless Plugs  Scott: Sentry

 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
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

Polyfills, Transpiling and Monkey Patching

Poslechněte si podcast