davidbgk
/
larlet-fr-david

<!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>
    Perspective
  — David Larlet</title>
  <meta name="description" content="Let’s call the generally pro-Tailwind group Builders, and let’s call the generally anti-Tailwind group Crafters.">
  <!-- 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>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <article>
    <header>
      <h1>Perspective</h1>
    </header>
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/09/23/"
             title="Publication précédente : Éco-conception">← Précédent</a> •
        
        <nobr>
          <a href="/david/" title="Aller à l’accueil" rel="up">
            <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/recherche/"
             title="Aller à la page de recherche"
             rel="search">
            <svg class="icon icon-search">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
            </svg>
          Recherche</a>
        </nobr>
        
          • <a rel="next"
    href="/david/2023/11/27/"
    title="Publication suivante : Dix">Suivant →</a>
        
      </p>
    </nav>
    <hr>
    

<blockquote lang="en">
<p>Let’s call the generally pro-Tailwind group <em>Builders</em>, and let’s call the generally anti-Tailwind group <em>Crafters</em>.</p>
<p>This isn’t to say that Crafters don’t build things, or that the Builders aren’t skilled craftspeople. But as a quick and messy shorthand, let’s go with it for a moment, because I think it hints at the values of these two&nbsp;groups.</p>
<p>[…]</p>
<p>Builders clearly value getting the work done as quickly and efficiently as possible. They are making something—likely something with parts beyond the frontend—and are eager to see it through to&nbsp;completion.</p>
<p>[…]</p>
<p>On the other side, the Crafters tend to be seasoned CSS specialists, and almost always enjoy the part of the work that Tailwind is supposed to make easier. It’s fair to say they’ve overcome the challenge presented by CSS—or, at least, <mark>that this is where they <em>like</em> to be&nbsp;challenged.</mark></p>
<p>Crafters may be building holistic products and projects, just like Builders. But Crafters generally are less focused on <em>getting through</em> the frontend as a <em>part</em> of that work, and instead see the frontend as <em>the product itself</em>.</p>
<p><cite><em><a href="https://joshcollinsworth.com/blog/tailwind-is-smart-steering">Classic rock, Mario Kart, and why we can’t agree on Tailwind</a></em>&nbsp;(<a href="/david/cache/2023/2074a4d527220f5ddf2dc0b4e678c83a/">cache</a>)</cite></p>
</blockquote>
<p>Un article nuancé qui pose le doigt sur la différence de point de vue dans l’utilisation des outils. Oui, c’est le second article technique d’affilé, après je vais prendre mes&nbsp;gouttes.</p>
<p>Le parallèle est intéressant avec les joueurs et les audiophiles car on est toujours dans la recherche de l’accomplissement au-delà de la performance pure. Une histoire de plaisir à arpenter le chemin et à le rendre accessible au plus grand nombre… tout en ayant conscience d’être un peu élitiste en se permettant cela car la face nord offre d’autres&nbsp;défis.</p>
<p>Je respecte —&nbsp;et j’admire de plus en plus&nbsp;— les personnes qui n’ont pas besoin d’entrer à fond dans un sujet pour s’amuser. Il y a une innocence dont émane une forme de beauté. Certain·es pourraient y lire une condescendance mal placée mais pas du tout, cette recherche est bien trop souvent un fardeau chronophage qui pourrit la vie et les relations. Un groupe sain nécessite probablement d’avoir les deux façons d’appréhender les choses pour arriver à l’équilibre instable qui consiste à aller de&nbsp;l’avant.</p>
<p>Oh, et pour revenir aux CSS, <strong>pour mon usage</strong> qui est de faire des petits outils résilients en équipe réduite, j’utilise de plus en plus des <em>frameworks</em> <a href="https://github.com/dbohdan/classless-css">sans classes</a> (ahum) comme <a href="https://picocss.com/">Pico.css</a> qui procurent une base saine, configurable et facilement portable. Est-ce que cela fait de moi un <em>Brafter</em>&#8239;? (<a href="https://www.urbandictionary.com/define.php?term=Braft">Non</a>.)</p>
<hr />

<blockquote lang="en">
<p>✍️ Most people default to one or another behavior but rarely use them exclusively. Writers will often benefit from talking things out when they get stuck; and talkers will find that occasionally writing something down helps solidify their thoughts. Both strategies can be learned. Whether you’re a writer or a talker isn’t about your inability to do one or the other so much as it is a preferred or optimized&nbsp;mode.</p>
<p>This is, incidentally, <mark>a much more valuable way of understanding different working styles</mark> than the old maker vs manager canard. Both talkers and writers make things (including decisions), but they means by which they make things—and the needs they have in relation to their colleagues—are not the&nbsp;same.</p>
<p><cite><em><a href="https://everythingchanges.us/blog/writers-and-talkers-and-leaders/">Writers and talkers and leaders, oh my!</a></em>&nbsp;(<a href="/david/cache/2023/b2292d98e9d54537c13b8c1e2cae5583/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🐉 But in general, I’d still be wary of using local-first outside real-time / multiplayer / offline use cases. <mark>Local-first is definitely still bleeding-edge.</mark> You will hit unexpected problems. A good community has rapidly developed, but there’ll still be some stretches on the road where you’ll have to solve novel&nbsp;problems.</p>
<p>So: if you need local-first, see if it makes sense to isolate the local-first parts and architect the rest of the app (for now) in a more conventional&nbsp;fashion.</p>
<p><cite><em><a href="https://bricolage.io/some-notes-on-local-first-development/">Some notes on Local-First Development</a></em>&nbsp;(<a href="/david/cache/2023/49f2ce04dd0beb94dc2f662163bc6339/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>😔 En fait ma plus grande inquiétude dans ses parcours hors-circuits sont les autres humains, ceux qui ne comprendraient pas ma&nbsp;démarche.</p>
<p><cite><em><a href="https://www.la-grange.net/2023/03/03/suburb">banlieue ou suburb</a></em>&nbsp;(<a href="/david/cache/2023/5f93f91a46391e0e120dac49298857d1/">cache</a>)</cite></p>
</blockquote>

    
      <nav>
        <p>
          
            <a href="/david/2023/complexite/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#complexité</a>
          
            <a href="/david/2023/recherche/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#recherche</a>
          
            <a href="/david/2023/technique/"
               title="Liste de tous les articles 2023 associés à cette étiquette"
               rel="tag">#technique</a>
          
          <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
            <svg class="icon icon-tags">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
            </svg>
          tous ?</a>
        </p>
      </nav>
    
    <nav>
      <p class="center">
        
          <a rel="prev"
             href="/david/2023/09/23/"
             title="Publication précédente : Éco-conception">← Précédent</a> •
        
        <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
        
          • <a rel="next"
    href="/david/2023/11/27/"
    title="Publication suivante : Dix">Suivant →</a>
        
      </p>
    </nav>
  </article>

    <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>