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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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>That which is unique, breaks (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_2021-01-20.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>
  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://simonsarris.substack.com/p/that-which-is-unique-breaks">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>That which is unique, breaks</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  63. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  64. </svg> Accueil</a> •
  65. <a href="https://simonsarris.substack.com/p/that-which-is-unique-breaks" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <blockquote><p><em>Suppose that a great commotion arises in the street about something, let us say a lamp-post, which many influential persons desire to pull down. A grey-clad monk, who is the spirit of the Middle Ages, is approached upon the matter, and begins to say, in the arid manner of the Schoolmen, “Let us first of all consider, my brethren, the value of Light. If Light be in itself good–”</em></p><p><em>At this point he is somewhat excusably knocked down. All the people make a rush for the lamp-post, the lamp-post is down in ten minutes, and they go about congratulating each other on their unmediaeval practicality. But as things go on they do not work out so easily. Some people have pulled the lamp-post down because they wanted the electric light; some because they wanted old iron; some because they wanted darkness, because their deeds were evil. Some thought it not enough of a lamp-post, some too much; some acted because they wanted to smash municipal machinery; some because they wanted to smash something. And there is war in the night, no man knowing whom he strikes.</em></p><p><em>So, gradually and inevitably, to-day, to-morrow, or the next day, there comes back the conviction that the monk was right after all, and that all depends on what is the philosophy of Light. Only what we might have discussed under the gas-lamp, we now must discuss in the dark. </em></p><p><em>—G.K. Chesterton, 1905</em></p></blockquote>
  70. <p></p>
  71. <h5>Disquiet</h5>
  72. <p>We are in the dark corner of the pub together. We have been here for some time. Out of my coat I produce a pile of old photographs. Something to show you. They are a gift from the past, together we will look, I will tell what comes to mind. Do not be gloomy, simply remember that history happens only once, it never repeats.</p>
  73. <p>But much is born out of simple fact: that which is unique, breaks.</p>
  74. <p>Some years ago a nearby city built a plaza. It is wholly unremarkable: No one lingers there, no one brings food or a book. Children do not play there. If a public space is never used, why did we make it? The question returns an echo: If we are richer today, why are we not <em>routinely</em> surpassing the shared spaces we were able to create one hundred years ago?</p>
  75. <p>What did a person photographing such a park imagine about the beauty of our parks, one hundred years hence? What do we imagine about the beauty of our public spaces one hundred years from today? Maybe the echo is closer: Do we engage in the act of imagining public spaces at all? Somebody had to once, for this park was not an accident.</p>
  76. <p>Love and effort create magnificent places. Genius inhabits them. People go to them because they know such places and landscapes offer consolation of the soul, and the soul is not fooled by substitutes. We let those places turn our moods, we want them to, they do so easily. Today it is not always hard to find such places, but why is it difficult to make new ones?</p>
  77. <p>Was this a great work of public art? Or was it simply proper and fitting for a public fountain? Did they vote on it? Did the public complain about the expense? How did it come to be? What about this one?</p>
  78. <p>The details here are not trivial additions: If we were so poor, after all we had to fetch fresh water by hand, why did we take the expense to build these so beautifully? We must have known something then that we no longer know. What was it? Who made them? Was it a committee? Decree? Did an impulse of the soul build these things? Where did that impulse go?</p>
  79. <p>Something odd happened. I think today we do not know <em>how </em>to go about building a water fountain. What we know is how to build one thousand water fountains. But not how to build one. (I pray you understand that this is not a thought about water fountains.)</p>
  80. <h5>Commoditization</h5>
  81. <p>Some of the answer lies here, with commoditization.</p>
  82. <p>Commodity: interchangeable goods within their category, such a bar of copper, barrel of oil, or sack of coffee of agreed-upon quality. It does not matter who made the copper bar, only that it is 99.9% pure. The word comes from the Latin <em>commodus</em>: suitability, convenience. Commodities improve trade. Interchangeability improves trade and allows for replaceable parts, standardization, and scale.</p>
  83. <p>These are improvements, but the urge to commoditize <em>alone </em>improves a seen monetary cost at the expense of the unseen. We must not think it comes free of charge.</p>
  84. <p>That which is unique, breaks. When finished objects become commodities they break too, but they are easily replaced. When you break a chair, you buy another chair. We know well how to make one thousand chairs. They sit in boxes, lining the warehouses, ready for two-day shipping.</p>
  85. <p>But when the unique breaks, we might mend.</p>
  86. <p>To learn the skill of mending is to also gain unconsciously the skill of building, to understand the very urge to build. If we never mend, we not only risk building less but building in perverse ways.</p>
  87. <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: Things used daily that, inexplicably, do not seem to be invented for human use. 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>
  88. <p>~ ~ ~</p>
  89. <p>When the unique is created, it also creates the creator.</p>
  90. <p>The more finished goods become commodities, the fewer opportunities an individual has to generate new creation. The ability to mass-produce removes the opportunity for the great many to learn to produce at all. From such a thought, a future full of consumption-only hobbies might come as no surprise.</p>
  91. <p>If you commoditize toys, you remove the toymaker. If you remove the toymaker, the toy is only an object of consumption. It ceases to be an object of wonder.</p>
  92. <p>The hands that build the ship have knowledge that cannot be fully spoken, only taught by other hands. Each pair of hands must find another pair to learn from, and no pair of hands are the same. The injection-mold and metal die machines can make one thousand toys each minute, but they have no hands, they cannot teach. Will the operators of the machines be able to design the next machine, as the child who watches the toymaker might design the next toy? I worry. I hope you understand.</p>
  93. <p>~ ~ ~</p>
  94. <p>That which is unique, breaks. It must be cultivated. It is one thing to care for a magnificent garden, but another entirely to plan for a new one.</p>
  95. <p>Something worrisome: The more things become commodities, the more we start to treat places and people like commodities, too. But I am an optimist, I think we are only in the early hours of understanding the techniques we have created. Technology is a wild horse, we have learned to harness it, but not master it. The results run amok: Our new creations trample the beauty of places and things because we have yet to incorporate our love of craft. And so this initial commodification comes to us at the expense of all things divine, and it causes the sacred to leave art, as it leaves things and places too. But we avoid the ugly park and travel to the beautiful park. The divine is still within people, and will not leave.</p>
  96. <p>People and places and things are not as different from each other as we were lead to believe. We exist together in an ecology. Unique places form unique people, who create unique works. These may be fragile, it is up to us to value them or not, but in history they have been our collective pride. I think if we have another renaissance, think for a moment of what the word means, it will be a rediscovery of the beauty of these things. I will speak of this to you again another day.</p>
  97. <p>Remember: History happens only once. There is no reason things must remain or return to any particular state. We are always free to find our own values. But what will it take to value the ecology that fosters the unique, the creations that made some places and things so special that we call them works of art, or travel across the world just to see them?</p>
  98. <p>There is a tale: Two oak trees sit at the edge of the forest. One is sound and hale, taller than all others, with prosperous limbs, the forest’s pride. The other is old and harboring sickness, rotting away inside. When the storm comes, the sickly oak will outlast the whirlwinds, but the sound oak will be destroyed, uprooted by the blast. And why? Because the branches catch the wind.</p>
  99. <p>If we want the forest, we must continue to garden and sow.</p>
  100. </article>
  101. <hr>
  102. <footer>
  103. <p>
  104. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  105. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  106. </svg> Accueil</a> •
  107. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  108. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  109. </svg> RSS</a> •
  110. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  111. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  112. </svg> Pro</a> •
  113. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  114. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  115. </svg> Email</a> •
  116. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  117. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  118. </svg> Légal</abbr>
  119. </p>
  120. <template id="theme-selector">
  121. <form>
  122. <fieldset>
  123. <legend><svg class="icon icon-brightness-contrast">
  124. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  125. </svg> Thème</legend>
  126. <label>
  127. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  128. </label>
  129. <label>
  130. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  131. </label>
  132. <label>
  133. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  134. </label>
  135. </fieldset>
  136. </form>
  137. </template>
  138. </footer>
  139. <script>
  140. function loadThemeForm(templateName) {
  141. const themeSelectorTemplate = document.querySelector(templateName)
  142. const form = themeSelectorTemplate.content.firstElementChild
  143. themeSelectorTemplate.replaceWith(form)
  144. form.addEventListener('change', (e) => {
  145. const chosenColorScheme = e.target.value
  146. localStorage.setItem('theme', chosenColorScheme)
  147. toggleTheme(chosenColorScheme)
  148. })
  149. const selectedTheme = localStorage.getItem('theme')
  150. if (selectedTheme && selectedTheme !== 'undefined') {
  151. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  152. }
  153. }
  154. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  155. window.addEventListener('load', () => {
  156. let hasDarkRules = false
  157. for (const styleSheet of Array.from(document.styleSheets)) {
  158. let mediaRules = []
  159. for (const cssRule of styleSheet.cssRules) {
  160. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  161. continue
  162. }
  163. // WARNING: Safari does not have/supports `conditionText`.
  164. if (cssRule.conditionText) {
  165. if (cssRule.conditionText !== prefersColorSchemeDark) {
  166. continue
  167. }
  168. } else {
  169. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  170. continue
  171. }
  172. }
  173. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  174. }
  175. // WARNING: do not try to insert a Rule to a styleSheet you are
  176. // currently iterating on, otherwise the browser will be stuck
  177. // in a infinite loop…
  178. for (const mediaRule of mediaRules) {
  179. styleSheet.insertRule(mediaRule.cssText)
  180. hasDarkRules = true
  181. }
  182. }
  183. if (hasDarkRules) {
  184. loadThemeForm('#theme-selector')
  185. }
  186. })
  187. </script>
  188. </body>
  189. </html>