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>★ Children of the Hyperlink (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://buttondown.email/robinrendle/archive/children-of-the-hyperlink/">

<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>★ Children of the Hyperlink</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://buttondown.email/robinrendle/archive/children-of-the-hyperlink/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Hyperlink compatriots!</p>
<p><a href="https://robinrendle.com/" target="_blank">Robin Rendle</a> here. This morning began with a slow but productive start. I was up early. Showered. Dressed. Laundry. Dishes. Trash. Breakfast. After all that the Mobile Depression Device told me that my screen time was up 30% this week which sounds about right. I still feel dazed from all the screens. </p>
<p>And so today there will be only books, only reading. Let’s begin:</p>
<blockquote>
<p>If a Web site is moved, deleted, or hidden behind a paywall, every link that pointed to it becomes meaningless, dangling like an anchor line cut loose from a ship. </p>
</blockquote>
<p>Whoa! Okay, sure. What a way to start off huh. </p>
<p>This is a section from about half way through <em>Broad Band: The Untold Story of the Women Who Made the Internet</em> by <a href="https://clairelevans.com/" target="_blank">Claire L. Evans</a> and I can’t recommend it enough. Claire investigates the women who built and designed the physical infrastructure and the immaterial (yet vital) social network that is the World Wide Web. So heck yes go read this thing.</p>
<p>Here’s one example where Claire interviewed Cathy Marshall, a hypertext researcher (!) who worked at Xerox PARC in the mid 1980s. This is where the modern idea of a computer came together in Palo Alto; mice, keyboard, graphical interface. But there’s a moment in the interview where Cathy talks about her note-taking process:</p>
<blockquote>
<p>“If I write something and if it doesn’t work, I’ll throw out the whole thing and start again,” she tells me. “I don’t think you lose what you’ve written. It’s still in your head. Over time, what you’re doing is changing what’s in your mind—what’s on paper is just incidental.” She makes this comment offhand, but the insight knocks me out. That’s what software is, I realize: <em>a system for changing your mind</em>.</p>
</blockquote>
<p>Excuse me: what! This is perhaps the best (and most optimistic) explanation for what software can be. And honestly this whole book is littered with moments like this where computers are seen as experimental wonders and not the terrifying work of pure evil that we often describe them as, like I did above when I called my phone a “Mobile Depression Device”. This book is not the hand-wavey, dumb optimism though—NFTs, blockchain crap, and self-driving cars—but exhilarating, earnest, intelligent optimism which is so very rare to find.</p>
<p>But there was this one section of the book that I noticed myself wince through and it started when Claire describes the early 90s. In this section she details all these competing hyperlinking systems before most people had a personal computer, and she mentions that what we know today as the World Wide Web was not inevitable at all and was but only one of several hyperlinking systems on display at <em>Hypertext 91</em>, a conference in San Antonio:</p>
<blockquote>
<p>…Berners-Lee and Caillau were forced to demo a dummy version of the Web saved on optical disk. And it <em>was</em> too simplistic. Compared with the other systems on display, the Web’s version of hypertext was years behind. Links on the World Wide Web went in only one direction, to a single destination…</p>
</blockquote>
<p>Claire adds that hyperlinks on the web have a number of failures; it’s easy for a link not to resolve (someone deletes the web page) and there’s no information about what’s on the other side of that link, there’s no way to make connections between links except from a page. In short: links on the web are extremely fragile and extraordinarily dumb.</p>
<p>If I’m honest though it was difficult to read this part. First, I find it hard to imagine how any other system besides what we have today might work. As far as I understand, in older hyperlinking systems, pages didn’t really exist and everyone was kind of creating their own database of links. This sounds like far too much work! It actually sounds exhausting, expecting everyone to effectively become librarians of their own private internet.</p>
<p>So hyperlinks might be dumb, but I see their dumbness as a feature and not a bug.</p>
<p>Second, I find it difficult to read this criticism of the web because, well, I’m a child of the hyperlink. My entire career is based on the existence of the <code>&lt;a&gt;</code> tag; creating, sharing, surfing, making sure that web pages can fit together in just the right way so that people will want to click this blue link over another. </p>
<p>But also I was wincing here because every good thing in my life is the product of me clicking the right hyperlink and the right time. Me here, in San Francisco. My friends. My colleagues. My apartment. Everything is a hyperlink! And so to hear that they’re dumb feels like Claire is saying that the impact of them on my life is also dumb. (I know this is not what she’s saying, but still. It’s weird that I feel very protective over my dumb hyperlinks.)</p>
<p>The extra strange thing about all this is that I thoroughly agree with Claire’s criticisms. I still think the biggest flaw of the web is that we’re renting space on servers and that if a credit card is declined or someone doesn’t read an email then that whole website can disappear forever. Now, I’m not an archivist—I don’t believe that every website should live forever and I think there’s a benefit to some kinds of information being temporary. But! I do want <em>my</em> website to live forever. Not out of pride or short-sighted fame, but because I want it to be a record or perhaps a kind of proof: that, hello, I was here at this special moment in time where all of humanity was hyperlinked together. </p>
<p>And, hopefully, if I’m lucky, I made a few things here that were worth linking to.</p>
<p>Until next week, 
<br>
✌️ Robin</p>
<p><img alt="CleanShot 2022-01-30 at 12.16.51@2x.png" src="https://buttondown.s3.amazonaws.com/images/16682958-f9e0-403a-9864-d4bb997af078.png"></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>