davidbgk
/
larlet-fr-david
关注 1
点赞 0
派生 0
代码 版本发布 0 动态
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
199 提交
1 分支
目录树: 7abf801f8d
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 '7abf801f8d'
${ noResults }
larlet-fr-david/david/stream/2019/12/17/index.html

index.html 32KB
原始文件 Blame 文件历史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820 
  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>Origines — 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/12/17/">

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

  456.   <time>Publié le 17 décembre</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Essayer de comprendre le passé pour envisager un meilleur avenir. Le défi de chaque être pensant. Pansant ? Passant.</em></p>

  460. <hr />

  461. <p>Cette semaine, le truc cool c’est d’avoir participé à <a href="https://github.com/pyrates/">pyrates</a>. Revenir à la base : des petits outils qui fonctionnent. Réduire les dépendances et essayer de comprendre ce qu’il se passe sous le capot.</p>

  462. <p>Aussi, j’ai rencontré des gens biens.</p>

  463. <p>Enfin, j’ai fait un peu d’archéologie dans mes sauvegardes, c’est toujours intéressant de voir ce que l’on a pu garder, ce qui a été à la source de notre travail actuel, ce qui nous fait aujourd’hui sourire.</p>

  464. <hr />

  465. <blockquote>

  466. <p>La notion de « chaînon manquant » est apparue au XIXe siècle. Elle a été utilisée pour qualifier l’absence de fossiles susceptibles d’expliquer le passage d’une forme à l’autre, par exemple entre « le singe » et l’Homme. Le pithécanthrope d’Eugène Dubois, devenu <em>Homo erectus</em>, aurait pu faire office de chaînon manquant, comme son nom l’indiquait (singe-homme), mais il était trop différent de ce que les préhistoriens imaginaient à l’époque.</p>

  467. <p>Aujourd’hui, cette notion est devenue totalement obsolète. D’une part, l’évolution n’est plus comparée à une chaîne dont les espèces seraient les maillons, mais plutôt à un arbre portant de multiples ramifications. D’autre part, si l’on ne considère qu’une seule lignée (un rameau isolé de ce buisson), on sait qu’il manquera toujours des chaînons, des étapes du processus de transformation d’une espèce en une autre. En effet, comme la fossilisation est un phénomène rare, les formes intermédiaires n’ont certainement pas toutes été conservées, surtout si l’évolution a été très rapide (à l’échelle des temps géologiques).</p>

  468. <p><cite><em>Sapiens à la plage</em>, Jean-Baptiste de Panafieu</cite></p>

  469. </blockquote>

  470. <p>Je trouve fascinante cette notion de « buisson des australopithèques » pour reprendre les termes de l’auteur. On ne sait pas vraiment d’où on vient, ni pourquoi des cousins ont disparu. Est-ce qu’une espèce peut avoir conscience de sa propre extinction ? Est-ce que ces cousins ont été dans l’acceptation ou dans la lutte ?</p>

  471. <p><em>On ne saura probablement jamais.</em></p>

  472. <hr />

  473. <blockquote>

  474. <p>Whereas chimpanzees spend 5 hours a day chewing raw food, a single hour suffices for people eating cooked food. The advent of cooking enabled humans to eat more kinds of food, to devote less time to eating, and to make do with smaller teeth and shorter intestines. Some scholars believe there is a direct link between the advent of cooking, the shortening of the human intestinal track, and the growth of the human brain. Since long intestines and large brains are both massive energy consumers, it’s hard to have both. By shortening the intestines and decreasing their energy consumption, cooking inadvertently opened the way to the jumbo brains.</p>

  475. <p><cite><em><a href="https://neilkakkar.com/sapiens.html">If Sapiens were a blog post</a></em> (<a href="/david/cache/bc7c6d25f181495551b1635db6a67387/">cache</a>)</cite></p>

  476. </blockquote>

  477. <p>Est-ce qu’en passant à un régime hyper-contrôlé on arrive à laisser encore davantage d’énergie à notre cerveau ? Quid de <a href="https://www.theatlantic.com/family/archive/2019/03/eating-the-same-thing-lunch-meal/584347/">manger le même repas chaque jour</a> (<a href="/david/cache/83eb6629fc067dec5ad53c8d391362e0/">cache</a>) ?</p>

  478. <p>Il reste tellement de choses à explorer. Je me demande comment est-ce que l’on peut avoir envie d’aller sur d’autres planètes alors qu’il y a un territoire inconnu en chacun de nous.</p>

  479. <p>La clé de la coopération est peut-être dans notre assiette :</p>

  480. <blockquote>

  481. <p>Pour les australopithèques confrontés au milieu ouvert, peut-être plus dangereux encore que la forêt, la vie en communauté offrait une garantie de plus grande sécurité. Un cerveau plus gros peut alors présenter un avantage, en permettant une coopération plus poussée entre les membres du groupe.</p>

  482. <p>Mais la sécurité a un coût ! Ce cerveau surdéveloppé demande une nourriture plus riche, donc d’origine animale, qui est généralement plus digeste. Son assimilation demandera moins d’efforts à l’intestin qui consommera moins d’énergie, une économie dont le cerveau pourra tirer profit. Et si ce dernier est plus efficace, il sera capable de trouver plus de sources de nourriture ou de fabriquer les outils aidant à s’en procurer. C’est le cercle vertueux de l’encéphalisation ! Deuxième cercle vertueux : si un gros cerveau facilite les relations sociales, celles-ci vont en retour permettre une meilleure exploitation du milieu, par exemple par la mise en commun des nouvelles ressources.</p>

  483. <p><cite><em>Sapiens à la plage</em>, Jean-Baptiste de Panafieu</cite></p>

  484. </blockquote>

  485. <hr />

  486. <blockquote>

  487. <p>Why didn’t humans abandon farming when the plan backfired? Partly because it took generations for the small changes to accumulate and transform society and, by then, nobody remembered that they had ever lived differently. And partly because population growth burned humanity’s boats. If the adoption of ploughing increased a village’s population from a hundred to 110, which ten people would have volunteered to starve so that the others could go back to the good old times? There was no going back. The trap snapped shut.</p>

  488. <p><cite><em><a href="https://neilkakkar.com/sapiens.html">If Sapiens were a blog post</a></em> (<a href="/david/cache/bc7c6d25f181495551b1635db6a67387/">cache</a>)</cite></p>

  489. </blockquote>

  490. <p>Nous sommes probablement encore aujourd’hui prisonniers de ce cycle, qui a pu s’accélérer avec les énergies non-renouvelables. Ce qui a permis son emballement va probablement permettre d’en sortir, dans la douleur, comme une seconde naissance ? Le recul des survivants sera-t-il suffisant pour ne pas retomber dans le même cercle non vertueux ?</p>

  491. <hr />

  492. <blockquote>

  493. <p>Ce que les médias occidentaux appellent « Arabes », ce sont le plus souvent les anciens nomades, alors qu’« Africains » désigne les tribus sédentaires. La présence musulmane dans la région remonte au VIIIe siècle, c’est-à-dire aux premières décennies de l’expansion de l’islam. L’idée que le conflit du Darfour résulterait de l’intrusion exogène d’Arabes musulmans dans une région jusque-là intacte au plan ethnico-religieux est donc fausse.</p>

  494. <p>Il n’est bien entendu pas question de soutenir que la dimension « ethnique » du conflit est une pure invention des médias. Au Darfour, les ethnies existent bel et bien, et ce pour une raison simple : elles ont été créées par les colons britanniques. Un sultanat existe au Darfour depuis le milieu du XVIIe siècle. Les Britanniques prennent possession de la région à la fin du XIXe siècle et au début du XXe siècle, la période coloniale au Soudan durant de 1916 à 1956. En arrivant, les Britanniques instaurent un système de droits de propriété du sol, qui attribue des portions de terre à certaines ethnies et non à d’autres. Ce système permet, d’une part, de contrôler la population locale — les tribus du Darfour s’étaient opposées à la conquête britannique avec détermination. Il permet d’autre part d’en tirer un profit économique, par l’entremise de l’impôt notamment. Une première cristallisation des « ethnies » se fait sur la base de la propriété foncière (une base de classe, donc), qui opposera désormais les nomades aux sédentaires, ceux qui se sont vu attribuer une terre et les autres, sous l’impulsion du colonialisme anglais. Le conflit actuel est une lointaine conséquence de ce système de propriété. De la part des impérialistes, cette façon de procéder est courante à l’époque. C’est que ce que Mahmood Mamdani appelle la stratégie de <em>re-define and rule</em>, « re-catégoriser et dominer ». L’opposition entre Hutus et Tutsis au Rwanda a une généalogie comparable.</p>

  495. <p><cite><em><a href="https://www.editions-zones.fr/lyber?la-nature-est-un-champ-de-bataille">La nature est un champ de bataille</a> (<a href="/david/cache/2020/a72c83494fc6636cde5b73bd2b064958/">cache</a>)</em>, Razmig Keucheyan</cite></p>

  496. </blockquote>

  497. <p>Voilà une chose que l’on a oublié de m’enseigner en cours d’histoire. C’est fâcheux.</p>

  498. <hr />

  499. <blockquote>

  500. <p>The state and the market approached people with an offer that could not be refused. ‘Become individuals,’ they said. ‘Marry whomever you desire, without asking permission from your parents. Take up whatever job suits you, even if community elders frown. Live wherever you wish, even if you cannot make it every week to the family dinner. You are no longer dependent on your family or your community. We, the state and the market, will take care of you instead. We will provide food, shelter, education, health, welfare and employment. We will provide pensions, insurance and protection.’</p>

  501. <p><cite><em><a href="https://neilkakkar.com/sapiens.html">If Sapiens were a blog post</a></em> (<a href="/david/cache/bc7c6d25f181495551b1635db6a67387/">cache</a>)</cite></p>

  502. </blockquote>

  503. <p>Je n’avais jamais envisagé ce changement de culture sous cet angle. Encourager l’individualité pour bénéficier de sa précarité. Voilà qui ne va pas améliorer ma misanthropie.</p>

  504. <hr />

  505. <p>J’ai pris une résolution avant l’heure suite à deux réunions qui m’ont placé dans cette situation :</p>

  506. <blockquote>

  507. <p>Lorsque j’estime être le plus privilégié dans un groupe, je me mets en mode écoute uniquement.</p>

  508. </blockquote>

  509. <p>En conservant mon énergie pour transmettre ces retours d’expériences à mes semblables.</p>

  510. <p><em>L’allié est un messager.</em></p>

  511. </article>

  512. 

  513. 

  514. <nav id="jumpto">

  515.   <p>

  516.     <a rel=prev href="/david/stream/2019/12/10/">← Publier</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/12/24/">Outils →</a>

  517.   </p>

  518. </nav>

  519. 

  520. <footer>

  521.   <div>

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

  523.     <p>

  524.       Bonjour/Hi!

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

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

  527.     </p>

  528.     <p>

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

  530.     </p>

  531. 

  532.       <p>

  533.         Les dernières publications hebdomadaires sont :

  534.       </p>

  535.       <ul class="with_columns">

  536. 

  537.           <li>

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

  539.           </li>

  540. 

  541.           <li>

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

  543.           </li>

  544. 

  545.           <li>

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

  547.           </li>

  548. 

  549.           <li>

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

  551.           </li>

  552. 

  553.           <li>

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

  555.           </li>

  556. 

  557.           <li>

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

  559.           </li>

  560. 

  561.           <li>

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

  563.           </li>

  564. 

  565.           <li>

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

  567.           </li>

  568. 

  569.           <li>

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

  571.           </li>

  572. 

  573.           <li>

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

  575.           </li>

  576. 

  577.           <li>

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

  579.           </li>

  580. 

  581.           <li>

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

  583.           </li>

  584. 

  585.           <li>

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

  587.           </li>

  588. 

  589.           <li>

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

  591.           </li>

  592. 

  593.           <li>

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

  595.           </li>

  596. 

  597.           <li>

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

  599.           </li>

  600. 

  601.           <li>

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

  603.           </li>

  604. 

  605.           <li>

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

  607.           </li>

  608. 

  609.           <li>

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

  611.           </li>

  612. 

  613.           <li>

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

  615.           </li>

  616. 

  617.           <li>

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

  619.           </li>

  620. 

  621.           <li>

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

  623.           </li>

  624. 

  625.           <li>

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

  627.           </li>

  628. 

  629.           <li>

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

  631.           </li>

  632. 

  633.           <li>

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

  635.           </li>

  636. 

  637.           <li>

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

  639.           </li>

  640. 

  641.           <li>

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

  643.           </li>

  644. 

  645.           <li>

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

  647.           </li>

  648. 

  649.           <li>

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

  651.           </li>

  652. 

  653.           <li>

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

  655.           </li>

  656. 

  657.           <li>

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

  659.           </li>

  660. 

  661.           <li>

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

  663.           </li>

  664. 

  665.           <li>

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

  667.           </li>

  668. 

  669.           <li>

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

  671.           </li>

  672. 

  673.           <li>

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

  675.           </li>

  676. 

  677.           <li>

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

  679.           </li>

  680. 

  681.           <li>

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

  683.           </li>

  684. 

  685.           <li>

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

  687.           </li>

  688. 

  689.           <li>

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

  691.           </li>

  692. 

  693.           <li>

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

  695.           </li>

  696. 

  697.           <li>

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

  699.           </li>

  700. 

  701.           <li>

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

  703.           </li>

  704. 

  705.           <li>

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

  707.           </li>

  708. 

  709.           <li>

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

  711.           </li>

  712. 

  713.           <li>

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

  715.           </li>

  716. 

  717.           <li>

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

  719.           </li>

  720. 

  721.           <li>

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

  723.           </li>

  724. 

  725.           <li>

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

  727.           </li>

  728. 

  729.           <li>

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

  731.           </li>

  732. 

  733.       </ul>

  734. 

  735.     <p>

  736.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  753.     </p>

  754.     <p>

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

  756.     </p>

  757.     <p>

  758.       Je ne traque pas ta navigation mais mon

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

  760.       conserve des logs d’accès.

  761.     </p>

  762.   </div>

  763. </footer>

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

  765.   ;(_ => {

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

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

  768.       e.preventDefault()

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

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

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

  772.     })

  773.   })()

  774. </script>

  775. 

  776.   <script>

  777.   /* Service workers */

  778.   if (navigator.serviceWorker) {

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

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

  781.       function sendLinks (selector) {

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

  783.           return link.getAttribute('href')

  784.         })

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

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

  787.       }

  788.       navigator.serviceWorker.getRegistration()

  789.         .then(function (registration) {

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

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

  792.               .then(navigator.serviceWorker.ready)

  793.               .then(function () {

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

  795.               })

  796.               .catch(console.error.bind(console))

  797.           } else {

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

  799.             sendLinks(selector)

  800.           }

  801.         })

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

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

  804.         sendLinks(selector)

  805.       })

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

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

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

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

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

  811. 

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

  813. 

  814.         }

  815.       })

  816.     })

  817.   } else {

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

  819.   }

  820. </script>