davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- 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>All you need is links (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
<meta name="robots" content="noai, noimageai">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://subconscious.substack.com/p/all-you-need-is-links">

<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>All you need is links</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://subconscious.substack.com/p/all-you-need-is-links" title="Lien vers le contenu original">Source originale</a>
      <br>
      Mis en cache le 2024-03-12
    </p>
  </nav>
  <hr>
  <div dir="auto" class="body markup"><p>When Tim Berners Lee talks about how he designed the web, he uses an analogy from physics, describing his process as a quest to find “fundamental laws” which can generate a desired system:</p><blockquote><p>One of the beautiful things about physics is its ongoing quest to find simple rules that describe the behavior of very small, simple objects. Once found, these rules can often be scaled up to describe the behavior of monumental systems in the real world. […]</p><p>If the rules governing hypertext links between servers and browsers stayed simple, then our web of a few documents could grow to a global web. The art was to define the few basic, common rules of “protocol” that would allow one computer to talk to another, in such a way that when all computers everywhere did it, the system would thrive, not break down.</p><p><em>Tim Berner’s Lee, 2000, “Weaving the Web”</em></p></blockquote><p><span>I like this description of design as a quest to discover a simple set of primitives, </span><strong><a href="https://subconscious.substack.com/p/provoking-emergence-with-alphabets" rel>a small alphabet</a></strong><span> for generating a system. To paraphrase </span><a href="https://gordonbrander.com/pattern/galls-law/" rel>Gall’s Law</a><span>:</span></p><blockquote><p>Simple rules produce complex behavior. Complex rules produce stupid behavior.</p></blockquote><p>What if we applied this lens to designing tools for thought? What are some examples of simple features with extremely broad ranges of motion? I’d like to put forward one candidate…</p><p><strong>Links</strong><span>.</span></p><p>A surprising number of other features can be expressed in terms of links.</p><p>What is a tag? What is its structure? What is its function?</p><p>When you tag something, it gets added to a collection of other things with the same tag. So, this is a one-to-many relationship, where one tag points to many pages.</p><p><span>Let’s think about a link. Many pages can point to a single page. Many-to-one. One-to-many. So, we could achieve tagging with links by listing all backlinks to a given page. </span><strong>Tags are just backlinks to pages that don’t exist</strong><span>.</span></p><p>Folders are a place to put things. Like most of the desktop paradigm, folders use a familiar object borrowed from the office as a metaphor to communicate an abstract relationship. You put multiple documents into a paper folder for filing, you put multiple documents into a digital folder for filing. Object metaphors are powerful, both because they leverage something familiar to introduce something new, and because they lean into our natural cognitive strengths for spatial reasoning and object manipulation.</p><p><span>Hmm, many documents, one folder. It seems that underneath this object metaphor is another one-to-many relationship. So, </span><strong>a folder could be expressed in terms of a page full of links</strong><span>.</span></p><blockquote><p><span>What information consumes is rather obvious: it consumes the attention of its recipients. Hence a wealth of information creates a poverty of attention, and a need to allocate that attention efficiently among the overabundance of information sources that might consume it.</span><br><em>Herbert Simon</em></p></blockquote><p>Social media, search, spam, recommendations — when faced with an abundance of information, we often find ourselves needing to separate wheat from the chaff. Many systems reach for stars, hearts, upvotes, and downvotes as quick fixes for user-generated quality signals. But what if we just used links?</p><p><strong>Inbound links can be used as a signal of quality</strong><span>. People are more likely to link to things that matter, and less likely to link to things that don’t. Sum up the backlinks to a page and you have a quality signal. This is the key insight behind </span><a href="https://en.wikipedia.org/wiki/PageRank" rel>Google Pagerank</a><span>.</span></p><p>Comments are one of the core interaction primitives of today’s web. I can comment on your Facebook post, your Google Doc, your blog.</p><p><span>What is a comment? What is its structure? What is its function? It’s a bit of content that is conceptually related to a parent post. We could say that the comment </span><em>points to</em><span> the post, or something in the post. That’s a directional relationship.</span></p><p><span>Links also </span><em>point to</em><span> something. They describe a directional relationship. It’s not much of a leap to consider an inbound link a comment on the thing it links to. </span><strong><span>If we implement some form of </span><a href="https://en.wikipedia.org/wiki/Transclusion" rel>transclusion</a><span>, we can express comments in terms of links</span></strong><span>. In fact, WordPress already does this with </span><a href="https://wordpress.org/support/article/trackbacks-and-pingbacks/" rel>Pingbacks</a><span>.</span></p><p><a href="http://outliners.scripting.com/" rel>Outliners</a><span> are tools for thought that conceive of documents as a hierarchy, or tree, or nested bulleted list. They’re one of those simple ideas, like spreadsheets that have an almost inexhaustible range of applications.</span></p><p><span>Outliners have a rich and interesting history, from </span><a href="http://outliners.scripting.com/" rel>Dave Winer’s outliner programs for command line and Mac Classic</a><span>, through to today’s </span><a href="https://roamresearch.com/" rel>Roam Research</a><span>.</span></p><p>So, but what is an outliner? What is its structure? What is its function? An outliner lets you break a document up into discrete nodes, nest those nodes under other nodes, hide branches, focus in on branches. The structure formed by an outliner is a tree, with parent and child nodes.</p><p><span>In an outliner, one parent may have many children. One-to-many. Links again. </span><strong>We can express an outliner in terms of links by nesting inbound links underneath the document they point to</strong><span>. So an outliner could be thought of as one view over a network of linked documents.</span></p><p><a href="https://en.wikipedia.org/wiki/Semantic_triple" rel>Semantic triples</a><span> are one of those ideas you run into if you poke around the “tools for thought” space long enough. A semantic triple is a simple idea with some powerful properties. The basic idea is to construct a network made up of:</span></p><pre><code>Subject - Predicate - Object</code></pre><p>For example, “Xerxes is the parent of Brook” can be expressed as a triple:</p><pre><code>Xerxes - Parent - Brook</code></pre><p>Objects can themselves be subject-predicate-object triples, so you can build up complex networks of relationships this way.</p><p><span>Triples allow computers to do complex automated reasoning. You can even use them to derive relationships that aren’t explicitly stated. You know those answer cards that appear in Google searches? Those are largely constructed from Google Knowledge Graph, </span><a href="https://inlinks.net/p/knowledge-graph-explained/" rel>a giant network of semantic triples</a><span>.</span></p><p><span>Triples are often expressed in terms of special formal languages like </span><a href="https://en.wikipedia.org/wiki/Turtle_(syntax)" rel>TURTLE</a><span> or </span><a href="https://en.wikipedia.org/wiki/Datalog" rel>Datalog</a><span>. Here’s how I might jot down that Xerces is a parent of Brooke and Brooke is a parent of Damocles using Datalog:</span></p><pre><code>parent(xerces, brooke).
parent(brooke, damocles).</code></pre><p>This can get old fast. Writing formal relationships by hand is ok for narrow domains, but it’s not exactly the most natural thing to reach for when trying to express ideas.</p><p><span>So, knowledge graphs are tremendously useful for computers, but not so fun to write by hand. If you ask me, </span><a href="https://en.wikipedia.org/wiki/Semantic_Web" rel>Semantic Web</a><span> efforts have repeatedly stubbed their toe on this mismatch between symbolic alignment and the messy, emergent, imprecise, </span><em>human</em><span> process of knowledge construction.</span></p><p>But wait. What is a triple? What is its structure? What is its function?</p><p><span>It seems a triple is a </span><strong>link</strong><span> between two things, </span><em>through</em><span> a predicate. Here is yet another thing we can reimagine through the mechanism of links.</span></p><p><strong>A hyperlink is a triple where the subject is the page, the predicate is the link text, and the object is the thing being linked to</strong><span>.</span></p><p><span>Better yet, it’s organic. This knowledge graph is constructed from things I would do anyway. I create a link because it solves my problem as an author of pointing you, the reader, to a concept. This good-enough alignment between user goals and computer goals is one reason the regular web succeeded where the </span><a href="https://en.wikipedia.org/wiki/Semantic_Web" rel>semantic web</a><span> failed.</span></p><p><a href="https://en.wikipedia.org/wiki/Topic_model" rel>Topic modeling</a><span> is a range of machine learning techniques for deriving abstract topics from a collection of documents using statistical analysis. I put in a collection of Subconscious newsletters, and topic modeling tells me they’re about tools for thought, cybernetics, the web, computing, distributed systems, etc. Pretty cool.</span></p><p>So, ok, you might still want topic analysis, but following on from our observation that we can use links as knowledge graphs, we can also use links as quick-and-dirty topic models.</p><p><strong>If we consider each page to be a topic, then then links offer a pretty good map of topics within a page</strong><span>. Pull out a list of links from a page, and you approximately have the topics for the page. Collect all the links across pages, rank them by frequency, and you have a sense of the most frequently addressed topics within the collection.</span></p><blockquote><p><span>It is my belief that this new ability to represent ideas in the fullness of their interconnections will lead to easier and better writing, easier and better learning, and a far greater ability to share and communicate the interconnections among tomorrows ideas and problems. Hypertext can represent all the interconnections an author can think of, and compound hypertext can represent all the interconnections </span><em>many</em><span> authors can think of, as we shall see.</span><br><em>Ted Nelson, 1982, “Literary Machines”</em></p></blockquote><p>Links aren’t the only way—I don’t want to be totalizing here—but they are something special. It’s rare to discover a simple mechanism with such broad and expressive range of motion.</p><p><span>I hope to keep </span><strong><a href="https://subconscious.substack.com/p/subconscious-alpha" rel>Subconscious</a></strong><span> simple. Few features, </span><strong><a href="https://subconscious.substack.com/p/provoking-emergence-with-alphabets" rel>a small alphabet with wide expressive range of motion</a></strong><span>. Before reaching for features, my goal is to explore, to the fullest extent, the creative potential of plain old links.</span></p></div>
</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>