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

hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
hace 3 años
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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>Réparation — David Larlet</title>
  13. <meta name="description" content="A heavier and well-designed object feels different. You don’t have it always with you just in case. You don’t throw it in your bag without thinking about it. It is not there to relieve you from your boredom. Instead, moving the object is a commitment. A conscious act that you need it. You feel it in your hands, you feel the weight. You are telling the object: « I need you. You have a purpose. » When such a commitment is done, the purpose is rarely « scroll an endless stream of cat videos ». Having a purpose makes it harder to throw the object away because a shiny new version has been released. It also helps draw the line between the times where you are using the object and the times you are not.">
  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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Réparation</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/02/04/" title="Publication précédente : Chance">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/02/06/" title="Publication suivante : Dystopie">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote lang="en">
  68. <p>A heavier and well-designed object feels different. You don’t have it always with you just in case. You don’t throw it in your bag without thinking about it. It is not there to relieve you from your boredom. Instead, moving the object is a commitment. A conscious act that you need it. You feel it in your hands, you feel the weight. You are telling the object: «&nbsp;I need you. You have a purpose.&nbsp;» When such a commitment is done, the purpose is rarely «&nbsp;scroll an endless stream of cat videos&nbsp;». <mark>Having a purpose makes it harder to throw the object away because a shiny new version has been released.</mark> It also helps draw the line between the times where you are using the object and the times you are not.</p>
  69. <p>Besides sturdiness, one main objective from the ForeverComputer would be to use as little electricity as possible. Batteries should be easily swappable.</p>
  70. <p><cite><em><a href="https://ploum.net/the-computer-built-to-last-50-years/">The computer built to last 50&nbsp;years</a></em> (<a href="/david/cache/2021/c4dd46c6f0fe9310b47dd3abda0b5280/">cache</a>)</cite></p>
  71. </blockquote>
  72. <p>Superbe initiative. Je suis en train de creuser le monde de la vidéo et (bien que chaque fabricant de matériel ait son propre format, batterie, stockage, etc.) je me demandais à quoi pourrait ressembler un ordinateur avec écran indépendant et alimenté par sa propre batterie comme ceux que l’on peut connecter à une caméra depuis son port HDMI. Je vois bien la contrainte mais je vois aussi la modularité et la possibilité de changer des pièces indépendamment les unes des autres.</p>
  73. <p>Un petit bémol sur la partie chiffrement, je ne pense pas que ce soit un pré-requis pertinent pour limiter la consommation énergétique de ce ForeverComputer. À la limite, un hash pour vérifier l’intégrité des fichiers après leur copie et suivre leur évolution mais tout ce qui a trait à la cryptographie évolue trop au cours du temps à mon avis. Sans compter qu’en perdant la clé de déchiffrement, on perd les contenus qui vont avec, ce qui me semble à l’opposé de l’idée de pouvoir les conserver plusieurs décennies.</p>
  74. <p>J’apprécie aussi l’approche qui consiste à commencer par faire un petit pas avec WriteOnly qui permettrait de tester la partie usage avant de passer à la suite.</p>
  75. <blockquote lang="en">
  76. <p>To mend is to comprehend a human scale problem, and without this understanding our creations become strange creatures. We see this in the common examples of our time, from architecture to websites: <mark>Things used daily that, inexplicably, do not seem to be invented for human use.</mark> In the case of housing, bad architecture treats a human-scale environment as if it were a commodity-scale problem. The creators of some places see inhabitants not as humans but parameters. I do not need to spoil your view with visions of this architecture, I only wonder, what have their creators ever repaired?</p>
  77. <p><cite><em><a href="https://simonsarris.substack.com/p/that-which-is-unique-breaks">That which is unique, breaks</a></em> (<a href="/david/cache/2021/6ad5b5985682512c140781b2b3c9ff7c/">cache</a>)</cite></p>
  78. </blockquote>
  79. <nav>
  80. <p>
  81. <a href="/david/2021/capitalocene/"
  82. title="Liste de tous les articles associés à cette étiquette"
  83. >#capitalocène</a>
  84. <a href="/david/2021/frugalite/"
  85. title="Liste de tous les articles associés à cette étiquette"
  86. >#frugalité</a>
  87. <a href="/david/2021/technique/"
  88. title="Liste de tous les articles associés à cette étiquette"
  89. >#technique</a>
  90. <a href="/david/#tags"
  91. title="Liste de toutes les étiquettes existantes"
  92. ><svg class="icon icon-tags">
  93. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  94. </svg> tous ?</a>
  95. </p>
  96. </nav>
  97. <nav>
  98. <p class="center">
  99. <a rel="prev" href="/david/2021/02/04/" title="Publication précédente : Chance">← Précédent</a> •
  100. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  101. • <a rel="next" href="/david/2021/02/06/" title="Publication suivante : Dystopie">Suivant →</a>
  102. </p>
  103. </nav>
  104. </article>
  105. <hr>
  106. <footer>
  107. <p>
  108. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  110. </svg> Accueil</a> •
  111. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  113. </svg> Suivre</a> •
  114. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  116. </svg> Pro</a> •
  117. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  119. </svg> Email</a> •
  120. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  122. </svg> Légal</abbr>
  123. </p>
  124. <template id="theme-selector">
  125. <form>
  126. <fieldset>
  127. <legend><svg class="icon icon-brightness-contrast">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  129. </svg> Thème</legend>
  130. <label>
  131. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  132. </label>
  133. <label>
  134. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  135. </label>
  136. <label>
  137. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  138. </label>
  139. </fieldset>
  140. </form>
  141. </template>
  142. </footer>
  143. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  144. <script>
  145. function loadThemeForm(templateName) {
  146. const themeSelectorTemplate = document.querySelector(templateName)
  147. const form = themeSelectorTemplate.content.firstElementChild
  148. themeSelectorTemplate.replaceWith(form)
  149. form.addEventListener('change', (e) => {
  150. const chosenColorScheme = e.target.value
  151. localStorage.setItem('theme', chosenColorScheme)
  152. toggleTheme(chosenColorScheme)
  153. })
  154. const selectedTheme = localStorage.getItem('theme')
  155. if (selectedTheme && selectedTheme !== 'undefined') {
  156. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  157. }
  158. }
  159. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  160. window.addEventListener('load', () => {
  161. let hasDarkRules = false
  162. for (const styleSheet of Array.from(document.styleSheets)) {
  163. let mediaRules = []
  164. for (const cssRule of styleSheet.cssRules) {
  165. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  166. continue
  167. }
  168. // WARNING: Safari does not have/supports `conditionText`.
  169. if (cssRule.conditionText) {
  170. if (cssRule.conditionText !== prefersColorSchemeDark) {
  171. continue
  172. }
  173. } else {
  174. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  175. continue
  176. }
  177. }
  178. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  179. }
  180. // WARNING: do not try to insert a Rule to a styleSheet you are
  181. // currently iterating on, otherwise the browser will be stuck
  182. // in a infinite loop…
  183. for (const mediaRule of mediaRules) {
  184. styleSheet.insertRule(mediaRule.cssText)
  185. hasDarkRules = true
  186. }
  187. }
  188. if (hasDarkRules) {
  189. loadThemeForm('#theme-selector')
  190. }
  191. })
  192. </script>
  193. </body>
  194. </html>