Wes Bos & Scott Tolinski - Full Stack JavaScrip...

Zpravodajství

Technologické zprávy

Technika

783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

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.

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <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:07">02:07</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:33">02:33</a> The file system API.</li> <li class="has-line-data" data-line-start="7" data-line-end="10"> <a href="#t=03:08">03:08</a> The Cache API. <ul> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Cache">Mozilla Developer Cache API</a>.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://airhorner.com/">Airhorner, a good example</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=04:24">04:24</a> Size restrictions per browser.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=07:04">07:04</a> How tools like <a href="http://Riverside.fm">Riverside.fm</a> use IndexedDB.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=08:47">08:47</a> Data eviction (too much data).</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=10:16">10:16</a> What we’re using it for and how.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=12:17">12:17</a> How do we do this in code?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=14:37">14:37</a> Creating the cache.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=16:18">16:18</a> Retrieving from cache manually.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=19:00">19:00</a> Adding metadata.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=19:37">19:37</a> A live debugging.</li> <li class="has-line-data" data-line-start="19" data-line-end="22"> <a href="#t=22:39">22:39</a> Persistent storage. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://web.dev/articles/persistent-storage">web.dev Persistent Storage</a>.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://hackernoon.com/persistent-data-what-working-with-the-storage-api-looks-like"> Hackernoon Persistent Storage</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="22" data-line-end="25"> <a href="#t=26:10">26:10</a> Media score. <ul> <li class="has-line-data" data-line-start="23" data-line-end="25"> <a href="https://developer.chrome.com/blog/autoplay">Chrome Autoplay Policy</a>.</li> </ul> </li> </ul> <h3 class="code-line" data-line-start="25" data-line-end="26"> <a id="Hit_us_up_on_Socials_25"></a>Hit us up on Socials!</h3> 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>

Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.
 Show Notes  00:00 Welcome to Syntax!
 02:07 Brought to you by Sentry.io.
 02:33 The file system API.
 03:08 The Cache API. Mozilla Developer Cache API.
 Airhorner, a good example.

 04:24 Size restrictions per browser.
 07:04 How tools like Riverside.fm use IndexedDB.
 08:47 Data eviction (too much data).
 10:16 What we’re using it for and how.
 12:17 How do we do this in code?
 14:37 Creating the cache.
 16:18 Retrieving from cache manually.
 19:00 Adding metadata.
 19:37 A live debugging.
 22:39 Persistent storage. web.dev Persistent Storage.
  Hackernoon Persistent Storage.

 26:10 Media score. Chrome Autoplay Policy.

  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott:X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

Aplikace Youradio Talk

783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

Poslechněte si podcast