Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × Steve Ruiz Building a Drawing App

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 supper club episode of Syntax, Wes and Scott talk with Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, and more.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Gatsby__Sponsor_2" name="Gatsby__Sponsor_2"></a>Gatsby - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit <a href="https://gatsby.dev/syntaxfm">gatsby.dev/syntax</a> to get your first Gatsby site up in minutes and experience the speed. ⚡️</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Show_Notes_6" name="Show_Notes_6"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=00:34">00:34</a></strong> Welcome</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=03:23">03:23</a></strong> Who is Steve Ruiz?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://www.steveruiz.me/">Steve Ruiz</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <strong><a href="#t=04:45">04:45</a></strong> What is tldraw and what was your inspiration for it?</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://www.tldraw.com">tldraw</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://www.globs.design">Globs</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://excalidraw.com">Excalidraw</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://github.com/tldraw/tldraw">tldraw on GitHub</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=11:04">11:04</a></strong> Why didn’t you use canvas?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=16:15">16:15</a></strong> How do you make an algorithm?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://github.com/steveruizok/perfect-freehand">Perfect Free Hand</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=19:33">19:33</a></strong> Do you use pointer events?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=23:44">23:44</a></strong> What are you using to manage state?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=29:42">29:42</a></strong> How do you handle zooming?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://www.steveruiz.me/posts/zoom-ui">Creating Zoom UI</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=32:28">32:28</a></strong> Where do you store the data for tldraw?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://developers.google.com/codelabs/project-fugu#0">Project Fugu</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=37:08">37:08</a></strong> Why use indexdb?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=38:05">38:05</a></strong> Sponsor: Gatsby</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=39:49">39:49</a></strong> How difficult was it to make it work on mobile?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://www.npmjs.com/package/react-use-gesture">React Use Gesture</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=41:59">41:59</a></strong> Does it work offline?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=43:25">43:25</a></strong> Supper Club Questions</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://monokai.pro">Monokai Pro</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://classic.framerbook.com">Framer Classic</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://news.ycombinator.com">Hacker News</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://www.youtube.com/c/javidx9">One Lone Coder on YouTube</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.youtube.com/channel/UCWoSKWs8h6lFdiEDAjuIfpA">Displaced Gamer</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://www.youtube.com/c/CodingSecrets">Coding Secrets</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> <strong><a href="#t=52:28">52:28</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="_SIIIIICK__PIIIICKS__39" name= "_SIIIIICK__PIIIICKS__39"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="41" data-line-end="43"> <a href= "https://store.steampowered.com/app/1511780/Last_Call_BBS/">Last Call BBS</a></li> </ul> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Shameless_Plugs_43" name="Shameless_Plugs_43"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="47"> Steve: <a href="https://www.tldraw.dev">tldraw.dev</a></li> </ul> <h2 class="code-line" data-line-start="47" data-line-end="48"> <a id="Tweet_us_your_tasty_treats_47" name= "Tweet_us_your_tasty_treats_47"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this supper club episode of Syntax, Wes and Scott talk with Steve Ruiz about how he built tldraw, how he manages state, what was done to support mobile, and more.
 Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit gatsby.dev/syntax to get your first Gatsby site up in minutes and experience the speed. ⚡️
 Show Notes  00:34 Welcome
 03:23 Who is Steve Ruiz?
 Steve Ruiz

 04:45 What is tldraw and what was your inspiration for it?
 tldraw

 Globs

 Excalidraw

 tldraw on GitHub

 11:04 Why didn’t you use canvas?
 16:15 How do you make an algorithm?
 Perfect Free Hand

 19:33 Do you use pointer events?
 23:44 What are you using to manage state?
 29:42 How do you handle zooming?
 Creating Zoom UI

 32:28 Where do you store the data for tldraw?
 Project Fugu

 37:08 Why use indexdb?
 38:05 Sponsor: Gatsby
 39:49 How difficult was it to make it work on mobile?
 React Use Gesture

 41:59 Does it work offline?
 43:25 Supper Club Questions
 Monokai Pro

 Framer Classic

 Hacker News

 One Lone Coder on YouTube

 Displaced Gamer

 Coding Secrets

 52:28 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Last Call BBS

  Shameless Plugs  Steve: tldraw.dev

  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

Supper Club × Steve Ruiz Building a Drawing App

Poslechněte si podcast