10 месяцев назад · 361de8266f
--- a/david/2024/01/01/index.html
+++ b/david/2024/01/01/index.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
@@ -173,7 +172,7 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#experience</a>
               rel="tag">#expérience</a>
          
            <a href="/david/2024/protopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
@@ -198,6 +197,9 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
@@ -228,6 +230,11 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -249,55 +256,75 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
--- a/david/2024/01/02/index.html
+++ b/david/2024/01/02/index.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
@@ -181,7 +180,7 @@
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#experience</a>
               rel="tag">#expérience</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
@@ -210,6 +209,9 @@
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
@@ -240,6 +242,11 @@
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -261,55 +268,75 @@
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
--- a/david/2024/01/03/index.html
+++ b/david/2024/01/03/index.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
@@ -187,6 +186,9 @@
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
@@ -217,6 +219,11 @@
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -238,55 +245,75 @@
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
--- a/david/2024/01/04/index.html
+++ b/david/2024/01/04/index.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
@@ -173,6 +172,9 @@
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
@@ -203,6 +205,11 @@
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -224,55 +231,75 @@
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
--- a/david/2024/01/05/index.html
+++ b/david/2024/01/05/index.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
@@ -213,6 +212,9 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
@@ -243,6 +245,11 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -264,55 +271,75 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
--- a/david/2024/01/06/index.html
+++ b/david/2024/01/06/index.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
@@ -130,6 +129,10 @@
             rel="search">Recherche</a>
        </nobr>
        
          • <a rel="next"
    href="/david/2024/01/07/"
    title="Publication suivante : Dons">Suivant →</a>
        
      </p>
    </nav>
    
@@ -197,8 +200,15 @@
        
        <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
        
          • <a rel="next"
    href="/david/2024/01/07/"
    title="Publication suivante : Dons">Suivant →</a>
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
@@ -229,6 +239,11 @@
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -250,55 +265,75 @@
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
--- a/david/2024/01/07/index.html
+++ b/david/2024/01/07/index.html
@@ -0,0 +1,335 @@
 <!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>
    Dons
  — David Larlet</title>
  <meta name="description" content="Plus que 3 jours pour décider de l’usage de vos #impôts en donnant à des #assos !">
  <!-- 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-01-06.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>
  
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
      <hgroup>
        <h1>Dons</h1>
        <p>Le <time datetime="2024-01-07">7 janvier 2024</time></p>
      </hgroup>
    </header>
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2024/01/06/"
             title="Publication précédente : Objectif">← Précédent</a> •
        
        <nobr>
          <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/recherche/"
             title="Aller à la page de recherche"
             rel="search">Recherche</a>
        </nobr>
        
      </p>
    </nav>
    

 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
 <p>Vu le succès de l’opération l’an dernier (<a href="https://piaille.fr/@mattisg/109605598029237063">https://piaille.fr/@mattisg/109605598029237063</a>), je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
 <p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
 <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
 <p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
 <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />

 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
 <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <hr />

 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
 <p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
 <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</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/communaute/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#communauté</a>
          
            <a href="/david/2024/fediverse/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#fédiverse</a>
          
          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2024/01/06/"
             title="Publication précédente : Objectif">← Précédent</a> •
        
        <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>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>
      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>
    
  </body>
 </html>
--- a/david/2024/_sources/2024-01-01
+++ b/david/2024/_sources/2024-01-01
@@ -31,4 +31,4 @@ Je me sens prêt, on verra bien où cela me mène.

 Grosse envie de reprendre la CSS par ici en ce début d’année. Avec le dilemme de faire chuter cette motivation si je publie dès maintenant avec l’ancienne (qui restera effective sur les anciens articles). Je vais essayer de me retenir.

 #addiction #experience #protopie
 #addiction #expérience #protopie
--- a/david/2024/_sources/2024-01-02
+++ b/david/2024/_sources/2024-01-02
@@ -36,4 +36,4 @@ Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vie
 Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi ? Oui, et ça ouvre des perspectives d’agencements photographiques à explorer…


 #experience #technique #web
 #expérience #technique #web
--- a/david/2024/_sources/2024-01-07
+++ b/david/2024/_sources/2024-01-07
@@ -0,0 +1,55 @@
 # Dons

 > Plus que 3 jours pour décider de l’usage de vos \#impôts en donnant à des \#assos !
 >
 > Vu le succès de l’opération l’an dernier ([https://piaille.fr/@mattisg/109605598029237063](https://piaille.fr/@mattisg/109605598029237063)), je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé ! 🤑💞
 >
 > Donnez à une des assos ci-dessous, publiez votre reçu en réponse, ==je double votre don.== […]
 >
 > <cite>[@mattisg@piaille.fr](https://piaille.fr/@mattisg/111652988498506725)</cite>

 Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre personnel.

 Une forme d’impôt volontaire qui ne termine pas / [plus](/david/2024/01/01/) à la [SAQ](https://www.saq.com/).

 ---

 Pensée (genrée) du jour : un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la cuisine.

 Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine déguisée.

 ---

 Masto comme un [espace de discussion](https://fedi.larlet.fr/@david/111709177849752316), le blog comme un espace de synthèse : il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de pratiques !

 Je décline le sélecteur de thème que l’[on avait fait en 2020](/david/2020/06/25/#paillasse) avec [Anthony](https://ricaud.me/blog/) mais cette fois sous la forme d’un *Web Component*. Je me suis pris les pieds dans le tapis car les *layers* en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le but !).

 Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus *light*, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de thème 😅.

 *Bientôt 500 lignes de CSS.*

 ---

 > Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).
 >
 > Je suis impressionné.
 > 
 > <cite>*[plaisir d’ébauche](https://www.la-grange.net/2024/01/06/ebauche)*, Karl</cite>

 Ce titre :)

 La transcription des *podcast* serait très importante pour moi car je n’arrive pas à en écouter un plus de 2 minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des [essais il y a 3 ans](/david/2021/01/18/) déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses inspirantes.

 ---

 > [en] We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. ==Politics finding its way into tech is one of the reason we do not have innovation any more.==
 >
 > We are primarily in the business of search and we’d like to stay focused on that.
 > 
 > <cite>*[Vlad (admin Kagi) répondant](https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6) à « Reconsider your partnership with Brave »*</cite>

 À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez terrible.

 [Pas de politique au travail](https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy) est ma nouvelle cryptonite.

 #apprentissage #communauté #fédiverse
--- a/david/2024/apprentissage/index.html
+++ b/david/2024/apprentissage/index.html
@@ -135,6 +135,49 @@
 <main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2>
      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> (2024-01-07)
    </h2>
    
      

 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
 <p>Vu le succès de l’opération l’an dernier (<a href="https://piaille.fr/@mattisg/109605598029237063">https://piaille.fr/@mattisg/109605598029237063</a>), je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
 <p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
 <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
 <p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
 <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />

 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
 <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <hr />

 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
 <p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
 <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>

    
  
    <h2>
      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> (2024-01-05)
    </h2>
--- a/david/2024/communaute/index.html
+++ b/david/2024/communaute/index.html
@@ -0,0 +1,310 @@
 <!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>
    Tag #communauté
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #communauté">
  <!-- 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>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <header>
    <h1>Publications relatives au tag #communauté</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-2021-12.svg#icon-home"></use>
        </svg>
      Accueil</a>
      • <a rel="tags"
    href="/david/#tags-2023"
    title="Liste de toutes les étiquettes">
      <svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg>
    Étiquettes</a>
  </p>
 </nav>
 <hr>
 <main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2>
      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> (2024-01-07)
    </h2>
    
      

 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
 <p>Vu le succès de l’opération l’an dernier (<a href="https://piaille.fr/@mattisg/109605598029237063">https://piaille.fr/@mattisg/109605598029237063</a>), je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
 <p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
 <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
 <p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
 <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />

 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
 <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <hr />

 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
 <p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
 <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>

    
  
 </main>

    <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>
--- a/david/2024/experience/index.html
+++ b/david/2024/experience/index.html
@@ -10,9 +10,9 @@
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Tag #experience
    Tag #expérience
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #experience">
  <meta name="description" content="Publications relatives au tag #expérience">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
@@ -113,7 +113,7 @@
        data-instant-intensity="viewport-all">
    
  <header>
    <h1>Publications relatives au tag #experience</h1>
    <h1>Publications relatives au tag #expérience</h1>
  </header>
  <nav>
    <p class="center">
--- a/david/2024/fediverse/index.html
+++ b/david/2024/fediverse/index.html
@@ -0,0 +1,310 @@
 <!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>
    Tag #fédiverse
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #fédiverse">
  <!-- 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>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <header>
    <h1>Publications relatives au tag #fédiverse</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-2021-12.svg#icon-home"></use>
        </svg>
      Accueil</a>
      • <a rel="tags"
    href="/david/#tags-2023"
    title="Liste de toutes les étiquettes">
      <svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg>
    Étiquettes</a>
  </p>
 </nav>
 <hr>
 <main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2>
      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> (2024-01-07)
    </h2>
    
      

 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
 <p>Vu le succès de l’opération l’an dernier (<a href="https://piaille.fr/@mattisg/109605598029237063">https://piaille.fr/@mattisg/109605598029237063</a>), je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
 <p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
 <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
 <p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
 <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />

 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
 <p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <hr />

 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
 <p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
 <p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>

    
  
 </main>

    <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>
--- a/david/2024/index.html
+++ b/david/2024/index.html
@@ -144,7 +144,8 @@
      <a href="/david/2024/01/03/">Appariement</a>, 
      <a href="/david/2024/01/04/">Repos</a>, 
      <a href="/david/2024/01/05/">Vocabulaire</a>, 
      <a href="/david/2024/01/06/">Objectif</a>.
      <a href="/david/2024/01/06/">Objectif</a>, 
      <a href="/david/2024/01/07/">Dons</a>.
      
    </p>
  
@@ -157,11 +158,13 @@
    <p>
      <a href="/david/2021/accompagnement/" rel="tag">#accompagnement (1)</a>
      <a href="/david/2021/addiction/" rel="tag">#addiction (2)</a>
      <a href="/david/2021/apprentissage/" rel="tag">#apprentissage (1)</a>
      <a href="/david/2021/apprentissage/" rel="tag">#apprentissage (2)</a>
      <a href="/david/2021/communaute/" rel="tag">#communauté (1)</a>
      <a href="/david/2021/decision/" rel="tag">#décision (1)</a>
      <a href="/david/2021/ecriture/" rel="tag">#écriture (1)</a>
      <a href="/david/2021/equipe/" rel="tag">#équipe (1)</a>
      <a href="/david/2021/experience/" rel="tag">#experience (2)</a>
      <a href="/david/2021/experience/" rel="tag">#expérience (2)</a>
      <a href="/david/2021/fediverse/" rel="tag">#fédiverse (1)</a>
      <a href="/david/2021/processus/" rel="tag">#processus (1)</a>
      <a href="/david/2021/protopie/" rel="tag">#protopie (1)</a>
      <a href="/david/2021/sport/" rel="tag">#sport (1)</a>
--- a/david/blogroll/index.html
+++ b/david/blogroll/index.html
@@ -176,21 +176,31 @@
    <h2>Leurs dernières publications</h2>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/01/05/carte">carte mémoire</a>,
          05-01-2024
          <a href="https://emmaclit.com/2024/01/06/darmaprout/">Darmaprout</a>,
          06-01-2024
        </dt>
        <dd>
          Shibakubocho, Japon, 4 janvier 2024 Avec un tel décor de lacs et de montagnes, on n'échappe pas à une légende locale. Si seulement les pères fondateurs de Lubok Sayong avaient eu l'intelligence de nous laisser une relique, quitte à l'enjoliver par ce qu'il faut de susperstitions et d'à-peu-près, les guides de voyage nous incluraient aujourd'hui dans leurs itinéraires. — La somme de nos folies,…
          Bédé libre de droits pour toute utilisation militante. J’ai choisi de faire un format court pour faciliter la lecture, ne m’en voulez pas si le propos est incomplet ! Bonne lecture !
          — <a href="https://emmaclit.com/">Emma</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d'ébauche</a>,
          06-01-2024
        </dt>
        <dd>
          Komagome, Japon, 6 janvier 2024 À Lubok Sayong, tout venait en un seul exemplaire: la rue principale, le rond-point, le feu rouge, le commissariat de police, la caserne des pompiers et son unique camion, le bureau de poste, la station-service, la tour de l'horloge, le supermarché, le cinéma, le Kentucky Fried Chicken, l'école malaise, la chinoise, celle des Tamouls, et même un pensionnat…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/01/04/dragon">silence du dragon</a>,
          04-01-2024
          <a href="https://www.la-grange.net/2024/01/05/carte">carte mémoire</a>,
          05-01-2024
        </dt>
        <dd>
          Hana-Koganei, Japon, 4 janvier 2024 À Lubok Sayong, l'eau est un vrai problème. Simplement parce qu'il y en a trop. — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059 La nouvelle année est une sorte d'apnée pour les petits commerces et les grandes entreprises, sauf bien sûr pour tous les prolétaires qui travaillent pour des marques connues et qui doivent travailler pendant la…
          Shibakubocho, Japon, 4 janvier 2024 Avec un tel décor de lacs et de montagnes, on n'échappe pas à une légende locale. Si seulement les pères fondateurs de Lubok Sayong avaient eu l'intelligence de nous laisser une relique, quitte à l'enjoliver par ce qu'il faut de susperstitions et d'à-peu-près, les guides de voyage nous incluraient aujourd'hui dans leurs itinéraires. — La somme de nos folies,…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
@@ -444,16 +454,6 @@
          — <a href="https://lalunemauve.fr/">La Lune Mauve</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://emmaclit.com/2022/10/06/la-ligne/">La ligne</a>,
          06-10-2022
        </dt>
        <dd>
          Salut à toutes et tous ! Voilà une bédé assez courte, pour répondre à une demande qui revient souvent dans mes messages. J’espère qu’elle conviendra aux principaux intéressés 🙂 As usual un grand merci à Alex, ma relectrice de talent, et à mon poilu pour leur soutien et leurs conseils Bonne lecture ! EDIT : … Lire la suite de La ligne
          — <a href="https://emmaclit.com/">Emma</a>
        </dd>
      </dl>
    
  </article>

--- a/david/index.html
+++ b/david/index.html
@@ -125,6 +125,7 @@
    <p>Liste des publications récentes en ordre anté-chronologique :</p>
    <nav>
      <p>
        <a href="/david/2024/01/07/">Dons</a>,
        <a href="/david/2024/01/06/">Objectif</a>,
        <a href="/david/2024/01/05/">Vocabulaire</a>,
        <a href="/david/2024/01/04/">Repos</a>,
@@ -140,11 +141,13 @@
      <p>
        <a href="/david/2023/accompagnement/" rel="tag">#accompagnement (1)</a>,
        <a href="/david/2023/addiction/" rel="tag">#addiction (2)</a>,
        <a href="/david/2023/apprentissage/" rel="tag">#apprentissage (1)</a>,
        <a href="/david/2023/apprentissage/" rel="tag">#apprentissage (2)</a>,
        <a href="/david/2023/communaute/" rel="tag">#communauté (1)</a>,
        <a href="/david/2023/decision/" rel="tag">#décision (1)</a>,
        <a href="/david/2023/ecriture/" rel="tag">#écriture (1)</a>,
        <a href="/david/2023/equipe/" rel="tag">#équipe (1)</a>,
        <a href="/david/2023/experience/" rel="tag">#experience (2)</a>,
        <a href="/david/2023/experience/" rel="tag">#expérience (2)</a>,
        <a href="/david/2023/fediverse/" rel="tag">#fédiverse (1)</a>,
        <a href="/david/2023/processus/" rel="tag">#processus (1)</a>,
        <a href="/david/2023/protopie/" rel="tag">#protopie (1)</a>,
        <a href="/david/2023/sport/" rel="tag">#sport (1)</a>,
--- a/david/log/index.xml
+++ b/david/log/index.xml
@@ -6,13 +6,57 @@
    <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
    <link href="https://larlet.fr/david/log/" rel="self" />
    <id>https://larlet.fr/david/</id>
    <updated>2024-01-06T12:00:00+01:00</updated>
    <updated>2024-01-07T12:00:00+01:00</updated>
    <author>
        <name>David Larlet</name>
        <uri>https://larlet.fr/david/</uri>
    </author>
    <rights>Copyright (c) 2004-2024, David Larlet</rights>
    
        <entry xml:lang="fr">
            <title type="html">Dons</title>
            <link href="https://larlet.fr/david/2024/01/07/" rel="alternate" type="text/html" />
            <updated>2024-01-07T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/01/07/</id>
            <summary type="html">

 &lt;blockquote&gt;
 &lt;p&gt;Plus que 3&amp;nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&amp;nbsp;#assos&amp;#8239;!&lt;/p&gt;
 &lt;p&gt;Vu le succès de l’opération l’an dernier (&lt;a href=&quot;https://piaille.fr/@mattisg/109605598029237063&quot;&gt;https://piaille.fr/@mattisg/109605598029237063&lt;/a&gt;), je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&amp;#8239;! 🤑💞&lt;/p&gt;
 &lt;p&gt;Donnez à une des assos ci-dessous, publiez votre reçu en réponse, &lt;mark&gt;je double votre don.&lt;/mark&gt;&amp;nbsp;[…]&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://piaille.fr/@mattisg/111652988498506725&quot;&gt;@mattisg@piaille.fr&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&amp;nbsp;personnel.&lt;/p&gt;
 &lt;p&gt;Une forme d’impôt volontaire qui ne termine pas / &lt;a href=&quot;https://larlet.fr/david/2024/01/01/&quot; title=&quot;Dryear(s)&quot;&gt;plus&lt;/a&gt; à la &lt;a href=&quot;https://www.saq.com/&quot;&gt;SAQ&lt;/a&gt;.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;p&gt;Pensée (genrée) du jour&amp;nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&amp;nbsp;cuisine.&lt;/p&gt;
 &lt;p&gt;Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&amp;nbsp;déguisée.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;p&gt;Masto comme un &lt;a href=&quot;https://fedi.larlet.fr/@david/111709177849752316&quot;&gt;espace de discussion&lt;/a&gt;, le blog comme un espace de synthèse&amp;nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&amp;nbsp;pratiques&amp;#8239;!&lt;/p&gt;
 &lt;p&gt;Je décline le sélecteur de thème que l’&lt;a href=&quot;https://larlet.fr/david/2020/06/25/#paillasse&quot;&gt;on avait fait en 2020&lt;/a&gt; avec &lt;a href=&quot;https://ricaud.me/blog/&quot;&gt;Anthony&lt;/a&gt; mais cette fois sous la forme d’un &lt;em&gt;Web Component&lt;/em&gt;. Je me suis pris les pieds dans le tapis car les &lt;em&gt;layers&lt;/em&gt; en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&amp;nbsp;but&amp;#8239;!).&lt;/p&gt;
 &lt;p&gt;Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus &lt;em&gt;light&lt;/em&gt;, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&amp;nbsp;thème&amp;nbsp;😅.&lt;/p&gt;
 &lt;p&gt;&lt;em&gt;Bientôt 500&amp;nbsp;lignes de&amp;nbsp;CSS.&lt;/em&gt;&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote&gt;
 &lt;p&gt;Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).&lt;/p&gt;
 &lt;p&gt;Je suis&amp;nbsp;impressionné.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2024/01/06/ebauche&quot;&gt;plaisir d’ébauche&lt;/a&gt;&lt;/em&gt;, Karl&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Ce&amp;nbsp;titre&amp;nbsp;:)&lt;/p&gt;
 &lt;p&gt;La transcription des &lt;em&gt;podcast&lt;/em&gt; serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&amp;nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des &lt;a href=&quot;https://larlet.fr/david/2021/01/18/&quot;&gt;essais il y a 3&amp;nbsp;ans&lt;/a&gt; déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&amp;nbsp;inspirantes.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. &lt;mark&gt;Politics finding its way into tech is one of the reason we do not have innovation any&amp;nbsp;more.&lt;/mark&gt;&lt;/p&gt;
 &lt;p&gt;We are primarily in the business of search and we’d like to stay focused on&amp;nbsp;that.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6&quot;&gt;Vlad (admin Kagi) répondant&lt;/a&gt; à «&amp;nbsp;Reconsider your partnership with&amp;nbsp;Brave&amp;nbsp;»&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&amp;nbsp;terrible.&lt;/p&gt;
 &lt;p&gt;&lt;a href=&quot;https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy&quot;&gt;Pas de politique au travail&lt;/a&gt; est ma nouvelle&amp;nbsp;cryptonite.&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/apprentissage/&quot;&gt;#apprentissage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/communaute/&quot;&gt;#communauté&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/fediverse/&quot;&gt;#fédiverse&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
        <entry xml:lang="fr">
            <title type="html">Objectif</title>
            <link href="https://larlet.fr/david/2024/01/06/" rel="alternate" type="text/html" />
@@ -199,7 +243,7 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&amp;
 &lt;/figure&gt;
 &lt;p&gt;Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les &lt;em&gt;layers&lt;/em&gt; qu’une refonte sérieuse (et cette typo&amp;nbsp;😱 (Bizmeud, &lt;a href=&quot;https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/&quot;&gt;en retraite&lt;/a&gt;)). Il n’est pas exclus que les essais actuels finissent également à la&amp;nbsp;poubelle.&lt;/p&gt;
 &lt;p&gt;Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&amp;#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&amp;nbsp;explorer…&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#experience&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/web/&quot;&gt;#web&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#expérience&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/web/&quot;&gt;#web&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
        <entry xml:lang="fr">
@@ -233,7 +277,7 @@ Pb&amp;nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, d
 &lt;p&gt;Je me sens prêt, on verra bien où cela me&amp;nbsp;mène.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;p&gt;Grosse envie de reprendre la CSS par ici en ce début d’année. Avec le dilemme de faire chuter cette motivation si je publie dès maintenant avec l’ancienne (qui restera effective sur les anciens articles). Je vais essayer de me&amp;nbsp;retenir.&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/addiction/&quot;&gt;#addiction&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#experience&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/protopie/&quot;&gt;#protopie&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/addiction/&quot;&gt;#addiction&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#expérience&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/protopie/&quot;&gt;#protopie&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
        <entry xml:lang="fr">
--- a/david/recherche/index.html
+++ b/david/recherche/index.html
@@ -276,6 +276,12 @@
    </template>
    
    <script id="search-index" type="application/json">[
  {
    "title": "Dons",
    "url": "/david/2024/01/07/",
    "date": "2024-01-07",
    "content": "Plus que 3\u00a0jours pour d\u00e9cider de l\u2019usage de vos #imp\u00f4ts en donnant \u00e0 des\u00a0#assos\u202f! Vu le succ\u00e8s de l\u2019op\u00e9ration l\u2019an dernier (https://piaille.fr/@mattisg/109605598029237063), je relance le doublement des dons en cette fin d\u2019ann\u00e9e 2023, avec un plafond plus \u00e9lev\u00e9\u202f! \ud83e\udd11\ud83d\udc9e Donnez \u00e0 une des assos ci-dessous, publiez votre re\u00e7u en r\u00e9ponse, je double votre don.\u00a0[\u2026] @mattisg@piaille.fr Admirable. C\u2019est la deuxi\u00e8me ann\u00e9e que nous arrivons \u00e0 faire des dons avec Scopyleft et \u00e7a me met en joie. Cela m\u2019a m\u00eame motiv\u00e9 pour en faire \u00e0 titre\u00a0personnel. Une forme d\u2019imp\u00f4t volontaire qui ne termine pas / plus \u00e0 la SAQ. Pens\u00e9e (genr\u00e9e) du jour\u00a0: un bon d\u00e9veloppeur fait bien la cuisine, un tr\u00e8s bon d\u00e9veloppeur fait la vaisselle apr\u00e8s avoir fait la\u00a0cuisine. Il y a une m\u00e9taphore au niveau du soin, du partage et de la maintenance \u00e0 peine\u00a0d\u00e9guis\u00e9e. Masto comme un espace de discussion, le blog comme un espace de synth\u00e8se\u00a0: il me faut un s\u00e9lecteur de th\u00e8me clair / fonc\u00e9 car c\u2019est utile \u00e0 plusieurs personnes. C\u2019est faible comme test utilisateur\u00b7ice mais c\u2019est d\u00e9j\u00e0 \u00e7a. Et puis j\u2019ai d\u00e9couvert plein de\u00a0pratiques\u202f! Je d\u00e9cline le s\u00e9lecteur de th\u00e8me que l\u2019on avait fait en 2020 avec Anthony mais cette fois sous la forme d\u2019un Web Component. Je me suis pris les pieds dans le tapis car les layers en CSS ajoutent un niveau d\u2019indentation dans la logique (et changent la sp\u00e9cificit\u00e9 mais c\u2019est le\u00a0but\u202f!). Je ne sais pas encore quel style lui donner. J\u2019en profite pour mettre en place le changement subtil de police pour le th\u00e8me fonc\u00e9 (plus light, ironiquement). J\u2019ai l\u2019espoir que ce type d\u2019adaptation aide les astigmates\u2026 \u00e0 arriver jusqu\u2019au s\u00e9lecteur de\u00a0th\u00e8me\u00a0\ud83d\ude05. Bient\u00f4t 500\u00a0lignes de\u00a0CSS. Une fois la transcription termin\u00e9e, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrig\u00e9, brut). Je suis\u00a0impressionn\u00e9. plaisir d\u2019\u00e9bauche, Karl Ce\u00a0titre\u00a0:) La transcription des podcast serait tr\u00e8s importante pour moi car je n\u2019arrive pas \u00e0 en \u00e9couter un plus de 2\u00a0minutes sans \u00eatre \u00e0 la peine (imaginez-moi au t\u00e9l\u00e9phone\u2026 ou en visio sans vid\u00e9o). J\u2019avais fait des essais il y a 3\u00a0ans d\u00e9j\u00e0 qui n\u2019\u00e9taient pas concluant mais peut-\u00eatre que l\u2019IA s\u2019en sort mieux aujourd\u2019hui. En tout cas, \u00e7a semble \u00eatre le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j\u2019ai l\u2019impression de passer \u00e0 c\u00f4t\u00e9 de beaucoup de choses\u00a0inspirantes. We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. Politics finding its way into tech is one of the reason we do not have innovation any\u00a0more. We are primarily in the business of search and we\u2019d like to stay focused on\u00a0that. Vlad (admin Kagi) r\u00e9pondant \u00e0 \u00ab\u00a0Reconsider your partnership with\u00a0Brave\u00a0\u00bb \u00c0 un moment l\u2019ann\u00e9e derni\u00e8re, j\u2019ai essay\u00e9 Kagi et j\u2019ai failli franchir le pas du payant. Je suis bien content de ne pas l\u2019avoir fait car je m\u2019en serais mordu les doigts aujourd\u2019hui. Dans l\u2019id\u00e9al, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses cr\u00e9ateur\u00b7ices. Et vu la population qui code aujourd\u2019hui, autant dire que c\u2019est mal barr\u00e9. Le fait qu\u2019un administrateur de Kagi puisse \u00eatre aussi na\u00eff sur le sujet est assez\u00a0terrible. Pas de politique au travail est ma nouvelle\u00a0cryptonite."
  },
  {
    "title": "Objectif",
    "url": "/david/2024/01/06/",
@@ -312,6 +318,12 @@
    "date": "2024-01-01",
    "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
  },
  {
    "title": "Dons",
    "url": "/david/2024/01/07/",
    "date": "2024-01-07",
    "content": "Plus que 3\u00a0jours pour d\u00e9cider de l\u2019usage de vos #imp\u00f4ts en donnant \u00e0 des\u00a0#assos\u202f! Vu le succ\u00e8s de l\u2019op\u00e9ration l\u2019an dernier (https://piaille.fr/@mattisg/109605598029237063), je relance le doublement des dons en cette fin d\u2019ann\u00e9e 2023, avec un plafond plus \u00e9lev\u00e9\u202f! \ud83e\udd11\ud83d\udc9e Donnez \u00e0 une des assos ci-dessous, publiez votre re\u00e7u en r\u00e9ponse, je double votre don.\u00a0[\u2026] @mattisg@piaille.fr Admirable. C\u2019est la deuxi\u00e8me ann\u00e9e que nous arrivons \u00e0 faire des dons avec Scopyleft et \u00e7a me met en joie. Cela m\u2019a m\u00eame motiv\u00e9 pour en faire \u00e0 titre\u00a0personnel. Une forme d\u2019imp\u00f4t volontaire qui ne termine pas / plus \u00e0 la SAQ. Pens\u00e9e (genr\u00e9e) du jour\u00a0: un bon d\u00e9veloppeur fait bien la cuisine, un tr\u00e8s bon d\u00e9veloppeur fait la vaisselle apr\u00e8s avoir fait la\u00a0cuisine. Il y a une m\u00e9taphore au niveau du soin, du partage et de la maintenance \u00e0 peine\u00a0d\u00e9guis\u00e9e. Masto comme un espace de discussion, le blog comme un espace de synth\u00e8se\u00a0: il me faut un s\u00e9lecteur de th\u00e8me clair / fonc\u00e9 car c\u2019est utile \u00e0 plusieurs personnes. C\u2019est faible comme test utilisateur\u00b7ice mais c\u2019est d\u00e9j\u00e0 \u00e7a. Et puis j\u2019ai d\u00e9couvert plein de\u00a0pratiques\u202f! Je d\u00e9cline le s\u00e9lecteur de th\u00e8me que l\u2019on avait fait en 2020 avec Anthony mais cette fois sous la forme d\u2019un Web Component. Je me suis pris les pieds dans le tapis car les layers en CSS ajoutent un niveau d\u2019indentation dans la logique (et changent la sp\u00e9cificit\u00e9 mais c\u2019est le\u00a0but\u202f!). Je ne sais pas encore quel style lui donner. J\u2019en profite pour mettre en place le changement subtil de police pour le th\u00e8me fonc\u00e9 (plus light, ironiquement). J\u2019ai l\u2019espoir que ce type d\u2019adaptation aide les astigmates\u2026 \u00e0 arriver jusqu\u2019au s\u00e9lecteur de\u00a0th\u00e8me\u00a0\ud83d\ude05. Bient\u00f4t 500\u00a0lignes de\u00a0CSS. Une fois la transcription termin\u00e9e, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrig\u00e9, brut). Je suis\u00a0impressionn\u00e9. plaisir d\u2019\u00e9bauche, Karl Ce\u00a0titre\u00a0:) La transcription des podcast serait tr\u00e8s importante pour moi car je n\u2019arrive pas \u00e0 en \u00e9couter un plus de 2\u00a0minutes sans \u00eatre \u00e0 la peine (imaginez-moi au t\u00e9l\u00e9phone\u2026 ou en visio sans vid\u00e9o). J\u2019avais fait des essais il y a 3\u00a0ans d\u00e9j\u00e0 qui n\u2019\u00e9taient pas concluant mais peut-\u00eatre que l\u2019IA s\u2019en sort mieux aujourd\u2019hui. En tout cas, \u00e7a semble \u00eatre le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j\u2019ai l\u2019impression de passer \u00e0 c\u00f4t\u00e9 de beaucoup de choses\u00a0inspirantes. We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. Politics finding its way into tech is one of the reason we do not have innovation any\u00a0more. We are primarily in the business of search and we\u2019d like to stay focused on\u00a0that. Vlad (admin Kagi) r\u00e9pondant \u00e0 \u00ab\u00a0Reconsider your partnership with\u00a0Brave\u00a0\u00bb \u00c0 un moment l\u2019ann\u00e9e derni\u00e8re, j\u2019ai essay\u00e9 Kagi et j\u2019ai failli franchir le pas du payant. Je suis bien content de ne pas l\u2019avoir fait car je m\u2019en serais mordu les doigts aujourd\u2019hui. Dans l\u2019id\u00e9al, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses cr\u00e9ateur\u00b7ices. Et vu la population qui code aujourd\u2019hui, autant dire que c\u2019est mal barr\u00e9. Le fait qu\u2019un administrateur de Kagi puisse \u00eatre aussi na\u00eff sur le sujet est assez\u00a0terrible. Pas de politique au travail est ma nouvelle\u00a0cryptonite."
  },
  {
    "title": "Objectif",
    "url": "/david/2024/01/06/",
--- a/david/templates/article_2024.html
+++ b/david/templates/article_2024.html
@@ -61,5 +61,8 @@
        {% endif %}
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>
 {% endblock content %}
--- a/david/templates/base_2024.html
+++ b/david/templates/base_2024.html
@@ -48,44 +48,44 @@
  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-01-05.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off.
  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.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"
        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/triplicate_t4_poly_bold.woff2"
        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/triplicate_t4_poly_italic.woff2"
        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/triplicate_t3_regular.woff2"
        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/triplicate_t3_bold.woff2"
        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/triplicate_t3_italic.woff2"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin> -->
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
@@ -103,8 +103,7 @@
    }
  </script>
  {% block extra_head %}{% endblock %}
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
  <body data-instant-intensity="viewport-all">
    {% block content %}
    {% endblock content %}
    <hr>
@@ -135,6 +134,11 @@
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
@@ -156,55 +160,75 @@
    </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)
      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))
        }

        form.addEventListener('change', (e) => {
          const chosenColorScheme = e.target.value
          localStorage.setItem('theme', chosenColorScheme)
          toggleTheme(chosenColorScheme)
        })
        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 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 cssRule of styleSheet.cssRules) {
            if (cssRule.type !== CSSRule.MEDIA_RULE) {
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            // WARNING: Safari does not have/supports `conditionText`.
            if (cssRule.conditionText) {
              if (cssRule.conditionText !== prefersColorSchemeDark) {
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
            } else {
              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                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))
            }
            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)
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>