Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

2021 In Review

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.

In this episode of Syntax, Scott and Wes review their predictions and highlights for 2021. <h2 id="tech-domains---sponsor" class="code-line" data-line="9"> .TECH Domains - Sponsor</h2> .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you're looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting <a title= "https://go.tech/syntaxistech" href="https://go.tech/syntaxistech" data-href= "https://go.tech/syntaxistech">go.tech/syntaxistech</a> and using the coupon code "syntax5". <h2 id="sentry---sponsor" class="code-line" data-line="13">Sentry - Sponsor</h2> If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a title="https://sentry.io" href= "https://sentry.io/" data-href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <h2 id="mux---sponsor" class="code-line" data-line="17">Mux - Sponsor</h2> Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit <a title="https://mux.com/syntax" href= "https://mux.com/syntax" data-href= "https://mux.com/syntax">mux.com/syntax</a>. <h2 id="show-notes" class="code-line" data-line="21">Show Notes</h2> <ul class="code-line" data-line="23"> <li class="code-line" data-line="23"><a title="#t=02:21" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=02:21" data-href="#t=02:21">02:21</a> Wes highlights</li> <li class="code-line" data-line="24"><a title="#t=05:33" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=05:33" data-href="#t=05:33">05:33</a> Scott's highlights</li> <li class="code-line" data-line="25"><a title="#t=07:42" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=07:42" data-href="#t=07:42">07:42</a> Writing admin tools for fun</li> <li class="code-line" data-line="26"><a title="#t=13:33" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=13:33" data-href="#t=13:33">13:33</a> Sponsor: .TECH Domain Name</li> <li class="code-line" data-line="27"><a title="#t=14:30" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=14:30" data-href="#t=14:30">14:30</a> Tech that was hot in 2021</li> <li class="code-line" data-line="28"><a title="#t=17:18" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=17:18" data-href="#t=17:18">17:18</a> Sveltekit</li> <li class="code-line" data-line="29"><a title= "https://github.com/Rich-Harris/pancake" href= "https://github.com/Rich-Harris/pancake" data-href= "https://github.com/Rich-Harris/pancake">Pancake by Rich Harris</a></li> <li class="code-line" data-line="30"><a title="https://svelte.dev" href="https://svelte.dev/" data-href= "https://svelte.dev">Svelte</a></li> <li class="code-line" data-line="31"><a title= "https://kit.svelte.dev" href="https://kit.svelte.dev/" data-href= "https://kit.svelte.dev">Svelte Kit</a></li> <li class="code-line" data-line="32"><a title="#t=19:54" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=19:54" data-href="#t=19:54">19:54</a> Remix</li> <li class="code-line" data-line="33"><a title= "https://remix-project.org" href="https://remix-project.org/" data-href="https://remix-project.org">Remix</a></li> <li class="code-line" data-line="34"><a title="#t=20:36" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=20:36" data-href="#t=20:36">20:36</a> Astro</li> <li class="code-line" data-line="35"><a title="https://astro.build" href="https://astro.build/" data-href= "https://astro.build">Astro</a></li> <li class="code-line" data-line="36"><a title="#t=22:51" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=22:51" data-href="#t=22:51">22:51</a> NextJS 11 and 12</li> <li class="code-line" data-line="37"><a title="https://nextjs.org" href="https://nextjs.org/" data-href= "https://nextjs.org">NextJS</a></li> <li class="code-line" data-line="38"><a title="#t=25:14" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=25:14" data-href="#t=25:14">25:14</a> Vite and Parcel 2</li> <li class="code-line" data-line="39"><a title="https://vitejs.dev" href="https://vitejs.dev/" data-href= "https://vitejs.dev">Vite</a></li> <li class="code-line" data-line="40"><a title= "https://parceljs.org" href="https://parceljs.org/" data-href= "https://parceljs.org">Parcel</a></li> <li class="code-line" data-line="41"><a title="#t=26:52" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=26:52" data-href="#t=26:52">26:52</a> Web3</li> <li class="code-line" data-line="42"><a title="#t=28:00" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=28:00" data-href="#t=28:00">28:00</a> Prisma</li> <li class="code-line" data-line="43"><a title= "https://www.prisma.io" href="https://www.prisma.io/" data-href= "https://www.prisma.io">Prisma</a></li> <li class="code-line" data-line="44"><a title="#t=30:35" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=30:35" data-href="#t=30:35">30:35</a> Typescript</li> <li class="code-line" data-line="45"><a title= "https://www.typescriptlang.org" href= "https://www.typescriptlang.org/" data-href= "https://www.typescriptlang.org">Typescript</a></li> <li class="code-line" data-line="46"><a title="#t=33:08" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=33:08" data-href="#t=33:08">33:08</a> Sponsor: Sentry</li> <li class="code-line" data-line="47"><a title="#t=35:25" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=35:25" data-href="#t=35:25">35:25</a> Reviewing past predictions</li> <li class="code-line" data-line="48"><a title="#t=36:54" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=36:54" data-href="#t=36:54">36:54</a> ESM</li> <li class="code-line" data-line="49"><a title="#t=39:47" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=39:47" data-href="#t=39:47">39:47</a> Remote work will grow up</li> <li class="code-line" data-line="50"><a title="https://discord.com" href="https://discord.com/" data-href= "https://discord.com">Discord</a></li> <li class="code-line" data-line="51"><a title="https://notion.so" href="https://notion.so/" data-href= "https://notion.so">Notion</a></li> <li class="code-line" data-line="52"><a title="https://height.app" href="https://height.app/" data-href= "https://height.app">Height</a></li> <li class="code-line" data-line="53"><a title="#t=40:38" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=40:38" data-href="#t=40:38">40:38</a> Deno</li> <li class="code-line" data-line="54"><a title="#t=45:11" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=45:11" data-href="#t=45:11">45:11</a> React</li> <li class="code-line" data-line="55"><a title="#t=46:02" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=46:02" data-href="#t=46:02">46:02</a> Tooling fade away</li> <li class="code-line" data-line="56"><a title="#t=47:29" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=47:29" data-href="#t=47:29">47:29</a> Rome</li> <li class="code-line" data-line="57"><a title="https://rome.tools" href="https://rome.tools/" data-href= "https://rome.tools">Rome</a></li> <li class="code-line" data-line="58"><a title="#t=48:47" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=48:47" data-href="#t=48:47">48:47</a> Rust</li> <li class="code-line" data-line="59"><a title="#t=49:36" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=49:36" data-href="#t=49:36">49:36</a> Programming communities</li> <li class="code-line" data-line="60"><a title= "https://media.twitter.com/en/articles/products/2021/twitter-spaces" href= "https://media.twitter.com/en/articles/products/2021/twitter-spaces" data-href= "https://media.twitter.com/en/articles/products/2021/twitter-spaces"> Twitter Spaces</a></li> <li class="code-line" data-line="61"><a title= "https://www.clubhouse.com" href="https://www.clubhouse.com/" data-href="https://www.clubhouse.com">Clubhouse</a></li> <li class="code-line" data-line="62"><a title="https://circle.so" href="https://circle.so/" data-href= "https://circle.so">Circle</a></li> <li class="code-line" data-line="63"><a title= "https://docs.github.com/en/discussions" href= "https://docs.github.com/en/discussions" data-href= "https://docs.github.com/en/discussions">Github Discussions</a></li> <li class="code-line" data-line="64"><a title= "https://www.tiktok.com" href="https://www.tiktok.com/" data-href= "https://www.tiktok.com">Tiktok</a></li> <li class="code-line" data-line="65"><a title= "https://www.tiktok.com/@benawad" href= "https://www.tiktok.com/@benawad" data-href= "https://www.tiktok.com/@benawad">Benawad on TikTok</a></li> <li class="code-line" data-line="66"><a title= "https://www.tiktok.com/@wesbos?" href= "https://www.tiktok.com/@wesbos" data-href= "https://www.tiktok.com/@wesbos?">Wes Bos on TikTok</a></li> <li class="code-line" data-line="67"><a title="#t=51:08" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=51:08" data-href="#t=51:08">51:08</a> Wasm</li> <li class="code-line" data-line="68"><a title="#t=51:26" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=51:26" data-href="#t=51:26">51:26</a> Typescript</li> <li class="code-line" data-line="69"><a title="#t=52:35" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=52:35" data-href="#t=52:35">52:35</a> React</li> <li class="code-line" data-line="70"><a title="#t=53:40" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=53:40" data-href="#t=53:40">53:40</a> More web component frameworks</li> <li class="code-line" data-line="71"><a title="#t=56:43" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=56:43" data-href="#t=56:43">56:43</a> Gatsby</li> <li class="code-line" data-line="72"><a title="#t=57:26" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=57:26" data-href="#t=57:26">57:26</a> CSS updates</li> <li class="code-line" data-line="73"><a title= "https://syntax.fm/show/354/the-surprisingly-exciting-world-of-html-elements" href= "https://syntax.fm/show/354/the-surprisingly-exciting-world-of-html-elements" data-href= "https://syntax.fm/show/354/the-surprisingly-exciting-world-of-html-elements"> Syntax 354 with Miriam Suzanne</a></li> <li class="code-line" data-line="74"><a title="#t=00:06" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=00:06" data-href="#t=00:06">01:00:06</a> Serverless</li> <li class="code-line" data-line="75"><a title="#t=01:13" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=01:13" data-href="#t=01:13">01:01:13</a> Enterprise jamstack</li> <li class="code-line" data-line="76"><a title="#t=02:01" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=02:01" data-href="#t=02:01">01:02:01</a> Sponsor: Mux</li> <li class="code-line" data-line="77"><a title="#t=03:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=03:05" data-href="#t=03:05">01:03:05</a> Sick Picks</li> <li class="code-line" data-line="78"><a title="#t=08:03" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/418%20-%202021%20In%20Review.md#t=08:03" data-href="#t=08:03">01:08:03</a> Shameless Plug</li> </ul> <h2 id= "%C3%97%C3%97%C3%97-siiiiick-%C3%97%C3%97%C3%97-piiiicks-%C3%97%C3%97%C3%97" class="code-line" data-line="80">××× SIIIIICK ××× PIIIICKS ×××</h2> <ul class="code-line" data-line="82"> <li class="code-line" data-line="82">Scott: <a title= "https://apps.apple.com/au/app/rocket-league-sideswipe/id1549027048" href= "https://apps.apple.com/au/app/rocket-league-sideswipe/id1549027048" data-href= "https://apps.apple.com/au/app/rocket-league-sideswipe/id1549027048">Rocket League Sideswipe</a></li> <li class="code-line" data-line="83">Wes: <a title= "https://decider.com/2021/03/30/home-work-magnolia-network-discovery-plus-new-fixer-upper/" href= "https://decider.com/2021/03/30/home-work-magnolia-network-discovery-plus-new-fixer-upper/" data-href= "https://decider.com/2021/03/30/home-work-magnolia-network-discovery-plus-new-fixer-upper/">Home Work on Discovery+</a></li> </ul> <h2 id="shameless-plugs" class="code-line" data-line="85">Shameless Plugs</h2> <ul class="code-line" data-line="87"> <li class="code-line" data-line="87">Scott: <a title= "https://www.leveluptutorials.com/pro" href= "https://www.leveluptutorials.com/pro" data-href= "https://www.leveluptutorials.com/pro">Astro Course</a> - Sign up for the year and save 50%!</li> <li class="code-line" data-line="88">Wes: <a title= "https://wesbos.com/courses/" href="https://wesbos.com/courses/" data-href="https://wesbos.com/courses/">All Courses</a> - Black Friday sale!</li> <li class="code-line" data-line="89"><a title= "https://www.gitpod.io/blog/psychology-of-devx" href= "https://www.gitpod.io/blog/psychology-of-devx" data-href= "https://www.gitpod.io/blog/psychology-of-devx">Psychology of Devx</a></li> <li class="code-line" data-line="90"><a title= "https://www.gitpod.io/community" href= "https://www.gitpod.io/community" data-href= "https://www.gitpod.io/community">Gitpod Community</a></li> <li class="code-line" data-line="91"><a title= "https://www.gitpod.io/blog/workshops-as-code" href= "https://www.gitpod.io/blog/workshops-as-code" data-href= "https://www.gitpod.io/blog/workshops-as-code">Workshops as Code</a></li> <li class="code-line" data-line="92"><a title= "https://ghuntley.com" href="https://ghuntley.com/" data-href= "https://ghuntley.com">Ghuntley.com</a></li> </ul> <h2 id="tweet-us-your-tasty-treats" class="code-line" data-line= "94">Tweet us your tasty treats</h2> <ul class="code-line" data-line="96"> <li class="code-line" data-line="96"><a title= "https://www.instagram.com/stolinski/" href= "https://www.instagram.com/stolinski/" data-href= "https://www.instagram.com/stolinski/">Scott's Instagram</a></li> <li class="code-line" data-line="97"><a title= "https://www.instagram.com/LevelUpTutorials/" href= "https://www.instagram.com/LevelUpTutorials/" data-href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="code-line" data-line="98"><a title= "https://www.instagram.com/wesbos/" href= "https://www.instagram.com/wesbos/" data-href= "https://www.instagram.com/wesbos/">Wes' Instagram</a></li> <li class="code-line" data-line="99"><a title= "https://twitter.com/wesbos" href="https://twitter.com/wesbos" data-href="https://twitter.com/wesbos">Wes' Twitter</a></li> <li class="code-line" data-line="100"><a title= "https://www.facebook.com/wesbos.developer" href= "https://www.facebook.com/wesbos.developer" data-href= "https://www.facebook.com/wesbos.developer">Wes' Facebook</a></li> <li class="code-line" data-line="101"><a title= "https://twitter.com/stolinski" href= "https://twitter.com/stolinski" data-href= "https://twitter.com/stolinski">Scott's Twitter</a></li> <li class="code-line" data-line="102">Make sure to include <a title="https://twitter.com/SyntaxFM" href= "https://twitter.com/SyntaxFM" data-href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes review their predictions and highlights for 2021.
 .TECH Domains - Sponsor.TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you're looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out.tech Domains. Syntax listeners can snap their.TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code "syntax5".
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax.
 Show Notes 
02:21 Wes highlights

05:33 Scott's highlights

07:42 Writing admin tools for fun

13:33 Sponsor:.TECH Domain Name

14:30 Tech that was hot in 2021

17:18 Sveltekit
 Pancake by Rich Harris
 Svelte
 Svelte Kit

19:54 Remix
 Remix

20:36 Astro
 Astro

22:51 NextJS 11 and 12
 NextJS

25:14 Vite and Parcel 2
 Vite
 Parcel

26:52 Web3

28:00 Prisma
 Prisma

30:35 Typescript
 Typescript

33:08 Sponsor: Sentry

35:25 Reviewing past predictions

36:54 ESM

39:47 Remote work will grow up
 Discord
 Notion
 Height

40:38 Deno

45:11 React

46:02 Tooling fade away

47:29 Rome
 Rome

48:47 Rust

49:36 Programming communities
 Twitter Spaces
 Clubhouse
 Circle
 Github Discussions
 Tiktok
 Benawad on TikTok
 Wes Bos on TikTok

51:08 Wasm

51:26 Typescript

52:35 React

53:40 More web component frameworks

56:43 Gatsby

57:26 CSS updates
 Syntax 354 with Miriam Suzanne

01:00:06 Serverless

01:01:13 Enterprise jamstack

01:02:01 Sponsor: Mux

01:03:05 Sick Picks

01:08:03 Shameless Plug
 ××× SIIIIICK ××× PIIIICKS ××× Scott: Rocket League Sideswipe

 Wes: Home Work on Discovery+

 Shameless Plugs Scott: Astro Course - Sign up for the year and save 50%!
 Wes: All Courses - Black Friday sale!
 Psychology of Devx
 Gitpod Community
 Workshops as Code
 Ghuntley.com
 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

2021 In Review

Poslechněte si podcast