7 ay önce · b39665ed27
--- a/david/2024/04/17/index.html
+++ b/david/2024/04/17/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/04/18/"
            title="Publication suivante : Calme">Suivant →</a>
      
    </p>
  </nav>
  
@@ -275,6 +279,10 @@
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/04/18/"
            title="Publication suivante : Calme">Suivant →</a>
      
    </p>
  </nav>

--- a/david/2024/04/18/index.html
+++ b/david/2024/04/18/index.html
@@ -0,0 +1,558 @@
 <!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>
    Calme
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de route.">
  <!-- 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>Calme</h1>
      <p>Le <time datetime="2024-04-18">18 avril 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/04/17/"
           title="Publication précédente : Échelle">← 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 calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&nbsp;route.</p>
 <a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>

 <blockquote lang="en">
 <p>A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&nbsp;there.</p>
 <p><mark>By default, a calm company is profitable.</mark> Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&nbsp;storms.</p>
 <p>Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&nbsp;meetings.</p>
 <p>Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&nbsp;beach.</p>
 <p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"
            title="Consultation de l’article (anglais)">We need more calm companies</a>
            <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"
                data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."
                data-source="https://justinjackson.ca/calm-company"
                data-date="2024-04-18"
                data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"
                data-domain="justinjackson.ca"
                ><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>Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&nbsp;calme.</p>
 <a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>

 <blockquote lang="en">
 <p><code>Line-height</code> and <code>vertical-align</code> are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&nbsp;context.</p>
 <p><cite><em><a data-link-domain="iamvdo.me" href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" hreflang="en"
            title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>
            <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"
                data-tippy data-description="An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS."
                data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"
                data-date="2024-04-18"
                data-favicon="https://iamvdo.me/images/favicon.png"
                data-domain="iamvdo.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Centrer des éléments sur le web —&nbsp;<em>a fortiori</em> du texte&nbsp;— a toujours été compliqué. <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/centering/" hreflang="en"
            title="Consultation de l’article (anglais)">Voire impossible.</a>
            <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"
                data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"
                data-source="https://tonsky.me/blog/centering/"
                data-date="2024-04-18"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> Je me demande si des unités comme <code>rlh</code> on une chance de <a data-link-domain="pawelgrzybek.com" href="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/" hreflang="en"
            title="Consultation de l’article (anglais)">changer des choses</a>
            <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"
                data-tippy data-description="Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base."
                data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"
                data-date="2024-04-18"
                data-favicon="https://pawelgrzybek.com/icon.svg"
                data-domain="pawelgrzybek.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> à ce&nbsp;sujet.</p>
 <p>Je vous ai déjà dit que <a data-link-domain="moderncss.dev" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" hreflang="en"
            title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>
            <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"
                data-tippy data-description="Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques."
                data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"
                data-date="2024-04-18"
                data-favicon="https://moderncss.dev/favicon.png"
                data-domain="moderncss.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> Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&nbsp;ça&nbsp;😮.</p>
 <a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>

 <blockquote lang="en">
 <p>What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, <mark>it’s usually because we’ve JavaScript’ed our way out of these&nbsp;things.</mark></p>
 <p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>
 <p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"
            title="Consultation de l’article (anglais)">Just normal web things.</a>
            <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"
                data-tippy data-description="A plea for us to get back to building websites that can do normal website things."
                data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"
                data-date="2024-04-18"
                data-favicon="https://heather-buchel.com/icon.svg"
                data-domain="heather-buchel.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>Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&nbsp;rare.</p>
 <a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>

 <blockquote lang="en">
 <p>It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And <mark>most product orgs suck because they simply don’t use the products that they’re building;</mark> they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>
 <p>See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&nbsp;clearly.</p>
 <p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"
            title="Consultation de l’article (anglais)">Vibe Driven Development</a>
            <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"
                data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."
                data-source="https://robinrendle.com/notes/vibe-driven-development/"
                data-date="2024-04-18"
                data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"
                data-domain="robinrendle.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>Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des <a href="/david/2024/04/17/" title="Échelle">évènements</a> que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&nbsp;domaine.</p>
 <a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>

 <blockquote lang="en">
 <p>I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, <mark>eventually ending up with an AI system that writes slightly like an&nbsp;African.</mark></p>
 <p><cite><em><a data-link-domain="theguardian.com" href="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt" hreflang="en"
            title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>
            <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"
                data-tippy data-description="Workers in Africa have been exploited first by being paid a pittance to help make chatbots, then by having their own words become AI-ese. Plus, new AI gadgets are coming for your smartphones"
                data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"
                data-date="2024-04-18"
                data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"
                data-domain="theguardian.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>On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&nbsp;🍿.</p>
 <p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"
            title="Consultation de l’article (anglais)">Simon Willison</a>
            <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"
                data-tippy data-description="The word  delve  has been getting a lot of attention recently as an example of something that might be an indicator of ChatGPT generated content. One example: articles on medical …"
                data-source="https://simonwillison.net/2024/Apr/18/delve/"
                data-date="2024-04-18"
                data-favicon="https://simonwillison.net/favicon.ico"
                data-domain="simonwillison.net"
                ><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></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/introspection/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#introspection</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/04/17/"
           title="Publication précédente : Échelle">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
    </p>
  </nav>

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

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

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

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

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

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

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

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

  </body>
 </html>
--- a/david/2024/_sources/2024-04-18
+++ b/david/2024/_sources/2024-04-18
@@ -0,0 +1,59 @@
 # Calme

 Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de route.

 ---

 > [en] A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work there.
 >
 > ==By default, a calm company is profitable.== Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic storms.
 >
 > Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in meetings.
 >
 > Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the beach.
 > 
 > <cite>*[We need more calm companies](https://justinjackson.ca/calm-company)*</cite>

 Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester calme.

 ---

 > [en] `Line-height` and `vertical-align` are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting context.
 > 
 > <cite>*[Deep dive CSS: font metrics, line-height and vertical-align](https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align)*</cite>

 Centrer des éléments sur le web — *a fortiori* du texte — a toujours été compliqué. [Voire impossible.](https://tonsky.me/blog/centering/) Je me demande si des unités comme `rlh` on une chance de [changer des choses](https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/) à ce sujet.

 Je vous ai déjà dit que [les CSS c’était devenu génial ?](https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/) Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout ça 😮.

 ---

 > [en] What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, ==it’s usually because we’ve JavaScript’ed our way out of these things.==
 >
 > Here are some things I wish people allowed to continue to work in their web projects:
 >
 > <cite>*[Just normal web things.](https://heather-buchel.com/blog/2023/07/just-normal-web-things/)*</cite>

 Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très rare.

 ---

 > [en] It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And ==most product orgs suck because they simply don’t use the products that they’re building;== they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data nothings.
 > 
 > See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world clearly.
 > 
 > <cite>*[Vibe Driven Development](https://robinrendle.com/notes/vibe-driven-development/)*</cite>

 Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des [évènements](/david/2024/04/17/) que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce domaine.

 ---

 > [en] I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, ==eventually ending up with an AI system that writes slightly like an African.==
 > 
 > <cite>*[TechScape: How cheap, outsourced labour in Africa is shaping AI English](https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt)*</cite>

 On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet 🍿.

 *Via [Simon Willison](https://simonwillison.net/2024/Apr/18/delve/).*

 #apprentissage #introspection #technique 
--- a/david/2024/apprentissage/index.html
+++ b/david/2024/apprentissage/index.html
@@ -134,6 +134,210 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/04/18/" title="Lien permanent vers cet article">Calme</a> <time datetime="2024-04-18">18 avril 2024</time>
    </h2>
    
 <p>Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&nbsp;route.</p>
 <a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>

 <blockquote lang="en">
 <p>A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&nbsp;there.</p>
 <p><mark>By default, a calm company is profitable.</mark> Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&nbsp;storms.</p>
 <p>Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&nbsp;meetings.</p>
 <p>Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&nbsp;beach.</p>
 <p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"
            title="Consultation de l’article (anglais)">We need more calm companies</a>
            <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"
                data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."
                data-source="https://justinjackson.ca/calm-company"
                data-date="2024-04-18"
                data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"
                data-domain="justinjackson.ca"
                ><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>Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&nbsp;calme.</p>
 <a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>

 <blockquote lang="en">
 <p><code>Line-height</code> and <code>vertical-align</code> are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&nbsp;context.</p>
 <p><cite><em><a data-link-domain="iamvdo.me" href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" hreflang="en"
            title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>
            <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"
                data-tippy data-description="An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS."
                data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"
                data-date="2024-04-18"
                data-favicon="https://iamvdo.me/images/favicon.png"
                data-domain="iamvdo.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Centrer des éléments sur le web —&nbsp;<em>a fortiori</em> du texte&nbsp;— a toujours été compliqué. <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/centering/" hreflang="en"
            title="Consultation de l’article (anglais)">Voire impossible.</a>
            <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"
                data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"
                data-source="https://tonsky.me/blog/centering/"
                data-date="2024-04-18"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> Je me demande si des unités comme <code>rlh</code> on une chance de <a data-link-domain="pawelgrzybek.com" href="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/" hreflang="en"
            title="Consultation de l’article (anglais)">changer des choses</a>
            <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"
                data-tippy data-description="Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base."
                data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"
                data-date="2024-04-18"
                data-favicon="https://pawelgrzybek.com/icon.svg"
                data-domain="pawelgrzybek.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> à ce&nbsp;sujet.</p>
 <p>Je vous ai déjà dit que <a data-link-domain="moderncss.dev" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" hreflang="en"
            title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>
            <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"
                data-tippy data-description="Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques."
                data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"
                data-date="2024-04-18"
                data-favicon="https://moderncss.dev/favicon.png"
                data-domain="moderncss.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> Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&nbsp;ça&nbsp;😮.</p>
 <a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>

 <blockquote lang="en">
 <p>What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, <mark>it’s usually because we’ve JavaScript’ed our way out of these&nbsp;things.</mark></p>
 <p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>
 <p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"
            title="Consultation de l’article (anglais)">Just normal web things.</a>
            <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"
                data-tippy data-description="A plea for us to get back to building websites that can do normal website things."
                data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"
                data-date="2024-04-18"
                data-favicon="https://heather-buchel.com/icon.svg"
                data-domain="heather-buchel.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>Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&nbsp;rare.</p>
 <a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>

 <blockquote lang="en">
 <p>It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And <mark>most product orgs suck because they simply don’t use the products that they’re building;</mark> they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>
 <p>See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&nbsp;clearly.</p>
 <p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"
            title="Consultation de l’article (anglais)">Vibe Driven Development</a>
            <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"
                data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."
                data-source="https://robinrendle.com/notes/vibe-driven-development/"
                data-date="2024-04-18"
                data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"
                data-domain="robinrendle.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>Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des <a href="/david/2024/04/17/" title="Échelle">évènements</a> que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&nbsp;domaine.</p>
 <a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>

 <blockquote lang="en">
 <p>I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, <mark>eventually ending up with an AI system that writes slightly like an&nbsp;African.</mark></p>
 <p><cite><em><a data-link-domain="theguardian.com" href="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt" hreflang="en"
            title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>
            <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"
                data-tippy data-description="Workers in Africa have been exploited first by being paid a pittance to help make chatbots, then by having their own words become AI-ese. Plus, new AI gadgets are coming for your smartphones"
                data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"
                data-date="2024-04-18"
                data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"
                data-domain="theguardian.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>On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&nbsp;🍿.</p>
 <p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"
            title="Consultation de l’article (anglais)">Simon Willison</a>
            <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"
                data-tippy data-description="The word  delve  has been getting a lot of attention recently as an example of something that might be an indicator of ChatGPT generated content. One example: articles on medical …"
                data-source="https://simonwillison.net/2024/Apr/18/delve/"
                data-date="2024-04-18"
                data-favicon="https://simonwillison.net/favicon.ico"
                data-domain="simonwillison.net"
                ><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></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/introspection/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#introspection</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/26/" title="Lien permanent vers cet article">GPX Viewer</a> <time datetime="2024-03-26">26 mars 2024</time>
    </h2>
--- a/david/2024/index.html
+++ b/david/2024/index.html
@@ -238,7 +238,8 @@
      <a href="/david/2024/04/10/">Weird</a>, 
      <a href="/david/2024/04/13/">Fondation</a>, 
      <a href="/david/2024/04/14/">Apex 2</a>, 
      <a href="/david/2024/04/17/">Échelle</a>.
      <a href="/david/2024/04/17/">Échelle</a>, 
      <a href="/david/2024/04/18/">Calme</a>.
      
    </p>
  
@@ -249,7 +250,7 @@
      <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (2)</a>, 
      <a href="/david/2024/adaptation/" rel="tag">#adaptation (3)</a>, 
      <a href="/david/2024/addiction/" rel="tag">#addiction (5)</a>, 
      <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (16)</a>, 
      <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (17)</a>, 
      <a href="/david/2024/aventure/" rel="tag">#aventure (4)</a>, 
      <a href="/david/2024/cinema/" rel="tag">#cinéma (1)</a>, 
      <a href="/david/2024/commun/" rel="tag">#commun (12)</a>, 
@@ -272,6 +273,7 @@
      <a href="/david/2024/gratitude/" rel="tag">#gratitude (4)</a>, 
      <a href="/david/2024/ia/" rel="tag">#IA (3)</a>, 
      <a href="/david/2024/identite/" rel="tag">#identité (1)</a>, 
      <a href="/david/2024/introspection/" rel="tag">#introspection (1)</a>, 
      <a href="/david/2024/laboratoire/" rel="tag">#laboratoire (5)</a>, 
      <a href="/david/2024/lecture/" rel="tag">#lecture (6)</a>, 
      <a href="/david/2024/liens/" rel="tag">#liens (1)</a>, 
@@ -288,7 +290,7 @@
      <a href="/david/2024/psychologie/" rel="tag">#psychologie (14)</a>, 
      <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (5)</a>, 
      <a href="/david/2024/sport/" rel="tag">#sport (8)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (22)</a>, 
      <a href="/david/2024/technique/" rel="tag">#technique (23)</a>, 
      <a href="/david/2024/velo/" rel="tag">#vélo (1)</a>, 
      <a href="/david/2024/web/" rel="tag">#web (14)</a>.
      
--- a/david/2024/introspection/index.html
+++ b/david/2024/introspection/index.html
@@ -0,0 +1,479 @@
 <!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>
    Étiquette #introspection
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Publications relatives au tag #introspection">
  <!-- 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">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#introspection</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/04/18/" title="Lien permanent vers cet article">Calme</a> <time datetime="2024-04-18">18 avril 2024</time>
    </h2>
    
 <p>Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&nbsp;route.</p>
 <a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>

 <blockquote lang="en">
 <p>A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&nbsp;there.</p>
 <p><mark>By default, a calm company is profitable.</mark> Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&nbsp;storms.</p>
 <p>Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&nbsp;meetings.</p>
 <p>Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&nbsp;beach.</p>
 <p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"
            title="Consultation de l’article (anglais)">We need more calm companies</a>
            <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"
                data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."
                data-source="https://justinjackson.ca/calm-company"
                data-date="2024-04-18"
                data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"
                data-domain="justinjackson.ca"
                ><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>Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&nbsp;calme.</p>
 <a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>

 <blockquote lang="en">
 <p><code>Line-height</code> and <code>vertical-align</code> are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&nbsp;context.</p>
 <p><cite><em><a data-link-domain="iamvdo.me" href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" hreflang="en"
            title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>
            <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"
                data-tippy data-description="An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS."
                data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"
                data-date="2024-04-18"
                data-favicon="https://iamvdo.me/images/favicon.png"
                data-domain="iamvdo.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Centrer des éléments sur le web —&nbsp;<em>a fortiori</em> du texte&nbsp;— a toujours été compliqué. <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/centering/" hreflang="en"
            title="Consultation de l’article (anglais)">Voire impossible.</a>
            <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"
                data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"
                data-source="https://tonsky.me/blog/centering/"
                data-date="2024-04-18"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> Je me demande si des unités comme <code>rlh</code> on une chance de <a data-link-domain="pawelgrzybek.com" href="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/" hreflang="en"
            title="Consultation de l’article (anglais)">changer des choses</a>
            <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"
                data-tippy data-description="Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base."
                data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"
                data-date="2024-04-18"
                data-favicon="https://pawelgrzybek.com/icon.svg"
                data-domain="pawelgrzybek.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> à ce&nbsp;sujet.</p>
 <p>Je vous ai déjà dit que <a data-link-domain="moderncss.dev" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" hreflang="en"
            title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>
            <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"
                data-tippy data-description="Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques."
                data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"
                data-date="2024-04-18"
                data-favicon="https://moderncss.dev/favicon.png"
                data-domain="moderncss.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> Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&nbsp;ça&nbsp;😮.</p>
 <a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>

 <blockquote lang="en">
 <p>What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, <mark>it’s usually because we’ve JavaScript’ed our way out of these&nbsp;things.</mark></p>
 <p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>
 <p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"
            title="Consultation de l’article (anglais)">Just normal web things.</a>
            <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"
                data-tippy data-description="A plea for us to get back to building websites that can do normal website things."
                data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"
                data-date="2024-04-18"
                data-favicon="https://heather-buchel.com/icon.svg"
                data-domain="heather-buchel.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>Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&nbsp;rare.</p>
 <a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>

 <blockquote lang="en">
 <p>It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And <mark>most product orgs suck because they simply don’t use the products that they’re building;</mark> they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>
 <p>See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&nbsp;clearly.</p>
 <p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"
            title="Consultation de l’article (anglais)">Vibe Driven Development</a>
            <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"
                data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."
                data-source="https://robinrendle.com/notes/vibe-driven-development/"
                data-date="2024-04-18"
                data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"
                data-domain="robinrendle.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>Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des <a href="/david/2024/04/17/" title="Échelle">évènements</a> que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&nbsp;domaine.</p>
 <a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>

 <blockquote lang="en">
 <p>I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, <mark>eventually ending up with an AI system that writes slightly like an&nbsp;African.</mark></p>
 <p><cite><em><a data-link-domain="theguardian.com" href="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt" hreflang="en"
            title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>
            <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"
                data-tippy data-description="Workers in Africa have been exploited first by being paid a pittance to help make chatbots, then by having their own words become AI-ese. Plus, new AI gadgets are coming for your smartphones"
                data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"
                data-date="2024-04-18"
                data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"
                data-domain="theguardian.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>On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&nbsp;🍿.</p>
 <p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"
            title="Consultation de l’article (anglais)">Simon Willison</a>
            <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"
                data-tippy data-description="The word  delve  has been getting a lot of attention recently as an example of something that might be an indicator of ChatGPT generated content. One example: articles on medical …"
                data-source="https://simonwillison.net/2024/Apr/18/delve/"
                data-date="2024-04-18"
                data-favicon="https://simonwillison.net/favicon.ico"
                data-domain="simonwillison.net"
                ><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></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/introspection/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#introspection</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>
    
  

      
        <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>
    
  </body>
 </html>
--- a/david/2024/technique/index.html
+++ b/david/2024/technique/index.html
@@ -134,6 +134,210 @@
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/04/18/" title="Lien permanent vers cet article">Calme</a> <time datetime="2024-04-18">18 avril 2024</time>
    </h2>
    
 <p>Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&nbsp;route.</p>
 <a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>

 <blockquote lang="en">
 <p>A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&nbsp;there.</p>
 <p><mark>By default, a calm company is profitable.</mark> Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&nbsp;storms.</p>
 <p>Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&nbsp;meetings.</p>
 <p>Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&nbsp;beach.</p>
 <p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"
            title="Consultation de l’article (anglais)">We need more calm companies</a>
            <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"
                data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."
                data-source="https://justinjackson.ca/calm-company"
                data-date="2024-04-18"
                data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"
                data-domain="justinjackson.ca"
                ><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>Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&nbsp;calme.</p>
 <a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>

 <blockquote lang="en">
 <p><code>Line-height</code> and <code>vertical-align</code> are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&nbsp;context.</p>
 <p><cite><em><a data-link-domain="iamvdo.me" href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" hreflang="en"
            title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>
            <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"
                data-tippy data-description="An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS."
                data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"
                data-date="2024-04-18"
                data-favicon="https://iamvdo.me/images/favicon.png"
                data-domain="iamvdo.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
 </blockquote>
 <p>Centrer des éléments sur le web —&nbsp;<em>a fortiori</em> du texte&nbsp;— a toujours été compliqué. <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/centering/" hreflang="en"
            title="Consultation de l’article (anglais)">Voire impossible.</a>
            <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"
                data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"
                data-source="https://tonsky.me/blog/centering/"
                data-date="2024-04-18"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> Je me demande si des unités comme <code>rlh</code> on une chance de <a data-link-domain="pawelgrzybek.com" href="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/" hreflang="en"
            title="Consultation de l’article (anglais)">changer des choses</a>
            <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"
                data-tippy data-description="Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base."
                data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"
                data-date="2024-04-18"
                data-favicon="https://pawelgrzybek.com/icon.svg"
                data-domain="pawelgrzybek.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> à ce&nbsp;sujet.</p>
 <p>Je vous ai déjà dit que <a data-link-domain="moderncss.dev" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" hreflang="en"
            title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>
            <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"
                data-tippy data-description="Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques."
                data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"
                data-date="2024-04-18"
                data-favicon="https://moderncss.dev/favicon.png"
                data-domain="moderncss.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> Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&nbsp;ça&nbsp;😮.</p>
 <a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>

 <blockquote lang="en">
 <p>What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, <mark>it’s usually because we’ve JavaScript’ed our way out of these&nbsp;things.</mark></p>
 <p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>
 <p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"
            title="Consultation de l’article (anglais)">Just normal web things.</a>
            <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"
                data-tippy data-description="A plea for us to get back to building websites that can do normal website things."
                data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"
                data-date="2024-04-18"
                data-favicon="https://heather-buchel.com/icon.svg"
                data-domain="heather-buchel.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>Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&nbsp;rare.</p>
 <a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>

 <blockquote lang="en">
 <p>It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And <mark>most product orgs suck because they simply don’t use the products that they’re building;</mark> they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>
 <p>See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&nbsp;clearly.</p>
 <p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"
            title="Consultation de l’article (anglais)">Vibe Driven Development</a>
            <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"
                data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."
                data-source="https://robinrendle.com/notes/vibe-driven-development/"
                data-date="2024-04-18"
                data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"
                data-domain="robinrendle.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>Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des <a href="/david/2024/04/17/" title="Échelle">évènements</a> que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&nbsp;domaine.</p>
 <a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>

 <blockquote lang="en">
 <p>I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, <mark>eventually ending up with an AI system that writes slightly like an&nbsp;African.</mark></p>
 <p><cite><em><a data-link-domain="theguardian.com" href="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt" hreflang="en"
            title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>
            <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"
                data-tippy data-description="Workers in Africa have been exploited first by being paid a pittance to help make chatbots, then by having their own words become AI-ese. Plus, new AI gadgets are coming for your smartphones"
                data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"
                data-date="2024-04-18"
                data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"
                data-domain="theguardian.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>On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&nbsp;🍿.</p>
 <p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"
            title="Consultation de l’article (anglais)">Simon Willison</a>
            <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"
                data-tippy data-description="The word  delve  has been getting a lot of attention recently as an example of something that might be an indicator of ChatGPT generated content. One example: articles on medical …"
                data-source="https://simonwillison.net/2024/Apr/18/delve/"
                data-date="2024-04-18"
                data-favicon="https://simonwillison.net/favicon.ico"
                data-domain="simonwillison.net"
                ><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></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/introspection/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#introspection</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/04/07/" title="Lien permanent vers cet article">Piscine</a> <time datetime="2024-04-07">7 avril 2024</time>
    </h2>
--- a/david/index.html
+++ b/david/index.html
@@ -332,6 +332,13 @@
        background-color: var(--hover-tag-color);
      }
    
      body [data-tag="introspection"]:hover,
      body [data-introspection]:hover,
      body:has([data-tag="introspection"]:hover) [data-introspection],
      body:has([data-introspection]:hover) [data-tag="introspection"] {
        background-color: var(--hover-tag-color);
      }
    
      body [data-tag="laboratoire"]:hover,
      body [data-laboratoire]:hover,
      body:has([data-tag="laboratoire"]:hover) [data-laboratoire],
@@ -468,6 +475,7 @@
  </style>
  <p>Liste des publications récentes en ordre anté-chronologique :</p>
  <p>
    <a href="/david/2024/04/18/" data-apprentissage data-introspection data-technique  title="Étiquettes : apprentissage, introspection, technique.">Calme</a>,
    <a href="/david/2024/04/17/" data-commun data-decentralisation data-protopie  title="Étiquettes : commun, décentralisation, protopie.">Échelle</a>,
    <a href="/david/2024/04/14/" data-enthousiasme data-laboratoire data-sport  title="Étiquettes : enthousiasme, laboratoire, sport.">Apex 2</a>,
    <a href="/david/2024/04/13/" data-dystopie data-lecture data-psychologie  title="Étiquettes : dystopie, lecture, psychologie.">Fondation</a>,
@@ -572,7 +580,7 @@
    <a href="/david/2024/accompagnement/" data-tag="accompagnement" rel="tag">#accompagnement (2)</a>,
    <a href="/david/2024/adaptation/" data-tag="adaptation" rel="tag">#adaptation (3)</a>,
    <a href="/david/2024/addiction/" data-tag="addiction" rel="tag">#addiction (5)</a>,
    <a href="/david/2024/apprentissage/" data-tag="apprentissage" rel="tag">#apprentissage (16)</a>,
    <a href="/david/2024/apprentissage/" data-tag="apprentissage" rel="tag">#apprentissage (17)</a>,
    <a href="/david/2024/aventure/" data-tag="aventure" rel="tag">#aventure (4)</a>,
    <a href="/david/2024/cinema/" data-tag="cinema" rel="tag">#cinéma (1)</a>,
    <a href="/david/2024/commun/" data-tag="commun" rel="tag">#commun (12)</a>,
@@ -595,6 +603,7 @@
    <a href="/david/2024/gratitude/" data-tag="gratitude" rel="tag">#gratitude (4)</a>,
    <a href="/david/2024/ia/" data-tag="ia" rel="tag">#IA (3)</a>,
    <a href="/david/2024/identite/" data-tag="identite" rel="tag">#identité (1)</a>,
    <a href="/david/2024/introspection/" data-tag="introspection" rel="tag">#introspection (1)</a>,
    <a href="/david/2024/laboratoire/" data-tag="laboratoire" rel="tag">#laboratoire (5)</a>,
    <a href="/david/2024/lecture/" data-tag="lecture" rel="tag">#lecture (6)</a>,
    <a href="/david/2024/liens/" data-tag="liens" rel="tag">#liens (1)</a>,
@@ -611,7 +620,7 @@
    <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (14)</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 (8)</a>,
    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (22)</a>,
    <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (23)</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 (14)</a>.
      
--- a/david/log/index.xml
+++ b/david/log/index.xml
@@ -6,13 +6,65 @@
    <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-04-18T12:00:00+01:00</updated>
    <updated>2024-04-19T12: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">Calme</title>
            <link href="https://larlet.fr/david/2024/04/18/" rel="alternate" type="text/html" />
            <updated>2024-04-18T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/04/18/</id>
            <summary type="html">
 &lt;p&gt;Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&amp;nbsp;route.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&amp;nbsp;there.&lt;/p&gt;
 &lt;p&gt;&lt;mark&gt;By default, a calm company is profitable.&lt;/mark&gt; Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&amp;nbsp;storms.&lt;/p&gt;
 &lt;p&gt;Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&amp;nbsp;meetings.&lt;/p&gt;
 &lt;p&gt;Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&amp;nbsp;beach.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://justinjackson.ca/calm-company&quot;&gt;We need more calm&amp;nbsp;companies&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&amp;nbsp;calme.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;&lt;code&gt;Line-height&lt;/code&gt; and &lt;code&gt;vertical-align&lt;/code&gt; are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&amp;nbsp;context.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align&quot;&gt;Deep dive CSS: font metrics, line-height and&amp;nbsp;vertical-align&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Centrer des éléments sur le web —&amp;nbsp;&lt;em&gt;a fortiori&lt;/em&gt; du texte&amp;nbsp;— a toujours été compliqué. &lt;a href=&quot;https://tonsky.me/blog/centering/&quot;&gt;Voire impossible.&lt;/a&gt; Je me demande si des unités comme &lt;code&gt;rlh&lt;/code&gt; on une chance de &lt;a href=&quot;https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/&quot;&gt;changer des choses&lt;/a&gt; à ce&amp;nbsp;sujet.&lt;/p&gt;
 &lt;p&gt;Je vous ai déjà dit que &lt;a href=&quot;https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/&quot;&gt;les CSS c’était devenu génial&amp;#8239;?&lt;/a&gt; Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&amp;nbsp;ça&amp;nbsp;😮.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, &lt;mark&gt;it’s usually because we’ve JavaScript’ed our way out of these&amp;nbsp;things.&lt;/mark&gt;&lt;/p&gt;
 &lt;p&gt;Here are some things I wish people allowed to continue to work in their web&amp;nbsp;projects:&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://heather-buchel.com/blog/2023/07/just-normal-web-things/&quot;&gt;Just normal web&amp;nbsp;things.&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&amp;nbsp;rare.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And &lt;mark&gt;most product orgs suck because they simply don’t use the products that they’re building;&lt;/mark&gt; they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&amp;nbsp;nothings.&lt;/p&gt;
 &lt;p&gt;See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&amp;nbsp;clearly.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://robinrendle.com/notes/vibe-driven-development/&quot;&gt;Vibe Driven&amp;nbsp;Development&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Je voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des &lt;a href=&quot;https://larlet.fr/david/2024/04/17/&quot;&gt;évènements&lt;/a&gt; que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&amp;nbsp;domaine.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, &lt;mark&gt;eventually ending up with an AI system that writes slightly like an&amp;nbsp;African.&lt;/mark&gt;&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt&quot;&gt;TechScape: How cheap, outsourced labour in Africa is shaping AI&amp;nbsp;English&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&amp;nbsp;🍿.&lt;/p&gt;
 &lt;p&gt;&lt;em&gt;Via &lt;a href=&quot;https://simonwillison.net/2024/Apr/18/delve/&quot;&gt;Simon Willison&lt;/a&gt;.&lt;/em&gt;&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/introspection/&quot;&gt;#introspection&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">Échelle</title>
            <link href="https://larlet.fr/david/2024/04/17/" rel="alternate" type="text/html" />
@@ -1284,60 +1336,4 @@ Lovée dans mes&amp;nbsp;bras&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/commun/&quot;&gt;#commun&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/deception/&quot;&gt;#déception&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">
            <title type="html">Vannerie</title>
            <link href="https://larlet.fr/david/2024/03/06/" rel="alternate" type="text/html" />
            <updated>2024-03-06T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/03/06/</id>
            <summary type="html">
 &lt;p&gt;L’atelier du jour était une initiation à la vannerie, cette fois-ci avec / pour l’enfant. Depuis le temps qu’il veut m’accompagner, j’ai sauté sur l’occasion lorsqu’une animatrice d’atelier — ancienne enseignante, ça doit jouer&amp;nbsp;— acceptât les personnes de son&amp;nbsp;âge.&lt;/p&gt;
 &lt;figure&gt;
    &lt;a href=&quot;https://larlet.fr/static/david/2024/2024-03-06-vannerie-panier.jpg&quot;
        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
        &lt;img
            src=&quot;https://larlet.fr/static/david/2024/2024-03-06-vannerie-panier.jpg&quot;
            width=&quot;4032&quot; height=&quot;3024&quot;
            srcset=&quot;/static/david/2024/2024-03-06-vannerie-panier.jpg 4032w, /static/david/2024/2024-03-06-vannerie-panier_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-panier_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-panier_1320x880.jpg 1320w&quot;
            sizes=&quot;min(100vw, calc(100vh * 4032 / 3024))&quot;
            loading=&quot;lazy&quot;
            decoding=&quot;async&quot;
            alt=&quot;Un panier en vannerie.&quot;&gt;
    &lt;/a&gt;
    &lt;figcaption&gt;Un panier en vannerie, ça m’a pris&amp;nbsp;2h30.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Le &lt;em&gt;twist&lt;/em&gt;, c’est que j’ai pu le faire aussi vu que nous étions les seuls présents pour la session au final. Autant dire qu’avec un cours particulier on a pu apprendre encore plus de choses&amp;#8239;! Sur un spectre allant des techniques d’assouplissement à l’appropriation culturelle, on a passé un bon moment d’échanges. J’ai appris que la préparation du frêne noir utilisé dans la vannerie par les Premières Nations prend plusieurs mois, ce qui explique sa rareté (et son&amp;nbsp;prix).&lt;/p&gt;
 &lt;figure&gt;
    &lt;a href=&quot;https://larlet.fr/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg&quot;
        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
        &lt;img
            src=&quot;https://larlet.fr/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg&quot;
            width=&quot;3024&quot; height=&quot;4032&quot;
            srcset=&quot;/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg 3024w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_1320x880.jpg 1320w&quot;
            sizes=&quot;min(100vw, calc(100vh * 3024 / 4032))&quot;
            loading=&quot;lazy&quot;
            decoding=&quot;async&quot;
            alt=&quot;Un sac à dos en vannerie.&quot;&gt;
    &lt;/a&gt;
    &lt;figcaption&gt;Un sac à dos en vannerie sur le dos de&amp;nbsp;l’enfant.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Toujours cette sensation de créer des objets utiles à partir de pas grand chose et avec un minimum de&amp;nbsp;matériel.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;Like Stimulus, but &lt;em&gt;a lot&lt;/em&gt; smaller and a bit more&amp;nbsp;webcomponenty?&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://github.com/johanhalse/musculus&quot;&gt;Musculus&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Découverte du jour que je trouve très inspirante. J’avais dans un coin de tête de tester des choses dans cette voie. Réussir à faire le pont entre les deux serait une très bonne combinaison. J’apprécie qu’une solution de test soit proposée, même si elle est légère (en terme de fiabilité) j’en peux plus d’attendre&amp;nbsp;Playwright.&lt;/p&gt;
 &lt;hr /&gt;

 &lt;blockquote&gt;
 &lt;p&gt;End the battle. Use &lt;code&gt;infinity&lt;/code&gt; to get the highest possible &lt;code&gt;z-index&lt;/code&gt; and win&amp;nbsp;forever.&lt;/p&gt;
 &lt;p&gt;[…]&lt;/p&gt;
 &lt;p&gt;But is &lt;code&gt;infinity&lt;/code&gt; really any better than some arbitrarily big value like &lt;code&gt;9999px&lt;/code&gt;? Functionally, no. Same end result. But I think &lt;mark&gt;it does help make code more self-documenting,&lt;/mark&gt; because &lt;code&gt;infinity&lt;/code&gt; conveys intent. It expresses that it’s all about the magnitude, not a specific magic&amp;nbsp;number.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://codersblock.com/blog/playing-with-infinity-in-css/&quot;&gt;Playing with Infinity in&amp;nbsp;CSS&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Autre découverte du jour. J’aime bien l’idée de pouvoir évacuer certaines valeurs magiques de manière explicite. J’ai la flemme de tester ce qu’un &lt;code&gt;calc(infinity - 1)&lt;/code&gt; donnerait sur un &lt;code&gt;z-index&lt;/code&gt;&amp;nbsp;🤭.&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/parentalite/&quot;&gt;#parentalité&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>
    
 </feed>
--- a/david/recherche/index.html
+++ b/david/recherche/index.html