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.
30 Commits
1 Branch
Tree: 78ab58b3bb
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '78ab58b3bb'
${ noResults }
larlet-fr-david/david/stream/2019/06/07/index.html

index.html 33KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829 
  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>Amateur — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/stream/2019/06/07/">

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

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

  457. </h1>

  458. <article class="single">

  459.  <p><em>Une semaine dans les cartons pour descendre de ce Plateau d’ivoire peuplé de montréalisiens. Et aussi pour prendre conscience qu’il n’y a pas que des trentenaires privilégiés à Montréal (autocritique++). Réduire la dissonance cognitive, avec urgence.</em></p>

  460. <figure>

  461.   <img src="/static/david/stream/life-quality-vs-cost.png" alt="Graph of the Quality of life and Cost of Living around the world" loading="lazy" width="500" height="500" />

  462.   <figcaption>

  463.     En parlant de privilégiés (<a href="https://www.reddit.com/r/dataisbeautiful/comments/bslfv2/oc_which_cities_are_the_best_deals_quality_of/">source</a>).

  464.   </figcaption>

  465. </figure>

  466. 

  467. <hr />

  468. <blockquote>

  469. <p>Je ne me sens jamais amateur. Je me considère comme un pro de la perception, un pro de l’expérience optimale, un pro de l’esthétique, c’est ce que je recherche quand j’écris comme quand je fais du bikepacking. Se considérer comme amateur, c’est partir perdant. Quand on écrit, quand on est artiste, même quand on pédale, on vise le génie, sinon à quoi bon ? Gombrowicz disait que 100 % des génies s’étaient voulu génie, mais aucun qui ne s’était pas fixé cet objectif démesuré n’avait été capable de se surpasser. À chacun de trouver son domaine d’expertise.</p>

  470. <p><cite><em><a href="https://tcrouzet.com/2019/05/26/bikepacking-dans-les-smoky-mountains/">Bikepacking dans les Smoky Mountains</a></em> (<a href="/david/cache/59f6e7bb672f120d7d8d04e10cca94e8/">cache</a>)</cite></p>

  471. </blockquote>

  472. <p>J’aurais du mal à être plus en désaccord avec cette figure de l’amateur. Être amateur, c’est avoir suffisamment confiance dans ses compétences pour ne pas avoir à se revendiquer d’être un pro. Être amateur, c’est <em>aussi et en même temps</em> être en doute sur ses savoir-faire ce qui donne la curiosité d’explorer d’autres espaces et d’autres pratiques. Être amateur, c’est ne pas avoir besoin de se mesurer aux autres à travers la compétition car le cheminement est interne. Être amateur, c’est négliger la performance (universelle) au profit de la pertinence (spécifique).</p>

  473. <p>Être amateur, c’est finalement — de façon assez égoïste — aimer ce que l’on fait pour soi. En espérant produire des externalités positives par la démonstration de ce qui est possible.</p>

  474. <hr />

  475. <blockquote>

  476. <p>L’humanité existe depuis quelques millions d’années mais ne collabore sur un projet mondial au-delà de la Terre, dans l’espace, que depuis une trentaine d’années.</p>

  477. <p>Si notre civilisation espère s’élever, elle devra embraser une vision cosmique : aller voir sur d’autres astres, d’autres systèmes stellaires, voire s’attendre à devoir vivre dans des stations autonomes en déplacement.</p>

  478. <p><cite><em><a href="https://couleur-science.eu/?d=4e59a5--quelques-megastructures-artificielles-pour-coloniser-la-galaxie">Quelques mégastructures artificielles pour coloniser la galaxie</a></em> (<a href="/david/cache/ff5119f01fac378b6830e686fcdbaa04/">cache</a>)</cite></p>

  479. </blockquote>

  480. <p>Je trouve ça fascinant de se poser ce genre de questions. Merci Timo.</p>

  481. <hr />

  482. <blockquote>

  483. <p>But the real insensitivity is to either exaggerate, or lead the public to exaggerate, the death toll of Chernobyl, and the potency of radiation, since doing so results in panics, like the one in Fukushima, Japan, in 2011, which killed about 2,000 people. While some amount of temporary evacuation might have been justified, there was simply never any reason for such large, and long-term, displacement.</p>

  484. <p>“With hindsight, we can say the evacuation was a mistake,” said Philip Thomas, a professor of risk management who led a recent research project on nuclear accidents. “We would have recommended that nobody be evacuated.”</p>

  485. <p><cite><em><a href="https://www.forbes.com/sites/michaelshellenberger/2019/05/09/the-reason-they-fictionalize-nuclear-disasters-like-chernobyl-is-because-they-kill-so-few-people/">The Reason They Fictionalize Nuclear Disasters Like Chernobyl Is Because They Kill So Few People</a></em> (<a href="/david/cache/3518f5d1068e4aa8fc2197e3d16fda02/">cache</a>)</cite></p>

  486. </blockquote>

  487. <p>Je découvre le nombre de morts liés à l’évacuation de Fukushima. <a href="https://fr.wikipedia.org/wiki/Catastrophe_nucl%C3%A9aire_de_Fukushima#Effets_sur_les_populations_des_%C3%A9vacuations_forc%C3%A9es_li%C3%A9es_%C3%A0_l’accident">Wikipedia s’accorde sur 1600</a> pour les 300000 évacués. Qui sait, en sacrifiant Prypiat on aurait pu mener une expérience sur le long terme relative aux <a href="https://fr.wikipedia.org/wiki/Catastrophe_nucl%C3%A9aire_de_Tchernobyl#Sanitaires">conséquences sanitaires</a> d’une telle explosion.</p>

  488. <p>À deux doigts de faire une mauvaise blague à base de roulette russe. Mais ça n’aurait probablement pas plu à la tortue cynique.</p>

  489. <blockquote>

  490. <p>Notre espèce peine à se connaître elle-même. Nous avons besoin de poser un regard anthropologique sur ce que nous sommes, ce que nous faisons et sur le monde autour de nous, estime Paul Jorion. La science nous donne l’impression de comprendre beaucoup, mais bien des sociétés se sont imposées en ayant une compréhension très partielle du monde. Pour Jorion, nous sommes subordonnés à la survie de notre espèce, mais elle est mal équipée pour cela. Nous n’avons disposé longtemps que d’une seule méthode pour assurer notre survie : la reproduction. Aujourd’hui pourtant, nous avons une différence avec les autres espèces : nous cherchons à résoudre notre survie, le problème de notre extinction probable, par un autre moyen que la reproduction : la raison !</p>

  491. <p><cite><em><a href="http://www.internetactu.net/2019/06/06/technocritiques-12-comment-prioriser-la-critique/">Technocritiques (1/2) : comment prioriser la critique ?</a></em> (<a href="/david/cache/d07886e85ddc5db48716a84888c1d377/">cache</a>)</cite></p>

  492. </blockquote>

  493. <hr />

  494. <blockquote>

  495. <p>Le temps frais, les précipitations et les inondations qui ont touché plusieurs régions du Québec ont fait en sorte que la superficie touchée par les incendies de forêt est la plus petite des 25 dernières années pour la Société de protection des forêts contre le feu (SOPFEU), c’est-à-dire depuis sa création en 1994. Ainsi, au 31 mai dernier, les pompiers forestiers et les pompiers municipaux ont éteint 54 feux ayant consumé 28,1 hectares (ha) de forêt. Ce résultat suit de très près l’année 2017 qui enregistrait 53 incendies à la même date. La moyenne des dix dernières années se situe à 195 incendies pour 20 969 ha.</p>

  496. <p><cite><em><a href="http://sopfeu.qc.ca/communiques/bilan-du-mois-de-mai-la-plus-petite-superficie-touchee-depuis-la-creation-de-la-sopfeu/">Bilan du mois de mai: la plus petite superficie touchée depuis la création de la SOPFEU</a></em> (<a href="/david/cache/fa7f0dc3ae7b9e1eea9ddf8b5f5e3e42/">cache</a>)</cite></p>

  497. </blockquote>

  498. <p>Voir le verre a moitié plein.</p>

  499. <hr />

  500. <blockquote>

  501. <p>“Child labor in the cocoa industry will continue to be a struggle as long as we continue to pay farmers a fraction of the cost of sustainable production. … Fairtrade isn’t a perfect solution,” said Bryan Lew, chief operating officer for Fairtrade America. But, he said, the higher prices for certified cocoa and the group’s efforts to organize farmer cooperatives are steps toward alleviating its root cause: poverty.</p>

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

  503. <p>But to Schoenmakers, it’s a simple matter. “Nobody needs chocolate,” he said. “It’s a gift to yourself or someone else. We think it’s absolute madness that for a gift that no one really needs, so many people suffer.”</p>

  504. <p><cite><em><a href="https://www.washingtonpost.com/graphics/2019/business/hershey-nestle-mars-chocolate-child-labor-west-africa/">Hershey, Nestle and Mars broke their pledges to end child labor in chocolate production</a></em> (<a href="/david/cache/02a55f4340a09188addcf4448823a985/">cache</a>)</cite></p>

  505. </blockquote>

  506. <p>Autant se rapprocher du végétarisme m’est relativement aisé. Autant quand on touche au chocolat c’est plus difficile.</p>

  507. <p>Un plaisir d’amateur contre un esclavage de mineur.</p>

  508. <p><em>Dissonance disais-je.</em></p>

  509. <hr />

  510. <blockquote>

  511. <p>Le fait que l’État ait fini par dominer les grands récits archéologiques et historiques n’a rien de très étonnant. Pour nous — Homo Sapiens — qui considérons habituellement les choses du point de vue d’une seule ou de quelques générations, la permanence de l’État et de son espace administré apparaît comme une constante indissociable de notre condition. Au-delà de l’hégémonie complète dont jouit actuellement l’organisation étatique, une grande partie des études archéologiques et historiques du monde est financée par l’État, et se résume souvent à un exercice narcissique de réalisation d’autoportrait. La tradition archéologique qui, jusqu’à récemment, consistait à exhumer et à analyser les ruines historiques majeures, aggrave encore ce travers.</p>

  512. <p>Ainsi, si vous construisiez de manière monumentale, en pierre, et en concentrant opportunément vos décombres en un seul endroit, il était assez probable que vous soyez “découverts” et par-là même amenés à dominer les pages de l’histoire ancienne. Si, au contraire, vous construisiez en bois, en bambou, ou en roseaux, vous risquiez fort d’échapper aux annales de l’archéologie. Et si vous étiez des chasseurs-cueilleurs ou des nomades, même nombreux, ne laissant derrière vous qu’une fine couche clairsemée de déchets biodégradables, il était assez probable que vous soyez totalement absents des archives archéologiques.</p>

  513. <p><cite><em>Homo Domesticus</em>, James C. Scott <a href="http://partage-le.com/2019/04/emmanuel-macron-et-le-peuple-de-batisseurs-par-nicolas-casaux/">via</a> (<a href="/david/cache/b90ecdc1c52fc36259fc0dc43d34c8c2/">cache</a>)</cite></p>

  514. </blockquote>

  515. <p>Ne pas laisser de traces. En publiant ces mots je deviens un sédentaire du Web. Je pollue avec des archives qui n’ont que l’attention d’un disque quelque part sur l’ordinateur d’un autre (mais aussi sur le mien). Le moment où vous lisez ces lignes est suffisant, elles pourraient se biodégrader, ne laissant une trace infime que dans cette conscience collective.</p>

  516. <p>L’écrivain amateur comme un nomade du Web. L’écrivain nomade comme un amateur du Web. Réduire l’égo, le génie étant dans le partage et l’enrichissement progressif pour tous.</p>

  517. <hr />

  518. <p>Lorsqu’un restaurant m’emballe la nourriture restante dans du plastique ou du polystyrène, est-ce que je ne suis pas en train d’aggraver le problème sous couvert de bonne conscience ?</p>

  519. <p><em>Avec urgence mais à petits pas.</em></p>

  520. </article>

  521. 

  522. 

  523. <nav id="jumpto">

  524.   <p>

  525.     <a rel=prev href="/david/stream/2019/05/31/">← Pollution</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/06/14/">Pauvreté →</a>

  526.   </p>

  527. </nav>

  528. 

  529. <footer>

  530.   <div>

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

  532.     <p>

  533.       Bonjour/Hi!

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

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

  536.     </p>

  537.     <p>

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

  539.     </p>

  540.     

  541.       <p>

  542.         Les dernières publications hebdomadaires sont :

  543.       </p>

  544.       <ul class="with_columns">

  545.         

  546.           <li>

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

  548.           </li>

  549.         

  550.           <li>

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

  552.           </li>

  553.         

  554.           <li>

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

  556.           </li>

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.           <li>

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

  716.           </li>

  717.         

  718.           <li>

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

  720.           </li>

  721.         

  722.           <li>

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

  724.           </li>

  725.         

  726.           <li>

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

  728.           </li>

  729.         

  730.           <li>

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

  732.           </li>

  733.         

  734.           <li>

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

  736.           </li>

  737.         

  738.           <li>

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

  740.           </li>

  741.         

  742.       </ul>

  743.     

  744.     <p>

  745.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  762.     </p>

  763.     <p>

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

  765.     </p>

  766.     <p>

  767.       Je ne traque pas ta navigation mais mon

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

  769.       conserve des logs d’accès.

  770.     </p>

  771.   </div>

  772. </footer>

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

  774.   ;(_ => {

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

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

  777.       e.preventDefault()

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

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

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

  781.     })

  782.   })()

  783. </script>

  784. 

  785.   <script>

  786.   /* Service workers */

  787.   if (navigator.serviceWorker) {

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

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

  790.       function sendLinks (selector) {

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

  792.           return link.getAttribute('href')

  793.         })

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

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

  796.       }

  797.       navigator.serviceWorker.getRegistration()

  798.         .then(function (registration) {

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

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

  801.               .then(navigator.serviceWorker.ready)

  802.               .then(function () {

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

  804.               })

  805.               .catch(console.error.bind(console))

  806.           } else {

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

  808.             sendLinks(selector)

  809.           }

  810.         })

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

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

  813.         sendLinks(selector)

  814.       })

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

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

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

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

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

  820.           

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

  822.           

  823.         }

  824.       })

  825.     })

  826.   } else {

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

  828.   }

  829. </script>