A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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>Three requests for the Google Chrome team as they experiment with RSS (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://interconnected.org/home/2021/05/26/chrome_and_rss">
  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>Three requests for the Google Chrome team as they experiment with RSS</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://interconnected.org/home/2021/05/26/chrome_and_rss" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="measure-wide f6 f5-l lh-copy black-80">I’m pleased to see <a href="https://blog.chromium.org/2021/05/an-experiment-in-helping-users-and-web.html">Chrome experimenting with RSS feeds</a> – and therefore possibly Google getting interested in increased RSS feed support. RSS is important! The interface is this:</p>
  71. <ul class="list ph0 ph0-ns bulleted-list">
  72. <li class="measure-wide f6 f5-l lh-copy black-80">A <em>”+ Follow”</em> button will appear for sites with an RSS feed, on the mobile browser</li>
  73. <li class="measure-wide f6 f5-l lh-copy black-80">The browser’s home screen will include a <em>“Following”</em> tab that shows the latest news from followed sites.</li>
  74. </ul>
  75. <p class="measure-wide f6 f5-l lh-copy black-80"><em>(<strong>Don’t know what RSS is?</strong> RSS feeds are how you can get the latest content out of websites and into dedicated “newsreader” apps which are made for reading, with an interface a little like Facebook but totally decentralised and un-surveilled. The technology was invented in 1999, and it’s still supported by probably 30%+ sites on the web with a ton of newsreader apps… but it’s had a moribund few years. There are signs of a recent resurgence, of which this is one. RSS is also the plumbing behind podcast distribution. For me, RSS is primary way I browse the web. <a href="https://aboutfeeds.com">Want to get started? Here’s how.</a>)</em></p>
  76. <p class="measure-wide f6 f5-l lh-copy black-80">In case the Chrome team reads this, I have three requests.</p>
  77. <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">1. Sweat the new user experience</h3>
  78. <p class="measure-wide f6 f5-l lh-copy black-80">Despite RSS’s strong history and continued usage, at this point I would guess that new users find it inscrutable, and it’s hard to tell whether a given site offers an RSS feed or not. Even then, the subscribing experience is not consistent.</p>
  79. <p class="measure-wide f6 f5-l lh-copy black-80">So, if this is going to be a success…</p>
  80. <p class="measure-wide f6 f5-l lh-copy black-80">Finally, recognise that the browser is not the best place read RSS feeds long term. We learnt that last time round.</p>
  81. <p class="measure-wide f6 f5-l lh-copy black-80">The browser is a great place to get started, but users need to graduate to something dedicated as they follow more feeds. So pave that path somehow… maybe make a user’s subscriptions available as an industry-standard OPML file, somewhere on the google.com domain? And show users how they can use that subscriptions list in any one of a whole ecosystem of newsreaders.</p>
  82. <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">2. Yes, think about monetisation and other advanced features, but maintain ecosystem compatibility at all costs</h3>
  83. <p class="measure-wide f6 f5-l lh-copy black-80"><a href="/home/2020/07/29/improving_rss">When I suggested three improvements to RSS last year</a>, I highlighted (a) onboarding; (b) the money thing; and (c) discovery.</p>
  84. <p class="measure-wide f6 f5-l lh-copy black-80"><em>The money thing:</em> In the Substack era of writers monetising their content, and with Apple and Spotify both giving podcasts a revenue model, it is absolutely the right thing to be considering how to extend RSS with a great premium experience, which means ways to pay, and also private feeds.</p>
  85. <p class="measure-wide f6 f5-l lh-copy black-80"><em>(Jay Springett also makes the connection between <a href="https://www.thejaymo.net/2021/05/23/197-rss-revival/">Google, RSS, and payments</a> and points out that this, strategically, a good way for Google to index content that will shortly be hidden behind a paywall.)</em></p>
  86. <p class="measure-wide f6 f5-l lh-copy black-80">There’s a BUT…</p>
  87. <p class="measure-wide f6 f5-l lh-copy black-80">Remember that the reason RSS is here <em>at all</em> is that it’s almost religiously backwards compatible, and incredibly open. Technically, RSS includes an extension mechanism so take advantage of that, but to succeed, any efforts needs to be on a bedrock of community collaboration and unwavering commitment to backwards compatibility, decentralised approaches, and no new points of failure (people are still angry about <a href="https://en.wikipedia.org/wiki/Google_Reader">Google Reader</a> closing in 2013 and pulling the rug from many readers and publishers).</p>
  88. <p class="measure-wide f6 f5-l lh-copy black-80">That said:</p>
  89. <p class="measure-wide f6 f5-l lh-copy black-80">Another feature area I would think about is <em>interactivity.</em> I’m fascinated with Google’s work in Gmail around “Inbox Actions” – basically the one-click buttons to perform an email action like RSVP, or reviewing a bug. <a href="https://postmarkapp.com/guides/improve-your-transactional-emails-with-gmail-inbox-actions">Here’s an explainer with some examples.</a></p>
  90. <p class="measure-wide f6 f5-l lh-copy black-80">Let’s call it <em>Feed Actions.</em> Feed Actions could also be an RSS extension. <a href="http://berglondon.com/talks/plastic/?slide=23">Here’s a mockup I made for a talk in 2008.</a> What a gift it would be to the web, to provide an open, centralised way to combine all the different micro-task inboxes from all the apps I use, all into one place.</p>
  91. <p class="measure-wide f6 f5-l lh-copy black-80">GitHub should support something like this for their notifications dashboard, letting me triage issues straight from the feed; Amazon should support something like this for open orders, letting me inspect delivery status. It might be tough to get these into GMail, which is centralised, but as an open and decentralised standard? Possible.</p>
  92. <p class="measure-wide f6 f5-l lh-copy black-80"><em>(Feed Actions would also be a good way to add an “Upgrade to premium” button.)</em></p>
  93. <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">3. Internally invest in, and externally advocate for RSS</h3>
  94. <p class="measure-wide f6 f5-l lh-copy black-80">RSS, as a mechanism to subscribe to content from websites, is still around… but my take is that it has stagnated. Given the features above (like private, personalised feeds, with a slick upsell path), it’s worth pushing the envelope with some new use cases. And, Google, start with your own products.</p>
  95. <p class="measure-wide f6 f5-l lh-copy black-80">Like…</p>
  96. <ul class="list ph0 ph0-ns bulleted-list">
  97. <li class="measure-wide f6 f5-l lh-copy black-80">What would it mean to have RSS as an output from GMail, using the “feed actions” idea above?</li>
  98. <li class="measure-wide f6 f5-l lh-copy black-80">Could I get my Google Analytics insights as an RSS feed?</li>
  99. <li class="measure-wide f6 f5-l lh-copy black-80">How about a feed for new bookshops in my local area, from Maps?</li>
  100. <li class="measure-wide f6 f5-l lh-copy black-80">Allow me to include my RSS headlines in my search results knowledge panel</li>
  101. <li class="measure-wide f6 f5-l lh-copy black-80"><strong>A big one:</strong> how can RSS jump from the web to the app ecosystem? What would it mean for on-device Android apps to <em>also</em> publish feeds that can be read in standard newsreaders?</li>
  102. </ul>
  103. <p class="measure-wide f6 f5-l lh-copy black-80">Mostly basic stuff but it shows commitment.</p>
  104. <p class="measure-wide f6 f5-l lh-copy black-80">With a seat at the table and skin in the game, bang the drum for RSS and the open web. Like I said, it’s great to see early trials of RSS in the Chrome mobile browser and, for me, that’s a promising start.</p>
  105. <p class="measure-wide f6 f5-l lh-copy black-80">(And if anybody from the Chrome team does run across this post, thanks for reading!)</p>
  106. </article>
  107. <hr>
  108. <footer>
  109. <p>
  110. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  111. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  112. </svg> Accueil</a> •
  113. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  114. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  115. </svg> Suivre</a> •
  116. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  117. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  118. </svg> Pro</a> •
  119. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  120. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  121. </svg> Email</a> •
  122. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  123. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  124. </svg> Légal</abbr>
  125. </p>
  126. <template id="theme-selector">
  127. <form>
  128. <fieldset>
  129. <legend><svg class="icon icon-brightness-contrast">
  130. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  131. </svg> Thème</legend>
  132. <label>
  133. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  134. </label>
  135. <label>
  136. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  137. </label>
  138. <label>
  139. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  140. </label>
  141. </fieldset>
  142. </form>
  143. </template>
  144. </footer>
  145. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  146. <script>
  147. function loadThemeForm(templateName) {
  148. const themeSelectorTemplate = document.querySelector(templateName)
  149. const form = themeSelectorTemplate.content.firstElementChild
  150. themeSelectorTemplate.replaceWith(form)
  151. form.addEventListener('change', (e) => {
  152. const chosenColorScheme = e.target.value
  153. localStorage.setItem('theme', chosenColorScheme)
  154. toggleTheme(chosenColorScheme)
  155. })
  156. const selectedTheme = localStorage.getItem('theme')
  157. if (selectedTheme && selectedTheme !== 'undefined') {
  158. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  159. }
  160. }
  161. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  162. window.addEventListener('load', () => {
  163. let hasDarkRules = false
  164. for (const styleSheet of Array.from(document.styleSheets)) {
  165. let mediaRules = []
  166. for (const cssRule of styleSheet.cssRules) {
  167. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  168. continue
  169. }
  170. // WARNING: Safari does not have/supports `conditionText`.
  171. if (cssRule.conditionText) {
  172. if (cssRule.conditionText !== prefersColorSchemeDark) {
  173. continue
  174. }
  175. } else {
  176. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  177. continue
  178. }
  179. }
  180. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  181. }
  182. // WARNING: do not try to insert a Rule to a styleSheet you are
  183. // currently iterating on, otherwise the browser will be stuck
  184. // in a infinite loop…
  185. for (const mediaRule of mediaRules) {
  186. styleSheet.insertRule(mediaRule.cssText)
  187. hasDarkRules = true
  188. }
  189. }
  190. if (hasDarkRules) {
  191. loadThemeForm('#theme-selector')
  192. }
  193. })
  194. </script>
  195. </body>
  196. </html>