Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

How We Record, Edit, and Host Our Courses

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="7" data-line-end="8">In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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 href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 5:42 - Recording</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="28"> <p class="has-line-data" data-line-start="19" data-line-end="20"> Wes:</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://www.telestream.net/screenflow/">Screenflow</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://apps.apple.com/no/app/uberlayer/id510139938?mt=12">Uberlayer</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://rogueamoeba.com/loopback/">Loopback</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://www.amazon.com/PR40-Dynamic-Microphone-Carrying-included/dp/B002OSQ9TC"> Heil PR40</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://www.amazon.com/Heil-Sound-PL-2T-Overhead-Broadcast/dp/B000SZVZ74/"> Heil PL-2T</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://www.amazon.com/dbx-286s-Microphone-Channel-Processor/dp/B004LWH79A"> dbx 286s</a></li> <li class="has-line-data" data-line-start="26" data-line-end="28"> <a href= "https://www.amazon.com/Focusrite-Scarlett-Audio-Interface-Tools/dp/B01E6T56EA"> Focusrite Scarlett 2i2</a></li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="39"> <p class="has-line-data" data-line-start="28" data-line-end="29"> Scott:</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href= "https://www.araelium.com/screenflick-mac-screen-recorder">Screenflick</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://www.shinywhitebox.com/ishowu-studio-2">iShow HD</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://mizage.com/divvy/">Divvy</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://principleformac.com/">Principal for Mac</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://www.amazon.com/Electro-Voice-RE-20-Cardioid-Microphone/dp/B000Z7LLQ0"> EV RE-20</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href= "https://www.amazon.com/dbx-286s-Microphone-Channel-Processor/dp/B004LWH79A"> dbx 286s</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.amazon.com/Focusrite-Scarlett-Audio-Interface-Tools/dp/B01E6T56EA"> Focusrite Scarlett 2i2</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://www.amazon.com/Sony-Full-Frame-Mirrorless-Interchangeable-Lens-ILCE7M3/dp/B07B43WPVK"> Sony a7 III</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> <a href="https://www.apple.com/logic-pro/">Logic</a></li> </ul> </li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 33:04 - Editing</p> <ul> <li class="has-line-data" data-line-start="41" data-line-end="47"> <p class="has-line-data" data-line-start="41" data-line-end="42"> Wes:</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Screenflow</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Speed up slow typing</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Edit out some goof-ups (but not all)</li> <li class="has-line-data" data-line-start="45" data-line-end="47"> Edit immediately after recording so I’m in the same headspace and can easily re-record</li> </ul> </li> <li class="has-line-data" data-line-start="47" data-line-end="53"> <p class="has-line-data" data-line-start="47" data-line-end="48"> Scott:</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Hire a video editor</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Normalize audio</li> <li class="has-line-data" data-line-start="51" data-line-end="53"> <a href= "https://www.blackmagicdesign.com/products/davinciresolve">DaVinci Resolve 16</a></li> </ul> </li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 42:31 - Hosting</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="63"> <p class="has-line-data" data-line-start="55" data-line-end="56"> Wes:</p> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://wistia.com/">Wistia</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://vimeo.com/">Vimeo</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.rev.com/">Rev</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.backblaze.com/">Backblaze</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://aws.amazon.com/s3/">Amazon S3</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> My own course platform, with additional controls added via React</li> </ul> </li> <li class="has-line-data" data-line-start="63" data-line-end="71"> <p class="has-line-data" data-line-start="63" data-line-end="64"> Scott:</p> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://youtube.com/">YouTube</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://vimeo.com/">Vimeo</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://plyr.io/">Plyr Video Player</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.backblaze.com/">Backblaze</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://aws.amazon.com/s3/">Amazon S3</a></li> <li class="has-line-data" data-line-start="69" data-line-end="71"> Custom course platform</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="71" data-line-end="72"> 52:46 - Common Questions</p> <h2 class="code-line" data-line-start="73" data-line-end="74"> <a id="Links_73" name="Links_73"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://syntax.fm/show/014/our-stacks-explained">Syntax 014: Our Stacks Explained</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.adobe.com/products/premiere.html">Adobe Premier Pro</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.figma.com/">Figma</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://code.visualstudio.com/">VS Code</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href= "https://www.amazon.com/Audio-Technica-AT2020-Cardioid-Condenser-Microphone/dp/B0006H92QK"> Audio-Technica AT2020</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href= "https://www.amazon.com/Blue-Microphones-Large-Diaphragm-Condenser-Microphone/dp/B01MZBLKN5"> Blue Bluebird</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://bswusa.com/">BSW</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://www.sweetwater.com/">Sweetwater</a></li> <li class="has-line-data" data-line-start="82" data-line-end="84"> <a href="https://ttimsmith.com/">Tim Smith - Video Editing</a></li> </ul> <h2 class="code-line" data-line-start="84" data-line-end="85"> <a id="_SIIIIICK__PIIIICKS__84" name= "_SIIIIICK__PIIIICKS__84"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="85" data-line-end="86"> Scott: <a href= "https://www.netflix.com/title/80189648">Hyperdrive</a></li> <li class="has-line-data" data-line-start="86" data-line-end="88"> Wes: <a href="https://amzn.to/2Lj7HAg">PicQuic Screwdriver</a></li> </ul> <h2 class="code-line" data-line-start="88" data-line-end="89"> <a id="Shameless_Plugs_88" name="Shameless_Plugs_88"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="89" data-line-end="90"> Scott: <a href= "https://www.leveluptutorials.com/pro">LevelUpTutorials Pro - Advanced Gatsby & Shopify</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="90" data-line-end="92"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="92" data-line-end="93"> <a id="Tweet_us_your_tasty_treats_92" name= "Tweet_us_your_tasty_treats_92"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, and more!
 LogRocket - Sponsor 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.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.
 Show Notes 5:42 - Recording
  Wes:
  Screenflow

 Uberlayer

 Loopback

  Heil PR40

  Heil PL-2T

  dbx 286s

  Focusrite Scarlett 2i2

  Scott:
  Screenflick

 iShow HD

 Divvy

 Principal for Mac

  EV RE-20

  dbx 286s

  Focusrite Scarlett 2i2

  Sony a7 III

 Logic

  33:04 - Editing
  Wes:
  Screenflow
 Speed up slow typing
 Edit out some goof-ups (but not all)
 Edit immediately after recording so I’m in the same headspace and can easily re-record

  Scott:
  Hire a video editor
 Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think
 Normalize audio
 DaVinci Resolve 16

  42:31 - Hosting
  Wes:
  Wistia

 Vimeo

 Rev

 Backblaze

 Amazon S3

 My own course platform, with additional controls added via React

  Scott:
  YouTube

 Vimeo

 Plyr Video Player

 Backblaze

 Amazon S3

 Custom course platform

  52:46 - Common Questions
 Links  Syntax 014: Our Stacks Explained

 Adobe Premier Pro

 Figma

 VS Code

  Audio-Technica AT2020

  Blue Bluebird

 BSW

 Sweetwater

 Tim Smith - Video Editing

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Hyperdrive

 Wes: PicQuic Screwdriver

  Shameless Plugs  Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  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 We Record, Edit, and Host Our Courses

Poslechněte si podcast