davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Retiring Pinafore (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://nolanlawson.com/2023/01/09/retiring-pinafore/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
  <header>
    <h1>Retiring Pinafore</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://nolanlawson.com/2023/01/09/retiring-pinafore/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Five years ago, I started <a href="https://nolanlawson.com/2018/04/09/introducing-pinafore-for-mastodon/">a journey</a> to build a better Mastodon client – one focused on performance and simplicity. And I did! Pinafore is the main Mastodon client I’ve used myself since I first released it.</p>
<p>After five years, though, my relationship with social media <a href="https://nolanlawson.com/2022/11/22/thoughts-on-mastodon/">has changed</a>, and it’s time for me to put Pinafore out to pasture. The <a href="https://pinafore.social">pinafore.social</a> website will still work, but I’ve marked <a href="https://github.com/nolanlawson/pinafore">the repo</a> as unmaintained.</p>
<h2>Why retire Pinafore?</h2>
<p>I don’t have the energy to do this anymore. Pinafore has gone from being a fun side project to being a source of dread for me. There is a constant stream of bug reports, feature requests, and pull requests to manage, and I just don’t want to spend my free time doing this anymore.</p>
<p>By the way, this is not my first rodeo. Read <a href="https://nolanlawson.com/2017/03/05/what-it-feels-like-to-be-an-open-source-maintainer/">this post</a> on my breakup with another open-source project.</p>
<h2>Why not pass it off to a new maintainer?</h2>
<p>Running a fediverse client requires trust. People who use Pinafore are trusting me to handle their data securely. As such, I’ve been meticulous about using <a href="https://observatory.mozilla.org/analyze/pinafore.social">good security headers</a> and making <a href="https://github.com/nolanlawson/pinafore/issues/139">pro-privacy decisions</a>. A new maintainer (through malice or ignorance) could add new functionality that compromises on security or privacy, essentially trading on my good name while harming users.</p>
<p>Over the years, I have had <a href="https://github.com/nolanlawson/pinafore/issues/1886">lots</a> <a href="https://github.com/nolanlawson/pinafore/issues/2339">of</a> <a href="https://github.com/nolanlawson/pinafore/issues/2261">feature</a> <a href="https://github.com/nolanlawson/pinafore/issues/1671">requests</a> that would inadvertently cause a privacy or security leak, and I’ve pushed back on every single one. (E.g. “Why not contact third-party servers to show the full favorite/boost count?” Well, because users may trust their home server, but that doesn’t mean they trust random third-party servers.)</p>
<p>Rather than trust that a new maintainer will keep these high standards in place, I’d rather put Pinafore in a frozen state.</p>
<h2>Why not shut it down entirely?</h2>
<p>Thanks to <a href="https://vercel.com">Vercel’s</a> generous free tier, Pinafore costs me $0 per month to run. It’s just static HTML/CSS/JS files, after all.</p>
<h2>Why are you the sole maintainer?</h2>
<p>I’m not – there have been <a href="https://github.com/nolanlawson/pinafore/graphs/contributors">tons</a> of contributions through the years. But for the most part, these have been “drive-by” in nature (nothing wrong with that!), rather than someone deeply learning the codebase end-to-end.</p>
<p>I suspect one of the reasons for this is that Pinafore is written in Svelte v2 and <a href="https://sapper.svelte.dev/">Sapper</a> – both of which are deprecated in favor of Svelte v3 and <a href="https://kit.svelte.dev/">SvelteKit</a>. Not only is there <a href="https://github.com/sveltejs/svelte/issues/2462">no migration path</a> from Svelte v2 to v3, but <a href="https://kit.svelte.dev/docs/migrating">there isn’t one</a> from Sapper to SvelteKit either. (And on top of that, I had to <a href="https://github.com/nolanlawson/sapper">fork Sapper</a> pretty heavily.) Anyone making a bet on learning Pinafore’s tech stack is investing in a dead framework, so it’s not very attractive for new maintainers.</p>
<p>So why didn’t I bother updating it? Well, it’s a lot of work to manually migrate 200+ components to what is essentially a new framework. And plus, as far as I could tell, it would be a pure DX (Developer Experience) improvement, not a UX (User Experience) improvement. (I just wouldn’t be using any of SvelteKit’s new features, and Svelte v3 doesn’t seem to have massive UX improvements over Svelte v2.)</p>
<h2>What did you learn while writing Pinafore?</h2>
<p>Now here’s an interesting question! And one that may be useful for those building their own Mastodon (or fediverse) clients. It is my sincerest wish that Pinafore inspires other developers to build their own (and better!) clients.</p>
<h3>API and offline</h3>
<p>First off, <a href="https://en.wikipedia.org/wiki/ActivityPub">ActivityPub</a> does have a <a href="https://www.w3.org/TR/activitypub/#client-to-server-interactions">client-to-server API</a>, but as far as I can tell, it’s not really worth implementing. Mastodon is the 800-pound gorilla in the fediverse, <a href="https://github.com/mastodon/mastodon/issues/10520">it doesn’t implement</a> this API, and other servers (such as <a href="https://pleroma.social/">Pleroma</a> and <a href="https://github.com/misskey-dev/misskey">Misskey</a>) implement their own flavor of Mastodon’s API. And plus, <a href="https://docs.joinmastodon.org/methods/">Mastodon’s REST API</a> is pretty sensible and doesn’t change too frequently. (And when it does, they add a <code>/v2</code> endpoint while still maintaining the <code>/v1</code> version.)</p>
<p>However, the fact that Mastodon has a fairly bog-standard REST API makes it pretty difficult to implement offline support, as I did in Pinafore. Essentially, I implemented a <a href="https://github.com/nolanlawson/pinafore/tree/ed9a9f6539066159801e7df40a6be2f37a8c5588/src/routes/_database">full mirror</a> of Mastodon’s PostgreSQL database structure, but on top of <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. On top of that, I had to implement a variety of strategies to synchronize data between the client and server:</p>
<ul>
<li>As new statuses stream in, how do you backfill ones you may have missed if the user went offline? Well, you have to just keep <a href="https://github.com/nolanlawson/pinafore/blob/ff53fcab10d01c02a762a824d35a961473991668/src/routes/_actions/stream/fillStreamingGap.js#L9">fetching statuses to fill the gap</a>.</li>
<li>How do you deal with deleted statuses? Well, you have to remove them from the in-memory store, and the database, and then also go ahead and delete any statuses that boosted them or notifications that reference them… <a href="https://github.com/nolanlawson/pinafore/blob/ff53fcab10d01c02a762a824d35a961473991668/src/routes/_actions/deleteStatuses.js">It’s a lot</a>. (And don’t get me started on <a href="https://github.com/nolanlawson/pinafore/issues/2179">editing statuses</a>! I didn’t even get around to that.)</li>
<li>How to deal with slow servers? Well, you can implement <a href="https://github.com/nolanlawson/pinafore/blob/ff53fcab10d01c02a762a824d35a961473991668/src/routes/_components/status/StatusToolbar.html#L121-L131">an optimistic UI</a> that shows (for instance) a “favorited” animation while still waiting for the server to respond. (And also cancels if the server responds with an error or times out.)</li>
</ul>
<p>From my years working on <a href="https://pouchdb.com">PouchDB</a>, I know that it’s a fool’s errand to try to implement proper client-server synchronization without a holistic plan for managing revisions, conflicts, and offline states… and yet, I did it. The end result is pretty impressive in my opinion, even if arguably it doesn’t add a lot to the user experience. (There’s not much you can do in a social media app when you’re offline, and I’m sure people still frequently have to refresh when stuff gets out-of-date.)</p>
<h3>Performance</h3>
<p>Speaking of which, refreshes should be fast! And I believe Pinafore is pretty good at this. (I can’t find the link, but someone did a recent analysis showing that Pinafore uses less CPU and memory than the default Mastodon frontend.)</p>
<p>In short, I’d say it’s entirely possible to build a performant SPA (despite some of my <a href="https://nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/">misgivings about SPAs</a>). But it helps if:</p>
<ul>
<li>You have a browser perf background (like me).</li>
<li>You’re only one developer. (Much harder to implement tricky perf optimizations if you have to explain it to your colleagues!)</li>
<li>You use a perf-focused framework like <a href="https://svelte.dev">Svelte</a>.</li>
<li>You don’t do much! Pinafore has a fraction of the features of the main Mastodon frontend.</li>
<li>You’re merciless about removing dependencies, or <a href="https://github.com/nolanlawson/emoji-picker-element/">writing your own dependencies</a> when the existing ones are too slow or bloated.</li>
<li>You’re meticulous about little micro-optimizations (e.g. <a href="https://nolanlawson.com/2021/08/08/improving-responsiveness-in-text-inputs/">debouncing</a>, <a href="https://github.com/sveltejs/svelte/issues/1098">event delegation</a>, or <a href="https://github.com/nolanlawson/pinafore/blob/ff53fcab10d01c02a762a824d35a961473991668/docs/Architecture.md#every-sapper-page-is-duplicated">page splitting</a>) that improve the user experience, especially on low-end devices, but make the developer experience a lot worse.</li>
</ul>
<p>Not all of this is necessary to make a fast, fluid API, but it certainly helps. And the fact that I ended up building something that <a href="https://nolanlawson.com/2019/09/22/the-joy-and-challenge-of-developing-for-kaios/">can run on feature phones</a> gives me a lot of satisfaction.</p>
<h3>Accessibility</h3>
<p>I didn’t set out to write “the accessible Mastodon client,” but I’ve heard from a lot of folks that Pinafore is one of the better ones out there, especially for blind users.</p>
<p>For this, I mostly have to thank <a href="https://www.marcozehe.de/">Marco Zehe</a> and <a href="https://www.jantrid.net/">James Teh</a> (among others), who provided tons of feedback and really helped with the polish of the screen reader experience. Accessibility <a href="https://nolanlawson.com/2019/11/05/what-ive-learned-about-accessibility-in-spas/">isn’t always black-and-white</a> – like anything in design, sometimes there are tradeoffs and differing opinions on what the best option is. Leaning on the expertise of actual blind users gave me insights that I couldn’t have had otherwise.</p>
<p>Another thing that helps is just giving a damn. When I started on Pinafore, I didn’t really know much about accessibility, but I decided it was time to finally learn. I started off with <a href="https://youtube.com/watch?v=5R-6WvAihms">a basic intro to screen readers from Rob Dodson</a>, played around with VoiceOver and NVDA, and tried to read and understand as much as I could. I wouldn’t call myself an accessibility expert, but I’ve made a lot of progress in the past five years, and now I wince when I look back at some of the code I wrote in the past.</p>
<p>In the end, I found accessibility to be quite rewarding. Rather than feeling like a chore or a box-ticking exercise, it feels like a fun challenge. In some cases it’s just about leaning on existing web standards, but in other cases it feels like you’re building a parallel semantic UI to the visual one. Sometimes I found that this even <a href="https://nolanlawson.com/2020/07/01/building-an-accessible-emoji-picker/">influenced the overall architecture</a> of my code – which goes to show that it’s better to consider accessibility upfront rather than as an afterthought.</p>
<p>That said, I definitely messed up some stuff when it comes to accessibility – <a href="https://webaim.org/articles/contrast/">color contrast</a> in particular is something I did a poor job on. (Luckily <a href="https://nickcolley.co.uk/">Nick Colley</a> has put a bunch of work into Pinafore to improve this!)</p>
<h2>Conclusion</h2>
<p>Pinafore was a fun project. I learned a lot about web development while working on it. Often, when a new feature landed in browsers – e.g. <a href="https://github.com/nolanlawson/pinafore/pull/2088"><code>color-scheme</code></a>, <a href="https://github.com/nolanlawson/pinafore/pull/1857">maskable icons</a>, or <a href="https://github.com/nolanlawson/pinafore/blob/ff53fcab10d01c02a762a824d35a961473991668/src/routes/_utils/polyfills/loadPolyfills.js#L9-L23">various <code>Intl</code> APIs</a> – I would eagerly integrate it into Pinafore, which helped me learn more about how browsers work.</p>
<p>In another case, I went <a href="https://nolanlawson.com/2020/06/28/introducing-emoji-picker-element-a-memory-efficient-emoji-picker-for-the-web/">a bit overboard</a> on building my own emoji picker for Pinafore, and in the process learned <a href="https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/">way more than I ever wanted to know</a> about fonts and emoji rendering.</p>
<p>I also think that Pinafore accomplished many of the goals I had in mind when I originally wrote it. At the time, Mastodon only had a multi-column UI, which many users found overwhelming and confusing. Pinafore demonstrated that a single-column layout could be a viable alternative, and since then, Mastodon has defaulted to <a href="https://blog.joinmastodon.org/2019/06/mastodon-2.9/">a single-column layout</a>.</p>
<p>Back then, there was also only one web-based Mastodon client (<a href="https://halcyon.mstdn.social/">Halcyon</a>), and it didn’t support logging in to more than one instance at a time. Pinafore proved it was possible for a web-based client to do this (not obvious given <a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> constraints!), and nowadays there are lots of web-based clients, such as <a href="https://nicolasconstant.github.io/sengi/">Sengi</a>, <a href="https://www.cuckoo.social/">Cuckoo+</a>, and <a href="https://elk.zone">Elk</a>, and many of them support multi-instance logins.</p>
<p>Pinafore isn’t going anywhere – like I mentioned, the site is still up and running. I also think it could serve as an interesting point of comparison for other Mastodon clients. (Try to beat Pinafore on performance and accessibility! I think that would be a great outcome.)</p>
<p>I also want to thank everyone who followed along with me on this journey over the years, and who either used Pinafore, filed a bug, or contributed to it. Thank you for giving me one of my career-defining projects over the last half-decade. It wouldn’t have been possible without your help.</p>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>