Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

How To Do Things In Svelte

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>In this Hasty Treat, Wes and Scott talk about how to do things in Svelte.</p> <h2 id="sponsor---freshbooks" class="code-line" data-line="9"> Sponsor - Freshbooks</h2> <p class="code-line" data-line="11">Get a 30 day free trial of Freshbooks at <a title="https://freshbooks.com/syntax" href= "https://freshbooks.com/syntax" data-href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the "How did you hear about us?" section.</p> <h2 id="sponsor---logrocket" class="code-line" data-line="13"> Sponsor - LogRocket</h2> <p class="code-line" data-line="15">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 title= "https://logrocket.com/syntax" href="https://logrocket.com/syntax" data-href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 id="show-notes" class="code-line" data-line="17">Show Notes</h2> <ul class="code-line" data-line="19"> <li class="code-line" data-line="19"><strong><a title="#t=00:28" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=00:28" data-href="#t=00:28">00:28</a></strong> Welcome</li> <li class="code-line" data-line="20"><strong><a title="#t=02:18" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=02:18" data-href="#t=02:18">02:18</a></strong> Lead pipe talk</li> <li class="code-line" data-line="21"><strong><a title="#t=04:33" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=04:33" data-href="#t=04:33">04:33</a></strong> Sponsor: Freshbooks</li> <li class="code-line" data-line="22"><strong><a title="#t=05:05" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=05:05" data-href="#t=05:05">05:05</a></strong> Sponsor: Logrocket</li> <li class="code-line" data-line="23"><strong><a title="#t=06:34" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=06:34" data-href="#t=06:34">06:34</a></strong> Intro to Svelte</li> <li class="code-line" data-line="24"><strong><a title="#t=07:44" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=07:44" data-href="#t=07:44">07:44</a></strong> Get Local State running</li> <li class="code-line" data-line="25"><a title= "https://svelte.dev/tutorial/writable-stores" href= "https://svelte.dev/tutorial/writable-stores" data-href= "https://svelte.dev/tutorial/writable-stores">Writable-stores</a></li> <li class="code-line" data-line="26"><strong><a title="#t=10:47" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=10:47" data-href="#t=10:47">10:47</a></strong> Arrow functions</li> <li class="code-line" data-line="27"><strong><a title="#t=11:53" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=11:53" data-href="#t=11:53">11:53</a></strong> Functions that update state</li> <li class="code-line" data-line="28"><a title= "https://github.com/joshnuss/react-hooks-in-svelte" href= "https://github.com/joshnuss/react-hooks-in-svelte" data-href= "https://github.com/joshnuss/react-hooks-in-svelte">React Hooks in Svelte</a></li> <li class="code-line" data-line="29"><a title= "https://github.com/Crisfole/react-use-svelte-store" href= "https://github.com/Crisfole/react-use-svelte-store" data-href= "https://github.com/Crisfole/react-use-svelte-store">React Use Svelte Store</a></li> <li class="code-line" data-line="30"><strong><a title="#t=14:36" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=14:36" data-href="#t=14:36">14:36</a></strong> Live / Reactive Variables</li> <li class="code-line" data-line="31"><strong><a title="#t=17:03" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=17:03" data-href="#t=17:03">17:03</a></strong> Context</li> <li class="code-line" data-line="32"><strong><a title="#t=20:45" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=20:45" data-href="#t=20:45">20:45</a></strong> Conditional rendering</li> <li class="code-line" data-line="33"><strong><a title="#t=24:57" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=24:57" data-href="#t=24:57">24:57</a></strong> Input binding</li> <li class="code-line" data-line="34"><strong><a title="#t=28:02" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=28:02" data-href="#t=28:02">28:02</a></strong> Should Wes rewrite his video player in Svelte?</li> <li class="code-line" data-line="35"><strong><a title="#t=30:07" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=30:07" data-href="#t=30:07">30:07</a></strong> Child elements</li> <li class="code-line" data-line="36"><strong><a title="#t=32:10" href= "https://file+.vscode-resource.vscode-webview.net/Users/ichris/Documents/GitHub/Syntax/shows/413%20-%20How%20To%20Do%20Things%20In%20Svelte.md#t=32:10" data-href="#t=32:10">32:10</a></strong> Vercel hires Rich Harris</li> </ul> <h2 id="tweet-us-your-tasty-treats" class="code-line" data-line= "38">Tweet us your tasty treats</h2> <ul class="code-line" data-line="40"> <li class="code-line" data-line="40"><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="41"><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="42"><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="43"><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="44"><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="45"><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="46">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 Hasty Treat, Wes and Scott talk about how to do things in Svelte.
 Sponsor - Freshbooks Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section.
 Sponsor - LogRocket 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.
 Show Notes 
00:28 Welcome

02:18 Lead pipe talk

04:33 Sponsor: Freshbooks

05:05 Sponsor: Logrocket

06:34 Intro to Svelte

07:44 Get Local State running
 Writable-stores

10:47 Arrow functions

11:53 Functions that update state
 React Hooks in Svelte
 React Use Svelte Store

14:36 Live / Reactive Variables

17:03 Context

20:45 Conditional rendering

24:57 Input binding

28:02 Should Wes rewrite his video player in Svelte?

30:07 Child elements

32:10 Vercel hires Rich Harris
 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

How To Do Things In Svelte

Poslechněte si podcast