A place to cache linked articles (think custom and personal wayback machine)
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 14KB

4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
4 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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>
  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>Garder une trace de ses lectures (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://bribesdereel.net/traces-de-lectures">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Garder une trace de ses lectures</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://bribesdereel.net/traces-de-lectures" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p>Je lis trop peu de livres depuis quelques années, ça je le sais. J’en parle encore moins ici et n’en garde que très rarement une trace (surtout si ce sont des livres empruntés).</p>
  69. <p>Impossible donc de lister les lectures de l’année. C’est la même chose chaque année, je le déplore et je réitère la même erreur. La lecture prend toujours une place considérable dans ma vie, mais elle est devenue parcellaire, découpée entre blogs, presse, divers sites web et fils Twitter.</p>
  70. <p>J’aimerais garder une trace de mes découvertes culturelles, des réflexions et des émotions liées et constituer progressivement un corpus de références et de ressources où me replonger plus tard si je le souhaite.</p>
  71. <h2>Chez les autres</h2>
  72. <p>Curieuse, je suis allée (re)voir ce que font les personnes que je lis.</p>
  73. <p>Je consulte régulièrement la rubrique <a href="https://lalunemauve.fr/inspiration/lectures/">Lectures de la Lune Mauve</a><sup id="fnref:consigner"><a href="#fn:consigner" aria-label="note de bas de page 1">1</a></sup>, les <a href="https://chutmamanlit.com/category/lectures/">recommandations de Chut, Maman lit !</a> ou encore les chroniques de <a href="https://danslanebuleuse.fr/category/lectures/">La Nébuleuse</a>.</p>
  74. <p>J’ai adoré la série des <a href="https://grignotages.com/les-piles-horizontales-8/">piles horizontales</a> chez Grignotages et apprécie ses <a href="https://grignotages.com/tag/bulles-de-bd/">bulles de BD</a>.</p>
  75. <p>J’admire particulièrement l’organisation de la <a href="https://biblio.metrozendodo.fr/">bibliothèque-catalogue</a> d’Anthony Nelzin-Santos et les multiples connexions et liens possibles entre les livres à travers les mots-clés, les localisations, les auteurs ou les années.</p>
  76. <p>J’ai aussi demandé à une amie et elle liste ses lectures sur SensCritique faute de mieux, mais tenait à jour un fichier Excel.</p>
  77. <h2>Chez moi</h2>
  78. <p>À partir de là, j’ai réfléchi à ce que je souhaitais pour moi.</p>
  79. <p>Je suis une diariste dilettante et étourdie qui retrouve des carnets entamés dix ans plus tôt… Si l’option journal de lecture papier est séduisante, je sais donc déjà que ça ne m’ira pas.</p>
  80. <p>Je ne veux pas non plus dépendre d’une plateforme « gratuite » que je ne maîtrise pas et dont les règles pourraient changer du jour au lendemain<sup id="fnref:insta"><a href="#fn:insta" aria-label="note de bas de page 2">2</a></sup>. Exit donc Goodreads, SensCritique ou Babelio.</p>
  81. <p>À ce stade, plusieurs pistes :</p>
  82. <ul>
  83. <li>L’austère, mais puissant, <a href="https://ig.hypotheses.org/1282">Zotero</a> : particulièrement adapté pour les revues et articles scientifiques que j’essaie de continuer à lire régulièrement, mais difficile à appréhender et surdimensionné pour mes besoins.</li>
  84. <li>Le gestionnaire de marques-pages et de notes, <a href="https://github.com/shaarli/Shaarli">Shaarli</a> : pas de possibilité de rajouter simplement des images et pour les notes, c’est un peu léger (pas de balisage Markdown par exemple). Il nécessiterait sans doute trop d’adaptations néanmoins.</li>
  85. <li>Un journal <a href="https://dayoneapp.com/pricing/">DayOne</a> : l’application est hyper pratique et jolie. Possibilité de partager des entrées (sans doute pas de manière accessible par contre…) si on le souhaite. Je l’utilisais occasionnellement jusqu’à ce que la synchro iOS/MacOS devienne payante et l’utilise encore ponctuellement sur mon téléphone. <br/>Si je décide de limiter l’application au téléphone, peut-être que la version basique pourrait suffire dans un premier temps avant de passer sur la version payante si je vois que l’outil me convient bien.</li>
  86. <li>Mon blog (Dotclear) avec une rubrique dédiée que je ferai évoluer progressivement.</li>
  87. <li>Un autre <a href="https://dotclear.org/">Dotclear</a> ou un <a href="https://fr.wordpress.org/download/">WordPress</a> : potentiellement techniquement lourd pour obtenir un résultat satisfaisant.</li>
  88. <li>Un <span lang="en">flat</span> CMS comme <a href="https://getkirby.com/">Kirby</a> : plus léger qu’un CMS classique, ça serait également une bonne occasion pour le tester !</li>
  89. </ul>
  90. <p>Je ne suis pas certaine de vouloir rendre toutes mes lectures publiques donc il faut que les outils web publics aient une option pour garder certains éléments privés. A priori, c’est le cas de tous les outils listés.</p>
  91. <p>J’ai fini par comprendre que rédiger des chroniques régulièrement ne me convenait pas et que je n’avais pas à m’imposer ce format. J’ai toujours trouvé l’exercice difficile, extrêmement chronophage et peu satisfaisant. Il est probable aussi que mes envies et mes besoins évoluent et je ne voudrais pas être bloquée dans un carcan trop rigide.</p>
  92. <p>Le format de départ et l’outil doivent être suffisamment flexibles. Idéalement, j’aimerais même que chaque entrée soit versionnée et que je puisse voir le diff <span aria-label="nerd" lang="en" role="img">🤓</span>. Je veux pouvoir créer des ponts et des connexions avec les contenus pour avoir de multiples entrées et effectuer facilement des recherches.</p>
  93. <p>Surtout, je dois garder en tête que le tout doit être suffisamment simple à mettre en place au départ pour que cela devienne une routine agréable.</p>
  94. <p>Si je résume où j’en suis de mon carnet de lecture idéal :</p>
  95. <ol>
  96. <li><strong>Format numérique</strong>, au risque de continuer mes notes papier comme le Petit Poucet.</li>
  97. <li><strong>Simple à mettre en place</strong> et à utiliser.</li>
  98. <li><strong>Outil ouvert, pérenne et fiable</strong> : à minima les données doivent être facilement exportables et exploitables par la suite. Les sauvegardes doivent être automatisables idéalement.</li>
  99. <li><strong>Contenu public et privé à la fois</strong>. Pouvoir le partager avec d’autres personnes n’est pas une priorité, mais serait la framboise sur le gâteau. Important : si partie publique, elle doit être accessible ou pouvoir être rendue accessible.</li>
  100. <li><strong>Format flexible et personnalisable</strong> avec de multiples entrées notamment.</li>
  101. <li><strong>Illustré</strong> avec les couvertures des livres.</li>
  102. <li><strong>Historisé</strong> et versionnable, si possible.</li>
  103. </ol>
  104. <h2>Et vous, vous faites comment ?</h2>
  105. <p>Je suis très curieuse de savoir si vous gardez une trace de vos lectures ou non. Si vous les partagez et si oui comment ? Quels seraient les critères de votre journal de lecture ?</p>
  106. <p>Addendum - 27 décembre 2019. Coïncidence (ou non), <a href="https://twitter.com/viet_t_nguyen/status/1210365528138608640?s=20">Viet Thanh Nguyen</a>, un auteur vietnamien américain, explique dans un tweet qu’il utilise un fichier Excel pour suivre ses lectures qui lui permet d’avoir quelques statistiques (genre, race, nationalité) et ainsi d’équilibrer ses lectures.</p>
  107. </main>
  108. </article>
  109. <hr>
  110. <footer>
  111. <p>
  112. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  113. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  114. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  115. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  116. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  117. </p>
  118. <template id="theme-selector">
  119. <form>
  120. <fieldset>
  121. <legend>Thème</legend>
  122. <label>
  123. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  124. </label>
  125. <label>
  126. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  127. </label>
  128. <label>
  129. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  130. </label>
  131. </fieldset>
  132. </form>
  133. </template>
  134. </footer>
  135. <script type="text/javascript">
  136. function loadThemeForm(templateName) {
  137. const themeSelectorTemplate = document.querySelector(templateName)
  138. const form = themeSelectorTemplate.content.firstElementChild
  139. themeSelectorTemplate.replaceWith(form)
  140. form.addEventListener('change', (e) => {
  141. const chosenColorScheme = e.target.value
  142. localStorage.setItem('theme', chosenColorScheme)
  143. toggleTheme(chosenColorScheme)
  144. })
  145. const selectedTheme = localStorage.getItem('theme')
  146. if (selectedTheme && selectedTheme !== 'undefined') {
  147. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  148. }
  149. }
  150. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  151. window.addEventListener('load', () => {
  152. let hasDarkRules = false
  153. for (const styleSheet of Array.from(document.styleSheets)) {
  154. let mediaRules = []
  155. for (const cssRule of styleSheet.cssRules) {
  156. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  157. continue
  158. }
  159. // WARNING: Safari does not have/supports `conditionText`.
  160. if (cssRule.conditionText) {
  161. if (cssRule.conditionText !== prefersColorSchemeDark) {
  162. continue
  163. }
  164. } else {
  165. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  166. continue
  167. }
  168. }
  169. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  170. }
  171. // WARNING: do not try to insert a Rule to a styleSheet you are
  172. // currently iterating on, otherwise the browser will be stuck
  173. // in a infinite loop…
  174. for (const mediaRule of mediaRules) {
  175. styleSheet.insertRule(mediaRule.cssText)
  176. hasDarkRules = true
  177. }
  178. }
  179. if (hasDarkRules) {
  180. loadThemeForm('#theme-selector')
  181. }
  182. })
  183. </script>
  184. </body>
  185. </html>