davidbgk
/
larlet-fr-david
Volgen 1
Ster 0
Vork 0
Code Publicaties 0 Activiteit
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 Commits
1 Branch
Tree: b3b1e845eb
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van 'b3b1e845eb'
${ noResults }
larlet-fr-david/david/stream/2019/11/12/index.html

index.html 31KB
Ruw Blame Geschiedenis

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822 
  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>Dépendances — 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/11/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.   Dépendances

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

  457. </h1>

  458. <article class="single">

  459.  <p><em>Un jour férié en France, c’est souvent une journée tranquille pour moi. L’occasion de creuser davantage de liens et de réflexions. Et de fermer des onglets après avoir partagé quelques connexions neuronales.</em></p>

  460. <hr />

  461. <p>Trucs enthousiasmants cette semaine :</p>

  462. <ol>

  463. <li>Faire du ménage numérique sur cet espace et préparer un dépôt chez moi pour stocker tout cela et probablement ouvrir un peu de code.</li>

  464. <li>Arriver à la page 100 de la numérisation de l’<a href="/famille/histoire/">histoire d’une partie de ma famille</a>.</li>

  465. <li>Aller gambader dans la neige comme deux petits chiens fous avec mon fils.</li>

  466. <li>Tenter d’établir <a href="https://tinyletter.com/lesponts/">des ponts</a> locaux.</li>

  467. </ol>

  468. <hr />

  469. <blockquote>

  470. <p>The other day, I came across a website I’d written over two decades ago. I double-clicked the file, and it opened and ran perfectly. Then I tried to run a website I’d written 18 months ago and found I couldn’t run it without firing up a web server, and when I ran NPM install, one or two of those 65,000 files had issues that meant node failed to install them and the website didn’t run. When I did get it working, it needed a database. And then it relied on some third-party APIs and there was an issue with CORS because I hadn’t whitelisted localhost.</p>

  471. <p>My website made of files carried on, chugging along. This isn’t me saying that things were better in the old days. I’m just saying that years ago websites were made of files; now they are made of dependencies.</p>

  472. <p><cite><em><a href="https://onezero.medium.com/the-death-of-the-computer-file-doc-43cb028c0506">Computer Files Are Going Extinct</a></em> (<a href="/david/cache/5a75780d94a07e5abd9449dc6c863ad5/">cache</a>)</cite></p>

  473. </blockquote>

  474. <p>Un peu <a href="/david/stream/2019/08/27/">forcé</a>, je suis en train de revoir comment publier ce qui stocké ici. En réduisant les dépendances à la fois pour le code et pour l’écriture. C’est un long chemin que je prends plaisir à parcourir.</p>

  475. <p><em>Il fait appel aux différents sens du mot « accessibilité ».</em></p>

  476. <hr />

  477. <blockquote>

  478. <p>Look, all technology breaks sometimes. I’m not saying that new is bad because it’s buggy; I promise you, the old stuff broke too. You probably do not want to go back. But there’s a difference between “the car broke down” and “the car got lost”. One is a fragility of <em>things</em>: if you drive a car, you need to take responsibility for keeping it in good shape. It’s a scarcity problem. But the latter feels more like an abundance problem: it’s fragility of <em>something</em>, I just couldn’t put my finger on what.</p>

  479. <p><cite><em><a href="https://alexdanco.com/2019/10/26/everything-is-amazing-but-nothing-is-ours/">Everything is Amazing, But Nothing is Ours</a></em> (<a href="/david/cache/83928917b2696111caabdeb514722b7f/">cache</a>)</cite></p>

  480. </blockquote>

  481. <p>La fragilité de la <em>connaissance</em>. Ne plus avoir conscience de l’espace et du temps dans lequel on vit. D’où la perte de repères.</p>

  482. <p>En l’occurence, ça n’est pas la voiture qui s’est perdue. Mais le code de quelqu’un d’autre dans sa voiture.</p>

  483. <hr />

  484. <blockquote>

  485. <p>Autre façon de voir les choses : Jusqu’où vouloir filtrer le néga­tif et encou­ra­ger le posi­tif revient à se mettre la tête dans le sable pour ne pas voir la réalité ?</p>

  486. <p>À quel point filtrer ce côté sombre, même partiel­le­ment, n’est pas une posture de privi­lé­gié qui n’est pas impacté aussi direc­te­ment que d’autres ?</p>

  487. <p><cite><em><a href="https://n.survol.fr/n/depeindre-un-monde-trop-sombre">Dépeindre un monde trop sombre</a></em> (<a href="/david/cache/031fd65bf92fec13351403b10831acd7/">cache</a>)</cite></p>

  488. </blockquote>

  489. <p>Si je me morfonds dans la négativité, cela finit par affecter ma santé et j’ai l’impression que les causes que je pourrais soutenir perdent un allié. C’est assez arrogant de penser cela et pourtant c’est le seul moyen que j’ai trouvé de (sur)vivre pour l’instant.</p>

  490. <hr />

  491. <blockquote>

  492. <p>And even if humanity really is doomed, there’s always the hope that someday a hyperintelligent species of cockroach will inherit the Earth. And when cockroach archaeologists try to reconstruct our history, I would like them to be able to say, loosely translated from their complex pheromone-and-dancing system of communication: “These meatsacks may not have been as good at surviving as us cockroaches—but at least they tried!”</p>

  493. <p><cite><em><a href="https://codewithoutrules.com/2019/09/10/software-developers-climage-change/">What can a software developer do about climate change?</a></em> (<a href="/david/cache/c982d6d5411add24cca0c698ba457826/">cache</a>)</cite></p>

  494. </blockquote>

  495. <p>Réflexion de la semaine : en utilisant les énergies fossiles, on consomme un héritage que nos ancêtres sur des millions de génération ont réussi à préserver. Le meilleur moyen de ne pas avoir d’héritage est de ne plus rien avoir à partager. Une situation de crise — à moyen terme — ne peut que réduire les inégalités.</p>

  496. <p>Lorsqu’il ne reste que quelques gouttes au fond du verre, on ne se demande plus s’il est à moitié vide ou à moitié plein.</p>

  497. <p><em>On économise notre salive.</em></p>

  498. <hr />

  499. <blockquote>

  500. <p>Often consumers don’t have much power of selection at all. Those who run small businesses find it nearly impossible to walk away from Facebook, Instagram, Yelp, Etsy, even Amazon. Employers often mandate that their workers use certain apps or systems like Zoom, Slack, and Google Docs. “It is only the hyper-privileged who are now saying, ‘I’m not going to give my kids this,’ or, ‘I’m not on social media,’” says Rumman Chowdhury, a data scientist at Accenture. “You actually have to be so comfortable in your privilege that you can opt out of things.”</p>

  501. <p><cite><em><a href="https://www.vox.com/the-highlight/2019/10/1/20887003/tech-technology-evolution-natural-inevitable-ethics">Tech issues: The myth of inevitable technological progress</a></em> (<a href="/david/cache/49e857c4f07b8b8ca905203fe51b7b7c/">cache</a>)</cite></p>

  502. </blockquote>

  503. <p>Dis-moi de combien de dépendances est-ce que tu peux te passer et je te dirai à quel point tu es privilégié. La capitalisme consiste à rendre dépendants ceux qui ont moins.</p>

  504. <p><em>Quid des privilégiés qui tentent de montrer un autre chemin ? À quel moment la marginalisation ne peut plus en être une ?</em></p>

  505. <hr />

  506. <blockquote>

  507. <p>The main thing I discovered was that the <em>snippets.db</em> database file in the Suggestions folder stored my emails. And on top of that, I found that it stored my S/MIME encrypted emails completely <strong>UNENCRYPTED</strong>. Even with Siri disabled on the Mac, it <em>still</em> stores unencrypted messages in this database!</p>

  508. <p><strong>This is definitely not the expected behavior and can be considered an inadvertent information exposure.</strong></p>

  509. <p><cite><em><a href="https://medium.com/@boberito/apple-mail-stores-encrypted-emails-in-plain-text-database-fix-included-3c2369ce26d4">Apple Mail Stores Encrypted Emails in Plain Text Database, fix included!</a></em> (<a href="/david/cache/6aa439c2a9931f53c792d98e92c2ea46/">cache</a>)</cite></p>

  510. </blockquote>

  511. <p>Au moment où je galère en attendant une mise à jour des GPGTools pour ne serait-ce que lire mes courriels chiffrés, j’apprends qu’ils sont en fait lisibles en clair sur ma machine… quelle blague. Lorsqu’une dépendance en combat une autre.</p>

  512. <p>Restez patients si vous attendez une réponse chiffrée de ma part. Peut-être qu’il faut que je change de <a href="/david/stream/2019/10/29/">stratégie</a> à ce sujet (ça serait pas mal des ancres plus précises, en <a href="https://github.com/WICG/ScrollToTextFragment">attendant mieux</a>). Et en même temps le courriel est une des technologies la plus proche de mes valeurs qui soit, ce serait dommage d’avoir recours à une autre infrastructure et un autre outil pour pouvoir s’échanger des données chiffrées.</p>

  513. <hr />

  514. <p>Citation de la semaine :</p>

  515. <blockquote>

  516. <p>Il est trop tard pour être pessimiste.</p>

  517. <p><cite><em><a href="https://www.franceculture.fr/emissions/matieres-a-penser/animal-humain-35-envers-les-animaux-une-responsabilite-globale">Gilles Boeuf au sujet de « Envers les animaux, une responsabilité globale »</a></em></cite></p>

  518. </blockquote>

  519. <p>Il y a tellement de sens possibles à cette citation &lt;3. Il est probablement trop tard pour être in-dépendant également.</p>

  520. <p><em>Merci Aurélien.</em></p>

  521. </article>

  522. 

  523. 

  524. <nav id="jumpto">

  525.   <p>

  526.     <a rel=prev href="/david/stream/2019/11/05/">← Positif</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/11/19/">Se livrer →</a>

  527.   </p>

  528. </nav>

  529. 

  530. <footer>

  531.   <div>

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

  533.     <p>

  534.       Bonjour/Hi!

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

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

  537.     </p>

  538.     <p>

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

  540.     </p>

  541.     

  542.       <p>

  543.         Les dernières publications hebdomadaires sont :

  544.       </p>

  545.       <ul class="with_columns">

  546.         

  547.           <li>

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

  549.           </li>

  550.         

  551.           <li>

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

  553.           </li>

  554.         

  555.           <li>

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

  557.           </li>

  558.         

  559.           <li>

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

  561.           </li>

  562.         

  563.           <li>

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

  565.           </li>

  566.         

  567.           <li>

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

  569.           </li>

  570.         

  571.           <li>

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

  573.           </li>

  574.         

  575.           <li>

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

  577.           </li>

  578.         

  579.           <li>

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

  581.           </li>

  582.         

  583.           <li>

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

  585.           </li>

  586.         

  587.           <li>

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

  589.           </li>

  590.         

  591.           <li>

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

  593.           </li>

  594.         

  595.           <li>

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

  597.           </li>

  598.         

  599.           <li>

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

  601.           </li>

  602.         

  603.           <li>

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

  605.           </li>

  606.         

  607.           <li>

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

  609.           </li>

  610.         

  611.           <li>

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

  613.           </li>

  614.         

  615.           <li>

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

  617.           </li>

  618.         

  619.           <li>

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

  621.           </li>

  622.         

  623.           <li>

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

  625.           </li>

  626.         

  627.           <li>

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

  629.           </li>

  630.         

  631.           <li>

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

  633.           </li>

  634.         

  635.           <li>

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

  637.           </li>

  638.         

  639.           <li>

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

  641.           </li>

  642.         

  643.           <li>

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

  645.           </li>

  646.         

  647.           <li>

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

  649.           </li>

  650.         

  651.           <li>

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

  653.           </li>

  654.         

  655.           <li>

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

  657.           </li>

  658.         

  659.           <li>

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

  661.           </li>

  662.         

  663.           <li>

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

  665.           </li>

  666.         

  667.           <li>

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

  669.           </li>

  670.         

  671.           <li>

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

  673.           </li>

  674.         

  675.           <li>

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

  677.           </li>

  678.         

  679.           <li>

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

  681.           </li>

  682.         

  683.           <li>

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

  685.           </li>

  686.         

  687.           <li>

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

  689.           </li>

  690.         

  691.           <li>

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

  693.           </li>

  694.         

  695.           <li>

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

  697.           </li>

  698.         

  699.           <li>

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

  701.           </li>

  702.         

  703.           <li>

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

  705.           </li>

  706.         

  707.           <li>

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

  709.           </li>

  710.         

  711.           <li>

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

  713.           </li>

  714.         

  715.           <li>

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

  717.           </li>

  718.         

  719.           <li>

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

  721.           </li>

  722.         

  723.           <li>

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

  725.           </li>

  726.         

  727.           <li>

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

  729.           </li>

  730.         

  731.           <li>

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

  733.           </li>

  734.         

  735.       </ul>

  736.     

  737.     <p>

  738.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  755.     </p>

  756.     <p>

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

  758.     </p>

  759.     <p>

  760.       Je ne traque pas ta navigation mais mon

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

  762.       conserve des logs d’accès.

  763.     </p>

  764.   </div>

  765. </footer>

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

  767.   ;(_ => {

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

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

  770.       e.preventDefault()

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

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

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

  774.     })

  775.   })()

  776. </script>

  777. 

  778.   <script>

  779.   /* Service workers */

  780.   if (navigator.serviceWorker) {

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

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

  783.       function sendLinks (selector) {

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

  785.           return link.getAttribute('href')

  786.         })

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

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

  789.       }

  790.       navigator.serviceWorker.getRegistration()

  791.         .then(function (registration) {

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

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

  794.               .then(navigator.serviceWorker.ready)

  795.               .then(function () {

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

  797.               })

  798.               .catch(console.error.bind(console))

  799.           } else {

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

  801.             sendLinks(selector)

  802.           }

  803.         })

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

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

  806.         sendLinks(selector)

  807.       })

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

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

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

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

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

  813.           

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

  815.           

  816.         }

  817.       })

  818.     })

  819.   } else {

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

  821.   }

  822. </script>