Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski

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 Andrew Lisowski about working on Descript, web streams vs local storage, using state machines, writing CSS with Radix, monorepos, 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:35">00:35</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:07">01:07</a></strong> What is Descript?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://www.descript.com/">Descript | All-in-one video & podcast editing, easy as a doc.</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://sandwich.co/work/descript-video/">Work — Sandwich</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=02:21">02:21</a></strong> Who is Andrew Lisowski?</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://twitter.com/hipstersmoothie?lang=en">Andrew Lisowski (@HipsterSmoothie) / X</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://www.hipstersmoothie.com/">hipstersmoothie.com</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://twitter.com/DescriptApp">Descript (@DescriptApp) / X</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://www.devtools.fm/">devtools.fm</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=04:51">04:51</a></strong> How does Descript interact with the webcam?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=08:52">08:52</a></strong> Web streams vs local first</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://syntax.fm/show/587/web-streams-explained">Web Streams Explained — Syntax Podcast 587</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=10:06">10:06</a></strong> How are you exporting video?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://github.com/Yahweasel/libav.js/">GitHub - Yahweasel/libav.js: This is a compilation of the libraries associated with handling audio and video in ffmpeg—libavformat, libavcodec, libavfilter, libavutil, libswresample, and libswscale—for emscripten, and thus the web.</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://riverside.fm/">Riverside.fm - Record Podcasts And Videos From Anywhere</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=14:40">14:40</a></strong> How does Descript deal with recording fails?</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=17:17">17:17</a></strong> How does Descript design and build the UI?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=19:37">19:37</a></strong> What did you like about state machines?</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://xstate.js.org/">XState - JavaScript State Machines and Statecharts</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=24:12">24:12</a></strong> How are you writing your CSS with Radix?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://www.radix-ui.com/">Themes – Radix UI</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://open-ui.org/">Home | Open UI</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=30:30">30:30</a></strong> How does the marketing site’s tech stack compare?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=31:44">31:44</a></strong> Playwright vs Cypress</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://playwright.dev/">Fast and reliable end-to-end testing for modern web apps | Playwright</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.cypress.io/">JavaScript Component Testing and E2E Testing Framework | Cypress</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=36:26">36:26</a></strong> What tech do you use for monorepos?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=37:01">37:01</a></strong> What’s your build tool?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://yarnpkg.com/features/workspaces">Workspaces | Yarn - Package Manager</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://turbo.build/">Turbo</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://webpack.js.org/">webpack</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=40:18">40:18</a></strong> Moving to the web means moving things to the backend</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=41:37">41:37</a></strong> Descript focuses AI tools on helping creators</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://www.descript.com/eye-contact">Eye Contact: AI Video Effect | Descript</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=50:50">50:50</a></strong> Supper Club questions</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://mechanicalkeyboards.com/shop/index.php?c=79&l=product_list"> Topre Switch Mechanical Keyboards</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.realforce.co.jp/en/">REALFORCE | Premium Keyboard, PBT, Capacitive Key Switch</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://typeof.net/Iosevka/">Iosevka</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://marketplace.visualstudio.com/items?itemName=hipstersmoothie-public.github-dark-high-contrast"> Github Dark High Contrast - Visual Studio Marketplace</a></li> <li class="has-line-data" data-line-start="43" data-line-end="45"> <strong><a href="#t=56:21">56:21</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="45" data-line-end="46"> <a id="_SIIIIICK__PIIIICKS__45"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://lexical.dev/">Lexical</a></li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <a href="https://ui.shadcn.com/">shadcn/ui</a></li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Shameless_Plugs_50"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href="https://www.devtools.fm/">devtools.fm</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this supper club episode of Syntax, Wes and Scott talk with Andrew Lisowski about working on Descript, web streams vs local storage, using state machines, writing CSS with Radix, monorepos, and more.
 Show Notes  00:35 Welcome
 01:07 What is Descript?
 Descript | All-in-one video & podcast editing, easy as a doc.

 Work — Sandwich

 02:21 Who is Andrew Lisowski?
 Andrew Lisowski (@HipsterSmoothie) / X

 hipstersmoothie.com

 Descript (@DescriptApp) / X

 devtools.fm

 04:51 How does Descript interact with the webcam?
 08:52 Web streams vs local first
 Web Streams Explained — Syntax Podcast 587

 10:06 How are you exporting video?
 GitHub - Yahweasel/libav.js: This is a compilation of the libraries associated with handling audio and video in ffmpeg—libavformat, libavcodec, libavfilter, libavutil, libswresample, and libswscale—for emscripten, and thus the web.

 Riverside.fm - Record Podcasts And Videos From Anywhere

 14:40 How does Descript deal with recording fails?
 17:17 How does Descript design and build the UI?
 19:37 What did you like about state machines?
 XState - JavaScript State Machines and Statecharts

 24:12 How are you writing your CSS with Radix?
 Themes – Radix UI

 Home | Open UI

 30:30 How does the marketing site’s tech stack compare?
 31:44 Playwright vs Cypress
 Fast and reliable end-to-end testing for modern web apps | Playwright

 JavaScript Component Testing and E2E Testing Framework | Cypress

 36:26 What tech do you use for monorepos?
 37:01 What’s your build tool?
 Workspaces | Yarn - Package Manager

 Turbo

 webpack

 40:18 Moving to the web means moving things to the backend
 41:37 Descript focuses AI tools on helping creators
 Eye Contact: AI Video Effect | Descript

 50:50 Supper Club questions
  Topre Switch Mechanical Keyboards

 REALFORCE | Premium Keyboard, PBT, Capacitive Key Switch

 Iosevka

  Github Dark High Contrast - Visual Studio Marketplace

 56:21 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Lexical

 shadcn/ui

  Shameless Plugs  devtools.fm

  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

Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski

Poslechněte si podcast