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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  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. Tag #partage
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #partage">
  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. <!-- Documented, feel free to shoot an email. -->
  48. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  49. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  50. <link rel="preload"
  51. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  52. as="font"
  53. type="font/woff2"
  54. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  55. crossorigin>
  56. <link rel="preload"
  57. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  58. as="font"
  59. type="font/woff2"
  60. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  61. crossorigin>
  62. <link rel="preload"
  63. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  64. as="font"
  65. type="font/woff2"
  66. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  67. crossorigin>
  68. <link rel="preload"
  69. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  70. as="font"
  71. type="font/woff2"
  72. media="(prefers-color-scheme: dark)"
  73. crossorigin>
  74. <link rel="preload"
  75. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  76. as="font"
  77. type="font/woff2"
  78. media="(prefers-color-scheme: dark)"
  79. crossorigin>
  80. <link rel="preload"
  81. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  82. as="font"
  83. type="font/woff2"
  84. media="(prefers-color-scheme: dark)"
  85. crossorigin>
  86. <script>
  87. function toggleTheme(themeName) {
  88. document.documentElement.classList.toggle(
  89. 'forced-dark',
  90. themeName === 'dark'
  91. )
  92. document.documentElement.classList.toggle(
  93. 'forced-light',
  94. themeName === 'light'
  95. )
  96. }
  97. const selectedTheme = localStorage.getItem('theme')
  98. if (selectedTheme !== 'undefined') {
  99. toggleTheme(selectedTheme)
  100. }
  101. </script>
  102. <style type="text/css">
  103. details[open] summary {
  104. display: none;
  105. }
  106. </style>
  107. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  108. data-instant-intensity="viewport-all">
  109. <header>
  110. <h1>Publications relatives au tag #partage</h1>
  111. </header>
  112. <nav>
  113. <p class="center">
  114. <a href="/david/" title="Aller à l’accueil">
  115. <svg class="icon icon-home">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  117. </svg>
  118. Accueil</a>
  119. • <a rel="tags"
  120. href="/david/#tags-2023"
  121. title="Liste de toutes les étiquettes">
  122. <svg class="icon icon-tags">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  124. </svg>
  125. Étiquettes</a>
  126. </p>
  127. </nav>
  128. <hr>
  129. <main>
  130. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  131. <h2>
  132. <a href="/david/2023/03/13/" title="Lien permanent vers cet article">Traditions</a> (2023-03-13)
  133. </h2>
  134. <blockquote lang="en">
  135. <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>
  136. <p>Certainly, the ideal situation is lore is inlaid into a framework of knowledge. […]</p>
  137. <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>
  138. <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>
  139. </blockquote>
  140. <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>
  141. <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>
  142. <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>
  143. <hr />
  144. <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>
  145. <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>
  146. <hr />
  147. <p>Parce qu’il n’y a pas de raisons que ça soit restreint à un public&nbsp;mastodon&nbsp;:</p>
  148. <blockquote>
  149. <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>
  150. <p>🤗</p>
  151. <p><cite><a href="https://fedi.larlet.fr/@david/109993800837974664">Proposition du&nbsp;9&nbsp;mars</a></cite></p>
  152. </blockquote>
  153. <hr />
  154. <blockquote lang="en">
  155. <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>
  156. <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>
  157. <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>
  158. </blockquote>
  159. <blockquote>
  160. <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>
  161. <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>
  162. <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>
  163. </blockquote>
  164. <blockquote lang="en">
  165. <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>
  166. <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>
  167. </blockquote>
  168. <blockquote>
  169. <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>
  170. <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>
  171. <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>
  172. </blockquote>
  173. <blockquote lang="en">
  174. <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>
  175. <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>
  176. </blockquote>
  177. <blockquote lang="en">
  178. <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>
  179. <p><cite>Une capture d’écran de @BeardedGenius vue sur mastodon. 2023.</cite></p>
  180. </blockquote>
  181. <h2>
  182. <a href="/david/2023/01/11/" title="Lien permanent vers cet article">Suspendu</a> (2023-01-11)
  183. </h2>
  184. <p>On discute de moyens de monétiser et échanger des choses plus ou moins artistiques avec <a href="https://ynote.hk/">Fanny</a>. Je me demande si le troc d’une œuvre contre une journée de développement dédiée à une asso/un produit militant·e serait&nbsp;envisageable.</p>
  185. <p>En allant plus loin, est-ce que je peux me dire que j’ai des journées de développement suspendues pour chaque facture émise&#8239;? Un peu à la manière des dons défiscalisés&nbsp;: tu m’achètes 3&nbsp;jours de développement et j’en offre 1&nbsp;à une asso que l’on choisit&nbsp;ensemble.</p>
  186. <p>Une journée par-ci par-là ce n’est peut-être pas très utile mais s’il y a un espace pour centraliser ces disponibilités et proposer une aide un peu plus construite ça peut potentiellement être une base de discussion avec les structures qui en auraient besoin&#8239;? Est-ce qu’à la manière de <a href="https://copiepublique.fr/">CopiePublique</a> il y aurait de la place pour un&nbsp;MécénatDeCompétencesPublic&#8239;?</p>
  187. <hr />
  188. <p>Parfois, je me dis qu’il faudrait que j’arrête de publier du flux pour me concentrer sur des articles de fond comme arrivent à le faire <a href="https://ciechanow.ski/archives/">Bartosz Ciechanowski</a>, <a href="https://www.joshwcomeau.com/tutorials/">Josh Comeau</a> ou <a href="https://explained-from-first-principles.com/">Explained from First Principles</a>.</p>
  189. <p>Écrire un article <a href="/david/2022/12/15/">un peu plus long</a> que la moyenne me demande tout de même un effort plus important. Bien davantage que la somme de billets totalisant la même&nbsp;taille.</p>
  190. <p>Est-ce que des traductions seraient déjà un premier&nbsp;pas&#8239;?</p>
  191. <hr />
  192. <p>Je me suis réveillé il y a quelques jours avec cette citation et ça me fait&nbsp;cogiter&nbsp;:</p>
  193. <blockquote>
  194. <p>Ceux qui optent pour le moindre mal tendent très vite à oublier qu’ils ont choisi le&nbsp;mal.</p>
  195. <p><cite><em>Hannah&nbsp;Arendt</em></cite></p>
  196. </blockquote>
  197. <hr />
  198. <blockquote>
  199. <p>J’encourage à débuter par un <em>petit</em> espace-temps pour <em>jouer</em> avec peu&nbsp;d’enjeux.</p>
  200. <p>Se dire qu’on essaye un mois pour voir. Sur un petit sujet, <mark>rencontre entre les personnes à aider et ce qui vous enthousiasme.</mark> Ou de démarrer avec quelque chose de présent dans votre tête depuis longtemps — cette association au coin de la rue, celle dont on lit le journal avec intérêt ou cette étiquette qui attire notre attention au marché&nbsp;fermier.</p>
  201. <p><cite><em><a href="https://www.24joursdeweb.fr/2022/tjm-tarif-journalier-militant/">TJM - le Taux Journalier Militant</a></em>&nbsp;(<a href="/david/cache/2023/1fb96c68665818ad66939956b9c4188c/">cache</a>)</cite></p>
  202. </blockquote>
  203. </main>
  204. <hr>
  205. <footer>
  206. <p>
  207. <nobr>
  208. <a href="/david/" title="Aller à l’accueil">
  209. <svg class="icon icon-home">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  211. </svg>
  212. Accueil</a>
  213. </nobr>
  214. <nobr>
  215. <a href="/david/log/" title="Accès au flux RSS">
  216. <svg class="icon icon-rss2">
  217. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  218. </svg>
  219. Suivre</a>
  220. </nobr>
  221. <nobr>
  222. <a href="http://larlet.com"
  223. title="Go to my English profile"
  224. data-instant>
  225. <svg class="icon icon-user-tie">
  226. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  227. </svg>
  228. Pro</a>
  229. </nobr>
  230. <nobr>
  231. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  232. <svg class="icon icon-mail">
  233. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  234. </svg>
  235. Email</a>
  236. </nobr>
  237. <nobr>
  238. <abbr class="nowrap"
  239. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  240. <svg class="icon icon-hammer2">
  241. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  242. </svg>
  243. Légal</abbr>
  244. </nobr>
  245. </p>
  246. <template id="theme-selector">
  247. <form>
  248. <fieldset>
  249. <legend>
  250. <svg class="icon icon-brightness-contrast">
  251. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  252. </svg>
  253. Thème
  254. </legend>
  255. <label>
  256. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  257. Auto
  258. </label>
  259. <label>
  260. <input type="radio" value="dark" name="chosen-color-scheme">
  261. Foncé
  262. </label>
  263. <label>
  264. <input type="radio" value="light" name="chosen-color-scheme">
  265. Clair
  266. </label>
  267. </fieldset>
  268. </form>
  269. </template>
  270. </footer>
  271. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  272. <script>
  273. function loadThemeForm(templateName) {
  274. const themeSelectorTemplate = document.querySelector(templateName)
  275. const form = themeSelectorTemplate.content.firstElementChild
  276. themeSelectorTemplate.replaceWith(form)
  277. form.addEventListener('change', (e) => {
  278. const chosenColorScheme = e.target.value
  279. localStorage.setItem('theme', chosenColorScheme)
  280. toggleTheme(chosenColorScheme)
  281. })
  282. const selectedTheme = localStorage.getItem('theme')
  283. if (selectedTheme && selectedTheme !== 'undefined') {
  284. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  285. }
  286. }
  287. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  288. window.addEventListener('load', () => {
  289. let hasDarkRules = false
  290. for (const styleSheet of Array.from(document.styleSheets)) {
  291. let mediaRules = []
  292. for (const cssRule of styleSheet.cssRules) {
  293. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  294. continue
  295. }
  296. // WARNING: Safari does not have/supports `conditionText`.
  297. if (cssRule.conditionText) {
  298. if (cssRule.conditionText !== prefersColorSchemeDark) {
  299. continue
  300. }
  301. } else {
  302. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  303. continue
  304. }
  305. }
  306. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  307. }
  308. // WARNING: do not try to insert a Rule to a styleSheet you are
  309. // currently iterating on, otherwise the browser will be stuck
  310. // in a infinite loop…
  311. for (const mediaRule of mediaRules) {
  312. styleSheet.insertRule(mediaRule.cssText)
  313. hasDarkRules = true
  314. }
  315. }
  316. if (hasDarkRules) {
  317. loadThemeForm('#theme-selector')
  318. }
  319. })
  320. </script>
  321. </body>
  322. </html>