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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  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. Écriture
  14. — David Larlet</title>
  15. <meta name="description" content="And, I’ll assume we all agree that owning your own website is a good thing, and we all want more people to do it.">
  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_2024-01-13.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_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/century_supra_ot_b_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/century_supra_ot_b_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 data-instant-intensity="viewport-all">
  106. <article>
  107. <header>
  108. <hgroup>
  109. <h1>Écriture</h1>
  110. <p>Le <time datetime="2024-01-10">10 janvier 2024</time></p>
  111. </hgroup>
  112. </header>
  113. <nav>
  114. <p class="center">
  115. <a rel="prev"
  116. href="/david/2024/01/09/"
  117. title="Publication précédente : Blessure">← Précédent</a> •
  118. <nobr>
  119. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  120. </nobr>
  121. <nobr>
  122. <a href="/david/recherche/"
  123. title="Aller à la page de recherche"
  124. rel="search">Recherche</a>
  125. </nobr>
  126. • <a rel="next"
  127. href="/david/2024/01/11/"
  128. title="Publication suivante : Impact">Suivant →</a>
  129. </p>
  130. </nav>
  131. <blockquote lang="en">
  132. <p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
  133. <p>But here’s the thing: we need more tools for it. We need simpler tools for it. And we need to make installing and using them <em>trivially simple</em>.</p>
  134. <p>We need more self-hosted platforms for personal publishing that <em>aren’t Wordpress</em>. <mark>And don’t point me to Hugo or Netlify or Eleventy or all those things - all of them are great, but none of them are simple enough.</mark> We need web publishing tools that do not require users to open the Terminal <em>at all</em>. And we need lots of&nbsp;them.</p>
  135. <p>We need a whole <em>galaxy</em> of&nbsp;options.</p>
  136. <p><cite><em><a data-link-domain="gilest.org" href="https://gilest.org/indie-easy.html">Let’s make the indie web easier</a> <a href="/david/cache/2024/faa1d8cae94da6838ff9351e5df791ca/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  137. </blockquote>
  138. <p>Quelques étoiles dans la&nbsp;galaxie&nbsp;:</p>
  139. <ul>
  140. <li><a data-link-domain="atelier.scribouilli.org" href="https://atelier.scribouilli.org/">Scribouilli</a> (<a data-link-domain="github.com" href="https://github.com/Scribouilli/scribouilli">code</a>) par <a data-link-domain="lechappeebelle.team" href="https://lechappeebelle.team/">L’Échappée Belle</a>&#8239;;</li>
  141. <li><a data-link-domain="write.as" href="https://write.as/">Write.as</a> (<a data-link-domain="writefreely.org" href="https://writefreely.org/">open-source</a>) est le plus proche que je pourrais conseiller avec un support commercial de <a data-link-domain="musing.studio" href="https://musing.studio/">Musing Studio</a>&#8239;;</li>
  142. <li><a data-link-domain="masto.host" href="https://masto.host/">mastohost</a> —&nbsp;que <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/">j’utilise</a>&nbsp;— permet d’avoir son propre domaine aussi sans vraiment de connaissance technique, le support est&nbsp;réactif&#8239;;</li>
  143. <li><a data-link-domain="carrd.co" href="https://carrd.co/">Carrd</a> est revenu plusieurs fois dans ma bulle ces derniers&nbsp;temps&#8239;;</li>
  144. <li><a data-link-domain="pika.page" href="https://pika.page/">Pika</a> aussi avec une saveur plus&nbsp;humaine.</li>
  145. </ul>
  146. <p>Il y a une bonne liste dans <a data-link-domain="mastodon.social" href="https://mastodon.social/@matthiasott/111557355056827064">cette discussion</a> et une autre <a data-link-domain="robertkingett.com" href="https://robertkingett.com/links/">par ici</a> (section <q lang="en">Managed Static site hosts or Blogging platforms</q>).</p>
  147. <hr />
  148. <blockquote lang="en">
  149. <p>Among its suggestions: write a longer headline; split a six-sentence paragraph up because it’s “too long”; and replace “too complex” words like “invariably,” “notoriety,” and “modification.” Dozens of sentences were flagged as being confusing (I disagree) — and it really hated em dashes. I rewrote my prose over and over, but it didn’t seem to satisfy my robot grader. I finally chose one thought per sentence, broke up paragraphs, and replaced words with suggested keywords to get rid of the red dots signaling&nbsp;problems.</p>
  150. <p><mark>The result feels like an AI summary of my story</mark> — at any moment, a paragraph could start with “In conclusion…” or “The next thing to consider is…” The nuance, voice, and unexpected twists and turns have been snuffed out. I’m sure some people would prefer this uncomplicated, beat-by-beat version of the story, but it’s gone from being a story written by a real person to a clinical, stiff series of&nbsp;sentences.</p>
  151. <p><cite><em><a data-link-domain="theverge.com" href="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization">The Perfect Web Page</a> <a href="/david/cache/2024/3debc675a055d691b32c7d6904531eb4/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  152. </blockquote>
  153. <p>Un article de TheVerge qui risque de ne pas être très bien référencé. Le moment où l’on s’adapte pour nourrir les robots n’est pas nouveau, on a «&nbsp;juste&nbsp;» mis une nouvelle étiquette dessus en 2023&nbsp;qui permet aux robots / algorithmes de se battre entre eux de manière&nbsp;explicite.</p>
  154. <p>Pas sûr de vouloir <a data-link-domain="darkvisitors.com" href="https://darkvisitors.com/robots-txt-builder">entrer sur le ring</a> sans m’épuiser très&nbsp;vite.</p>
  155. <blockquote lang="en">
  156. <p>I propose <mark>Data Luddism</mark> as a radical response to the productive power of big data and predictive algorithms. My starting point is not the Romantic neo-Luddism of Kirkpatrick Sale but the historical Luddism of 1811-1816, and the Luddites' own rhetoric regarding their resistance to 'obnoxious&nbsp;machines'.</p>
  157. <p><cite><em><a data-link-domain="danmcquillan.org" href="https://www.danmcquillan.org/dataluddism.html">Data Luddism</a> <a href="/david/cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  158. </blockquote>
  159. <hr />
  160. <blockquote lang="en">
  161. <p>The <code>everything</code> package and its 3,000+ sub-packages have caused a Denial of Service (DOS) for anyone who installs it. We’re talking about storage space running out and system resource&nbsp;exhaustion.</p>
  162. <p>But that’s not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the&nbsp;situation.</p>
  163. <p><cite><em><a data-link-domain="socket.dev" href="https://socket.dev/blog/when-everything-becomes-too-much">When “Everything” Becomes Too Much: The npm Package Chaos of 2024</a> <a href="/david/cache/2024/4a56aa5497e68df0c5bb1d5331203219/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  164. </blockquote>
  165. <p><code>npm install lol</code> 🤣</p>
  166. <p>En <a data-link-domain="jop2024.lol" href="https://jop2024.lol/">parlant de lol</a>…</p>
  167. <hr />
  168. <blockquote>
  169. <p>Si les fictions, celles qu’on s’invente, celles que nous souffle notre inconscient comme celles qu’on lit, ont un rôle majeur à jouer dans la fabrique de notre rapport au monde, alors voilà qui plaide pour redoubler d’ardeur quand il s’agit de nourrir soigneusement nos imaginaires. Quand on voit les déferlements de violence et le virilisme qui caractérisent les héros modernes, on ne peut que s’interroger sur le type de rapport au monde que cela crée. C’est la raison pour laquelle <mark>la bataille culturelle passe aussi par la création de nouvelles utopies,</mark> ni niaises ni naïves, qui puissent donner d’autres matières à rêver qu’un monde dévasté et peuplé de soldats&nbsp;augmentés.</p>
  170. <p>[…] Nous avons besoin d’autres cadres de pensée dans lesquels évoluer. Nous avons besoin d’<em>ailleurs culturels</em> pour sortir de l’ornière et nous&nbsp;dérouter.</p>
  171. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  172. </blockquote>
  173. <p>Nous accueillons une nouvelle personne chez Scopyleft, l’occasion de former une <a href="/david/2021/03/17/">nouvelle équipe</a>. Ces <em>ailleurs culturels</em> doivent pouvoir être partagés et inspirer pour réussir à&nbsp;essaimer.</p>
  174. <p>C’est l’une de mes frustrations à ne plus <a href="/david/2021/01/26/">participer à des regroupements</a>, ne pas partager par ce biais là les expériences menées depuis 11&nbsp;ans en matière d’horizontalité et de travail en&nbsp;commun·s.</p>
  175. <hr />
  176. <blockquote lang="en">
  177. <p>So when we wonder where all the websites have gone, know it’s the <em>curators</em> we’re nostalgic for because the curators showed us the best the web had to offer once upon a time. And the curators— the tenders, aggregators, collectors, and connectors— can bring us back to something better. Because it’s still out there, we just have to find&nbsp;it.</p>
  178. <p>Here’s the best part. <mark>You can be that curator right now, at this very moment.</mark> You can start to rebuild the interconnectivity that made the web fun to explore. And you don’t need to be a computer scientist to do&nbsp;it.</p>
  179. <p><cite><em><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/">Where have all the websites gone?</a> <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
  180. </blockquote>
  181. <p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</p>
  182. <nav>
  183. <p>
  184. <a href="/david/2024/apprentissage/"
  185. title="Liste de tous les articles 2024 associés à cette étiquette"
  186. rel="tag">#apprentissage</a>
  187. <a href="/david/2024/ecriture/"
  188. title="Liste de tous les articles 2024 associés à cette étiquette"
  189. rel="tag">#écriture</a>
  190. <a href="/david/2024/ia/"
  191. title="Liste de tous les articles 2024 associés à cette étiquette"
  192. rel="tag">#IA</a>
  193. <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
  194. </p>
  195. </nav>
  196. <nav>
  197. <p class="center">
  198. <a rel="prev"
  199. href="/david/2024/01/09/"
  200. title="Publication précédente : Blessure">← Précédent</a> •
  201. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  202. • <a rel="next"
  203. href="/david/2024/01/11/"
  204. title="Publication suivante : Impact">Suivant →</a>
  205. </p>
  206. </nav>
  207. <aside>
  208. <theme-toggle></theme-toggle>
  209. </aside>
  210. </article>
  211. <hr>
  212. <footer>
  213. <p>
  214. <nobr>
  215. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  216. </nobr>
  217. <nobr>
  218. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  219. </nobr>
  220. <nobr>
  221. <a href="http://larlet.com"
  222. title="Go to my English profile"
  223. data-instant>Pro</a>
  224. </nobr>
  225. <nobr>
  226. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  227. </nobr>
  228. <nobr>
  229. <abbr class="nowrap"
  230. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  231. </nobr>
  232. </p>
  233. <template id="theme-selector">
  234. <form>
  235. <style type="text/css">
  236. fieldset {
  237. text-align: center;
  238. }
  239. </style>
  240. <fieldset>
  241. <legend>Thème
  242. </legend>
  243. <label>
  244. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  245. Auto
  246. </label>
  247. <label>
  248. <input type="radio" value="dark" name="chosen-color-scheme">
  249. Foncé
  250. </label>
  251. <label>
  252. <input type="radio" value="light" name="chosen-color-scheme">
  253. Clair
  254. </label>
  255. </fieldset>
  256. </form>
  257. </template>
  258. </footer>
  259. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  260. <script>
  261. class ThemeToggle extends HTMLElement {
  262. constructor() {
  263. super()
  264. const themeSelectorTemplate = document.querySelector('#theme-selector')
  265. const form = themeSelectorTemplate.content.firstElementChild
  266. this.attachShadow({ mode: 'open' })
  267. this.shadowRoot.appendChild(form.cloneNode(true))
  268. }
  269. connectedCallback() {
  270. const form = this.shadowRoot.querySelector('form')
  271. form.addEventListener('change', (e) => {
  272. const chosenColorScheme = e.target.value
  273. localStorage.setItem('theme', chosenColorScheme)
  274. toggleTheme(chosenColorScheme)
  275. })
  276. const selectedTheme = localStorage.getItem('theme')
  277. if (selectedTheme && selectedTheme !== 'undefined') {
  278. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  279. }
  280. }
  281. }
  282. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  283. window.addEventListener('load', () => {
  284. let colorsLayer = undefined
  285. let hasDarkRules = false
  286. for (const styleSheet of Array.from(document.styleSheets)) {
  287. let mediaRules = []
  288. for (const layerRule of styleSheet.cssRules) {
  289. if (!(layerRule instanceof CSSLayerBlockRule)) {
  290. continue
  291. }
  292. if (layerRule.name === 'colors') {
  293. colorsLayer = layerRule
  294. }
  295. for (const cssRule of layerRule.cssRules) {
  296. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  297. continue
  298. }
  299. // WARNING: Safari does not have/supports `conditionText`.
  300. if (cssRule.conditionText) {
  301. if (cssRule.conditionText !== prefersColorSchemeDark) {
  302. continue
  303. }
  304. } else {
  305. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  306. continue
  307. }
  308. }
  309. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  310. }
  311. }
  312. // WARNING: do not try to insert a Rule to a styleSheet you are
  313. // currently iterating on, otherwise the browser will be stuck
  314. // in a infinite loop…
  315. for (const mediaRule of mediaRules) {
  316. // Safari requires the `0` second parameter (even if default).
  317. colorsLayer.insertRule(mediaRule.cssText, 0)
  318. hasDarkRules = true
  319. }
  320. }
  321. if (hasDarkRules) {
  322. if ('customElements' in window && !customElements.get('theme-toggle')) {
  323. customElements.define('theme-toggle', ThemeToggle)
  324. }
  325. }
  326. })
  327. </script>
  328. </body>
  329. </html>