davidbgk
/
larlet-fr-david
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Julkaisut 0 Activity
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.
302 Commitit
1 Haara
Puu: 048dd77270
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '048dd77270'
${ noResults }
larlet-fr-david/david/stream/2019/11/26/index.html

index.html 32KB
Raaka Blame Historia

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841 
  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>Ecocentric — 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/26/">

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

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

  457. </h1>

  458. <article class="single">

  459.  <p><em>Une semaine en dent de scie avec pas mal de stress. Mais aussi d’appels d’air ! Tout en étant le sujet de mes propres contradictions. Ma vie, mon désenchantement.</em></p>

  460. <hr />

  461. <p>Truc chouettes :</p>

  462. <ul>

  463. <li>Finir de rédiger un long billet qui me tient à cœur.</li>

  464. <li>Recoder ce qui génère ces pages en Python moderne.</li>

  465. <li>Réussir en partie à décrocher du boulot lorsque je n’étais pas à l’aise avec la situation.</li>

  466. <li>Repartir sur une initiative qui me tient à cœur.</li>

  467. </ul>

  468. <hr />

  469. <blockquote>

  470. <p>It could be all that, but it probably isn’t. It’s probably me. I am 37 now. The world is smaller, more tired, more fragile, more horribly complex and full of troubles. Or, rather: the world is the same as it ever was, but I am more aware of it and of the reality of my place within it. I have grown up, and there is nothing to be done about it. The worst part of it is that I can’t seem to look without thinking anymore. And now I know far more about what we are doing. We: the people. I know what we are doing, all over the world, to everything, all of the time. I know why the magic is dying. It’s me. It’s us.</p>

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

  472. <p>Now I declared, to myself if no one else, that I was ‘ecocentric’ too. This was not the same as being egocentric, though some disagreed, and though it sounded a bit too much like ‘eccentric’ this was also a distraction. I was ecocentric because I did not believe – had never believed, I didn’t think – that humans were the centre of the world, that the Earth was their playground, that they had the right to do what they liked or even that what they did was that important.</p>

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

  474. <p>I am leaving on a pilgrimage to find what I left behind in the jungles and by the cold campfires and in the parts of my head and my heart that I have been skirting around because I have been busy fragmenting the world in order to save it; busy believing it is mine to save.</p>

  475. <p><cite><em><a href="http://paulkingsnorth.net/2010/04/30/confessions-of-a-recovering-environmentalist/">Confessions of a recovering environmentalist</a></em> (<a href="/david/cache/7934f3d41b6b0d12d17deb476e1e41c6/">cache</a>)</cite></p>

  476. </blockquote>

  477. <p>Parfois j’aimerais me sentir trop vieux pour penser être capable de changer des choses. Plus que quelques années j’espère.</p>

  478. <blockquote>

  479. <p>It turns out that very few people give a fuck about anything outside of their own heads, let alone what you are doing. Anxiety is often caused by our perceptions of what other’s think about us, or will think if the worst happens, whatever that may be.</p>

  480. <p>When we obsess over that perception and worry ourselves into panic, it’s a form of narcissism. Your narrative becomes 100% about you.</p>

  481. <p><cite><em><a href="https://www.cjchilvers.com/blog/radical-acceptance">Radical Acceptance</a></em> (<a href="/david/cache/ab774857ba59cf8eb7f9b6c28be10df8/">cache</a>)</cite></p>

  482. </blockquote>

  483. <p>J’aimerais pouvoir accepter cela dès maintenant. Tant qu’il y a de la frustration il y a de l’espoir.</p>

  484. <hr />

  485. <blockquote>

  486. <p>“At the start of the 21st century, one of the questions that excited me most about access to the Internet was the possibility of producing infinite copies of books and sharing knowledge. That idea of an Internet that was going to be a tool for integration and access to knowledge has shattered into smithereens. It was a booby trap. We are working as the unpaid slaves of the new digital world. I feel that it’s like when the Spanish colonisers reached Latin America. We believed the story of ‘a new world’. And we were in a box, controlled by the most powerful country in the world. We should have regulated a long time before. And we should have said: ‘I will share my photo, but how are you benefitting and how am I?’ Because what we are doing today is work for free; with our time, creativity and energy we are paying these empires. We are giving them everything”.</p>

  487. <p>And she rounds off her speech by ensuring that not only are our lands at their mercy, like in the past, but the most private, most vulnerable part of each of us. “We are totally predictable and controllable. And that means easily manipulated. This really worries me”.</p>

  488. <p><cite><em><a href="http://lab.cccb.org/en/renata-avila-the-internet-of-creation-disappeared-now-we-have-the-internet-of-surveillance-and-control/">Renata Ávila: “The Internet of creation disappeared. Now we have the Internet of surveillance and control”</a></em> (<a href="/david/cache/51ff12628638505a680f04d3dd6abe02/">cache</a>)</cite></p>

  489. </blockquote>

  490. <p>Où il est question de colonialisme numérique, de surveillance généralisée et d’alternatives à proposer en tant qu’européens.</p>

  491. <p>Peut-être qu’il faudrait que j’ouvre un compte sur Facebook histoire d’être suffisamment manipulé pour oublier tout ça. Et le reste.</p>

  492. <p><em>Génie.</em></p>

  493. <hr />

  494. <blockquote>

  495. <p>Notre cerveau est un organe formidable, malheureusement il est loin d’être parfait et les études sur son fonctionnement (sciences cognitives) le démontrent à foison. Confronté à des problèmes, il a mis en place des stratégies pour les résoudre, notamment des raccourcis de pensée qui sont spontanés et inconscients. Souvent très utiles, ces raccourcis peuvent parfois nous faire mal interpréter les choses. Ils sont également des leviers privilégiés pour ceux qui voudraient orienter notre interprétation.</p>

  496. <p>En résumé :</p>

  497. <ol>

  498. <li>Le trop-plein d’information est nocif, donc on filtre en masse.</li>

  499. <li>Ça ne va pas en s’arrangeant, alors on ne s’encombre que du strict nécessaire.</li>

  500. <li>Il faut agir vite pour ne pas rater son tour, alors nous sautons directement aux conclusions.</li>

  501. <li>Le manque d’information rend confus, donc on remplit les trous.</li>

  502. </ol>

  503. <p>Mais les solutions que nous avons trouvées pour régler les problèmes peuvent nous jouer des tours :</p>

  504. <ol>

  505. <li>Nous ne voyons pas tout. Et certaines des informations que nous écartons/filtrons sont en fait utiles et importantes.</li>

  506. <li>Notre mémoire renforce les erreurs. Une partie des choses dont nous nous rappelons le plus tard rendent les systèmes cités ci-dessus encore plus biaisés et plus dommageables pour nos processus de pensée.</li>

  507. <li>Les décisions rapides peuvent être complètement nulles. Certaines des conclusions auxquelles nous sautons sont injustes, égoïstes et contre-productives.</li>

  508. <li>Notre quête de sens peut générer des illusions. Nous imaginons parfois des détails qui ont été placés là par nos suppositions et construisons des intentions et des histoires qui n’existent pas vraiment.</li>

  509. </ol>

  510. <p><cite><em><a href="https://www.penser-critique.be/wp-content/uploads/2018/02/codex-biais-cognitifs.pdf">Codex des biais cognitifs, 2016</a> (<a href="/static/david/stream/codex-biais-cognitifs.pdf">cache</a>, PDF, 855 Ko)</em></cite></p>

  511. </blockquote>

  512. <p>Il est difficile d’avoir conscience d’être la solution à son propre mal-être. Sans pour autant réussir à y faire grand chose…</p>

  513. <p><em>Maudit cerveau.</em></p>

  514. <hr />

  515. <blockquote>

  516. <p>Je crois qu’il n’y a pas de problème <em>d’addiction</em> au Like mais que nous avons un problème de <em>diction</em> qui naît de l’absence de <em>frictions</em>. Qu’il nous faut parvenir à "dire", à rendre explicite et public ce qui nous émeut, ce qui nous révolte, ce qui nous attendrit, ce qui nous blesse, ce qui nous choque, ce qui nous intéresse, ce qui nous informe, et plus que tout ce qui nous lie. Et que cette "<em>diction</em>" est une <em>friction</em> ; que le prix à payer pour cette <em>diction</em> est celui d’une <em>friction</em> ; que cette <em>diction</em> a un coût et ce que coût n’est ni nul ni entièrement substituable ou déléguable à des entreprises</p>

  517. <p><cite><em><a href="https://www.affordance.info/mon_weblog/2019/11/la-fin-du-like-.html">La fin du like ?</a></em> (<a href="/david/cache/20f0ff21c9c7cf9cf8cc1cf76f6c42f0/">cache</a>)</cite></p>

  518. </blockquote>

  519. <p>J’en suis arrivé à la même conclusion et j’essaye de dés-émojis-er mes écrits ici et là. C’est difficile tellement il est aisé de cliquer sur une réaction proposée. Un émoji vaut mille mots et c’est justement  ce qui prête à confusion, l’interprétation des émotions étant très complexe et culturelle.</p>

  520. <p>Sans compter <a href="/david/stream/2018/11/22/">leur biais et leur instabilité</a>.</p>

  521. <p>🤷‍♂️</p>

  522. <hr />

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

  524. <blockquote>

  525. <p>Vous prévoyez écouter des séries en rafale pendant les Fêtes ? Saviez‑vous que regarder neuf heures d’épisodes correspond à une consommation de 1 kWh au coût d’environ 7 ¢ ? En effet, vous bénéficiez des plus bas tarifs résidentiels de l’Amérique du Nord. Bon visionnement !</p>

  526. <p><cite>Dans l’infolettre d’Hydro-Québec</cite></p>

  527. </blockquote>

  528. <p>Netflix, Disney+, AppleTV++, toujours plus d’abrutissement.</p>

  529. <p><em>Je suis sans voix.</em></p>

  530. <hr />

  531. <p>Manifestement je suis en manque de forêt.</p>

  532. </article>

  533. 

  534. 

  535. <nav id="jumpto">

  536.   <p>

  537.     <a rel=prev href="/david/stream/2019/11/19/">← Se livrer</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/12/03/">En forêt →</a>

  538.   </p>

  539. </nav>

  540. 

  541. <footer>

  542.   <div>

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

  544.     <p>

  545.       Bonjour/Hi!

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

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

  548.     </p>

  549.     <p>

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

  551.     </p>

  552.     

  553.       <p>

  554.         Les dernières publications hebdomadaires sont :

  555.       </p>

  556.       <ul class="with_columns">

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.           <li>

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

  716.           </li>

  717.         

  718.           <li>

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

  720.           </li>

  721.         

  722.           <li>

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

  724.           </li>

  725.         

  726.           <li>

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

  728.           </li>

  729.         

  730.           <li>

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

  732.           </li>

  733.         

  734.           <li>

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

  736.           </li>

  737.         

  738.           <li>

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

  740.           </li>

  741.         

  742.           <li>

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

  744.           </li>

  745.         

  746.           <li>

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

  748.           </li>

  749.         

  750.           <li>

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

  752.           </li>

  753.         

  754.       </ul>

  755.     

  756.     <p>

  757.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  774.     </p>

  775.     <p>

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

  777.     </p>

  778.     <p>

  779.       Je ne traque pas ta navigation mais mon

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

  781.       conserve des logs d’accès.

  782.     </p>

  783.   </div>

  784. </footer>

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

  786.   ;(_ => {

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

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

  789.       e.preventDefault()

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

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

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

  793.     })

  794.   })()

  795. </script>

  796. 

  797.   <script>

  798.   /* Service workers */

  799.   if (navigator.serviceWorker) {

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

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

  802.       function sendLinks (selector) {

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

  804.           return link.getAttribute('href')

  805.         })

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

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

  808.       }

  809.       navigator.serviceWorker.getRegistration()

  810.         .then(function (registration) {

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

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

  813.               .then(navigator.serviceWorker.ready)

  814.               .then(function () {

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

  816.               })

  817.               .catch(console.error.bind(console))

  818.           } else {

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

  820.             sendLinks(selector)

  821.           }

  822.         })

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

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

  825.         sendLinks(selector)

  826.       })

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

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

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

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

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

  832.           

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

  834.           

  835.         }

  836.       })

  837.     })

  838.   } else {

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

  840.   }

  841. </script>