Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:48">00:48</a> Zach background and role at ByteDance</li> <li class="has-line-data" data-line-start="6" data-line-end="13"> <a href="#t=03:10">03:10</a> ByteDance’s web and native apps <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href= "https://hbr.org/2022/02/how-bytedance-became-the-worlds-most-valuable-startup"> How ByteDance Became the World’s Most Valuable Startup</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://github.com/bytedance/lynx-llm">Lynx</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://github.com/bytedance">ByteDance GitHub</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://www.coze.com/">Coze</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://www.larksuite.com/">Lark</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://www.marscode.com/">MarsCode</a></li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="15"> <a href="#t=06:48">06:48</a> What is Module Federation? <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://www.zephyr-cloud.io/">Zephyr Cloud</a></li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=15:49">15:49</a> Evolution from V1 to V2 of Module Federation</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=24:47">24:47</a> When to consider Module Federation</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=29:46">29:46</a> How would you publish a utils package in Module Federation?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=32:59">32:59</a> How would you do a major upgrade?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=36:36">36:36</a> Brought to you by <a href="https://sentry.io">Sentry.io</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=37:01">37:01</a> Who owns the update process?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=39:40">39:40</a> Handling multiple frameworks</li> <li class="has-line-data" data-line-start="22" data-line-end="25"> <a href="#t=42:10">42:10</a> ModernJS and Meta frameworks <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://modernjs.dev/">ModernJS</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://rspress.dev/">Rspress</a></li> </ul> </li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <a href="#t=47:20">47:20</a> Does ByteDance have its own JavaScript runtime? <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://nodejs.org/api/n-api.html">NAPI</a></li> </ul> </li> <li class="has-line-data" data-line-start="27" data-line-end="30"> <a href="#t=50:02">50:02</a> Why Zack built Rspack <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://rspack.dev/">Rspack</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://rsbuild.dev/">Rsbuild</a></li> </ul> </li> <li class="has-line-data" data-line-start="30" data-line-end="32"> <a href="#t=58:15">58:15</a> The future of Rspack and custom bundlers <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://github.com/hardfist/unpack">Unpack</a></li> </ul> </li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=01:04:24">01:04:24</a> Module Federation’s major features</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=01:07:29">01:07:29</a> Sick Picks & Shameless Plugs</li> </ul> <a id="Shameless_Plugs_35"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="37" data-line-end="41"> Zack: <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.zephyr-cloud.io/">Zephyr Cloud</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <a href="https://midscenejs.com/">Midscene.js</a></li> </ul> </li> </ul> <a id="Hit_us_up_on_Socials_41"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt;Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=00:48"&gt;00:48&lt;/a&gt;&lt;/strong&gt; Zach background and role at ByteDance&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="13"&gt; &lt;strong&gt;&lt;a href="#t=03:10"&gt;03:10&lt;/a&gt;&lt;/strong&gt; ByteDance’s web and native apps &lt;ul&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="8"&gt; &lt;a href= "https://hbr.org/2022/02/how-bytedance-became-the-worlds-most-valuable-startup"&gt; How ByteDance Became the World’s Most Valuable Startup&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;a href="https://github.com/bytedance/lynx-llm"&gt;Lynx&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;a href="https://github.com/bytedance"&gt;ByteDance GitHub&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;a href="https://www.coze.com/"&gt;Coze&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;a href="https://www.larksuite.com/"&gt;Lark&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="13"&gt; &lt;a href="https://www.marscode.com/"&gt;MarsCode&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=06:48"&gt;06:48&lt;/a&gt;&lt;/strong&gt; What is Module Federation? &lt;ul&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;a href="https://www.zephyr-cloud.io/"&gt;Zephyr Cloud&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;strong&gt;&lt;a href="#t=15:49"&gt;15:49&lt;/a&gt;&lt;/strong&gt; Evolution from V1 to V2 of Module Federation&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;strong&gt;&lt;a href="#t=24:47"&gt;24:47&lt;/a&gt;&lt;/strong&gt; When to consider Module Federation&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=29:46"&gt;29:46&lt;/a&gt;&lt;/strong&gt; How would you publish a utils package in Module Federation?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;strong&gt;&lt;a href="#t=32:59"&gt;32:59&lt;/a&gt;&lt;/strong&gt; How would you do a major upgrade?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="20"&gt; &lt;strong&gt;&lt;a href="#t=36:36"&gt;36:36&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://sentry.io"&gt;Sentry.io&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;strong&gt;&lt;a href="#t=37:01"&gt;37:01&lt;/a&gt;&lt;/strong&gt; Who owns the update process?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=39:40"&gt;39:40&lt;/a&gt;&lt;/strong&gt; Handling multiple frameworks&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=42:10"&gt;42:10&lt;/a&gt;&lt;/strong&gt; ModernJS and Meta frameworks &lt;ul&gt; &lt;li class="has-line-data" data-line-start="23" data-line-end="24"&gt; &lt;a href="https://modernjs.dev/"&gt;ModernJS&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;a href="https://rspress.dev/"&gt;Rspress&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="27"&gt; &lt;strong&gt;&lt;a href="#t=47:20"&gt;47:20&lt;/a&gt;&lt;/strong&gt; Does ByteDance have its own JavaScript runtime? &lt;ul&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;a href="https://nodejs.org/api/n-api.html"&gt;NAPI&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="30"&gt; &lt;strong&gt;&lt;a href="#t=50:02"&gt;50:02&lt;/a&gt;&lt;/strong&gt; Why Zack built Rspack &lt;ul&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;a href="https://rspack.dev/"&gt;Rspack&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;a href="https://rsbuild.dev/"&gt;Rsbuild&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="32"&gt; &lt;strong&gt;&lt;a href="#t=58:15"&gt;58:15&lt;/a&gt;&lt;/strong&gt; The future of Rspack and custom bundlers &lt;ul&gt; &lt;li class="has-line-data" data-line-start="31" data-line-end="32"&gt; &lt;a href="https://github.com/hardfist/unpack"&gt;Unpack&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="33"&gt; &lt;strong&gt;&lt;a href="#t=01:04:24"&gt;01:04:24&lt;/a&gt;&lt;/strong&gt; Module Federation’s major features&lt;/li&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="35"&gt; &lt;strong&gt;&lt;a href="#t=01:07:29"&gt;01:07:29&lt;/a&gt;&lt;/strong&gt; Sick Picks &amp; Shameless Plugs&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="35" data-line-end="36"&gt; &lt;a id="Shameless_Plugs_35"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="37" data-line-end="41"&gt; Zack: &lt;ul&gt; &lt;li class="has-line-data" data-line-start="38" data-line-end="39"&gt; &lt;a href="https://www.zephyr-cloud.io/"&gt;Zephyr Cloud&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="39" data-line-end="41"&gt; &lt;a href="https://midscenejs.com/"&gt;Midscene.js&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="41" data-line-end="42"&gt; &lt;a id="Hit_us_up_on_Socials_41"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="43" data-line-end="44"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="45" data-line-end="46"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="47" data-line-end="48"&gt; Scott: &lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="49" data-line-end="50"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his...

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:50">00:50</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:15">01:15</a> The history of video streaming.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=02:10">02:10</a> How video streaming works: The Tech.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=03:54">03:54</a> How video streaming works: Transcoding.</li> <li class="has-line-data" data-line-start="9" data-line-end="15"> <a href="#t=06:37">06:37</a> How video streaming works: Variants. <ul> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href= "https://github.com/wesbos/R2-video-streaming">ffmpeg</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://github.com/wesbos/R2-video-streaming">Wes’ R2-video-streaming</a>.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://github.com/wesbos/R2-video-streaming/blob/main/transcode.ts"> Wes’ Transcoding</a>.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://github.com/ytdl-org/youtube-dl">YT-DL</a>.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://github.com/yt-dlp/yt-dlp">YT-DLP</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=13:13">13:13</a> Dynamic ad insertion.</li> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="#t=14:29">14:29</a> Bandwidth and hosting. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.mux.com/">Mux</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=18:03">18:03</a> <a href= "https://www.cloudflare.com/">Cloudflare</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="22"> <a href="#t=19:13">19:13</a> The costs. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://x.com/wesbos/status/1852398973769613727">Wes Bos Tweet Cloudflare TOS</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://x.com/steve_tenuto/status/1854919704483434763">Steve Tenuto tweet</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href="#t=25:39">25:39</a> Media players. <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://www.media-chrome.org/docs/en/get-started">Media Chrome</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=29:42">29:42</a> CDN.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=32:04">32:04</a> Access control.</li> <li class="has-line-data" data-line-start="26" data-line-end="33"> <a href="#t=33:35">33:35</a> Solutions. <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.mux.com/">Mux</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://developers.cloudflare.com/stream/">Cloudflare Stream</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://bunny.net/stream/">Bunny.net Stream</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://aws.amazon.com/mediaconvert/">AWS Media Convert</a>.</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://cloudinary.com/">Cloudinary</a>.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://bitmovin.com/">Bitmovin</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=41:55">41:55</a> Some other features.</li> <li class="has-line-data" data-line-start="34" data-line-end="37"> <a href="#t=45:47">45:47</a> Sick Picks & Shameless Plugs.</li> </ul> <a id="Sick_Picks_37"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Scott: <a href="https://amzn.to/3CquTcZ">Anker MagGo</a>.</li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Wes: <a href= "https://appahead.studio/apps/polycapture/">PolyCapture</a>.</li> </ul> <a id="Shameless_Plugs_42"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="44" data-line-end="46"> Scott: <a href="www.youtube.com/@syntaxfm">Syntax on YouTube</a>.</li> </ul> <a id="Hit_us_up_on_Socials_46"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt; Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=00:50"&gt;00:50&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://sentry.io/syntax"&gt;Sentry.io&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="7"&gt; &lt;strong&gt;&lt;a href="#t=01:15"&gt;01:15&lt;/a&gt;&lt;/strong&gt; The history of video streaming.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="8"&gt; &lt;strong&gt;&lt;a href="#t=02:10"&gt;02:10&lt;/a&gt;&lt;/strong&gt; How video streaming works: The Tech.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;strong&gt;&lt;a href="#t=03:54"&gt;03:54&lt;/a&gt;&lt;/strong&gt; How video streaming works: Transcoding.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=06:37"&gt;06:37&lt;/a&gt;&lt;/strong&gt; How video streaming works: Variants. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;a href= "https://github.com/wesbos/R2-video-streaming"&gt;ffmpeg&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;a href="https://github.com/wesbos/R2-video-streaming"&gt;Wes’ R2-video-streaming&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="13"&gt; &lt;a href= "https://github.com/wesbos/R2-video-streaming/blob/main/transcode.ts"&gt; Wes’ Transcoding&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;a href="https://github.com/ytdl-org/youtube-dl"&gt;YT-DL&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;a href="https://github.com/yt-dlp/yt-dlp"&gt;YT-DLP&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;strong&gt;&lt;a href="#t=13:13"&gt;13:13&lt;/a&gt;&lt;/strong&gt; Dynamic ad insertion.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=14:29"&gt;14:29&lt;/a&gt;&lt;/strong&gt; Bandwidth and hosting. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;a href="https://www.mux.com/"&gt;Mux&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;strong&gt;&lt;a href="#t=18:03"&gt;18:03&lt;/a&gt;&lt;/strong&gt; &lt;a href= "https://www.cloudflare.com/"&gt;Cloudflare&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=19:13"&gt;19:13&lt;/a&gt;&lt;/strong&gt; The costs. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;a href="https://x.com/wesbos/status/1852398973769613727"&gt;Wes Bos Tweet Cloudflare TOS&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;a href= "https://x.com/steve_tenuto/status/1854919704483434763"&gt;Steve Tenuto tweet&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="24"&gt; &lt;strong&gt;&lt;a href="#t=25:39"&gt;25:39&lt;/a&gt;&lt;/strong&gt; Media players. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="23" data-line-end="24"&gt; &lt;a href="https://www.media-chrome.org/docs/en/get-started"&gt;Media Chrome&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=29:42"&gt;29:42&lt;/a&gt;&lt;/strong&gt; CDN.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;strong&gt;&lt;a href="#t=32:04"&gt;32:04&lt;/a&gt;&lt;/strong&gt; Access control.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="33"&gt; &lt;strong&gt;&lt;a href="#t=33:35"&gt;33:35&lt;/a&gt;&lt;/strong&gt; Solutions. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="28"&gt; &lt;a href="https://www.mux.com/"&gt;Mux&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="29"&gt; &lt;a href="https://developers.cloudflare.com/stream/"&gt;Cloudflare Stream&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;a href="https://bunny.net/stream/"&gt;Bunny.net Stream&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="31"&gt; &lt;a href="https://aws.amazon.com/mediaconvert/"&gt;AWS Media Convert&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="31" data-line-end="32"&gt; &lt;a href="https://cloudinary.com/"&gt;Cloudinary&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="33"&gt; &lt;a href="https://bitmovin.com/"&gt;Bitmovin&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="34"&gt; &lt;strong&gt;&lt;a href="#t=41:55"&gt;41:55&lt;/a&gt;&lt;/strong&gt; Some other features.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="34" data-line-end="37"&gt; &lt;strong&gt;&lt;a href="#t=45:47"&gt;45:47&lt;/a&gt;&lt;/strong&gt; Sick Picks &amp; Shameless Plugs.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="37" data-line-end="38"&gt; &lt;a id="Sick_Picks_37"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="39" data-line-end="40"&gt; Scott: &lt;a href="https://amzn.to/3CquTcZ"&gt;Anker MagGo&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="40" data-line-end="42"&gt; Wes: &lt;a href= "https://appahead.studio/apps/polycapture/"&gt;PolyCapture&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="42" data-line-end="43"&gt; &lt;a id="Shameless_Plugs_42"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="44" data-line-end="46"&gt; Scott: &lt;a href="www.youtube.com/@syntaxfm"&gt;Syntax on YouTube&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="46" data-line-end="47"&gt; &lt;a id="Hit_us_up_on_Socials_46"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="48" data-line-end="49"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="50" data-line-end="51"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="52" data-line-end="53"&gt; Scott: &lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="54" data-line-end="55"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and...

859: Streaming Video in 2025

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=02:48">02:48</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:54">03:54</a> How do you go deeper?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:23">04:23</a> Pick a project and build it.</li> <li class="has-line-data" data-line-start="8" data-line-end="10"> <a href="#t=06:36">06:36</a> Read the docs. <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://svelte.dev/docs">Svelte Docs</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=09:07">09:07</a> Read the source.</li> <li class="has-line-data" data-line-start="11" data-line-end="14"> <a href="#t=11:19">11:19</a> Consume content: blogs, conference talks, etc. <ul> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://www.youtube.com/@dotconferences">Dot Conferences on YouTube</a>.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://www.youtube.com/@JavaScriptConferences">GitNation JavaScript Conferences</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=16:24">16:24</a> Discord and Reddit.</li> <li class="has-line-data" data-line-start="15" data-line-end="17"> <a href="#t=19:31">19:31</a> Get mentorship and ask questions.</li> </ul> <a id="Hit_us_up_on_Socials_17"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt;Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=02:48"&gt;02:48&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://sentry.io/syntax"&gt;Sentry.io&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="7"&gt; &lt;strong&gt;&lt;a href="#t=03:54"&gt;03:54&lt;/a&gt;&lt;/strong&gt; How do you go deeper?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="8"&gt; &lt;strong&gt;&lt;a href="#t=04:23"&gt;04:23&lt;/a&gt;&lt;/strong&gt; Pick a project and build it.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="10"&gt; &lt;strong&gt;&lt;a href="#t=06:36"&gt;06:36&lt;/a&gt;&lt;/strong&gt; Read the docs. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;a href="https://svelte.dev/docs"&gt;Svelte Docs&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;strong&gt;&lt;a href="#t=09:07"&gt;09:07&lt;/a&gt;&lt;/strong&gt; Read the source.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="14"&gt; &lt;strong&gt;&lt;a href="#t=11:19"&gt;11:19&lt;/a&gt;&lt;/strong&gt; Consume content: blogs, conference talks, etc. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="13"&gt; &lt;a href="https://www.youtube.com/@dotconferences"&gt;Dot Conferences on YouTube&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;a href="https://www.youtube.com/@JavaScriptConferences"&gt;GitNation JavaScript Conferences&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;strong&gt;&lt;a href="#t=16:24"&gt;16:24&lt;/a&gt;&lt;/strong&gt; Discord and Reddit.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="17"&gt; &lt;strong&gt;&lt;a href="#t=19:31"&gt;19:31&lt;/a&gt;&lt;/strong&gt; Get mentorship and ask questions.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="17" data-line-end="18"&gt; &lt;a id="Hit_us_up_on_Socials_17"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="19" data-line-end="20"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="21" data-line-end="22"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="23" data-line-end="24"&gt; Scott: &lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="25" data-line-end="26"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community. Show Notes    Welcome to...

858: How to Go Deeper With Your Learning

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=03:01">03:01</a> Brought to you by <a href="https://sentry.io">Sentry.io</a></li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=04:14">04:14</a> Understanding signal-to-noise ratio</li> <li class="has-line-data" data-line-start="7" data-line-end="9"> <a href="#t=06:48">06:48</a> Using de-noise <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://www.izotope.com/en/products/rx/features/voice-de-noise.html"> iZotope Voice De-noise</a></li> </ul> </li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=09:12">09:12</a> The importance of mic technique</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=10:28">10:28</a> Dealing with electrical noise</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=11:15">11:15</a> The proximity effect</li> <li class="has-line-data" data-line-start="12" data-line-end="18"> <a href="#t=13:01">13:01</a> Sound treatment vs sound proofing <ul> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://www.omnicalculator.com/physics/sound-wavelength">Sound Wavelength Calculator</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://syntax.fm/show/516/wes-new-soundproof-office">Syntax 516: Wes’ New Soundproof Office</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://studiobricks.com">Studiobricks</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://www.youtube.com/watch?v=xHTeXmpjFW4">Randy’s Studiobricks video</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.gikacoustics.com/">GIK Acoustics</a></li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=23:33">23:33</a> Do egg crates work for sound treatment?</li> <li class="has-line-data" data-line-start="19" data-line-end="22"> <a href="#t=25:22">25:22</a> USB mics vs XLR mics <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://www.shure.com/en-US/products/microphones/mv6">Shure MV6</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://syntax.fm/show/845/are-companies-hiring-state-of-the-dev-job-market-with-taylor-desseyn"> Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn</a></li> </ul> </li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=27:06">27:06</a> Video composition</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=30:18">30:18</a> How to improve your lighting</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=35:37">35:37</a> Choosing the right camera</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=36:58">36:58</a> The importance of codecs and bitrates</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=38:14">38:14</a> What to look for in a webcam</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=38:50">38:50</a> Randy’s packages for $50, $150 and $500-$1000 budgets</li> <li class="has-line-data" data-line-start="28" data-line-end="32"> <a href="#t=40:02">40:02</a> The $50 package/selecting your mic <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.amazon.com/gp/aw/d/B0CNVRT9BD">Feelworld PM1</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://www.amazon.com/gp/aw/d/B0B8SNVK5K">Fifine K688</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href= "https://www.target.com/p/desktop-microphone-heyday-8482-stone-white/-/A-81505897"> heyday Stone White Desktop Mic</a></li> </ul> </li> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href="#t=43:53">43:53</a> The $150 package <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://www.amazon.com/stores/page/29362031-33B6-40AC-BC40-7017597AB1E3"> Neewer lights</a></li> </ul> </li> <li class="has-line-data" data-line-start="34" data-line-end="40"> <a href="#t=45:32">45:32</a> The $500-$1000 package <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://www.shure.com/en-US/products/microphones/mv6">Shure MV6</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://www.amazon.com/Insta360-Link-Tracking-Noise-Canceling-Streaming/dp/B0DDTH3HX8"> Insta360 Link 2</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href= "https://www.amazon.com/Insta360-Link-2C-Noise-Canceling-Streaming/dp/B0DDTGY8FG"> Insta360 Link 2c</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://www.amazon.com/Elgato-Cam-Link-Broadcast-Camcorder/dp/B07K3FN5MR"> Elgato Cam Link 4k</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://amzn.to/3O3KOjJ">Sonay a6000</a></li> </ul> </li> <li class="has-line-data" data-line-start="40" data-line-end="42"> <a href="#t=51:07">51:07</a> Mic stand recommendations <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://amzn.to/3Z2t1jd">VIVO</a></li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href="#t=56:50">56:50</a> Sick picks & Shameless Plugs</li> </ul> <a id="Sick_Picks_44"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="46" data-line-end="48"> Randy: <a href= "https://www.tiktok.com/@etymologynerd/video/7361455644374732078?is_from_webapp=1&sender_device=pc&web_id=7433832206571292166"> etymologynerd on TikTok</a></li> </ul> <a id="Shameless_Plugs_48"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="50" data-line-end="52"> Randy: <a href="https://www.youtube.com/@randyrektor">Randy’s YouTube Channel</a></li> </ul> <a id="Hit_us_up_on_Socials_52"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt;Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=03:01"&gt;03:01&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://sentry.io"&gt;Sentry.io&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="7"&gt; &lt;strong&gt;&lt;a href="#t=04:14"&gt;04:14&lt;/a&gt;&lt;/strong&gt; Understanding signal-to-noise ratio&lt;/li&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="9"&gt; &lt;strong&gt;&lt;a href="#t=06:48"&gt;06:48&lt;/a&gt;&lt;/strong&gt; Using de-noise &lt;ul&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="9"&gt; &lt;a href= "https://www.izotope.com/en/products/rx/features/voice-de-noise.html"&gt; iZotope Voice De-noise&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;strong&gt;&lt;a href="#t=09:12"&gt;09:12&lt;/a&gt;&lt;/strong&gt; The importance of mic technique&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;strong&gt;&lt;a href="#t=10:28"&gt;10:28&lt;/a&gt;&lt;/strong&gt; Dealing with electrical noise&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;strong&gt;&lt;a href="#t=11:15"&gt;11:15&lt;/a&gt;&lt;/strong&gt; The proximity effect&lt;/li&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=13:01"&gt;13:01&lt;/a&gt;&lt;/strong&gt; Sound treatment vs sound proofing &lt;ul&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;a href= "https://www.omnicalculator.com/physics/sound-wavelength"&gt;Sound Wavelength Calculator&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="15"&gt; &lt;a href= "https://syntax.fm/show/516/wes-new-soundproof-office"&gt;Syntax 516: Wes’ New Soundproof Office&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;a href="https://studiobricks.com"&gt;Studiobricks&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="17"&gt; &lt;a href="https://www.youtube.com/watch?v=xHTeXmpjFW4"&gt;Randy’s Studiobricks video&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;a href="https://www.gikacoustics.com/"&gt;GIK Acoustics&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;strong&gt;&lt;a href="#t=23:33"&gt;23:33&lt;/a&gt;&lt;/strong&gt; Do egg crates work for sound treatment?&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=25:22"&gt;25:22&lt;/a&gt;&lt;/strong&gt; USB mics vs XLR mics &lt;ul&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;a href= "https://www.shure.com/en-US/products/microphones/mv6"&gt;Shure MV6&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;a href= "https://syntax.fm/show/845/are-companies-hiring-state-of-the-dev-job-market-with-taylor-desseyn"&gt; Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="23"&gt; &lt;strong&gt;&lt;a href="#t=27:06"&gt;27:06&lt;/a&gt;&lt;/strong&gt; Video composition&lt;/li&gt; &lt;li class="has-line-data" data-line-start="23" data-line-end="24"&gt; &lt;strong&gt;&lt;a href="#t=30:18"&gt;30:18&lt;/a&gt;&lt;/strong&gt; How to improve your lighting&lt;/li&gt; &lt;li class="has-line-data" data-line-start="24" data-line-end="25"&gt; &lt;strong&gt;&lt;a href="#t=35:37"&gt;35:37&lt;/a&gt;&lt;/strong&gt; Choosing the right camera&lt;/li&gt; &lt;li class="has-line-data" data-line-start="25" data-line-end="26"&gt; &lt;strong&gt;&lt;a href="#t=36:58"&gt;36:58&lt;/a&gt;&lt;/strong&gt; The importance of codecs and bitrates&lt;/li&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; &lt;strong&gt;&lt;a href="#t=38:14"&gt;38:14&lt;/a&gt;&lt;/strong&gt; What to look for in a webcam&lt;/li&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="28"&gt; &lt;strong&gt;&lt;a href="#t=38:50"&gt;38:50&lt;/a&gt;&lt;/strong&gt; Randy’s packages for $50, $150 and $500-$1000 budgets&lt;/li&gt; &lt;li class="has-line-data" data-line-start="28" data-line-end="32"&gt; &lt;strong&gt;&lt;a href="#t=40:02"&gt;40:02&lt;/a&gt;&lt;/strong&gt; The $50 package/selecting your mic &lt;ul&gt; &lt;li class="has-line-data" data-line-start="29" data-line-end="30"&gt; &lt;a href="https://www.amazon.com/gp/aw/d/B0CNVRT9BD"&gt;Feelworld PM1&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="30" data-line-end="31"&gt; &lt;a href="https://www.amazon.com/gp/aw/d/B0B8SNVK5K"&gt;Fifine K688&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="31" data-line-end="32"&gt; &lt;a href= "https://www.target.com/p/desktop-microphone-heyday-8482-stone-white/-/A-81505897"&gt; heyday Stone White Desktop Mic&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="34"&gt; &lt;strong&gt;&lt;a href="#t=43:53"&gt;43:53&lt;/a&gt;&lt;/strong&gt; The $150 package &lt;ul&gt; &lt;li class="has-line-data" data-line-start="33" data-line-end="34"&gt; &lt;a href= "https://www.amazon.com/stores/page/29362031-33B6-40AC-BC40-7017597AB1E3"&gt; Neewer lights&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="34" data-line-end="40"&gt; &lt;strong&gt;&lt;a href="#t=45:32"&gt;45:32&lt;/a&gt;&lt;/strong&gt; The $500-$1000 package &lt;ul&gt; &lt;li class="has-line-data" data-line-start="35" data-line-end="36"&gt; &lt;a href= "https://www.shure.com/en-US/products/microphones/mv6"&gt;Shure MV6&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="36" data-line-end="37"&gt; &lt;a href= "https://www.amazon.com/Insta360-Link-Tracking-Noise-Canceling-Streaming/dp/B0DDTH3HX8"&gt; Insta360 Link 2&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="37" data-line-end="38"&gt; &lt;a href= "https://www.amazon.com/Insta360-Link-2C-Noise-Canceling-Streaming/dp/B0DDTGY8FG"&gt; Insta360 Link 2c&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="38" data-line-end="39"&gt; &lt;a href= "https://www.amazon.com/Elgato-Cam-Link-Broadcast-Camcorder/dp/B07K3FN5MR"&gt; Elgato Cam Link 4k&lt;/a&gt;&lt;/li&gt; &lt;li class="has-line-data" data-line-start="39" data-line-end="40"&gt; &lt;a href="https://amzn.to/3O3KOjJ"&gt;Sonay a6000&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="40" data-line-end="42"&gt; &lt;strong&gt;&lt;a href="#t=51:07"&gt;51:07&lt;/a&gt;&lt;/strong&gt; Mic stand recommendations &lt;ul&gt; &lt;li class="has-line-data" data-line-start="41" data-line-end="42"&gt; &lt;a href="https://amzn.to/3Z2t1jd"&gt;VIVO&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="42" data-line-end="44"&gt; &lt;strong&gt;&lt;a href="#t=56:50"&gt;56:50&lt;/a&gt;&lt;/strong&gt; Sick picks &amp; Shameless Plugs&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="44" data-line-end="45"&gt; &lt;a id="Sick_Picks_44"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="46" data-line-end="48"&gt; Randy: &lt;a href= "https://www.tiktok.com/@etymologynerd/video/7361455644374732078?is_from_webapp=1&amp;sender_device=pc&amp;web_id=7433832206571292166"&gt; etymologynerd on TikTok&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="48" data-line-end="49"&gt; &lt;a id="Shameless_Plugs_48"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="50" data-line-end="52"&gt; Randy: &lt;a href="https://www.youtube.com/@randyrektor"&gt;Randy’s YouTube Channel&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="52" data-line-end="53"&gt; &lt;a id="Hit_us_up_on_Socials_52"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="54" data-line-end="55"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="56" data-line-end="57"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="58" data-line-end="59"&gt; Scott: &lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="60" data-line-end="61"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget. Show Notes    Welcome to Syntax!  ...

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:50">00:50</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:23">02:23</a> Apple developer accounts and certificates.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=06:58">06:58</a> Hono, SvelteKit, and using them together.</li> <li class="has-line-data" data-line-start="8" data-line-end="13"> <a href="#t=11:14">11:14</a> Rspack & Rsbuild over Vite? <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://rspack.dev/">Rspack</a>, <a href= "https://rsbuild.dev/">Rsbuild</a>.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://rolldown.rs/">Rolldown</a>, <a href= "https://rollupjs.org/">Rollup</a>.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://github.com/oxc-project/oxc">oxc</a>.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://turbo.build/">Turborepo</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=21:01">21:01</a> Quoting projects without seeing under the hood.</li> <li class="has-line-data" data-line-start="14" data-line-end="16"> <a href="#t=25:26">25:26</a> HTTP cookies, partitioned cookies, and chips. <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://developer.mozilla.org/en-US/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies"> Partitioned Cookies</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="#t=30:29">30:29</a> Redirect codes; 301, 302, 303, 307 <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418">418 I’m a teapot</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=36:22">36:22</a> Gaining inspiration for talks and posts.</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> <a href="#t=40:02">40:02</a> My loading state is too fast! Should I use setTimeout? <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout"> setTimeout Docs</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=42:29">42:29</a> Interviews and landing the job.</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <a href="#t=49:50">49:50</a> Sick Picks & Shameless Plugs.</li> </ul> <a id="Sick_Picks_24"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> Scott: Stainless Steel Cookware.</li> <li class="has-line-data" data-line-start="27" data-line-end="29"> Wes: <a href="https://amzn.to/4fVmsoS">Dim Lightbulbs</a>, <a href= "https://www.tiktok.com/@steelpan.guy?lang=en">steelpan.guy on TikTok</a>.</li> </ul> <a id="Shameless_Plugs_29"></a>Shameless Plugs <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> Scott: <a href="https://syntax.fm/potluck">Potluck Submissions</a>.</li> <li class="has-line-data" data-line-start="32" data-line-end="35"> Wes: <a href="www.youtube.com/@syntaxfm">Syntax on YouTube</a>.</li> </ul> <a id="Hit_us_up_on_Socials_35"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

<description>&lt;p class="has-line-data" data-line-start="0" data-line-end="1"&gt; Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners.&lt;/p&gt; &lt;h3 class="code-line" data-line-start="2" data-line-end="3"&gt;&lt;a id= "Show_Notes_2"&gt;&lt;/a&gt;Show Notes&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="4" data-line-end="5"&gt; &lt;strong&gt;&lt;a href="#t=00:00"&gt;00:00&lt;/a&gt;&lt;/strong&gt; Welcome to Syntax!&lt;/li&gt; &lt;li class="has-line-data" data-line-start="5" data-line-end="6"&gt; &lt;strong&gt;&lt;a href="#t=00:50"&gt;00:50&lt;/a&gt;&lt;/strong&gt; Brought to you by &lt;a href="https://sentry.io/syntax"&gt;Sentry.io&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="6" data-line-end="7"&gt; &lt;strong&gt;&lt;a href="#t=02:23"&gt;02:23&lt;/a&gt;&lt;/strong&gt; Apple developer accounts and certificates.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="7" data-line-end="8"&gt; &lt;strong&gt;&lt;a href="#t=06:58"&gt;06:58&lt;/a&gt;&lt;/strong&gt; Hono, SvelteKit, and using them together.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="8" data-line-end="13"&gt; &lt;strong&gt;&lt;a href="#t=11:14"&gt;11:14&lt;/a&gt;&lt;/strong&gt; Rspack &amp; Rsbuild over Vite? &lt;ul&gt; &lt;li class="has-line-data" data-line-start="9" data-line-end="10"&gt; &lt;a href="https://rspack.dev/"&gt;Rspack&lt;/a&gt;, &lt;a href= "https://rsbuild.dev/"&gt;Rsbuild&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="10" data-line-end="11"&gt; &lt;a href="https://rolldown.rs/"&gt;Rolldown&lt;/a&gt;, &lt;a href= "https://rollupjs.org/"&gt;Rollup&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="11" data-line-end="12"&gt; &lt;a href="https://github.com/oxc-project/oxc"&gt;oxc&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="12" data-line-end="13"&gt; &lt;a href="https://turbo.build/"&gt;Turborepo&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="13" data-line-end="14"&gt; &lt;strong&gt;&lt;a href="#t=21:01"&gt;21:01&lt;/a&gt;&lt;/strong&gt; Quoting projects without seeing under the hood.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="14" data-line-end="16"&gt; &lt;strong&gt;&lt;a href="#t=25:26"&gt;25:26&lt;/a&gt;&lt;/strong&gt; HTTP cookies, partitioned cookies, and chips. &lt;ul&gt; &lt;li class="has-line-data" data-line-start="15" data-line-end="16"&gt; &lt;a href= "https://developer.mozilla.org/en-US/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies"&gt; Partitioned Cookies&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="16" data-line-end="18"&gt; &lt;strong&gt;&lt;a href="#t=30:29"&gt;30:29&lt;/a&gt;&lt;/strong&gt; Redirect codes; 301, 302, 303, 307 &lt;ul&gt; &lt;li class="has-line-data" data-line-start="17" data-line-end="18"&gt; &lt;a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418"&gt;418 I’m a teapot&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="18" data-line-end="19"&gt; &lt;strong&gt;&lt;a href="#t=36:22"&gt;36:22&lt;/a&gt;&lt;/strong&gt; Gaining inspiration for talks and posts.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="19" data-line-end="21"&gt; &lt;strong&gt;&lt;a href="#t=40:02"&gt;40:02&lt;/a&gt;&lt;/strong&gt; My loading state is too fast! Should I use setTimeout? &lt;ul&gt; &lt;li class="has-line-data" data-line-start="20" data-line-end="21"&gt; &lt;a href= "https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout"&gt; setTimeout Docs&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="has-line-data" data-line-start="21" data-line-end="22"&gt; &lt;strong&gt;&lt;a href="#t=42:29"&gt;42:29&lt;/a&gt;&lt;/strong&gt; Interviews and landing the job.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="22" data-line-end="24"&gt; &lt;strong&gt;&lt;a href="#t=49:50"&gt;49:50&lt;/a&gt;&lt;/strong&gt; Sick Picks &amp; Shameless Plugs.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="24" data-line-end="25"&gt; &lt;a id="Sick_Picks_24"&gt;&lt;/a&gt;Sick Picks&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="26" data-line-end="27"&gt; Scott: Stainless Steel Cookware.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="27" data-line-end="29"&gt; Wes: &lt;a href="https://amzn.to/4fVmsoS"&gt;Dim Lightbulbs&lt;/a&gt;, &lt;a href= "https://www.tiktok.com/@steelpan.guy?lang=en"&gt;steelpan.guy on TikTok&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="29" data-line-end="30"&gt; &lt;a id="Shameless_Plugs_29"&gt;&lt;/a&gt;Shameless Plugs&lt;/h3&gt; &lt;ul&gt; &lt;li class="has-line-data" data-line-start="31" data-line-end="32"&gt; Scott: &lt;a href="https://syntax.fm/potluck"&gt;Potluck Submissions&lt;/a&gt;.&lt;/li&gt; &lt;li class="has-line-data" data-line-start="32" data-line-end="35"&gt; Wes: &lt;a href="www.youtube.com/@syntaxfm"&gt;Syntax on YouTube&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;h3 class="code-line" data-line-start="35" data-line-end="36"&gt; &lt;a id="Hit_us_up_on_Socials_35"&gt;&lt;/a&gt;Hit us up on Socials!&lt;/h3&gt; &lt;p class="has-line-data" data-line-start="37" data-line-end="38"&gt; Syntax: &lt;a href="https://twitter.com/syntaxfm"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/syntax_fm/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@syntaxfm"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/"&gt;LinkedIn&lt;/a&gt; &lt;a href="https://www.threads.net/@syntax_fm"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="39" data-line-end="40"&gt; Wes: &lt;a href="https://twitter.com/wesbos"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/wesbos/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@wesbos"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/wesbos/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@wesbos"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="41" data-line-end="42"&gt; Scott: &lt;a href="https://twitter.com/stolinski"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/stolinski/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.tiktok.com/@stolinski"&gt;Tiktok&lt;/a&gt; &lt;a href= "https://www.linkedin.com/in/stolinski/"&gt;LinkedIn&lt;/a&gt; &lt;a href= "https://www.threads.net/@stolinski"&gt;Threads&lt;/a&gt;&lt;/p&gt; &lt;p class="has-line-data" data-line-start="43" data-line-end="44"&gt; Randy: &lt;a href="https://twitter.com/randyrektor"&gt;X&lt;/a&gt; &lt;a href= "https://www.instagram.com/randyrektor/"&gt;Instagram&lt;/a&gt; &lt;a href= "https://www.youtube.com/@randyrektor"&gt;YouTube&lt;/a&gt; &lt;a href= "https://www.threads.net/@randyrektor"&gt;Threads&lt;/a&gt;&lt;/p&gt;</description>

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy...

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

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.

Syntax - Tasty Web Development Treats

Details

Recent Episodes