davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!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>
  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>Digital Gardens (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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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://sentiers.media/dispatch-08-digital-gardens/">

<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

<article>
  <header>
    <h1>Digital Gardens</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://sentiers.media/dispatch-08-digital-gardens/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <div class="wp-block-columns alignwide">
<div class="wp-block-column">
<p>If you deal with a lot of knowledge “stuff,” articles, books, feeds, and need (or really like) to be able to not only find things again but also collect them somehow and ideally built from there to advance your thinking, make sense, and understand, most people would agree you need some kind of system, some set of practices. The oft cited idea of “information overload” is actually, a lot of the time, some form of filter failure. There is a lot of information out there but by focusing on stronger signals in the noise, keeping track of things, and having some structure in how you work, you can parse quite a bit of information without sliding into overload.</p>
</div>


<div class="wp-block-column">
<p class="has-background has-normal-font-size has-light-background-background-color">This <em>Dispatch</em> is made possible by members of <em>Sentiers </em>and currently unlocked and free to read for everyone. If you are new here, you can subscribe to the free weekly below or <a href="https://sentiers.media/membership/">become a member</a> to also get the extra dispatches.</p>


</div>
</div>

<p>I’ve already covered some of that thinking in the second Dispatch, <a href="https://sentiers.media/dispatch-02-ideas-tools-from-my-process/">Ideas &amp; tools from my process</a>. Here I’d like to look at a type of tool I’m not using yet, although there is some overlap with things I use. It’s the idea of the Digital Garden. I originally happened on it through Tom Critchlow’s piece <a href="https://tomcritchlow.com/2019/02/17/building-digital-garden/">Building a digital garden</a> which you should read but for now let pull this bit out:</p>

<blockquote class="wp-block-quote"><p>It’s a less-performative version of blogging – more of a captain’s log than a broadcast blog. The distinction will come down to how you blog – some people blog in much the same way. For me however blogging is mostly <i>performative thinking</i> and less captain’s log. <span class="highlight">So I am looking for a space to nurture, edit in real time and evolve my thinking.</span></p></blockquote>

<h3>Metaphors</h3>

<p>When talking about having a system for Personal Knowledge Management I usually use two metaphors. It’s easier to “find a needle in a smaller haystack,” which reflects my experience that when you think you’ll “just find it again on Google” it’s often not the case because “that guy who wrote that thing around that time talking about metamodernism” will give you nothing. However, simply searching for the word “metamodernism” through the full text of what you’ve bookmarked on <a href="https://pinboard.in/">Pinboard</a> usually does give results pretty quickly. The second metaphor is “composting” (fermenting is more exact but whatever), the idea that things you read and hear pile up in your brain, simmer, ferment, and might turn into something else. For that to work though, you need to randomly “bump into” those articles, quotes, notes, thoughts and have a practice of reviewing, revisiting, and ideally writing about the links you are making. That’s where the garden comes in.</p>

<p>Tom talks about streams (Twitter), campfires (his blog), and garden which was the missing part he started working on. Anne-Laure Le Cunff writes about <a href="https://www.mentalnodes.com/a-gardening-guide-for-your-mind">seeds, trees, and fruits</a> (further down I’ll be linking to a couple of her posts but you should browse her site, loads of stuff on this and other adjacent practices). Let me add to these metaphors, just in case this one makes things click for you.</p>

<ul class="miscellany"><li><b>Stream and market</b>. Twitter, RSS, and I’d even add reading newsletters. Some of them are essay length and need some slow reading but many contain a lot of links with few thoughts and, paragraph to paragraph, email to email, are “stream like.” I’m adding market as a slower input of books and longer reads.
</li><li><b>Garden</b>. The way I save quotes and notes is close(ish) to this but is not a proper Digital Garden. This is where you take things you want to remember and expand (grow) upon. The things you “cultivate in season” are the current top of mind topics.
</li><li><b>Pantry</b>. Longer term storage. Bookmarking, marginalia in books, anything you file somewhere virtual or physical, keep for later, but aren’t necessarily thinking about more deeply in the “current season.”
</li><li><b>Kitchen</b>. I know, I’m pushing it now but where you actually take the time to actively assemble ideas and insights into something actually useful. When you turn the things you’ve collected and the hunches you quickly noted into some new knowledge. Here you’re blogging, newslettering, sending a longer text to a bunch of coworkers or friends, etc.
</li><li><b>Market stall.</b> Last one, sorry for the stretched metaphor. If you are writing with a professional purpose, things usually get more polished and require more time. I’m splitting this from kitchen mostly to draw your attention to the fact that a lot of people seem to think that blog posts or newsletters need to be at a certain level of finish… and never end up taking the time to write because of that. The basic idea is to cook for yourself in the kitchen, no need to get pro unless you want to!
</li></ul>

<p class="has-text-align-center">—</p>

<p>In short: inputs; a place to save things for later; a place to start making sense and drawing links; a time to write and share for fun (this is almost not optional, it’s such a useful way of thinking); and, if you want to, a time to write and share more seriously.</p>

<h3>What is it, really?</h3>

<p>Getting back to the digital garden itself, what is it? Everyone’s definition is a bit different and it’s still an emerging practice—even though it’s built on similar older ideas—but I’d say most share a few of the following characteristics:</p>

<ul class="miscellany"><li><b>Thoughtful notes</b>. Not just copying things over as you read a book. Some call them evergreen notes, some call them seeds. They are basically your thoughts on something you’ve read.
</li><li><b>Compact</b>. We’re not talking about pages of text but rather nuggets that are meant to be reassembled.
</li><li><b>Heavy linking</b>. The notes are kept short because there are multiple links back and forth between each, to connect concepts and ideas.
</li><li><b>Backlinks</b> (bi-directional). This is the more recent development in what people are using for digital gardens. In the most interesting systems, you’ll have a section to the side or at the bottom with “Links to this note,” listing all the other notes linking to it. For example here <a href="https://notes.andymatuschak.org/z2ZAGQBHuJ2u9WrtAQHAEHcCZTtqpsGkAsrD1">Most people take only transient notes</a>.
</li><li><b>Transclusions</b>. Hovering the cursor over a link pops up a modal window displaying the targeted page/note. Since the garden is made up of lots of small notes, it’s useful to be able to glance at the target page instead of clicking back and forth all the time (see backlinks above for an example).
</li><li><b>Editable</b>. Kept in a format and a “place” where you can and it’s accepted (so usually not a blog) that you can edit multiple times, re-organize, and add to individual notes and the whole.
</li></ul>

<p class="has-text-align-center">—</p>

<p>In short: brief notes from your own thinking, heavily linked back and forth, continually added to and edited.</p>

<p>The goal is to have a library of notes of your own thinking so you can build upon what you read and write, creating your own ideas, advancing your knowledge.</p>

<p>Lets stop here with the explaining and link to some thinking and examples. Hit reply for all comments and questions of course!</p>

<h2>Explore</h2>

<ul class="miscellany"><li>Already linked above, Tom Critchlow’s <a href="https://tomcritchlow.com/2019/02/17/building-digital-garden/">Building a digital garden</a> is an excellent explanation of the concept. 
</li><li><a href="https://nesslabs.com/mind-garden">You and your mind garden</a> by Anne-Laure Le Cunff is a great read and, as mentioned above, click around, she’s done a lot more writing on the topic.
</li><li>Joel Hooks has a useful and different perspective with <a href="https://joelhooks.com/digital-garden">My blog is a digital garden, not a blog</a> .
</li><li>Amy Hoy’s <a href="https://stackingthebricks.com/how-blogs-broke-the-web/">How the Blog Broke the Web</a> is often mentioned, where she argues that the format and reverse chronology broke the more random and adhoc nature of the pre-blog web. Gardens might be a return to that.
</li><li>Maggie Appleton’s <a href="https://twitter.com/Mappletons/status/1250532315459194880">Nerding hard on digital gardens, personal wikis, and experimental knowledge systems</a> resulted in the rabbit hole thread you need with many many great examples. She also wrote <a href="https://maggieappleton.com/bidirectionals">A Short History of Bi-Directional Links</a>.
</li><li>Robin Sloan’s <a href="http://snarkmarket.com/2010/4890">Stock and flow</a> from 2010 is a must read in this context.
</li><li>Lots of people are using <a href="https://roamresearch.com">Roam</a> for note-taking and its native backlinks make it a popular choice for garden-like writing. Anne-Laure researched <a href="https://nesslabs.com/roam-research-alternatives">free, open source, and self-hosted alternatives</a> to it and later settled on a wiki and kindly wrote <a href="https://nesslabs.com/digital-garden-tiddlywiki">How to build a digital garden with TiddlyWiki</a>.
</li><li>⭐️ Andy Matuschak’s <a href="https://notes.andymatuschak.org/About_these_notes">custom built notes platform</a> is extraordinary in it’s simple look, how it works, and there are literally hours and hours of reading in there with lots of very smart thinking. It might be the canonical example of a well tended digital garden.
</li><li>Azlen Elza made his own <a href="https://notes.azlen.me/g3tibyfv/">very similar version</a> which also makes for great reading.
</li><li>The <a href="https://zettelkasten.de/posts/overview/">Zettelkasten Method</a> is often mentioned in discussions around this kind of topic, I encourage you to have a look. <i>“Using a Zettelkasten is about optimizing a workflow of learning and producing knowledge. The products are texts, mostly.”</i>
</li></ul>
  </main>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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 type="text/javascript">
    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>