Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

TypeScript Tooling Explained

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 TypeScript tooling, build tools, configs, and editors.</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= "MagicBell__Sponsor_6" name="MagicBell__Sponsor_6"></a>MagicBell - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.</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:08">00:08</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=01:57">01:57</a></strong> Tooling</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://www.typescriptlang.org/docs/handbook/compiler-options.html"> tsc</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://esbuild.github.io">esbuild</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://swc.rs">swc</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://bun.sh">bun</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://ziglearn.org">Zig</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=13:45">13:45</a></strong> LogRocket</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=15:01">15:01</a></strong> Server side or node-ish</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://deno.land">Deno</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://www.npmjs.com/package/ts-node">ts-node</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://github.com/gadget-inc/wds">wds</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=26:09">26:09</a></strong> MagicBell</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=27:42">27:42</a></strong> Build tools</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://vitejs.dev">Vite</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://parceljs.org">Parcel</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://nextjs.org">Nextjs</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://kit.svelte.dev">Svelte Kit</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://rome.tools">Rome</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=33:25">33:25</a></strong> Configs</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://www.typescriptlang.org/tsconfig#module">tsconfig</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://typescript-eslint.io">typescript-eslint</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=39:08">39:08</a></strong> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=40:00">40:00</a></strong> Editors</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://code.visualstudio.com">VS Code</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.jetbrains.com/webstorm/">Webstorm</a></li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <strong><a href="#t=44:58">44:58</a></strong> ××× SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="_SIIIIICK__PIIIICKS__44" name= "_SIIIIICK__PIIIICKS__44"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Scott: <a href="https://amzn.to/3Nzziuv">Tonie</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Wes: <a href="https://www.burstoralcare.com/">Burst Toothbrush</a></li> </ul> <h2 class="code-line" data-line-start="49" data-line-end="50"> <a id="Shameless_Plugs_49" name="Shameless_Plugs_49"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Scott: <a href= "https://leveluptutorials.com/tutorials/keystone-js/introduction">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" 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 through TypeScript tooling, build tools, configs, and editors.
 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.
 MagicBell - Sponsor MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
 Show Notes  00:08 Welcome
 01:57 Tooling
  tsc

 esbuild

 swc

 bun

 Zig

 13:45 LogRocket
 15:01 Server side or node-ish
 Deno

 ts-node

 wds

 26:09 MagicBell
 27:42 Build tools
 Vite

 Parcel

 Nextjs

 Svelte Kit

 Rome

 33:25 Configs
 tsconfig

 typescript-eslint

 39:08 Sponsor: Freshbooks
 40:00 Editors
 VS Code

 Webstorm

 44:58 ××× SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Tonie

 Wes: Burst Toothbrush

  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

TypeScript Tooling Explained

Poslechněte si podcast