davidbgk
/
larlet-fr-david

<!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>
    Surligner
  — David Larlet</title>
  <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>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="A small JavaScript library to create and animate annotations on a web page">
  <!-- 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">
  <!-- To get attribution when linking on mastodon. -->
  <meta name="fediverse:creator" content="@david@larlet.fr">
  
<style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
</style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>Surligner</h1>
      <p>Le <time datetime="2024-03-12">12 mars 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/11/"
           title="Publication précédente : LoginWall">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/03/13/"
            title="Publication suivante : Sérendipité">Suivant →</a>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p>A small JavaScript library <mark>to create and animate annotations on a web&nbsp;page</mark></p>
<p>Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned&nbsp;off.</p>
<p>Rough Notation is 3.8kb in size when gzipped, and the code is available on&nbsp;GitHub.</p>
<p><cite><em><a data-link-domain="roughnotation.com" href="https://roughnotation.com/">Rough&nbsp;Notation</a></em></cite></p>
</blockquote>
<p>J’utilise cette façon de mettre en avant des fragments de citations <a href="/david/2020/02/21/#surlignage">depuis un petit moment</a> et en passant <a data-link-domain="vanschklift.com" href="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21" hreflang="en"
            title="Consultation de l’article (anglais)">par chez Biou</a>
            <a href="/david/cache/2024/41e9f48de9ccd2449bceca518fff8606/" hreflang="en"
                data-tippy data-description="It has been a while since I last changed the theme of this blog! Seems that with all the time spent at home in the last three months, I had some new blog posts ideas, but blogging"
                data-source="https://vanschklift.com/blog/post/2020/06/19/Time-for-a-refresh%21"
                data-date="2024-03-12"
                data-favicon="https://vanschklift.com/themes/wip/img/android-icon-192x192.png"
                data-domain="vanschklift.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> aujourd’hui, j’ai trouvé l’effet bien sympathique. Je ne l’applique pour l’instant(?) que sur la balise <code>&lt;mark&gt;</code> (relativement inoffensif si ça casse), en respectant <code>prefers-reduced-motion</code> et en animant que lorsque la partie surlignée devient visible grâce à <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver">IntersectionObserver</a>.</p>
<p>Cela peut se révéler être distrayant pour certaines personnes car ça bouge à un endroit éloigné du point de lecture (merci @maiwann), invisible pour d’autres qui chargent les onglets sans être dessus (merci @lamecarlate). Il s’agit d’une famille d’animations pas trop invasives, encore moins essentielles, qui peuvent se révéler être de fausses bonnes idées. Je vais tester pour un temps, toujours dans cette recherche d’aller <a href="/david/2024/03/09/#hr-106">vers un peu plus de fantaisie</a>.</p>
<p>N’hésitez pas à me faire des&nbsp;retours.</p>
<p><mark>Plus tard dans la journée</mark>, Nicolas Hoizey m’indique qu’il sera possible d’avoir un <a data-link-domain="frontendmasters.com" href="https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/" hreflang="en"
            title="Consultation de l’article (anglais)">comportement approchant en CSS</a>
            <a href="/david/cache/2024/5ff0fe74d43b57fa41db8851bc56ac88/" hreflang="en"
                data-tippy data-description="I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see …"
                data-source="https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/"
                data-date="2024-03-12"
                data-favicon="https://frontendmasters.com/favicon-32x32.png"
                data-domain="frontendmasters.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> <a data-link-domain="caniuse.com" href="https://caniuse.com/mdn-css_properties_animation-range">prochainement</a>.</p>
<p><mark>Le lendemain</mark>, <a href="/david/2024/03/13/#hr-114">j’ai désactivé l’animation</a> suite à plusieurs retours de&nbsp;lecteur·ices.</p>
<a href="#hr-110" title="Lien vers cette section de la page"><hr id="hr-110" /></a>

<blockquote>
<p>Ce qu’Hashbang propose est de créer un registrar sous forme de SCIC avec en plus un processus participatif pour définir les services et leurs tarifs. Le premier service proposé sera certainement le nom de domaine, mais personne ne peut actuellement définir quel tarif sera proposé. <mark>Ce sera issu d’un processus participatif en fonction des participant·e·s au&nbsp;départ.</mark></p>
<p>Chez Hashbang, nous portons un regard attentif aux enjeux environnementaux et nous proposons donc de mesurer et limiter l’impact environnemental des activités du&nbsp;registrar.</p>
<p>Nous souhaitons également s’assurer qu’il n’y ait pas de discriminations et que les personnes minorisé·e·s puissent s’emparer de cet espace. Il faut donc s’attendre à ce qu’il y ait des événements en mixité choisie et du langage&nbsp;inclusif.</p>
<p><cite><em><a data-link-domain="hashbang.coop" href="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/" hreflang="fr"
            title="Consultation de l’article">Appel à intérêt pour un bureau d’enregistrement coopératif</a>
            <a href="/david/cache/2024/2c027efb3689a1067c7f32a659fd4092/" hreflang="fr"
                data-tippy data-description="Nous lançons un projet pour gérer des noms de domaines dans une nouvelle coopérative"
                data-source="https://hashbang.coop/blog/appel-a-interet-pour-un-bureau-denregistrement-cooperatif/"
                data-date="2024-03-12"
                data-favicon="https://hashbang.coop/static/images/favicon.1d2088a755c9.ico"
                data-domain="hashbang.coop"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Superbe initiative, coopératives pour&nbsp;tou·tes&#8239;!</p>
<a href="#hr-111" title="Lien vers cette section de la page"><hr id="hr-111" /></a>

<blockquote lang="en">
<p>I know a lot of people hate anti-ad-block popups, but to me they are&nbsp;perfect.</p>
<p>In presenting those popups, those websites demonstrate that they realize the lack of control they have. They show us so plainly that they are unable to make money from us, which leaves them no option but to grovel and beg us to turn off&nbsp;ad-blocking.[…]</p>
<p>When we use web browsers, <strong>we</strong> are in more control than <strong>they</strong> are. <mark>That’s simply not the case when we’re inside an app they get to&nbsp;control.</mark></p>
<p><cite><em><a data-link-domain="lmnt.me" href="https://lmnt.me/blog/anti-ad-block.html" hreflang="en"
            title="Consultation de l’article (anglais)">Anti-Ad-Block</a>
            <a href="/david/cache/2024/09cfcfafab15ad576de8b32d0046fb93/" hreflang="en"
                data-tippy data-description="I know a lot of people hate anti-ad-block popups, but to me they are perfect."
                data-source="https://lmnt.me/blog/anti-ad-block.html"
                data-date="2024-03-12"
                data-favicon="https://lmnt.me/lmnt.png"
                data-domain="lmnt.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Ma configuration à ce sujet est assez extrême et il n’est pas rare (surtout sur les boutiques&#8239;!) que je doive m’y reprendre à pas mal de fois pour débloquer les <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
            title="Consultation de l’article (anglais)">megabytes de JavaScript</a>
            <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
                data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
                data-source="https://tonsky.me/blog/js-bloat/"
                data-date="2024-03-03"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> à télécharger qui sont pertinents, ou plutôt nécessaires aux personnes ayant développé ces sites. Car pour ma part, je n’aurais besoin que de HTML dans 99% des&nbsp;cas…</p>
<p>…dit-il en venant d’ajouter 13Ko de&nbsp;JS&nbsp;😬.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/partage/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#partage</a>
        
          <a href="/david/2024/technique/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#technique</a>
        
          <a href="/david/2024/web/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#web</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/11/"
           title="Publication précédente : LoginWall">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/03/13/"
            title="Publication suivante : Sérendipité">Suivant →</a>
      
    </p>
  </nav>

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <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>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('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 colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.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) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>
  <script type="module">
    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'

    const markObserver = new IntersectionObserver((entries, observer) => {
      const computedStyle = getComputedStyle(document.documentElement)
      const markBackground = computedStyle.getPropertyValue('--mark-background')
      for (const entry of entries) {
        if (entry.intersectionRatio === 0) continue
        const markElement = entry.target
        markElement.style.backgroundColor = 'inherit'
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
            animate: false
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

    for (const markElement of document.querySelectorAll('mark')) {
      markObserver.observe(markElement)
    }
  </script>

  </body>
</html>