Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  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>
  13. Traditions
  14. — David Larlet</title>
  15. <meta name="description" content="Documents are documents. Books are books, recordings are recordings, and so on. As time has gone on, though, I’ve observed the probably obvious-to-others fact that Lore is the grease between the concrete blocks of knowledge, the carved step in an otherwise impossible-to-scale mountain, the small bit of powder sprinkled through a workspace to ensure sparks don’t fly and things don’t burn. Inconceivably odd to the outsider, but vital to the dedicated or intense practice of the craft.">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  106. data-instant-intensity="viewport-all">
  107. <article>
  108. <header>
  109. <h1>Traditions</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/03/04/"
  115. title="Publication précédente : Jour&nbsp;3">← Précédent</a> •
  116. <nobr>
  117. <a href="/david/" title="Aller à l’accueil" rel="up">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. </nobr>
  123. <nobr>
  124. <a href="/david/recherche/"
  125. title="Aller à la page de recherche"
  126. rel="search">
  127. <svg class="icon icon-search">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
  129. </svg>
  130. Recherche</a>
  131. </nobr>
  132. • <a rel="next"
  133. href="/david/2023/05/01/"
  134. title="Publication suivante : Long&nbsp;cours">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <blockquote lang="en">
  139. <p>Documents are documents. Books are books, recordings are recordings, and so on. As time has gone on, though, I’ve observed the probably obvious-to-others fact that <strong>Lore</strong> is the grease between the concrete blocks of knowledge, the carved step in an otherwise impossible-to-scale mountain, the small bit of powder sprinkled through a workspace to ensure sparks don’t fly and things don’t burn. Inconceivably odd to the outsider, but vital to the dedicated or intense practice of the&nbsp;craft.</p>
  140. <p>Certainly, the ideal situation is lore is inlaid into a framework of knowledge. […]</p>
  141. <p><mark>The danger in this process, the potential lost ballast in the rise to the skies, is that the lore-to-knowledge transfer is lossy, messy, and arbitrary.</mark> Maybe those in the know want to keep the information to themselves, so it won’t be given to whoever the person or persons are who are laying down the written form. Maybe the chronicler of information has blind spots they don’t know about and not enough people to correct them. Or, more likely, you have to set the “noise filter” of the information to not go down the rabbit and rat holes of contingencies that maybe a dozen or two people will even want to know about, to the favor of that which <em>everyone</em> will need. The outcome is always the same: Lore loses in the long&nbsp;run.</p>
  142. <p><cite><em><a href="http://ascii.textfiles.com/archives/5509">Discord, or the Death of Lore «&nbsp;ASCII by Jason Scott</a></em>&nbsp;(<a href="/david/cache/2023/f6e269f9a6e16436827169039d551623/">cache</a>)</cite></p>
  143. </blockquote>
  144. <p>La documentation des us et coutumes, des pratiques culturelles, de façon numérique est un vrai défi. Surtout pour les personnes qui sont plutôt de culture orale dans leur façon de&nbsp;transmettre.</p>
  145. <p>Ce n’est pas mon cas mais je me retiens toujours de <em>lutter contre</em> en proposant des outils complémentaires qui viennent enrichir la souvenance que l’on peut avoir d’un échange. Un <a href="/david/2022/12/19/">journal</a>, une notice, un billet de blog, qu’importe le format pourvu que l’on ait une URL pérenne qui puisse être&nbsp;référencée.</p>
  146. <p>Cela me prend du temps, mais bien moins que de devoir reprendre les échanges de zéro. Ou de faire un peu trop confiance à l’interprétation faite par ma propre&nbsp;mémoire&#8239;!</p>
  147. <hr />
  148. <p>J’essaye <a href="https://hazeover.com/">HazeOver</a> depuis maintenant une semaine et je me demande comment ça n’est pas une fonctionnalité par défaut de macOS. Je n’ai aucune fenêtre maximisée et j’ai un écran relativement grand, cet outil me permet de focaliser sur la fenêtre en cours. Lors du partage d’écran complet en visio (pour alterner code/navigateur par exemple), un coup de scroll sur l’icône dans la barre du haut et hop on ne voit que la fenêtre active avec un fond&nbsp;noir.</p>
  149. <p>Autre test du moment&nbsp;: <a href="https://sindresorhus.com/folder-peek">Folder Peek</a>, Sindre Sorhus fait plein d’autres <a href="https://sindresorhus.com/apps">petits outils intéressants</a>.</p>
  150. <hr />
  151. <p>Parce qu’il n’y a pas de raisons que ça soit restreint à un public&nbsp;mastodon&nbsp;:</p>
  152. <blockquote>
  153. <p>Pour rappel&nbsp;: si vous souhaitez proposer un sujet pour une conférence comme <a href="https://mamot.fr/@ParisWeb">@ParisWeb</a> ou <a href="https://piaille.fr/@sudweb">@sudweb</a> je me propose de vous accompagner dans la démarche, surtout si vous faites partie d’une population peu représentée dans ces évènements (cette formulation est probablement maladroite mais j’espère que vous voyez&nbsp;l’idée).</p>
  154. <p>🤗</p>
  155. <p><cite><a href="https://fedi.larlet.fr/@david/109993800837974664">Proposition du&nbsp;9&nbsp;mars</a></cite></p>
  156. </blockquote>
  157. <hr />
  158. <blockquote lang="en">
  159. <p>👴 According to the most recent StackOverflow survey, half of the developer population started their careers within the last 9&nbsp;years, which is to say, <mark>half of all web developers have never known a world without&nbsp;React.</mark></p>
  160. <p>It’s even highly likely that they were taught web development via React or that they have never built a site any other way. They were told by their teachers, then by recruiters and then by their employers that React was the way you build web sites, and they invested their careers in it&nbsp;accordingly.</p>
  161. <p><cite><em><a href="https://remotesynthesis.com/blog/the-price-of-developer-tools/">The Price Developers Pay for Loving Their Tools Too Much</a></em>&nbsp;(<a href="/david/cache/2023/339a862f8939f7ba8ae1524fa14f94c2/">cache</a>)</cite></p>
  162. </blockquote>
  163. <blockquote>
  164. <p>😔 Il s’agit de la tendance qu’ont les gens à graviter vers ou être attirés par ceux qui leur sont similaires en apparence, croyances, origine. Un effet de bord pernicieux ou même vicieux est la tendance à éviter ou même détester les gens ou les groupes qui sont&nbsp;différents.</p>
  165. <p>Puisque le milieu professionnel est dominé par les mâles blancs, ce biais affecte les femmes, d’autant plus si elles sont de couleur. <mark>C’est le biais qui fait le plus de détriment aux femmes au travail</mark>&nbsp;: décisions de recrutement injustes, promotions inéquitables, idées balayées ou&nbsp;volées.</p>
  166. <p><cite><em><a href="https://koalie.blog/2023/03/11/ces-stereotypes-qui-nuisent-aux-femmes-au-travail/">Ces stéréotypes qui nuisent aux femmes au travail</a></em>&nbsp;(<a href="/david/cache/2023/6c69f245e09fb696b43afa54240b4148/">cache</a>)</cite></p>
  167. </blockquote>
  168. <blockquote lang="en">
  169. <p>📷 Having my phone in my pocket doesn’t trigger anything but distraction. It can do everything, and so I feel nothing in particular about it. A physical camera takes photos, but it also makes me think about seeing. And I like&nbsp;that.</p>
  170. <p><cite><em><a href="https://macwright.com/2017/11/03/carrying-a-camera.html">Carrying a camera</a></em>&nbsp;(<a href="/david/cache/2023/c9925184359c01c5c077be55b7cd6505/">cache</a>)</cite></p>
  171. </blockquote>
  172. <blockquote>
  173. <p>😢 Et je suis fatiguée de cette société qui est incapable de croire les femmes. Combien faudra t-il encore de vidéos ou témoignage où un homme se retrouve, volontairement ou par accident, à la place d’une femme&#8239;? Pour se rendre compte qu’en fait oui c’est violent ce que vivent les femmes et que ce qu’elles dénoncent c’est vrai et&nbsp;systémique.</p>
  174. <p>Je ne peux m’empêcher de penser que si j’avais été un homme ma carrière serait plus avancée aujourd’hui, mon salaire supérieur et ma santé mentale bien&nbsp;meilleure.</p>
  175. <p><cite><em><a href="https://www.duchess-france.fr/coup%20de%20gueule/sexisme/2023/03/06/stupeur-et-trembements.html">Stupeur et tremblements&nbsp;: comment faire fuir les développeuses expérimentées.</a></em>&nbsp;(<a href="/david/cache/2023/25d41d569f637f8342c495139ccce8a8/">cache</a>)</cite></p>
  176. </blockquote>
  177. <blockquote lang="en">
  178. <p>✍️ That is against our purposes here. A blog post is <em>a search query</em>. <mark>You write to find your tribe;</mark> you write so they will know what kind of fascinating things they should route to your inbox. If you follow common wisdom, you will cut exactly the things that will help you find these&nbsp;people.</p>
  179. <p><cite><em><a href="https://escapingflatland.substack.com/p/search-query">A blog post is a very long and complex search query to find fascinating people and make them route interesting stuff to your inbox</a></em>&nbsp;(<a href="/david/cache/2023/5bea097a2dba65380cf43adf2df540f8/">cache</a>)</cite></p>
  180. </blockquote>
  181. <blockquote lang="en">
  182. <p>🤔 Fact we’re in the ’Twenties’ sounds so weird. It’s so synonymous with the 1920s. Sounds like a bygone era when women were still fighting for their rights, the upper classes were living a life of hedonism whilst people starved &amp; the world was on the verge of financial ruin and&nbsp;war.</p>
  183. <p><cite>Une capture d’écran de @BeardedGenius vue sur mastodon. 2023.</cite></p>
  184. </blockquote>
  185. <nav>
  186. <p>
  187. <a href="/david/2023/incompetence/"
  188. title="Liste de tous les articles 2023 associés à cette étiquette"
  189. rel="tag">#incompétence</a>
  190. <a href="/david/2023/partage/"
  191. title="Liste de tous les articles 2023 associés à cette étiquette"
  192. rel="tag">#partage</a>
  193. <a href="/david/2023/traces/"
  194. title="Liste de tous les articles 2023 associés à cette étiquette"
  195. rel="tag">#traces</a>
  196. <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
  197. <svg class="icon icon-tags">
  198. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  199. </svg>
  200. tous ?</a>
  201. </p>
  202. </nav>
  203. <nav>
  204. <p class="center">
  205. <a rel="prev"
  206. href="/david/2023/03/04/"
  207. title="Publication précédente : Jour&nbsp;3">← Précédent</a> •
  208. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  209. • <a rel="next"
  210. href="/david/2023/05/01/"
  211. title="Publication suivante : Long&nbsp;cours">Suivant →</a>
  212. </p>
  213. </nav>
  214. </article>
  215. <hr>
  216. <footer>
  217. <p>
  218. <nobr>
  219. <a href="/david/" title="Aller à l’accueil">
  220. <svg class="icon icon-home">
  221. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  222. </svg>
  223. Accueil</a>
  224. </nobr>
  225. <nobr>
  226. <a href="/david/log/" title="Accès au flux RSS">
  227. <svg class="icon icon-rss2">
  228. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  229. </svg>
  230. Suivre</a>
  231. </nobr>
  232. <nobr>
  233. <a href="http://larlet.com"
  234. title="Go to my English profile"
  235. data-instant>
  236. <svg class="icon icon-user-tie">
  237. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  238. </svg>
  239. Pro</a>
  240. </nobr>
  241. <nobr>
  242. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  243. <svg class="icon icon-mail">
  244. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  245. </svg>
  246. Email</a>
  247. </nobr>
  248. <nobr>
  249. <abbr class="nowrap"
  250. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  251. <svg class="icon icon-hammer2">
  252. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  253. </svg>
  254. Légal</abbr>
  255. </nobr>
  256. </p>
  257. <template id="theme-selector">
  258. <form>
  259. <fieldset>
  260. <legend>
  261. <svg class="icon icon-brightness-contrast">
  262. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  263. </svg>
  264. Thème
  265. </legend>
  266. <label>
  267. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  268. Auto
  269. </label>
  270. <label>
  271. <input type="radio" value="dark" name="chosen-color-scheme">
  272. Foncé
  273. </label>
  274. <label>
  275. <input type="radio" value="light" name="chosen-color-scheme">
  276. Clair
  277. </label>
  278. </fieldset>
  279. </form>
  280. </template>
  281. </footer>
  282. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  283. <script>
  284. function loadThemeForm(templateName) {
  285. const themeSelectorTemplate = document.querySelector(templateName)
  286. const form = themeSelectorTemplate.content.firstElementChild
  287. themeSelectorTemplate.replaceWith(form)
  288. form.addEventListener('change', (e) => {
  289. const chosenColorScheme = e.target.value
  290. localStorage.setItem('theme', chosenColorScheme)
  291. toggleTheme(chosenColorScheme)
  292. })
  293. const selectedTheme = localStorage.getItem('theme')
  294. if (selectedTheme && selectedTheme !== 'undefined') {
  295. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  296. }
  297. }
  298. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  299. window.addEventListener('load', () => {
  300. let hasDarkRules = false
  301. for (const styleSheet of Array.from(document.styleSheets)) {
  302. let mediaRules = []
  303. for (const cssRule of styleSheet.cssRules) {
  304. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  305. continue
  306. }
  307. // WARNING: Safari does not have/supports `conditionText`.
  308. if (cssRule.conditionText) {
  309. if (cssRule.conditionText !== prefersColorSchemeDark) {
  310. continue
  311. }
  312. } else {
  313. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  314. continue
  315. }
  316. }
  317. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  318. }
  319. // WARNING: do not try to insert a Rule to a styleSheet you are
  320. // currently iterating on, otherwise the browser will be stuck
  321. // in a infinite loop…
  322. for (const mediaRule of mediaRules) {
  323. styleSheet.insertRule(mediaRule.cssText)
  324. hasDarkRules = true
  325. }
  326. }
  327. if (hasDarkRules) {
  328. loadThemeForm('#theme-selector')
  329. }
  330. })
  331. </script>
  332. </body>
  333. </html>