|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274 |
- <!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 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> (<a href="/david/cache/2022/450dce1f614eba220a97b035cea5dfe5/">cache</a>)</cite></p>
- </blockquote>
- <p>Cette citation m’a inspiré cette paraphrase :</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 pérenne/soutenable.</p>
- </blockquote>
- <p>En <a href="/david/2022/04/26/" title="R&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> (<a href="/david/cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/">cache</a>) ou une techno que je veux explorer, je tente des petites choses 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 « suffit » d’éditer le fichier <code>source.md</code>, de faire une <code>merge-request</code> et l’artéfact est produit 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 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 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> (<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 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 Years</a></em> (<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 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 features.</p>
- <p><cite><em><a href="https://adactio.com/journal/19021">Trust</a></em> (<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 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 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 terms.</p>
- <p><cite><em><a href="https://bjoernkarmann.dk/occlusion-grotesque">Bjørn Karmann › Occlusion Grotesque</a></em> (<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 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 : Comment les hommes peuvent transformer la culture organisationnelle</a></em> (<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>
|