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>Outils — David Larlet</title>
<meta name="description" content="As Henry Ford once put it, “If you need a machine and don’t buy it, then you will ultimately find that you have paid for it and don’t have it.” Thinking on a marginal basis can be very, very dangerous.">
<!-- 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)">
<!-- 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>Outils</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/05/15/" title="Publication précédente : Rédemption">← Précédent</a> •
    <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/recherche/" title="Aller à la page de recherche"
        ><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/2022/05/30/" title="Publication suivante : Méditation">Suivant →</a>
  </p>
</nav>
<hr>


<blockquote>
<p>As Henry Ford once put it, <mark>“If you need a machine and don’t buy it, then you will ultimately find that you have paid for it and don’t have it.”</mark> Thinking on a marginal basis can be very, very&nbsp;dangerous.</p>
<p><cite><em><a href="https://hbswk.hbs.edu/item/7007.html">Clayton Christensen’s “How Will You Measure Your Life?”</a></em>&nbsp;(<a href="/david/cache/2022/450dce1f614eba220a97b035cea5dfe5/">cache</a>)</cite></p>
</blockquote>
<p>Cette citation m’a inspiré cette&nbsp;paraphrase&nbsp;:</p>

<blockquote>
<p>Si tu as besoin d’un outil et que tu ne le construis pas, tu vas finir par comprendre que tu l’as quand même construit mais de manière non&nbsp;pérenne/soutenable.</p>
</blockquote>
<p>En <a href="/david/2022/04/26/" title="R&amp;Day">ce moment</a>, je prends soin des processus et outils autour de l’activité de <a href="http://scopyleft.fr/">scopyleft</a>. Et puis, quand je tombe sur <a href="https://hund.tty1.se/2021/07/14/how-i-create-fancy-pdf-documents-in-markdown.html">une bonne idée</a>&nbsp;(<a href="/david/cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/">cache</a>) ou une techno que je veux explorer, je tente des petites choses&nbsp;autour.</p>
<p>Le dernier en date est un <a href="https://gitlab.com/davidbgk/convertisseur-markdown-pdf">générateur de PDF à partir d’un fichier markdown et d’une feuille de style CSS</a>. La principale contrainte étant de le rendre <em>aussi</em> accessible à des personnes qui sont peu familières des environnements techniques. De cette contrainte née la créativité d’utiliser l’intégration continue de Gitlab pour générer le PDF. Ainsi, il «&nbsp;suffit&nbsp;» d’éditer le fichier <code>source.md</code>, de faire une <code>merge-request</code> et l’artéfact est produit&nbsp;auto-magiquement.</p>
<p>Pour un usage plus avancé, il est possible de modifier la CSS pour le rendu et/ou de le faire tourner en local sans être dépendant·e de&nbsp;Gitlab.</p>
<h2 id="caisse">Caisse <a href="#caisse" title="Ancre vers cette partie">#</a></h2>
<blockquote lang="en">
<p>🔬 All in all I think I found my cure for javascript fatigue as well as a preferred way to do new projects going&nbsp;forward.</p>
<p><cite><em><a href="https://edofic.com/posts/2022-01-28-low-js/">How I fell in love with low-js</a></em>&nbsp;(<a href="/david/cache/2022/3e7688b2d34d13bf51290fc906d77b3d/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>⚖️ I suppose another way of putting this position is that excellence requires a mix of arrogance and humility; <mark>arrogance as to your capabilities, humility toward the work.</mark> Arrogance says that you can and will accomplish your desires; humility understands that a greatness that transcends excellence, let alone survives, is not actually in your hands. You have to submit: to the truth, to the real, toward the bends and knots of what is coming to be through&nbsp;you.</p>
<p><cite><em><a href="https://www.gawker.com/culture/nobody-will-read-this-essay-in-200-years">It’s Very Unlikely Anyone Will Read This in 200&nbsp;Years</a></em>&nbsp;(<a href="/david/cache/2022/0888271d03779999af533b991a8b76eb/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>💯 And the fact that these technologies have shipped in stable browsers means they’re vetted. They’ve been through a rigourous testing phase. They’ve effectively got a seal of approval from each individual browser maker. To me, that seems like a much bigger signal of trustworthiness than the popularity of a third-party library or&nbsp;framework.</p>
<p>So <mark>I’m kind of confused</mark> by this prevalent mindset of trusting third-party code more than built-in browser&nbsp;features.</p>
<p><cite><em><a href="https://adactio.com/journal/19021">Trust</a></em>&nbsp;(<a href="/david/cache/2022/8981770b1b5be8044fd201739e67c60d/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>✍️ Uncurled - everything I know and learned about running and maintaining Open Source projects for three&nbsp;decades.</p>
<p>I have been actively involved in Open Source development since the early 1990s when I discovered the phenomenon of people writing source code they give away freely for others to use and modify under a certain&nbsp;license.</p>
<p><cite><a href="https://un.curl.dev/">Uncurled</a></cite></p>
</blockquote>

<blockquote lang="en">
<p>🌳 Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually. The project explores what it means to <mark>design with nature</mark> and on nature’s&nbsp;terms.</p>
<p><cite><em><a href="https://bjoernkarmann.dk/occlusion-grotesque">Bjørn Karmann › Occlusion Grotesque</a></em>&nbsp;(<a href="/david/cache/2022/32cf150b3b75b308683c4246b54cdcf9/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>💚 Chaque organisme est unique, mais je crois que nous partageons tous certaines tendances communes. Cela signifie que nous pouvons apprendre et réapprendre les uns des autres, et travailler ensemble pour établir des milieux de travail plus sains pour les gens de toute identité de genre. Nous en sommes au début de ce projet et <mark>nous ferons sans doute des erreurs</mark> en cours de&nbsp;route.</p>
<p><cite><em><a href="https://numerique.canada.ca/2022/04/21/la-masculinit%C3%A9-positive-ou-toxique-comment-les-hommes-peuvent-transformer-la-culture-organisationnelle/">La masculinité positive ou toxique&nbsp;: Comment les hommes peuvent transformer la culture organisationnelle</a></em>&nbsp;(<a href="/david/cache/2022/ab2739b2622b6a977d73ca7871c64a01/">cache</a>)</cite></p>
</blockquote>


<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/05/15/" title="Publication précédente : Rédemption">← Précédent</a> •
    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
     • <a rel="next" href="/david/2022/05/30/" title="Publication suivante : Méditation">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>