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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  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. Weird
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="Say the weird thing.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Weird</h1>
  138. <p>Le <time datetime="2024-04-10">10 avril 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/04/08/"
  145. title="Publication précédente : Éclipse">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/04/13/"
  152. title="Publication suivante : Fondation">Suivant →</a>
  153. </p>
  154. </nav>
  155. <blockquote lang="en">
  156. <p><em>Say the weird&nbsp;thing.</em></p>
  157. <p>Okay, I’ll&nbsp;play.</p>
  158. <p>The self is an&nbsp;illusion.</p>
  159. <p>I’m a meat sack with electricity flying through&nbsp;space.</p>
  160. <p>I am the natural consequence of every action from the Big Bang to&nbsp;today.</p>
  161. <p>I don’t have free&nbsp;will.</p>
  162. <p>Most of what my brain does is done in the dark of my attention and even when I am making conscious choices I did not choose to become the type of person who would choose that choice over&nbsp;another.</p>
  163. <p>We created god because we got smart enough to realize that we were gonna die. Evolution rewarded religion because dogmatic bonded communities with a shared myth had ways of tending to one another in ways that other tribes&nbsp;didn’t.</p>
  164. <p>We are the product of superstitious ancestors who survived better because they believed in supernatural elements and that they made them more likely to&nbsp;survive.</p>
  165. <p>All we know is that there is consciousness and we are no closer to solving the hard problem of consciousness than when we first phrased it. And objects and consciousness which we cannot know if they are real because our brain is limited by its own perception of reality. And when we try to observe what is real, what is real&nbsp;changes.</p>
  166. <p>Our brain is doing so much that it created shortcuts so that you are not aware of most of it. And our brains are so wired into towards culting that even when we leave religion, we create a religion out of whatever our thing is: astrology, politics, whatever.</p>
  167. <p>These evolutionary shortcuts worked when we were small tribes but now that our trews are bumping into each other, it will be the machine that destroys&nbsp;ourselves.</p>
  168. <p>We have a 180&nbsp;catalog brain biases that tends towards simplicity over complexity, loyalty to our tribes, the illusion of the self and all of that is not compatible to what we know about the modern&nbsp;world.</p>
  169. <p>Anyone who accepts all this will inevitably be alone. There is a lot of lip service to leaving the matrix but in reality it’s very&nbsp;lonely.</p>
  170. <p>The machine of evolution that says to survive at all costs and all of the shortcuts that created that survival will eventually be a machine that eats itself. Individuals can remove themselves to some degree but <mark>if you try to change the world, you will inevitably become a cult and you will become the monster that you were trying to&nbsp;destroy.</mark></p>
  171. <p>And even with all of that, there’s a way to structure with meaning and purpose and experiencing being, and being able to pop your head up in this universe, and check out what is going on where you still are glad you got to be alive, and it probably takes a little bit of privilege because you have to die so many times to get there and it’s very&nbsp;hard.</p>
  172. <p>And in the end the only benefit that you get is that you know that you’re playing in reality which is little more than a shared hallucination rather than being in a delusion and not knowing that you&nbsp;are.</p>
  173. <p>Invite me to your next party! ✌️</p>
  174. <p><cite>@nononsensespirituality, <a data-link-domain="mamot.fr" href="https://mamot.fr/@jcfrog/112245851038854526">via masto</a>, que l’on retrouve <a data-link-domain="instagram.com" href="https://www.instagram.com/nononsensespirituality/reel/C5SRDzTLqAh/">aussi sur&nbsp;Instagram</a></cite></p>
  175. </blockquote>
  176. <p>Bienvenue dans mon cerveau&nbsp;😅.</p>
  177. <a href="#hr-146" title="Lien vers cette section de la page"><hr id="hr-146" /></a>
  178. <blockquote>
  179. <p>The Swolf is a composite measurement in sports swimming that reflects how fast and <mark>how efficiently somebody is swimming.</mark> In contrast, time per distance (speed) neglects swimming technique, and the number of swimming strokes per lap neglects the purpose of competitive swimming: Covering a given distance in the shortest&nbsp;time.</p>
  180. <p><cite><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Swolf">Swolf</a></cite></p>
  181. </blockquote>
  182. <p>Découverte du jour grâce à la montre&nbsp;: la mesure du Swolf en natation. Voilà un calcul qui m’intéresse davantage que la&nbsp;vitesse.</p>
  183. <p>J’ai fait mon premier kilomètre (avec pauses) de l’année. Mon Swolf actuel a l’air de tourner autour de 40-45&nbsp;lorsque je ne suis pas trop dérangé par les autres nageur·euses, on va voir si ça évolue ces prochains&nbsp;mois.</p>
  184. <a href="#hr-147" title="Lien vers cette section de la page"><hr id="hr-147" /></a>
  185. <blockquote>
  186. <p>The other maintainer suddenly&nbsp;disappeared.</p>
  187. <p><cite><a data-link-domain="github.com" href="https://github.com/tukaani-project/xz/commit/77a294d98a9d2d48f7e4ac273711518bf689f5c4">Update maintainer and author&nbsp;info.</a></cite></p>
  188. </blockquote>
  189. <p>Le <em>commit</em> du&nbsp;jour.</p>
  190. <nav>
  191. <p>
  192. <a href="/david/2024/communaute/"
  193. title="Liste de tous les articles 2024 associés à cette étiquette"
  194. rel="tag">#communauté</a>
  195. <a href="/david/2024/poesie/"
  196. title="Liste de tous les articles 2024 associés à cette étiquette"
  197. rel="tag">#poésie</a>
  198. <a href="/david/2024/psychologie/"
  199. title="Liste de tous les articles 2024 associés à cette étiquette"
  200. rel="tag">#psychologie</a>
  201. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  202. </p>
  203. </nav>
  204. <nav>
  205. <p>
  206. <a rel="prev"
  207. href="/david/2024/04/08/"
  208. title="Publication précédente : Éclipse">← Précédent</a> •
  209. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  210. • <a rel="next"
  211. href="/david/2024/04/13/"
  212. title="Publication suivante : Fondation">Suivant →</a>
  213. </p>
  214. </nav>
  215. <form action="/david/recherche/" method="get">
  216. <fieldset>
  217. <legend>Recherche</legend>
  218. <label for="input-search">Termes de votre recherche :</label>
  219. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  220. <input type="submit" value="Chercher">
  221. <p id="indexation-infos">
  222. <small>
  223. Seuls les contenus de ces 8 dernières années sont indexés.
  224. </small>
  225. </p>
  226. </fieldset>
  227. </form>
  228. <aside>
  229. <theme-toggle></theme-toggle>
  230. </aside>
  231. </article>
  232. <hr>
  233. <footer>
  234. <p>
  235. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  236. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  237. <a href="http://larlet.com"
  238. title="Go to my English profile"
  239. data-instant>Pro</a>
  240. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  241. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  242. </p>
  243. <template id="theme-selector">
  244. <form>
  245. <style type="text/css">
  246. fieldset div {
  247. text-align: center;
  248. }
  249. </style>
  250. <fieldset>
  251. <legend>Thème</legend>
  252. <div>
  253. <label>
  254. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  255. Auto
  256. </label>
  257. <label>
  258. <input type="radio" value="dark" name="chosen-color-scheme">
  259. Foncé
  260. </label>
  261. <label>
  262. <input type="radio" value="light" name="chosen-color-scheme">
  263. Clair
  264. </label>
  265. </div>
  266. </fieldset>
  267. </form>
  268. </template>
  269. </footer>
  270. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  271. <script>
  272. class ThemeToggle extends HTMLElement {
  273. constructor() {
  274. super()
  275. const themeSelectorTemplate = document.querySelector('#theme-selector')
  276. const form = themeSelectorTemplate.content.firstElementChild
  277. this.attachShadow({ mode: 'open' })
  278. this.shadowRoot.appendChild(form.cloneNode(true))
  279. }
  280. connectedCallback() {
  281. const form = this.shadowRoot.querySelector('form')
  282. form.addEventListener('change', (e) => {
  283. const chosenColorScheme = e.target.value
  284. localStorage.setItem('theme', chosenColorScheme)
  285. toggleTheme(chosenColorScheme)
  286. })
  287. const selectedTheme = localStorage.getItem('theme')
  288. if (selectedTheme && selectedTheme !== 'undefined') {
  289. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  290. }
  291. }
  292. }
  293. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  294. window.addEventListener('load', () => {
  295. let colorsLayer = undefined
  296. let hasDarkRules = false
  297. for (const styleSheet of Array.from(document.styleSheets)) {
  298. let mediaRules = []
  299. for (const layerRule of styleSheet.cssRules) {
  300. if (!(layerRule instanceof CSSLayerBlockRule)) {
  301. continue
  302. }
  303. if (layerRule.name === 'colors') {
  304. colorsLayer = layerRule
  305. }
  306. for (const cssRule of layerRule.cssRules) {
  307. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  308. continue
  309. }
  310. // WARNING: Safari does not have/supports `conditionText`.
  311. if (cssRule.conditionText) {
  312. if (cssRule.conditionText !== prefersColorSchemeDark) {
  313. continue
  314. }
  315. } else {
  316. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  317. continue
  318. }
  319. }
  320. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  321. }
  322. }
  323. // WARNING: do not try to insert a Rule to a styleSheet you are
  324. // currently iterating on, otherwise the browser will be stuck
  325. // in a infinite loop…
  326. for (const mediaRule of mediaRules) {
  327. // Safari requires the `0` second parameter (even if default).
  328. colorsLayer.insertRule(mediaRule.cssText, 0)
  329. hasDarkRules = true
  330. }
  331. }
  332. if (hasDarkRules) {
  333. if ('customElements' in window && !customElements.get('theme-toggle')) {
  334. customElements.define('theme-toggle', ThemeToggle)
  335. }
  336. }
  337. })
  338. </script>
  339. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  340. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  341. <script>
  342. tippy('[data-tippy]', {
  343. content(reference) {
  344. reference.addEventListener('click', (e) => e.preventDefault())
  345. return `
  346. <h3 lang="fr">
  347. <img src="${reference.dataset.favicon}" loading="lazy">
  348. <a href="${reference.dataset.source}"
  349. >Article sur ${reference.dataset.domain}</a></h3>
  350. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  351. <div class="tippy-links" lang="fr">
  352. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  353. </div>
  354. `
  355. },
  356. allowHTML: true,
  357. interactive: true,
  358. delay: [150, 700],
  359. hideOnClick: false
  360. })
  361. </script>
  362. <script type="module">
  363. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  364. const markObserver = new IntersectionObserver((entries, observer) => {
  365. const computedStyle = getComputedStyle(document.documentElement)
  366. const markBackground = computedStyle.getPropertyValue('--mark-background')
  367. for (const entry of entries) {
  368. if (entry.intersectionRatio === 0) continue
  369. const markElement = entry.target
  370. markElement.style.backgroundColor = 'inherit'
  371. const annotation = annotate(
  372. markElement, {
  373. type: 'highlight',
  374. multiline: true,
  375. color: markBackground,
  376. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  377. animate: false
  378. }
  379. )
  380. annotation.show()
  381. observer.unobserve(markElement)
  382. }
  383. }, {threshold: 1.0})
  384. for (const markElement of document.querySelectorAll('mark')) {
  385. markObserver.observe(markElement)
  386. }
  387. </script>
  388. </body>
  389. </html>