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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312
  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 #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_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  111. data-instant-intensity="viewport-all">
  112. <header>
  113. <h1>Publications relatives au tag #psychologie</h1>
  114. </header>
  115. <nav>
  116. <p class="center">
  117. <a href="/david/" title="Aller à l’accueil">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. • <a rel="tags"
  123. href="/david/#tags-2023"
  124. title="Liste de toutes les étiquettes">
  125. <svg class="icon icon-tags">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  127. </svg>
  128. Étiquettes</a>
  129. </p>
  130. </nav>
  131. <hr>
  132. <main>
  133. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  134. <h2>
  135. <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> (2024-01-12)
  136. </h2>
  137. <blockquote>
  138. <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
  139. <p>J’écris de deux&nbsp;façons.</p>
  140. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/11/pourquoi">je ne sais pas pourquoi</a> <a href="/david/cache/2024/87c468a4eddabe5d2c28e902d7f17504/" title="Copie locale au 2024-01-11">[archive]</a></em></cite></p>
  141. </blockquote>
  142. <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">définition par ici</a> <a href="/david/cache/2024/89dbef9daef24f311b6401cef62f5855/" title="Copie locale au 2024-01-11">[archive]</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>
  143. <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/">compost</a> <a href="/david/cache/2024/5030196507bcf3e06162e9eaed40abbe/" title="Copie locale au 2024-01-11">[archive]</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>
  144. <blockquote lang="en">
  145. <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>
  146. <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>
  147. <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>
  148. <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>
  149. <p><cite><em><a data-link-domain="keningzhu.com" href="https://keningzhu.com/journal/build-a-world-not-an-audience">build a world, not an audience</a> <a href="/david/cache/2024/cd2fda3dae5d89990f73fbdaa1c3b491/" title="Copie locale au 2024-01-11">[archive]</a></em></cite></p>
  150. </blockquote>
  151. <hr />
  152. <blockquote lang="en">
  153. <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>
  154. <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>
  155. <p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/the-personality-of-a-personal-website">The personality of a personal website</a> <a href="/david/cache/2024/e5c1ca8e3beeb0d256a064832c3566aa/" title="Copie locale au 2024-01-11">[archive]</a></em></cite></p>
  156. </blockquote>
  157. <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/">vraiment fidèle</a> <a href="/david/cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/" title="Copie locale au 2024-01-11">[archive]</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>
  158. <hr />
  159. <blockquote lang="en">
  160. <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>
  161. <p><cite><a data-link-domain="erinkissane.com" href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow">Tomorrow &amp; Tomorrow &amp; Tomorrow</a> <a href="/david/cache/2024/62bf3ce6ef66e39b7f250a6123d92e66/" title="Copie locale au 2024-01-11">[archive]</a></cite></p>
  162. </blockquote>
  163. <p>En rebond de la <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/">découverte d’Antoine</a> <a href="/david/cache/2024/34fec23081019abd741e0578b050c40e/" title="Copie locale au 2024-01-11">[archive]</a>. Une autre façon d’être&nbsp;dé·formé.</p>
  164. <hr />
  165. <p>Deux outils autour de la transformation de&nbsp;vidéos&nbsp;:</p>
  166. <ul>
  167. <li><a data-link-domain="ybouane.com" href="https://ybouane.com/ffmpeg-ui">FFMPEG&nbsp;UI</a></li>
  168. <li><a data-link-domain="mifi.no" href="https://mifi.no/losslesscut/">LosslessCut</a></li>
  169. </ul>
  170. </main>
  171. <hr>
  172. <footer>
  173. <p>
  174. <nobr>
  175. <a href="/david/" title="Aller à l’accueil">
  176. <svg class="icon icon-home">
  177. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  178. </svg>
  179. Accueil</a>
  180. </nobr>
  181. <nobr>
  182. <a href="/david/log/" title="Accès au flux RSS">
  183. <svg class="icon icon-rss2">
  184. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  185. </svg>
  186. Suivre</a>
  187. </nobr>
  188. <nobr>
  189. <a href="http://larlet.com"
  190. title="Go to my English profile"
  191. data-instant>
  192. <svg class="icon icon-user-tie">
  193. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  194. </svg>
  195. Pro</a>
  196. </nobr>
  197. <nobr>
  198. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  199. <svg class="icon icon-mail">
  200. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  201. </svg>
  202. Email</a>
  203. </nobr>
  204. <nobr>
  205. <abbr class="nowrap"
  206. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  207. <svg class="icon icon-hammer2">
  208. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  209. </svg>
  210. Légal</abbr>
  211. </nobr>
  212. </p>
  213. <template id="theme-selector">
  214. <form>
  215. <fieldset>
  216. <legend>
  217. <svg class="icon icon-brightness-contrast">
  218. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  219. </svg>
  220. Thème
  221. </legend>
  222. <label>
  223. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  224. Auto
  225. </label>
  226. <label>
  227. <input type="radio" value="dark" name="chosen-color-scheme">
  228. Foncé
  229. </label>
  230. <label>
  231. <input type="radio" value="light" name="chosen-color-scheme">
  232. Clair
  233. </label>
  234. </fieldset>
  235. </form>
  236. </template>
  237. </footer>
  238. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  239. <script>
  240. function loadThemeForm(templateName) {
  241. const themeSelectorTemplate = document.querySelector(templateName)
  242. const form = themeSelectorTemplate.content.firstElementChild
  243. themeSelectorTemplate.replaceWith(form)
  244. form.addEventListener('change', (e) => {
  245. const chosenColorScheme = e.target.value
  246. localStorage.setItem('theme', chosenColorScheme)
  247. toggleTheme(chosenColorScheme)
  248. })
  249. const selectedTheme = localStorage.getItem('theme')
  250. if (selectedTheme && selectedTheme !== 'undefined') {
  251. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  252. }
  253. }
  254. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  255. window.addEventListener('load', () => {
  256. let hasDarkRules = false
  257. for (const styleSheet of Array.from(document.styleSheets)) {
  258. let mediaRules = []
  259. for (const cssRule of styleSheet.cssRules) {
  260. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  261. continue
  262. }
  263. // WARNING: Safari does not have/supports `conditionText`.
  264. if (cssRule.conditionText) {
  265. if (cssRule.conditionText !== prefersColorSchemeDark) {
  266. continue
  267. }
  268. } else {
  269. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  270. continue
  271. }
  272. }
  273. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  274. }
  275. // WARNING: do not try to insert a Rule to a styleSheet you are
  276. // currently iterating on, otherwise the browser will be stuck
  277. // in a infinite loop…
  278. for (const mediaRule of mediaRules) {
  279. styleSheet.insertRule(mediaRule.cssText)
  280. hasDarkRules = true
  281. }
  282. }
  283. if (hasDarkRules) {
  284. loadThemeForm('#theme-selector')
  285. }
  286. })
  287. </script>
  288. </body>
  289. </html>