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