davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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.
23 Commits
1 Branch
Tree: bf02b2446d
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'bf02b2446d'
${ noResults }
larlet-fr-david/david/blog/2019/flux-rss/index.html

index.html 34KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910 
  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>

  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Flux RSS ? — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2019/flux-rss/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Tentative d’explication claire d’un truc non trivial." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Tentative d’explication claire d’un truc non trivial." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Flux RSS ?" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2019/flux-rss/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39.   

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2019/flux-rss.jpg" />

  41.   

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116.   @font-face {

  117.     font-family: 'TriplicateT4c';

  118.     src: url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff2') format('woff2'),

  119.          url('/static/david/css/fonts/Triplicate-T4-Code-Regular-webfont.woff') format('woff');

  120.     font-weight: 300;

  121.     font-style: normal;

  122.     font-display: swap;

  123.   }

  124. 

  125. 

  126. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  127. body {

  128.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  129.   font-family: "EquityTextB", Palatino, serif;

  130.   background-color: #f0f0ea;

  131.   color: #07486c;

  132.   font-kerning: normal;

  133.   -moz-osx-font-smoothing: grayscale;

  134.   -webkit-font-smoothing: subpixel-antialiased;

  135.   text-rendering: optimizeLegibility;

  136.   font-variant-ligatures: common-ligatures contextual;

  137.   font-feature-settings: "kern", "liga", "clig", "calt";

  138. }

  139. pre, code, kbd, samp, var, tt {

  140.   font-family: 'TriplicateT4c', monospace;

  141. }

  142. em {

  143.   font-style: italic;

  144.   color: #323a45;

  145. }

  146. strong {

  147.   font-weight: bold;

  148.   color: black;

  149. }

  150. nav {

  151.   background-color: #323a45;

  152.   color: #f0f0ea;

  153.   display: flex;

  154.   justify-content: space-around;

  155.   padding: 1rem .5rem;

  156. }

  157.   nav:last-child {

  158.     border-bottom: 1vh solid #2d7474;

  159.   }

  160.   nav a {

  161.     color: #f0f0ea;

  162.   }

  163.   nav abbr {

  164.     border-bottom: 1px dotted white;

  165.   }

  166. 

  167. h1 {

  168.   border-top: 1vh solid #2d7474;

  169.   border-bottom: .2vh dotted #2d7474;

  170.   background-color: #e3e1e1;

  171.   color: #323a45;

  172.   text-align: center;

  173.   padding: 5rem 0 4rem 0;

  174.   width: 100%;

  175.   font-family: 'ConcourseT3';

  176.   display: flex;

  177.   flex-direction: column;

  178. }

  179.   h1.single {

  180.     padding-bottom: 10rem;

  181.   }

  182.   h1 span {

  183.     position: absolute;

  184.     top: 1vh;

  185.     left: 20%;

  186.     line-height: 0;

  187.   }

  188.     h1 span a {

  189.       line-height: 1.7;

  190.       padding: 1rem 1.2rem .6rem 1.2rem;

  191.       border-radius: 0 0 6% 6%;

  192.       background: #2d7474;

  193.       font-size: 1.3rem;

  194.       color: white;

  195.       text-decoration: none;

  196.     }

  197. h2 {

  198.   margin: 4rem 0 1rem;

  199.   border-top: .2vh solid #2d7474;

  200.   padding-top: 1vh;

  201. }

  202. h3 {

  203.   text-align: center;

  204.   margin: 3rem 0 .75em;

  205. }

  206. hr {

  207.   height: .4rem;

  208.   width: .4rem;

  209.   border-radius: .4rem;

  210.   background: #07486c;

  211.   margin: 2.5rem auto;

  212. }

  213. time {

  214.   display: bloc;

  215.   margin-left: 0 !important;

  216. }

  217. ul, ol {

  218.   margin: 2rem;

  219. }

  220. ul {

  221.   list-style-type: square;

  222. }

  223. a {

  224.   text-decoration-skip-ink: auto;

  225.   text-decoration-thickness: 0.05em;

  226.   text-underline-offset: 0.09em;

  227. }

  228. article {

  229.   max-width: 50rem;

  230.   display: flex;

  231.   flex-direction: column;

  232.   margin: 2rem auto;

  233. }

  234.   article.single {

  235.     border-top: .2vh dotted #2d7474;

  236.     margin: -6rem auto 1rem auto;

  237.     background: #f0f0ea;

  238.     padding: 2rem;

  239.   }

  240.   article p:last-child {

  241.     margin-bottom: 1rem;

  242.   }

  243. p {

  244.   padding: 0 .5rem;

  245.   margin-left: 3rem;

  246. }

  247.   p + p,

  248.   figure + p {

  249.     margin-top: 2rem;

  250.   }

  251. 

  252. blockquote {

  253.   background-color: #e3e1e1;

  254.   border-left: .5vw solid #2d7474;

  255.   display: flex;

  256.   flex-direction: column;

  257.   align-items: center;

  258.   padding: 1rem;

  259.   margin: 1.5rem;

  260. }

  261.   blockquote cite {

  262.     font-style: italic;

  263.   }

  264.   blockquote p {

  265.     margin-left: 0;

  266.   }

  267. 

  268. figure {

  269.   border-top: .2vh solid #2d7474;

  270.   background-color: #e3e1e1;

  271.   text-align: center;

  272.   padding: 1.5rem 0;

  273.   margin: 1rem 0 0;

  274.   font-size: 1.5rem;

  275.   width: 100%;

  276. }

  277.   figure img {

  278.     max-width: 250px;

  279.     max-height: 250px;

  280.     border: .5vw solid #323a45;

  281.     padding: 1px;

  282.   }

  283. figcaption {

  284.   padding: 1rem;

  285.   line-height: 1.4;

  286. }

  287. aside {

  288.   display: flex;

  289.   flex-direction: column;

  290.   background-color: #e3e1e1;

  291.   padding: 1rem 0;

  292.   border-bottom: .2vh solid #07486c;

  293. }

  294.   aside p {

  295.     max-width: 50rem;

  296.     margin: 0 auto;

  297.   }

  298. 

  299. /* https://fvsch.com/code/css-locks/ */

  300. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  301.   font-size: 1rem;

  302.   line-height: calc( 1.5em + 0.2 * 1rem );

  303. }

  304. h1 {

  305.   font-size: 1.9rem;

  306.   line-height: calc( 1.2em + 0.2 * 1rem );

  307. }

  308. h2 {

  309.   font-size: 1.6rem;

  310.   line-height: calc( 1.3em + 0.2 * 1rem );

  311. }

  312. h3 {

  313.   font-size: 1.35rem;

  314.   line-height: calc( 1.4em + 0.2 * 1rem );

  315. }

  316. @media (min-width: 20em) {

  317.   /* The (100vw - 20rem) / (50 - 20) part

  318.      resolves to 0-1rem, depending on the

  319.      viewport width (between 20em and 50em). */

  320.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  321.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.     margin-left: 0;

  324.   }

  325.   h1 {

  326.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  327.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  328.   }

  329.   h2 {

  330.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  331.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  332.   }

  333.   h3 {

  334.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  335.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  336.   }

  337. }

  338. @media (min-width: 50em) {

  339.   /* The right part of the addition *must* be a

  340.      rem value. In this example we *could* change

  341.      the whole declaration to font-size:2.5rem,

  342.      but if our baseline value was not expressed

  343.      in rem we would have to use calc. */

  344.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  345.     font-size: calc( 1rem + .6 * 1rem );

  346.     line-height: 1.5em;

  347.   }

  348.   p, li, pre, details {

  349.     margin-left: 3rem;

  350.   }

  351.   h1 {

  352.     font-size: calc( 1.9rem + 1.5 * 1rem );

  353.     line-height: 1.2em;

  354.   }

  355.   h2 {

  356.     font-size: calc( 1.5rem + 1.5 * 1rem );

  357.     line-height: 1.3em;

  358.   }

  359.   h3 {

  360.     font-size: calc( 1.35rem + 1.5 * 1rem );

  361.     line-height: 1.4em;

  362.   }

  363.   figure img {

  364.     max-width: 500px;

  365.     max-height: 500px;

  366.   }

  367. }

  368. 

  369. figure.unsquared {

  370.   margin-bottom: 1.5rem;

  371. }

  372.   figure.unsquared img {

  373.     height: inherit;

  374.   }

  375. 

  376. 

  377.   /* https://github.com/richleland/pygments-css */

  378.   .codehilite{

  379.       background-color: #fdf6e3;

  380.       margin: 1rem auto;

  381.       padding: 1rem;

  382.       overflow-x:auto;

  383.       box-shadow:inset 0 0 2px rgba(0,0,0,0.2)

  384.   }

  385.   .codehilite .t{color:#586e75}

  386.   .codehilite .w{color:#073642}

  387.   .codehilite .err{color:#cb4b16}

  388.   .codehilite .k{color:#859900}

  389.   .codehilite .kc{color:#2aa198}

  390.   .codehilite .kd{color:#268bd2}

  391.   .codehilite .kn{color:#b58900}

  392.   .codehilite .kp{color:#859900}

  393.   .codehilite .kr{color:#073642}

  394.   .codehilite .kt{color:#b58900}

  395.   .codehilite .n{color:#586e75}

  396.   .codehilite .na{color:#2aa198}

  397.   .codehilite .nb{color:#268bd2}

  398.   .codehilite .nc{color:#268bd2}

  399.   .codehilite .ne{color:#cb4b16}

  400.   .codehilite .no{color:#2aa198}

  401.   .codehilite .nd{color:#2aa198}

  402.   .codehilite .ni{color:#2aa198;font-weight:bold}

  403.   .codehilite .nf{color:#268bd2}

  404.   .codehilite .nn{color:#586e75}

  405.   .codehilite .nt{color:#2aa198;font-weight:bold}

  406.   .codehilite .nv{color:#cb4b16}

  407.   .codehilite .b{color:#859900}

  408.   .codehilite .bp{color:#586e75}

  409.   .codehilite .v{color:#586e75}

  410.   .codehilite .vc{color:#586e75}

  411.   .codehilite .vg{color:#268bd2}

  412.   .codehilite .vi{color:#268bd2}

  413.   .codehilite .m{color:#268bd2}

  414.   .codehilite .mf{color:#268bd2}

  415.   .codehilite .mh{color:#268bd2}

  416.   .codehilite .mi{color:#268bd2}

  417.   .codehilite .mo{color:#268bd2}

  418.   .codehilite .s{color:#2aa198}

  419.   .codehilite .sb{color:#2aa198}

  420.   .codehilite .sc{color:#2aa198}

  421.   .codehilite .sd{color:#2aa198}

  422.   .codehilite .s2{color:#2aa198}

  423.   .codehilite .se{color:#cb4b16}

  424.   .codehilite .sh{color:#2aa198}

  425.   .codehilite .si{color:#cb4b16}

  426.   .codehilite .sx{color:#2aa198}

  427.   .codehilite .sr{color:#cb4b16}

  428.   .codehilite .s1{color:#2aa198}

  429.   .codehilite .ss{color:#cb4b16}

  430.   .codehilite .il{color:#268bd2}

  431.   .codehilite .o{color:#586e75}

  432.   .codehilite .ow{color:#859900}

  433.   .codehilite .p{color:#586e75}

  434.   .codehilite .c{color:#93a1a1;font-style:italic}

  435.   .codehilite .cm{color:#93a1a1}

  436.   .codehilite .cp{color:#93a1a1}

  437.   .codehilite .c1{color:#93a1a1}

  438.   .codehilite .cs{color:#93a1a1}

  439.   .codehilite .hll{background-color:#dc322f}

  440.   .codehilite .g{color:#586e75}

  441.   .codehilite .gd{color:#586e75}

  442.   .codehilite .ge{font-style:italic}

  443.   .codehilite .gr{color:#586e75}

  444.   .codehilite .gh{color:#586e75;font-weight:bold}

  445.   .codehilite .gi{color:#586e75}

  446.   .codehilite .go{color:#586e75}

  447.   .codehilite .gp{color:#586e75}

  448.   .codehilite .gs{font-weight:bold}

  449.   .codehilite .gu{color:#586e75;font-weight:bold}

  450.   .codehilite .gt{color:#586e75}

  451. 

  452. 

  453. @media print {

  454.   body { font-size: 100%; }

  455.   a:after { content: " (" attr(href) ")"; }

  456.   a, a:link, a:visited, a:after {

  457.     text-decoration: underline;

  458.     text-shadow: none !important;

  459.     background-image: none !important;

  460.     background: white;

  461.     color: black;

  462.   }

  463.   abbr[title] { border-bottom: 0; }

  464.   abbr[title]:after { content: " (" attr(title) ")"; }

  465.   img { page-break-inside: avoid; }

  466.   @page { margin: 2cm .5cm; }

  467.   h1, h2, h3 { page-break-after: avoid; }

  468.   p3 { orphans: 3; widows: 3; }

  469.   img {

  470.     max-width: 250px !important;

  471.     max-height: 250px !important;

  472.   }

  473.   nav, aside { display: none; }

  474. }

  475. 

  476. ul.with_columns {

  477.   column-count: 1;

  478. }

  479. @media (min-width: 20em) {

  480.   ul.with_columns {

  481.     column-count: 2;

  482.   }

  483. }

  484. @media (min-width: 50em) {

  485.   ul.with_columns {

  486.     column-count: 3;

  487.   }

  488. }

  489. ul.with_two_columns {

  490.   column-count: 1;

  491. }

  492. @media (min-width: 20em) {

  493.   ul.with_two_columns {

  494.     column-count: 1;

  495.   }

  496. }

  497. @media (min-width: 50em) {

  498.   ul.with_two_columns {

  499.     column-count: 2;

  500.   }

  501. }

  502. 

  503. .gallery {

  504.   display: flex;

  505.   flex-wrap: wrap;

  506.   justify-content: space-around;

  507. }

  508.   .gallery figure img {

  509.     margin-left: 1rem;

  510.     margin-right: 1rem;

  511.   }

  512.   .gallery figure figcaption {

  513.     font-family: 'ConcourseT3'

  514.   }

  515. 

  516. footer {

  517.   font-family: 'ConcourseT3';

  518.   display: flex;

  519.   flex-direction: column;

  520.   border-top: 3px solid white;

  521.   padding: 4rem 0;

  522.   background-color: #07486c;

  523.   color: white;

  524. }

  525.   footer > * {

  526.     max-width: 50rem;

  527.     margin: 0 auto;

  528.   }

  529.   footer a {

  530.     color: #f1c40f;

  531.   }

  532.   footer .avatar {

  533.     width: 200px;

  534.     height: 200px;

  535.     border-radius: 50%;

  536.     float: left;

  537.     -webkit-shape-outside: circle();

  538.     shape-outside: circle();

  539.     margin-right: 2rem;

  540.     padding: 2px 5px 5px 2px;

  541.     background: white;

  542.     border-left: 1px solid #f1c40f;

  543.     border-top: 1px solid #f1c40f;

  544.     border-right: 5px solid #f1c40f;

  545.     border-bottom: 5px solid #f1c40f;

  546.   }

  547. </style>

  548. 

  549. <h1 class="single">

  550.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  551.   Flux RSS ?

  552.   <time>Publié le 19 mars 2019</time>

  553. </h1>

  554. <article class="single">

  555.   <p><em>Un article qui va évoluer en fonction de vos retours de façon à en faire une référence. N’hésitez pas à me proposer des améliorations !</em></p>

  556. <p>Si vous avez entendu parler de « flux RSS », « flux Atom », de « syndication », d’« agrégateur » ou en anglais de « <em>feeds</em> » sans vraiment savoir de quoi il retourne je vais essayer de démystifier ça.</p>

  557. <p>Sans parler de technique. En parlant un peu de politique quand même.</p>

  558. <h2>Utilité</h2>

  559. <p>Si vous savez ce qu’est une liste de diffusion (ou <em>newsletter</em>) vous êtes presque familier·e d’un flux RSS.</p>

  560. <p>Avec une liste de diffusion, vous recevez un courriel (ou <em>email</em>) à chaque nouvelle information disponible. Quelqu’un·e rédige un texte, ajoute tous ses contacts en copie et ça arrive dans votre boîte de réception.</p>

  561. <details>

  562. <summary>Enfin presque…</summary>

  563. <em>En réalité, ça passe probablement par un service tiers qui récupère votre adresse et redirige chaque lien envoyé pour pouvoir vous profiler en fonction de ce qui vous a intéressé mais restons concentré·e·s sur le flux d’information pour l’instant.</em>

  564. </details>

  565. 

  566. <p>Lorsqu’on utilise un flux RSS, il s’agit de s’abonner à ce qu’une personne va publier (oui, c’est l’ancêtre du réseau social !) sauf que vous ne recevez pas les mises à jour dans votre boîte de réception mais dans un outil dédié. Et vous n’avez pas à fournir votre courriel ni à vous identifier. Et ça marche avec la majorité des publications sur le Web.</p>

  567. <p>Enfin ça marchait, car — et c’est là où ça devient politique — les plateformes ont tout intérêt à ce que vous restiez chez elles pour tracer votre comportement, que vous veniez regarder de la publicité le plus régulièrement possible, etc.</p>

  568. <p>Utiliser un lecteur de flux RSS (on appelle cela un agrégateur) c’est <em>aussi</em> lutter contre une centralisation du Web. C’est également ne pas être soumis aux bon vouloir d’un algorithme pour sélectionner ce que vous allez voir. C’est choisir intentionnellement vos lectures et donc votre esprit critique.</p>

  569. <h2>Usage</h2>

  570. <p>En général, on représente le RSS avec l’icône (orange) suivante :</p>

  571. <p><svg role="img" aria-label="Logo de RSS" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#f5a623" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></p>

  572. <p>J’ai dans mon outil d’agrégation une centaine de sources, majoritairement des blogs personnels, qui se rafraichissent toutes les 30 minutes. Je n’ai plus besoin d’aller consulter ces sites un par un pour savoir s’ils ont été mis à jour, des petits robots s’en occupent pour moi. Je me retrouve avec un flux d’articles en ordre chronologique de publication. Et lisibles dans un style unifié qui me permet d’être attentif à ce que je lis. Pas de <em>popups</em> pour recevoir du <em>spam</em>, pas de publicités qui s’agitent, pas de bouton pour accepter les <em>cookies</em>. Du contenu simple et lisible.</p>

  573. <p>Bien sûr, en un clic je peux me retrouver sur le site et interagir avec mais, dans la majorité des cas cette suite d’articles me suffit. Cela me permet de gagner beaucoup de temps et de tranquillité d’esprit. Je n’ai pas la peur de manquer quelque chose, je n’ai pas la peur de suivre des liens de suggestions douteux, je ne suis pas profilé par ce que je lis.</p>

  574. <h2>Et moi ?</h2>

  575. <p>Premièrement, si vous produisez du contenu, assurez-vous d’avoir laissé la possibilité aux autres de s’abonner à votre flux RSS. Sur la plupart des outils de publication (Wordpress, Medium, etc) la syndication est activée par défaut, mais vous pouvez vous en assurer en vous abonnant à vos propres publications ! Vous pouvez faire un lien explicite vers votre flux dans vos pages pour en favoriser la découverte et encourager cette façon décentralisée et libre d’accéder à de l’information.</p>

  576. <p>Et justement en parlant de s’abonner, il existe une <a href="https://en.wikipedia.org/wiki/Comparison_of_feed_aggregators">multitude d’agrégateurs</a> (cette page n’existait malheureusement pas en français, <a href="https://fr.wikipedia.org/wiki/Comparaison_des_agr%C3%A9gateurs_de_flux">maintenant si</a> !), à vous de trouver celui qui vous convient. C’est aussi la beauté d’un standard, cela permet d’une part d’éviter les monopoles et de l’autre d’être résilient lorsqu’un outil est abandonné. J’utilise pour ma part <a href="https://en.wikipedia.org/wiki/NetNewsWire">NetNewsWire</a> sous macOS et rien ne m’empêche d’en changer demain sachant que les imports et exports sont aussi standardisés.</p>

  577. <p>Lorsque vous avez installé un de ces outils, vous pouvez tester en vous abonnant — totalement au hasard — au <a href="/david/log">flux de cet espace</a>. Si vous cliquez sur ce lien dans votre navigateur vous allez avoir un code (presque) impossible à lire <em>mais</em> si vous l’ajoutez à votre agrégateur alors là votre vie va changer à tout jamais. Vous pouvez ensuite parcourir vos sites favoris à la recherche d’un flux RSS dédié.</p>

  578. <p>Ça devrait ressembler à ça :</p>

  579. <figure class="unsquared">

  580.   <img src="/static/david/blog/2019/capture-lecteur-rss.png" alt="Capture de mon lecteur RSS" />

  581.   <figcaption>

  582.     Par exemple, voici le rendu de ce billet dans mon agrégateur (so meta).

  583.   </figcaption>

  584. </figure>

  585. 

  586. <p>Notez qu’il existe des agrégateurs sous forme de logiciels dédiés mais aussi sous forme d’applications Web selon vos préférences personnelles et/ou vos contraintes (mobilité, ordinateur partagé, etc).</p>

  587. <p>Quelques exemples avec les principaux écueils que vous pouvez rencontrer :</p>

  588. <ul>

  589. <li><a href="http://romy.tetue.net/">Romy Duhem-Verdière</a>, ce qui devrait être le cas « classique », un lien direct vers le <a href="http://feeds.feedburner.com/romy">flux RSS</a> depuis toutes les pages.</li>

  590. <li><a href="https://marges.clairezuliani.com/">Claire Zuliani</a>, le lien n’est pas visible donc il faut soit que votre agrégateur le trouve à partir de la page, soit aller dans le code source pour <a href="https://marges.clairezuliani.com/feed.xml">le trouver</a>.</li>

  591. <li><a href="http://elisegravel.com/">Élise Gravel</a>, on voit qu’il est mal configuré (non affichage dans le navigateur) et non découvrable directement depuis le site ni même son code source. Il faut savoir que c’est un Wordpress qui rajoute <code>/feed/</code> par défaut à <a href="http://elisegravel.com/feed/">l’URL du flux</a>, pas évident.</li>

  592. <li><a href="https://www.youtube.com/channel/UCBqV52BgH8eQGExjZz7rO5w">Chris Prouse</a> sur Youtube, il faut passer par <a href="https://lehollandaisvolant.net/?d=2018/06/09/13/55/04-mini-outil-trouver-le-flux-rss-dune-chaine-youtube">un petit outil</a> pour trouver le <a href="https://www.youtube.com/feeds/videos.xml?channel_id=UCBqV52BgH8eQGExjZz7rO5w">flux RSS d’une chaîne</a>.</li>

  593. <li>D’autres cas insolites ?</li>

  594. </ul>

  595. <p>Cela fonctionne aussi bien évidemment avec des sites d’informations plus traditionnels comme <a href="https://www.monde-diplomatique.fr/">Le Monde Diplomatique</a>.</p>

  596. <p>Il existe des extensions dédiées aux navigateurs pour détecter les flux RSS comme <a href="https://addons.mozilla.org/fr/firefox/addon/awesome-rss/">Awesome RSS</a> pour Firefox ou <a href="https://chrome.google.com/webstore/detail/rss-subscription-extensio/nlbjncdgjeocebhnmkbbbdekmmmcbfjd">RSS Subscription Extension</a> pour Chrome.</p>

  597. <h2>Encore !</h2>

  598. <ul>

  599. <li>La page wikipedia <a href="https://fr.wikipedia.org/wiki/Souscription_%C3%A0_du_contenu">Souscription à du contenu</a></li>

  600. <li><a href="https://openweb.eu.org/articles/syndication-mon-amour">Syndication mon amour</a> (<a href="/david/cache/9e92a5ac171038de1c58a2ab90e98c0e/">cache</a>)</li>

  601. <li>Votre propre article sur le sujet ?</li>

  602. </ul>

  603. </article>

  604. 

  605. 

  606.   <figure class="image" property="schema:image">

  607.     <img src="/static/david/blog/2019/flux-rss.jpg" alt="" />

  608.   </figure>

  609. 

  610. 

  611. 

  612. <nav id="jumpto">

  613.   <p>

  614.     <a rel=prev href="/david/blog/2019/valeurs-etoiles/">← Valeurs et étoiles</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2019/faire-equipe/">Faire équipe →</a>

  615.   </p>

  616. </nav>

  617. 

  618. <footer>

  619.   <div>

  620.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  621.     <p>

  622.       Bonjour/Hi!

  623.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  624.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  625.     </p>

  626.     <p>

  627.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  628.     </p>

  629.     

  630.       <p>

  631.         Les dernières publications hebdomadaires sont :

  632.       </p>

  633.       <ul class="with_columns">

  634.         

  635.           <li>

  636.             <a href="/david/stream/2019/12/24/">Outils</a>

  637.           </li>

  638.         

  639.           <li>

  640.             <a href="/david/stream/2019/12/17/">Origines</a>

  641.           </li>

  642.         

  643.           <li>

  644.             <a href="/david/stream/2019/12/10/">Publier</a>

  645.           </li>

  646.         

  647.           <li>

  648.             <a href="/david/stream/2019/12/03/">En forêt</a>

  649.           </li>

  650.         

  651.           <li>

  652.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  653.           </li>

  654.         

  655.           <li>

  656.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  657.           </li>

  658.         

  659.           <li>

  660.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  661.           </li>

  662.         

  663.           <li>

  664.             <a href="/david/stream/2019/11/05/">Positif</a>

  665.           </li>

  666.         

  667.           <li>

  668.             <a href="/david/stream/2019/10/29/">Dettes</a>

  669.           </li>

  670.         

  671.           <li>

  672.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  673.           </li>

  674.         

  675.           <li>

  676.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  677.           </li>

  678.         

  679.           <li>

  680.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  681.           </li>

  682.         

  683.           <li>

  684.             <a href="/david/stream/2019/10/01/">Présent</a>

  685.           </li>

  686.         

  687.           <li>

  688.             <a href="/david/stream/2019/09/24/">Manifester</a>

  689.           </li>

  690.         

  691.           <li>

  692.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  693.           </li>

  694.         

  695.           <li>

  696.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  697.           </li>

  698.         

  699.           <li>

  700.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  701.           </li>

  702.         

  703.           <li>

  704.             <a href="/david/stream/2019/08/27/">Documenter</a>

  705.           </li>

  706.         

  707.           <li>

  708.             <a href="/david/stream/2019/08/20/">Frustration</a>

  709.           </li>

  710.         

  711.           <li>

  712.             <a href="/david/stream/2019/08/13/">Holisme</a>

  713.           </li>

  714.         

  715.           <li>

  716.             <a href="/david/stream/2019/08/06/">1%</a>

  717.           </li>

  718.         

  719.           <li>

  720.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  721.           </li>

  722.         

  723.           <li>

  724.             <a href="/david/stream/2019/07/23/">Timelines</a>

  725.           </li>

  726.         

  727.           <li>

  728.             <a href="/david/stream/2019/07/16/">Écoute</a>

  729.           </li>

  730.         

  731.           <li>

  732.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  733.           </li>

  734.         

  735.           <li>

  736.             <a href="/david/stream/2019/06/21/">À lier</a>

  737.           </li>

  738.         

  739.           <li>

  740.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  741.           </li>

  742.         

  743.           <li>

  744.             <a href="/david/stream/2019/06/07/">Amateur</a>

  745.           </li>

  746.         

  747.           <li>

  748.             <a href="/david/stream/2019/05/31/">Pollution</a>

  749.           </li>

  750.         

  751.           <li>

  752.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  753.           </li>

  754.         

  755.           <li>

  756.             <a href="/david/stream/2019/05/10/">Folie</a>

  757.           </li>

  758.         

  759.           <li>

  760.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  761.           </li>

  762.         

  763.           <li>

  764.             <a href="/david/stream/2019/04/12/">Péremption</a>

  765.           </li>

  766.         

  767.           <li>

  768.             <a href="/david/stream/2019/04/05/">Définitions</a>

  769.           </li>

  770.         

  771.           <li>

  772.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  773.           </li>

  774.         

  775.           <li>

  776.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  777.           </li>

  778.         

  779.           <li>

  780.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  781.           </li>

  782.         

  783.           <li>

  784.             <a href="/david/stream/2019/03/08/">Lecture</a>

  785.           </li>

  786.         

  787.           <li>

  788.             <a href="/david/stream/2019/03/01/">Journaux</a>

  789.           </li>

  790.         

  791.           <li>

  792.             <a href="/david/stream/2019/02/22/">Écriture</a>

  793.           </li>

  794.         

  795.           <li>

  796.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  797.           </li>

  798.         

  799.           <li>

  800.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  801.           </li>

  802.         

  803.           <li>

  804.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  805.           </li>

  806.         

  807.           <li>

  808.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  809.           </li>

  810.         

  811.           <li>

  812.             <a href="/david/stream/2019/01/18/">Agilité</a>

  813.           </li>

  814.         

  815.           <li>

  816.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  817.           </li>

  818.         

  819.           <li>

  820.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  821.           </li>

  822.         

  823.       </ul>

  824.     

  825.     <p>

  826.       Voici quelques articles choisis :

  827.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  828.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  829.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  830.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  831.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  832.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  833.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  834.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  835.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  836.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  837.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  838.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  839.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  840.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  841.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  842.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  843.     </p>

  844.     <p>

  845.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  846.     </p>

  847.     <p>

  848.       Je ne traque pas ta navigation mais mon

  849.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  850.       conserve des logs d’accès.

  851.     </p>

  852.   </div>

  853. </footer>

  854. <script type="text/javascript">

  855.   ;(_ => {

  856.     const jumper = document.getElementById('jumper')

  857.     jumper.addEventListener('click', e => {

  858.       e.preventDefault()

  859.       const anchor = e.target.getAttribute('href')

  860.       const targetEl = document.getElementById(anchor.substring(1))

  861.       targetEl.scrollIntoView({behavior: 'smooth'})

  862.     })

  863.   })()

  864. </script>

  865. 

  866.   <script>

  867.   /* Service workers */

  868.   if (navigator.serviceWorker) {

  869.     window.addEventListener('load', function () {

  870.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  871.       function sendLinks (selector) {

  872.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  873.           return link.getAttribute('href')

  874.         })

  875.         links.push(location.pathname)  // Put the current page in cache too.

  876.         navigator.serviceWorker.controller.postMessage({ links: links })

  877.       }

  878.       navigator.serviceWorker.getRegistration()

  879.         .then(function (registration) {

  880.           if (!registration || !navigator.serviceWorker.controller) {

  881.             return navigator.serviceWorker.register('/serviceworker.js')

  882.               .then(navigator.serviceWorker.ready)

  883.               .then(function () {

  884.                 console.log('[ServiceWorker] Ready to go!')

  885.               })

  886.               .catch(console.error.bind(console))

  887.           } else {

  888.             console.log('[ServiceWorker] Send links via registration')

  889.             sendLinks(selector)

  890.           }

  891.         })

  892.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  893.         console.log('[ServiceWorker] Send links via controller change')

  894.         sendLinks(selector)

  895.       })

  896.       navigator.serviceWorker.addEventListener('message', function (event) {

  897.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  898.         if (event.data.status && link) {

  899.           link.style.backgroundColor = '#2d7474'

  900.           link.style.color = '#f0f0ea'

  901.           

  902.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  903.           

  904.         }

  905.       })

  906.     })

  907.   } else {

  908.     console.warn('[ServiceWorker] No cache for old browsers.')

  909.   }

  910. </script>