Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × Shipping ESM with Mark Erikson

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 supper club episode of Syntax, Wes and Scott talk with Mark Erikson about his work in helping others understand shipping ESM, how to deal with permutations, whether default imports are helpful, whether TypeScript has made it easier, and what Mark’s tool stack is for building.</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:36">00:36</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:45">01:45</a></strong> Introducing Shipping ESM with Mark Erikson</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://twitter.com/acemarke">Mark Erikson (@acemarke)</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://twitter.com/wesbos/status/1610385221324619780">Wes Bos on Twitter: “publishing packages that work in esm and cjs is such a nightmare. I’ve run into so many issues today and took forever to get the proper package.json exports. I can’t wait until we’re 100% esm. I think I have every single combo covered.”</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://blog.isquaredsoftware.com/">Mark’s Dev Blog</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/"> Blogged Answers: My Experience Modernizing Packages to ESM</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://blog.isquaredsoftware.com/2020/08/greatest-hits/">Greatest Hits: The Most Popular and Most Useful Posts I’ve Written</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://github.com/arethetypeswrong/arethetypeswrong.github.io">arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://publint.dev/">publint</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=07:01">07:01</a></strong> How did we get to this space in modules?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=16:30">16:30</a></strong> How do you deal with permutations?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=22:13">22:13</a></strong> Do bundlers get in the way or helping?</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=26:16">26:16</a></strong> Are default imports useful?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=30:35">30:35</a></strong> Are the types wrong errors</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=33:41">33:41</a></strong> Has TypeScript made this easier?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=37:56">37:56</a></strong> What’s your tool stack for building?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=39:32">39:32</a></strong> How do you test?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=41:35">41:35</a></strong> Will we ever stop bundling?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=48:03">48:03</a></strong> What about source maps?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=52:32">52:32</a></strong> Supper Club Questions</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://learn.microsoft.com/en-us/windows/wsl/about">What is Windows Subsystem for Linux</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://marketplace.visualstudio.com/items?itemName=graf009.Eagle-Oceanic-Next"> Eagle Oceanic Next</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://eng.m.fontke.com/font/24637914/">DroidSansMono NF Font</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=55:18">55:18</a></strong> React Types has more downloads than React?</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> <strong><a href="#t=59:42">59:42</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="30" data-line-end="31"> <a id="_SIIIIICK__PIIIICKS__30"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href="https://www.youtube.com/watch?v=zF7mSTVwVs0">Shirley Wu—Taking up space (Keynote, Outlier 2023)</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"> <a href="https://twitter.com/replayio">Replay (@replayio)</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> <a href="https://www.replay.io/">Replay - The time-travel debugger from the future.</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 supper club episode of Syntax, Wes and Scott talk with Mark Erikson about his work in helping others understand shipping ESM, how to deal with permutations, whether default imports are helpful, whether TypeScript has made it easier, and what Mark’s tool stack is for building.
 Show Notes  00:36 Welcome
 01:45 Introducing Shipping ESM with Mark Erikson
 Mark Erikson (@acemarke)

 Wes Bos on Twitter: “publishing packages that work in esm and cjs is such a nightmare. I’ve run into so many issues today and took forever to get the proper package.json exports. I can’t wait until we’re 100% esm. I think I have every single combo covered.”

 Mark’s Dev Blog

  Blogged Answers: My Experience Modernizing Packages to ESM

 Greatest Hits: The Most Popular and Most Useful Posts I’ve Written

 arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages

 publint

 07:01 How did we get to this space in modules?
 16:30 How do you deal with permutations?
 22:13 Do bundlers get in the way or helping?
 26:16 Are default imports useful?
 30:35 Are the types wrong errors
 33:41 Has TypeScript made this easier?
 37:56 What’s your tool stack for building?
 39:32 How do you test?
 41:35 Will we ever stop bundling?
 48:03 What about source maps?
 52:32 Supper Club Questions
 What is Windows Subsystem for Linux

  Eagle Oceanic Next

 DroidSansMono NF Font

 55:18 React Types has more downloads than React?
 59:42 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Shirley Wu—Taking up space (Keynote, Outlier 2023)

  Shameless Plugs  Replay (@replayio)

 Replay - The time-travel debugger from the future.

  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

Supper Club × Shipping ESM with Mark Erikson

Poslechněte si podcast