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.
203 Commits
1 Branch
Struktur: 35655abca0
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „35655abca0“
${ noResults }
larlet-fr-david/david/blog/2014/gaspillage-numerique/index.html

index.html 33KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848 
  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>Gaspillage numérique — 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/2014/gaspillage-numerique/">

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

  31.   <meta name="description" content="Ce n’est pas une ère d’abondance mais de gaspillage numérique dont nous faisons partie." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Ce n’est pas une ère d’abondance mais de gaspillage numérique dont nous faisons partie." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Gaspillage numérique" />

  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/2014/gaspillage-numerique/" />

  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/2014/gaspillage-numerique.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.   Gaspillage numérique

  468.   <time>Publié le 4 janvier 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Lorsque j’essaye d’aller au plus profond de cette question de la sobriété s’éveille en moi la sensation que semblent avoir eu les être premiers, qui proclamaient que rien ne leur appartenait. Que dire de ces peuples qui, malgré l’abondance, restent modérés ? Le peuple sioux, que j’affectionne particulièrement sans savoir vraiment pourquoi, lors des grandes chasses de buffles abondants, ou même surabondants, n’en prélevait que le nombre qui leur permettait de vivre. Rien des animaux sacrifiés ne doit être dilapidé, tout gaspillage étant prohibé par la morale sacrée, en tant qu’offense à la nature et aux principes qui l’animent. Et la gratitude à l’égard de la prodigalité de la terre allait de soi. Cette sobriété dans l’abondance est une leçon de noblesse.</p>

  473. <p><cite><em>Vers la sobriété heureuse</em>, Pierre Rabhi</cite></p>

  474. </blockquote>

  475. <p>Nous sommes à une ère de l’abondance, ou même de la surabondance <em>numérique</em>. On peut stocker des terra-octets de données dans sa poche, on peut <em>streamer</em> des megabits avec son téléphone, on peut faire tourner 8 processeurs sur ses genoux. <strong>Quelle leçon de noblesse en tirer ?</strong> J’avais écrit un édito dans le magazine <a href="http://faitmain.org/index.html">Fait main</a> il y a 6 mois mais je pense qu’il faut aller plus loin.</p>

  476. <blockquote>

  477. <p>Des photos de vacances non triées aux mails archivés <em>ad vitam aeternam</em>, des films collectionnés aux bibliothèques musicales dont la qualité est devenue obsolète, des livres téléchargés mais jamais ouverts aux projets inachevés, nous disposons tous de <strong>poussières numériques</strong> plus ou moins évidentes.</p>

  478. <p>À l’heure où le stockage de données domestiques se compte en téra-octets, on pourrait trouver saugrenue l’idée de limiter son impact en terme de stockage numérique. Et pourtant. Songez un instant à cette masse de données accumulées, à ce <em>grenier numérique</em> qui encombre votre disque dur de ses données antédiluviennes, et ces sauvegardes sur d’autres supports, et ces sauvegardes distantes, et ces sauvegardes incrémentales. <strong>Autant de duplications et de transferts qui ont un coût écologique non négligeable.</strong></p>

  479. <p>[…]</p>

  480. <p>Pour venir à bout de cette poussière qui s’accumule, il faut se prêter à deux exercices : <strong>un ménage régulier et une hygiène de vie numérique</strong>.</p>

  481. <p><cite><em><a href="http://faitmain.org//volume-2/cout-ecologique-donnees.html">Le coût écologique de vos données</a></em></cite></p>

  482. </blockquote>

  483. <p><em>Je ne comprends pas qu’une sauvegarde distante doive traverser l’atlantique.</em> Je m’extasiais de <a href="/david/biologeek/archives/20061001-peer-to-peer-et-sauvegarde-croisee/">l’utilisation du P2P pour faire des sauvegardes croisées</a> il y a 7 ans (!) et rien de nouveau depuis alors que cela semble relativement simple. Quelle part de <em>solidarité numérique</em> pourrait être associée à ces sauvegardes si l’on revient à des échanges d’espace disque locaux ?</p>

  484. <p><em>Je ne comprends pas qu’il faille une dizaine de serveurs pour faire tourner un simple site.</em> Testing, staging, intégration, QA, pré-prod, statistiques, monitoring, mailing, asynchrone, etc. Chacune de mes <em>pull-requests</em> et la cascade d’actions qu’elle entraîne consomme certainement plus que l’énergie qui m’a permis d’avoir produit la modification de code.</p>

  485. <p><em>Je ne comprends pas que l’on puisse mettre en production des sites à fort traffic sans tests de consommation côté client.</em> Le site <a href="http://www.data.gouv.fr/">data.gouv.fr</a> est un (mauvais) exemple symptomatique des dommages que cela peut causer, quelle est la facture à l’échelle de la France ? Combien de designers en ont conscience lorsqu’ils ajoutent des parallaxes et autres transformations CSS ?</p>

  486. <p><em>Je ne comprends pas cet engouement pour le streaming de données récurrentes.</em> À partir de combien d’écoutes est-ce qu’un même morceau consomme plus en <em>streaming</em> qu’en stockage ? Et si une partie de ces sauvegardes croisées n’était pas chiffrée ?</p>

  487. <p><em>Je ne comprends pas que l’on fasse l’apologie de l’illimité dans un monde fini.</em> Forfaits illimités, stockage illimité, quelles habitudes de consommation est-ce que l’on essaye de nous inculquer à travers le numérique ?</p>

  488. <p><em>Je ne comprends pas</em>. Mais je m’interroge. <strong>Ce n’est pas une ère d’abondance mais de gaspillage numérique dont nous faisons partie.</strong> Et cela ne fait que commencer…</p>

  489. </article>

  490. 

  491.   <section>

  492.     <h3>Discussion suite à l’article :</h3>

  493. 

  494.       <article id="comment-1" class="comment">

  495.         <p>Bonjour,</p>

  496. <p>David, tu dis « Je ne comprends pas qu’une sauvegarde distante doive traverser l’atlantique. (...) Quelle part de solidarité numérique pourrait être associée à ces sauvegardes si l’on revient à des échanges d’espace disque locaux ? »</p>

  497. <p>J’ai rencontré deux personnes qui, bien que vivant sur deux continents distincts, ont une même préoccupation de leurs données par rapport à un risque naturel.</p>

  498. <p>À Los Angeles, j’ai rencontré un photographe qui craint qu’un grand tremblement de terre (et/ou les incendies qui en découleraient) détruise(nt) tout, y compris son travail photographique numérique.</p>

  499. <p>À Taipei, j’ai rencontré un informaticien qui, pour les mêmes raisons (Taiwan est sur une faille sismique) souhaite installer une solution de sauvegarde en Europe.</p>

  500. <p>Dans les deux cas, les solutions techniques envisagées sont lourdes et complexes à mettre en place, mais dans les deux cas, une sauvegarde chez un voisin ne servirait à rien en cas de tremblement de terre, de typhon ou d’incendie.</p>

  501. <p>Plus loin, tu dis « Je ne comprends pas qu’il faille une dizaine de serveurs pour faire tourner un simple site. Testing, staging, intégration, QA, pré-prod, statistiques, monitoring, mailing, asynchrone, etc. Chacune de mes pull-requests et la cascade d’actions qu’elle entraîne consomme certainement plus que l’énergie qui m’a permis d’avoir produit la modification de code. »</p>

  502. <p>De quel « simple site » parles-tu ? As-tu besoin de toutes ces étapes pour ton site personnel ? Probablement pas. A-t-on besoin de toutes ces étapes pour le tristement célèbre site d’Obamacare ? Vu la catastrophe que ça a été (et que c’est encore aujourd’hui), un ou deux serveurs de QA et/ou de pré-prod supplémentaires n’auraient peut-être pas fait de mal ;)</p>

  503. <p>Enfin, tu dis « Je ne comprends pas cet engouement pour le streaming de données récurrentes. »

  504. Moi non plus, mais pour des raisons beaucoup plus terre à terre : je n’ai jamais pu utiliser un service de streaming correctement, et chaque vidéo ou chaque morceau que j’écoute en streaming finit irrémédiablement par planter, donc je n’écoute que la musique que j’ai en local, et je télécharge toutes les vidéos que je veux regarder.</p>

  505. <p>Bonne tergiversation !</p>

  506.         <p><cite>Pierre Equoy, le <a href="#comment-1">2014-01-05 à 16:20</a></cite></p>

  507.       </article>

  508. 

  509.       <article id="comment-2" class="comment">

  510.         <blockquote>

  511. <p>J’ai rencontré deux personnes qui, bien que vivant sur deux continents distincts, ont une même préoccupation de leurs données par rapport à un risque naturel.</p>

  512. </blockquote>

  513. <p>La différence est peut-être la notion de choix.

  514. Avoir le choix de faire un backup sur un continent différent pour raisons de robustesse ou avoir le choix de faire juste un backup local.</p>

  515. <p>Dans les solutions commerciales qui sont proposées telles que Google, iCloud (Apple), AWS, etc. il serait tellement plus confortable de pouvoir choisir de backuper sur le disque/point d’accès de son choix. TimeMachine (Apple) pourrait aussi permettre de monter un disque distant. Je me demande d’ailleurs si c’est presque possible par proxy ou tunnel en plaçant virtuellement le disque distant sur le réseau ZeroConf.</p>

  516.         <p><cite>Karl Dubost, le <a href="#comment-2">2014-01-06 à 03:32</a></cite></p>

  517.       </article>

  518. 

  519.       <article id="comment-3" class="comment">

  520.         <blockquote>

  521. <p>Je me demande d’ailleurs si c’est presque possible par proxy ou tunnel en plaçant virtuellement le disque distant sur le réseau ZeroConf.</p>

  522. </blockquote>

  523. <p>Il me semble qu’il y a un projet kickstarter dont le but était de proposer un produit qui se configurait tout seul, se connectait au réseau local, qui se débrouillait pour être accessible depuis le Web, et qui servait (en gros) de NAS.</p>

  524. <p>Le gros problème dans toutes ces ébauches techniques, ce sont les points de connexion entre le local et le reste : configurer un routeur reste une des tâches les plus ingrates qui soient (les routeurs fournis par les marchands d’Internet à Taiwan sont une insulte à l’humanité).</p>

  525.         <p><cite>Pierre Equoy, le <a href="#comment-3">2014-01-06 à 03:47</a></cite></p>

  526.       </article>

  527. 

  528.       <article id="comment-4" class="comment">

  529.         <p>Cet article a été mentionné dans : <a href="http://www.quaternum.net/2014/01/05/un-serveur-a-la-maison/">http://www.quaternum.net/2014/01/05/un-serveur-a-la-maison/</a>.</p>

  530.         <p><cite>Webmention, le <a href="#comment-4">2014-01-11 à 11:57</a></cite></p>

  531.       </article>

  532. 

  533.   </section>

  534. 

  535. 

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

  537.     <img src="/static/david/blog/2014/gaspillage-numerique.jpg" alt="" />

  538.   </figure>

  539. 

  540. 

  541. 

  542. <nav id="jumpto">

  543.   <p>

  544.     <a rel=prev href="/david/blog/2013/jouets-conviviaux/">← Jouets conviviaux</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/sens-utilite/">Sens et utilité →</a>

  545.   </p>

  546. </nav>

  547. 

  548. <footer>

  549.   <div>

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

  551.     <p>

  552.       Bonjour/Hi!

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

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

  555.     </p>

  556.     <p>

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

  558.     </p>

  559. 

  560.       <p>

  561.         Les dernières publications hebdomadaires sont :

  562.       </p>

  563.       <ul class="with_columns">

  564. 

  565.           <li>

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

  567.           </li>

  568. 

  569.           <li>

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

  571.           </li>

  572. 

  573.           <li>

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

  575.           </li>

  576. 

  577.           <li>

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

  579.           </li>

  580. 

  581.           <li>

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

  583.           </li>

  584. 

  585.           <li>

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

  587.           </li>

  588. 

  589.           <li>

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

  591.           </li>

  592. 

  593.           <li>

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

  595.           </li>

  596. 

  597.           <li>

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

  599.           </li>

  600. 

  601.           <li>

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

  603.           </li>

  604. 

  605.           <li>

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

  607.           </li>

  608. 

  609.           <li>

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

  611.           </li>

  612. 

  613.           <li>

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

  615.           </li>

  616. 

  617.           <li>

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

  619.           </li>

  620. 

  621.           <li>

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

  623.           </li>

  624. 

  625.           <li>

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

  627.           </li>

  628. 

  629.           <li>

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

  631.           </li>

  632. 

  633.           <li>

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

  635.           </li>

  636. 

  637.           <li>

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

  639.           </li>

  640. 

  641.           <li>

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

  643.           </li>

  644. 

  645.           <li>

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

  647.           </li>

  648. 

  649.           <li>

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

  651.           </li>

  652. 

  653.           <li>

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

  655.           </li>

  656. 

  657.           <li>

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

  659.           </li>

  660. 

  661.           <li>

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

  663.           </li>

  664. 

  665.           <li>

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

  667.           </li>

  668. 

  669.           <li>

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

  671.           </li>

  672. 

  673.           <li>

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

  675.           </li>

  676. 

  677.           <li>

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

  679.           </li>

  680. 

  681.           <li>

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

  683.           </li>

  684. 

  685.           <li>

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

  687.           </li>

  688. 

  689.           <li>

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

  691.           </li>

  692. 

  693.           <li>

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

  695.           </li>

  696. 

  697.           <li>

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

  699.           </li>

  700. 

  701.           <li>

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

  703.           </li>

  704. 

  705.           <li>

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

  707.           </li>

  708. 

  709.           <li>

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

  711.           </li>

  712. 

  713.           <li>

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

  715.           </li>

  716. 

  717.           <li>

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

  719.           </li>

  720. 

  721.           <li>

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

  723.           </li>

  724. 

  725.           <li>

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

  727.           </li>

  728. 

  729.           <li>

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

  731.           </li>

  732. 

  733.           <li>

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

  735.           </li>

  736. 

  737.           <li>

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

  739.           </li>

  740. 

  741.           <li>

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

  743.           </li>

  744. 

  745.           <li>

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

  747.           </li>

  748. 

  749.           <li>

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

  751.           </li>

  752. 

  753.           <li>

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

  755.           </li>

  756. 

  757.           <li>

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

  759.           </li>

  760. 

  761.       </ul>

  762. 

  763.     <p>

  764.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  781.     </p>

  782.     <p>

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

  784.     </p>

  785.     <p>

  786.       Je ne traque pas ta navigation mais mon

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

  788.       conserve des logs d’accès.

  789.     </p>

  790.   </div>

  791. </footer>

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

  793.   ;(_ => {

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

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

  796.       e.preventDefault()

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

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

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

  800.     })

  801.   })()

  802. </script>

  803. 

  804.   <script>

  805.   /* Service workers */

  806.   if (navigator.serviceWorker) {

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

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

  809.       function sendLinks (selector) {

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

  811.           return link.getAttribute('href')

  812.         })

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

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

  815.       }

  816.       navigator.serviceWorker.getRegistration()

  817.         .then(function (registration) {

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

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

  820.               .then(navigator.serviceWorker.ready)

  821.               .then(function () {

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

  823.               })

  824.               .catch(console.error.bind(console))

  825.           } else {

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

  827.             sendLinks(selector)

  828.           }

  829.         })

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

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

  832.         sendLinks(selector)

  833.       })

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

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

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

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

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

  839. 

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

  841. 

  842.         }

  843.       })

  844.     })

  845.   } else {

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

  847.   }

  848. </script>