davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
172 Commits
1 Branch
Struktur: 53f8dce943
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „53f8dce943“
${ noResults }
larlet-fr-david/david/blog/2018/caching-links/index.html

index.html 29KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=en>

  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>On caching links — 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/2018/caching-links/">

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

  31.   <meta name="description" content="Because the impermanence of the Web is a reality." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Because the impermanence of the Web is a reality." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="On caching links" />

  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/2018/caching-links/" />

  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/2018/caching-links.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. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   On caching links

  468.   <time>Publié le 15 octobre 2018</time>

  469. </h1>

  470. <article class="single">

  471.   <details lang=fr>

  472.   <summary>Résumé en français</summary>

  473.   <p>Différentes stratégies pour conserver le contenu des liens vers l’extérieur.</p>

  474. </details>

  475. 

  476. <blockquote>

  477. <p>You can take an HTML document written over two decades ago, and open it in a browser today.</p>

  478. <p>Even more astonishing, you can take an HTML document written today and open it in a browser from two decades ago. That’s because the error-handling model of HTML has always been to simply ignore any tags it doesn’t recognise and render the content inside them.</p>

  479. <p><cite><em><a href="https://adactio.com/articles/14321">The Web Is Agreement</a></em> (<a href="/david/cache/22968d175d13a6693433c7c4732469da/">cache</a>)</cite></p>

  480. </blockquote>

  481. <p>The thing is: good luck to find contents from two decades ago!</p>

  482. <p>I have a recurring question from readers about the way I keep content from external sources over years as a cache for almost each and every content linked from here.</p>

  483. <p><em>TL;DR: it’s tedious but stay here, there are now tools to help you.</em></p>

  484. <h2>How I do it</h2>

  485. <p>I start by using <a href="https://github.com/buriy/python-readability">python-readability</a> from my custom code generating these pages (there are <a href="https://github.com/bookieio/breadability#alternatives">tons of alternatives in Python</a> and other langages). Then there are a couple of manual edits, mostly for websites not generating HTML or serving an indigestible tag soup (I’m looking at you Medium!). Then I fix relative links and images. And finally the markdown code is generated to ease the copy-pasta within the final markdown document. <em>I am aware that it is usable as a developer only but it answers the initial question.</em></p>

  486. <p>If your goal is only to archive links (not republish), you can take a look at <a href="https://github.com/kanishka-linux/reminiscence">reminiscence</a> or <a href="https://github.com/pirate/bookmark-archiver">bookmark-archiver</a> for instance. I’m still <a href="/david/stream/2018/02/26/">having the dream</a> to combine all that with a browser as I initiated with my <a href="https://bitbucket.org/david/contentbrowser">contentbrowser</a>. One day maybe…</p>

  487. <h2>How you can you do it</h2>

  488. <blockquote>

  489. <p>As part of the Internet Archive’s aim to build a better Web, we have been working to make the Web more reliable — and are pleased to announce that 9 million formerly broken links on Wikipedia now work because they go to archived versions in the Wayback Machine.</p>

  490. <p>For more than 5 years, the Internet Archive has been archiving nearly every URL referenced in close to 300 wikipedia sites as soon as those links are added or changed at the rate of about 20 million URLs/week.</p>

  491. <p><cite><em><a href="https://blog.archive.org/2018/10/01/more-than-9-million-broken-links-on-wikipedia-are-now-rescued/">More than 9 million broken links on Wikipedia are now rescued</a></em> (<a href="/david/cache/adcc9f7650ed8a95618998e6d68650b5/">cache</a>)</cite></p>

  492. </blockquote>

  493. <p>Using directly the Internet Archive might be an option. It is still a backup on somebody’s else infrastructure but let’s call it <em>Cloud</em> and it sounds OK :-).</p>

  494. <blockquote>

  495. <p>I knew we had to add it at some point. But honestly, x-callback-url support is something I would have never dreamed of being excited about. But, damn it, I am. I am not going to make a long story about how that happened. Just this much: Spend a few minutes on how the Shortcuts app works, and in a breath, you can send clippings and entire articles to iA Writer, with title, copied text, and tags.</p>

  496. <p><cite><em><a href="https://ia.net/writer/blog/write-to-organize">Write to Organize</a></em> (<a href="/david/cache/69dbdb0356028efdcec2bc2fb2a384e2/">cache</a>)</cite></p>

  497. </blockquote>

  498. <p>I didn’t know you can use Apple Shortcuts like that, I need to investigate if it fits my needs. I’m not sure I would bet on it because I prefer to rely on something I have full control on but if you want a less technical option it sounds fine. There are probably options with different operating systems.</p>

  499. <h2>How we can do it better</h2>

  500. <blockquote>

  501. <p>At the Internet Archive, Brewster Kahle and Mike Burner designed the ARC (for "ARChive") file format in 1996 to provide a way to aggregate the millions of small files produced by their archival efforts. The format was eventually standardized as the WARC ("Web ARChive") specification that was released as an ISO standard in 2009 and revised in 2017.</p>

  502. <p><cite><em><a href="https://lwn.net/Articles/766374/">Archiving web sites</a></em> (<a href="/david/cache/9ce5f7eee16ec460d4d2e32bd6c7ec2a/">cache</a>)</cite></p>

  503. </blockquote>

  504. <p>I still think these archives (including that website but that’s another story) should be distributed and shared across groups of people/services for an even better longevity and resilience.</p>

  505. <p>Using <a href="http://www.openzim.org/wiki/OpenZIM">OpenZIM</a> to store the content and <a href="https://github.com/kiwix/kiwix-js">Kiwix</a> to read/distribute it that might work with existing technologies. I already talked about these technologies considering <a href="/david/stream/2018/06/28/">another context</a> but they are still pertinent in this one.</p>

  506. <h2>Browsers, browsers, browsers</h2>

  507. <p>Well, imagine if the Reader feature from your browser has a cache. Now, imagine if that cache were anonymized (encrypted?) and shared. Boom, you have it for free! (and a lot of imagination :p)</p>

  508. <p><em>Hey Mozilla, you still disruptive?</em></p>

  509. </article>

  510. 

  511. 

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

  513.     <img src="/static/david/blog/2018/caching-links.jpg" alt="" />

  514.   </figure>

  515. 

  516. 

  517. 

  518. <nav id="jumpto">

  519.   <p>

  520.     <a rel=prev href="/david/blog/2018/bushcraft-retrospective/">← Bushcraft retrospective</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2018/bivouac-automnal/">Bivouac automnal →</a>

  521.   </p>

  522. </nav>

  523. 

  524. <footer>

  525.   <div>

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

  527.     <p>

  528.       Bonjour/Hi!

  529.       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>

  530.       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>).

  531.     </p>

  532.     <p>

  533.       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>.

  534.     </p>

  535.     

  536.       <p>

  537.         Les dernières publications hebdomadaires sont :

  538.       </p>

  539.       <ul class="with_columns">

  540.         

  541.           <li>

  542.             <a href="/david/stream/2019/12/31/">Merci</a>

  543.           </li>

  544.         

  545.           <li>

  546.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  547.           </li>

  548.         

  549.           <li>

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

  551.           </li>

  552.         

  553.           <li>

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

  555.           </li>

  556.         

  557.           <li>

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

  559.           </li>

  560.         

  561.           <li>

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

  563.           </li>

  564.         

  565.           <li>

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

  567.           </li>

  568.         

  569.           <li>

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

  571.           </li>

  572.         

  573.           <li>

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

  575.           </li>

  576.         

  577.           <li>

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

  579.           </li>

  580.         

  581.           <li>

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

  583.           </li>

  584.         

  585.           <li>

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

  587.           </li>

  588.         

  589.           <li>

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

  591.           </li>

  592.         

  593.           <li>

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

  595.           </li>

  596.         

  597.           <li>

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

  599.           </li>

  600.         

  601.           <li>

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

  603.           </li>

  604.         

  605.           <li>

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

  607.           </li>

  608.         

  609.           <li>

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

  611.           </li>

  612.         

  613.           <li>

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

  615.           </li>

  616.         

  617.           <li>

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

  619.           </li>

  620.         

  621.           <li>

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

  623.           </li>

  624.         

  625.           <li>

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

  627.           </li>

  628.         

  629.           <li>

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

  631.           </li>

  632.         

  633.           <li>

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

  635.           </li>

  636.         

  637.           <li>

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

  639.           </li>

  640.         

  641.           <li>

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

  643.           </li>

  644.         

  645.           <li>

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

  647.           </li>

  648.         

  649.           <li>

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

  651.           </li>

  652.         

  653.           <li>

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

  655.           </li>

  656.         

  657.           <li>

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

  659.           </li>

  660.         

  661.           <li>

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

  663.           </li>

  664.         

  665.           <li>

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

  667.           </li>

  668.         

  669.           <li>

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

  671.           </li>

  672.         

  673.           <li>

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

  675.           </li>

  676.         

  677.           <li>

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

  679.           </li>

  680.         

  681.           <li>

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

  683.           </li>

  684.         

  685.           <li>

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

  687.           </li>

  688.         

  689.           <li>

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

  691.           </li>

  692.         

  693.           <li>

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

  695.           </li>

  696.         

  697.           <li>

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

  699.           </li>

  700.         

  701.           <li>

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

  703.           </li>

  704.         

  705.           <li>

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

  707.           </li>

  708.         

  709.           <li>

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

  711.           </li>

  712.         

  713.           <li>

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

  715.           </li>

  716.         

  717.           <li>

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

  719.           </li>

  720.         

  721.           <li>

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

  723.           </li>

  724.         

  725.           <li>

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

  727.           </li>

  728.         

  729.           <li>

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

  731.           </li>

  732.         

  733.           <li>

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

  735.           </li>

  736.         

  737.       </ul>

  738.     

  739.     <p>

  740.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  757.     </p>

  758.     <p>

  759.       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>.

  760.     </p>

  761.     <p>

  762.       Je ne traque pas ta navigation mais mon

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

  764.       conserve des logs d’accès.

  765.     </p>

  766.   </div>

  767. </footer>

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

  769.   ;(_ => {

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

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

  772.       e.preventDefault()

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

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

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

  776.     })

  777.   })()

  778. </script>

  779. 

  780.   <script>

  781.   /* Service workers */

  782.   if (navigator.serviceWorker) {

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

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

  785.       function sendLinks (selector) {

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

  787.           return link.getAttribute('href')

  788.         })

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

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

  791.       }

  792.       navigator.serviceWorker.getRegistration()

  793.         .then(function (registration) {

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

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

  796.               .then(navigator.serviceWorker.ready)

  797.               .then(function () {

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

  799.               })

  800.               .catch(console.error.bind(console))

  801.           } else {

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

  803.             sendLinks(selector)

  804.           }

  805.         })

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

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

  808.         sendLinks(selector)

  809.       })

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

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

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

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

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

  815.           

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

  817.           

  818.         }

  819.       })

  820.     })

  821.   } else {

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

  823.   }

  824. </script>