|
|
|
@@ -0,0 +1,230 @@ |
|
|
|
<!doctype html><!-- This is a valid HTML5 document. --> |
|
|
|
<!-- Screen readers, SEO, extensions and so on. --> |
|
|
|
<html lang="fr"> |
|
|
|
<!-- Has to be within the first 1024 bytes, hence before the <title> |
|
|
|
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> |
|
|
|
<!-- The viewport meta is quite crowded and we are responsible for that. |
|
|
|
See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> |
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1"> |
|
|
|
<!-- Required to make a valid HTML5 document. --> |
|
|
|
<title>What is a feed? (a.k.a. RSS) (archive) — David Larlet</title> |
|
|
|
<meta name="description" content="Publication mise en cache pour en conserver une trace."> |
|
|
|
<!-- That good ol' feed, subscribe :). --> |
|
|
|
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> |
|
|
|
<!-- Generated from https://realfavicongenerator.net/ such a mess. --> |
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> |
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> |
|
|
|
<link rel="manifest" href="/static/david/icons2/site.webmanifest"> |
|
|
|
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> |
|
|
|
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> |
|
|
|
<meta name="msapplication-TileColor" content="#f0f0ea"> |
|
|
|
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> |
|
|
|
<meta name="theme-color" content="#f0f0ea"> |
|
|
|
<!-- Documented, feel free to shoot an email. --> |
|
|
|
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css"> |
|
|
|
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> |
|
|
|
<script> |
|
|
|
function toggleTheme(themeName) { |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-dark', |
|
|
|
themeName === 'dark' |
|
|
|
) |
|
|
|
document.documentElement.classList.toggle( |
|
|
|
'forced-light', |
|
|
|
themeName === 'light' |
|
|
|
) |
|
|
|
} |
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme !== 'undefined') { |
|
|
|
toggleTheme(selectedTheme) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<meta name="robots" content="noindex, nofollow"> |
|
|
|
<meta content="origin-when-cross-origin" name="referrer"> |
|
|
|
<!-- Canonical URL for SEO purposes --> |
|
|
|
<link rel="canonical" href="https://aboutfeeds.com/"> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"> |
|
|
|
|
|
|
|
<article> |
|
|
|
<header> |
|
|
|
<h1>What is a feed? (a.k.a. RSS)</h1> |
|
|
|
</header> |
|
|
|
<nav> |
|
|
|
<p class="center"> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="https://aboutfeeds.com/" title="Lien vers le contenu original">Source originale</a> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
<p>A feed is also known as a <em>“web feed”</em> and the technical term (which you’ll see a lot) is <em>“RSS feed.”</em> A feed contains the latest content in a form that your <strong>newsreader app</strong> understands. (Your newsreader checks the feed automatically, every few hours.)</p> |
|
|
|
|
|
|
|
<p><strong>Tons of websites already have feeds,</strong> mostly news sites and blogs. You’ll often see a link at the bottom of the page that says <em>“RSS”</em> or an orange icon similar to this: <img src="icons/orange-square.svg"></p> |
|
|
|
|
|
|
|
<p>Whenever you see a website with a feed, that means you can subscribe to that site.</p> |
|
|
|
|
|
|
|
<p>When you subscribe to only <em>one</em> site, you might say <em>“This doesn’t save me much time.”</em> But when you end up subscribing to 10 or 20, you’ll find that your newsreader becomes your regular place for news and to hear the latest.</p> |
|
|
|
|
|
|
|
<p>You won’t miss content <em>(unlike Facebook, there’s no algorithm deciding to drop content from your feed unless the author pays)</em> and it’s spam-proof. Had enough? Just unsubscribe from the feed.</p> |
|
|
|
|
|
|
|
<h1 id="2-how-do-i-get-a-newsreader-app">2. How do I get a newsreader app?</h1> |
|
|
|
|
|
|
|
<p><strong>To subscribe to feeds, you’ll need a newsreader app.</strong> A newsreader app feels a little like an email app, in that there is an inbox of all the latest content, or like Facebook in that there is a newsfeed from many different sources.</p> |
|
|
|
|
|
|
|
<p>There are many different newsreader apps to choose from.</p> |
|
|
|
|
|
|
|
<p><strong>You can install an app on your phone or laptop,</strong> or you can use a newsreader app through a website. Here are three apps, in alphabetical order:</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<li><a href="https://feedly.com">Feedly</a> – free up to 100 subscriptions. Web/Android/iOS.</li> |
|
|
|
<li><a href="https://www.inoreader.com">Inoreader</a> – free up to 150 subscriptions. Web/Android/iOS.</li> |
|
|
|
<li><a href="https://ranchero.com/netnewswire/">NetNewsWire</a> – free. iOS/Mac.</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<p><em>It doesn’t matter which you choose as newsreaders make it fairly easy to export your list of subscriptions and move them to another app in the future. So choose one you like the look of.</em></p> |
|
|
|
|
|
|
|
<p>Choose your app, and either sign up or download it.</p> |
|
|
|
|
|
|
|
<h1 id="3-how-do-i-use-my-new-newsreader-app-to-subscribe-to-a-feed">3. How do I use my new newsreader app to subscribe to a feed?</h1> |
|
|
|
|
|
|
|
<p><strong>You’ll need the Feed URL.</strong> To get this, go to the website you want to subscribe to and find that RSS link or the feed icon. Then…</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<li>On <strong>desktop,</strong> right click on the link and choose “Copy Link Address” or similar.</li> |
|
|
|
<li>On <strong>mobile,</strong> tap and hold the link until a menu comes up. Choose “Copy link” or similar.</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<p>Then go to your newsreader app and look for a function which will be named something like</p> |
|
|
|
|
|
|
|
<ul> |
|
|
|
<li>“Subscribe”</li> |
|
|
|
<li>“Add Web Feed”</li> |
|
|
|
<li>or maybe a “+” icon</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<p>and <strong>paste in the Feed URL.</strong></p> |
|
|
|
|
|
|
|
<p><strong>You’re done!</strong> You can now read the latest content in your newsreader.</p> |
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<h2 id="who-made-this-site">Who made this site?</h2> |
|
|
|
|
|
|
|
<p><strong>About Feeds</strong> is a free site from <a href="http://interconnected.org">Matt Webb</a>. I made this site because <em>using web feeds for the first time is hard,</em> and we can fix that. <a href="why">Read about why this site exists.</a></p> |
|
|
|
|
|
|
|
<p>My hope is that <strong>About Feeds</strong> can become the default <em>“Help! What is this?”</em> link next to every web feed icon on the web. It’s bare bones right now, and I have a ton of ideas of how to make this site more and more useful.</p> |
|
|
|
|
|
|
|
<p><em><strong>Are you a site owner?</strong> Please consider adding a <a href="https://aboutfeeds.com">Help! What is a feed?</a> link (or similar) next to your feed link or RSS icon. If you have access to the code, style your feed to make it friendly to new users with <a href="https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl">pretty-feed.xsl</a>.</em></p> |
|
|
|
|
|
|
|
<p>To contribute or to give feedback, <a href="https://github.com/genmon/aboutfeeds">start a discussion on the About Feeds repo on GitHub</a> or contact me. My email address is <a href="http://interconnected.org">over here</a>.</p> |
|
|
|
|
|
|
|
<p>–Matt</p> |
|
|
|
</article> |
|
|
|
|
|
|
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
<footer> |
|
|
|
<p> |
|
|
|
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use> |
|
|
|
</svg> Accueil</a> • |
|
|
|
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use> |
|
|
|
</svg> RSS</a> • |
|
|
|
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use> |
|
|
|
</svg> Pro</a> • |
|
|
|
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use> |
|
|
|
</svg> Email</a> • |
|
|
|
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use> |
|
|
|
</svg> Légal</abbr> |
|
|
|
</p> |
|
|
|
<template id="theme-selector"> |
|
|
|
<form> |
|
|
|
<fieldset> |
|
|
|
<legend><svg class="icon icon-brightness-contrast"> |
|
|
|
<use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use> |
|
|
|
</svg> Thème</legend> |
|
|
|
<label> |
|
|
|
<input type="radio" value="auto" name="chosen-color-scheme" checked> Auto |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="dark" name="chosen-color-scheme"> Foncé |
|
|
|
</label> |
|
|
|
<label> |
|
|
|
<input type="radio" value="light" name="chosen-color-scheme"> Clair |
|
|
|
</label> |
|
|
|
</fieldset> |
|
|
|
</form> |
|
|
|
</template> |
|
|
|
</footer> |
|
|
|
<script> |
|
|
|
function loadThemeForm(templateName) { |
|
|
|
const themeSelectorTemplate = document.querySelector(templateName) |
|
|
|
const form = themeSelectorTemplate.content.firstElementChild |
|
|
|
themeSelectorTemplate.replaceWith(form) |
|
|
|
|
|
|
|
form.addEventListener('change', (e) => { |
|
|
|
const chosenColorScheme = e.target.value |
|
|
|
localStorage.setItem('theme', chosenColorScheme) |
|
|
|
toggleTheme(chosenColorScheme) |
|
|
|
}) |
|
|
|
|
|
|
|
const selectedTheme = localStorage.getItem('theme') |
|
|
|
if (selectedTheme && selectedTheme !== 'undefined') { |
|
|
|
form.querySelector(`[value="${selectedTheme}"]`).checked = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const prefersColorSchemeDark = '(prefers-color-scheme: dark)' |
|
|
|
window.addEventListener('load', () => { |
|
|
|
let hasDarkRules = false |
|
|
|
for (const styleSheet of Array.from(document.styleSheets)) { |
|
|
|
let mediaRules = [] |
|
|
|
for (const cssRule of styleSheet.cssRules) { |
|
|
|
if (cssRule.type !== CSSRule.MEDIA_RULE) { |
|
|
|
continue |
|
|
|
} |
|
|
|
// WARNING: Safari does not have/supports `conditionText`. |
|
|
|
if (cssRule.conditionText) { |
|
|
|
if (cssRule.conditionText !== prefersColorSchemeDark) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { |
|
|
|
continue |
|
|
|
} |
|
|
|
} |
|
|
|
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) |
|
|
|
} |
|
|
|
|
|
|
|
// WARNING: do not try to insert a Rule to a styleSheet you are |
|
|
|
// currently iterating on, otherwise the browser will be stuck |
|
|
|
// in a infinite loop… |
|
|
|
for (const mediaRule of mediaRules) { |
|
|
|
styleSheet.insertRule(mediaRule.cssText) |
|
|
|
hasDarkRules = true |
|
|
|
} |
|
|
|
} |
|
|
|
if (hasDarkRules) { |
|
|
|
loadThemeForm('#theme-selector') |
|
|
|
} |
|
|
|
}) |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
