Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

727: How to Code: Opinionated TypeScript Stack + Tooling Choices 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.

Join Wes and Scott for a 30,000 foot, 'soup-to-nuts' view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting. <h3 id="show-notes" class="code-line" dir="auto" data-line="10"> Show Notes</h3> <ul class="code-line" dir="auto" data-line="12"> <li class="code-line" dir="auto" data-line="12"><a title= "#t=00:00" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=00:00" data-href="#t=00:00">00:00</a> Welcome!</li> <li class="code-line" dir="auto" data-line="13"><a title= "#t=00:21" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=00:21" data-href="#t=00:21">00:21</a> 30,000 foot view of web development</li> <li class="code-line code-active-line" dir="auto" data-line="14"> <a title="#t=02:37" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=02:37" data-href="#t=02:37">02:37</a> Brought to you by Sentry.io</li> <li class="code-line" dir="auto" data-line="15"><a title= "#t=02:55" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=02:55" data-href="#t=02:55">02:55</a> Starting with design tools.</li> <li class="code-line" dir="auto" data-line="16"><a title= "#t=06:10" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=06:10" data-href="#t=06:10">06:10</a> Code Tooling <ul class="code-line" dir="auto" data-line="17"> <li class="code-line" dir="auto" data-line="17"><a title= "#t=06:22" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=06:22" data-href="#t=06:22">06:22</a> Text Editors</li> <li class="code-line" dir="auto" data-line="18"><a title= "#t=09:34" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=09:34" data-href="#t=09:34">09:34</a> Terminal</li> <li class="code-line" dir="auto" data-line="19"><a title= "#t=14:28" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=14:28" data-href="#t=14:28">14:28</a> Build Tools</li> <li class="code-line" dir="auto" data-line="20"><a title= "#t=16:07" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=16:07" data-href="#t=16:07">16:07</a> Browser and dev tools</li> <li class="code-line" dir="auto" data-line="21"><a title= "#t=18:21" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=18:21" data-href="#t=18:21">18:21</a> Formatter and linter.</li> </ul> </li> <li class="code-line" dir="auto" data-line="22"><a title= "#t=21:43" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=21:43" data-href="#t=21:43">21:43</a> CSS (how you style your website).</li> <li class="code-line" dir="auto" data-line="23"><a title= "#t=25:34" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=25:34" data-href="#t=25:34">25:34</a> Programming languages.</li> <li class="code-line" dir="auto" data-line="24"><a title= "#t=27:14" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=27:14" data-href="#t=27:14">27:14</a> Backend with metaframework.</li> <li class="code-line" dir="auto" data-line="25"><a title= "#t=29:36" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=29:36" data-href="#t=29:36">29:36</a> Backend without metaframework.</li> <li class="code-line" dir="auto" data-line="26"><a title= "#t=32:20" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=32:20" data-href="#t=32:20">32:20</a> Runtimes (JavaScript).</li> <li class="code-line" dir="auto" data-line="27"><a title= "https://syntax.fm/show/488/what-is-bun-the-new-js-runtime" href= "https://syntax.fm/show/488/what-is-bun-the-new-js-runtime" data-href= "https://syntax.fm/show/488/what-is-bun-the-new-js-runtime">What is Bun? The New JS Runtime</a></li> <li class="code-line" dir="auto" data-line="28"><a title= "https://syntax.fm/show/322/the-deno-show" href= "https://syntax.fm/show/322/the-deno-show" data-href= "https://syntax.fm/show/322/the-deno-show">The Deno Show</a></li> <li class="code-line" dir="auto" data-line="29"><a title= "#t=34:02" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=34:02" data-href="#t=34:02">34:02</a> User interface libraries.</li> <li class="code-line" dir="auto" data-line="30"><a title= "https://shoelace.style/" href="https://shoelace.style/" data-href= "https://shoelace.style/">Shoelace.style</a></li> <li class="code-line" dir="auto" data-line="31"><a title= "#t=39:43" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=39:43" data-href="#t=39:43">39:43</a> Data management: Databases</li> <li class="code-line" dir="auto" data-line="32"><a title= "#t=41:42" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=41:42" data-href="#t=41:42">41:42</a> Data management: ORM</li> <li class="code-line" dir="auto" data-line="33"><a title= "https://syntax.fm/show/633/wtf-is-an-orm" href= "https://syntax.fm/show/633/wtf-is-an-orm" data-href= "https://syntax.fm/show/633/wtf-is-an-orm">WTF is an ORM</a></li> <li class="code-line" dir="auto" data-line="34"><a title= "https://syntax.fm/show/721/you-should-learn-drizzle-the-typescript-sql-orm" href= "https://syntax.fm/show/721/you-should-learn-drizzle-the-typescript-sql-orm" data-href= "https://syntax.fm/show/721/you-should-learn-drizzle-the-typescript-sql-orm"> You should learn Drizzle, the TypeScript SQL ORM</a></li> <li class="code-line" dir="auto" data-line="35"><a title= "#t=42:53" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=42:53" data-href="#t=42:53">42:53</a> Other data management considerations.</li> <li class="code-line" dir="auto" data-line="36"><a title= "#t=43:33" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=43:33" data-href="#t=43:33">43:33</a> Image pipelines.</li> <li class="code-line" dir="auto" data-line="37"><a title= "#t=45:52" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=45:52" data-href="#t=45:52">45:52</a> Hosting, CDN, CI.</li> <li class="code-line" dir="auto" data-line="38"><a title= "https://syntax.fm/show/615/where-should-you-host-your-app-hosting-providers-compared" href= "https://syntax.fm/show/615/where-should-you-host-your-app-hosting-providers-compared" data-href= "https://syntax.fm/show/615/where-should-you-host-your-app-hosting-providers-compared"> Where Should You Host Your App? Hosting Providers Compared</a></li> <li class="code-line" dir="auto" data-line="39"><a title= "https://syntax.fm/show/439/hasty-treat-wtf-ssr-vs-jamstack-vs-serverless" href= "https://syntax.fm/show/439/hasty-treat-wtf-ssr-vs-jamstack-vs-serverless" data-href= "https://syntax.fm/show/439/hasty-treat-wtf-ssr-vs-jamstack-vs-serverless"> Hasty Treat WTF × SSR vs JamStack vs Serverless?</a></li> <li class="code-line" dir="auto" data-line="40"><a title= "#t=47:21" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=47:21" data-href="#t=47:21">47:21</a> Hosting your site.</li> <li class="code-line" dir="auto" data-line="41"><a title= "#t=50:19" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=50:19" data-href="#t=50:19">50:19</a> The finishing touches. <ul class="code-line" dir="auto" data-line="42"> <li class="code-line" dir="auto" data-line="42"><a title= "#t=50:26" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=50:26" data-href="#t=50:26">50:26</a> Brought to you by Sentry.io</li> <li class="code-line" dir="auto" data-line="43"><a title= "#t=52:18" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=52:18" data-href="#t=52:18">52:18</a> Captcha</li> </ul> </li> <li class="code-line" dir="auto" data-line="44"><a title= "#t=55:03" href= "https://file+.vscode-resource.vscode-cdn.net/Users/randyrektor/Desktop/Syntax%20Edits/727%20-%20How%20to%20Code%20Opinionated%20TypeScript%20Stack%20Tooling%20Choices%20Explained/How%20to%20Code-%20Opinionated%20TypeScript%20Stack%20%2B%20Tooling%20Choices%20Explained.md#t=55:03" data-href="#t=55:03">55:03</a> Sick Picks + Shameless Plugs.</li> </ul> <h3 id="sick-picks" class="code-line" dir="auto" data-line="46"> Sick Picks</h3> <ul class="code-line" dir="auto" data-line="48"> <li class="code-line" dir="auto" data-line="48"> Scott: <a title="https://www.youtube.com/@greatscottlab" href= "https://www.youtube.com/@greatscottlab" data-href= "https://www.youtube.com/@greatscottlab">GreatScottLab</a>, <a title="https://syntax.fm/show/594/potluck-testing-animations-tools-for-learning-coding-related-injuries" href= "https://syntax.fm/show/594/potluck-testing-animations-tools-for-learning-coding-related-injuries" data-href= "https://syntax.fm/show/594/potluck-testing-animations-tools-for-learning-coding-related-injuries">Show #594</a></li> <li class="code-line" dir="auto" data-line="49">Wes: <a title= "https://www.aliexpress.us/item/3256805764094416.html?spm=a2g0o.order_list.order_list_main.41.66671802K6Yx2m&gatewayAdapt=glo2usa4itemAdapt" href= "https://www.aliexpress.us/item/3256805764094416.html?spm=a2g0o.order_list.order_list_main.41.66671802K6Yx2m&gatewayAdapt=glo2usa4itemAdapt" data-href= "https://www.aliexpress.us/item/3256805764094416.html?spm=a2g0o.order_list.order_list_main.41.66671802K6Yx2m&gatewayAdapt=glo2usa4itemAdapt">AliExpress Board</a>, <a title= "https://twitter.com/wesbos/status/1737299386114142714" href= "https://twitter.com/wesbos/status/1737299386114142714" data-href= "https://twitter.com/wesbos/status/1737299386114142714">Wes' Demo</a></li> </ul> <h3 id="shameless-plugs" class="code-line" dir="auto" data-line= "51">Shameless Plugs</h3> <ul class="code-line" dir="auto" data-line="53"> <li class="code-line" dir="auto" data-line="53"> Scott: <a title="https://www.youtube.com/@syntaxfm" href= "https://www.youtube.com/@syntaxfm" data-href= "https://www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> <li class="code-line" dir="auto" data-line="54">Wes: <a title= "https://www.youtube.com/@syntaxfm" href= "https://www.youtube.com/@syntaxfm" data-href= "https://www.youtube.com/@syntaxfm">Syntax on YouTube</a></li> </ul> <h3 id="hit-us-up-on-socials" class="code-line" dir="auto" data-line="56">Hit us up on Socials!</h3> Syntax: <a title="https://twitter.com/syntaxfm" href= "https://twitter.com/syntaxfm" data-href= "https://twitter.com/syntaxfm">X</a> <a title= "https://www.instagram.com/syntax_fm/" href= "https://www.instagram.com/syntax_fm/" data-href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a title= "https://www.tiktok.com/@syntaxfm" href= "https://www.tiktok.com/@syntaxfm" data-href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a title= "https://www.linkedin.com/company/96077407/admin/feed/posts/" href= "https://www.linkedin.com/company/96077407/admin/feed/posts/" data-href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a title="https://www.threads.net/@syntax_fm" href="https://www.threads.net/@syntax_fm" data-href= "https://www.threads.net/@syntax_fm">Threads</a> Wes: <a title= "https://twitter.com/wesbos" href="https://twitter.com/wesbos" data-href="https://twitter.com/wesbos">X</a> <a title= "https://www.instagram.com/wesbos/" href= "https://www.instagram.com/wesbos/" data-href= "https://www.instagram.com/wesbos/">Instagram</a> <a title= "https://www.tiktok.com/@wesbos" href= "https://www.tiktok.com/@wesbos" data-href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a title= "https://www.linkedin.com/in/wesbos/" href= "https://www.linkedin.com/in/wesbos/" data-href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a title= "https://www.threads.net/@wesbos" href= "https://www.threads.net/@wesbos" data-href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a title= "https://twitter.com/stolinski" href= "https://twitter.com/stolinski" data-href= "https://twitter.com/stolinski">X</a> <a title= "https://www.instagram.com/stolinski/" href= "https://www.instagram.com/stolinski/" data-href= "https://www.instagram.com/stolinski/">Instagram</a> <a title= "https://www.tiktok.com/@stolinski" href= "https://www.tiktok.com/@stolinski" data-href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a title= "https://www.linkedin.com/in/stolinski/" href= "https://www.linkedin.com/in/stolinski/" data-href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a title="https://www.threads.net/@stolinski" href="https://www.threads.net/@stolinski" data-href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a title="https://twitter.com/randyrektor" href= "https://twitter.com/randyrektor" data-href= "https://twitter.com/randyrektor">X</a> <a title= "https://www.instagram.com/randyrektor/" href= "https://www.instagram.com/randyrektor/" data-href= "https://www.instagram.com/randyrektor/">Instagram</a> <a title="https://www.youtube.com/@randyrektor" href="https://www.youtube.com/@randyrektor" data-href= "https://www.youtube.com/@randyrektor">YouTube</a> <a title= "https://www.threads.net/@randyrektor" href= "https://www.threads.net/@randyrektor" data-href= "https://www.threads.net/@randyrektor">Threads</a>

Join Wes and Scott for a 30,000 foot, ‘soup-to-nuts’ view of web development. From choosing design tools, website styling, and programming languages, to backend infrastructure, data management, and hosting.
 Show Notes  00:00 Welcome!
 00:21 30,000 foot view of web development
 02:37 Brought to you by Sentry.io

 02:55 Starting with design tools.
 06:10 Code Tooling  06:22 Text Editors
 09:34 Terminal
 14:28 Build Tools
 16:07 Browser and dev tools
 18:21 Formatter and linter.

 21:43 CSS (how you style your website).
 25:34 Programming languages.
 27:14 Backend with metaframework.
 29:36 Backend without metaframework.
 32:20 Runtimes (JavaScript).
 What is Bun? The New JS Runtime

 The Deno Show

 34:02 User interface libraries.
 Shoelace.style

 39:43 Data management: Databases
 41:42 Data management: ORM
 WTF is an ORM

  You should learn Drizzle, the TypeScript SQL ORM

 42:53 Other data management considerations.
 43:33 Image pipelines.
 45:52 Hosting, CDN, CI.
  Where Should You Host Your App? Hosting Providers Compared

  Hasty Treat WTF × SSR vs JamStack vs Serverless?

 47:21 Hosting your site.
 50:19 The finishing touches. 50:26 Brought to you by Sentry.io

 52:18 Captcha

 55:03 Sick Picks + Shameless Plugs.
  Sick Picks  Scott: GreatScottLab, Show #594

 Wes: AliExpress Board, Wes’ Demo

  Shameless Plugs  Scott: Syntax on YouTube

 Wes: Syntax on YouTube

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

727: How to Code: Opinionated TypeScript Stack + Tooling Choices Explained

Poslechněte si podcast