2 years ago · 177f88d689
--- a/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/index.html
+++ b/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/index.html
@@ -0,0 +1,247 @@
 <!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>Design Notes (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)">
 <!-- 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://www.colophon.cards/notes/01-design-notes/">

 <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>Design Notes</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://www.colophon.cards/notes/01-design-notes/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <h2>The high concept (in apps)</h2>
 <p>Colophon Cards should be the marriage of <a href="https://notational.net/">Notational Velocity’s search-first navigational model</a> with Twitter’s card stack model.</p>
 <p>Most people don’t notice this but Twitter’s conceptual model is that of a recursive stack of cards. Each tweet is about as much as you’d fit on one side of an index card. Each tweet is also a thread which is a stack of related cards. The timeline is a top-level thread/stack. This is the reason why the algorithmic timeline is such a disruption of how even non-techies use Twitter: it’s a fundamental break in the service’s basic design.</p>
 <p>From Notational Velocity’s website:</p>
 <blockquote>
 <p>The same area is used both for creating notes and searching. I.e., in the process of entering the title for a new note, related notes appear below, letting users file information there if they choose. Likewise, if a search reveals nothing, one need simply press return to create a note with the appropriate title.</p>
 <p>If a note’s title starts with the search term(s), that title will be “auto-completed”. This selects the note and consequently displays it. Correspondingly, selecting a note places its title in the search area (De-selecting the note restores the search terms).</p>
 <p>To create a new note, just type its title and press return. Edit the note as needed in the bottom pane.</p>
 <p>To view or edit an existing note, type one or more words contained in its body or title. Reveal a note’s content by using the up/down arrow keys to select it.</p>
 </blockquote>
 <p>My theory is that I can adapt this navigational model to work with the cards and stacks model popularized by Twitter.</p>
 <h2>Terminology</h2>
 <p><em>Threads</em>: I’ve decided to prefer threads over stacks as, even though, they would mean the same thing when you are building with cards as a core metaphor, they’ve come to have specialised meanings in UX and UI in general. Namely, a thread has come to be the standard term for “a linear sequence of things, some of which may also be similar linear sequences of their own”.</p>
 <p><em>Cards</em>: this has also become a generic term for a UI widget that contains some form of content.</p>
 <p><em>Activity/Activity Stream</em>: often called event stream. This is a stream of the events/activities that form all of the data belonging to a particular user. This is usually an implementation detail (every social media platform implements something like this, as do most apps/services that need to sync data from one place to another). But I would like to test surfacing it as a UI element to see if it helps recall and aids understanding.</p>
 <h2>The main single-user loops</h2>
 <h3>The thread</h3>
 <p><img src="/images/threads-sketch2.jpg" alt="Sketch of how threads might work"></p>
 <p>The core UI view of the app is a thread of cards (or cards and actions on cards, if I follow through with the activity streams idea).</p>
 <p>The UI would be structured in a way that’s similar to Twitter or Mastodon:</p>
 <ol>
 <li>At the top you have an input box.</li>
 <li>Below it you have a stream of cards and activities in reverse-chronological order (newest first).</li>
 <li>Type text in the search box</li>
 <li>The thread is then filtered to only shows cards whose name begins with the search text until there is one (to update) or none.</li>
 <li>At any point in the search, the user can hit the button or press return to create a card with that name. Or they can edit the top card and autocomplete the term to that card’s name.</li>
 </ol>
 <p>One of the core properties of a search-first UI like this (<em>true</em> search first, not baked-on-because-we-don’t-do-design search first like Google Drive) is that it makes you much more aware of the names of things and constantly surfaces older, relevant, cards as you are thinking about names for your new thing.</p>
 <p>The innovation here over Notational Velocity is that each card is also a thread and therefore a completely encapsulated search space. So, you can have a thread for ebooks. A thread for images. A thread for a project. For bookmarks.</p>
 <p>Thoughts:</p>
 <ul>
 <li>I am tempted to have the thread be an activity stream. Instead of just the cards, you would also have the activities on those cards listed in the thread. Like “You updated ‘design notes’” or “You archived ‘design notes’”. I would like to see if having explicit records on your activities in a thread is a helpful mnemonic or not. AFAIK there hasn’t been much research on whether this is helpful in a single-user context so I’m tempted to test it out.</li>
 <li>Full-text search would be on the roadmap but I need to demonstrate the practicality of the basic design model first.</li>
 <li>The user shouldn’t be able to create multiple cards with the same name in the same thread. Trying to create a card with a name identical to another would bring up an edit view for that card.</li>
 </ul>
 <h3>The Card</h3>
 <p><img src="/images/card-sketch.jpg" alt="Sketch of how cards might work"></p>
 <p>The created card has a name, replies (only displayed when you open the card as a thread), attachments, and a body. Possibly later a drag handle.</p>
 <p>Thoughts:</p>
 <ul>
 <li>“name” might be the wrong term for what is, in effect, the main text of the card and should be thought of as more akin to a tweet than document title. Maybe ‘card text’ (plain text, quick search) versus ‘card body’ (rich text, only findable using a full-text-search feature down the line).</li>
 <li>Should the body be rich text, plain text or markdown (irrespective of what it’s stored as)? Markdown is the de facto note standard but is honestly a mess of partially compatible implementations. It also forces a modality to your editing: notes have two completely different modes that look and work in very different ways. Plain text is universal but incredibly limited. A rich text interface has the most potential but is more complicated and harder to pull off.</li>
 <li>More on modality: getting rid of modes does more to make a UI feel fast than most of the performance work engineers love to throw at problems like these. The “find item -&gt; click edit on item -&gt; edit -&gt; save item” cycle is always going to feel slow, no matter how many optimisations through throw at it. If you figure out a way to make it “find item -&gt; edit item” (no ‘edit mode’) then the UI will feel fast no matter how unoptimised the implementation is.</li>
 </ul>
 <h3>Tags</h3>
 <p>Add tag support by assigning all tags mentioned in the body or name to the card. You can show all cards with that tag by entering it (with the preceding #) in the search box.</p>
 <h3>Replies</h3>
 <p>Every card is also a thread. The replies link on the card is a link to the card’s thread. The card thread UI is identical to the top thread UI. Replies are created in the same way with the same loop as in the top thread.</p>
 <p>Thoughts</p>
 <ul>
 <li>I would like to avoid having a specific reply UI and instead keep the conceptual model the same all the way down.</li>
 </ul>
 <h3>Workspaces/Accounts?</h3>
 <p>Should the user be able to have multiple top-level threads, each a separate workspace? Or do the child cards of a solo top thread serve the same function?</p>
 <h3>Pinning</h3>
 <p>The UI should support pinned notes that are persistently floated to the top. One idea is that on displays that are wide enough the pinboard should be a sidebar space and that pinned cards don’t have to just be pinned up to but that they could be arranged freely in the sidebar space.</p>
 <h3>Bookmarks</h3>
 <p>Much like Twitter or Facebook, the URLs mentioned in the name or the body are automatically added as attachments.</p>
 <h3>Attachments</h3>
 <p>File attachments are added via an attach button.</p>
 <p>Thought:</p>
 <ul>
 <li>I could implement a website archiving system that archives a bookmark URL if you add the URL via the attachment UI instead of directly as text?</li>
 </ul>
 <h3>Quoted Cards</h3>
 <p>A special kind of attachment is the quoted card (a concept stolen from Twitter). This is a mechanism for bringing a card from one thread in as a reply to another. Cards shared from other users would also be read-only quoted cards in your threads.</p>
 <h3>Cross-linking</h3>
 <p>If I go with markdown or plaintext <code>[[Note Name]]</code> would be used to automatically link to the note.</p>
 <p>If I go with rich text I would probably try to implement it using a <code>+Name</code> mentioning system similar to Slack’s @ mentioning system that autocompletes including the spaces.</p>
 <p>Or, I could go with the original WikiWiki design and convert all camel-cased words to links to other notes?</p>
 <p>Links to nonexistent notes let you create that note by clicking on them.</p>
 <h3>Backlinks</h3>
 <p>Automatic backlinks are not a good idea. They create clutter, complexity and confusion. See <a href="https://zettelkasten.de/posts/backlinks-are-bad-links/">Backlinking Is Not Very Useful – Often Even Harmful</a>. Intentional backlinks, however, are amazing. The ability to explicitly add a backlink from another note to the current note you’re editing, preferably with custom link text for that context, is an extremely useful organisational tool.</p>
 <p>How to design it, though, is a question, and it depends on the text format and link format.</p>
 <h3>Sharing</h3>
 <p>Designing the sharing and collaboration mode should be a separate document. But the threads and cards UI should be <em>single user</em>. Nothing should happen in your threads or to your cards that isn’t done by you. Sharing should be about data, attachments and sharing your threads (or subsets of your threads) with others as documents.</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>
--- a/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/index.md
+++ b/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/index.md
@@ -0,0 +1,80 @@
 title: Design Notes
 url: https://www.colophon.cards/notes/01-design-notes/
 hash_url: 258d0f17fbbfcfb94be82fb7dd585f66

 <h2>The high concept (in apps)</h2>
 <p>Colophon Cards should be the marriage of <a href="https://notational.net/">Notational Velocity’s search-first navigational model</a> with Twitter’s card stack model.</p>
 <p>Most people don’t notice this but Twitter’s conceptual model is that of a recursive stack of cards. Each tweet is about as much as you’d fit on one side of an index card. Each tweet is also a thread which is a stack of related cards. The timeline is a top-level thread/stack. This is the reason why the algorithmic timeline is such a disruption of how even non-techies use Twitter: it’s a fundamental break in the service’s basic design.</p>
 <p>From Notational Velocity’s website:</p>
 <blockquote>
 <p>The same area is used both for creating notes and searching. I.e., in the process of entering the title for a new note, related notes appear below, letting users file information there if they choose. Likewise, if a search reveals nothing, one need simply press return to create a note with the appropriate title.</p>
 <p>If a note’s title starts with the search term(s), that title will be “auto-completed”. This selects the note and consequently displays it. Correspondingly, selecting a note places its title in the search area (De-selecting the note restores the search terms).</p>
 <p>To create a new note, just type its title and press return. Edit the note as needed in the bottom pane.</p>
 <p>To view or edit an existing note, type one or more words contained in its body or title. Reveal a note’s content by using the up/down arrow keys to select it.</p>
 </blockquote>
 <p>My theory is that I can adapt this navigational model to work with the cards and stacks model popularized by Twitter.</p>
 <h2>Terminology</h2>
 <p><em>Threads</em>: I’ve decided to prefer threads over stacks as, even though, they would mean the same thing when you are building with cards as a core metaphor, they’ve come to have specialised meanings in UX and UI in general. Namely, a thread has come to be the standard term for “a linear sequence of things, some of which may also be similar linear sequences of their own”.</p>
 <p><em>Cards</em>: this has also become a generic term for a UI widget that contains some form of content.</p>
 <p><em>Activity/Activity Stream</em>: often called event stream. This is a stream of the events/activities that form all of the data belonging to a particular user. This is usually an implementation detail (every social media platform implements something like this, as do most apps/services that need to sync data from one place to another). But I would like to test surfacing it as a UI element to see if it helps recall and aids understanding.</p>
 <h2>The main single-user loops</h2>
 <h3>The thread</h3>
 <p><img src="/images/threads-sketch2.jpg" alt="Sketch of how threads might work"></p>
 <p>The core UI view of the app is a thread of cards (or cards and actions on cards, if I follow through with the activity streams idea).</p>
 <p>The UI would be structured in a way that’s similar to Twitter or Mastodon:</p>
 <ol>
 <li>At the top you have an input box.</li>
 <li>Below it you have a stream of cards and activities in reverse-chronological order (newest first).</li>
 <li>Type text in the search box</li>
 <li>The thread is then filtered to only shows cards whose name begins with the search text until there is one (to update) or none.</li>
 <li>At any point in the search, the user can hit the button or press return to create a card with that name. Or they can edit the top card and autocomplete the term to that card’s name.</li>
 </ol>
 <p>One of the core properties of a search-first UI like this (<em>true</em> search first, not baked-on-because-we-don’t-do-design search first like Google Drive) is that it makes you much more aware of the names of things and constantly surfaces older, relevant, cards as you are thinking about names for your new thing.</p>
 <p>The innovation here over Notational Velocity is that each card is also a thread and therefore a completely encapsulated search space. So, you can have a thread for ebooks. A thread for images. A thread for a project. For bookmarks.</p>
 <p>Thoughts:</p>
 <ul>
 <li>I am tempted to have the thread be an activity stream. Instead of just the cards, you would also have the activities on those cards listed in the thread. Like “You updated ‘design notes’” or “You archived ‘design notes’”. I would like to see if having explicit records on your activities in a thread is a helpful mnemonic or not. AFAIK there hasn’t been much research on whether this is helpful in a single-user context so I’m tempted to test it out.</li>
 <li>Full-text search would be on the roadmap but I need to demonstrate the practicality of the basic design model first.</li>
 <li>The user shouldn’t be able to create multiple cards with the same name in the same thread. Trying to create a card with a name identical to another would bring up an edit view for that card.</li>
 </ul>
 <h3>The Card</h3>
 <p><img src="/images/card-sketch.jpg" alt="Sketch of how cards might work"></p>
 <p>The created card has a name, replies (only displayed when you open the card as a thread), attachments, and a body. Possibly later a drag handle.</p>
 <p>Thoughts:</p>
 <ul>
 <li>“name” might be the wrong term for what is, in effect, the main text of the card and should be thought of as more akin to a tweet than document title. Maybe ‘card text’ (plain text, quick search) versus ‘card body’ (rich text, only findable using a full-text-search feature down the line).</li>
 <li>Should the body be rich text, plain text or markdown (irrespective of what it’s stored as)? Markdown is the de facto note standard but is honestly a mess of partially compatible implementations. It also forces a modality to your editing: notes have two completely different modes that look and work in very different ways. Plain text is universal but incredibly limited. A rich text interface has the most potential but is more complicated and harder to pull off.</li>
 <li>More on modality: getting rid of modes does more to make a UI feel fast than most of the performance work engineers love to throw at problems like these. The “find item -&gt; click edit on item -&gt; edit -&gt; save item” cycle is always going to feel slow, no matter how many optimisations through throw at it. If you figure out a way to make it “find item -&gt; edit item” (no ‘edit mode’) then the UI will feel fast no matter how unoptimised the implementation is.</li>
 </ul>
 <h3>Tags</h3>
 <p>Add tag support by assigning all tags mentioned in the body or name to the card. You can show all cards with that tag by entering it (with the preceding #) in the search box.</p>
 <h3>Replies</h3>
 <p>Every card is also a thread. The replies link on the card is a link to the card’s thread. The card thread UI is identical to the top thread UI. Replies are created in the same way with the same loop as in the top thread.</p>
 <p>Thoughts</p>
 <ul>
 <li>I would like to avoid having a specific reply UI and instead keep the conceptual model the same all the way down.</li>
 </ul>
 <h3>Workspaces/Accounts?</h3>
 <p>Should the user be able to have multiple top-level threads, each a separate workspace? Or do the child cards of a solo top thread serve the same function?</p>
 <h3>Pinning</h3>
 <p>The UI should support pinned notes that are persistently floated to the top. One idea is that on displays that are wide enough the pinboard should be a sidebar space and that pinned cards don’t have to just be pinned up to but that they could be arranged freely in the sidebar space.</p>
 <h3>Bookmarks</h3>
 <p>Much like Twitter or Facebook, the URLs mentioned in the name or the body are automatically added as attachments.</p>
 <h3>Attachments</h3>
 <p>File attachments are added via an attach button.</p>
 <p>Thought:</p>
 <ul>
 <li>I could implement a website archiving system that archives a bookmark URL if you add the URL via the attachment UI instead of directly as text?</li>
 </ul>
 <h3>Quoted Cards</h3>
 <p>A special kind of attachment is the quoted card (a concept stolen from Twitter). This is a mechanism for bringing a card from one thread in as a reply to another. Cards shared from other users would also be read-only quoted cards in your threads.</p>
 <h3>Cross-linking</h3>
 <p>If I go with markdown or plaintext <code>[[Note Name]]</code> would be used to automatically link to the note.</p>
 <p>If I go with rich text I would probably try to implement it using a <code>+Name</code> mentioning system similar to Slack’s @ mentioning system that autocompletes including the spaces.</p>
 <p>Or, I could go with the original WikiWiki design and convert all camel-cased words to links to other notes?</p>
 <p>Links to nonexistent notes let you create that note by clicking on them.</p>
 <h3>Backlinks</h3>
 <p>Automatic backlinks are not a good idea. They create clutter, complexity and confusion. See <a href="https://zettelkasten.de/posts/backlinks-are-bad-links/">Backlinking Is Not Very Useful – Often Even Harmful</a>. Intentional backlinks, however, are amazing. The ability to explicitly add a backlink from another note to the current note you’re editing, preferably with custom link text for that context, is an extremely useful organisational tool.</p>
 <p>How to design it, though, is a question, and it depends on the text format and link format.</p>
 <h3>Sharing</h3>
 <p>Designing the sharing and collaboration mode should be a separate document. But the threads and cards UI should be <em>single user</em>. Nothing should happen in your threads or to your cards that isn’t done by you. Sharing should be about data, attachments and sharing your threads (or subsets of your threads) with others as documents.</p>
--- a/cache/2021/b3336418889958b9094059ebb5b761f2/index.html
+++ b/cache/2021/b3336418889958b9094059ebb5b761f2/index.html
--- a/cache/2021/b3336418889958b9094059ebb5b761f2/index.md
+++ b/cache/2021/b3336418889958b9094059ebb5b761f2/index.md
--- a/cache/2021/ce35c82f8b3985d20202076871f169a8/index.html
+++ b/cache/2021/ce35c82f8b3985d20202076871f169a8/index.html
@@ -0,0 +1,202 @@
 <!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>Making Colophon Cards (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)">
 <!-- 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://www.baldurbjarnason.com/2021/making-colophon-cards/">

 <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>Making Colophon Cards</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://www.baldurbjarnason.com/2021/making-colophon-cards/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>There are tasks that computers are good at. And there are tasks where they aren’t. One driver of the evolution of the personal computer, laptops, mobile phones, and all forms of mobile computing has been the desire to increase their range: do more; in a smaller package. Many in tech and software are addicted to riding this wave of new capabilities, however long it will last, to work on and create new software. To extend the reach of the computers in our lives.</p>
 <p>Innovation’s the word. Pushing the boundaries. You know the phrases. Usually spouted by <em>that</em> dude at the party.</p>
 <p>The other side is <em>also</em> interesting. We are now in a place where we have entire genres of software that have decades of history, are backed by stacks of new and old research, have dozens of successful, well-made exemplar apps, and a broad enough conceptual space to allow for new variations on the theme.</p>
 <p>In short, we have genre software and we have avant-garde software, and I’ve always been more interested in genre fiction than literary fiction.</p>
 <p>One of the earliest genres of software is the Personal Knowledge or Information Manager—<a href="https://en.wikipedia.org/wiki/NLS_(computer_system)">arguably as old as the computer mouse itself</a>. Managing data is one of the tasks computers have <em>always</em> been good at, so we’ve been making software in that genre for decades.</p>
 <p><a href="https://en.wikipedia.org/wiki/MORE_(application)">Outliners</a>, <a href="https://www.eastgate.com/Tinderbox/">hypertext systems</a>, <a href="https://notational.net/">note-taking apps</a>, <a href="https://www.devontechnologies.com/apps/devonthink">personal information databases</a>—we’ve been doing this for a while and, because software is inherently ephemeral, we make new iterations for every generation.</p>
 <p>Sometimes, such as with Tinderbox or DEVONThink, the new iterations are new versions of the original software. Sometimes, such as with <a href="https://bear.app/">Bear</a>, <a href="https://ulysses.app/">Ulysses</a>, <a href="https://roamresearch.com/">Roam</a>, or <a href="https://obsidian.md/">Obsidian</a>, it’s a new take on the genre. Not so new that you don’t recognise it for it is, and not so innovative that it doesn’t reuse what worked for other apps, but new variations that are adapted to work well in our current computing context.</p>
 <p>That isn’t even close to a comprehensive list. There’s also <a href="https://evernote.com/">Evernote</a>, <a href="https://getdrafts.com/">Drafts</a>, <a href="https://1writerapp.com/">1Writer</a>—even Apple’s Notes app has evolved to become impressively useful. And I’m still only scratching the surface.</p>
 <p>These apps are also extremely diverse. There’s an increasing tendency for software, in this age of ‘flat’, to all look the same. Same design. Same aesthetic. Same icons. Same fundamental CRUD (Create, Read, Update, Delete) concept mapped onto a specific problem domain. But you’d never mistake a screenshot of Bear for one of Tinderbox or Ulysses. You’d never look at Roam and think to yourself: “huh? That looks exactly like DEVONThink.”</p>
 <p>I’ve been working in or adjacent to this space for the past five years, with varying degrees of success and you can probably tell that I’m a little bit obsessed with the genre.</p>
 <p>It shouldn’t come as a surprise that I’m working on my contribution to the genre.</p>
 <p>I’ve wanted to build a specific take on the note-oriented personal information manager for myself for a long time.</p>
 <p>This summer I applied for a grant from the Technology Development Fund at <a href="https://en.rannis.is/funding/research/technology-development-fund/nr/545">The Icelandic Centre for Research</a> to create a prototype of a notetaking app that I’m calling…</p>
 <p><em><a href="https://www.colophon.cards">Colophon Cards</a></em></p>
 <p>While the app itself won’t be open source (though some bits of it might be), I’ve gotten used to following the open-source ethos of working publicly and transparently.</p>
 <p>So, over the next six months (or longer if I’m successful) I’m going to be documenting the process, the design, development, research, marketing, discussion with my advisers, and other details, at <a href="https://www.colophon.cards/">colophon.cards</a>.</p>
 <p>As you can probably tell from the site, I began a few days ago.</p>
 <ul>
 <li><a href="https://www.colophon.cards/">The front page</a> is the first version of the pitch for the app and my specific approach.</li>
 <li><a href="https://www.colophon.cards/notes/01-design-notes/">The first design notes</a> are a high-level sketch of how it should work.</li>
 <li><a href="https://www.colophon.cards/notes/02-data-model/">The data model</a> are my first attempt at structuring it.</li>
 <li><a href="https://www.colophon.cards/notes/03-sharing-model/">The sharing model</a> outlines how I envision collaboration to work.</li>
 <li><a href="https://www.colophon.cards/notes/04-attachments-bookmarks/">Attachments and bookmarks</a> are about how information management works. I like this one so much that I edited it into the front page pitch, as I’m sure you can tell.</li>
 <li><a href="https://www.colophon.cards/notes/05-reading-viewing/">Reading and viewing</a> outlines my take on what’s missing in the field in terms of reading features in knowledge management apps.</li>
 <li><a href="https://www.colophon.cards/notes/06-business-model/">The business model</a> is a rough sketch of what I imagine the business model to be. Not because I’m anywhere <em>near</em> launching this but because you <em>can’t</em> design an app without having a sense of its business model and its margins.</li>
 <li><a href="https://www.colophon.cards/notes/10-questions/">The questions that need to be answered</a> are just that. Open questions that I need to find answers to.</li>
 </ul>
 <p>Additionally, you can follow my work on the website and comment with an issue on <a href="https://github.com/baldurbjarnason/colophon.cards">the GitHub repository</a>. (Work on the software itself will be in a private repository.)</p>
 <p>The notes I’ve been posting are rough and unedited. They are work products, not essays or marketing, those belong here on this site. You can follow Colophon Cards news by following the mailing list using the form on the site (this is a separate mailing list from the one on this site), by following its feed, or by watching the GitHub repository.</p>
 <p>I’ll also make sure to post about major updates here on this site.</p>
 <p>I’m enjoying the process a lot and I hope that you’ll enjoy it with me.</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>
--- a/cache/2021/ce35c82f8b3985d20202076871f169a8/index.md
+++ b/cache/2021/ce35c82f8b3985d20202076871f169a8/index.md
@@ -0,0 +1,35 @@
 title: Making Colophon Cards
 url: https://www.baldurbjarnason.com/2021/making-colophon-cards/
 hash_url: ce35c82f8b3985d20202076871f169a8

 <p>There are tasks that computers are good at. And there are tasks where they aren’t. One driver of the evolution of the personal computer, laptops, mobile phones, and all forms of mobile computing has been the desire to increase their range: do more; in a smaller package. Many in tech and software are addicted to riding this wave of new capabilities, however long it will last, to work on and create new software. To extend the reach of the computers in our lives.</p>
 <p>Innovation’s the word. Pushing the boundaries. You know the phrases. Usually spouted by <em>that</em> dude at the party.</p>
 <p>The other side is <em>also</em> interesting. We are now in a place where we have entire genres of software that have decades of history, are backed by stacks of new and old research, have dozens of successful, well-made exemplar apps, and a broad enough conceptual space to allow for new variations on the theme.</p>
 <p>In short, we have genre software and we have avant-garde software, and I’ve always been more interested in genre fiction than literary fiction.</p>
 <p>One of the earliest genres of software is the Personal Knowledge or Information Manager—<a href="https://en.wikipedia.org/wiki/NLS_(computer_system)">arguably as old as the computer mouse itself</a>. Managing data is one of the tasks computers have <em>always</em> been good at, so we’ve been making software in that genre for decades.</p>
 <p><a href="https://en.wikipedia.org/wiki/MORE_(application)">Outliners</a>, <a href="https://www.eastgate.com/Tinderbox/">hypertext systems</a>, <a href="https://notational.net/">note-taking apps</a>, <a href="https://www.devontechnologies.com/apps/devonthink">personal information databases</a>—we’ve been doing this for a while and, because software is inherently ephemeral, we make new iterations for every generation.</p>
 <p>Sometimes, such as with Tinderbox or DEVONThink, the new iterations are new versions of the original software. Sometimes, such as with <a href="https://bear.app/">Bear</a>, <a href="https://ulysses.app/">Ulysses</a>, <a href="https://roamresearch.com/">Roam</a>, or <a href="https://obsidian.md/">Obsidian</a>, it’s a new take on the genre. Not so new that you don’t recognise it for it is, and not so innovative that it doesn’t reuse what worked for other apps, but new variations that are adapted to work well in our current computing context.</p>
 <p>That isn’t even close to a comprehensive list. There’s also <a href="https://evernote.com/">Evernote</a>, <a href="https://getdrafts.com/">Drafts</a>, <a href="https://1writerapp.com/">1Writer</a>—even Apple’s Notes app has evolved to become impressively useful. And I’m still only scratching the surface.</p>
 <p>These apps are also extremely diverse. There’s an increasing tendency for software, in this age of ‘flat’, to all look the same. Same design. Same aesthetic. Same icons. Same fundamental CRUD (Create, Read, Update, Delete) concept mapped onto a specific problem domain. But you’d never mistake a screenshot of Bear for one of Tinderbox or Ulysses. You’d never look at Roam and think to yourself: “huh? That looks exactly like DEVONThink.”</p>
 <p>I’ve been working in or adjacent to this space for the past five years, with varying degrees of success and you can probably tell that I’m a little bit obsessed with the genre.</p>
 <p>It shouldn’t come as a surprise that I’m working on my contribution to the genre.</p>
 <p>I’ve wanted to build a specific take on the note-oriented personal information manager for myself for a long time.</p>
 <p>This summer I applied for a grant from the Technology Development Fund at <a href="https://en.rannis.is/funding/research/technology-development-fund/nr/545">The Icelandic Centre for Research</a> to create a prototype of a notetaking app that I’m calling…</p>
 <p><em><a href="https://www.colophon.cards">Colophon Cards</a></em></p>
 <p>While the app itself won’t be open source (though some bits of it might be), I’ve gotten used to following the open-source ethos of working publicly and transparently.</p>
 <p>So, over the next six months (or longer if I’m successful) I’m going to be documenting the process, the design, development, research, marketing, discussion with my advisers, and other details, at <a href="https://www.colophon.cards/">colophon.cards</a>.</p>
 <p>As you can probably tell from the site, I began a few days ago.</p>
 <ul>
 <li><a href="https://www.colophon.cards/">The front page</a> is the first version of the pitch for the app and my specific approach.</li>
 <li><a href="https://www.colophon.cards/notes/01-design-notes/">The first design notes</a> are a high-level sketch of how it should work.</li>
 <li><a href="https://www.colophon.cards/notes/02-data-model/">The data model</a> are my first attempt at structuring it.</li>
 <li><a href="https://www.colophon.cards/notes/03-sharing-model/">The sharing model</a> outlines how I envision collaboration to work.</li>
 <li><a href="https://www.colophon.cards/notes/04-attachments-bookmarks/">Attachments and bookmarks</a> are about how information management works. I like this one so much that I edited it into the front page pitch, as I’m sure you can tell.</li>
 <li><a href="https://www.colophon.cards/notes/05-reading-viewing/">Reading and viewing</a> outlines my take on what’s missing in the field in terms of reading features in knowledge management apps.</li>
 <li><a href="https://www.colophon.cards/notes/06-business-model/">The business model</a> is a rough sketch of what I imagine the business model to be. Not because I’m anywhere <em>near</em> launching this but because you <em>can’t</em> design an app without having a sense of its business model and its margins.</li>
 <li><a href="https://www.colophon.cards/notes/10-questions/">The questions that need to be answered</a> are just that. Open questions that I need to find answers to.</li>
 </ul>
 <p>Additionally, you can follow my work on the website and comment with an issue on <a href="https://github.com/baldurbjarnason/colophon.cards">the GitHub repository</a>. (Work on the software itself will be in a private repository.)</p>
 <p>The notes I’ve been posting are rough and unedited. They are work products, not essays or marketing, those belong here on this site. You can follow Colophon Cards news by following the mailing list using the form on the site (this is a separate mailing list from the one on this site), by following its feed, or by watching the GitHub repository.</p>
 <p>I’ll also make sure to post about major updates here on this site.</p>
 <p>I’m enjoying the process a lot and I hope that you’ll enjoy it with me.</p>
--- a/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/index.html
+++ b/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/index.html
@@ -0,0 +1,244 @@
 <!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>The Making of Colophon Cards (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)">
 <!-- 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://www.colophon.cards/">

 <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>The Making of Colophon Cards</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://www.colophon.cards/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <h2>Where is that goddamn PDF?</h2>
 <p>Ever had an important document or bookmark, which you <em>know</em> you saved somewhere, and you <em>know</em> was filed somewhere clever, but can’t for the life of you find again?</p>
 <p>Ever have a document that you know is somewhere in your company’s shared drive, which is very sensibly organised and structured in a way that you all agreed was correct, but no matter how much you search, you just can’t find it.</p>
 <p>You try to search for it, but because you either haven’t read it yet (you filed it away to read later) or because you only glossed over it (it’s a contract or similar document that isn’t pleasure reading), you can’t come up with a search term that seems to surface it. You tagged the file, but even with tag filtering, your search terms are still too generic and still have hundreds, if not thousands, of results.</p>
 <p>But, if you were lucky enough to have gotten it via email in the first place, you always seem to be able to find it with the first search term you came up with or in the first mail folder you looked in.</p>
 <p>Why do search, folders, and labels/tags work for email but not for your drives (shared or not)?</p>
 <p>Why are shared drives always where files disappear, never to be found again except by the person who first saved it?</p>
 <p>Unless somebody else moved it. Then that person becomes the only person who can ever find the file again.</p>
 <ul>
 <li>It’s easier to find files in your own local drive than in a shared one.</li>
 <li>Finding a specific email is much faster and easier than finding a specific Google Doc. You’re more likely to find an email containing a link to the Google Doc than to find the doc itself in the drive.</li>
 <li>A shared Dropbox is like a black hole for PDFs.</li>
 </ul>
 <p>Local and personal works better for most kinds of information management because you are the one doing the organising for yourself.</p>
 <p>By doing your own organisation you automatically create mnemonic shortcuts for yourself. There isn’t any confusion about terms—you know what you meant when you named the folder ‘Project Stuff’ and another just ‘Stuff’. You remember what you meant in large part because you typed the names out yourself.</p>
 <p>The act of saving and filing can also help you remember even if you don’t remember the reasoning—‘I think I saved it in my GitHub folder’. If you delegate the act of filing to an automated script or to another person (as you do with a shared folder) you lose these mnemonic devices. And you know your folder structure in detail because you made them.</p>
 <p>This is why it’s easier to find stuff in your local drive than on a shared one.</p>
 <p>Email, <em>especially emailing something to yourself</em>, adds another powerful mnemonic device to your toolset:</p>
 <p>Writing.</p>
 <h2>Short writing helps you find your things</h2>
 <p>Constructing search terms that get results is a skill. It’s the flip side to information architecture. Searching shared spaces requires a lot of the same expertise as creating the information architecture for those spaces:</p>
 <ul>
 <li>Understanding common terms.</li>
 <li>Knowing or discovering shared vocabularies.</li>
 <li>Discovering a common or learnable cognitive model for the structure.</li>
 <li>How these are reflected in the organisation of the company.</li>
 <li>Discovering the ontologies used by the company or the field or both.</li>
 </ul>
 <p>Web developers who know what they are doing will construct the navigation and structure of the site to minimise the need for such expertise, but your intranet, wiki, or Dropbox will generally not have seen such careful design.</p>
 <p>In the absence of designed information architecture, you have to resort to constructing the search term based on what you remember about the document.</p>
 <p>Which is tough if you haven’t read it yet or only skimmed it. This is why filing it away into a shared drive is as good as losing it.</p>
 <p>File names aren’t much help as they are, by convention, very short, regularly generic, and frequently auto-generated in some way.</p>
 <p>But an email, especially one that you wrote yourself, is much simpler to find. You may not remember the exact text but you probably have a rough idea and, because you know yourself, you can guess at the words and terms you were likely to use.</p>
 <p>This is why sending an email to yourself with a file as an attachment is often a better filing system than throwing it into your shared Dropbox.</p>
 <h2>User-Subjective Information Management Works</h2>
 <p>This approach is called User-Subjective Information Management (<a href="https://mitpress.mit.edu/books/science-managing-our-digital-stuff"><em>The Science of Managing Our Digital Stuff</em></a> is a good starter on the theory) and you don’t need anything new or expensive to use it. If you’re an Apple user, a combination of the Notes and Mail apps will do you just fine, most of the time.</p>
 <p>It does tend to clutter up your email inboxes, though, which can pose problems for both light and heavy email users.</p>
 <p>(Though, works quite well for moderate email users so if you fall in that category then I highly recommend this approach.)</p>
 <p>That nice Notes app, also, is only available on Apple devices and most of the cross-platform alternatives are either:</p>
 <ol>
 <li>Stupendously complex behemoths that look like they either need a PhD or a hit of acid for them to make sense.</li>
 <li>Or, they take the shared data problem that plagues Google Drive to the next level. Everything is shared. Live. Constant. Your boss is eternally hovering over your virtual shoulder and sees every single keystroke in your collaborative documents.</li>
 </ol>
 <p>That micromanagement espionage mode of collaboration, or some variation thereof, is the <em>default</em> for almost every collaborative note-taking or knowledge management app out there.</p>
 <p>Do you really think you’re going to get honest feedback from everybody you work with when the entire management chain from your line manager up to the CEO can see their every keystroke?</p>
 <p>Do you really think you’re going to get very far in managing your own data and information when everybody is using a shared Notion space?</p>
 <p>The point of being able to find your documents and notes again is to <em>be able to use them</em>. That means turning them into documents or shared notes and getting some form of feedback on them.</p>
 <p>Striking a balance there, between managing your own information library and sharing the <em>product</em> of that management work with others, is surprisingly hard to find with modern tools.</p>
 <p>Solving this problem is the goal of Colophon Cards (Kólófón in Icelandic) which is a prototyping project made possible by a grant from <a href="https://en.rannis.is/funding/research/technology-development-fund/nr/545">The Icelandic Centre for Research’s Technology Development Fund</a>.</p>
 <p>I’m <a href="https://www.baldurbjarnason.com/">Baldur Bjarnason</a>, the project leader and this website is a chronicle of my journey to bring Colophon Cards to life, so that it can help solve your problems.</p>
 <p>Even though the project itself isn’t open-source, I aim to work as much in the spirit of OSS as I can. This is why I plan on doing the prototyping, design, and planning work for the project out in the open in this repository.</p>
 <h2>Colophon Cards</h2>
 <p>In recent years we’ve seen a micro-revolution in Personal Knowledge and Information Management systems. On the low end, built-in apps such as Apple’s Notes have added more sophisticated capabilities. On the high end, apps like Roam and Notion have been mining the years of research done by academia in hypertext, reading and writing. They have been leveraging academic concepts to add features that now challenge the mainstays in this category.</p>
 <p>But, from this end user’s perspective, there are a few problems that these systems haven’t solved:</p>
 <ul>
 <li>The high-end systems have a very steep learning curve and a substantial cognitive overhead. As in: you spend too much time and energy thinking about your notes instead of using your notes.</li>
 <li>The low-end systems lack features for writing <em>about</em> things: bookmarking, annotating, quoting, summarising, navigating, etc. They don’t even have the most basic awareness of the structure of the objects (files, websites, or documents) that the notes are on.</li>
 <li>They all implement the same, highly specialised, mode of collaboration: real-time (or near-realtime) shared ownership and shared organisation.</li>
 <li>With very few exceptions (Ulysses app, for example), they pay very little attention to the purpose of note-taking, which isn’t just to capture and organise ideas but to improve your work. Your notes should inform your projects, designs, and writing. To do so, you need to be able to easily turn your notes into documents that feed into your work.</li>
 </ul>
 <p>My goal with Colophon Cards is to create a web-based note-taking app for bookmarking and reading websites, ebooks, and documents. It needs to find a balance between ease-of-use and advanced features. It should have a user-subjective sharing model built in from the start where data is shared while the organisation is specific to each. Finally, it needs to provide straightforward tools for turning notes into documents for sharing with others.</p>
 <p class="center"></p>
 <h2>Notes on the making of Colophon Cards</h2>
 <ol>
 <li><a href="https://www.colophon.cards/notes/01-design-notes/">Design Notes</a></li>
 <li><a href="https://www.colophon.cards/notes/02-data-model/">The Data Model</a></li>
 <li><a href="https://www.colophon.cards/notes/03-sharing-model/">The Sharing Model</a></li>
 <li><a href="https://www.colophon.cards/notes/04-attachments-bookmarks/">Attachments and Bookmarks</a></li>
 <li><a href="https://www.colophon.cards/notes/05-reading-viewing/">Reading and Viewing</a></li>
 <li><a href="https://www.colophon.cards/notes/06-business-model/">The Business Model</a></li>
 <li><a href="https://www.colophon.cards/notes/10-questions/">Questions that will need to be answered</a></li>
 <li><a href="https://www.colophon.cards/notes/whither-cards/">HTML Sketches: Whither Cards?</a></li>
 </ol>
 </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>
--- a/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/index.md
+++ b/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/index.md
@@ -0,0 +1,77 @@
 title: The Making of Colophon Cards
 url: https://www.colophon.cards/
 hash_url: d232bb8336cade0c220c3f04d2d2c81d

 <h2>Where is that goddamn PDF?</h2>
 <p>Ever had an important document or bookmark, which you <em>know</em> you saved somewhere, and you <em>know</em> was filed somewhere clever, but can’t for the life of you find again?</p>
 <p>Ever have a document that you know is somewhere in your company’s shared drive, which is very sensibly organised and structured in a way that you all agreed was correct, but no matter how much you search, you just can’t find it.</p>
 <p>You try to search for it, but because you either haven’t read it yet (you filed it away to read later) or because you only glossed over it (it’s a contract or similar document that isn’t pleasure reading), you can’t come up with a search term that seems to surface it. You tagged the file, but even with tag filtering, your search terms are still too generic and still have hundreds, if not thousands, of results.</p>
 <p>But, if you were lucky enough to have gotten it via email in the first place, you always seem to be able to find it with the first search term you came up with or in the first mail folder you looked in.</p>
 <p>Why do search, folders, and labels/tags work for email but not for your drives (shared or not)?</p>
 <p>Why are shared drives always where files disappear, never to be found again except by the person who first saved it?</p>
 <p>Unless somebody else moved it. Then that person becomes the only person who can ever find the file again.</p>
 <ul>
 <li>It’s easier to find files in your own local drive than in a shared one.</li>
 <li>Finding a specific email is much faster and easier than finding a specific Google Doc. You’re more likely to find an email containing a link to the Google Doc than to find the doc itself in the drive.</li>
 <li>A shared Dropbox is like a black hole for PDFs.</li>
 </ul>
 <p>Local and personal works better for most kinds of information management because you are the one doing the organising for yourself.</p>
 <p>By doing your own organisation you automatically create mnemonic shortcuts for yourself. There isn’t any confusion about terms—you know what you meant when you named the folder ‘Project Stuff’ and another just ‘Stuff’. You remember what you meant in large part because you typed the names out yourself.</p>
 <p>The act of saving and filing can also help you remember even if you don’t remember the reasoning—‘I think I saved it in my GitHub folder’. If you delegate the act of filing to an automated script or to another person (as you do with a shared folder) you lose these mnemonic devices. And you know your folder structure in detail because you made them.</p>
 <p>This is why it’s easier to find stuff in your local drive than on a shared one.</p>
 <p>Email, <em>especially emailing something to yourself</em>, adds another powerful mnemonic device to your toolset:</p>
 <p>Writing.</p>
 <h2>Short writing helps you find your things</h2>
 <p>Constructing search terms that get results is a skill. It’s the flip side to information architecture. Searching shared spaces requires a lot of the same expertise as creating the information architecture for those spaces:</p>
 <ul>
 <li>Understanding common terms.</li>
 <li>Knowing or discovering shared vocabularies.</li>
 <li>Discovering a common or learnable cognitive model for the structure.</li>
 <li>How these are reflected in the organisation of the company.</li>
 <li>Discovering the ontologies used by the company or the field or both.</li>
 </ul>
 <p>Web developers who know what they are doing will construct the navigation and structure of the site to minimise the need for such expertise, but your intranet, wiki, or Dropbox will generally not have seen such careful design.</p>
 <p>In the absence of designed information architecture, you have to resort to constructing the search term based on what you remember about the document.</p>
 <p>Which is tough if you haven’t read it yet or only skimmed it. This is why filing it away into a shared drive is as good as losing it.</p>
 <p>File names aren’t much help as they are, by convention, very short, regularly generic, and frequently auto-generated in some way.</p>
 <p>But an email, especially one that you wrote yourself, is much simpler to find. You may not remember the exact text but you probably have a rough idea and, because you know yourself, you can guess at the words and terms you were likely to use.</p>
 <p>This is why sending an email to yourself with a file as an attachment is often a better filing system than throwing it into your shared Dropbox.</p>
 <h2>User-Subjective Information Management Works</h2>
 <p>This approach is called User-Subjective Information Management (<a href="https://mitpress.mit.edu/books/science-managing-our-digital-stuff"><em>The Science of Managing Our Digital Stuff</em></a> is a good starter on the theory) and you don’t need anything new or expensive to use it. If you’re an Apple user, a combination of the Notes and Mail apps will do you just fine, most of the time.</p>
 <p>It does tend to clutter up your email inboxes, though, which can pose problems for both light and heavy email users.</p>
 <p>(Though, works quite well for moderate email users so if you fall in that category then I highly recommend this approach.)</p>
 <p>That nice Notes app, also, is only available on Apple devices and most of the cross-platform alternatives are either:</p>
 <ol>
 <li>Stupendously complex behemoths that look like they either need a PhD or a hit of acid for them to make sense.</li>
 <li>Or, they take the shared data problem that plagues Google Drive to the next level. Everything is shared. Live. Constant. Your boss is eternally hovering over your virtual shoulder and sees every single keystroke in your collaborative documents.</li>
 </ol>
 <p>That micromanagement espionage mode of collaboration, or some variation thereof, is the <em>default</em> for almost every collaborative note-taking or knowledge management app out there.</p>
 <p>Do you really think you’re going to get honest feedback from everybody you work with when the entire management chain from your line manager up to the CEO can see their every keystroke?</p>
 <p>Do you really think you’re going to get very far in managing your own data and information when everybody is using a shared Notion space?</p>
 <p>The point of being able to find your documents and notes again is to <em>be able to use them</em>. That means turning them into documents or shared notes and getting some form of feedback on them.</p>
 <p>Striking a balance there, between managing your own information library and sharing the <em>product</em> of that management work with others, is surprisingly hard to find with modern tools.</p>
 <p>Solving this problem is the goal of Colophon Cards (Kólófón in Icelandic) which is a prototyping project made possible by a grant from <a href="https://en.rannis.is/funding/research/technology-development-fund/nr/545">The Icelandic Centre for Research’s Technology Development Fund</a>.</p>
 <p>I’m <a href="https://www.baldurbjarnason.com/">Baldur Bjarnason</a>, the project leader and this website is a chronicle of my journey to bring Colophon Cards to life, so that it can help solve your problems.</p>
 <p>Even though the project itself isn’t open-source, I aim to work as much in the spirit of OSS as I can. This is why I plan on doing the prototyping, design, and planning work for the project out in the open in this repository.</p>
 <h2>Colophon Cards</h2>
 <p>In recent years we’ve seen a micro-revolution in Personal Knowledge and Information Management systems. On the low end, built-in apps such as Apple’s Notes have added more sophisticated capabilities. On the high end, apps like Roam and Notion have been mining the years of research done by academia in hypertext, reading and writing. They have been leveraging academic concepts to add features that now challenge the mainstays in this category.</p>
 <p>But, from this end user’s perspective, there are a few problems that these systems haven’t solved:</p>
 <ul>
 <li>The high-end systems have a very steep learning curve and a substantial cognitive overhead. As in: you spend too much time and energy thinking about your notes instead of using your notes.</li>
 <li>The low-end systems lack features for writing <em>about</em> things: bookmarking, annotating, quoting, summarising, navigating, etc. They don’t even have the most basic awareness of the structure of the objects (files, websites, or documents) that the notes are on.</li>
 <li>They all implement the same, highly specialised, mode of collaboration: real-time (or near-realtime) shared ownership and shared organisation.</li>
 <li>With very few exceptions (Ulysses app, for example), they pay very little attention to the purpose of note-taking, which isn’t just to capture and organise ideas but to improve your work. Your notes should inform your projects, designs, and writing. To do so, you need to be able to easily turn your notes into documents that feed into your work.</li>
 </ul>
 <p>My goal with Colophon Cards is to create a web-based note-taking app for bookmarking and reading websites, ebooks, and documents. It needs to find a balance between ease-of-use and advanced features. It should have a user-subjective sharing model built in from the start where data is shared while the organisation is specific to each. Finally, it needs to provide straightforward tools for turning notes into documents for sharing with others.</p>
 <p class="center"></p>
 <h2>Notes on the making of Colophon Cards</h2>
 <ol>
 <li><a href="https://www.colophon.cards/notes/01-design-notes/">Design Notes</a></li>
 <li><a href="https://www.colophon.cards/notes/02-data-model/">The Data Model</a></li>
 <li><a href="https://www.colophon.cards/notes/03-sharing-model/">The Sharing Model</a></li>
 <li><a href="https://www.colophon.cards/notes/04-attachments-bookmarks/">Attachments and Bookmarks</a></li>
 <li><a href="https://www.colophon.cards/notes/05-reading-viewing/">Reading and Viewing</a></li>
 <li><a href="https://www.colophon.cards/notes/06-business-model/">The Business Model</a></li>
 <li><a href="https://www.colophon.cards/notes/10-questions/">Questions that will need to be answered</a></li>
 <li><a href="https://www.colophon.cards/notes/whither-cards/">HTML Sketches: Whither Cards?</a></li>
 </ol>
--- a/cache/2021/index.html
+++ b/cache/2021/index.html
@@ -135,6 +135,8 @@
      
        <li><a href="/david/cache/2021/afd74b165f837caf94dd2098d161627a/" title="Accès à l’article dans le cache local : Apple’s photo scanning and our state of forced collective paranoia">Apple’s photo scanning and our state of forced collective paranoia</a> (<a href="https://interconnected.org/home/2021/08/06/paranoia" title="Accès à l’article original distant : Apple’s photo scanning and our state of forced collective paranoia">original</a>)</li>
      
        <li><a href="/david/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/" title="Accès à l’article dans le cache local : The Making of Colophon Cards">The Making of Colophon Cards</a> (<a href="https://www.colophon.cards/" title="Accès à l’article original distant : The Making of Colophon Cards">original</a>)</li>
      
        <li><a href="/david/cache/2021/5d9b6bdd174bb8e2a6fca95b6e68edb0/" title="Accès à l’article dans le cache local : “What can I do?” Anything.">“What can I do?” Anything.</a> (<a href="https://heated.world/p/what-can-i-do-anything" title="Accès à l’article original distant : “What can I do?” Anything.">original</a>)</li>
      
        <li><a href="/david/cache/2021/3392a60bddb00764c280e21012e1a030/" title="Accès à l’article dans le cache local : Covid-19 : comment Emmanuel Macron a tout raté">Covid-19 : comment Emmanuel Macron a tout raté</a> (<a href="http://www.regards.fr/idees-culture/article/covid-19-comment-emmanuel-macron-a-tout-rate" title="Accès à l’article original distant : Covid-19 : comment Emmanuel Macron a tout raté">original</a>)</li>
@@ -455,6 +457,8 @@
      
        <li><a href="/david/cache/2021/aeed011f624ca8954d97f5bc4b53a6e8/" title="Accès à l’article dans le cache local : "Hey, World!"">"Hey, World!"</a> (<a href="https://world.hey.com/jason/hey-world-b02a6f2e" title="Accès à l’article original distant : "Hey, World!"">original</a>)</li>
      
        <li><a href="/david/cache/2021/b3336418889958b9094059ebb5b761f2/" title="Accès à l’article dans le cache local : HTML Sketches: Whither Cards?">HTML Sketches: Whither Cards?</a> (<a href="https://www.colophon.cards/notes/whither-cards/" title="Accès à l’article original distant : HTML Sketches: Whither Cards?">original</a>)</li>
      
        <li><a href="/david/cache/2021/50e183c99474ec15a833b2375aea1faf/" title="Accès à l’article dans le cache local : Some reasons to work on productivity and velocity">Some reasons to work on productivity and velocity</a> (<a href="https://danluu.com/productivity-velocity/" title="Accès à l’article original distant : Some reasons to work on productivity and velocity">original</a>)</li>
      
        <li><a href="/david/cache/2021/9b2e831c217bc1179c0f74c4fc363c11/" title="Accès à l’article dans le cache local : Memexes, mountain lakes, and the serendipity of old ideas">Memexes, mountain lakes, and the serendipity of old ideas</a> (<a href="http://interconnected.org/home/2021/02/10/reservoirs" title="Accès à l’article original distant : Memexes, mountain lakes, and the serendipity of old ideas">original</a>)</li>
@@ -683,12 +687,16 @@
      
        <li><a href="/david/cache/2021/e5fef8a04d9f54759de9aa3f2ac8aa1c/" title="Accès à l’article dans le cache local : In Portugal, There Is Virtually No One Left to Vaccinate">In Portugal, There Is Virtually No One Left to Vaccinate</a> (<a href="https://www.nytimes.com/2021/10/01/world/europe/portugal-vaccination-rate.html" title="Accès à l’article original distant : In Portugal, There Is Virtually No One Left to Vaccinate">original</a>)</li>
      
        <li><a href="/david/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/" title="Accès à l’article dans le cache local : Design Notes">Design Notes</a> (<a href="https://www.colophon.cards/notes/01-design-notes/" title="Accès à l’article original distant : Design Notes">original</a>)</li>
      
        <li><a href="/david/cache/2021/520ea4867de8d36f3cd2b1132e44b719/" title="Accès à l’article dans le cache local : Letters to a Young Technologist">Letters to a Young Technologist</a> (<a href="https://letterstoayoungtechnologist.com/Study-the-Past-Create-the-Future" title="Accès à l’article original distant : Letters to a Young Technologist">original</a>)</li>
      
        <li><a href="/david/cache/2021/e14051435f3a2513d136df430ae973b3/" title="Accès à l’article dans le cache local : How P2 Changed Automattic">How P2 Changed Automattic</a> (<a href="https://ma.tt/2009/05/how-p2-changed-automattic/" title="Accès à l’article original distant : How P2 Changed Automattic">original</a>)</li>
      
        <li><a href="/david/cache/2021/5b0b6d7f4a461cef5acc3d9202cf7584/" title="Accès à l’article dans le cache local : Le Covid et « la grande démission »">Le Covid et « la grande démission »</a> (<a href="https://lundi.am/Le-Covid-et-la-grande-demission" title="Accès à l’article original distant : Le Covid et « la grande démission »">original</a>)</li>
      
        <li><a href="/david/cache/2021/ce35c82f8b3985d20202076871f169a8/" title="Accès à l’article dans le cache local : Making Colophon Cards">Making Colophon Cards</a> (<a href="https://www.baldurbjarnason.com/2021/making-colophon-cards/" title="Accès à l’article original distant : Making Colophon Cards">original</a>)</li>
      
        <li><a href="/david/cache/2021/92cd5096092b0f66b72ad6e4084c17e4/" title="Accès à l’article dans le cache local : Distributed FAQ: How Did P2 Become Automattic’s Signature Mode of Communication?">Distributed FAQ: How Did P2 Become Automattic’s Signature Mode of Communication?</a> (<a href="https://distributed.blog/2020/06/18/distributed-faq-p2-automattic/" title="Accès à l’article original distant : Distributed FAQ: How Did P2 Become Automattic’s Signature Mode of Communication?">original</a>)</li>
      
        <li><a href="/david/cache/2021/44064d714aff0deac9f882cc429d8b9d/" title="Accès à l’article dans le cache local : Some rambling thoughts about the stuttering end of the last ice age and what lockdown means">Some rambling thoughts about the stuttering end of the last ice age and what lockdown means</a> (<a href="http://interconnected.org/home/2020/04/20/continuous_partial_lockdown" title="Accès à l’article original distant : Some rambling thoughts about the stuttering end of the last ice age and what lockdown means">original</a>)</li>