davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!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>regarder la pluie tomber sur les surfeurs (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_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.la-grange.net/2021/04/17/pluie">

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

<article>
  <header>
    <h1>regarder la pluie tomber sur les surfeurs</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.svg#icon-home"></use>
      </svg> Accueil</a> •
      <a href="https://www.la-grange.net/2021/04/17/pluie" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2021/04/17/0700-enoshima.jpg" alt="Enoshima, les nuages gris et l'océan">
  <figcaption>Kugenuma, Japon, 17 avril 2021</figcaption>
</figure>

<blockquote>
<p>Quand il n'y a pas de café, les villages sont misérables.<br>
— L'écho des rizières - Anna Moï, urn:isbn:2-87678-663-X</p>
</blockquote>

<p>Je ne lis que très peu à la maison. La pandémie m'a donné une <a href="https://www.la-grange.net/2021/03/27/auteurs">lenteur de lecture et un feu étouffé</a>. Comme le note Stéphane dans <a href="https://nota-bene.org/Une-annee-sans-livres">Une année sans livres</a>:</p>

<blockquote>
<p>Oui c’est exactement ça. Un genre d’hébétude par moments, de passivité (je suis un morceau de bois ces jours-ci), et dans mon cas une frénésie possiblement très mal placée : écouter le monde, se faire peur, espérer, se refaire peur, lire tout et son contraire, tout ça fragmenté en une grêle de messages sur les réseaux sociaux. Regarder ma pile à lire de 80, peut-être 100 bouquins, et rester paralysé devant au lieu d’en être gourmand.</p>
</blockquote>

<p>Je reviens à l'instant d'un café à kugennuma qui ouvre « tôt » (critère japonais, soit 8h). Il n'y avait aucun client. Et surtout ils ont une terrasse (autre rareté au Japon). J'ai sorti le livre de mon sac. J'ai commandé un café et un pain au chocolat. Je suis allé sur la terrasse. <strong>Et j'ai lu</strong>. Personne n'est venue s'installer pendant cette heure là. Je suis resté seul. Il a commencé à pleuvoir. J'ai repris mon vélo et je suis allé à la plage pour regarder la pluie tomber sur les surfeurs. Le jean trempé, les mains froides, mais le cœur léger d'avoir lu quelques pages.</p>

<h2 id="links">sur le bord du chemin</h2>

<ul>
<li><p><a href="https://www.are.na/blog/willa-koerner">A Personal Philosophy of Shared Knowledge</a></p>
<blockquote>
<p>This slipping-away of knowledge is always happening. It happens in our minds, as memories fade. But arguably, we don’t need to retain all knowledge. To know too much can be a burden. As such, the process of collectively managing knowledge begs us all to be fortune tellers: What information will we need in the future?</p>
<p>Of course, the future is always just out of reach. The best we can do is attempt to share the collective knowledge of today in ways that feel honest, generous, and timeless. We need to retain something of the personal, of the human—of the original private triumph of failure.</p>
</blockquote>
<p>Chaque objet devient interprétation dans l'esprit d'une personne. Émotions, catégorisations, souvenirs sont des facettes de cette interprétation. Quand nous concevons des systèmes informatiques exposant un objet numérique, comme ce carnet Web. Nous représentons une interprétation. Mais ce qui est important n'est pas vraiment ce que j'écris maintenant. Mon interprétation, ma catégorisation n'ont pas tant le besoin d'une expression. Non, ce qui est époustouflant, c'est le chemin des mots. Quelqu'un prend un morceau de texte, une idée, et créé une autre interprétation. Autant de chemins que de lecteurs. Autant d'aventures et de passion que de personnes qui écrivent en ayant rencontré ce chemin. L'impermanence est le bouillon des envies des autres de bifurquer le chemin.</p>
</li>
<li><p>Oh ! « Bifurquer » et bifurcation, voilà une traduction appropriée pour l'anglais « fork » dans le cadre du code source. Et je viens de bifurquer mes propres mots, ceux du paragraphe précédent.</p>
</li>
</ul>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.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.svg#icon-rss2"></use>
      </svg> RSS</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.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.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.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.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>
    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>