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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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>⭕️ Signals • Buttondown (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://buttondown.email/robinrendle/archive/signals/">
  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>⭕️ Signals • Buttondown</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 href="https://buttondown.email/robinrendle/archive/signals/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Friends! Chums! Mates! </p>
  71. <p>Two things this week. First, a reminder: the finest compliment you can give someone is not a retweet, a like, or a follow. Instead, the best expression of thanks is to link to their work.</p>
  72. <p>Here’s one example: earlier this week I was reading a book and it quoted a chap who linked to a blog post which linked back to…my blog! Wha—? And also: wot? It was that rare sort of ~Publishing Feeling~ I get when I can see my own hyperlinks make their return trip home. There’s this punch-to-the-gut when someone links to my work or points back at a note somewhere in the ol’ archives and it’s nothing short of exhilarating. There’s no higher honor, no kind of thanks giving better.</p>
  73. <p>But is that feeling…good? That feeling I get when someone links to my work? Is it desperate? Isn’t it just a selfish hunger for fame and attention? Sure, probably, deep down that’s likely the case (my dad once asked what I wanted to be when I grow up and when I was 8 I turned to him very seriously and exclaimed that “I want to be a great man of history!” At the time I didn’t quite understand that you have to <em>do</em> certain things to be great, I just wanted to see my own face printed in books and etched on stone).</p>
  74. <p>ANYWAY—I see this ~Publishing Feeling~ as somewhat more wholesome than the one I get when someone retweets me or faves a post on Instagram. There most certainly is an unhealthy <em>yes</em> when I check those kinds of stats and see the numbers are up. It’s a short lived <em>yes</em>, too. Because on the rare occasion that a tweet takes off and I get a whole bunch of attention on twitter, I always end up feeling hollow inside.</p>
  75. <p>Yet! When someone writes a blog post about my work, or sends me a kind email, or—on the rarest of occasions—when someone riffs on my work and remixes those ideas then, THEN, I feel as if my work <em>matters.</em> That it was all worthwhile. Even when someone is disagreeing with me, I get this warm, cuddly feeling that all of my work is connected into a bigger thing, an enormous hyperlinked tapestry that we’re (sorry in advance) weaving together.</p>
  76. <p>These are the signals that I should be paying attention to when it comes to my work; the signals with the most information, the signals with the greatest kindness. </p>
  77. <p>Second: I’ve been working on a side project with <a href="https://lucybellwood.com/" target="_blank">Lucy</a> over the past few weeks. It’s fun! I missed making small websites with friends (since so much of my focus lately has been hurled into my day job). So much so, that I began to worry about this earlier in the week; what if my time making weird websites and blogging and making demos for things is at an end? What if I’ve lost that excitement for working on something for no money, for no reason whatsoever, other than <em>hey, this is something I’ve never seen before?</em></p>
  78. <p>Five minutes of working with Lucy and that ~Publishing Feeling~ kicked me in the teeth; I’m typing furiously without thinking and playing with CSS and copywriting and weird website ideas that feels not just necessary but rare and important. </p>
  79. <p>It reminds me of a tweet from <a href="https://twitter.com/TerribleMia" target="_blank">Mia</a> (maybe) who (possibly) said (if I remember this correctly) that the reason why making big web apps isn’t as fun as making tiny websites is because the internet was designed as a public good and really, deep-down, a website is a public resource like a library whereas apps are something else entirely so they go against the grain of the web. I’m sort of botching her original note here a bit, but that’s what I took away from it. Whenever I work on tiny websites that I’ll never see a penny from, those are the moments in which I’m happiest. Where not only my work is going along with the grain of the web, but my incentives are aligned with it, too.</p>
  80. <p>This is also horrendously cheesy but working on little websites like this always feels like I’m in the middle of nowhere, out on a vast frontier of weirdo stuff that’s never been done before. </p>
  81. <p>And all I can do is push myself (and Lucy) further into that weirdo territory and watch for the signals; just a tiny bit more north, a tiny bit more east, and then wait and see where that feeling takes us.</p>
  82. <p><br>
  83. <img alt="WebsiteProgress1.png" src="https://buttondown.s3.amazonaws.com/images/7db14a69-7a2d-406a-b6d6-8c00235b8ada.png"> </p>
  84. <p><br>
  85. Until next time, <br>
  86. ✌️ Robin
  87. <br>
  88. <br>
  89. <br>
  90. <br>
  91. <br></p>
  92. </article>
  93. <hr>
  94. <footer>
  95. <p>
  96. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  97. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  98. </svg> Accueil</a> •
  99. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  100. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  101. </svg> Suivre</a> •
  102. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  103. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  104. </svg> Pro</a> •
  105. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  106. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  107. </svg> Email</a> •
  108. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  110. </svg> Légal</abbr>
  111. </p>
  112. <template id="theme-selector">
  113. <form>
  114. <fieldset>
  115. <legend><svg class="icon icon-brightness-contrast">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  117. </svg> Thème</legend>
  118. <label>
  119. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  120. </label>
  121. <label>
  122. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  123. </label>
  124. <label>
  125. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  126. </label>
  127. </fieldset>
  128. </form>
  129. </template>
  130. </footer>
  131. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  132. <script>
  133. function loadThemeForm(templateName) {
  134. const themeSelectorTemplate = document.querySelector(templateName)
  135. const form = themeSelectorTemplate.content.firstElementChild
  136. themeSelectorTemplate.replaceWith(form)
  137. form.addEventListener('change', (e) => {
  138. const chosenColorScheme = e.target.value
  139. localStorage.setItem('theme', chosenColorScheme)
  140. toggleTheme(chosenColorScheme)
  141. })
  142. const selectedTheme = localStorage.getItem('theme')
  143. if (selectedTheme && selectedTheme !== 'undefined') {
  144. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  145. }
  146. }
  147. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  148. window.addEventListener('load', () => {
  149. let hasDarkRules = false
  150. for (const styleSheet of Array.from(document.styleSheets)) {
  151. let mediaRules = []
  152. for (const cssRule of styleSheet.cssRules) {
  153. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  154. continue
  155. }
  156. // WARNING: Safari does not have/supports `conditionText`.
  157. if (cssRule.conditionText) {
  158. if (cssRule.conditionText !== prefersColorSchemeDark) {
  159. continue
  160. }
  161. } else {
  162. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  163. continue
  164. }
  165. }
  166. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  167. }
  168. // WARNING: do not try to insert a Rule to a styleSheet you are
  169. // currently iterating on, otherwise the browser will be stuck
  170. // in a infinite loop…
  171. for (const mediaRule of mediaRules) {
  172. styleSheet.insertRule(mediaRule.cssText)
  173. hasDarkRules = true
  174. }
  175. }
  176. if (hasDarkRules) {
  177. loadThemeForm('#theme-selector')
  178. }
  179. })
  180. </script>
  181. </body>
  182. </html>