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>
    Tooltipopover
  — David Larlet</title>
  <meta name="description" content="Popover API – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. This can be useful for building features like tooltips and notifications. Support for popover was the #1 author request in the recent State of HTML survey.">
  <!-- 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_2024-02-03.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>
  <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>
  
<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>Tooltipopover</h1>
      <p>Le <time datetime="2024-02-04">4 février 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/02/03/"
           title="Publication précédente : Archives">← 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/02/05/"
            title="Publication suivante : Jeu">Suivant →</a>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p><a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. <mark>This can be useful for building features like tooltips</mark> and notifications. Support for popover was the #1&nbsp;author request in the recent State of HTML&nbsp;survey.</p>
<p><cite><em><a data-link-domain="hacks.mozilla.org" href="https://hacks.mozilla.org/2024/02/announcing-interop-2024/" hreflang="en"
            title="Consultation de l’article (anglais)">Announcing Interop 2024</a>
            <a href="/david/cache/2024/0deb984b2f799d391607afcaa488446d/" hreflang="en"
                data-tippy data-description="Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas."
                data-source="https://hacks.mozilla.org/2024/02/announcing-interop-2024/"
                data-date="2024-02-03"
                data-favicon="https://hacks.mozilla.org/wp-content/themes/Hax/favicon.ico"
                data-domain="hacks.mozilla.org"
                ><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 première intuition pour enrichir les liens de la version archivée était de passer par des éléments natifs (comme toujours). Initialement, j’ai même envisagé un <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">élément <code>&lt;dialog&gt;</code></a> qui est déjà mieux supporté mais ça rentrait mal dans le DOM là où je voulais l’insérer. Je me met alors en quête d’un <em><a data-link-domain="github.com" href="https://github.com/oddbird/popover-polyfill">polyfill</a></em> pour la Popover API qui pourrait convenir mais j’ai un peu peur des effets de bord vu que je découvre et qu’il y a quand même <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using">pas mal de possibilités</a>. J’en suis même à me <a data-link-domain="open-ui.org" href="https://open-ui.org/components/popover.research.explainer/" hreflang="en"
            title="Consultation de l’article (anglais)">lire une bonne page de doc</a>
            <a href="/david/cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/" hreflang="en"
                data-tippy data-description="A very common UI pattern on the Web, for which there is no native API, is “popover UI”, also sometimes called “popovers”, “pop up UI”, or “popovers”. Popovers are a general class of UI that have three common behaviors"
                data-source="https://open-ui.org/components/popover.research.explainer/"
                data-date="2024-02-03"
                data-favicon="https://open-ui.org/images/favicon-32x32.png"
                data-domain="open-ui.org"
                ><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> pour essayer de comprendre la distinction entre les&nbsp;deux.</p>
<p>Je finis par abandonner cette piste et je me dis que ça pourrait être un <em>Web Component</em> intéressant. Je m’arrache les cheveux un bon petit moment sur le positionnement et je capitule en me disant qu’il y a déjà des personnes qui ont produit des outils comme <a data-link-domain="floating-ui.com" href="https://floating-ui.com/">Floating UI</a> ou <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/">Tippy.js</a>. Choisir c’est renoncer… et j’ai fait les deux à la fois en optant pour Tippy qui <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/v6/accessibility/" hreflang="en"
            title="Consultation de l’article (anglais)">prend soin de l’accessibilité</a>
            <a href="/david/cache/2024/af0aee71fef1821c89ce368622f9a464/" hreflang="en"
                data-tippy data-description="Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out."
                data-source="https://atomiks.github.io/tippyjs/v6/accessibility/"
                data-date="2024-02-03"
                data-favicon="https://atomiks.github.io/tippyjs/favicon-32x32.png?v=68cd85fe631cbce4dad8be8ef26f93f3"
                data-domain="atomiks.github.io"
                ><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>. J’ai trop besoin d’avoir <em>l’expérience de l’interface</em> pour pouvoir affiner par la suite et faire les choses à ma&nbsp;sauce.</p>
<p>N’hésitez pas à jouer avec et à me faire des retours, c’est amené à&nbsp;évoluer.</p>
<a href="#hr-65" title="Lien vers cette section de la page"><hr id="hr-65" /></a>

<blockquote lang="en">
<p>My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-that. But <mark>unfortunately the ratios have changed.</mark> I think we're now down to maybe 80% already-here —climate change takes a huge toll on infrastructure— then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep&nbsp;craziness.</p>
<p><cite><em><a data-link-domain="antipope.org" href="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html" hreflang="en"
            title="Consultation de l’article (anglais)">Dude, you broke the future!</a>
            <a href="/david/cache/2024/71b177818657a209fc76f23c08c21d25/" hreflang="en"
                data-tippy data-description="In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it."
                data-source="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html"
                data-date="2024-02-03"
                data-favicon="https://www.antipope.org/favicon.ico"
                data-domain="antipope.org"
                ><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>Cela me rappelle une discussion récente au sujet du manque de pertinence de la météo et de la difficulté à faire de la prédiction sur des données rendues obsolètes par le changement climatique. Les modèles ne sont pas (encore&#8239;?) adaptés à un tel&nbsp;chaos.</p>
<p>Manifestement, les écrivains non&nbsp;plus.</p>

<blockquote lang="en">
<p>Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its “players” for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, <mark>it switches mode and starts rewarding players for violence</mark>—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of&nbsp;months.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Ah si en&nbsp;fait&nbsp;😬.</p>
<a href="#hr-66" title="Lien vers cette section de la page"><hr id="hr-66" /></a>

<blockquote lang="en">
<p>If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look&nbsp;like.</p>
<p><cite><em><a data-link-domain="erinremblance.substack.com" href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" hreflang="en"
            title="Consultation de l’article (anglais)">“We Are All Socialists in Our Private Lives”</a>
            <a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" hreflang="en"
                data-tippy data-description="David Graeber gets to the heart of human (and more than human) nature."
                data-source="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private"
                data-date="2024-02-03"
                data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F79e3e832-517f-4ca3-989b-41eb1c8249d7%2Ffavicon-16x16.png"
                data-domain="erinremblance.substack.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></em></cite></p>
</blockquote>
<p>Il n’y a que les classes moyennes qui peuvent être socialistes. C’était tout l’enjeu de leur destruction pour n’avoir plus que des personnes qui aient peur de perdre le <em>trop peu</em> ou le <em>vraiment beaucoup</em> qu’elles ont. Et la peur rend la manipulation tellement plus&nbsp;facile…</p>

<blockquote lang="en">
<p>If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of&nbsp;Forbes.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>🙈</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/apprentissage/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#apprentissage</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/02/03/"
           title="Publication précédente : Archives">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/02/05/"
            title="Publication suivante : Jeu">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>

  </body>
</html>