davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
							<!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>
    PageCrypt
  — 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="J’y ai passé ma soirée mais j’ai un truc qui fonctionne pour une démo. Ça ressemble beaucoup à un patchwork de bouts de code récupérés ici et là puis aussi là pour la partie Python.">
  <!-- 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">
  
<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>PageCrypt</h1>
      <p>Le <time datetime="2024-03-20">20 mars 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/19/"
           title="Publication précédente : Excitation">← 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>
      
    </p>
  </nav>
  
<p>J’y ai passé ma soirée mais j’ai un <a data-link-domain="davidbgk.gitlab.io" href="https://davidbgk.gitlab.io/page-crypt-web-component/">truc qui fonctionne pour une démo</a>. Ça ressemble beaucoup à un <em>patchwork</em> de bouts de code récupérés <a data-link-domain="maxlaumeister.com" href="https://www.maxlaumeister.com/pagecrypt/">ici</a> et <a data-link-domain="github.com" href="https://github.com/Greenheart/pagecrypt">là</a> puis <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/blob/master/python/encrypt.py">aussi là</a> pour la partie&nbsp;Python.</p>
<p>Il y a encore pas mal de travail —&nbsp;notamment pour rendre la page suffisamment accessible&nbsp;— mais au moins la partie crypto / boîte noire semble fonctionner à la fois du côté génération en Python et consommation en JS. C’est la partie qui me faisait un peu peur et sur laquelle j’ai un peu patiné car c’est bien au-delà de mes compétences et que je ne veux pas prendre l’initiative de trop adapter sans comprendre les enjeux niveau&nbsp;sécurité.</p>
<p>Le dépôt est <a data-link-domain="gitlab.com" href="https://gitlab.com/davidbgk/page-crypt-web-component">par ici</a>. Il faut encore que je décide si le formulaire pour le mot de passe devient un <em>web component</em> dédié et/ou un sous-composant, je ne suis pas satisfait du couplage implicite actuel. Itération, itération.</p>
<p>En bonus, il est possible d’accéder directement au contenu de la page en mettant le mot de passe en ancre de l’URL. J’ai appris au passage que ce fragment d’URL n’était pas transmis dans la requête et ne restait que dans l’historique du&nbsp;navigateur.</p>
<p><em>Si tu n’as pas honte de ton premier commit, tout ça… la suite&nbsp;demain.</em></p>
<a href="#hr-125" title="Lien vers cette section de la page"><hr id="hr-125" /></a>

<blockquote>
<p>Les mots ont un impact et, inconsciemment, quand vous ne les utilisez pas dans la bonne manière, vous minimisez mon handicap et donc vous faites moins d'effort que&nbsp;nécessaire.</p>
<p>Autre point, dit-on «&nbsp;personne en situation en handicap&nbsp;» ou «&nbsp;personne&nbsp;handicapée&#8239;?&nbsp;»</p>
<p>Là, encore, il y a une&nbsp;subtilité.</p>
<p>Je vais à un événement tech où les conférences ne sont pas sous-titrées. Je suis en situation de handicap puisque les conférences ne me sont pas du tout&nbsp;accessibles.</p>
<p>Je vais à un événement tech où les conférences sont toutes sous-titrées. Je ne suis pas en situation de handicap puisque les conférences me sont totalement&nbsp;accessibles.</p>
<p>Voici la différence. <mark>Être en situation de handicap, c’est subir la situation faute&nbsp;d’accessibilité.</mark></p>
<p><cite><em><a data-link-domain="emmanuelle-aboaf.netlify.app" href="https://emmanuelle-aboaf.netlify.app/blog/article/n-ayez-pas-peur-des-mots" hreflang="fr"
            title="Consultation de l’article">N’ayez pas peur des mots</a>
            <a href="/david/cache/2024/5201efaa6fe6a80f69647a354c9afd18/" hreflang="fr"
                data-tippy data-description="Les mots ont un impact et pourtant ils ne sont pas utilisés en tant que tels. Le mot handicapé·e n’est pas un gros mot, pas plus que les mots sourd·e et aveugle. Malheureusement, certaines personnes n’osent pas les dire par peur de vexer ou en pensant que ça ne se dit pas. Cependant, en ne les disant pas, vous créez un tabou. Je vous partage mes réflexions sur le sujet à travers cet article."
                data-source="https://emmanuelle-aboaf.netlify.app/blog/article/n-ayez-pas-peur-des-mots"
                data-date="2024-03-20"
                data-favicon="https://emmanuelle-aboaf.netlify.app/blog/article/favicon-32x32.png"
                data-domain="emmanuelle-aboaf.netlify.app"
                ><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>Cette page ne contient pas le contenu du HTML qui s’affiche et ça me rend triste car j’en apprécie le contenu qui m’apprend des choses / me fait&nbsp;réfléchir.</p>
<p>Un autre angle de&nbsp;l’accessibilité&#8239;?</p>
<a href="#hr-126" title="Lien vers cette section de la page"><hr id="hr-126" /></a>

<blockquote lang="en">
<p>So don’t publish for the&nbsp;world.</p>
<p>When I write something here on my website, I’m not thinking about the world reading it. That would be paralyzing. I do sometimes imagine that one person is reading it; someone just like me who hasn’t yet had this particular thought, or come up with that particular&nbsp;idea.</p>
<p>I’m writing for myself. <mark>I write to figure out what I think.</mark> I also publish mostly for myself—a public archive for future me. But if what I publish just happens to connect with one other person, I’m&nbsp;glad.</p>
<p><cite><em><a data-link-domain="adactio.com" href="https://adactio.com/journal/20996" hreflang="en"
            title="Consultation de l’article (anglais)">What the world needs</a>
            <a href="/david/cache/2024/318dd7526e11f9476c9cbc88eb3f2b9b/" hreflang="en"
                data-tippy data-description="Write for yourself."
                data-source="https://adactio.com/journal/20996"
                data-date="2024-03-20"
                data-favicon="https://adactio.com/icon.png"
                data-domain="adactio.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>
<a href="#hr-127" title="Lien vers cette section de la page"><hr id="hr-127" /></a>

<blockquote lang="en">
<p>My goal, for this digital place I’m creating, is to make you go away. And that’s not because I want to be left alone but because <mark>I hope to help you discover new digital places to explore.</mark> If I see you again, it’s because you decided to come back, and not because you got lost and trapped inside the digital walls I&nbsp;erected.</p>
<p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/digital-walled-gardens" hreflang="en"
            title="Consultation de l’article (anglais)">Digital walled gardens</a>
            <a href="/david/cache/2024/812f09bae33b395819539fd2c4693fe2/" hreflang="en"
                data-tippy data-description="The concept of a walled garden is not a new one in the digital world. It’s just a fancier, less aggressive way to describe a closed ecosystem or a …"
                data-source="https://manuelmoreale.com/digital-walled-gardens"
                data-date="2024-03-20"
                data-favicon="https://manuelmoreale.com/favicon.ico"
                data-domain="manuelmoreale.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>🌱</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/laboratoire/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#laboratoire</a>
        
          <a href="/david/2024/opensource/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#opensource</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/19/"
           title="Publication précédente : Excitation">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</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>