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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  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. Étiquette #psychologie
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #psychologie">
  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-02-03.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. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#psychologie</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/02/05/" title="Lien permanent vers cet article">Jeu</a> <time datetime="2024-02-05">5 février 2024</time>
  132. </h2>
  133. <p>Dans la même&nbsp;journée&nbsp;:</p>
  134. <blockquote lang="en">
  135. <p><mark>Built like a video&nbsp;game</mark></p>
  136. <p>Designed to perform smoothly at 60&nbsp;frames per second, our tool disappears and you can focus on what matters: working with your&nbsp;data.</p>
  137. <p><cite><em><a data-link-domain="quadratichq.com" href="https://www.quadratichq.com/">quadratic</a></em></cite></p>
  138. </blockquote>
  139. <p>Puis&nbsp;:</p>
  140. <blockquote lang="en">
  141. <p><mark>Built like a video&nbsp;game</mark></p>
  142. <p>Zed’s breakthrough performance starts with our GPUI framework, a new way to build 2D user interfaces. GPUI rasterizes the entire window on the GPU, just like a 3D video game. The result? Fast, reliable, and smooth delivery of pixels on every&nbsp;frame.</p>
  143. <p><cite><em><a data-link-domain="zed.dev" href="https://zed.dev/">Zed</a></em></cite></p>
  144. </blockquote>
  145. <p>Intéressant comme coïncidence&nbsp;commerciale.</p>
  146. <a href="#hr-67" title="Lien vers cette section de la page"><hr id="hr-67" /></a>
  147. <p>J’ai réussi à trottiner 3&#8239;km aujourd’hui, à vitesse très réduite et en étant strapé. C’est une première après 4&nbsp;semaines <a href="/david/2024/01/09/" title="Blessure">de repos</a>. Il s’agit de reculer maintenant au maximum le moment où je vais me retordre cette cheville. Afin de réduire ce risque, j’hésite à repartir sur du <em>barefoot</em> car le mollet a aussi souffert pendant la torsion. Puis bon, il fait encore un peu&nbsp;frais…</p>
  148. <p>Il y a cette nostalgie des sorties longues à Tokyo, en étant <a href="/david/thoughts/#barefoot">quasiment pieds nus</a>. Si j’étais joueur, j’appellerais ça <em>bearfoot</em> dans mon contexte&nbsp;actuel.</p>
  149. <nav>
  150. <p>
  151. <a href="/david/2024/experience/"
  152. title="Liste de tous les articles 2024 associés à cette étiquette"
  153. rel="tag">#expérience</a>
  154. <a href="/david/2024/psychologie/"
  155. title="Liste de tous les articles 2024 associés à cette étiquette"
  156. rel="tag">#psychologie</a>
  157. <a href="/david/2024/technique/"
  158. title="Liste de tous les articles 2024 associés à cette étiquette"
  159. rel="tag">#technique</a>
  160. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  161. </p>
  162. </nav>
  163. <h2>
  164. <a href="/david/2024/01/26/" title="Lien permanent vers cet article">Cargo</a> <time datetime="2024-01-26">26 janvier 2024</time>
  165. </h2>
  166. <blockquote lang="en">
  167. <p>I think the actual harm of signing git commits is to perpetuate an engineering culture of unquestioningly cargo-culting sophisticated and complex tools like cryptographic signatures into new contexts where they have no&nbsp;use.</p>
  168. <p>Just from a baseline utilitarian philosophical perspective, for a given action A, all else being equal, it’s always better not to do A, because taking an action always has some non-zero opportunity cost even if it is just the time taken to do it. Epsilon cost and zero benefit is still a net harm. This is even more true in the context of a complex system. Any action taken in response to a rule in a system is going to interact with all the other rules in that system. You have to pay complexity-rent on every new rule. <mark>So an apparently-useless embellishment like signing commits can have potentially far-reaching consequences in the&nbsp;future.</mark></p>
  169. <p><cite><em><a data-link-domain="blog.glyph.im" href="https://blog.glyph.im/2024/01/unsigned-commits.html" hreflang="en"
  170. title="Consultation de l’article (anglais)">Unsigned Commits</a>
  171. <a href="/david/cache/2024/ce5fdc61fd66cdb9ce548fb543eba986/" hreflang="en"
  172. data-tippy data-description="Deciphering Glyph, the blog of Glyph Lefkowitz."
  173. data-source="https://blog.glyph.im/2024/01/unsigned-commits.html"
  174. data-date="2024-01-25"
  175. data-favicon="https://blog.glyph.im/images/favicon.ico"
  176. data-domain="blog.glyph.im"
  177. ><svg xmlns="http://www.w3.org/2000/svg"
  178. width="24" height="24" viewBox="0 0 24 24" fill="none"
  179. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  180. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  181. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  182. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  183. </svg>
  184. <span class="sr-only">[archive]</span></a></em></cite></p>
  185. </blockquote>
  186. <p>J’avoue avoir sauté sur l’occasion lorsque j’en ai eu la possibilité avec <a data-link-domain="git-tower.com" href="https://www.git-tower.com/help/guides/integration/gpg/mac">mon client git</a> pour avoir le badge vert sur Microsoft GitHub et Gitlab sans trop me poser de questions. C’était peut-être une erreur et je vais faire mûrir ma réflexion maintenant qu’on m’a mis le nez&nbsp;dedans.</p>
  187. <p>Entre <em>refus de parvenir</em> et auto-défense&nbsp;numérique.</p>
  188. <a href="#hr-50" title="Lien vers cette section de la page"><hr id="hr-50" /></a>
  189. <blockquote>
  190. <p>Cette lutte ne créera pas un mouvement de masse…<br />
  191. Mais elle est un ingrédient, parmi de nombreuses autres luttes territoriales, qui toutes façonnent ces mêmes possibilités affectives…<br />
  192. Se sentir coïncider non pas avec soi-même mais avec un milieu de vie…<br />
  193. Se sentir maillé à un vaste collectif d’humains et de non-humains…<br />
  194. Des affects, qui constituent la nécessaire force motrice du mouvement que nous espérons voir&nbsp;croître.</p>
  195. <p><cite><em><a data-link-domain="puntish.blogspot.com" href="http://puntish.blogspot.com/2024/01/defendre-le-glacier-de-la-grave.html">Défendre le glacier de La&nbsp;Grave</a></em></cite></p>
  196. </blockquote>
  197. <p>La justesse d’Alessandro Pignocchi et les couleurs de ses&nbsp;aquarelles&nbsp;💚.</p>
  198. <a href="#hr-51" title="Lien vers cette section de la page"><hr id="hr-51" /></a>
  199. <blockquote lang="en">
  200. <p>Every time I have told someone “I want to replace PDF“, the statement has been met with extreme skepticism. Hopefully this document has convinced you that <mark>HTML-via-EPUB could potentially be a viable</mark> and desirable document format for the&nbsp;future.</p>
  201. <p><cite><em><a data-link-domain="willcrichton.net" href="https://willcrichton.net/notes/portable-epubs/" hreflang="en"
  202. title="Consultation de l’article (anglais)">Portable EPUBs</a>
  203. <a href="/david/cache/2024/ffaf50bf5d5e4cf870a618b518ee5ba7/" hreflang="en"
  204. data-tippy data-description="A proposal for the next generation of portable documents."
  205. data-source="https://willcrichton.net/notes/portable-epubs/"
  206. data-date="2024-01-25"
  207. data-favicon=""
  208. data-domain="willcrichton.net"
  209. ><svg xmlns="http://www.w3.org/2000/svg"
  210. width="24" height="24" viewBox="0 0 24 24" fill="none"
  211. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  212. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  213. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  214. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  215. </svg>
  216. <span class="sr-only">[archive]</span></a></em></cite></p>
  217. </blockquote>
  218. <p>Superbe initiative qui rappelle cruellement ce <a data-link-domain="xkcd.com" href="https://xkcd.com/927/">célèbre XKCD</a> mais qui m’est franchement bien plus utilisable qu’un PDF, quel que soit le lecteur… à part pour en récupérer la source avec mon extracteur maison. Cela me fait découvrir <a data-link-domain="nota-lang.org" href="https://nota-lang.org/">Nota</a> au&nbsp;passage.</p>
  219. <p>Un simple individu peut-il faire bouger des choses dans le&nbsp;domaine&#8239;?</p>
  220. <a href="#hr-52" title="Lien vers cette section de la page"><hr id="hr-52" /></a>
  221. <blockquote>
  222. <p>Les sites et outils numériques que je&nbsp;propose</p>
  223. <p><cite><em><a data-link-domain="eyssette.github.io" href="https://eyssette.github.io/">Cédric&nbsp;Eyssette</a></em></cite></p>
  224. </blockquote>
  225. <p>Beaucoup de belles et frugales choses (autour de markdown) à explorer sur cet&nbsp;espace.</p>
  226. <nav>
  227. <p>
  228. <a href="/david/2024/gratitude/"
  229. title="Liste de tous les articles 2024 associés à cette étiquette"
  230. rel="tag">#gratitude</a>
  231. <a href="/david/2024/partage/"
  232. title="Liste de tous les articles 2024 associés à cette étiquette"
  233. rel="tag">#partage</a>
  234. <a href="/david/2024/psychologie/"
  235. title="Liste de tous les articles 2024 associés à cette étiquette"
  236. rel="tag">#psychologie</a>
  237. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  238. </p>
  239. </nav>
  240. <h2>
  241. <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> <time datetime="2024-01-12">12 janvier 2024</time>
  242. </h2>
  243. <blockquote>
  244. <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
  245. <p>J’écris de deux&nbsp;façons.</p>
  246. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/11/pourquoi" hreflang="fr"
  247. title="Consultation de l’article">je ne sais pas pourquoi</a>
  248. <a href="/david/cache/2024/87c468a4eddabe5d2c28e902d7f17504/" hreflang="fr"
  249. data-tippy data-description=""
  250. data-source="https://www.la-grange.net/2024/01/11/pourquoi"
  251. data-date="2024-01-11"
  252. data-favicon="https://www.la-grange.net/favicon.ico"
  253. data-domain="la-grange.net"
  254. ><svg xmlns="http://www.w3.org/2000/svg"
  255. width="24" height="24" viewBox="0 0 24 24" fill="none"
  256. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  257. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  258. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  259. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  260. </svg>
  261. <span class="sr-only">[archive]</span></a></em></cite></p>
  262. </blockquote>
  263. <p>Karl nous parle de ses moments / lieux d’écriture et de lecture. Je me suis souvent posé cette question et je reconnais des <abbr title="Où Lire, Où Écrire.">oloés</abbr> communs (une <a data-link-domain="tw5.immateriel.fr" href="https://tw5.immateriel.fr/wiki/immateriel/b/YXGEDFB" hreflang="fr"
  264. title="Consultation de l’article">définition par ici</a>
  265. <a href="/david/cache/2024/89dbef9daef24f311b6401cef62f5855/" hreflang="fr"
  266. data-tippy data-description="Une chaise, un lit, un canapé, une baignoire, une place de métro, un banc dans un parc, un muret. Un fauteuil à roulettes, une file d’attente, une branche, une buche, un abri de tramway, une marche d’escalier. Une plage, un kiosque, un socle de statue, un recoin de cafétéria."
  267. data-source="https://tw5.immateriel.fr/wiki/immateriel/b/YXGEDFB"
  268. data-date="2024-01-11"
  269. data-favicon="https://tw5.immateriel.fr/wiki/immateriel/b/favicon.ico"
  270. data-domain="tw5.immateriel.fr"
  271. ><svg xmlns="http://www.w3.org/2000/svg"
  272. width="24" height="24" viewBox="0 0 24 24" fill="none"
  273. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  274. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  275. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  276. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  277. </svg>
  278. <span class="sr-only">[archive]</span></a>). Mes moments et lieux sont beaucoup plus traditionnels, c’est principalement le soir et dans mon bureau-chambre. Mais il n’y a pas de règle stricte pour autant. Parfois, l’envie d’écrire va être trop forte lors d’une lecture en cours de journée, d’autres fois je vais me réveiller tôt et commencer à écrire dans ma tête depuis mon lit ou sous la douche. Une idée peut arriver et/ou s’étirer en faisant du sport ou dans des contextes&nbsp;routiniers.</p>
  279. <p>Et puis il y a l’écriture qui appelle une autre écriture, ce moment de <a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2023/blogging-and-compositing/" hreflang="en"
  280. title="Consultation de l’article (anglais)">compost</a>
  281. <a href="/david/cache/2024/5030196507bcf3e06162e9eaed40abbe/" hreflang="en"
  282. data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
  283. data-source="https://blog.jim-nielsen.com/2023/blogging-and-compositing/"
  284. data-date="2024-01-11"
  285. data-favicon="https://blog.jim-nielsen.com/favicon.ico"
  286. data-domain="blog.jim-nielsen.com"
  287. ><svg xmlns="http://www.w3.org/2000/svg"
  288. width="24" height="24" viewBox="0 0 24 24" fill="none"
  289. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  290. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  291. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  292. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  293. </svg>
  294. <span class="sr-only">[archive]</span></a> où l’on sent qu’il y avait une deuxième vie possible à cette réflexion. Un autre <a href="/david/stream/2018/04/07/">tour de spirale</a>.</p>
  295. <blockquote lang="en">
  296. <p><strong>marketing feels like a layer of veneer, full of shiny promises in order to reel you in, where the goal is to collect you — as a part of an&nbsp;“audience.”</strong></p>
  297. <p>but I think, in this race to “build an audience,” somewhere in the process, something is missing, left behind — perhaps, a sense of humanity, or individual complexity, or truth, or&nbsp;intimacy.</p>
  298. <p>I don’t want to feel like I’m just an email address, an IP address, or a potential “lead.” I want to feel fully seen. human.</p>
  299. <p>[…] instead of “building an audience,” build a world. <mark>build a digital garden-ecosystem, that exists</mark> — first and primarily — <em>for itself</em>. a world that doesn’t need likes, traffic, subscribers, or clicks — in order to validate its&nbsp;existence.</p>
  300. <p><cite><em><a data-link-domain="keningzhu.com" href="https://keningzhu.com/journal/build-a-world-not-an-audience" hreflang="en"
  301. title="Consultation de l’article (anglais)">build a world, not an audience</a>
  302. <a href="/david/cache/2024/cd2fda3dae5d89990f73fbdaa1c3b491/" hreflang="en"
  303. data-tippy data-description="don’t chase your audience, let them find your world."
  304. data-source="https://keningzhu.com/journal/build-a-world-not-an-audience"
  305. data-date="2024-01-11"
  306. data-favicon="https://images.squarespace-cdn.com/content/v1/51e8148de4b01c1eb79c1977/1547586234044-PLNK9XVHXBYWZ5A1673H/favicon.ico?format=100w"
  307. data-domain="keningzhu.com"
  308. ><svg xmlns="http://www.w3.org/2000/svg"
  309. width="24" height="24" viewBox="0 0 24 24" fill="none"
  310. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  311. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  312. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  313. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  314. </svg>
  315. <span class="sr-only">[archive]</span></a></em></cite></p>
  316. </blockquote>
  317. <a href="#hr-26" title="Lien vers cette section de la page"><hr id="hr-26" /></a>
  318. <blockquote lang="en">
  319. <p>These are all very interesting questions but for me, the more pressing question is a slightly different one: which <em>you</em> is your personal site representing? We often don’t pay too much attention to this but <mark>we all have different ways of being&nbsp;ourselves.</mark></p>
  320. <p>So which one of these should my site represent? Should my site be the personal site of the Manu freelance web developer, with his interests in digital typography, minimal design, and simple websites? Or should represent the slightly competitive on the basketball court Manu, who doesn’t really care all that much about winning but is concerned about having fun? Or maybe it should represent Manu the romantic partner, with all his worry about the practical aspects of life but also full of affection for his partner? The list goes on and&nbsp;on.</p>
  321. <p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/the-personality-of-a-personal-website" hreflang="en"
  322. title="Consultation de l’article (anglais)">The personality of a personal website</a>
  323. <a href="/david/cache/2024/e5c1ca8e3beeb0d256a064832c3566aa/" hreflang="en"
  324. data-tippy data-description="With his “ I am a poem I am not software” post Robin touched on an interesting problem related to personal websites. I’m not going to summarise …"
  325. data-source="https://manuelmoreale.com/the-personality-of-a-personal-website"
  326. data-date="2024-01-11"
  327. data-favicon="https://manuelmoreale.com/favicon.ico"
  328. data-domain="manuelmoreale.com"
  329. ><svg xmlns="http://www.w3.org/2000/svg"
  330. width="24" height="24" viewBox="0 0 24 24" fill="none"
  331. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  332. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  333. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  334. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  335. </svg>
  336. <span class="sr-only">[archive]</span></a></em></cite></p>
  337. </blockquote>
  338. <p>Je m’interroge souvent sur ce que j’essaye de cacher ici. Ce que cela raconte de ma personnalité, si l’image retournée est <a data-link-domain="thom4.net" href="https://thom4.net/2023/02/01/carnets/" hreflang="fr"
  339. title="Consultation de l’article">vraiment fidèle</a>
  340. <a href="/david/cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/" hreflang="fr"
  341. data-tippy data-description="J’aurais pu m’en rendre compte il y a vingt ans, mais il me manquait le recul de deux décennies."
  342. data-source="https://thom4.net/2023/02/01/carnets/"
  343. data-date="2024-01-11"
  344. data-favicon="https://thom4.net/assets/favicon-32x32.png"
  345. data-domain="thom4.net"
  346. ><svg xmlns="http://www.w3.org/2000/svg"
  347. width="24" height="24" viewBox="0 0 24 24" fill="none"
  348. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  349. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  350. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  351. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  352. </svg>
  353. <span class="sr-only">[archive]</span></a> après tout. L’écriture en ligne reste une forme d’expression qui s’attend au regard des autres. Si j’entretiens un journal <em>extime</em> depuis tant d’années c’est bien qu’il y a un enjeu à ce niveau&nbsp;là.</p>
  354. <a href="#hr-27" title="Lien vers cette section de la page"><hr id="hr-27" /></a>
  355. <blockquote lang="en">
  356. <p>We shape our structures and afterward our structures shape us, but the <em>we</em> of the first clause and the <em>us</em> of the second <mark>are not the&nbsp;same.</mark></p>
  357. <p><cite><a data-link-domain="erinkissane.com" href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow" hreflang="en"
  358. title="Consultation de l’article (anglais)">Tomorrow &amp; Tomorrow &amp; Tomorrow</a>
  359. <a href="/david/cache/2024/62bf3ce6ef66e39b7f250a6123d92e66/" hreflang="en"
  360. data-tippy data-description="We realize then that it is just the patterns of events in space which are repeating in the building or the town: and nothing else."
  361. data-source="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow"
  362. data-date="2024-01-11"
  363. data-favicon=""
  364. data-domain="erinkissane.com"
  365. ><svg xmlns="http://www.w3.org/2000/svg"
  366. width="24" height="24" viewBox="0 0 24 24" fill="none"
  367. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  368. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  369. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  370. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  371. </svg>
  372. <span class="sr-only">[archive]</span></a></cite></p>
  373. </blockquote>
  374. <p>En rebond de la <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/" hreflang="fr"
  375. title="Consultation de l’article">découverte d’Antoine</a>
  376. <a href="/david/cache/2024/34fec23081019abd741e0578b050c40e/" hreflang="fr"
  377. data-tippy data-description="Je découvre (très) tardivement ce _mantra_, ou plutôt ce positionnement récursif et infini : les pratiques modèlent les outils qui modèlent les pratiques etc."
  378. data-source="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/"
  379. data-date="2024-01-11"
  380. data-favicon=""
  381. data-domain="quaternum.net"
  382. ><svg xmlns="http://www.w3.org/2000/svg"
  383. width="24" height="24" viewBox="0 0 24 24" fill="none"
  384. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  385. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  386. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  387. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  388. </svg>
  389. <span class="sr-only">[archive]</span></a>. Une autre façon d’être&nbsp;dé·formé.</p>
  390. <a href="#hr-28" title="Lien vers cette section de la page"><hr id="hr-28" /></a>
  391. <p>Deux outils autour de la transformation de&nbsp;vidéos&nbsp;:</p>
  392. <ul>
  393. <li><a data-link-domain="ybouane.com" href="https://ybouane.com/ffmpeg-ui">FFMPEG&nbsp;UI</a></li>
  394. <li><a data-link-domain="mifi.no" href="https://mifi.no/losslesscut/">LosslessCut</a></li>
  395. </ul>
  396. <nav>
  397. <p>
  398. <a href="/david/2024/ecriture/"
  399. title="Liste de tous les articles 2024 associés à cette étiquette"
  400. rel="tag">#écriture</a>
  401. <a href="/david/2024/processus/"
  402. title="Liste de tous les articles 2024 associés à cette étiquette"
  403. rel="tag">#processus</a>
  404. <a href="/david/2024/psychologie/"
  405. title="Liste de tous les articles 2024 associés à cette étiquette"
  406. rel="tag">#psychologie</a>
  407. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  408. </p>
  409. </nav>
  410. <form action="/david/recherche/" method="get">
  411. <fieldset>
  412. <legend>Recherche</legend>
  413. <label for="input-search">Termes de votre recherche :</label>
  414. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  415. <input type="submit" value="Chercher">
  416. <p id="indexation-infos">
  417. <small>
  418. Seuls les contenus de ces 8 dernières années sont indexés.
  419. </small>
  420. </p>
  421. </fieldset>
  422. </form>
  423. <aside>
  424. <theme-toggle></theme-toggle>
  425. </aside>
  426. </article>
  427. <hr>
  428. <footer>
  429. <p>
  430. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  431. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  432. <a href="http://larlet.com"
  433. title="Go to my English profile"
  434. data-instant>Pro</a>
  435. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  436. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  437. </p>
  438. <template id="theme-selector">
  439. <form>
  440. <style type="text/css">
  441. fieldset div {
  442. text-align: center;
  443. }
  444. </style>
  445. <fieldset>
  446. <legend>Thème</legend>
  447. <div>
  448. <label>
  449. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  450. Auto
  451. </label>
  452. <label>
  453. <input type="radio" value="dark" name="chosen-color-scheme">
  454. Foncé
  455. </label>
  456. <label>
  457. <input type="radio" value="light" name="chosen-color-scheme">
  458. Clair
  459. </label>
  460. </div>
  461. </fieldset>
  462. </form>
  463. </template>
  464. </footer>
  465. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  466. <script>
  467. class ThemeToggle extends HTMLElement {
  468. constructor() {
  469. super()
  470. const themeSelectorTemplate = document.querySelector('#theme-selector')
  471. const form = themeSelectorTemplate.content.firstElementChild
  472. this.attachShadow({ mode: 'open' })
  473. this.shadowRoot.appendChild(form.cloneNode(true))
  474. }
  475. connectedCallback() {
  476. const form = this.shadowRoot.querySelector('form')
  477. form.addEventListener('change', (e) => {
  478. const chosenColorScheme = e.target.value
  479. localStorage.setItem('theme', chosenColorScheme)
  480. toggleTheme(chosenColorScheme)
  481. })
  482. const selectedTheme = localStorage.getItem('theme')
  483. if (selectedTheme && selectedTheme !== 'undefined') {
  484. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  485. }
  486. }
  487. }
  488. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  489. window.addEventListener('load', () => {
  490. let colorsLayer = undefined
  491. let hasDarkRules = false
  492. for (const styleSheet of Array.from(document.styleSheets)) {
  493. let mediaRules = []
  494. for (const layerRule of styleSheet.cssRules) {
  495. if (!(layerRule instanceof CSSLayerBlockRule)) {
  496. continue
  497. }
  498. if (layerRule.name === 'colors') {
  499. colorsLayer = layerRule
  500. }
  501. for (const cssRule of layerRule.cssRules) {
  502. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  503. continue
  504. }
  505. // WARNING: Safari does not have/supports `conditionText`.
  506. if (cssRule.conditionText) {
  507. if (cssRule.conditionText !== prefersColorSchemeDark) {
  508. continue
  509. }
  510. } else {
  511. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  512. continue
  513. }
  514. }
  515. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  516. }
  517. }
  518. // WARNING: do not try to insert a Rule to a styleSheet you are
  519. // currently iterating on, otherwise the browser will be stuck
  520. // in a infinite loop…
  521. for (const mediaRule of mediaRules) {
  522. // Safari requires the `0` second parameter (even if default).
  523. colorsLayer.insertRule(mediaRule.cssText, 0)
  524. hasDarkRules = true
  525. }
  526. }
  527. if (hasDarkRules) {
  528. if ('customElements' in window && !customElements.get('theme-toggle')) {
  529. customElements.define('theme-toggle', ThemeToggle)
  530. }
  531. }
  532. })
  533. </script>
  534. </body>
  535. </html>