8 месяцев назад · ae9aff6c32
--- a/david/2024/03/07/index.html
+++ b/david/2024/03/07/index.html
@@ -152,6 +152,10 @@
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/03/08/"
            title="Publication suivante : Flow">Suivant →</a>
      
    </p>
  </nav>
  
@@ -252,6 +256,10 @@
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/03/08/"
            title="Publication suivante : Flow">Suivant →</a>
      
    </p>
  </nav>

--- a/david/2024/03/08/index.html
+++ b/david/2024/03/08/index.html
@@ -0,0 +1,401 @@
 <!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>
    Flow
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-07.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Le flow) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’Eurêka ! qui annonce la libération du flow à venir.">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  
 <style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
 </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>Flow</h1>
      <p>Le <time datetime="2024-03-08">8 mars 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/07/"
           title="Publication précédente : Sondages">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
    </p>
  </nav>
  
 <p>Le <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Flow_(psychologie">flow</a>) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’<em>Eurêka&#8239;!</em> qui annonce la libération du <em>flow</em> à&nbsp;venir.</p>
 <p>La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de <em>ressuyage</em>&nbsp;: <q lang="fr">l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion</q> nous dit le <a data-link-domain="symadrem.fr" href="https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/">Symadrem</a>. Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du <em>flow</em> accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites&nbsp;également.</p>
 <p>Ce contexte ne m’est atteignable que 3&nbsp;ou 4&nbsp;fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement&nbsp;satisfaisant&#8239;!).</p>
 <a href="#hr-104" title="Lien vers cette section de la page"><hr id="hr-104" /></a>

 <blockquote lang="en">
 <p>CSS is a programming language because that’s what you’re doing when you write it; you’re <em>programming</em> the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any&nbsp;CSS.)</p>
 <p>In many ways, <mark>CSS has greater impact than any other language</mark> on a user’s experience, which often directly influences success. Why, then, is its role so&nbsp;belittled?</p>
 <p><cite><em><a data-link-domain="joshcollinsworth.com" href="https://joshcollinsworth.com/blog/devaluing-frontend" hreflang="en"
            title="Consultation de l’article (anglais)">The quiet, pervasive devaluation of frontend</a>
            <a href="/david/cache/2024/64ec164fc6c5c23ede3fba6006a47f36/" hreflang="en"
                data-tippy data-description="I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work."
                data-source="https://joshcollinsworth.com/blog/devaluing-frontend"
                data-date="2024-03-09"
                data-favicon="https://joshcollinsworth.com/favicon.png"
                data-domain="joshcollinsworth.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les <em>patterns</em>, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais <a href="/david/2024/02/28/#hr-94">par ici</a>) — notamment lorsqu’il va falloir nettoyer 10&nbsp;ans de&nbsp;CSS-in-JS/Tailwind/YouNameIt.</p>
 <p>Je n’ai pas la même considération pour ces personnes, <strong>j’en ai bien davantage</strong>.</p>
 <a href="#hr-105" title="Lien vers cette section de la page"><hr id="hr-105" /></a>

 <blockquote lang="en">
 <p>So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the <code>countClickable</code> mixin for example), while both remain&nbsp;reusable.</p>
 <p><cite><em><a data-link-domain="lorenzofox.dev" href="https://lorenzofox.dev/posts/component-as-infinite-loop/" hreflang="en"
            title="Consultation de l’article (anglais)">Coroutines and web components</a>
            <a href="/david/cache/2024/6f3cb3c0c6c580407b1cfaa2d7d9005b/" hreflang="en"
                data-tippy data-description="Custom elements (web components) modelling with coroutines"
                data-source="https://lorenzofox.dev/posts/component-as-infinite-loop/"
                data-date="2024-03-09"
                data-favicon="https://lorenzofox.dev/posts/component-as-infinite-loop/public/favicon.ico"
                data-domain="lorenzofox.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air&nbsp;fun&#8239;!&nbsp;😜</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/experience/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#expérience</a>
        
          <a href="/david/2024/psychologie/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#psychologie</a>
        
          <a href="/david/2024/technique/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#technique</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/07/"
           title="Publication précédente : Sondages">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
    </p>
  </nav>

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

        connectedCallback() {
          const form = this.shadowRoot.querySelector('form')
          form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
          })

          const selectedTheme = localStorage.getItem('theme')
          if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
          }
        }
      }

      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
      window.addEventListener('load', () => {
        let colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
              // WARNING: Safari does not have/supports `conditionText`.
              if (cssRule.conditionText) {
                if (cssRule.conditionText !== prefersColorSchemeDark) {
                  continue
                }
              } else {
                if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                  continue
                }
              }
              mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }
          }

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

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

  </body>
 </html>
--- a/david/2024/_sources/2024-03-08
+++ b/david/2024/_sources/2024-03-08
@@ -0,0 +1,29 @@
 # Flow

 Le [flow](https://fr.wikipedia.org/wiki/Flow_(psychologie)) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’*Eurêka !* qui annonce la libération du *flow* à venir.

 La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de *ressuyage* : <q lang="fr">l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion</q> nous dit le [Symadrem](https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/). Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du *flow* accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites également.

 Ce contexte ne m’est atteignable que 3 ou 4 fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement satisfaisant !).

 ---

 > [en] CSS is a programming language because that’s what you’re doing when you write it; you’re *programming* the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any CSS.)
 >
 > In many ways, ==CSS has greater impact than any other language== on a user’s experience, which often directly influences success. Why, then, is its role so belittled?
 > 
 > <cite>*[The quiet, pervasive devaluation of frontend](https://joshcollinsworth.com/blog/devaluing-frontend)*</cite>

 J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les *patterns*, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais [par ici](/david/2024/02/28/#hr-94)) — notamment lorsqu’il va falloir nettoyer 10 ans de CSS-in-JS/Tailwind/YouNameIt.

 Je n’ai pas la même considération pour ces personnes, **j’en ai bien davantage**.

 ---

 > [en] So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the `countClickable` mixin for example), while both remain reusable.
 > 
 > <cite>*[Coroutines and web components](https://lorenzofox.dev/posts/component-as-infinite-loop/)*</cite>

 Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air fun ! 😜

 #expérience #psychologie #technique
--- a/david/2024/experience/index.html
+++ b/david/2024/experience/index.html
@@ -134,6 +134,81 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/08/" title="Lien permanent vers cet article">Flow</a> <time datetime="2024-03-08">8 mars 2024</time>
    </h2>
    
 <p>Le <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Flow_(psychologie">flow</a>) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’<em>Eurêka&#8239;!</em> qui annonce la libération du <em>flow</em> à&nbsp;venir.</p>
 <p>La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de <em>ressuyage</em>&nbsp;: <q lang="fr">l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion</q> nous dit le <a data-link-domain="symadrem.fr" href="https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/">Symadrem</a>. Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du <em>flow</em> accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites&nbsp;également.</p>
 <p>Ce contexte ne m’est atteignable que 3&nbsp;ou 4&nbsp;fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement&nbsp;satisfaisant&#8239;!).</p>
 <a href="#hr-104" title="Lien vers cette section de la page"><hr id="hr-104" /></a>

 <blockquote lang="en">
 <p>CSS is a programming language because that’s what you’re doing when you write it; you’re <em>programming</em> the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any&nbsp;CSS.)</p>
 <p>In many ways, <mark>CSS has greater impact than any other language</mark> on a user’s experience, which often directly influences success. Why, then, is its role so&nbsp;belittled?</p>
 <p><cite><em><a data-link-domain="joshcollinsworth.com" href="https://joshcollinsworth.com/blog/devaluing-frontend" hreflang="en"
            title="Consultation de l’article (anglais)">The quiet, pervasive devaluation of frontend</a>
            <a href="/david/cache/2024/64ec164fc6c5c23ede3fba6006a47f36/" hreflang="en"
                data-tippy data-description="I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work."
                data-source="https://joshcollinsworth.com/blog/devaluing-frontend"
                data-date="2024-03-09"
                data-favicon="https://joshcollinsworth.com/favicon.png"
                data-domain="joshcollinsworth.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les <em>patterns</em>, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais <a href="/david/2024/02/28/#hr-94">par ici</a>) — notamment lorsqu’il va falloir nettoyer 10&nbsp;ans de&nbsp;CSS-in-JS/Tailwind/YouNameIt.</p>
 <p>Je n’ai pas la même considération pour ces personnes, <strong>j’en ai bien davantage</strong>.</p>
 <a href="#hr-105" title="Lien vers cette section de la page"><hr id="hr-105" /></a>

 <blockquote lang="en">
 <p>So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the <code>countClickable</code> mixin for example), while both remain&nbsp;reusable.</p>
 <p><cite><em><a data-link-domain="lorenzofox.dev" href="https://lorenzofox.dev/posts/component-as-infinite-loop/" hreflang="en"
            title="Consultation de l’article (anglais)">Coroutines and web components</a>
            <a href="/david/cache/2024/6f3cb3c0c6c580407b1cfaa2d7d9005b/" hreflang="en"
                data-tippy data-description="Custom elements (web components) modelling with coroutines"
                data-source="https://lorenzofox.dev/posts/component-as-infinite-loop/"
                data-date="2024-03-09"
                data-favicon="https://lorenzofox.dev/posts/component-as-infinite-loop/public/favicon.ico"
                data-domain="lorenzofox.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air&nbsp;fun&#8239;!&nbsp;😜</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/22/" title="Lien permanent vers cet article">Responsabilité</a> <time datetime="2024-02-22">22 février 2024</time>
    </h2>
--- a/david/2024/index.html
+++ b/david/2024/index.html
@@ -205,7 +205,8 @@
      <a href="/david/2024/03/04/">Jour&nbsp;1</a>, 
      <a href="/david/2024/03/05/">Jour&nbsp;2</a>, 
      <a href="/david/2024/03/06/">Vannerie</a>, 
      <a href="/david/2024/03/07/">Sondages</a>.
      <a href="/david/2024/03/07/">Sondages</a>, 
      <a href="/david/2024/03/08/">Flow</a>.
      
    </p>
  
@@ -229,7 +230,7 @@
      <a href="/david/2024/ecriture/" rel="tag">#écriture (7)</a>, 
      <a href="/david/2024/equipe/" rel="tag">#équipe (7)</a>, 
      <a href="/david/2024/evolution/" rel="tag">#évolution (7)</a>, 
      <a href="/david/2024/experience/" rel="tag">#expérience (11)</a>, 
      <a href="/david/2024/experience/" rel="tag">#expérience (12)</a>, 
      <a href="/david/2024/fediverse/" rel="tag">#fédiverse (1)</a>, 
      <a href="/david/2024/foret/" rel="tag">#forêt (7)</a>, 
      <a href="/david/2024/gratitude/" rel="tag">#gratitude (3)</a>, 
@@ -246,10 +247,10 @@
      <a href="/david/2024/processus/" rel="tag">#processus (10)</a>, 
      <a href="/david/2024/propriete/" rel="tag">#propriété (1)</a>, 
      <a href="/david/2024/protopie/" rel="tag">#protopie (7)</a>, 
      <a href="/david/2024/psychologie/" rel="tag">#psychologie (9)</a>, 
      <a href="/david/2024/psychologie/" rel="tag">#psychologie (10)</a>, 
      <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (5)</a>, 
      <a href="/david/2024/sport/" rel="tag">#sport (5)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (13)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (14)</a>, 
      <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, 
      <a href="/david/2024/web/" rel="tag">#web (10)</a>.
      
--- a/david/2024/psychologie/index.html
+++ b/david/2024/psychologie/index.html
@@ -134,6 +134,81 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/08/" title="Lien permanent vers cet article">Flow</a> <time datetime="2024-03-08">8 mars 2024</time>
    </h2>
    
 <p>Le <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Flow_(psychologie">flow</a>) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’<em>Eurêka&#8239;!</em> qui annonce la libération du <em>flow</em> à&nbsp;venir.</p>
 <p>La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de <em>ressuyage</em>&nbsp;: <q lang="fr">l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion</q> nous dit le <a data-link-domain="symadrem.fr" href="https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/">Symadrem</a>. Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du <em>flow</em> accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites&nbsp;également.</p>
 <p>Ce contexte ne m’est atteignable que 3&nbsp;ou 4&nbsp;fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement&nbsp;satisfaisant&#8239;!).</p>
 <a href="#hr-104" title="Lien vers cette section de la page"><hr id="hr-104" /></a>

 <blockquote lang="en">
 <p>CSS is a programming language because that’s what you’re doing when you write it; you’re <em>programming</em> the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any&nbsp;CSS.)</p>
 <p>In many ways, <mark>CSS has greater impact than any other language</mark> on a user’s experience, which often directly influences success. Why, then, is its role so&nbsp;belittled?</p>
 <p><cite><em><a data-link-domain="joshcollinsworth.com" href="https://joshcollinsworth.com/blog/devaluing-frontend" hreflang="en"
            title="Consultation de l’article (anglais)">The quiet, pervasive devaluation of frontend</a>
            <a href="/david/cache/2024/64ec164fc6c5c23ede3fba6006a47f36/" hreflang="en"
                data-tippy data-description="I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work."
                data-source="https://joshcollinsworth.com/blog/devaluing-frontend"
                data-date="2024-03-09"
                data-favicon="https://joshcollinsworth.com/favicon.png"
                data-domain="joshcollinsworth.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les <em>patterns</em>, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais <a href="/david/2024/02/28/#hr-94">par ici</a>) — notamment lorsqu’il va falloir nettoyer 10&nbsp;ans de&nbsp;CSS-in-JS/Tailwind/YouNameIt.</p>
 <p>Je n’ai pas la même considération pour ces personnes, <strong>j’en ai bien davantage</strong>.</p>
 <a href="#hr-105" title="Lien vers cette section de la page"><hr id="hr-105" /></a>

 <blockquote lang="en">
 <p>So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the <code>countClickable</code> mixin for example), while both remain&nbsp;reusable.</p>
 <p><cite><em><a data-link-domain="lorenzofox.dev" href="https://lorenzofox.dev/posts/component-as-infinite-loop/" hreflang="en"
            title="Consultation de l’article (anglais)">Coroutines and web components</a>
            <a href="/david/cache/2024/6f3cb3c0c6c580407b1cfaa2d7d9005b/" hreflang="en"
                data-tippy data-description="Custom elements (web components) modelling with coroutines"
                data-source="https://lorenzofox.dev/posts/component-as-infinite-loop/"
                data-date="2024-03-09"
                data-favicon="https://lorenzofox.dev/posts/component-as-infinite-loop/public/favicon.ico"
                data-domain="lorenzofox.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air&nbsp;fun&#8239;!&nbsp;😜</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/05/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-03-05">5 mars 2024</time>
    </h2>
--- a/david/2024/technique/index.html
+++ b/david/2024/technique/index.html
@@ -134,6 +134,81 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/08/" title="Lien permanent vers cet article">Flow</a> <time datetime="2024-03-08">8 mars 2024</time>
    </h2>
    
 <p>Le <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Flow_(psychologie">flow</a>) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’<em>Eurêka&#8239;!</em> qui annonce la libération du <em>flow</em> à&nbsp;venir.</p>
 <p>La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de <em>ressuyage</em>&nbsp;: <q lang="fr">l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion</q> nous dit le <a data-link-domain="symadrem.fr" href="https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/">Symadrem</a>. Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du <em>flow</em> accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites&nbsp;également.</p>
 <p>Ce contexte ne m’est atteignable que 3&nbsp;ou 4&nbsp;fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement&nbsp;satisfaisant&#8239;!).</p>
 <a href="#hr-104" title="Lien vers cette section de la page"><hr id="hr-104" /></a>

 <blockquote lang="en">
 <p>CSS is a programming language because that’s what you’re doing when you write it; you’re <em>programming</em> the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any&nbsp;CSS.)</p>
 <p>In many ways, <mark>CSS has greater impact than any other language</mark> on a user’s experience, which often directly influences success. Why, then, is its role so&nbsp;belittled?</p>
 <p><cite><em><a data-link-domain="joshcollinsworth.com" href="https://joshcollinsworth.com/blog/devaluing-frontend" hreflang="en"
            title="Consultation de l’article (anglais)">The quiet, pervasive devaluation of frontend</a>
            <a href="/david/cache/2024/64ec164fc6c5c23ede3fba6006a47f36/" hreflang="en"
                data-tippy data-description="I keep noticing those of us in the frontend field being treated much the same as nurses, paralegals, and executive assistants. Our work is seen as important, certainly, but just not the same as, or as important as, the “real” work."
                data-source="https://joshcollinsworth.com/blog/devaluing-frontend"
                data-date="2024-03-09"
                data-favicon="https://joshcollinsworth.com/favicon.png"
                data-domain="joshcollinsworth.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les <em>patterns</em>, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais <a href="/david/2024/02/28/#hr-94">par ici</a>) — notamment lorsqu’il va falloir nettoyer 10&nbsp;ans de&nbsp;CSS-in-JS/Tailwind/YouNameIt.</p>
 <p>Je n’ai pas la même considération pour ces personnes, <strong>j’en ai bien davantage</strong>.</p>
 <a href="#hr-105" title="Lien vers cette section de la page"><hr id="hr-105" /></a>

 <blockquote lang="en">
 <p>So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the <code>countClickable</code> mixin for example), while both remain&nbsp;reusable.</p>
 <p><cite><em><a data-link-domain="lorenzofox.dev" href="https://lorenzofox.dev/posts/component-as-infinite-loop/" hreflang="en"
            title="Consultation de l’article (anglais)">Coroutines and web components</a>
            <a href="/david/cache/2024/6f3cb3c0c6c580407b1cfaa2d7d9005b/" hreflang="en"
                data-tippy data-description="Custom elements (web components) modelling with coroutines"
                data-source="https://lorenzofox.dev/posts/component-as-infinite-loop/"
                data-date="2024-03-09"
                data-favicon="https://lorenzofox.dev/posts/component-as-infinite-loop/public/favicon.ico"
                data-domain="lorenzofox.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air&nbsp;fun&#8239;!&nbsp;😜</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/03/02/" title="Lien permanent vers cet article">Montre</a> <time datetime="2024-03-02">2 mars 2024</time>
    </h2>
--- a/david/blogroll/index.html
+++ b/david/blogroll/index.html
@@ -176,94 +176,124 @@
    <h2>Leurs dernières publications</h2>
    <dl>
        <dt>
          <a href="https://winnielim.org/notes/sketchbook-painting-of-mr-bucket-chocolaterie/">sketchbook painting of mr bucket chocolaterie</a>,
          07-03-2024
          <a href="https://www.arthurperret.fr/blog/2024-03-14-inacheve-d-imprimer-echange.html">[Blog] Inachevé d’imprimer – Temps d’échange</a>,
          14-03-2024
        </dt>
        <dd>
          for some reason this is one of my favourite spreads
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
          La reprise d’Inachevé d’imprimer continue ! Inachevé d’imprimer, ce sont des rencontres en visio, une liste de diffusion pour être informé des prochains rendez-vous, un site pour partager des compte-rendus. Antoine Fauchié, Julien Taquet et moi organisons un temps d’échange pour préciser les quelques rôles nécessaires au fonctionnement (plutôt simple) du collectif, et partager des idées pour les…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/journal/some-ruminations-on-the-inherent-dislike-of-my-self/">some ruminations on the inherent dislike of my self</a>,
          03-03-2024
          <a href="https://www.arthurperret.fr/blog/2024-03-12-inacheve-d-imprimer-robert-alessi-ekdosis.html">[Blog] Inachevé d’imprimer – Robert Alessi, Ekdosis</a>,
          12-03-2024
        </dt>
        <dd>
          [cw: suicidal thoughts] I guess this does not come as a surprise to anyone – I think I have an inherent dislike for my self. No one who inherently likes them selves...
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
          Robert Alessi est maître de conférences, membre de l’Unité Mixte de Recherche « Orient & Méditerranée » (CNRS UMR 8167, Paris). Il développe et maintient Ekdosis, un paquet LuaLaTeX pour l’édition critique de textes anciens. Ekdosis est conçu pour faciliter le balisage et la composition des éditions critiques, et pour obtenir un format paginé PDF ainsi qu’un format numérique XML-TEI. Ekdosis…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2024/03/02/adhesions/">☕️ Journal : Adhésions</a>,
          02-03-2024
          <a href="https://thom4.net/2024/03/08/loyers-solidaires/">☕️ Journal : Loyers solidaires</a>,
          08-03-2024
        </dt>
        <dd>
          J’ai renouvelé mes adhésions et soutiens à titre personnel : Association d’éducation popu
          Hier, on a affiché le « statut » des loyers solidaires dans le foyer du tiers-lieu l’
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Traverser-la-rue-pour-manger-sainement">Traverser la rue pour manger sainement</a>,
          26-02-2024
          <a href="https://blog.ecologie-politique.eu/post/Comment-j-ai-appris-a-mepriser-Sandrine-Rousseau">Comment j’ai appris à mépriser Sandrine Rousseau</a>,
          08-03-2024
        </dt>
        <dd>
          J’ai déjà démonté ici le cliché selon lequel « on vote avec son portefeuille » et on n’a qu’à traverser la rue pour soutenir son type d’agriculture préféré en achetant les produits qui en sont issus. Julien Denormandie, le précédent ministre de l’agriculture, avait ainsi justifié l’abandon des aides publiques au maintien en agriculture bio : c’était un segment du marché, l’État n’avait aucune…
          Il me semble important de critiquer les camarades, non par plaisir égocentrique et pour se mettre en valeur à leurs dépens mais parce que toutes les stratégies peuvent être interrogées et que personne n’est à l’abri d’une dérive. Les critiques du camp opposé, par leur violence, leur injustice ou leurs présupposés biaisés, tendent plutôt, et c’est compréhensible, à conforter celle ou celui qui…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/02/armee-musicale-personnelle/">Parenthèse – Armée musicale personnelle</a>,
          26-02-2024
          <a href="https://thom4.net/2024/03/08/permis-de-visite/">☕️ Journal : Permis de visite</a>,
          08-03-2024
        </dt>
        <dd>
          Trouver du soutien dans les cris de valkyries.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
          Le portail des services de l’administration pénitentiaire dispose d’une foire aux ques
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/02/21/entre-travail">entre-travail</a>,
          21-02-2024
          <a href="https://winnielim.org/notes/sketchbook-painting-of-mr-bucket-chocolaterie/">sketchbook painting of mr bucket chocolaterie</a>,
          07-03-2024
        </dt>
        <dd>
          Takinogawa, Japon, 21 février 2024 Vous quittez Hanoi en contournant le temple de la Littérature. Aucun itinéraire n'a été choisi au préalable, mais tout semble y converger. Et puis vous êtres encore somnolent, et l'aube se lève à peine. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 J'aime les jours de pluie. Nous prenons le métro pour aller à l'école et parfois je prends le temps de…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
          for some reason this is one of my favourite spreads
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/02/20/reve">rêve</a>,
          20-02-2024
          <a href="https://winnielim.org/journal/some-ruminations-on-the-inherent-dislike-of-my-self/">some ruminations on the inherent dislike of my self</a>,
          03-03-2024
        </dt>
        <dd>
          Cupertino, États-Unis, 15 février 2024 Après le Têt, je lui rappellerai que parfos les choses s'accumulent dans la vie sans faire d'édifices. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Rêve de la nuit dernière : Je suis un artiste photographe. On me demande une œuvre pour une exposition sur le thème de la photographie et du rapport du spectateur à la photographie dans les…
          [cw: suicidal thoughts] I guess this does not come as a surprise to anyone – I think I have an inherent dislike for my self. No one who inherently likes them selves...
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/03/02/ozoni">ozzzoni</a>,
          02-03-2024
        </dt>
        <dd>
          Komagome, Japon, 2 mars 2024 There was once a town in the heart of America where all life seemed to live in harmony with its surroundings. — Silent Spring, Rachel Carlson, urn:isbn:978-0-141-18494-4 Sommeil + ozoni = ozzzoni. Cycling across Malaysia Museums Without Men: my project to end their shocking gender imbalance ébauches. Juste pour la dernière image de ce billet. J'en ai parlé, il y a…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/le-monde-tel-quil-aurait-pu-etre-2">Le monde tel qu’il aurait pu être</a>,
          20-02-2024
          <a href="https://www.la-grange.net/2024/03/01/comprendre">tu ne connais pas…</a>,
          01-03-2024
        </dt>
        <dd>
          J’ai arrêté cette série de billets très rapidement. J’y tiens. Je veux recréer de l’utopie et penser plus au monde possible qu’à celui qu’on est en train de construire. Le problème c’est que ces billets sont viciés à la base. Ils ne fonctionnent que par contraste avec ce qui est fait, ou pas fait, aujourd’hui. […]
          — <a href="https://n.survol.fr/">Éric D.</a>
          Bangkok, Thaïlande, 1 mars 2024 Fiez-vous à moi, qui vous dit que le temps ne nous sera pas compté. — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Le temps est essentiel. Ce que l'on vît, ce que l'on comprend de notre vécu. Qu'avons nous compris ?
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/I-m-so-happy-to-see-you">I'm so happy to see you</a>,
          19-02-2024
          <a href="https://blog.ecologie-politique.eu/post/Traverser-la-rue-pour-manger-sainement">Traverser la rue pour manger sainement</a>,
          26-02-2024
        </dt>
        <dd>
          Les logiques du développement personnel se sont doucement imposées dans notre imaginaire. Les ouvrages qui ont envahi les rayons des librairies peuvent dispenser une grande sagesse, si possible orientale, ou enchaîner les conseils simples ou les lieux communs (charité bien ordonnée commence par soi-même). Offrant une façade lisse, ils ont un propos aussi varié que consensuel. Depuis quelques…
          J’ai déjà démonté ici le cliché selon lequel « on vote avec son portefeuille » et on n’a qu’à traverser la rue pour soutenir son type d’agriculture préféré en achetant les produits qui en sont issus. Julien Denormandie, le précédent ministre de l’agriculture, avait ainsi justifié l’abandon des aides publiques au maintien en agriculture bio : c’était un segment du marché, l’État n’avait aucune…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/02/armee-musicale-personnelle/">Parenthèse – Armée musicale personnelle</a>,
          26-02-2024
        </dt>
        <dd>
          Trouver du soutien dans les cris de valkyries.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/le-monde-tel-quil-aurait-pu-etre-2">Le monde tel qu’il aurait pu être</a>,
          20-02-2024
        </dt>
        <dd>
          J’ai arrêté cette série de billets très rapidement. J’y tiens. Je veux recréer de l’utopie et penser plus au monde possible qu’à celui qu’on est en train de construire. Le problème c’est que ces billets sont viciés à la base. Ils ne fonctionnent que par contraste avec ce qui est fait, ou pas fait, aujourd’hui. […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/processus-de-creation/pousses-de-pins.html">Pousses de pins</a>,
@@ -304,26 +334,6 @@
          — <a href="https://ynote.hk/">Fanny Cheung</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/veille/2024-02-07-llm-recherche-info-scientifique-valeur-ajoutee-incertaine.html">[Veille] LLM et recherche d’information scientifique : une valeur ajoutée encore incertaine</a>,
          07-02-2024
        </dt>
        <dd>
          http://musingsaboutlibrarianship.blogspot.com/2024/01/things-i-am-still-wondering-about.html Aaron Tay évoque l’usage de grands modèles de langue (la fameuse « intelligence artificielle générative ») pour augmenter les moteurs de recherche scientifique : c’est la Retrieval Augmented Generation (RAG), ou recherche sémantique (semantic search). Pour l’instant, sur le plan technique le processus…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/veille/2024-02-07-signes-marquage-le-cas-des-revisions.html">[Veille] Signes et marquage en édition : le cas des révisions</a>,
          07-02-2024
        </dt>
        <dd>
          http://blog.sens-public.org/marcellovitalirosati/revision.html Dans ce billet, Marcello Vitali-Rosati explique comment fonctionnaient les révisions (corrections, rectificatifs…) à l’époque pré-numérique, et surtout comment les logiciels de bureautique ont nivelé par le bas les savoir-faire liés à cette phase essentielle du travail éditorial. En le lisant, j’ai tout de suite pensé à deux de mes…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/">Trois réponses sur ma thèse</a>,
@@ -384,16 +394,6 @@
          — <a href="https://emmaclit.com/">Emma</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2023/12/27/vigipirate/">☕️ Journal : Vigipirate</a>,
          27-12-2023
        </dt>
        <dd>
          Dans le train, j’écoute une annonce, le genre de celle qu’on connait tellement qu’à l’instar d’un bloqueur de pub, on l’efface aussitôt.<
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://lalunemauve.fr/interview-mathyld-under-the-pyramids/">Interview de Mathyld (under the pyramids), artisane-créatrice de bijoux en argent</a>,
--- a/david/index.html
+++ b/david/index.html
@@ -426,6 +426,7 @@
  </style>
  <p>Liste des publications récentes en ordre anté-chronologique :</p>
  <p>
    <a href="/david/2024/03/08/" data-experience data-psychologie data-technique  title="Étiquettes : expérience, psychologie, technique.">Flow</a>,
    <a href="/david/2024/03/07/" data-commun data-deception data-web  title="Étiquettes : commun, déception, web.">Sondages</a>,
    <a href="/david/2024/03/06/" data-apprentissage data-parentalite data-protopie  title="Étiquettes : apprentissage, parentalité, protopie.">Vannerie</a>,
    <a href="/david/2024/03/05/" data-adaptation data-aventure data-psychologie  title="Étiquettes : adaptation, aventure, psychologie.">Jour&nbsp;2</a>,
@@ -515,7 +516,7 @@
    <a href="/david/2024/ecriture/" data-tag="ecriture" rel="tag">#écriture (7)</a>,
    <a href="/david/2024/equipe/" data-tag="equipe" rel="tag">#équipe (7)</a>,
    <a href="/david/2024/evolution/" data-tag="evolution" rel="tag">#évolution (7)</a>,
    <a href="/david/2024/experience/" data-tag="experience" rel="tag">#expérience (11)</a>,
    <a href="/david/2024/experience/" data-tag="experience" rel="tag">#expérience (12)</a>,
    <a href="/david/2024/fediverse/" data-tag="fediverse" rel="tag">#fédiverse (1)</a>,
    <a href="/david/2024/foret/" data-tag="foret" rel="tag">#forêt (7)</a>,
    <a href="/david/2024/gratitude/" data-tag="gratitude" rel="tag">#gratitude (3)</a>,
@@ -532,10 +533,10 @@
    <a href="/david/2024/processus/" data-tag="processus" rel="tag">#processus (10)</a>,
    <a href="/david/2024/propriete/" data-tag="propriete" rel="tag">#propriété (1)</a>,
    <a href="/david/2024/protopie/" data-tag="protopie" rel="tag">#protopie (7)</a>,
    <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (9)</a>,
    <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (10)</a>,
    <a href="/david/2024/solastalgia/" data-tag="solastalgia" rel="tag">#solastalgia (5)</a>,
    <a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (5)</a>,
    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (13)</a>,
    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (14)</a>,
    <a href="/david/2024/velo/" data-tag="velo" rel="tag">#vélo (1)</a>,
    <a href="/david/2024/web/" data-tag="web" rel="tag">#web (10)</a>.
      
--- a/david/log/index.xml
+++ b/david/log/index.xml
@@ -6,13 +6,41 @@
    <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-03-08T12:00:00+01:00</updated>
    <updated>2024-03-09T12: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">Flow</title>
            <link href="https://larlet.fr/david/2024/03/08/" rel="alternate" type="text/html" />
            <updated>2024-03-08T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/03/08/</id>
            <summary type="html">
 &lt;p&gt;Le &lt;a href=&quot;https://fr.wikipedia.org/wiki/Flow_(psychologie&quot;&gt;flow&lt;/a&gt;) n’est pas seulement un état où j’ai besoin de calme, il s’agit d’un contexte à part entière. Il me faut une problématique connue, qui est définie avec des contours relativement flous, davantage une intention qu’une direction. Si j’ai déjà eu l’occasion d’être précédemment frustré par l’implémentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n’étant pas devant un écran (en courant, sous la douche, etc), une forme d’&lt;em&gt;Eurêka&amp;#8239;!&lt;/em&gt; qui annonce la libération du &lt;em&gt;flow&lt;/em&gt; à&amp;nbsp;venir.&lt;/p&gt;
 &lt;p&gt;La crue monte et butte contre des digues techniques, plusieurs fois, avant de créer la brèche qui va tout libérer d’un coup et se répandre dans l’ensemble du code. Reste la tâche de &lt;em&gt;ressuyage&lt;/em&gt;&amp;nbsp;: &lt;q lang=&quot;fr&quot;&gt;l’évacuation des eaux qui se sont déversées dans les terres après une inondation et ainsi de diminuer le temps de submersion&lt;/q&gt; nous dit le &lt;a href=&quot;https://www.symadrem.fr/anticiper-intervenir/evacuation-des-eaux-post-crue/quest-ce-que-le-ressuyage/&quot;&gt;Symadrem&lt;/a&gt;. Ce n’est pas une tâche ingrate car c’est celle qui rend le code pérenne et compréhensible, l’objet du &lt;em&gt;flow&lt;/em&gt; accessible au plus grand nombre. Le temps de la décrue permet d’identifier les cas aux limites&amp;nbsp;également.&lt;/p&gt;
 &lt;p&gt;Ce contexte ne m’est atteignable que 3&amp;nbsp;ou 4&amp;nbsp;fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement&amp;nbsp;satisfaisant&amp;#8239;!).&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;CSS is a programming language because that’s what you’re doing when you write it; you’re &lt;em&gt;programming&lt;/em&gt; the application’s presentation logic. And that’s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you’d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any&amp;nbsp;CSS.)&lt;/p&gt;
 &lt;p&gt;In many ways, &lt;mark&gt;CSS has greater impact than any other language&lt;/mark&gt; on a user’s experience, which often directly influences success. Why, then, is its role so&amp;nbsp;belittled?&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://joshcollinsworth.com/blog/devaluing-frontend&quot;&gt;The quiet, pervasive devaluation of&amp;nbsp;frontend&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;J’aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centrée sur CSS car les avancées récentes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une réflexion importante. Ce langage exprime la complexité de nos interfaces et de notre évolution collective en terme d’exploration d’affordances. Les &lt;em&gt;patterns&lt;/em&gt;, ces façons de résoudre des problèmes similaires, évoluent et les personnes qui arrivent à suivre ces évolutions vont être de plus en plus sollicitées (j’en parlais &lt;a href=&quot;https://larlet.fr/david/2024/02/28/#hr-94&quot;&gt;par ici&lt;/a&gt;) — notamment lorsqu’il va falloir nettoyer 10&amp;nbsp;ans de&amp;nbsp;CSS-in-JS/Tailwind/YouNameIt.&lt;/p&gt;
 &lt;p&gt;Je n’ai pas la même considération pour ces personnes, &lt;strong&gt;j’en ai bien davantage&lt;/strong&gt;.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the &lt;code&gt;countClickable&lt;/code&gt; mixin for example), while both remain&amp;nbsp;reusable.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://lorenzofox.dev/posts/component-as-infinite-loop/&quot;&gt;Coroutines and web&amp;nbsp;components&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Je n’ai pas tout compris (et j’en suis à la seconde lecture) mais ça a l’air&amp;nbsp;fun&amp;#8239;!&amp;nbsp;😜&lt;/p&gt;
 &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/psychologie/&quot;&gt;#psychologie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&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">Sondages</title>
            <link href="https://larlet.fr/david/2024/03/07/" rel="alternate" type="text/html" />
@@ -1109,46 +1137,4 @@ etc.&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/equipe/&quot;&gt;#équipe&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/evolution/&quot;&gt;#évolution&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">Écureuil</title>
            <link href="https://larlet.fr/david/2024/02/07/" rel="alternate" type="text/html" />
            <updated>2024-02-07T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/02/07/</id>
            <summary type="html">
 &lt;p&gt;De bon matin, en me brossant les dents, l’écureuil dans un micro-sommeil après une nuit fraîche. Je le regarde avec un peu d’envie, je referme la fenêtre délicatement. Une minute plus tard, alors qu’il commençait à piquer dangereusement du nez, le voilà déjà&amp;nbsp;reparti.&lt;/p&gt;
 &lt;figure&gt;
    &lt;a href=&quot;https://larlet.fr/static/david/2024/2024-02-05-ecureuil-soleil.jpg&quot;
        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
        &lt;img
            src=&quot;https://larlet.fr/static/david/2024/2024-02-05-ecureuil-soleil.jpg&quot;
            width=&quot;3456&quot; height=&quot;2304&quot;
            srcset=&quot;/static/david/2024/2024-02-05-ecureuil-soleil.jpg 3456w, /static/david/2024/2024-02-05-ecureuil-soleil_660x440.jpg 660w, /static/david/2024/2024-02-05-ecureuil-soleil_990x660.jpg 990w, /static/david/2024/2024-02-05-ecureuil-soleil_1320x880.jpg 1320w&quot;
            sizes=&quot;min(100vw, calc(100vh * 3456 / 2304))&quot;
            loading=&quot;lazy&quot;
            decoding=&quot;async&quot;
            alt=&quot;Un écureuil endormi sur une branche.&quot;&gt;
    &lt;/a&gt;
    &lt;figcaption&gt;Un écureuil endormi sur une&amp;nbsp;branche.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;hr /&gt;
 &lt;p&gt;Une motivation importante de l’année est de réussir à économiser. C’est une chose que je n’ai jamais vraiment envisagé de faire jusqu’à présent. Si j’ai bien compris le principe actuel, chaque dollar accumulé est un dollar que je n’aurai pas à payer une &lt;em&gt;seconde&lt;/em&gt; fois à la&amp;nbsp;banque.&lt;/p&gt;
 &lt;p&gt;C’est stupide. Mais ça motive. Mais c’est&amp;nbsp;stupide.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;figure&gt;
    &lt;a href=&quot;https://larlet.fr/static/david/2024/2024-02-05-ecureuil-superhero.jpg&quot;
        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
        &lt;img
            src=&quot;https://larlet.fr/static/david/2024/2024-02-05-ecureuil-superhero.jpg&quot;
            width=&quot;3840&quot; height=&quot;2560&quot;
            srcset=&quot;/static/david/2024/2024-02-05-ecureuil-superhero.jpg 3840w, /static/david/2024/2024-02-05-ecureuil-superhero_660x440.jpg 660w, /static/david/2024/2024-02-05-ecureuil-superhero_990x660.jpg 990w, /static/david/2024/2024-02-05-ecureuil-superhero_1320x880.jpg 1320w&quot;
            sizes=&quot;min(100vw, calc(100vh * 3840 / 2560))&quot;
            loading=&quot;lazy&quot;
            decoding=&quot;async&quot;
            alt=&quot;Un écureuil en posture de super-héros·ïne.&quot;&gt;
    &lt;/a&gt;
    &lt;figcaption&gt;Un écureuil en posture de super-héros·ïne. (Iel a juste froid aux&amp;nbsp;pattes.)&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/decision/&quot;&gt;#décision&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/foret/&quot;&gt;#forêt&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/photographie/&quot;&gt;#photographie&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>
    
 </feed>
--- a/david/recherche/index.html
+++ b/david/recherche/index.html
@@ -276,6 +276,12 @@
    </template>
    
    <script id="search-index" type="application/json">[
  {
    "title": "Flow",
    "url": "/david/2024/03/08/",
    "date": "2024-03-08",
    "content": "Le flow) n\u2019est pas seulement un \u00e9tat o\u00f9 j\u2019ai besoin de calme, il s\u2019agit d\u2019un contexte \u00e0 part enti\u00e8re. Il me faut une probl\u00e9matique connue, qui est d\u00e9finie avec des contours relativement flous, davantage une intention qu\u2019une direction. Si j\u2019ai d\u00e9j\u00e0 eu l\u2019occasion d\u2019\u00eatre pr\u00e9c\u00e9demment frustr\u00e9 par l\u2019impl\u00e9mentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n\u2019\u00e9tant pas devant un \u00e9cran (en courant, sous la douche, etc), une forme d\u2019Eur\u00eaka\u202f! qui annonce la lib\u00e9ration du flow \u00e0\u00a0venir. La crue monte et butte contre des digues techniques, plusieurs fois, avant de cr\u00e9er la br\u00e8che qui va tout lib\u00e9rer d\u2019un coup et se r\u00e9pandre dans l\u2019ensemble du code. Reste la t\u00e2che de ressuyage\u00a0: l\u2019\u00e9vacuation des eaux qui se sont d\u00e9vers\u00e9es dans les terres apr\u00e8s une inondation et ainsi de diminuer le temps de submersion nous dit le Symadrem. Ce n\u2019est pas une t\u00e2che ingrate car c\u2019est celle qui rend le code p\u00e9renne et compr\u00e9hensible, l\u2019objet du flow accessible au plus grand nombre. Le temps de la d\u00e9crue permet d\u2019identifier les cas aux limites\u00a0\u00e9galement. Ce contexte ne m\u2019est atteignable que 3\u00a0ou 4\u00a0fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement\u00a0satisfaisant\u202f!). CSS is a programming language because that\u2019s what you\u2019re doing when you write it; you\u2019re programming the application\u2019s presentation logic. And that\u2019s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you\u2019d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any\u00a0CSS.) In many ways, CSS has greater impact than any other language on a user\u2019s experience, which often directly influences success. Why, then, is its role so\u00a0belittled? The quiet, pervasive devaluation of\u00a0frontend J\u2019aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centr\u00e9e sur CSS car les avanc\u00e9es r\u00e9centes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une r\u00e9flexion importante. Ce langage exprime la complexit\u00e9 de nos interfaces et de notre \u00e9volution collective en terme d\u2019exploration d\u2019affordances. Les patterns, ces fa\u00e7ons de r\u00e9soudre des probl\u00e8mes similaires, \u00e9voluent et les personnes qui arrivent \u00e0 suivre ces \u00e9volutions vont \u00eatre de plus en plus sollicit\u00e9es (j\u2019en parlais par ici) \u2014 notamment lorsqu\u2019il va falloir nettoyer 10\u00a0ans de\u00a0CSS-in-JS/Tailwind/YouNameIt. Je n\u2019ai pas la m\u00eame consid\u00e9ration pour ces personnes, j\u2019en ai bien davantage. So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the countClickable mixin for example), while both remain\u00a0reusable. Coroutines and web\u00a0components Je n\u2019ai pas tout compris (et j\u2019en suis \u00e0 la seconde lecture) mais \u00e7a a l\u2019air\u00a0fun\u202f!\u00a0\ud83d\ude1c"
  },
  {
    "title": "Sondages",
    "url": "/david/2024/03/07/",
@@ -678,6 +684,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": "Flow",
    "url": "/david/2024/03/08/",
    "date": "2024-03-08",
    "content": "Le flow) n\u2019est pas seulement un \u00e9tat o\u00f9 j\u2019ai besoin de calme, il s\u2019agit d\u2019un contexte \u00e0 part enti\u00e8re. Il me faut une probl\u00e9matique connue, qui est d\u00e9finie avec des contours relativement flous, davantage une intention qu\u2019une direction. Si j\u2019ai d\u00e9j\u00e0 eu l\u2019occasion d\u2019\u00eatre pr\u00e9c\u00e9demment frustr\u00e9 par l\u2019impl\u00e9mentation en cours, cela me donne beaucoup de motivation pour plonger. Parfois la zone est atteinte en n\u2019\u00e9tant pas devant un \u00e9cran (en courant, sous la douche, etc), une forme d\u2019Eur\u00eaka\u202f! qui annonce la lib\u00e9ration du flow \u00e0\u00a0venir. La crue monte et butte contre des digues techniques, plusieurs fois, avant de cr\u00e9er la br\u00e8che qui va tout lib\u00e9rer d\u2019un coup et se r\u00e9pandre dans l\u2019ensemble du code. Reste la t\u00e2che de ressuyage\u00a0: l\u2019\u00e9vacuation des eaux qui se sont d\u00e9vers\u00e9es dans les terres apr\u00e8s une inondation et ainsi de diminuer le temps de submersion nous dit le Symadrem. Ce n\u2019est pas une t\u00e2che ingrate car c\u2019est celle qui rend le code p\u00e9renne et compr\u00e9hensible, l\u2019objet du flow accessible au plus grand nombre. Le temps de la d\u00e9crue permet d\u2019identifier les cas aux limites\u00a0\u00e9galement. Ce contexte ne m\u2019est atteignable que 3\u00a0ou 4\u00a0fois par an en moyenne. Et heureusement, car il est vraiment peu soutenable (mais tellement\u00a0satisfaisant\u202f!). CSS is a programming language because that\u2019s what you\u2019re doing when you write it; you\u2019re programming the application\u2019s presentation logic. And that\u2019s important, because CSS has power enough to either maximize the useability of software, or to ruin it beyond all utility. (Really; you\u2019d probably be astounded how many ways there are to utterly destroy anything on the web with hardly any\u00a0CSS.) In many ways, CSS has greater impact than any other language on a user\u2019s experience, which often directly influences success. Why, then, is its role so\u00a0belittled? The quiet, pervasive devaluation of\u00a0frontend J\u2019aurais pu citer beaucoup de parties de cet article. Je choisis celle vraiment centr\u00e9e sur CSS car les avanc\u00e9es r\u00e9centes en font encore davantage un outil qui demande une grande connaissance du domaine, une veille active et une r\u00e9flexion importante. Ce langage exprime la complexit\u00e9 de nos interfaces et de notre \u00e9volution collective en terme d\u2019exploration d\u2019affordances. Les patterns, ces fa\u00e7ons de r\u00e9soudre des probl\u00e8mes similaires, \u00e9voluent et les personnes qui arrivent \u00e0 suivre ces \u00e9volutions vont \u00eatre de plus en plus sollicit\u00e9es (j\u2019en parlais par ici) \u2014 notamment lorsqu\u2019il va falloir nettoyer 10\u00a0ans de\u00a0CSS-in-JS/Tailwind/YouNameIt. Je n\u2019ai pas la m\u00eame consid\u00e9ration pour ces personnes, j\u2019en ai bien davantage. So far we have designed our component to be a function of the host. We can go further and ensure that the rendering routine is actually private to the host, so that the rendering code is encapsulated inside along with any potential behaviour enhancements (the countClickable mixin for example), while both remain\u00a0reusable. Coroutines and web\u00a0components Je n\u2019ai pas tout compris (et j\u2019en suis \u00e0 la seconde lecture) mais \u00e7a a l\u2019air\u00a0fun\u202f!\u00a0\ud83d\ude1c"
  },
  {
    "title": "Sondages",
    "url": "/david/2024/03/07/",