Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  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>Tag #alterego — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #alterego">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #alterego</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a>
  66. • <a rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2021/12/15/" title="Lien permanent vers cet article">Externaliser</a> (2021-12-15)</h2>
  75. <blockquote lang="en">
  76. <p>If I could transform these handwritten words into pixel words, then <mark>it wouldn’t be too hard to convert that into the HTML code for a website</mark>.</p>
  77. <p>I took a photo of the page with my phone, and eagerly fed the image into some software that could recognise handwriting.</p>
  78. <p>[…]</p>
  79. <p>I also built a basic editor that let me add links, images and headings to make the website more interesting.</p>
  80. <p>Can you build a website from a piece of paper? It seemed like it.</p>
  81. <p>Was it practical to use paper for a <em>real</em> website though? No idea.</p>
  82. <p><cite><em><a href="https://daily.tinyprojects.dev/paper_website">I blew $720&nbsp;on 100&nbsp;notebooks from Alibaba and started a Paper Website business</a></em> (<a href="/david/cache/2021/03231d16f7d9d5b1b79d5b8dbee036d7/">cache</a>)</cite></p>
  83. </blockquote>
  84. <p>C’est la même personne qui avait déjà <a href="/david/2021/03/15/" title="Partage">partagé</a> une <a href="https://tinyprojects.dev/projects/mailoji">autre expérience chouette</a> (<a href="/david/cache/2021/45af171610f986077420b27c2da46ec1/">cache</a>). J’aime bien le fait que ça soit moins technique que <a href="https://www.la-grange.net/2021/09/27/brievement">ce que proposait Karl</a> (<a href="/david/cache/2021/a788656928c6dc9e5313e3548fd1349b/">cache</a>). Et moins il y a de technique… moins ça gèle&nbsp;:-).</p>
  85. <p>En <a href="/david/2021/10/07/" title="Consigner">consignant</a> une idée, j’ai un moyen de m’en rappeler et je m’en libère à la fois. J’ai <a href="https://nota-bene.org/L-illusion-du-besoin">besoin</a> (<a href="/david/cache/2021/28ee87f803ccadb58dc707bada996443/">cache</a>) de l’externaliser pour pouvoir y échapper.</p>
  86. <p>Assez contre-intuitif, j’en conviens.</p>
  87. <h2><a href="/david/2021/12/11/" title="Lien permanent vers cet article">Lettre</a> (2021-12-11)</h2>
  88. <blockquote>
  89. <p>Et c’est là une de tes plus grandes futures victoires. C’est que si c’est dur aujourd’hui, si tu ne comprends rien, si tu n’arrives pas à saisir ce qui ne colle pas, c’est parce que tu n’es pas dans le bon contexte pour toi. <mark>Un contexte qui te permette d’être totalement toi-même</mark>, sans avoir à créer de carapace ou de tenir une posture qui serait «&nbsp;suffisamment professionnelle&nbsp;» par exemple.</p>
  90. <p>Ces personnes-là vont t’accepter toi tout entière, que tu ailles bien ou non, que tu sois sûre de ce que tu dis ou que tu tâtonnes, que tu sois vulnérable ou confiante.</p>
  91. <p>Et c’est ça, <strong>ça</strong> qui va <strong>tout</strong> changer.</p>
  92. <p><cite><em><a href="https://www.24joursdeweb.fr/2021/lettre-a-la-moi-du-passe/">Lettre à la moi du passé</a></em> (<a href="/david/cache/2021/9ea0164556a804fd412156887c903e8d/">cache</a>)</cite></p>
  93. </blockquote>
  94. <p>On entre dans une autre dimension (pas que temporelle) avec l’intervention de Maïtané dans 24joursdeweb.</p>
  95. <p>Je suis tellement content d’avoir modestement accompagné cette transformation… qui a participé à la mienne&#8239;! Lorsqu’on cherche tou·tes un <a href="/david/2021/11/29/" title="Sens">sens</a>, on finit parfois par faire un bout de chemin ensemble dans la même direction. Et c’est chouette.</p>
  96. <h2><a href="/david/2021/12/04/" title="Lien permanent vers cet article">Colophon</a> (2021-12-04)</h2>
  97. <blockquote lang="en">
  98. <p>My goal with Colophon Cards is to create a web-based note-taking app for bookmarking and reading websites, ebooks, and documents. <mark>It needs to find a balance between ease-of-use and advanced features.</mark> It should have a user-subjective sharing model built in from the start where data is shared while the organisation is specific to each. Finally, it needs to provide straightforward tools for turning notes into documents for sharing with others.</p>
  99. <p><cite><em><a href="https://www.colophon.cards/">The Making of Colophon Cards</a></em> (<a href="/david/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/">cache</a>)</cite></p>
  100. </blockquote>
  101. <p>Baldur Bjarnason parle encore davantage de <a href="https://www.baldurbjarnason.com/2021/making-colophon-cards/">la démarche et du contexte</a> (<a href="/david/cache/2021/ce35c82f8b3985d20202076871f169a8/">cache</a>) sur son blog.</p>
  102. <p>C’est fascinant à quel point c’est proche de mes <a href="/david/2021/10/07/" title="Consigner">préoccupations</a> <a href="/david/2021/10/13/" title="Prodiverse">actuelles</a> et le fait que ce soit documenté de manière ouverte m’apporte beaucoup, notamment en ce qui concerne le <a href="https://www.colophon.cards/notes/01-design-notes/">design général</a> (<a href="/david/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/">cache</a>) mais aussi les explorations <a href="https://www.colophon.cards/notes/whither-cards/">côté interactions</a> (<a href="/david/cache/2021/b3336418889958b9094059ebb5b761f2/">cache</a>).</p>
  103. <h2><a href="/david/2021/11/29/" title="Lien permanent vers cet article">Sens</a> (2021-11-29)</h2>
  104. <details>
  105. <summary>Déplier pour lire le contenu de la publication</summary>
  106. <blockquote lang="en">
  107. <p>In software, participatory sense-making means developing a shared mental model of what the software is, what it’s going to be, and how it works. We need to understand what we’re building deeply, with a clear language to talk about it. <mark>It needs to make sense to each of us, and to all of us.</mark> We construct this model together: that means there’s more of us to work at making it real in the world. It also means the model is richer, fits with more of the real world, and more rigorous. This comes from our many perspectives participating.</p>
  108. <p><cite><em><a href="https://jessitron.com/2021/11/28/software-development-pushes-us-to-get-better-as-people/">Software development pushes us to get better as people</a></em> (<a href="/david/cache/2021/3db656ea2c3a04a3fb00d9e3457a8a2e/">cache</a>)</cite></p>
  109. </blockquote>
  110. <p>Cet article m’a rappelé que je deviens une meilleure personne grâce aux personnes avec lesquelles j’évolue ces dernières années. Prendre soin <em>ensemble</em> c’est aller bien au-delà de son propre confort. C’est ce cheminement là qui permet d’apporter de la valeur à ce qui est produit… et à ce qui est vécu.</p>
  111. </details>
  112. <h2><a href="/david/2021/11/17/" title="Lien permanent vers cet article">Apprentissages</a> (2021-11-17)</h2>
  113. <details>
  114. <summary>Déplier pour lire le contenu de la publication</summary>
  115. <p>Ça fait pas mal de temps que je trouve inspirant ce qu’a fait Simon Willison avec <a href="https://til.simonwillison.net/">ses <abbr title="Thing’s I’ve Learned" lang="en">TIL</abbr></a>. Une façon de partager des frictions techniques quotidiennes pour documenter — et potentiellement aider d’autres personnes.</p>
  116. <p>Ce serait une bonne occasion d’essayer <a href="https://datasette.io/">datasette</a> aussi mais c’est peut-être un peu trop dynamique à mon goût. Idéalement, ce serait déposer des bouts de code sur <a href="https://sr.ht/~davidbgk/">sourcehut</a> et les <a href="https://srht.site/automating-deployments">déployer automatiquement</a> là-bas aussi, sur mon <a href="https://srht.site/custom-domains">propre sous-domaine</a>.</p>
  117. <p>Je vais laisser cette idée mâturer un peu, ça pourrait faire l’objet d’un cru 2022.</p>
  118. </details>
  119. <h2><a href="/david/2021/11/02/" title="Lien permanent vers cet article">Réflexion</a> (2021-11-02)</h2>
  120. <details>
  121. <summary>Déplier pour lire le contenu de la publication</summary>
  122. <blockquote lang="en">
  123. <p>This website is essentially a repository of my memories, lessons I’ve learnt, insights I’ve discovered, a changelog of my previous selves. Most people build a map of things they have learnt, <mark>I am building a map of how I have come to be, in case I may get lost again.</mark> Maybe someone else interested in a similar lonely path will feel less alone with my documented footprints. Maybe that someone else would be me in the future.</p>
  124. <p><cite><em><a href="https://winnielim.org/experiments/website/this-website-as-a-learning-and-reflection-tool/">this website as a learning and reflection tool</a></em> (<a href="/david/cache/2021/532af45eef948b36907a25f63c6eb95f/">cache</a>)</cite></p>
  125. </blockquote>
  126. <p>Je pourrais citer tellement de parties de cet article que ça en est troublant. Quelqu’un, quelque part se pose aussi plein de questions et les partage. C’est chouette.</p>
  127. <p>Je retiens, entre autres, que je pourrais soigner la façon dont on peut faire des requêtes dans ces données. J’aime bien le fait que l’on puisse récupérer <a href="https://git.larlet.fr/davidbgk/larlet-fr-david">les sources</a> (<a href="https://git.larlet.fr/davidbgk/larlet-fr-david-cache">cache&#8239;!</a>) et faire une recherche <em>full-text</em> mais c’est pas super accessible. Et quand même limité en terme de navigation(s). Si je suis mon premier explorateur, de quelle manière est-ce que j’aimerais (re)découvrir mon ancien moi&#8239;? On a rarement l’occasion d’être aussi mégalo&nbsp;:-).</p>
  128. <p>Merci <a href="https://www.hypothermia.fr/">Eli</a>.</p>
  129. </details>
  130. <h2><a href="/david/2021/02/04/" title="Lien permanent vers cet article">Chance</a> (2021-02-04)</h2>
  131. <details>
  132. <summary>Déplier pour lire le contenu de la publication</summary>
  133. <blockquote>
  134. <p>And it’s not just that programmers and IT folks in general had very little to complain about when it comes to the pandemic, <mark>we’re a really, really privileged bunch</mark> <em>in general</em>. We get preferred visa treatment which makes us one of the most mobile work forces, our profession is universally recognized even if we did not actually get a degree, we can work from home and we’re monetarily compensated in a way that even juniors coming from a few month training will out-earn many studied professions.</p>
  135. <p><cite><em><a href="https://lucumr.pocoo.org/2021/2/5/be-humble/">Be Humble</a></em> (<a href="/david/cache/2021/deb0e4b7e744eb8767d1ad803c7922f3/">cache</a>)</cite></p>
  136. </blockquote>
  137. <p>Il y a des coincidences comme celle-ci. On me demande ce que j’ai réalisé après une année de pandémie. Je réponds que j’ai pris conscience de la chance que j’ai, de par mes privilèges et mon mode de vie. Je regarde mon agrégateur 30&nbsp;minutes plus tard et il y a ce billet d’Armin.</p>
  138. <p>J’ai également réalisé que je n’avais pas parlé anglais depuis plus d’un an… mes interlocuteur·ices probablement aussi&#8239;!</p>
  139. </details>
  140. </main>
  141. <hr>
  142. <footer>
  143. <p>
  144. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  145. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  146. </svg> Accueil</a> •
  147. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  148. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  149. </svg> Suivre</a> •
  150. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  151. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  152. </svg> Pro</a> •
  153. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  154. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  155. </svg> Email</a> •
  156. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  157. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  158. </svg> Légal</abbr>
  159. </p>
  160. <template id="theme-selector">
  161. <form>
  162. <fieldset>
  163. <legend><svg class="icon icon-brightness-contrast">
  164. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  165. </svg> Thème</legend>
  166. <label>
  167. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  168. </label>
  169. <label>
  170. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  171. </label>
  172. <label>
  173. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  174. </label>
  175. </fieldset>
  176. </form>
  177. </template>
  178. </footer>
  179. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  180. <script>
  181. function loadThemeForm(templateName) {
  182. const themeSelectorTemplate = document.querySelector(templateName)
  183. const form = themeSelectorTemplate.content.firstElementChild
  184. themeSelectorTemplate.replaceWith(form)
  185. form.addEventListener('change', (e) => {
  186. const chosenColorScheme = e.target.value
  187. localStorage.setItem('theme', chosenColorScheme)
  188. toggleTheme(chosenColorScheme)
  189. })
  190. const selectedTheme = localStorage.getItem('theme')
  191. if (selectedTheme && selectedTheme !== 'undefined') {
  192. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  193. }
  194. }
  195. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  196. window.addEventListener('load', () => {
  197. let hasDarkRules = false
  198. for (const styleSheet of Array.from(document.styleSheets)) {
  199. let mediaRules = []
  200. for (const cssRule of styleSheet.cssRules) {
  201. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  202. continue
  203. }
  204. // WARNING: Safari does not have/supports `conditionText`.
  205. if (cssRule.conditionText) {
  206. if (cssRule.conditionText !== prefersColorSchemeDark) {
  207. continue
  208. }
  209. } else {
  210. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  211. continue
  212. }
  213. }
  214. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  215. }
  216. // WARNING: do not try to insert a Rule to a styleSheet you are
  217. // currently iterating on, otherwise the browser will be stuck
  218. // in a infinite loop…
  219. for (const mediaRule of mediaRules) {
  220. styleSheet.insertRule(mediaRule.cssText)
  221. hasDarkRules = true
  222. }
  223. }
  224. if (hasDarkRules) {
  225. loadThemeForm('#theme-selector')
  226. }
  227. })
  228. </script>
  229. </body>
  230. </html>