Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

The Svelte + SvelteKit Show

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 reviews his experience building with Svelte and SvelteKit including templating, data fetching, actions, managing state, request handlers, and more.</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:10">00:10</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:12">01:12</a></strong> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=02:11">02:11</a></strong> What is Svelte vs SvelteKit</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://syntax.fm/show/390/from-react-to-sveltekit">From React To SvelteKit — Syntax Podcast 390</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://syntax.fm/show/173/hasty-treat-wes-and-scott-look-at-svelte-3"> Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://svelte.dev/">Svelte • Cybernetically enhanced web apps</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"> <strong><a href="#t=05:59">05:59</a></strong> Templating in Svelte</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=18:20">18:20</a></strong> Data fetching in SvelteKit</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=25:23">25:23</a></strong> Actions</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=28:58">28:58</a></strong> State</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=32:41">32:41</a></strong> Binding values</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=36:18">36:18</a></strong> Hooks</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=37:25">37:25</a></strong> Request handlers</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://svelte.dev/docs/special-elements#svelte-window">Special elements • Docs • Svelte</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://github.com/syntaxfm/website/blob/v2/src/actions/anchor.ts"> website/src/actions/anchor.ts at v2 · syntaxfm/website</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://github.com/syntaxfm/website/blob/v2/src/actions/click_outside.ts"> website/src/actions/click_outside.ts at v2 · syntaxfm/website</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=39:23">39:23</a></strong> Svelte Actions</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=42:26">42:26</a></strong> Popover API</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=45:33">45:33</a></strong> Routing</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=47:22">47:22</a></strong> Layouts</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=50:08">50:08</a></strong> Styling</li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <strong><a href="#t=57:09">57:09</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="28" data-line-end="29"> <a id="_SIIIIICK__PIIIICKS__28"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> Scott: <a href= "https://www.amazon.com/dp/B0BZSD2L1W?linkCode=sl1&linkId=3c99452f2f410bd473c91749cfa27a6f&language=en_US"> Aqara Smart Lock U100</a></li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Wes: <a href= "https://www.amazon.ca/dp/B07QXKNDSW?crid=23KX82S9DQKYG&keywords=bose+wc35+ear+pads+flower&sprefix=bose+wc35+ear+pads+flower,aps,105&th=1&language=en_US&sr=8-18&linkCode=gs2&linkId=5d4c231bde102d4022499ff9ea813b91&tag=isi777-20"> Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral)</a></li> </ul> <h2 class="code-line" data-line-start="33" data-line-end="34"> <a id="Shameless_Plugs_33"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="36" data-line-end="38"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="38" data-line-end="39"> <a id="Tweet_us_your_tasty_treats_38"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this episode of Syntax, Wes reviews his experience building with Svelte and SvelteKit including templating, data fetching, actions, managing state, request handlers, and more.
 Show Notes  00:10 Welcome
 01:12 Syntax Brought to you by Sentry
 02:11 What is Svelte vs SvelteKit
 From React To SvelteKit — Syntax Podcast 390

  Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173

 Svelte • Cybernetically enhanced web apps

 SvelteKit • Web development, streamlined

 05:59 Templating in Svelte
 18:20 Data fetching in SvelteKit
 25:23 Actions
 28:58 State
 32:41 Binding values
 36:18 Hooks
 37:25 Request handlers
 Special elements • Docs • Svelte

  website/src/actions/anchor.ts at v2 · syntaxfm/website

  website/src/actions/click_outside.ts at v2 · syntaxfm/website

 39:23 Svelte Actions
 42:26 Popover API
 45:33 Routing
 47:22 Layouts
 50:08 Styling
 57:09 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Aqara Smart Lock U100

 Wes: Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral)

  Shameless Plugs  Scott: Sentry

 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
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

The Svelte + SvelteKit Show

Poslechněte si podcast