Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - 300th Episode Tech Chat

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 Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it.</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="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 02:15 - The things we tried</p> <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> Zoom Breakout rooms</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> Hopin - $$$</li> <li class="has-line-data" data-line-start="16" data-line-end="18"> Streamyard</li> </ul> <p class="has-line-data" data-line-start="18" data-line-end="19"> 04:24 - What we used</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="24"> Discord <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> Room as a waiting room</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Roles to give access</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> An a/v room where Wes and Scott were hanging</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Lots of questions about Slack vs Discord</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="28"> OBS <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> ObS to stream to three locations</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> ObS Streamlabs does this easily</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Screen capture did a better job than using the video source from Discord</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="31"> Youtube, Youtube, and MUX <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> Streamlabs can stream to 4 sources at once</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> MUX</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="36"> How we got <a href= "http://syntax.fm/live">Syntax.fm/live</a> to work <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> Create a new live stream on Mux via their UI</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Get stream address and key</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Point Streamlabs to it</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> HLS m3u8 address from Mux into a HLS react player</li> </ul> </li> <li class="has-line-data" data-line-start="36" data-line-end="41"> Looping intro video <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> Principle for mac</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Watch how I did it on youtube - <a href= "https://www.youtube.com/watch?v=I6pSlESq_bY">https://www.youtube.com/watch?v=I6pSlESq_bY</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Music <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> Song Scott wrote</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="41" data-line-end="48"> Recording Audio <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Wes recorded two streams locally</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> All audio on stream was piped through BlackHole on Scott’s machine</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Used Loopback to pipe Discord audio into an input</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Scott + Guest were on the same channel, possibly compressed</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Sounded good!</li> </ul> </li> </ul> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Links_48" name="Links_48"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://zoom.us/">Zoom</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://hopin.com/">Hopin</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://streamyard.com/">Streamyard</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://discord.com/">Discord</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://obsproject.com/">OBS</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://mux.com/">MUX</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://slack.com/">Slack</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://spectrum.chat/">Spectrum</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://streamlabs.com/">Streamlabs</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.videolan.org/vlc/">VLC</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.twitch.tv/">Twitch</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href= "https://www.npmjs.com/package/react-hls-player">react-hls-player</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://principleformac.com/">Principal</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://existential.audio/blackhole/">BlackHole</a></li> <li class="has-line-data" data-line-start="63" data-line-end="65"> <a href="https://rogueamoeba.com/loopback/">Loopback</a></li> </ul> <h2 class="code-line" data-line-start="65" data-line-end="66"> <a id="Tweet_us_your_tasty_treats_65" name= "Tweet_us_your_tasty_treats_65"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it.
 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.
 Show Notes 02:15 - The things we tried
  Zoom Breakout rooms
 Hopin - $$$
 Streamyard
  04:24 - What we used
  Discord  Room as a waiting room
 Roles to give access
 An a/v room where Wes and Scott were hanging
 Lots of questions about Slack vs Discord

 OBS  ObS to stream to three locations
 ObS Streamlabs does this easily
 Screen capture did a better job than using the video source from Discord

 Youtube, Youtube, and MUX  Streamlabs can stream to 4 sources at once
 MUX

 How we got Syntax.fm/live to work  Create a new live stream on Mux via their UI
 Get stream address and key
 Point Streamlabs to it
 HLS m3u8 address from Mux into a HLS react player

 Looping intro video  Principle for mac
 Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY

 Music  Song Scott wrote

 Recording Audio  Wes recorded two streams locally
 All audio on stream was piped through BlackHole on Scott’s machine
 Used Loopback to pipe Discord audio into an input
 Scott + Guest were on the same channel, possibly compressed
 Sounded good!

  Links  Zoom

 Hopin

 Streamyard

 Discord

 OBS

 MUX

 Slack

 Spectrum

 Streamlabs

 VLC

 Twitch

 react-hls-player

 Principal

 BlackHole

 Loopback

  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

Hasty Treat - 300th Episode Tech Chat

Poslechněte si podcast