August 18th, 2023 × #Web Development#JavaScript#React
Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski
Andrew Lizowski discusses how video editor Descript is built with web technology like Web Codecs and XState. He covers the AI transcription and voice features, using Radix and Tailwind for components, and reliable end-to-end testing with Playwright.
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 ×××
Shameless Plugs
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
