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.
146 Commits
1 Branch
Struktur: 6b129e46be
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „6b129e46be“
${ noResults }
larlet-fr-david/david/stream/2019/06/14/index.html

index.html 29KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813 
  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>Pauvreté — 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/06/14/">

  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.   Pauvreté

  456.   <time>Publié le 14 juin</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Une semaine sous le signe du déménagement. Quasiment seuls, ce qui permet de bien sentir le poids de chaque possession. De soupeser la pertinence d’une telle accumulation. Si seuls les riches peuvent se permettre de ne rien amasser, je dois être encore très pauvre.</em></p>

  460. <hr />

  461. <blockquote>

  462. <p>Et même quand on touche à des sujets comme le zéro déchet et le minimalisme, où on prône la décroissance, on tombe sur des discours remarquablement éloignés des réalités économiques. Mais oui, c’est super la cosmétique zéro déchet ! Il n’empêche qu’un dentifrice solide, même s’il dure un an, coûte 12 € à l’achat. Face à un budget riquiqui et instable, la personne précaire continuera d’acheter son dentifrice “plein de merde” (vous le voyez, le jugement de valeur ?) à 1,50 € au supermarché. C’est top d’être minimaliste, mais là aussi c’est une déconstruction qui s’opère quand on a le loisir d’y réfléchir. Quand on est dans une posture où se débarrasser d’un objet n’est pas si grave, parce qu’au pire, si on réalise qu’on en avait quand même besoin, on peut toujours en racheter un — de préférence de meilleure qualité, produit dans de meilleures conditions. Il est plus aisé de se détacher du matériel quand on a pu d’abord le posséder, et quand on sait qu’on pourra le posséder à nouveau si l’envie nous prend.</p>

  463. <p><cite><em><a href="https://uninvincibleete.com/2019/03/critique-ecologie-privileges/">Critique d’une écologie privilégiée</a></em> (<a href="/david/cache/ac9de234a2df261d25a57e445c38c128/">cache</a>)</cite></p>

  464. </blockquote>

  465. <p>C’est un point de vue qui se rapproche beaucoup de mes propres réflexions sur le minimalisme. Et c’est la principale raison pour laquelle j’en suis revenu. Merci pour cet article qui appuie là où ça fait mal.</p>

  466. <hr />

  467. <blockquote>

  468. <p>But more worrying to me is that people who can’t afford to pay for privacy will be increasingly giving up their data in return for services that they need to get by in our digital age. We might have reached peak data, but perhaps only for the well-off.</p>

  469. <p><cite><em><a href="https://howtomeasureghosts.substack.com/p/have-we-reached-peak-data">Have we reached Peak Data?</a></em> (<a href="/david/cache/1165e1a1d392ddecd3efd4500aaecbf3/">cache</a>)</cite></p>

  470. </blockquote>

  471. <p>Combien de temps avant que les services que j’utilise fassent l’hypothèse que j’ai déménagé ? Aucun moyen de savoir.</p>

  472. <hr />

  473. <blockquote>

  474. <p>En somme, la frugalité (Jugaad en Inde, « Shan-zaï » en Chine, « Gambiarra », « Bacalhau » ou « Jeitinho » au Brésil) est aussi une forme de solutionnisme technologique qui repose, une fois encore, sur la confortable conviction que les pauvres ont toutes les ressources en eux pour s’en sortir, pourvu qu’ils articulent habilement leurs problèmes aux dernières technologies disponibles.</p>

  475. <p><cite><em><a href="https://digital-society-forum.orange.com/fr/les-actus/1218-the-next-billion-users-une-immersion-dans-linternet-des-pauvres">The next billion users : une immersion dans l’internet des pauvres</a></em> (<a href="/david/cache/058619b034b096224d8c0f21ff4eee75/">cache</a>)</cite></p>

  476. </blockquote>

  477. <p>Et les riches ont toutes les ressources <a href="https://twitter.com/maryhui/status/1138675837165641733">pour les contrôler</a> :</p>

  478. <blockquote>

  479. <p>There is usually never a line at the train ticketing machines. Judging from an overheard convo, it appears that people are reluctant to use their rechargeable Octopus cards for fear of leaving a paper trail of them having been present at the protest.</p>

  480. </blockquote>

  481. <p>Il faudrait pas non plus qu’ils se mettent à espérer pouvoir sortir de leur état.</p>

  482. <hr />

  483. <blockquote>

  484. <p>However, the recent data I compiled – out of curiosity – showed me the default reality of open source finances, indicating a severe imbalance between work quality and compensation. Full-time maintainers are technically talented people responsible for issue management, security, navigating toxic complaints, while receiving below the poverty threshold.</p>

  485. <p>The struggle of open source sustainability is the millennium-old struggle of humanity to free itself from slavery, colonization, and exploitation. This is not the first time hard-working honest people are giving their all, for unfair compensation.</p>

  486. <p><cite><em><a href="https://staltz.com/software-below-the-poverty-line.html">Software below the poverty line</a></em> (<a href="/david/cache/874c77a88433b49614e722a90281292c/">cache</a>)</cite></p>

  487. </blockquote>

  488. <p>Pas la première fois non, ça serait un peu la définition du capitalisme en fait…</p>

  489. <hr />

  490. <blockquote>

  491. <p>The rich do not live like this. The rich have grown afraid of screens. They want their children to play with blocks, and tech-free private schools are booming. Humans are more expensive, and rich people are willing and able to pay for them. Conspicuous human interaction — living without a phone for a day, quitting social networks and not answering email — has become a status symbol.</p>

  492. <p>All of this has led to a curious new reality: Human contact is becoming a luxury good.</p>

  493. <p>As more screens appear in the lives of the poor, screens are disappearing from the lives of the rich. The richer you are, the more you spend to be offscreen.</p>

  494. <p><cite><em><a href="https://www.nytimes.com/2019/03/23/sunday-review/human-contact-luxury-screens.html">Human Contact Is Now a Luxury Good</a></em> (<a href="/david/cache/5f1224df8b7e587fd032721767569295/">cache</a>)</cite></p>

  495. </blockquote>

  496. <p>Et son interprétation en français :</p>

  497. <blockquote>

  498. <p>Le numérique qui était un truc de riche devient un truc de pauvre. Pas assez de moyens dans une école ? Il n’y a qu’à y mettre des écrans. Pas assez de moyens dans un hosto ? Hop, un médecin-écran. On va pouvoir automatiser les maisons de retraite avec des robots, ça coûtera moins cher. À l’inverse, dans une maison de retraite de luxe, on aura toujours une foule d’êtres humains pour s’occuper des pensionnaires. Idem dans un hôpital privé, on aura un médecin en chair et en os pour nous informer. Et de plus en plus d’écoles privées se targuent déjà d’être sans écran.</p>

  499. <p><cite><em><a href="http://www.slate.fr/story/176253/robot-medecin-deshumanisation-inegalites-ecran-pauvres">Robot pour les pauvres, contact humain pour les riches</a></em> (<a href="/david/cache/5d29ea37c81982d791e3be8781ddd3b0/">cache</a>)</cite></p>

  500. </blockquote>

  501. <p>Pauvre de nous.</p>

  502. <hr />

  503. <p><em>Explorer un nouvel endroit. En marchant, en courant, en photographiant, à vélo. Découvrir de nouvelles sensations et de nouvelles personnes. Se retenir d’aller trop vite pour savourer ces moments.</em></p>

  504. </article>

  505. 

  506. 

  507. <nav id="jumpto">

  508.   <p>

  509.     <a rel=prev href="/david/stream/2019/06/07/">← Amateur</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/06/21/">À lier →</a>

  510.   </p>

  511. </nav>

  512. 

  513. <footer>

  514.   <div>

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

  516.     <p>

  517.       Bonjour/Hi!

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

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

  520.     </p>

  521.     <p>

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

  523.     </p>

  524.     

  525.       <p>

  526.         Les dernières publications hebdomadaires sont :

  527.       </p>

  528.       <ul class="with_columns">

  529.         

  530.           <li>

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

  532.           </li>

  533.         

  534.           <li>

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

  536.           </li>

  537.         

  538.           <li>

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

  540.           </li>

  541.         

  542.           <li>

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

  544.           </li>

  545.         

  546.           <li>

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

  548.           </li>

  549.         

  550.           <li>

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

  552.           </li>

  553.         

  554.           <li>

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

  556.           </li>

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.           <li>

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

  716.           </li>

  717.         

  718.           <li>

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

  720.           </li>

  721.         

  722.           <li>

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

  724.           </li>

  725.         

  726.       </ul>

  727.     

  728.     <p>

  729.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  746.     </p>

  747.     <p>

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

  749.     </p>

  750.     <p>

  751.       Je ne traque pas ta navigation mais mon

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

  753.       conserve des logs d’accès.

  754.     </p>

  755.   </div>

  756. </footer>

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

  758.   ;(_ => {

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

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

  761.       e.preventDefault()

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

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

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

  765.     })

  766.   })()

  767. </script>

  768. 

  769.   <script>

  770.   /* Service workers */

  771.   if (navigator.serviceWorker) {

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

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

  774.       function sendLinks (selector) {

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

  776.           return link.getAttribute('href')

  777.         })

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

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

  780.       }

  781.       navigator.serviceWorker.getRegistration()

  782.         .then(function (registration) {

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

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

  785.               .then(navigator.serviceWorker.ready)

  786.               .then(function () {

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

  788.               })

  789.               .catch(console.error.bind(console))

  790.           } else {

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

  792.             sendLinks(selector)

  793.           }

  794.         })

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

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

  797.         sendLinks(selector)

  798.       })

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

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

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

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

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

  804.           

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

  806.           

  807.         }

  808.       })

  809.     })

  810.   } else {

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

  812.   }

  813. </script>