Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights. <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:18">03:18</a> Brought to you by <a href="www.sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=04:08">04:08</a> What is LoFi?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://localfirstweb.dev/">localfirst.dev</a></li> <li class="has-line-data" data-line-start="8" data-line-end="18"> <a href="#t=05:02">05:02</a> The Seven Ideals for Local-first. <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=05:29">05:29</a> 1: No Spinners.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=06:48">06:48</a> 2: Your work is not trapped on one device.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=07:56">07:56</a> 3: The network is optional.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=08:50">08:50</a> 4: Seamless collaboration with your colleagues.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=09:35">09:35</a> Oops, we for got to read 5: The Long Now.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=09:37">09:37</a> 6: Security and privacy by default.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=09:45">09:45</a> 7: You retain ultimate ownership and control.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://actualbudget.com/">Actual Budget Finance App</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://www.inkandswitch.com/local-first/">Ink & Switch</a></li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=13:01">13:01</a> Sounds great, let’s go! Not so fast, this stuff is hard.</li> <li class="has-line-data" data-line-start="19" data-line-end="27"> <a href="#t=14:07">14:07</a> The technology involved. <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=14:30">14:30</a> CRDT (Conflict-free Replicated Data Types).</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type">Wikipedia Definition</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://www.youtube.com/watch?v=DEcwa68f-jY&ab_channel=dotconferences"> James Long dotJS 2019 dotconfrences</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=17:48">17:48</a> How does it prioritize conflict resolutions?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=19:36">19:36</a> Websockets.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=20:17">20:17</a> IndexedDB + SQLite.</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=21:23">21:23</a> Service Workers.</li> </ul> </li> <li class="has-line-data" data-line-start="27" data-line-end="31"> <a href="#t=22:16">22:16</a> The software involved. <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=22:24">22:24</a> <a href= "https://replicache.dev/">Replicache</a>.</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=24:48">24:48</a> <a href= "https://docs.yjs.dev/">YJS</a>.</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=25:06">25:06</a> <a href= "https://github.com/electric-sql">Electric SQL</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=25:51">25:51</a> The most basic LoFi application.</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=31:26">31:26</a> Some bigger concepts.</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=32:34">32:34</a> Answering some common questions.</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=35:19">35:19</a> Some real-world examples of LoFi.</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://habitpath.io/waitlist">Habit Path by Scott Tolinski</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=37:18">37:18</a> What about Apple PWA nonsense?</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=38:20">38:20</a> This seems similar to real-time software and multiplayer.</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=38:47">38:47</a> Sounds like too much work.</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://www.triplit.dev/">Triplit Fullstack Database</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://electric-sql.com/">Electric SQL</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.evolu.dev/">Evolu</a></li> <li class="has-line-data" data-line-start="42" data-line-end="48"> <a href="#t=40:46">40:46</a> Some useful links. <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://localfirstweb.dev//">Local-First Web Development</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.youtube.com/@lo.fi_dev">Local-First Lo.fi YouTube</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.inkandswitch.com/local-first">Local-First Ink & Switch</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.reddit.com/r/localfirst/">Local-First Reddit</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://github.com/syntaxfm/local-first">Syntax GitHub Local-First</a></li> </ul> </li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <a href="#t=43:30">43:30</a> Sick Picks + Shameless Plugs.</li> </ul> <a id="Sick_Picks_50"></a>Sick Picks <ul> <li class="has-line-data" data-line-start="52" data-line-end="54"> Wes: <a href="https://dresscode.dev/">Dresscode.dev</a> </li> <li class="has-line-data" data-line-start="54" data-line-end="56"> Scott: <a href= "https://www.monarchmoney.com/referral/tp2gjynkoo">Monarch Money</a> </li> </ul> <a id="Hit_us_up_on_Socials_56"></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>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

739: The LoFi Movement: Building Local First Apps

Syntax - Tasty Web Development Treats