Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Tag #qualité — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #qualité">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #qualité</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a>
  66. • <a rel="tags" href="/david/#tags-2023" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2023/01/15/" title="Lien permanent vers cet article">Snow&nbsp;Fall</a> (2023-01-15)</h2>
  75. <blockquote lang="en">
  76. <p>Ten years ago this week, in December 2012, “<a href="https://www.nytimes.com/projects/2012/snow-fall/index.html">Snow Fall: The Avalanche at Tunnel Creek</a>,” an ambitious multimedia feature about a deadly avalanche in Washington State that year, took the journalism world by&nbsp;storm.</p>
  77. <p><cite><em><a href="https://www.nytimes.com/2022/12/23/insider/snow-fall-at-10-how-it-changed-journalism.html">‘Snow Fall’ at 10: How It Changed Journalism</a></em>&nbsp;(<a href="/david/cache/2023/cba96d83d96944c55675cb073fcfc60d/">cache</a>)</cite></p>
  78. </blockquote>
  79. <p>Il est rare que je me souvienne d’évènement historiques autour du Web. À part peut-être les sorties de <a href="/david/biologeek/archives/20041121-mozparty-des-geeks-irl--/">Firefox 1</a> et <a href="/david/biologeek/archives/20061028-soiree-firefox-2-paris/">2</a> car j’étais aux évènements&nbsp;dédiés.</p>
  80. <p>«&nbsp;<span lang=en>Snow Fall</span>&nbsp;» était d’un autre ordre de grandeur pour moi car ça ouvrait au Web une possibilité de raconter des histoires dynamiques. Je me rappelle avec une assez bonne précision de l’excitation que j’avais eu en parcourant la page à l’époque. Ce n’était pas tant le côté immersif que technique qui m’intéressait alors, et c’était une époque où l’on pouvait encore consulter une source de site web et la comprendre. J’ai tellement appris comme&nbsp;ça&#8239;!</p>
  81. <p>Allez consulter cette magnificence, une source commentée, non minifiée, avec du contenu qui est dans la page et des media liés de manière standardisée et compréhensible. Une autre&nbsp;époque.</p>
  82. <p>On en parlait récemment avec <a href="https://thom4.net/">Thomas</a>, comment est-ce qu’une génération qui est principalement autodidacte a-t-elle pu être à l’origine de la complexité actuelle des outils de publication sur le Web&#8239;? Je suis tellement triste de la marche que l’on a créé pour réduire l’accessibilité de sa source. Il y a une tendance humaine à faire —&nbsp;plus ou moins consciemment&nbsp;— tomber l’échelle qui nous a permis de monter pour être sûr de garder une certaine avance sur les&nbsp;suivant·es.</p>
  83. <p><em>Tout parallèle avec notre rapport à l’immigration serait bien évidement&nbsp;fortuit.</em></p>
  84. <blockquote lang="en">
  85. <p>Mr. Duenes also noted that “Snow Fall” helped budding designers and engineers see themselves as potential&nbsp;journalists.</p>
  86. <p>“It generated the idea among people with visual skills that journalism might be a place for them,” Mr. Duenes said. “Not people who were experts at the moment, but people in school who could see an overlap between an area where they had talent and the discipline of visual&nbsp;journalism.”</p>
  87. <p><cite><em>Ibid.</em></cite></p>
  88. </blockquote>
  89. <hr />
  90. <blockquote lang="en">
  91. <p>For a data format, yaml is extremely complicated. It aims to be a human-friendly format, but in striving for that it introduces <mark>so much complexity,</mark> that I would argue it achieves the opposite result. Yaml is full of footguns and its friendliness is deceptive. In this post I want to demonstrate this through an&nbsp;example.</p>
  92. <p><cite><em><a href="https://ruudvanasseldonk.com/2023/01/11/the-yaml-document-from-hell">The yaml document from hell</a></em>&nbsp;(<a href="/david/cache/2023/3b05eb0d7d0409bcfd53b4cdf6c20daa/">cache</a>)</cite></p>
  93. </blockquote>
  94. <blockquote lang="en">
  95. <p> It was among the strongest feelings of grief I have ever encountered. The contrast between the vicious coldness of space and the warm nurturing of Earth below filled me with overwhelming sadness. Every day, we are confronted with the knowledge of further destruction of Earth at our hands: the extinction of animal species, of flora and fauna . . . things that took five billion years to evolve, and suddenly we will never see them again because of the interference of mankind. It filled me with dread. <mark>My trip to space was supposed to be a celebration; instead, it felt like a&nbsp;funeral.</mark></p>
  96. <p><cite><em><a href="https://variety.com/2022/tv/news/william-shatner-space-boldly-go-excerpt-1235395113/">William Shatner: My Trip to Space Filled Me With Sadness - Variety</a></em>&nbsp;(<a href="/david/cache/2023/ca3e313992d7ac7e4aeaece85e7f4b6a/">cache</a>)</cite></p>
  97. </blockquote>
  98. <h2><a href="/david/2023/01/10/" title="Lien permanent vers cet article">Qualité</a> (2023-01-10)</h2>
  99. <blockquote>
  100. <p>Quiconque cherche à circonscrire une discipline en lui imposant un cadre ne cherche généralement qu’à protéger son œuvre, et il le fait en perpétuant les standards qui ont permis son émergence. Celui-ci essaie de convaincre les générations à venir qu’elles doivent suivre les règles qu’il a édictées si elles comptent parvenir à l’excellence. Mais, comme disait Charles Bukowski, «&nbsp;il est quatre heures et demie du matin, il sera toujours quatre heures et demie du&nbsp;matin…&nbsp;».</p>
  101. <p>Nous sommes à ce point focalisés sur le chemin que nous nous efforçons de suivre, en voulant toujours tout faire au mieux, armés d’une dévotion sans faille pour notre discipline <mark>alors que les œillères de la peur nous empêchent d’envisager des terrains inconnus,</mark> que nos yeux restent fixés sur cette route, sur ces mains qui prennent appui sur des genoux. Et nous ne réalisons pas que nous ne faisons que suivre les règles promulguées par un homme qui a un jour disputé une course contre des chevaux, ou par un autre qui s’est frotté à un sommet de plus de huit mille mètres sans oxygène, ou par un autre encore qui a décidé de laisser chez lui ses pitons, ses cordes et la sécurité pour ne faire qu’un avec les murs à escalader. Nous suivons les lois de ceux qui en ont enfreint de plus&nbsp;anciennes.</p>
  102. <p><cite><em>Au-delà des sommets</em>, Kilian&nbsp;Jornet</cite></p>
  103. </blockquote>
  104. <p>On parlait de code et de qualité avec <a href="https://thom4.net/">Thomas</a>. Je lui faisais part de ma frustration vis-à-vis d’un code qui n’avait pas été écrit par moi et que je trouvais problématique. En creusant un peu (merci&#8239;!), je réalise que ce qui coince est au niveau de la pérennité et de la transmission. Et j’ai aussi conscience de produire moi-même du code qui serait difficile à reprendre par d’autres personnes n’ayant pas les mêmes&nbsp;aspirations/compétences.</p>
  105. <p>En Python, on a la chance de pouvoir automatiser certaines conversions/vérifications qui tendent à aller vers une certaine uniformisation (et donc universalité&#8239;?)&nbsp;: <a href="https://github.com/psf/black">black</a>, <a href="https://flake8.pycqa.org/">flake8</a>, <a href="https://pypi.org/project/isort/">isort</a> ou <a href="https://mypy.readthedocs.io/">mypy</a> par&nbsp;exemple.</p>
  106. <p>Pour aller plus loin, le code en lui-même n’est peut-être pas si critique, mais ce que l’on a appris en le concevant et l’utilisant l’est bien davantage. C’est cette transmission qu’il est important de rendre possible au sein de l’équipe. Outiller la base commune est un moyen de <strong>plus rapidement</strong> passer à l’étape de partage des concepts importants/métiers, en ce souciant moins de la&nbsp;forme.</p>
  107. <p>Et peut-être au contraire, que cette <strong>vitesse</strong> acquise nous empêche d’échanger sur des concepts importants&#8239;? Des envies différentes&#8239;? Des choix à côté desquels on peut passer par manque&nbsp;d’attention.</p>
  108. <blockquote lang="en">
  109. <p>Tradition (n.): Peer pressure from dead&nbsp;people.</p>
  110. <p><cite><em>Lu plusieurs fois sur&nbsp;masto</em></cite></p>
  111. </blockquote>
  112. <hr />
  113. <blockquote>
  114. <p>🦋 Depuis quelques années, j’essaie d’écrire un code le plus direct&nbsp;possible.</p>
  115. <p>Mon objectif&nbsp;: diminuer au maximum ma charge&nbsp;cognitive.</p>
  116. <p><cite><em><a href="https://sklein.xyz/garden/020-keep-it-simple-stupid-le-plus-longtemps-possible/">Keep it simple, stupid le plus longtemps possible</a></em>&nbsp;(<a href="/david/cache/2023/646ebfa25432bc6b653e524b52d25c9a/">cache</a>)</cite></p>
  117. </blockquote>
  118. <blockquote lang="en">
  119. <p>⛵️ Many of the tools that we thought we could rely on broke down, whether it is Apple products, or software that require subscription services, DRM, etc. As an artist you spend time developing a skill, <mark>you become a Photoshop illustrator.</mark> When your connection to the internet fails and that the software locks up, that skill that you thought was yours was actually entirely owned by someone, and can be taken&nbsp;away.</p>
  120. <p>Even though we’ve been paying for this sort of software for years, the moment that you can’t have access to authenticate yourself that skill is gone. We didn’t expect this, it scared&nbsp;us.</p>
  121. <p><cite><em><a href="https://100r.co/site/weathering_software_winter.html">weathering software winter</a></em>&nbsp;(<a href="/david/cache/2023/c564325b28ec854b6b098950df5c8c8f/">cache</a>)</cite></p>
  122. </blockquote>
  123. <blockquote lang="en">
  124. <p>🔎 It’s important to remember concepts and high level approaches, but don’t worry about remembering the details. You can always look that stuff up when you need&nbsp;it.</p>
  125. <p><cite><em><a href="https://gomakethings.com/you-dont-have-to-remember-everything-to-be-a-good-programmer/">You don’t have to remember everything to be a good programmer</a></em>&nbsp;(<a href="/david/cache/2023/2f4b8ec8f6fd2cbc48a04dcac2cc7d24/">cache</a>)</cite></p>
  126. </blockquote>
  127. </main>
  128. <hr>
  129. <footer>
  130. <p>
  131. <nobr>
  132. <a href="/david/" title="Aller à l’accueil"
  133. ><svg class="icon icon-home">
  134. <use
  135. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  136. ></use>
  137. </svg>
  138. Accueil</a
  139. >
  140. </nobr>
  141. <nobr>
  142. <a href="/david/log/" title="Accès au flux RSS"
  143. ><svg class="icon icon-rss2">
  144. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  145. </svg>
  146. Suivre</a
  147. >
  148. </nobr>
  149. <nobr>
  150. <a href="http://larlet.com" title="Go to my English profile" data-instant
  151. ><svg class="icon icon-user-tie">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  153. </svg>
  154. Pro</a
  155. >
  156. </nobr>
  157. <nobr>
  158. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  159. ><svg class="icon icon-mail">
  160. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  161. </svg>
  162. Email</a
  163. >
  164. </nobr>
  165. <nobr>
  166. <abbr
  167. class="nowrap"
  168. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  169. ><svg class="icon icon-hammer2">
  170. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  171. </svg>
  172. Légal</abbr
  173. >
  174. </nobr>
  175. </p>
  176. <template id="theme-selector">
  177. <form>
  178. <fieldset>
  179. <legend><svg class="icon icon-brightness-contrast">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  181. </svg> Thème</legend>
  182. <label>
  183. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  184. </label>
  185. <label>
  186. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  187. </label>
  188. <label>
  189. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  190. </label>
  191. </fieldset>
  192. </form>
  193. </template>
  194. </footer>
  195. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  196. <script>
  197. function loadThemeForm(templateName) {
  198. const themeSelectorTemplate = document.querySelector(templateName)
  199. const form = themeSelectorTemplate.content.firstElementChild
  200. themeSelectorTemplate.replaceWith(form)
  201. form.addEventListener('change', (e) => {
  202. const chosenColorScheme = e.target.value
  203. localStorage.setItem('theme', chosenColorScheme)
  204. toggleTheme(chosenColorScheme)
  205. })
  206. const selectedTheme = localStorage.getItem('theme')
  207. if (selectedTheme && selectedTheme !== 'undefined') {
  208. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  209. }
  210. }
  211. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  212. window.addEventListener('load', () => {
  213. let hasDarkRules = false
  214. for (const styleSheet of Array.from(document.styleSheets)) {
  215. let mediaRules = []
  216. for (const cssRule of styleSheet.cssRules) {
  217. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  218. continue
  219. }
  220. // WARNING: Safari does not have/supports `conditionText`.
  221. if (cssRule.conditionText) {
  222. if (cssRule.conditionText !== prefersColorSchemeDark) {
  223. continue
  224. }
  225. } else {
  226. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  227. continue
  228. }
  229. }
  230. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  231. }
  232. // WARNING: do not try to insert a Rule to a styleSheet you are
  233. // currently iterating on, otherwise the browser will be stuck
  234. // in a infinite loop…
  235. for (const mediaRule of mediaRules) {
  236. styleSheet.insertRule(mediaRule.cssText)
  237. hasDarkRules = true
  238. }
  239. }
  240. if (hasDarkRules) {
  241. loadThemeForm('#theme-selector')
  242. }
  243. })
  244. </script>
  245. </body>
  246. </html>