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>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>