davidbgk
/
larlet-fr-david
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
582 Commits
1 Branch
Tag: af2dff3a48
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de af2dff3a48
${ noResults }
larlet-fr-david/david/stream/2019/04/12/index.html

index.html 31KB
Original Anotar Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810 
  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>Péremption — 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/stream/2019/04/12/">

  30. 

  31. <style>

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

  33. html, body, div, span,

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

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

  36. del, dfn, em, img, ins,

  37. small, strike, strong, tt, var,

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

  39. fieldset, form, label, legend,

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

  41. article, aside, canvas, details, embed,

  42. figure, figcaption, footer, header, hgroup,

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

  44. time, mark, audio, video {

  45.   margin: 0;

  46.   padding: 0;

  47.   border: 0;

  48.   font-size: 100%;

  49.   font: inherit;

  50.   vertical-align: baseline;

  51. }

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

  53. article, aside, details, figcaption, figure,

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

  55. body { line-height: 1; }

  56. blockquote, q { quotes: none; }

  57. blockquote:before, blockquote:after,

  58. q:before, q:after {

  59.   content: '';

  60.   content: none;

  61. }

  62. table {

  63.   border-collapse: collapse;

  64.   border-spacing: 0;

  65. }

  66. 

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

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

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

  70. @font-face {

  71.   font-family: 'EquityTextB';

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

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

  74.   font-weight: 300;

  75.   font-style: normal;

  76.   font-display: swap;

  77. }

  78. @font-face {

  79.   font-family: 'EquityTextB';

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

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

  82.   font-weight: 300;

  83.   font-style: italic;

  84.   font-display: swap;

  85. }

  86. @font-face {

  87.   font-family: 'EquityTextB';

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

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

  90.   font-weight: 700;

  91.   font-style: normal;

  92.   font-display: swap;

  93. }

  94. 

  95. @font-face {

  96.   font-family: 'ConcourseT3';

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

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

  99.   font-weight: 300;

  100.   font-style: normal;

  101.   font-display: swap;

  102. }

  103. 

  104. 

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

  106. body {

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

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

  109.   background-color: #f0f0ea;

  110.   color: #07486c;

  111.   font-kerning: normal;

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

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

  114.   text-rendering: optimizeLegibility;

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

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

  117. }

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

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

  120. }

  121. em {

  122.   font-style: italic;

  123.   color: #323a45;

  124. }

  125. strong {

  126.   font-weight: bold;

  127.   color: black;

  128. }

  129. nav {

  130.   background-color: #323a45;

  131.   color: #f0f0ea;

  132.   display: flex;

  133.   justify-content: space-around;

  134.   padding: 1rem .5rem;

  135. }

  136.   nav:last-child {

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

  138.   }

  139.   nav a {

  140.     color: #f0f0ea;

  141.   }

  142.   nav abbr {

  143.     border-bottom: 1px dotted white;

  144.   }

  145. 

  146. h1 {

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

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

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 5rem 0 4rem 0;

  153.   width: 100%;

  154.   font-family: 'ConcourseT3';

  155.   display: flex;

  156.   flex-direction: column;

  157. }

  158.   h1.single {

  159.     padding-bottom: 10rem;

  160.   }

  161.   h1 span {

  162.     position: absolute;

  163.     top: 1vh;

  164.     left: 20%;

  165.     line-height: 0;

  166.   }

  167.     h1 span a {

  168.       line-height: 1.7;

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

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

  171.       background: #2d7474;

  172.       font-size: 1.3rem;

  173.       color: white;

  174.       text-decoration: none;

  175.     }

  176. h2 {

  177.   margin: 4rem 0 1rem;

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

  179.   padding-top: 1vh;

  180. }

  181. h3 {

  182.   text-align: center;

  183.   margin: 3rem 0 .75em;

  184. }

  185. hr {

  186.   height: .4rem;

  187.   width: .4rem;

  188.   border-radius: .4rem;

  189.   background: #07486c;

  190.   margin: 2.5rem auto;

  191. }

  192. time {

  193.   display: bloc;

  194.   margin-left: 0 !important;

  195. }

  196. ul, ol {

  197.   margin: 2rem;

  198. }

  199. ul {

  200.   list-style-type: square;

  201. }

  202. a {

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

  204.   text-decoration-thickness: 0.05em;

  205.   text-underline-offset: 0.09em;

  206. }

  207. article {

  208.   max-width: 50rem;

  209.   display: flex;

  210.   flex-direction: column;

  211.   margin: 2rem auto;

  212. }

  213.   article.single {

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

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

  216.     background: #f0f0ea;

  217.     padding: 2rem;

  218.   }

  219.   article p:last-child {

  220.     margin-bottom: 1rem;

  221.   }

  222. p {

  223.   padding: 0 .5rem;

  224.   margin-left: 3rem;

  225. }

  226.   p + p,

  227.   figure + p {

  228.     margin-top: 2rem;

  229.   }

  230. 

  231. blockquote {

  232.   background-color: #e3e1e1;

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

  234.   display: flex;

  235.   flex-direction: column;

  236.   align-items: center;

  237.   padding: 1rem;

  238.   margin: 1.5rem;

  239. }

  240.   blockquote cite {

  241.     font-style: italic;

  242.   }

  243.   blockquote p {

  244.     margin-left: 0;

  245.   }

  246. 

  247. figure {

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

  249.   background-color: #e3e1e1;

  250.   text-align: center;

  251.   padding: 1.5rem 0;

  252.   margin: 1rem 0 0;

  253.   font-size: 1.5rem;

  254.   width: 100%;

  255. }

  256.   figure img {

  257.     max-width: 250px;

  258.     max-height: 250px;

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

  260.     padding: 1px;

  261.   }

  262. figcaption {

  263.   padding: 1rem;

  264.   line-height: 1.4;

  265. }

  266. aside {

  267.   display: flex;

  268.   flex-direction: column;

  269.   background-color: #e3e1e1;

  270.   padding: 1rem 0;

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

  272. }

  273.   aside p {

  274.     max-width: 50rem;

  275.     margin: 0 auto;

  276.   }

  277. 

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

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

  280.   font-size: 1rem;

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

  282. }

  283. h1 {

  284.   font-size: 1.9rem;

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

  286. }

  287. h2 {

  288.   font-size: 1.6rem;

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

  290. }

  291. h3 {

  292.   font-size: 1.35rem;

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

  294. }

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

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

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

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

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

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

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

  302.     margin-left: 0;

  303.   }

  304.   h1 {

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

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

  307.   }

  308.   h2 {

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

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

  311.   }

  312.   h3 {

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

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

  315.   }

  316. }

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

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

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

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

  321.      but if our baseline value was not expressed

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

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

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

  325.     line-height: 1.5em;

  326.   }

  327.   p, li, pre, details {

  328.     margin-left: 3rem;

  329.   }

  330.   h1 {

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

  332.     line-height: 1.2em;

  333.   }

  334.   h2 {

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

  336.     line-height: 1.3em;

  337.   }

  338.   h3 {

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

  340.     line-height: 1.4em;

  341.   }

  342.   figure img {

  343.     max-width: 500px;

  344.     max-height: 500px;

  345.   }

  346. }

  347. 

  348. figure.unsquared {

  349.   margin-bottom: 1.5rem;

  350. }

  351.   figure.unsquared img {

  352.     height: inherit;

  353.   }

  354. 

  355. 

  356. 

  357. @media print {

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

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

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

  361.     text-decoration: underline;

  362.     text-shadow: none !important;

  363.     background-image: none !important;

  364.     background: white;

  365.     color: black;

  366.   }

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

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

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

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

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

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

  373.   img {

  374.     max-width: 250px !important;

  375.     max-height: 250px !important;

  376.   }

  377.   nav, aside { display: none; }

  378. }

  379. 

  380. ul.with_columns {

  381.   column-count: 1;

  382. }

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

  384.   ul.with_columns {

  385.     column-count: 2;

  386.   }

  387. }

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

  389.   ul.with_columns {

  390.     column-count: 3;

  391.   }

  392. }

  393. ul.with_two_columns {

  394.   column-count: 1;

  395. }

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

  397.   ul.with_two_columns {

  398.     column-count: 1;

  399.   }

  400. }

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

  402.   ul.with_two_columns {

  403.     column-count: 2;

  404.   }

  405. }

  406. 

  407. .gallery {

  408.   display: flex;

  409.   flex-wrap: wrap;

  410.   justify-content: space-around;

  411. }

  412.   .gallery figure img {

  413.     margin-left: 1rem;

  414.     margin-right: 1rem;

  415.   }

  416.   .gallery figure figcaption {

  417.     font-family: 'ConcourseT3'

  418.   }

  419. 

  420. footer {

  421.   font-family: 'ConcourseT3';

  422.   display: flex;

  423.   flex-direction: column;

  424.   border-top: 3px solid white;

  425.   padding: 4rem 0;

  426.   background-color: #07486c;

  427.   color: white;

  428. }

  429.   footer > * {

  430.     max-width: 50rem;

  431.     margin: 0 auto;

  432.   }

  433.   footer a {

  434.     color: #f1c40f;

  435.   }

  436.   footer .avatar {

  437.     width: 200px;

  438.     height: 200px;

  439.     border-radius: 50%;

  440.     float: left;

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

  442.     shape-outside: circle();

  443.     margin-right: 2rem;

  444.     padding: 2px 5px 5px 2px;

  445.     background: white;

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

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

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

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

  450.   }

  451. </style>

  452. 

  453. <h1 class="single">

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

  455.   Péremption

  456.   <time>Publié le 12 avril</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Une dernière avant de <a href="https://joachimesque.com/blog/2019-04-10-je-ne-prends-plus-l-avion">monter dans l’avion</a> (<a href="/david/cache/b24b62b1c3d676ee0a613bb74d8f9d06/">cache</a>) et d’être probablement moins en ligne pendant trois semaines. N’oubliez pas que <a href="https://daverupert.com/2019/04/some-unsolicited-blogging-advice/">vous pouvez écrire aussi</a> (<a href="/david/cache/cff4306a435c4d2ac7ea52af54c08efb/">cache</a>). Et lier. Et publier. Pour plus ou moins longtemps. Ou pas.</em></p>

  460. <blockquote>

  461. <p>In a one-day project, he created a <a href="http://www.ted-hunt.com/HYPERLINKS/index.html">speculative system of classifying links</a> (<a href="/david/cache/384600333e479aae7b6bd500ae58a3ad/">cache</a>). A double underline indicates a citation of a source document and dash, dot and wave underlines signal agreement, disagreement and other relationships. “Otlet proposed ideas about how information has its own social world,” Hunt says. “You could relate documents that disagreed with each other, or cited each other or built on each other and XYZ.”</p>

  462. <p><cite><em><a href="https://www.wired.co.uk/article/google-link-hyperlink-seo">How Google warped the hyperlink</a></em> (<a href="/david/cache/d882643dd70e30ab8af009837911f6e8/">cache</a>)</cite></p>

  463. </blockquote>

  464. <p>Imaginez une lieu de communication — au hasard Twitter — où les mentions/retweets seraient typés de la sorte. À quel point est-ce que cela modifierait notre façon d’explorer le graphe ? Quel profilage cela permettrait si vous choisissiez explicitement la nature des liens parcourus ? Dans quel mesure pourrait-on se doter d’outils afin de lutter contre des choix implicites et algorithmiques ?</p>

  465. <blockquote>

  466. <p>But, this has all made me wonder: has the modern stack killed experimentation, and shipping bad ideas? Do weird experiments and fun ideas die on the floor, tangled in complexity, more often now? I’d hazard a guess that the answer is yes, and that you should probably skip that hipster framework —for now— as well. Just ship something instead.</p>

  467. <p><cite><em><a href="https://char.gd/blog/2019/you-dont-need-that-hipster-web-framework">You probably don’t need that hip web framework</a></em> (<a href="/david/cache/0c2fa2dc32036c32f5d8f3e658522f82/">cache</a>)</cite></p>

  468. </blockquote>

  469. <p>Je ne pense pas que ce qui tue l’innovation soit la petite expérience frustrante du soir sur une nouvelle technologie donnée. En revanche, la difficulté à transmettre à cause de cette barrière n’est probablement pas anodine dans cette évolution. Et l’envie suscitée par <a href="https://andy-bell.design/wrote/break-out-of-the-echo-chamber/">cette tribu sourde aux autres</a> (<a href="/david/cache/00011f902c5c3ba730866d4e86287a97/">cache</a>) est probablement très néfaste. C’est difficilement quantifiable car on parle là de moyen-terme dans un écosystème assez complexe. Et les personnes qui ont réussi à franchir ce palier savent qu’elles ont un avantage <a href="https://adactio.com/journal/15050">en terme de pouvoir</a> (<a href="/david/cache/e504bc16c239f638c24d4793d381e1ff/">cache</a>) sur une nouvelle génération.</p>

  470. <p><em>Une façon de se prémunir de sa propre obsolescence. Obole sans sens.</em></p>

  471. <blockquote>

  472. <p>Les huis clos sont des articles bruts parfois temporaires, publiés dans un but exutoire et cathartique sans intention d’échange.</p>

  473. </blockquote>

  474. <p>Note : je ne vais pas lier + garder une copie de l’article vu qu’il est potentiellement temporaire de manière explicite.</p>

  475. <p>C’est toujours inspirant de considérer des publications qui peuvent être temporaires. On oublie souvent qu’en fait tout ce qui est publié sur Internet l’est temporairement. Un blog, un journal, <a href="https://twitter.com/A_Moatti/status/1115184169125076999">les deux</a>, un media, un réseau social. Comment rendre ces dates de péremptions explicites ? Encore une chose qui pourrait être attachée au lien.</p>

  476. <p><em>Quelle nécessité de jugement en tant qu’auteur pour qualifier ces liens ?</em></p>

  477. <blockquote>

  478. <p>Bien sûr, les réseaux sociaux sont loin de promouvoir toutes ces fonctions – certainement parce que certains de ces objectifs sont incompatibles avec leurs modèles économiques : la polarisation politique et les insultes génèrent plus de pages vues que la délibération ou la promotion de la diversité.</p>

  479. <p><cite><em><a href="http://www.internetactu.net/2019/04/09/medias-plateformes-sociales-et-citoyennete/">Médias, plateformes sociales et citoyenneté</a></em> (<a href="/david/cache/6c481577ef6b895c3c25e5b01edaeb3e/">cache</a>)</cite></p>

  480. </blockquote>

  481. <p>Et c’est bien là où les personnes qui développent ces réseaux pourraient avoir un impact. Encore faudrait-il qu’elles arrivent à <a href="https://insights.stackoverflow.com/survey/2019#job-priorities">prendre un peu de recul</a> sur leurs outils… si tant est que cela puisse être pensé sous un autre angle que celui de la <a href="https://jeremy.codes/blog/defining-productivity/">productivité</a> (<a href="/david/cache/8de0797ae7cfe73b9c44c9751daf54ab/">cache</a>).</p>

  482. <p><em>Mais a-t-on encore ce luxe dans un système productiviste ?</em></p>

  483. <blockquote>

  484. <p>These disappearances, along with other changes Facebook has made to how it saves its archive of announcements and blog posts, make it much harder to parse the social network’s historical record. This makes it far more difficult to hold the company, and Zuckerberg himself, accountable to past statements — particularly during a period of intense scrutiny of the company in the wake of a string of scandals. </p>

  485. <p><cite><em><a href="https://www.businessinsider.fr/us/facebook-old-posts-mark-zuckerberg-disappeared-2019-3">Years of Mark Zuckerberg’s old Facebook posts have vanished. The company says it ’mistakenly deleted’ them.</a></em> (<a href="/david/cache/43ebcda55555c1567bc17403c4b5dbd0/">cache</a>)</cite></p>

  486. </blockquote>

  487. <p>Saperlipopette ! Après le comique de répétition, celui de suppression ? En parallèle de ça, on met des <a href="https://blog.archive.org/2019/04/10/official-eu-agencies-falsely-report-more-than-550-archive-org-urls-as-terrorist-content/">bâtons dans les roues d’archive.org</a> (<a href="/david/cache/becea8b04d16cfbeb4d7d73c4a1abc26/">cache</a>). Coïncidence ?</p>

  488. <p><em>La personne la plus influente du monde a-t-elle un droit à l’oubli ?</em></p>

  489. <blockquote>

  490. <p>Facebook n’a de la démocratie qu’une approche instrumentale dans laquelle publicités et pétitions qui étaient hier principalement le moyen de son agenda de croissance économique sont désormais clairement la finalité de l’agenda idéologique et politique de son fondateur. Et ce n’est pas une bonne nouvelle. </p>

  491. <p><cite><em><a href="https://www.affordance.info/mon_weblog/2019/04/global-public-ads-archive.html">Le problème de la publicité électorale, ce n’est pas l’élection, c’est le ciblage.</a></em> (<a href="/david/cache/da481f47aa395dd4f8e511d4266c2e3e/">cache</a>)</cite></p>

  492. </blockquote>

  493. <p>La bonne nouvelle c’est que l’on pourra réajuster le cap une fois les dérives observées afin de ne pas reproduire de telles erreurs par la suite. C’est ainsi que notre démocratie fonctionne.</p>

  494. <p><em>N’est-ce pas ?</em></p>

  495. <blockquote>

  496. <p>The books can be read when the solar powered website is down due to bad weather. In fact, the content can be viewed with no access to a computer, a power supply, or an industrial civilization. A printed website also serves to preserve the content of Low-tech Magazine in the longer run. Websites don’t live forever, and the internet should not be taken for granted. </p>

  497. <p><cite><em><a href="https://www.lowtechmagazine.com/2019/03/printed-website.html">Low-tech Magazine: The Printed Website</a></em> (<a href="/david/cache/7c36201571eb9f1d8731b012aaa192a6/">cache</a>)</cite></p>

  498. </blockquote>

  499. <p>Ne pas prendre le Web pour un acquis mais pour un moyen de diffusion relativement ponctuel dans l’histoire de l’Humanité. Qui ne va pas forcément durer très longtemps. Est-ce qu’il y aurait quelque chose à sauver de cet espace avant l’effondrement ? Sur quels supports ?</p>

  500. <p><em>Quelle prétention à vouloir publier pour longtemps ?</em></p>

  501. </article>

  502. 

  503. 

  504. <nav id="jumpto">

  505.   <p>

  506.     <a rel=prev href="/david/stream/2019/04/05/">← Définitions</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/05/03/">Sympathie →</a>

  507.   </p>

  508. </nav>

  509. 

  510. <footer>

  511.   <div>

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

  513.     <p>

  514.       Bonjour/Hi!

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

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

  517.     </p>

  518.     <p>

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

  520.     </p>

  521.     

  522.       <p>

  523.         Les dernières publications hebdomadaires sont :

  524.       </p>

  525.       <ul class="with_columns">

  526.         

  527.           <li>

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

  529.           </li>

  530.         

  531.           <li>

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

  533.           </li>

  534.         

  535.           <li>

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

  537.           </li>

  538.         

  539.           <li>

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

  541.           </li>

  542.         

  543.           <li>

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

  545.           </li>

  546.         

  547.           <li>

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

  549.           </li>

  550.         

  551.           <li>

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

  553.           </li>

  554.         

  555.           <li>

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

  557.           </li>

  558.         

  559.           <li>

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

  561.           </li>

  562.         

  563.           <li>

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

  565.           </li>

  566.         

  567.           <li>

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

  569.           </li>

  570.         

  571.           <li>

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

  573.           </li>

  574.         

  575.           <li>

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

  577.           </li>

  578.         

  579.           <li>

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

  581.           </li>

  582.         

  583.           <li>

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

  585.           </li>

  586.         

  587.           <li>

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

  589.           </li>

  590.         

  591.           <li>

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

  593.           </li>

  594.         

  595.           <li>

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

  597.           </li>

  598.         

  599.           <li>

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

  601.           </li>

  602.         

  603.           <li>

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

  605.           </li>

  606.         

  607.           <li>

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

  609.           </li>

  610.         

  611.           <li>

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

  613.           </li>

  614.         

  615.           <li>

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

  617.           </li>

  618.         

  619.           <li>

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

  621.           </li>

  622.         

  623.           <li>

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

  625.           </li>

  626.         

  627.           <li>

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

  629.           </li>

  630.         

  631.           <li>

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

  633.           </li>

  634.         

  635.           <li>

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

  637.           </li>

  638.         

  639.           <li>

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

  641.           </li>

  642.         

  643.           <li>

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

  645.           </li>

  646.         

  647.           <li>

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

  649.           </li>

  650.         

  651.           <li>

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

  653.           </li>

  654.         

  655.           <li>

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

  657.           </li>

  658.         

  659.           <li>

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

  661.           </li>

  662.         

  663.           <li>

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

  665.           </li>

  666.         

  667.           <li>

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

  669.           </li>

  670.         

  671.           <li>

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

  673.           </li>

  674.         

  675.           <li>

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

  677.           </li>

  678.         

  679.           <li>

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

  681.           </li>

  682.         

  683.           <li>

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

  685.           </li>

  686.         

  687.           <li>

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

  689.           </li>

  690.         

  691.           <li>

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

  693.           </li>

  694.         

  695.           <li>

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

  697.           </li>

  698.         

  699.           <li>

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

  701.           </li>

  702.         

  703.           <li>

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

  705.           </li>

  706.         

  707.           <li>

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

  709.           </li>

  710.         

  711.           <li>

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

  713.           </li>

  714.         

  715.           <li>

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

  717.           </li>

  718.         

  719.           <li>

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

  721.           </li>

  722.         

  723.       </ul>

  724.     

  725.     <p>

  726.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  743.     </p>

  744.     <p>

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

  746.     </p>

  747.     <p>

  748.       Je ne traque pas ta navigation mais mon

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

  750.       conserve des logs d’accès.

  751.     </p>

  752.   </div>

  753. </footer>

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

  755.   ;(_ => {

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

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

  758.       e.preventDefault()

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

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

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

  762.     })

  763.   })()

  764. </script>

  765. 

  766.   <script>

  767.   /* Service workers */

  768.   if (navigator.serviceWorker) {

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

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

  771.       function sendLinks (selector) {

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

  773.           return link.getAttribute('href')

  774.         })

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

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

  777.       }

  778.       navigator.serviceWorker.getRegistration()

  779.         .then(function (registration) {

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

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

  782.               .then(navigator.serviceWorker.ready)

  783.               .then(function () {

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

  785.               })

  786.               .catch(console.error.bind(console))

  787.           } else {

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

  789.             sendLinks(selector)

  790.           }

  791.         })

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

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

  794.         sendLinks(selector)

  795.       })

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

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

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

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

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

  801.           

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

  803.           

  804.         }

  805.       })

  806.     })

  807.   } else {

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

  809.   }

  810. </script>