<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀⣤⣤⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⠀⢀⣄⡀⠀⠀⢀⣴⣾⣿⣿⣿⣿⣿⣷⣦⣄⡀⠀⠀⣤⣟⠛⠋⠙⢷⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠿⣫⠟⠛⢋⣧⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣼⡯⣉⠉⠓⢦⣀⠉⢢⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⡴⠋⠀⣠⠖⠉⢋⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣄⠑⢄⠀⠈⢳⡀⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⢿⠏⠀⡴⠊⠁⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢿⢦⣀⢳⠀⠀⢣⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡞⢀⠞⠀⠀⣴⣿⡿⡿⢿⣿⡟⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣄⣀⠀⠉⠃⠀⠀⠳⢽⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⠏⣠⠋⠀⢀⡴⠛⠁⢀⣨⣾⡿⣇⠀⠛⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢲⡀⠀⠀⠀⠀⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠏⠁⠀⠀⠀⠴⠋⠀⢀⣴⣿⣿⠟⠀⠈⣰⣦⣀⢀⣈⣿⠟⡿⢿⣿⠏⣈⣟⢻⣿⣿⣿⡀⠳⡄⠀⠀⠀⠀⠙⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠏⠀⠀⠀⠀⠀⠀⢀⣴⣿⣿⣿⠃⠀⢀⡄⠉⣉⠿⠛⠧⣞⣀⣧⡜⢛⣛⣻⣏⣀⢻⣿⣿⠃⠣⡇⠀⠀⠀⠀⠀⠘⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠏⠀⠀⠀⠀⠀⠀⢠⣾⣿⣿⣿⡏⠀⠀⠎⠀⠽⢟⣻⣟⡆⣸⠆⠸⡄⢻⣛⣛⠃⠘⢸⣿⡿⠀⠀⠸⡀⠀⠀⠀⠀⠀⠈⠳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣠⠏⠀⠀⠀⠀⠀⠀⢀⡞⢹⣿⣿⣿⡇⠀⠀⠀⠀⠀⠈⢁⣠⢤⡁⠀⠀⢈⢦⡀⠀⠀⠀⢸⣿⠇⠀⠀⠀⠳⣄⠀⠀⠀⠀⠀⠀⠙⢦⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣠⠊⠁⠀⠀⠀⠀⠀⠀⢀⡞⠀⠈⣿⠙⠛⣇⠀⠀⠀⠀⠀⠀⠉⢀⡼⠇⠀⠀⠘⢦⡁⠀⠀⠀⢸⣟⠀⠀⠀⠀⠀⠀⠙⢦⠀⠀⠀⠀⠀⠀⠱⣄⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡴⣯⡟⠁⠀⠀⠀⠀⠀⢀⡤⠖⠋⠀⠀⠀⠸⡎⠿⠏⠀⠀⠀⠀⠀⠀⠀⠚⠓⠚⠣⠴⠚⠛⣃⠀⠀⠀⣺⡏⠀⠀⠀⠀⠀⠀⠀⠈⢣⠀⠀⠀⠀⠀⠀⠈⠳⠀⠀⠀⠀⠀
⠀⠀⠘⠀⢈⡏⠀⠀⠀⠀⠀⢀⡞⠀⠀⠀⠀⠀⠀⠀⢻⣄⣠⡄⠀⠀⠀⠀⠀⠀⣴⠋⣠⣤⣤⣄⠀⠘⠆⠀⠀⡟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⢣⣀⣀⣀⣀⣤⣤⣤⠬⠖⠀⠀⠀
⠤⠀⠀⠀⢸⡀⠀⠀⠀⠀⢠⠎⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⢿⡇⠀⠀⠀⠀⠀⠀⠁⠾⣗⠓⠒⢚⡗⠀⠀⠀⡼⠙⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠱
⠀⠀⠀⠀⠀⠉⠓⠒⠲⢰⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⡎⢣⡀⠀⠀⠀⠀⠀⠀⠀⠀⢉⣉⠁⠀⠀⠀⣼⠁⠀⠈⠳⣄⢀⡴⠒⠦⣄⣀⣀⣀⣽⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣧⣄⣀⡤⠶⠤⣴⠒⠒⠒⠋⠁⢸⠁⠀⠙⢦⡀⠀⠀⠀⠀⠀⠘⠉⠈⠙⠂⢀⠞⢸⡆⠀⠀⠀⡼⠉⠀⠀⠀⠀⠀⠁⠀⠘⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠈⠙⠂⠀⠀⠀⢻⡀⠀⠀⠀⠈⠻⡒⠦⠤⢄⣀⣀⠀⣀⠴⠋⢀⡼⢧⠀⠀⣸⠁⠀⠀⠀⠀⠸⡀⠀⠀⠀⢳⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢦⡀⠀⠀⠀⢧⡀⠀⠀⠀⠀⣉⣀⣀⠴⢫⠇⠀⠙⠲⠧⡄⠀⠀⠀⠀⠀⢣⠀⠀⠀⠈⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠲⢤⣀⣸⡉⠉⠉⠉⠉⠉⠀⠀⠀⡼⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠘⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠇⠀⠀⠀⠀⠀⠀⠀⢠⡇⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀⠀⠀⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

         __  ___                                     __     _             __
 _    __/ /_/ _/ ___ ________   __ _____  __ __  ___/ /__  (_)__  ___ _  / /  ___ _______
| |/|/ / __/ _/ / _ `/ __/ -_) / // / _ \/ // / / _  / _ \/ / _ \/ _ `/ / _ \/ -_) __/ -_)
|__,__/\__/_/   \_,_/_/  \__/  \_, /\___/\_,_/  \_,_/\___/_/_//_/\_, / /_//_/\__/_/  \__/
                              /___/                             /___/
-->
<!DOCTYPE html data-theme="dark">
<html lang="en">
<head>
            <meta charset="utf-8" />
        <title>💕 Local-First | 🆆🅴🅱🄳🄴🅅&lt;/wtf&gt;</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="generator" content="GravCMS" />

        <link rel="canonical" href="https://web-dev.wtf/local-first"/>
                                                <link href="//unpkg.com/tippy.js@6/animations/scale.css" type="text/css" rel="stylesheet">
<link href="/user/themes/hugo-blog-awesome/css/custom.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/github-markdown-alerts/assets/github-markdown-alerts.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/markdown-notices/assets/notices.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/form/assets/form-styles.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/mediaembed/assets/css/mediaembed.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/page-toc/assets/page-toc-anchors.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/youtube/css/youtube.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/highlight/css/monokai-sublime.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/highlight/css/highlightjs-line-numbers.css" type="text/css" rel="stylesheet">
<link href="/user/plugins/login/css/login.css" type="text/css" rel="stylesheet">
<style>
:root {
    --gh-alert-note-border-color: #316dca;
    --gh-alert-note-title-color: #316dca;
    --gh-alert-tip-border-color: #347d39;
    --gh-alert-tip-title-color: #347d39;
    --gh-alert-important-border-color: #8256d0;
    --gh-alert-important-title-color: #8256d0;
    --gh-alert-warning-border-color: #c69026;
    --gh-alert-warning-title-color: #c69026;
    --gh-alert-caution-border-color: #c93c37;
    --gh-alert-caution-title-color: #c93c37;
}
</style>


        <script>
            document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';
        </script>
    </head>

<body>

<div id="container" style="max-width: calc(890px - (30px * 2));" >
    <header class="site-header">
    <nav class="nav">
        <a href="https://web-dev.wtf" class="logo">🆆🅴🅱🄳🄴🅅&lt;/wtf&gt;</a>
        <ul>
                            <li><a href="https://web-dev.wtf" data-tippy-content="Home">🏠</a></li>
            
                                            <li>
                    <a href="/projects" class="" data-tippy-content="Projects">
                                                🚀
                    </a>
                </li>
                                            <li>
                    <a href="/me" class="" data-tippy-content="Me">
                                                🙆‍♂️
                    </a>
                </li>
                                            <li>
                    <a href="/libs" class="" data-tippy-content="Libs">
                                                📚
                    </a>
                </li>
                                            <li>
                    <a href="/log" class="" data-tippy-content="Blog Listing">
                                                📝
                    </a>
                </li>
                    </ul>
    </nav>
</header>

    <main id="content" style="max-width: calc((890px - 170px) - (30px * 2));" >
        
    
    <article>
        <header class="header">
            <h1>💕 Local-First</h1>
        </header>

        <div class="page-content">
            <div class="grav-youtube-wrapper ">
  <div class="grav-youtube">
      <iframe src="https://www.youtube-nocookie.com/embed/10d8HxS4y_g?color=white&amp;rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
        </div>

        <div class="md-alert md-alert--note mt-5" dir="auto">
            <p class="md-alert-title"><svg class="octicon octicon-info inline-block " viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> Note</p>
            <div class="md-alert-body">
                <p><strong>Permalink:</strong> <code>https://web-dev.wtf/local-first</code></p>
                <p><strong>Published:</strong> <code>Feb 03, 2026</code></p>
                <p><strong>Modified:</strong> <code>Feb 03, 2026</code></p>
            </div>
        </div>
    </article>

    </main>

    <footer class="footer" style="max-width: calc((890px - 170px) - (30px * 2));" >
    <ul class="social-links">
                    <li>
                <a href="https://github.com/whydesign" rel="noreferrer noopener" target="_blank" title="GitHub">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-github">
                        <use href="/user/themes/hugo-blog-awesome/templates/icons/github.svg#icon-github" xlink:href="/user/themes/hugo-blog-awesome/templates/icons/github.svg#icon-github">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-github" viewBox="0 0 16 16">
<title>github</title>
<path d="M8 0c-4.42 0-8 3.582-8 8 0 3.535 2.292 6.533 5.47 7.59 0.4 0.075 0.547-0.172 0.547-0.385 0-0.19-0.007-0.693-0.010-1.36-2.226 0.483-2.695-1.073-2.695-1.073-0.364-0.924-0.89-1.17-0.89-1.17-0.725-0.496 0.056-0.486 0.056-0.486 0.803 0.056 1.225 0.824 1.225 0.824 0.714 1.223 1.873 0.87 2.33 0.665 0.072-0.517 0.278-0.87 0.507-1.070-1.777-0.2-3.644-0.888-3.644-3.953 0-0.873 0.31-1.587 0.823-2.147-0.090-0.202-0.36-1.015 0.070-2.117 0 0 0.67-0.215 2.2 0.82 0.64-0.178 1.32-0.266 2-0.27 0.68 0.004 1.36 0.092 2 0.27 1.52-1.035 2.19-0.82 2.19-0.82 0.43 1.102 0.16 1.915 0.080 2.117 0.51 0.56 0.82 1.274 0.82 2.147 0 3.073-1.87 3.75-3.65 3.947 0.28 0.24 0.54 0.73 0.54 1.48 0 1.070-0.010 1.93-0.010 2.19 0 0.21 0.14 0.46 0.55 0.38 3.201-1.049 5.491-4.049 5.491-7.579 0-4.418-3.582-8-8-8z"></path>
</symbol>
</svg>
                        </use>
                    </svg>
                </a>
            </li>
        
                    <li>
                <a href="https://stackoverflow.com/users/22222135/whydesign" rel="noreferrer noopener" target="_blank" title="Stack Overflow">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-stackoverflow">
                        <use href="/user/themes/hugo-blog-awesome/templates/icons/stackoverflow.svg#icon-stackoverflow" xlink:href="/user/themes/hugo-blog-awesome/templates/icons/stackoverflow.svg#icon-stackoverflow">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-stackoverflow" viewBox="0 0 16 16">
<title>stackoverflow</title>
<path d="M12.658 14.577v-4.27h1.423v5.693h-12.851v-5.693h1.42v4.27h10.006zM4.075 13.154h7.16v-1.424h-7.16v1.424zM4.248 9.919l6.987 1.46 0.3-1.38-6.985-1.459-0.302 1.38zM5.154 6.549l6.47 3.020 0.602-1.3-6.47-3.020-0.602 1.29zM6.964 3.359l5.478 4.57 0.906-1.080-5.478-4.569-0.9 1.078zM10.502 0l-1.164 0.863 4.27 5.735 1.164-0.862-4.272-5.736z"></path>
</symbol>
</svg>
                        </use>
                    </svg>
                </a>
            </li>
        
                    <li>
                <a href="https://steamcommunity.com/id/mo1c" rel="noreferrer noopener" target="_blank" title="Steam">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-steam">
                        <use href="/user/themes/hugo-blog-awesome/templates/icons/steam.svg#icon-steam" xlink:href="/user/themes/hugo-blog-awesome/templates/icons/steam.svg#icon-steam">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-steam" viewBox="0 0 16 16">
<title>steam</title>
<path d="M7.986 0c-4.202 0-7.646 3.24-7.972 7.358l4.288 1.772c0.363-0.247 0.802-0.393 1.274-0.393 0.042 0 0.084 0.002 0.126 0.004l1.908-2.761v-0.040c0-1.663 1.352-3.016 3.016-3.016s3.017 1.354 3.017 3.018-1.354 3.017-3.017 3.017h-0.070l-2.718 1.941c0 0.034 0.003 0.070 0.003 0.106 0 1.25-1.010 2.264-2.26 2.264-1.090 0-2.010-0.782-2.22-1.818l-3.071-1.272c0.95 3.358 4.033 5.82 7.695 5.82 4.418 0 8-3.582 8-8s-3.582-8-8-8zM5.026 12.14l-0.982-0.407c0.175 0.362 0.476 0.666 0.876 0.833 0.865 0.36 1.862-0.050 2.222-0.916 0.175-0.42 0.176-0.88 0.003-1.3s-0.5-0.747-0.918-0.922c-0.416-0.173-0.86-0.166-1.252-0.020l1.015 0.42c0.638 0.267 0.94 1 0.673 1.637-0.265 0.638-0.998 0.94-1.636 0.674zM12.636 5.938c0-1.108-0.902-2.010-2.010-2.010-1.11 0-2.010 0.902-2.010 2.010 0 1.11 0.9 2.010 2.010 2.010 1.108 0 2.010-0.9 2.010-2.010zM9.12 5.935c0-0.835 0.675-1.51 1.51-1.51 0.833 0 1.51 0.675 1.51 1.51 0 0.834-0.677 1.51-1.51 1.51-0.835 0-1.51-0.676-1.51-1.51z"></path>
</symbol>
</svg>
                        </use>
                    </svg>
                </a>
            </li>
        
                    <li>
                <a href="mailto:info@whydesign-halle.de" title="Email">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon-email">
                        <use href="/user/themes/hugo-blog-awesome/templates/icons/email.svg#icon-email" xlink:href="/user/themes/hugo-blog-awesome/templates/icons/email.svg#icon-email">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="icon-dribbble" viewBox="0 0 16 16">
<title>email</title>
<path id="icon-email" d="M14.5 2h-13c-0.829 0-1.5 0.671-1.5 1.5v9c0 0.828 0.671 1.5 1.5 1.5h13c0.829 0 1.5-0.672 1.5-1.5v-9c0-0.829-0.671-1.5-1.5-1.5zM1.371 12.995l-0.365-0.366 4.125-4.124 0.365 0.366-4.125 4.124zM14.63 12.995l-4.125-4.124 0.366-0.366 4.125 4.124-0.366 0.366zM8.5 9.662v0.338h-1v-0.338l-6.498-6.025 0.636-0.636 6.362 5.899 6.363-5.899 0.636 0.636-6.498 6.025z"></path>
</symbol>
</svg>
                        </use>
                    </svg>
                </a>
            </li>
            </ul>

    <small>© 2025 by Humans<br>
Page is under WTFPL - Do What the Fuck You Want to Public License.<br>
🏳️‍🌈 🐈 🏴‍☠️ 🖤 ❤️ 🍕</small>
</footer></div>

<button type="button" class="theme-btn" data-theme-toggle aria-label="Switch theme color" data-tippy-content="Switch theme color">🌓</button>

            <script src="/system/assets/jquery/jquery-3.x.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="/user/themes/hugo-blog-awesome/js/vendor.js"></script>
<script src="/user/themes/hugo-blog-awesome/js/main.js"></script>
<script src="/user/plugins/mediaembed/assets/js/mediaembed.js"></script>
<script src="/user/plugins/highlight/js/highlight.pack.js"></script>
<script src="/user/plugins/highlight/js/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>

</body>
</html>