10 months ago · f824cd4403
--- a/david/2024/01/10/index.html
+++ b/david/2024/01/10/index.html
@@ -129,6 +129,10 @@
             rel="search">Recherche</a>
        </nobr>
        
          • <a rel="next"
    href="/david/2024/01/11/"
    title="Publication suivante : Impact">Suivant →</a>
        
      </p>
    </nav>
    
@@ -219,6 +223,10 @@
        
        <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
        
          • <a rel="next"
    href="/david/2024/01/11/"
    title="Publication suivante : Impact">Suivant →</a>
        
      </p>
    </nav>
    <aside>
--- a/david/2024/01/11/index.html
+++ b/david/2024/01/11/index.html
@@ -0,0 +1,332 @@
 <!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>
    Impact
  — David Larlet</title>
  <meta name="description" content="If front web developers work closer to the users’ needs and problems, if they feel more implicated in the user experience, they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
  <body data-instant-intensity="viewport-all">
    
  <article>
    <header>
      <hgroup>
        <h1>Impact</h1>
        <p>Le <time datetime="2024-01-11">11 janvier 2024</time></p>
      </hgroup>
    </header>
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2024/01/10/"
             title="Publication précédente : Écriture">← Précédent</a> •
        
        <nobr>
          <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/recherche/"
             title="Aller à la page de recherche"
             rel="search">Recherche</a>
        </nobr>
        
      </p>
    </nav>
    

 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
 <p>Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&nbsp;creating.</p>
 <p><cite><em><a data-link-domain="gericci.me" href="https://gericci.me/we-need-to-talk-about-the-front-web-5.html">Part 5: Clues to Fix the Front Web</a> <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <p>Même si je m’émeus encore de l’esthétique d’un <em>Web Component</em> ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où <a data-link-domain="daverupert.com" href="https://daverupert.com/2022/06/demo-to-demo-loop/">les démo</a> <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" title="Copie locale au 2024-01-09">[archive]</a> prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&nbsp;commun.</p>
 <p><strong>Une carrière est la cartographie de ces expériences.</strong> Savoir identifier les <em>optima</em> locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&nbsp;changer.</p>
 <p>Admettre que l’on a soi-même changé tout au long de ce&nbsp;cheminement.</p>

 <blockquote lang="en">
 <p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
 <p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
 <p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
 <p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/">Your tech stack is not the product</a> <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <hr />

 <blockquote lang="en">
 <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
 <p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size">Designing better target sizes</a> <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Copie locale au 2024-01-10">[archive]</a></em></cite></p>
 </blockquote>
 <p>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
 <pre><code>.search__filter:after {
  content: &quot;&quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
 }
 </code></pre>
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</a>
          
            <a href="/david/2024/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</a>
          
            <a href="/david/2024/web/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#web</a>
          
          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2024/01/10/"
             title="Publication précédente : Écriture">← Précédent</a> •
        
        <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
        
      </p>
    </nav>
    <aside>
      <theme-toggle></theme-toggle>
    </aside>
  </article>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème
            </legend>
            <label>
              <input type="radio" value="auto" name="chosen-color-scheme" checked>
              Auto
            </label>
            <label>
              <input type="radio" value="dark" name="chosen-color-scheme">
              Foncé
            </label>
            <label>
              <input type="radio" value="light" name="chosen-color-scheme">
              Clair
            </label>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

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

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

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

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

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  </body>
 </html>
--- a/david/2024/_sources/2024-01-11
+++ b/david/2024/_sources/2024-01-11
@@ -0,0 +1,43 @@
 # Impact

 > [en] If front web developers work closer to the users’ needs and problems, ==if they feel more implicated in the user experience,== they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]
 >
 > Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are creating. 
 >
 > <cite>*[Part 5: Clues to Fix the Front Web](https://gericci.me/we-need-to-talk-about-the-front-web-5.html)*</cite>

 Même si je m’émeus encore de l’esthétique d’un *Web Component* ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où [les démo](https://daverupert.com/2022/06/demo-to-demo-loop/) prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin commun.

 **Une carrière est la cartographie de ces expériences.** Savoir identifier les *optima* locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent changer.

 Admettre que l’on a soi-même changé tout au long de ce cheminement.

 > [en] At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP request.
 >
 > No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re selling.
 >
 > ==Customers want software that delivers problem-solving *impact*.== And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.
 >
 > <cite>*[Your tech stack is not the product](https://hoho.com/posts/your-stack-is-not-the-product/)*</cite>

 ---

 > [en] You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix them.
 > 
 > <cite>*[Designing better target sizes](https://ishadeed.com/article/target-size)*</cite>

 Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses *paddings* mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un `:after` pour ça [lorsqu’il s’agit d’icônes](https://ishadeed.com/article/target-size#mobile-menu) notamment :

 ```
 .search__filter:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
 }
 ```

 Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans [Polypane](https://polypane.app/) que j’utilise depuis peu et que je n’ai pas pleinement exploré.

 #évolution #technique #web
--- a/david/2024/evolution/index.html
+++ b/david/2024/evolution/index.html
@@ -0,0 +1,307 @@
 <!DOCTYPE html><!-- This is a valid HTML5 document. -->
 <!-- Screen readers, SEO, extensions and so on. -->
 <html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Tag #évolution
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #évolution">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

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

 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
 <p>Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&nbsp;creating.</p>
 <p><cite><em><a data-link-domain="gericci.me" href="https://gericci.me/we-need-to-talk-about-the-front-web-5.html">Part 5: Clues to Fix the Front Web</a> <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <p>Même si je m’émeus encore de l’esthétique d’un <em>Web Component</em> ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où <a data-link-domain="daverupert.com" href="https://daverupert.com/2022/06/demo-to-demo-loop/">les démo</a> <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" title="Copie locale au 2024-01-09">[archive]</a> prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&nbsp;commun.</p>
 <p><strong>Une carrière est la cartographie de ces expériences.</strong> Savoir identifier les <em>optima</em> locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&nbsp;changer.</p>
 <p>Admettre que l’on a soi-même changé tout au long de ce&nbsp;cheminement.</p>

 <blockquote lang="en">
 <p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
 <p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
 <p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
 <p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/">Your tech stack is not the product</a> <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <hr />

 <blockquote lang="en">
 <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
 <p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size">Designing better target sizes</a> <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Copie locale au 2024-01-10">[archive]</a></em></cite></p>
 </blockquote>
 <p>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
 <pre><code>.search__filter:after {
  content: &quot;&quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
 }
 </code></pre>
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>

    
  
 </main>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">
            <svg class="icon icon-home">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
            </svg>
          Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">
            <svg class="icon icon-rss2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
            </svg>
          Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>
            <svg class="icon icon-user-tie">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
            </svg>
          Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
            <svg class="icon icon-mail">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
            </svg>
          Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
            <svg class="icon icon-hammer2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
            </svg>
          Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <fieldset>
            <legend>
              <svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
              </svg>
              Thème
            </legend>
            <label>
              <input type="radio" value="auto" name="chosen-color-scheme" checked>
              Auto
            </label>
            <label>
              <input type="radio" value="dark" name="chosen-color-scheme">
              Foncé
            </label>
            <label>
              <input type="radio" value="light" name="chosen-color-scheme">
              Clair
            </label>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

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

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

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

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            styleSheet.insertRule(mediaRule.cssText)
            hasDarkRules = true
          }
        }
        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
        }
      })
    </script>
    
  </body>
 </html>
--- a/david/2024/index.html
+++ b/david/2024/index.html
@@ -148,7 +148,8 @@
      <a href="/david/2024/01/07/">Dons</a>, 
      <a href="/david/2024/01/08/">Liens</a>, 
      <a href="/david/2024/01/09/">Blessure</a>, 
      <a href="/david/2024/01/10/">Écriture</a>.
      <a href="/david/2024/01/10/">Écriture</a>, 
      <a href="/david/2024/01/11/">Impact</a>.
      
    </p>
  
@@ -167,6 +168,7 @@
      <a href="/david/2021/decision/" rel="tag">#décision (1)</a>
      <a href="/david/2021/ecriture/" rel="tag">#écriture (2)</a>
      <a href="/david/2021/equipe/" rel="tag">#équipe (1)</a>
      <a href="/david/2021/evolution/" rel="tag">#évolution (1)</a>
      <a href="/david/2021/experience/" rel="tag">#expérience (2)</a>
      <a href="/david/2021/fediverse/" rel="tag">#fédiverse (1)</a>
      <a href="/david/2021/ia/" rel="tag">#IA (1)</a>
@@ -174,8 +176,8 @@
      <a href="/david/2021/protopie/" rel="tag">#protopie (1)</a>
      <a href="/david/2021/solastalgia/" rel="tag">#solastalgia (1)</a>
      <a href="/david/2021/sport/" rel="tag">#sport (2)</a>
      <a href="/david/2021/technique/" rel="tag">#technique (3)</a>
      <a href="/david/2021/web/" rel="tag">#web (2)</a>
      <a href="/david/2021/technique/" rel="tag">#technique (4)</a>
      <a href="/david/2021/web/" rel="tag">#web (3)</a>
      
    </p>
  
--- a/david/2024/technique/index.html
+++ b/david/2024/technique/index.html
@@ -135,6 +135,46 @@
 <main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2>
      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> (2024-01-11)
    </h2>
    
      

 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
 <p>Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&nbsp;creating.</p>
 <p><cite><em><a data-link-domain="gericci.me" href="https://gericci.me/we-need-to-talk-about-the-front-web-5.html">Part 5: Clues to Fix the Front Web</a> <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <p>Même si je m’émeus encore de l’esthétique d’un <em>Web Component</em> ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où <a data-link-domain="daverupert.com" href="https://daverupert.com/2022/06/demo-to-demo-loop/">les démo</a> <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" title="Copie locale au 2024-01-09">[archive]</a> prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&nbsp;commun.</p>
 <p><strong>Une carrière est la cartographie de ces expériences.</strong> Savoir identifier les <em>optima</em> locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&nbsp;changer.</p>
 <p>Admettre que l’on a soi-même changé tout au long de ce&nbsp;cheminement.</p>

 <blockquote lang="en">
 <p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
 <p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
 <p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
 <p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/">Your tech stack is not the product</a> <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <hr />

 <blockquote lang="en">
 <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
 <p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size">Designing better target sizes</a> <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Copie locale au 2024-01-10">[archive]</a></em></cite></p>
 </blockquote>
 <p>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
 <pre><code>.search__filter:after {
  content: &quot;&quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
 }
 </code></pre>
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>

    
  
    <h2>
      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> (2024-01-09)
    </h2>
@@ -220,7 +260,9 @@ a::before {
      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> (2024-01-02)
    </h2>
    
      
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        
 <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
 <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
 <ul>
@@ -259,6 +301,7 @@ a::before {
 <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a data-link-domain="velvetyne.fr" href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
 <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>

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

 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
 <p>Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&nbsp;creating.</p>
 <p><cite><em><a data-link-domain="gericci.me" href="https://gericci.me/we-need-to-talk-about-the-front-web-5.html">Part 5: Clues to Fix the Front Web</a> <a href="/david/cache/2024/40aada3cc8d6897fda5a277c4299c1fd/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <p>Même si je m’émeus encore de l’esthétique d’un <em>Web Component</em> ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où <a data-link-domain="daverupert.com" href="https://daverupert.com/2022/06/demo-to-demo-loop/">les démo</a> <a href="/david/cache/2024/9f8c0e75066c1882a3b4ce084e3223ed/" title="Copie locale au 2024-01-09">[archive]</a> prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&nbsp;commun.</p>
 <p><strong>Une carrière est la cartographie de ces expériences.</strong> Savoir identifier les <em>optima</em> locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&nbsp;changer.</p>
 <p>Admettre que l’on a soi-même changé tout au long de ce&nbsp;cheminement.</p>

 <blockquote lang="en">
 <p>At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&nbsp;request.</p>
 <p>No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&nbsp;selling.</p>
 <p><mark>Customers want software that delivers problem-solving <em>impact</em>.</mark> And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.</p>
 <p><cite><em><a data-link-domain="hoho.com" href="https://hoho.com/posts/your-stack-is-not-the-product/">Your tech stack is not the product</a> <a href="/david/cache/2024/877b1e29328f6ad1b6fef26d7407ec5f/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
 </blockquote>
 <hr />

 <blockquote lang="en">
 <p>You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&nbsp;them.</p>
 <p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size">Designing better target sizes</a> <a href="/david/cache/2024/c98206d38897264005bcd5b453d032b1/" title="Copie locale au 2024-01-10">[archive]</a></em></cite></p>
 </blockquote>
 <p>Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses <em>paddings</em> mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un <code>:after</code> pour ça <a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/target-size#mobile-menu">lorsqu’il s’agit d’icônes</a>&nbsp;notamment&nbsp;:</p>
 <pre><code>.search__filter:after {
  content: &quot;&quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
 }
 </code></pre>
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>

    
  
    <h2>
      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
    </h2>
--- a/david/blogroll/index.html
+++ b/david/blogroll/index.html
@@ -176,21 +176,31 @@
    <h2>Leurs dernières publications</h2>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/01/09/piste-velo">sans pistes</a>,
          09-01-2024
          <a href="https://www.la-grange.net/2024/01/10/banana">banana</a>,
          10-01-2024
        </dt>
        <dd>
          Komagome, Japon, 9 janvier 2024 La voiture sentait le plastique et les produits chimiques. Mon sac serré contre ma poitrine, j'observais les panneaux publicitaires. Entre Kuala Lumpur et Bukit Beruntung la dame a tenté d'engager la conversation. — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059 Dans les gens que je suis, je vois très souvent la promotion des pistes cyclables. Elles…
          Kokkai-gijidomae, Japon, 9 janvier 2024 Auyong m'évoquait l'écorce et le bois sec, qui siffle et craque dans le feu. — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059 Banana ! Beaucoup de mots se bouscoulent à l'entrée de mon sommeil. Je suis souffle coupé. Le cœur bondissant et je danse sur ma chaise la larme à l'œil. Littéralement. Les chansons qui prennent 40 ans en 2024. 1984,…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/01/08/girafes">girafes</a>,
          08-01-2024
          <a href="https://brr.fyi/posts/redeployment-part-one">Redeployment Part One</a>,
          10-01-2024
        </dt>
        <dd>
          Emerging from winter and preparing for our first flight!
          — <a href="https://brr.fyi/">brr (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/01/09/piste-velo">sans pistes</a>,
          09-01-2024
        </dt>
        <dd>
          Aomi, Japon, 8 janvier 2024 Je me félicitais du départ des bénévoles, nous laissant le plaisir d'assister à de telles scènes. Attention aux maladies véhiculées par l'eau, répétaient les gens de la capitale. Attention aux crocodiles et aux serpents. Attention de ne pas marcher sur la carcasse pourrie d'une bête morte. Gare au choléra. Gare aux tourbillons et aux courants. Ils publiaient des…
          Komagome, Japon, 9 janvier 2024 La voiture sentait le plastique et les produits chimiques. Mon sac serré contre ma poitrine, j'observais les panneaux publicitaires. Entre Kuala Lumpur et Bukit Beruntung la dame a tenté d'engager la conversation. — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059 Dans les gens que je suis, je vois très souvent la promotion des pistes cyclables. Elles…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
@@ -434,16 +444,6 @@
          — <a href="https://brr.fyi/">brr (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://brr.fyi/posts/snowdrifts">Snowdrifts</a>,
          13-08-2023
        </dt>
        <dd>
          4 days of blown snow into a doorway.
          — <a href="https://brr.fyi/">brr (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://lalunemauve.fr/perlimpinpin/">Où je crache ma pastille Valda à propos d’Instagram</a>,
--- a/david/index.html
+++ b/david/index.html
@@ -125,6 +125,7 @@
    <p>Liste des publications récentes en ordre anté-chronologique :</p>
    <nav>
      <p>
        <a href="/david/2024/01/11/">Impact</a>,
        <a href="/david/2024/01/10/">Écriture</a>,
        <a href="/david/2024/01/09/">Blessure</a>,
        <a href="/david/2024/01/08/">Liens</a>,
@@ -150,6 +151,7 @@
        <a href="/david/2023/decision/" rel="tag">#décision (1)</a>,
        <a href="/david/2023/ecriture/" rel="tag">#écriture (2)</a>,
        <a href="/david/2023/equipe/" rel="tag">#équipe (1)</a>,
        <a href="/david/2023/evolution/" rel="tag">#évolution (1)</a>,
        <a href="/david/2023/experience/" rel="tag">#expérience (2)</a>,
        <a href="/david/2023/fediverse/" rel="tag">#fédiverse (1)</a>,
        <a href="/david/2023/ia/" rel="tag">#IA (1)</a>,
@@ -157,8 +159,8 @@
        <a href="/david/2023/protopie/" rel="tag">#protopie (1)</a>,
        <a href="/david/2023/solastalgia/" rel="tag">#solastalgia (1)</a>,
        <a href="/david/2023/sport/" rel="tag">#sport (2)</a>,
        <a href="/david/2023/technique/" rel="tag">#technique (3)</a>,
        <a href="/david/2023/web/" rel="tag">#web (2)</a>.
        <a href="/david/2023/technique/" rel="tag">#technique (4)</a>,
        <a href="/david/2023/web/" rel="tag">#web (3)</a>.
          
        
      </p>
--- a/david/log/index.xml
+++ b/david/log/index.xml
@@ -6,13 +6,54 @@
    <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
    <link href="https://larlet.fr/david/log/" rel="self" />
    <id>https://larlet.fr/david/</id>
    <updated>2024-01-10T12:00:00+01:00</updated>
    <updated>2024-01-11T12: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">Impact</title>
            <link href="https://larlet.fr/david/2024/01/11/" rel="alternate" type="text/html" />
            <updated>2024-01-11T12:00:00+01:00</updated>
            <id>https://larlet.fr/david/2024/01/11/</id>
            <summary type="html">

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;If front web developers work closer to the users’ needs and problems, &lt;mark&gt;if they feel more implicated in the user experience,&lt;/mark&gt; they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]&lt;/p&gt;
 &lt;p&gt;Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people’s lives and understanding the impact of what we are&amp;nbsp;creating.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://gericci.me/we-need-to-talk-about-the-front-web-5.html&quot;&gt;Part 5: Clues to Fix the Front&amp;nbsp;Web&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Même si je m’émeus encore de l’esthétique d’un &lt;em&gt;Web Component&lt;/em&gt; ou d’une nouvelle technique CSS, j’essaye d’être plus attentif au fil des ans à l’impact potentiel des bouts de code que j’assemble. C’est là où &lt;a href=&quot;https://daverupert.com/2022/06/demo-to-demo-loop/&quot;&gt;les démo&lt;/a&gt; prennent tout leur sens pour vérifier la pertinence de ce qui a été produit. Se libérer de l’égoïsme technique pour aller vers le soin porté aux utilisateur·ices, essayer de comprendre leurs besoins, synthétiser, proposer, se tromper, recommencer. Dans une spirale d’essais-erreurs, on se rapproche d’un centre enviable où les contraintes techniques sont minimisées et les besoins proches d’être comblés. Chaque partie ayant un petit peu appris sur l’autre au cours de ce bout de chemin&amp;nbsp;commun.&lt;/p&gt;
 &lt;p&gt;&lt;strong&gt;Une carrière est la cartographie de ces expériences.&lt;/strong&gt; Savoir identifier les &lt;em&gt;optima&lt;/em&gt; locaux qui ont pu procurer de la joie ainsi que les lieux de convergence où l’on aime bien aller car il y a le bon dosage effort / récompense. Apprendre à reconnaître les sentiers hasardeux où l’on a déjà laissé des plumes et reconnaître aussi qu’un contexte et des personnes peuvent&amp;nbsp;changer.&lt;/p&gt;
 &lt;p&gt;Admettre que l’on a soi-même changé tout au long de ce&amp;nbsp;cheminement.&lt;/p&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;At most software startups, customers typically don’t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe’s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP&amp;nbsp;request.&lt;/p&gt;
 &lt;p&gt;No; customers are not paying for, nor give a shit about, these things. Sorry. It’s still cool stuff. It’s just not what you’re&amp;nbsp;selling.&lt;/p&gt;
 &lt;p&gt;&lt;mark&gt;Customers want software that delivers problem-solving &lt;em&gt;impact&lt;/em&gt;.&lt;/mark&gt; And at the early stage, which is all the way until you’ve reached product-market fit, they’re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://hoho.com/posts/your-stack-is-not-the-product/&quot;&gt;Your tech stack is not the&amp;nbsp;product&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;hr /&gt;

 &lt;blockquote lang=&quot;en&quot;&gt;
 &lt;p&gt;You can’t make an article on a UX topic without showcasing a practical example. Let’s explore examples that I spotted on the web and how to fix&amp;nbsp;them.&lt;/p&gt;
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://ishadeed.com/article/target-size&quot;&gt;Designing better target&amp;nbsp;sizes&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Superbe article de Ahmad Shadeed. En résumé, il faut soigner ses &lt;em&gt;paddings&lt;/em&gt; mais il y a pas mal d’astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l’usage d’un &lt;code&gt;:after&lt;/code&gt; pour ça &lt;a href=&quot;https://ishadeed.com/article/target-size#mobile-menu&quot;&gt;lorsqu’il s’agit d’icônes&lt;/a&gt;&amp;nbsp;notamment&amp;nbsp;:&lt;/p&gt;
 &lt;pre&gt;&lt;code&gt;.search__filter:after {
  content: &amp;quot;&amp;quot;;
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scale(2);
 }
 &lt;/code&gt;&lt;/pre&gt;
 &lt;p&gt;Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans &lt;a href=&quot;https://polypane.app/&quot;&gt;Polypane&lt;/a&gt; que j’utilise depuis peu et que je n’ai pas pleinement&amp;nbsp;exploré.&lt;/p&gt;
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/evolution/&quot;&gt;#évolution&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/web/&quot;&gt;#web&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
        </entry>
    
        <entry xml:lang="fr">
            <title type="html">Écriture</title>
            <link href="https://larlet.fr/david/2024/01/10/" rel="alternate" type="text/html" />
--- a/david/recherche/index.html
+++ b/david/recherche/index.html
@@ -276,6 +276,12 @@
    </template>
    
    <script id="search-index" type="application/json">[
  {
    "title": "Impact",
    "url": "/david/2024/01/11/",
    "date": "2024-01-11",
    "content": "If front web developers work closer to the users\u2019 needs and problems, if they feel more implicated in the user experience, they will understand the impact of what they are building and will naturally adopt the strengths of the front web. [\u2026] Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people\u2019s lives and understanding the impact of what we are\u00a0creating. Part 5: Clues to Fix the Front\u00a0Web M\u00eame si je m\u2019\u00e9meus encore de l\u2019esth\u00e9tique d\u2019un Web Component ou d\u2019une nouvelle technique CSS, j\u2019essaye d\u2019\u00eatre plus attentif au fil des ans \u00e0 l\u2019impact potentiel des bouts de code que j\u2019assemble. C\u2019est l\u00e0 o\u00f9 les d\u00e9mo prennent tout leur sens pour v\u00e9rifier la pertinence de ce qui a \u00e9t\u00e9 produit. Se lib\u00e9rer de l\u2019\u00e9go\u00efsme technique pour aller vers le soin port\u00e9 aux utilisateur\u00b7ices, essayer de comprendre leurs besoins, synth\u00e9tiser, proposer, se tromper, recommencer. Dans une spirale d\u2019essais-erreurs, on se rapproche d\u2019un centre enviable o\u00f9 les contraintes techniques sont minimis\u00e9es et les besoins proches d\u2019\u00eatre combl\u00e9s. Chaque partie ayant un petit peu appris sur l\u2019autre au cours de ce bout de chemin\u00a0commun. Une carri\u00e8re est la cartographie de ces exp\u00e9riences. Savoir identifier les optima locaux qui ont pu procurer de la joie ainsi que les lieux de convergence o\u00f9 l\u2019on aime bien aller car il y a le bon dosage effort / r\u00e9compense. Apprendre \u00e0 reconna\u00eetre les sentiers hasardeux o\u00f9 l\u2019on a d\u00e9j\u00e0 laiss\u00e9 des plumes et reconna\u00eetre aussi qu\u2019un contexte et des personnes peuvent\u00a0changer. Admettre que l\u2019on a soi-m\u00eame chang\u00e9 tout au long de ce\u00a0cheminement. At most software startups, customers typically don\u2019t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe\u2019s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP\u00a0request. No; customers are not paying for, nor give a shit about, these things. Sorry. It\u2019s still cool stuff. It\u2019s just not what you\u2019re\u00a0selling. Customers want software that delivers problem-solving impact. And at the early stage, which is all the way until you\u2019ve reached product-market fit, they\u2019re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning. Your tech stack is not the\u00a0product You can\u2019t make an article on a UX topic without showcasing a practical example. Let\u2019s explore examples that I spotted on the web and how to fix\u00a0them. Designing better target\u00a0sizes Superbe article de Ahmad Shadeed. En r\u00e9sum\u00e9, il faut soigner ses paddings mais il y a pas mal d\u2019astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l\u2019usage d\u2019un :after pour \u00e7a lorsqu\u2019il s\u2019agit d\u2019ic\u00f4nes\u00a0notamment\u00a0: .search__filter:after { content: \"\"; position: absolute; inset: 0; z-index: -1; transform: scale(2); } Je d\u00e9couvre au passage qu\u2019il y a pas mal d\u2019options d\u2019accessibilit\u00e9 dans Polypane que j\u2019utilise depuis peu et que je n\u2019ai pas pleinement\u00a0explor\u00e9."
  },
  {
    "title": "\u00c9criture",
    "url": "/david/2024/01/10/",
@@ -336,6 +342,12 @@
    "date": "2024-01-01",
    "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
  },
  {
    "title": "Impact",
    "url": "/david/2024/01/11/",
    "date": "2024-01-11",
    "content": "If front web developers work closer to the users\u2019 needs and problems, if they feel more implicated in the user experience, they will understand the impact of what they are building and will naturally adopt the strengths of the front web. [\u2026] Maybe, in order to fix the front web, we have to fix human nature: make things less about money and self-satisfaction, and more about improving people\u2019s lives and understanding the impact of what we are\u00a0creating. Part 5: Clues to Fix the Front\u00a0Web M\u00eame si je m\u2019\u00e9meus encore de l\u2019esth\u00e9tique d\u2019un Web Component ou d\u2019une nouvelle technique CSS, j\u2019essaye d\u2019\u00eatre plus attentif au fil des ans \u00e0 l\u2019impact potentiel des bouts de code que j\u2019assemble. C\u2019est l\u00e0 o\u00f9 les d\u00e9mo prennent tout leur sens pour v\u00e9rifier la pertinence de ce qui a \u00e9t\u00e9 produit. Se lib\u00e9rer de l\u2019\u00e9go\u00efsme technique pour aller vers le soin port\u00e9 aux utilisateur\u00b7ices, essayer de comprendre leurs besoins, synth\u00e9tiser, proposer, se tromper, recommencer. Dans une spirale d\u2019essais-erreurs, on se rapproche d\u2019un centre enviable o\u00f9 les contraintes techniques sont minimis\u00e9es et les besoins proches d\u2019\u00eatre combl\u00e9s. Chaque partie ayant un petit peu appris sur l\u2019autre au cours de ce bout de chemin\u00a0commun. Une carri\u00e8re est la cartographie de ces exp\u00e9riences. Savoir identifier les optima locaux qui ont pu procurer de la joie ainsi que les lieux de convergence o\u00f9 l\u2019on aime bien aller car il y a le bon dosage effort / r\u00e9compense. Apprendre \u00e0 reconna\u00eetre les sentiers hasardeux o\u00f9 l\u2019on a d\u00e9j\u00e0 laiss\u00e9 des plumes et reconna\u00eetre aussi qu\u2019un contexte et des personnes peuvent\u00a0changer. Admettre que l\u2019on a soi-m\u00eame chang\u00e9 tout au long de ce\u00a0cheminement. At most software startups, customers typically don\u2019t care if your product runs on Heroku, Kubernetes, or a really brittle singly-homed machine in Joe\u2019s closet. No purchasing decisions hinge on your commitment to write servers in Rust or use Nix for hermetic everything. And although they might exist, I have sadly never had a customer write a testimonial for the elegant collection of internal services involved in responding to that single HTTP\u00a0request. No; customers are not paying for, nor give a shit about, these things. Sorry. It\u2019s still cool stuff. It\u2019s just not what you\u2019re\u00a0selling. Customers want software that delivers problem-solving impact. And at the early stage, which is all the way until you\u2019ve reached product-market fit, they\u2019re almost certainly not getting enough, fast enough. You should be spending as much time as you can at this level of the stack, The Product: thinking, building, learning. Your tech stack is not the\u00a0product You can\u2019t make an article on a UX topic without showcasing a practical example. Let\u2019s explore examples that I spotted on the web and how to fix\u00a0them. Designing better target\u00a0sizes Superbe article de Ahmad Shadeed. En r\u00e9sum\u00e9, il faut soigner ses paddings mais il y a pas mal d\u2019astuces CSS pour y arriver dans certaines conditions. Je retiens notamment l\u2019usage d\u2019un :after pour \u00e7a lorsqu\u2019il s\u2019agit d\u2019ic\u00f4nes\u00a0notamment\u00a0: .search__filter:after { content: \"\"; position: absolute; inset: 0; z-index: -1; transform: scale(2); } Je d\u00e9couvre au passage qu\u2019il y a pas mal d\u2019options d\u2019accessibilit\u00e9 dans Polypane que j\u2019utilise depuis peu et que je n\u2019ai pas pleinement\u00a0explor\u00e9."
  },
  {
    "title": "\u00c9criture",
    "url": "/david/2024/01/10/",