davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 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.
26 Commits
1 Branch
Tree: 9c2d709fb0
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9c2d709fb0'
${ noResults }
larlet-fr-david/david/stream/2019/07/02/index.html

index.html 31KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853 
  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>Anxiété — 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/07/02/">

  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.   Anxiété

  456.   <time>Publié le 2 juillet</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Citation de la semaine : “Not only is my glass half empty, it’s not what I ordered.” — Catherine Tate (Traduction libre : « non seulement mon verre est à moitié vide mais ce n’est même pas ce que j’avais commandé. »)</em></p>

  460. <p>Cela fait plus d’un an que je ressens cette <a href="/david/stream/2018/05/16/">solastalgia</a>. Bon en vrai ça doit faire plus de trente ans et le fait d’être en couple puis de devenir parent n’arrange pas les choses dans ce qui est aussi appelé éco-anxiété.</p>

  461. <blockquote>

  462. <p>En arrière-plan, toujours : l’effondrement, la catastrophe, le jugement. Le mur qui s’approche. Godzilla, qu’on voit arriver à l’horizon, extrêmement lentement, et du coup on est tous posés sur la plage avec des jumelles pour le regarder avancer, et les plus entreprenants vendent des glaces aux badauds, et les plus finauds font des projections et magouillent dans l’espoir de tirer leur épingle du jeu au bout du compte, d’autres font du jetski ou je ne sais quelle absurdité pour profiter de l’instant, chacun s’arrange comme il peut avec ce qui vient, mais en tout cas je pense qu’on a tous admis la réalité de ce qui nous attend, même si on ne peut pas encore en prendre pleinement conscience – tant mieux, sans doute.</p>

  463. <p><cite><em><a href="http://nologos.net/le-silence/">Le silence</a></em> (<a href="/david/cache/80cea9c4b6867a24cf3eddec83f4edf2/">cache</a>)</cite></p>

  464. </blockquote>

  465. <p>Peut-être qu’il faut faire péter le bunker de filtre qui m’entoure ou tout simplement ne plus y aller.</p>

  466. <p>Peut-être qu’il faut créer son <a href="https://www.youtube-nocookie.com/embed/2TSgU6Vjfqw">propre bonheur</a>. Réussir à oublier le reste.</p>

  467. <p>Peut-être qu’il faut se taire et regarder des bâtiments s’effondrer avec la <a href="https://www.youtube-nocookie.com/embed/90Fpjwctqlw">bonne musique</a>.</p>

  468. <p>Peut-être qu’il faut arrêter les vidéos en <em>streaming</em>.</p>

  469. <blockquote>

  470. <p>Parce qu’il est de bon ton désormais de dégainer sa paille métallique, son tote bag à légumes, sa brosse à dent en bambou et son bout de charbon dans sa gourde (disclaimer : j’en possède également). J’achète trois fois plus cher des œufs de poules élevées en plein air qui ont à peine moins souffert que les autres, je constate que les magasins bio du coin vendent des fruits exotiques importés du Pérou, et j’ai l’impression que la responsabilisation écologique à l’échelle individuelle n’est qu’une vaste blague. J’aime clamer que les quelques comportements écoresponsables que j’entretiens sont avant tout pour laver ma conscience, tout en sachant qu’au fond je me réfugie dans le défaitisme qui m’ôte toute notion de culpabilisation. Alors je jette des objets encore fonctionnels et j’en consomme d’autres parce que ça me rassure, parce que ça me remplit, et j’essaie fort de me dire que je ne suis pas une si mauvaise personne.</p>

  471. <p><cite><em><a href="https://www.hypothermia.fr/2019/07/remplir-le-vide/">Remplir le vide</a></em> (<a href="/david/cache/97b622a941044548711e165738fed0a0/">cache</a>)</cite></p>

  472. </blockquote>

  473. <p>Mais s’exclure c’est perdre le fil. Se perdre. Perdre contact avec une réalité. Celle des <a href="https://www.bloomberg.com/news/articles/2019-07-01/france-s-richest-people-get-richer-faster-than-everyone-else">riches toujours plus riches</a> (<a href="/david/cache/6cbbd778b50966266f7a0ae223dcb378/">cache</a>). Des un peu moins riches <a href="https://www.francetvinfo.fr/economie/immobilier/prix-immobilier/on-a-cree-des-ghettos-de-vieux-riches-en-bretagne-les-habitants-ne-font-pas-de-quartier-avec-les-residences-secondaires_3494271.html">toujours plus excluant</a> (<a href="/david/cache/580c8ba61a4494df6f19a9a777027b0a/">cache</a>). De l’armée qui va devoir <a href="https://ici.radio-canada.ca/nouvelle/1197001/rechauffement-climatique-forces-armees-canada-jonathan-vance-etat-major-inondations-feux-forets-arctique">se reconvertir en pompiers</a> (<a href="/david/cache/c348df4128c1922a9f706d3d818e0702/">cache</a>).</p>

  474. <blockquote>

  475. <p>To come back to the theme of this thread, I think we should not let the overarching question be “When would the climate catastrophe happen?”, but “Until when can we guarantee that we would avoid major risks to people &amp; the environment?” (20/n)</p>

  476. <p><cite><a href="https://twitter.com/SISeneviratne/status/1142867128867049478">Thread Twitter</a></cite></p>

  477. </blockquote>

  478. <p>De plus en plus convaincu qu’il y aura juste de plus en plus d’esclaves pour servir de moins en moins de riches. J’aime cette métaphore de la chute qui fait de plus en plus mal en fonction de la hauteur (en nombre de degrés). Il suffit d’avoir suffisamment de personnes empilées/mourantes au moment de sa propre chute pour ne pas y laisser sa peau. En attendant un cygne noir combiné à de la <a href="https://en.wikipedia.org/wiki/Goi%C3%A2nia_accident#Theft_of_the_source">bêtise humaine</a>.</p>

  479. <blockquote>

  480. <p>Remember:</p>

  481. <ol>

  482. <li>The Ocean is suffocating.</li>

  483. <li>Forests are being annihilated.</li>

  484. <li>Pollinators are being wiped out.</li>

  485. <li>Billions need climate chaos help.</li>

  486. <li>Large mammals won’t survive.</li>

  487. <li>Our crops will soon fail.</li>

  488. <li>Extinction is accelerating.</li>

  489. <li>Plastic is in our lungs.</li>

  490. <li>Arctic Ice is disappearing.</li>

  491. <li>Antarctica is collapsing.</li>

  492. <li>The Amazon is dying.</li>

  493. <li>Rivers are toxic.</li>

  494. <li>The Air is poisonous.</li>

  495. <li>Coral reefs are doomed.</li>

  496. <li>Millions - mostly black and brown children, women &amp; men - are dying due to the Ecological Catastrophe, every year.</li>

  497. <li>Greenland ice is melting.</li>

  498. <li>Heatwaves will kill billions.</li>

  499. <li>Mass Starvation has begun.</li>

  500. <li>BILLIONS, yes, mostly black &amp; brown children, women &amp; men, seem set to die in the Ecological and Global Warming Catastrophe - unless all systems are revolutionised towards justice.</li>

  501. <li>The seasons are forever broken.</li>

  502. <li>Permafrost is collapsing. 😱</li>

  503. <li>Mega-storms are getting worse.</li>

  504. <li>Bees are critically endangered.</li>

  505. <li>Corporate capitalism has wrecked our natural world, but it is never be too late to organise fairer societies based on real cooperation.</li>

  506. <li>Insects are vanishing.</li>

  507. <li>The Ocean is acidifying.</li>

  508. <li>Seabirds are starving.</li>

  509. <li>Sea levels are rising.</li>

  510. <li>Fertile soils are disappearing.</li>

  511. <li>Scientists see that, alongside fossil fuel burning, animal agriculture is a major cause of this ecological and climate nightmare.</li>

  512. <li>The jet stream is fractured.</li>

  513. <li>Glaciers are melting.</li>

  514. <li>Orangutans face annihilation.</li>

  515. <li>Sharks are being wiped out.</li>

  516. <li>Butterflies are in danger.</li>

  517. <li>Fish are disappearing.</li>

  518. <li>Plankton are dying.</li>

  519. <li>Deserts are expanding.</li>

  520. <li>Mountains are being destroyed.</li>

  521. <li>Trees are diseased.</li>

  522. <li>Beaches are being washed away</li>

  523. <li>Lakes are shrinking.</li>

  524. <li>Waterfalls are dry.</li>

  525. <li>Giraffes will soon be gone.</li>

  526. <li>Starfish are being massacred.</li>

  527. <li>Frogs are near extinction.</li>

  528. <li>Whales are committing suicide.</li>

  529. <li>Worms are struggling to live.</li>

  530. <li>Tropical diseases will explode.</li>

  531. <li>Plant extinction is out of control.</li>

  532. </ol>

  533. <p><cite><a href="https://twitter.com/ClimateBen/status/1145016602150219776">Un autre thread sur Twitter (ça va aller jusqu’à 100)</a></cite></p>

  534. </blockquote>

  535. <p>Une Terre que l’on recouvre d’une couche de plastique, <a href="https://www.theguardian.com/us-news/2019/jun/23/all-the-plastic-ever-made-study-comic">héritage du bref passage de l’Humanité</a> sur ce bout de caillou. La tête dans un sac jusqu’à l’asphyxie.</p>

  536. <p>Je regarde mes voisins avec leur SUV de deux tonnes par personne. Leurs <a href="https://blog.monolecte.fr/2019/06/30/maudits-gazons/">maudites tondeuses</a> (<a href="/david/cache/ff0897f15e27d197f46ed1a64b226467/">cache</a>). Leurs barbecues de bœuf quotidiens. Et je pleure.</p>

  537. <figure class="unsquared">

  538.     <a href="/static/david/stream/urban-rafting.jpg">

  539.       <img src="/static/david/stream/urban-rafting.jpg" alt="Raft urbain" />

  540.     </a>

  541.   <figcaption>

  542.     Se laisser glisser. Emporté par le flux. Jusqu’au barrage.<br>

  543.     Broyé par ce monde en besoin d’énergie.

  544.   </figcaption>

  545. </figure>

  546. 

  547. <p><em>J’en ai plein le dos de ce monde. Et il me le fait bien comprendre chaque matin. Je ne peux même plus <a href="https://elemental.medium.com/extreme-athleticism-is-the-new-midlife-crisis-d87199a18bed">criser tranquille dans mon coin</a> (<a href="/david/cache/883b64b3ccd364314a36dd6fc1602eac/">cache</a>).</em></p>

  548. </article>

  549. 

  550. 

  551. <nav id="jumpto">

  552.   <p>

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

  554.   </p>

  555. </nav>

  556. 

  557. <footer>

  558.   <div>

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

  560.     <p>

  561.       Bonjour/Hi!

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

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

  564.     </p>

  565.     <p>

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

  567.     </p>

  568.     

  569.       <p>

  570.         Les dernières publications hebdomadaires sont :

  571.       </p>

  572.       <ul class="with_columns">

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.           <li>

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

  716.           </li>

  717.         

  718.           <li>

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

  720.           </li>

  721.         

  722.           <li>

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

  724.           </li>

  725.         

  726.           <li>

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

  728.           </li>

  729.         

  730.           <li>

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

  732.           </li>

  733.         

  734.           <li>

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

  736.           </li>

  737.         

  738.           <li>

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

  740.           </li>

  741.         

  742.           <li>

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

  744.           </li>

  745.         

  746.           <li>

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

  748.           </li>

  749.         

  750.           <li>

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

  752.           </li>

  753.         

  754.           <li>

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

  756.           </li>

  757.         

  758.           <li>

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

  760.           </li>

  761.         

  762.           <li>

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

  764.           </li>

  765.         

  766.       </ul>

  767.     

  768.     <p>

  769.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  786.     </p>

  787.     <p>

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

  789.     </p>

  790.     <p>

  791.       Je ne traque pas ta navigation mais mon

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

  793.       conserve des logs d’accès.

  794.     </p>

  795.   </div>

  796. </footer>

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

  798.   ;(_ => {

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

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

  801.       e.preventDefault()

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

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

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

  805.     })

  806.   })()

  807. </script>

  808. 

  809.   <script>

  810.   /* Service workers */

  811.   if (navigator.serviceWorker) {

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

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

  814.       function sendLinks (selector) {

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

  816.           return link.getAttribute('href')

  817.         })

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

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

  820.       }

  821.       navigator.serviceWorker.getRegistration()

  822.         .then(function (registration) {

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

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

  825.               .then(navigator.serviceWorker.ready)

  826.               .then(function () {

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

  828.               })

  829.               .catch(console.error.bind(console))

  830.           } else {

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

  832.             sendLinks(selector)

  833.           }

  834.         })

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

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

  837.         sendLinks(selector)

  838.       })

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

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

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

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

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

  844.           

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

  846.           

  847.         }

  848.       })

  849.     })

  850.   } else {

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

  852.   }

  853. </script>