Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!

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, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more! <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:24">00:24</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:18">01:18</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:05">02:05</a> SSR JS sites more the norm</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://www.solidjs.com/">solidjs.com</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://remix.run/">Remix - Build Better Websites</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://nextjs.org/">Next.js by Vercel - The React Framework</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://kit.svelte.dev/">SvelteKit • Web development, streamlined</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://astro.build/">Astro</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=04:14">04:14</a> TypeScript Inferred becomes hot</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=05:20">05:20</a> Types In JS?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://github.com/tc39/proposal-type-annotations">ECMAScript proposal for type syntax that is erased - Stage 1</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=07:55">07:55</a> Deno gets hotter</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=11:12">11:12</a> JS runtimes mature</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://htmx.org/"></> htmx</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=11:50">11:50</a> We will see a new TS Type Checker written in Rust</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=14:06">14:06</a> New JS APIs</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://github.com/dudykr/stc/issues/1101">What’s the status of this project? · Issue #1101 · dudykr/stc</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://twitter.com/wesbos/status/1593271021557239809">Wes Bos on X: "Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://github.com/tc39/proposals">tc39/proposals: Tracking ECMAScript Proposals</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://syntax.fm/show/653/js-fundamentals-decorators">JS Fundamentals - Decorators - Syntax #653</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=16:29">16:29</a> Writing towards Winter CG Spec Popular.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://wintercg.org/">WinterCG</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=17:09">17:09</a> Edge Rendering More Common</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://twitter.com/PrettierCode/status/1729183057356497166">Prettier on X: "We setup a $20k bounty for a rust-based compatible printer with prettier.</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://prettier.io/blog/2023/11/27/20k-bounty-was-claimed">$20k Bounty was Claimed! · Prettier</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=18:09">18:09</a> A new JS framework</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=19:05">19:05</a> Page Transitions API</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=19:51">19:51</a> Rust becomes more popular</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=24:00">24:00</a> More WASM</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://syntax.fm/show/643/supper-club-wasm-fastly-edge-and-polyfill-io-with-jake-champion"> Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion - Syntax #643</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://ffmpeg.org/">FFmpeg</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://www.fastly.com">Fastly</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=25:11">25:11</a> React Beta Docs launch after 5 year dev cycle</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=26:47">26:47</a> We start to see CSS Container Queries in production</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=29:05">29:05</a> CanIUse issues?</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="#t=31:20">31:20</a> CSS Subgrid</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="#t=32:56">32:56</a> More AI</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="#t=34:06">34:06</a> Tooling</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://vitejs.dev/">Vite | Next Generation Frontend Tooling</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://biomejs.dev/blog/annoucing-biome/">Announcing Biome | Biome</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://lightningcss.dev/">Lightning CSS</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.rspack.dev/">Rspack</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://turbo.build/pack">Turbopack</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="#t=36:08">36:08</a> People sour on React</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="#t=36:47">36:47</a> People sour on eslint</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="#t=37:16">37:16</a> Houdini does nothing</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://developer.mozilla.org/en-US/docs/Web/Guide/Houdini">CSS Houdini| MDN</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://ishoudinireadyyet.com/">Is Houdini Ready Yet?</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="#t=39:57">39:57</a> How’d we do?</li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href="#t=40:40">40:40</a> Sick picks</li> </ul> <h3 class="code-line" data-line-start="55" data-line-end="56"> <a id="Sick_Picks_55"></a>Sick Picks</h3> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Scott: <a href= "https://www.amazon.com/dp/B0C8VHZR14?linkCode=sl1&linkId=c9bd77fdf054ba7e4160bdcd6dd0e03b&language=en_US"> Super Mario Bros.™ Wonder</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> Wes: <a href= "https://www.amazon.ca/dp/B08CDQ52TB?crid=UHSDR920V5YG&keywords=tineco+S11&sprefix=tineco+s11,aps,125&th=1&language=en_US&sr=8-2&linkCode=gs2&linkId=8656480707cdfa3ce51e055cd35083ff&tag=isi777-20"> Tineco Pure ONE S11 Cordless Vacuum Cleaner</a></li> </ul> <h3 class="code-line" data-line-start="60" data-line-end="61"> <a id="Shameless_Plugs_60"></a>Shameless Plugs</h3> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="63" data-line-end="65"> Wes: <a href="https://wesbos.com/courses">Wes Bos Courses</a></li> </ul> <h3 class="code-line" data-line-start="65" data-line-end="66"> <a id="Hit_us_up_on_Socials_65"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a>

In this episode of Syntax, Wes and Scott review their 2023 predictions and see how they did on ideas like Deno getting hotter, new JS APIs, WASM, Houdini, CSS Container Queries, and more!
 Show Notes  00:24 Welcome
 01:18 Syntax Brought to you by Sentry
 02:05 SSR JS sites more the norm
 solidjs.com

 Remix - Build Better Websites

 Next.js by Vercel - The React Framework

 SvelteKit • Web development, streamlined

 Astro

 04:14 TypeScript Inferred becomes hot
 05:20 Types In JS?
 ECMAScript proposal for type syntax that is erased - Stage 1

 07:55 Deno gets hotter
 11:12 JS runtimes mature
  htmx

 11:50 We will see a new TS Type Checker written in Rust
 14:06 New JS APIs
 What’s the status of this project? · Issue #1101 · dudykr/stc

 Wes Bos on X: "Pretty excited about the new JavaScript non-mutating array methods. Currently in stage 3

 tc39/proposals: Tracking ECMAScript Proposals

 JS Fundamentals - Decorators - Syntax #653

 16:29 Writing towards Winter CG Spec Popular.
 WinterCG

 17:09 Edge Rendering More Common
 Prettier on X: "We setup a $20k bounty for a rust-based compatible printer with prettier.

 $20k Bounty was Claimed! · Prettier

 18:09 A new JS framework
 19:05 Page Transitions API
 19:51 Rust becomes more popular
 24:00 More WASM
  Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion - Syntax #643

 FFmpeg

 Fastly

 25:11 React Beta Docs launch after 5 year dev cycle
 26:47 We start to see CSS Container Queries in production
 29:05 CanIUse issues?
 31:20 CSS Subgrid
 32:56 More AI
 34:06 Tooling
 Vite | Next Generation Frontend Tooling

 Announcing Biome | Biome

 Lightning CSS

 Rspack

 Turbopack

 36:08 People sour on React
 36:47 People sour on eslint
 37:16 Houdini does nothing
 CSS Houdini| MDN

 Is Houdini Ready Yet?

 39:57 How’d we do?
 40:40 Sick picks
  Sick Picks  Scott: Super Mario Bros.™ Wonder

 Wes: Tineco Pure ONE S11 Cordless Vacuum Cleaner

  Shameless Plugs  Scott: Sentry

 Wes: Wes Bos Courses

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

Aplikace Youradio Talk

707: What happened in JS, CSS And Web Dev in 2023? 2023 Predictions Results!

Poslechněte si podcast