A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  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>Making Noisy into Quiet (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="#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. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://lucybellwood.com/making-noisy-into-quiet/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Making Noisy into Quiet</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.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://lucybellwood.com/making-noisy-into-quiet/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <blockquote class="wp-block-quote"><p>I don’t really care what I’m doing for money so long as I can write. And not write like I want a job writing copy, write like I sit down most days in my underwear and make noisy into quiet.</p></blockquote>
  71. <p>This <em>phrase</em>. Making noisy into quiet. I love it.</p>
  72. <p>I scrambled out of the house yesterday with the words “If I don’t go to the studio and make headway on this project I’ll have a panic attack”. Dramatic, yes, but also probably true. </p>
  73. <p>It feels like dying sometimes to watch the time I’d set aside to go make art slip through my fingers, gnawed at by obligation and muddle and distraction. But when I got to the studio, this little space I’m carving into something that feels nourishing and calm, I exhaled everything and sat down and the work was just easy and focused and joyful.</p>
  74. <figure class="wp-block-image size-large"><img loading="lazy" src="https://lucybellwood.com/wp-content/uploads/2021/09/IMG_9432-1024x732.jpeg" alt="A light, airy studio space with a white desk, an office chair, and a flat file. There are pieces of art tacked to the walls and two windows looking out onto greenery. There's a white futon couch against one wall and a Persian rug on the floor." class="wp-image-7146" srcset="https://lucybellwood.com/wp-content/uploads/2021/09/IMG_9432-1024x732.jpeg 1024w, https://lucybellwood.com/wp-content/uploads/2021/09/IMG_9432-300x215.jpeg 300w, https://lucybellwood.com/wp-content/uploads/2021/09/IMG_9432-768x549.jpeg 768w, https://lucybellwood.com/wp-content/uploads/2021/09/IMG_9432-1536x1099.jpeg 1536w, https://lucybellwood.com/wp-content/uploads/2021/09/IMG_9432-2048x1465.jpeg 2048w" sizes="(max-width: 1024px) 100vw, 1024px"></figure>
  75. <p>Moments like that it feels as if I’m doing something right.</p>
  76. <blockquote class="wp-block-quote"><p>A weird thing people sometimes say to me is “I wish I was as [free, ok being alone, adventurous] as you” and I always want to say, “I’ve always been [lonely, anxious, scared] throughout any of it” but I think they’d think I meant it wasn’t worth it or that I was trying to teach them a lesson. What I mean is just that I didn’t trade an unhappy thing for a happy thing. I just found some balance.</p></blockquote>
  77. <p>(I <em>really</em> like Amanda Oliver’s <a rel="noreferrer noopener" href="https://tinyletter.com/decorouslines" target="_blank">newsletter</a>.)</p>
  78. </article>
  79. <hr>
  80. <footer>
  81. <p>
  82. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  83. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  84. </svg> Accueil</a> •
  85. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  86. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  87. </svg> Suivre</a> •
  88. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  89. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  90. </svg> Pro</a> •
  91. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  92. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  93. </svg> Email</a> •
  94. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  95. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  96. </svg> Légal</abbr>
  97. </p>
  98. <template id="theme-selector">
  99. <form>
  100. <fieldset>
  101. <legend><svg class="icon icon-brightness-contrast">
  102. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  103. </svg> Thème</legend>
  104. <label>
  105. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  106. </label>
  107. <label>
  108. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  109. </label>
  110. <label>
  111. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  112. </label>
  113. </fieldset>
  114. </form>
  115. </template>
  116. </footer>
  117. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  118. <script>
  119. function loadThemeForm(templateName) {
  120. const themeSelectorTemplate = document.querySelector(templateName)
  121. const form = themeSelectorTemplate.content.firstElementChild
  122. themeSelectorTemplate.replaceWith(form)
  123. form.addEventListener('change', (e) => {
  124. const chosenColorScheme = e.target.value
  125. localStorage.setItem('theme', chosenColorScheme)
  126. toggleTheme(chosenColorScheme)
  127. })
  128. const selectedTheme = localStorage.getItem('theme')
  129. if (selectedTheme && selectedTheme !== 'undefined') {
  130. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  131. }
  132. }
  133. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  134. window.addEventListener('load', () => {
  135. let hasDarkRules = false
  136. for (const styleSheet of Array.from(document.styleSheets)) {
  137. let mediaRules = []
  138. for (const cssRule of styleSheet.cssRules) {
  139. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  140. continue
  141. }
  142. // WARNING: Safari does not have/supports `conditionText`.
  143. if (cssRule.conditionText) {
  144. if (cssRule.conditionText !== prefersColorSchemeDark) {
  145. continue
  146. }
  147. } else {
  148. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  149. continue
  150. }
  151. }
  152. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  153. }
  154. // WARNING: do not try to insert a Rule to a styleSheet you are
  155. // currently iterating on, otherwise the browser will be stuck
  156. // in a infinite loop…
  157. for (const mediaRule of mediaRules) {
  158. styleSheet.insertRule(mediaRule.cssText)
  159. hasDarkRules = true
  160. }
  161. }
  162. if (hasDarkRules) {
  163. loadThemeForm('#theme-selector')
  164. }
  165. })
  166. </script>
  167. </body>
  168. </html>