davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
							<!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>
    Conteur
  — David Larlet</title>
  <meta name="description" content="Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant — comme la fin de semaine dernière — on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, anis gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour écrire taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que c’est possible (cache) avec +++ !">
  <!-- 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>
  
  <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>Conteur</h1>
    </header>
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/09/06/"
             title="Publication précédente : Retour">← Précédent</a> •
        
        <nobr>
          <a href="/david/" title="Aller à l’accueil" rel="up">
            <svg class="icon icon-home">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
            </svg>
          Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/recherche/"
             title="Aller à la page de recherche"
             rel="search">
            <svg class="icon icon-search">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
            </svg>
          Recherche</a>
        </nobr>
        
          • <a rel="next"
    href="/david/2023/09/08/"
    title="Publication suivante : Char&nbsp;2">Suivant →</a>
        
      </p>
    </nav>
    <hr>
    
<p>Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant —&nbsp;comme la fin de semaine dernière&nbsp;— on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, <del>anis</del> gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour <del>écrire</del> taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que <a href="https://ia.net/writer/support/basics/markdown-guide">c’est possible</a>&nbsp;(<a href="/david/cache/2023/478260db4b078551676bf263cbeeaa52/">cache</a>) avec <code>+++</code>&#8239;!</p>
<p>Au passage, je découvre qu’il y a tout un tas de possibilités dans un logiciel que j’utilise depuis des années. Comme les formules (dans les tableaux) ou les métadonnées qui viennent dynamiquement remplacer des variables. Une chouette découverte après avoir utilisé récemment les <em>templates</em> pour uniformiser mes&nbsp;courriers.</p>
<p>Et c’est ainsi que je vous conte ce qu’il nous est arrivé en contant cette histoire. Je vous accorde que c’est un peu <em>meta</em>.</p>
<figure>
    <a href="/static/david/2023/2023-09-06-extrait-quete.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2023/2023-09-06-extrait-quete.jpg"
            width="3024" height="3024"
            srcset="/static/david/2023/2023-09-06-extrait-quete.jpg 3024w, /static/david/2023/2023-09-06-extrait-quete_660x440.jpg 660w, /static/david/2023/2023-09-06-extrait-quete_990x660.jpg 990w, /static/david/2023/2023-09-06-extrait-quete_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 3024))"
            loading="lazy"
            decoding="async"
            alt="Un extrait de l’histoire&nbsp;: Sur le chemin du retour, nous nous dimes que nous allions écrire cette histoire.">
    </a>
    <figcaption>Mais on aime ça le meta. (Et les typos. (Et le passé&nbsp;simple.))</figcaption>
</figure>
<hr />

<blockquote lang="en">
<p>🪦 The 100-Year Plan isn’t just about today. It’s an investment in tomorrow. Whether you’re cementing your own digital legacy or gifting 100&nbsp;years of a trusted platform to a loved one, <mark>this plan is a testament to the future</mark>’s boundless&nbsp;potential.</p>
<p>The cost is $38,000. We hope people&nbsp;renew.</p>
<p><cite><em><a href="https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/">Introducing the 100-Year Plan: Secure Your Online Legacy for a Century</a></em>&nbsp;(<a href="/david/cache/2023/57c0b22f733354552de63db112f51b20/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>📜 A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. <mark>Without constant maintenance and management,</mark> most digital information will be lost in just a few decades. Our modern records are far from&nbsp;permanent.</p>
<p><cite><em><a href="https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/">Shining a Light on the Digital Dark Age</a></em>&nbsp;(<a href="/david/cache/2023/83c60dd85e9f0f07bf41821a2694a0e5/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🔋 But there’s something else I want to suggest here, and it’s to stop thinking about time entirely. Or, at least, to stop thinking about time as something <em>consistent</em>. We all know that time can be stretchy or compressed—we’ve experienced hours that plodded along interminably and those that whisked by in a few breaths. We’ve had days in which we got so much done we surprised ourselves and days where we got into a staring contest with the to-do list and the to-do list didn’t blink. And we’ve also had days that left us puddled on the floor and days that left us pumped up, practically leaping out of our chairs. <mark>What differentiates these experiences isn’t the number of hours in the day but the energy we get from the work.</mark> Energy <em>makes</em>&nbsp;time.</p>
<p><cite><em><a href="https://everythingchanges.us/blog/energy-makes-time/">Energy makes time</a></em>&nbsp;(<a href="/david/cache/2023/3f4be4add2995420dc6be529f1032e46/">cache</a>)</cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2023/aventure/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#aventure</a>
          
            <a href="/david/2023/foret/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#forêt</a>
          
            <a href="/david/2023/parentalite/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#parentalité</a>
          
          <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
            <svg class="icon icon-tags">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
            </svg>
          tous ?</a>
        </p>
      </nav>
    
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/09/06/"
             title="Publication précédente : Retour">← Précédent</a> •
        
        <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
        
          • <a rel="next"
    href="/david/2023/09/08/"
    title="Publication suivante : Char&nbsp;2">Suivant →</a>
        
      </p>
    </nav>
  </article>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">
            <svg class="icon icon-home">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
            </svg>
          Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">
            <svg class="icon icon-rss2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
            </svg>
          Suivre</a>
        </nobr>
        •
        <nobr>
          <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-2022-03.svg#icon-user-tie"></use>
            </svg>
          Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
            <svg class="icon icon-mail">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
            </svg>
          Email</a>
        </nobr>
        •
        <nobr>
          <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-2022-03.svg#icon-hammer2"></use>
            </svg>
          Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <fieldset>
            <legend>
              <svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.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>