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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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>Stream on (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://colly.com/articles/stream-on">
  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>Stream on</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://colly.com/articles/stream-on" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="as-subtitle">It’s two years since I started my Stream, a channel for quickfire posts alongside my more glacial blog, and I recently posted my 250th note. That’s 250 thoughts that would otherwise have gone undocumented or evaporated elsewhere.</p>
  71. <figure class="as-cover-default as-grid">
  72. <span class="imageset"><img alt="" loading="lazy" src="https://colly.com/media/pages/articles/stream-on/920f7cf5bb-1638811162/stream-posts.jpg" srcset="https://colly.com/media/pages/articles/stream-on/920f7cf5bb-1638811162/stream-posts-600x.jpg 600w, https://colly.com/media/pages/articles/stream-on/920f7cf5bb-1638811162/stream-posts-900x.jpg 900w, https://colly.com/media/pages/articles/stream-on/920f7cf5bb-1638811162/stream-posts-1500x.jpg 1500w"></span> </figure>
  73. <pre><code>&lt;figcaption class="fc-cover"&gt;Each small link reflects a stream post during the first nine months of 2020.&lt;/figcaption&gt;
  74. </code></pre>
  75. <p>It’s not lost on me that I am writing an <a href="https://colly.com/articles">Article</a> about my <a href="https://colly.com/stream">Stream</a>. But, as you will read, this isn’t a short post, and my Articles section is here when I need more depth. I’ve given myself options.</p>
  76. <p>It’s my good fortune to have launched my Stream a couple of months before the pandemic changed everything, and the government doubled down on being dicks because bloody hell, did I need a frictionless outlet for articulating and documenting my thoughts. Writing has been essential for focus, planning, catharsis, anger management, etc. Get it down, get it out. Writing is hard, but it’s also therapy: give order to a pile of thoughts to understand them better and move on.</p>
  77. <h2>Why build a second channel?</h2>
  78. <p>A primary motivation for creating my Stream was the paralysing sense that a blog post needed appropriate <em>length</em> and <em>weight</em>. Since switching to <a href="https://getkirby.com">Kirby</a>, there’s relatively little friction to posting, but there’s definite friction in evaluating a post’s <em>worth</em> to the reader. I’d think to myself, “I’d like to write something about that, but I’ll have to come up with all sorts of extra stuff and dressing, and it’ll take all afternoon.” It doesn’t help that my <a href="https://colly.com/articles">Articles overview</a> has a fancy grid design requiring articles to have both a standfirst and a cover image.</p>
  79. <p>And so, I was increasingly aware that I was letting many interesting or essential thoughts go undocumented, allowing them to drift from memory, or exist only on social media, likely to one day evaporate. I’ve become more and more interested in the human desire to document, and it’s something I’ve always valued, so I needed to find a solution that I could entirely control and own. That solution was my Stream.</p>
  80. <p>Many people have maintained two or more channels for some time, but typically the secondary stream is focused on briefly describing and cataloguing external links. For me, the motivation came from something newer: I started my Stream as a new trend of writing Weeknotes was spreading around the blogging community. Weeknotes is a concept with identical goals: to allow anyone with a blog to push out quick notes about interesting and often personal things without investing time and energy in composing detailed and grammatically crafted articles. </p>
  81. <p>I loved how the Weeknotes format gained popularity and reinvigorated some bloggers, but I wanted something more than bullet points. My setup allows me to write weeknotes if I wish, but I often want to say something with a couple of paragraphs or images and contain that thing as one particular, indexed item. But, as with all such things, it truly doesn’t matter <em>how</em> you document, so long as there’s a low-friction approach. It’s all about the enjoyment of writing stuff down, cataloguing life’s minutiae and <em>owning</em> it. It’s about not losing everything to tweets.</p>
  82. <p>For me, it’s been a revelation, and a way of thinking differently about the things I do, see, read, listen to, worry about and so on. It’s like a little frame I can hold up to something and think, “Yeah, I can (or should) make a little note about this”.</p>
  83. <p>I can recommend building a second low-stress channel alongside your more time-consuming blog. Unless, of course, you are less uptight than me about these things and don’t care if a post needs to look good or have a leading image, and you post anything and everything of all sizes and subjects to one no-fuss bucket. If that’s you, I envy your lack of visual and curatorial concerns.</p>
  84. <p>Oh, and I decided to include my Stream posts in my <a href="https://colly.com/articles/feed">RSS feed</a>. I know this adds a bit of noise for some, and I bet a few subscribers end up quitting when they get a single paragraph about how I’m digging <a href="https://colly.com/stream/marmite-peanut-butter">Marmite peanut butter</a>, or <a href="https://colly.com/stream/unbearable">I lose my mind</a> about something the Tories did but I won’t worry about it.</p>
  85. <h2>Seeds and stubs</h2>
  86. <p>I’ve occasionally tweeted about my Stream and received positive responses and questions. For example:</p>
  87. <blockquote>
  88. This is a top idea! The format would definitely suit me better, as I struggle to formulate some ideas in less than 200 characters, but they don’t require a full blog post. However, they can be seeds for them. Is it something that I can borrow?
  89. </blockquote>
  90. <blockquote>
  91. Ooo, I love this idea of short posts of observations, creativity, and thoughts that don’t have full blog post substance (yet).
  92. </blockquote>
  93. <p>I love Samuel’s notion about ‘seeds’, and Laura’s “yet” is interesting. This idea of seeds is something I’d considered. A few years ago, <a href="https://craigmod.com">Craig Mod</a> and several collaborators launched a site called <a href="https://craigmod.medium.com/archiving-our-online-communities-e5868eab4d9a">Hi!</a>, a writing community focused predominantly on travel writing, Hi! allowed members to post short posts while travelling, sometimes little more than a title and a photo. The idea was that these brief posts acted as stubs that might remain as they are or act like seeds, the author returning to add further detail and colour to that post before sharing more intentionally with the community.</p>
  94. <p>In my case, only two Stream items have been expanded and moved to my Journal — for example, one <a href="https://colly.com/articles/one-year">marking a year of pandemic living</a> seemed lengthy and important enough to become a Journal post — but I love that the option is there. When I move a post to my Journal, URLs still work because I leave a non-indexed signpost at the original Stream URL inviting visitors to go to the newer post. I could set up automatic redirects, but to be honest, my 18-year-old htaccess file is an absolute 808 (state).</p>
  95. <h2>Choosing the appropriate channel</h2>
  96. <p>Another common question relates to managing two blogging channels and deciding when to use each.</p>
  97. <blockquote>
  98. Have you ever had writer-y issues where you are confused whether a thing deserves a whole dang blog post or remain as a weeknote? I seem to mix the two in my brain as I’m writing if there isn’t a strict divide.
  99. </blockquote>
  100. <p>So, how do I decide if something goes in Articles or Stream? If what I’m writing doesn’t have a natural standfirst, or it’s short because it should be, and/or it’s inconsequential, it goes in Stream. If it’s short but big news (rare, but <a href="https://colly.com/articles/indefinite-leave-to-remain">Geri’s indefinite leave to remain</a> fits the bill), or it lends itself to depth, I’ll start an article draft knowing I’ll have as much room as I might need. It’s usually instinctive, as it was for this article about my Stream!</p>
  101. <h2>Ongoing iteration</h2>
  102. <p>As I’ve gone along, I’ve iterated the Stream format, learning more about what I need to share specific ideas and thoughts. I realise I need sets of photos; then I might realise some are landscape format; I might need four tall images, so I’ll devise a left-to-right row option, etc. Using Kirby has made that evolution easy.</p>
  103. <p>I do sometimes ask myself if it’s time to change. I often wonder if I should merge my Stream and Articles into one main channel? I wonder that because, to a certain extent, the Stream has met its purpose; it’s taught me to think differently about what I write and share, made me feel that I can share more, and given me the confidence to do what I want on my site, and to do that as much or as little as necessary. <a href="https://colly.com/articles/this-used-to-be-our-playground">It’s my playground</a>, and there are no rules.</p>
  104. <h2>Tagging = curating</h2>
  105. <p>My favourite feature is tagging, which works incredibly well because the entire post is visible (no clicking through to read the whole thing). In some cases, tags create a multi-part article or diary, sometimes more of a photo essay or research thread. For example, the tag <a href="https://colly.com/stream/tag:garden%20project">garden project</a> neatly documents last year’s evolving garden renovation.</p>
  106. <p>It’s also good to have an easily-accessible record of short posts about <a href="https://colly.com/stream/tag:music">music</a>, <a href="https://colly.com/stream/tag:books">books</a> or <a href="https://colly.com/stream/tag:art">art</a>. How about everything relating to <a href="https://colly.com/stream/tag:geri%20draws%20japan">my wife’s achievements</a>? And I think in years to come, I’ll appreciate scrolling through everything I wrote about <a href="https://colly.com/stream/tag:covid-19">Covid-19</a>, <a href="https://colly.com/stream/tag:politics">politics</a>, and <a href="https://colly.com/stream/tag:race">race</a> during the last couple of years.</p>
  107. <p>I’ve managed to ensure there’s always something to post too, because, well, <em>these times</em>. I’m always making notes and tinkering with drafts in <a href="https://ulysses.app">Ulysses</a>, so there’s always something there to consider polishing and posting. Writing a little every day has been as comforting and distracting as gardening ever was.</p>
  108. <h2>This stuff is never finished</h2>
  109. <p>I still have lots to do to make my Stream more efficient. At some point, I’ll need to rewire Kirby so that each year’s posts are contained in separate folders before it gets weighed down and adversely affects performance.</p>
  110. <p>I’d like to enable a method of reversing post order so that tagged memories such as the <a href="https://colly.com/stream/tag:garden%20project">garden project</a> can optionally unfold first-to-last. And although I use the same tags across both Articles and Stream, they only filter by the current channel. So, If you’re in my Stream and you click the <a href="https://colly.com/stream/tag:radiohead">Radiohead Stream tag</a>, you’re going to miss any <a href="https://colly.com/articles/tag:radiohead">Radiohead mentions and setlists</a> within Articles. My <a href="https://colly.com/archive">Archive</a> handles this much better, but even then, it’s only showing items per selected year for a limited tag set.</p>
  111. <p>But who cares about that? Well, <em>I</em> do, but you don’t. You haven’t even read this far, but it doesn’t matter because I document my life for <em>me</em>. If others tap into it, then that’s a lovely bonus. And with that in mind, I’ll close with my favourite comment about <a href="https://colly.com/stream">my Stream</a>, from my friend Rizwana:</p>
  112. <blockquote>
  113. I read each Stream entry on your website. The journal-like style feels like an online version of an in-life encounter, which is lovely.
  114. </blockquote>
  115. <p>Thank you, Riz, and everyone else who reads anything I write. I appreciate it so, so much.</p>
  116. <p>By the way: if you liked this, my friend Remy recently explained why <a href="https://remysharp.com/2021/11/21/why-i-write-and-when-i-dont">why he writes and why he won’t</a>. It’s a great read.</p>
  117. </article>
  118. <hr>
  119. <footer>
  120. <p>
  121. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  123. </svg> Accueil</a> •
  124. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  125. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  126. </svg> Suivre</a> •
  127. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  129. </svg> Pro</a> •
  130. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  131. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  132. </svg> Email</a> •
  133. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  134. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  135. </svg> Légal</abbr>
  136. </p>
  137. <template id="theme-selector">
  138. <form>
  139. <fieldset>
  140. <legend><svg class="icon icon-brightness-contrast">
  141. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  142. </svg> Thème</legend>
  143. <label>
  144. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  145. </label>
  146. <label>
  147. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  148. </label>
  149. <label>
  150. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  151. </label>
  152. </fieldset>
  153. </form>
  154. </template>
  155. </footer>
  156. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  157. <script>
  158. function loadThemeForm(templateName) {
  159. const themeSelectorTemplate = document.querySelector(templateName)
  160. const form = themeSelectorTemplate.content.firstElementChild
  161. themeSelectorTemplate.replaceWith(form)
  162. form.addEventListener('change', (e) => {
  163. const chosenColorScheme = e.target.value
  164. localStorage.setItem('theme', chosenColorScheme)
  165. toggleTheme(chosenColorScheme)
  166. })
  167. const selectedTheme = localStorage.getItem('theme')
  168. if (selectedTheme && selectedTheme !== 'undefined') {
  169. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  170. }
  171. }
  172. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  173. window.addEventListener('load', () => {
  174. let hasDarkRules = false
  175. for (const styleSheet of Array.from(document.styleSheets)) {
  176. let mediaRules = []
  177. for (const cssRule of styleSheet.cssRules) {
  178. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  179. continue
  180. }
  181. // WARNING: Safari does not have/supports `conditionText`.
  182. if (cssRule.conditionText) {
  183. if (cssRule.conditionText !== prefersColorSchemeDark) {
  184. continue
  185. }
  186. } else {
  187. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  188. continue
  189. }
  190. }
  191. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  192. }
  193. // WARNING: do not try to insert a Rule to a styleSheet you are
  194. // currently iterating on, otherwise the browser will be stuck
  195. // in a infinite loop…
  196. for (const mediaRule of mediaRules) {
  197. styleSheet.insertRule(mediaRule.cssText)
  198. hasDarkRules = true
  199. }
  200. }
  201. if (hasDarkRules) {
  202. loadThemeForm('#theme-selector')
  203. }
  204. })
  205. </script>
  206. </body>
  207. </html>