davidbgk
/
larlet-fr-david
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
15 コミット
1 ブランチ
ツリー: cb5ea599a9
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'cb5ea599a9' から
${ noResults }
larlet-fr-david/david/stream/2019/04/05/index.html

index.html 28KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Définitions — 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/04/05/">

  30. 

  31. <style>

  32. /* http://meyerweb.com/eric/tools/css/reset/ */

  33. html, body, div, span,

  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  35. a, abbr, address, big, cite, code,

  36. del, dfn, em, img, ins,

  37. small, strike, strong, tt, var,

  38. dl, dt, dd, ol, ul, li,

  39. fieldset, form, label, legend,

  40. table, caption, tbody, tfoot, thead, tr, th, td,

  41. article, aside, canvas, details, embed,

  42. figure, figcaption, footer, header, hgroup,

  43. menu, nav, output, ruby, section, summary,

  44. time, mark, audio, video {

  45.   margin: 0;

  46.   padding: 0;

  47.   border: 0;

  48.   font-size: 100%;

  49.   font: inherit;

  50.   vertical-align: baseline;

  51. }

  52. /* HTML5 display-role reset for older browsers */

  53. article, aside, details, figcaption, figure,

  54. footer, header, hgroup, menu, nav, section { display: block; }

  55. body { line-height: 1; }

  56. blockquote, q { quotes: none; }

  57. blockquote:before, blockquote:after,

  58. q:before, q:after {

  59.   content: '';

  60.   content: none;

  61. }

  62. table {

  63.   border-collapse: collapse;

  64.   border-spacing: 0;

  65. }

  66. 

  67. /* http://practicaltypography.com/equity.html */

  68. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  69. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  70. @font-face {

  71.   font-family: 'EquityTextB';

  72.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  73.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  74.   font-weight: 300;

  75.   font-style: normal;

  76.   font-display: swap;

  77. }

  78. @font-face {

  79.   font-family: 'EquityTextB';

  80.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  81.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  82.   font-weight: 300;

  83.   font-style: italic;

  84.   font-display: swap;

  85. }

  86. @font-face {

  87.   font-family: 'EquityTextB';

  88.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  89.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  90.   font-weight: 700;

  91.   font-style: normal;

  92.   font-display: swap;

  93. }

  94. 

  95. @font-face {

  96.   font-family: 'ConcourseT3';

  97.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  98.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  99.   font-weight: 300;

  100.   font-style: normal;

  101.   font-display: swap;

  102. }

  103. 

  104. 

  105. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  106. body {

  107.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  108.   font-family: "EquityTextB", Palatino, serif;

  109.   background-color: #f0f0ea;

  110.   color: #07486c;

  111.   font-kerning: normal;

  112.   -moz-osx-font-smoothing: grayscale;

  113.   -webkit-font-smoothing: subpixel-antialiased;

  114.   text-rendering: optimizeLegibility;

  115.   font-variant-ligatures: common-ligatures contextual;

  116.   font-feature-settings: "kern", "liga", "clig", "calt";

  117. }

  118. pre, code, kbd, samp, var, tt {

  119.   font-family: 'TriplicateT4c', monospace;

  120. }

  121. em {

  122.   font-style: italic;

  123.   color: #323a45;

  124. }

  125. strong {

  126.   font-weight: bold;

  127.   color: black;

  128. }

  129. nav {

  130.   background-color: #323a45;

  131.   color: #f0f0ea;

  132.   display: flex;

  133.   justify-content: space-around;

  134.   padding: 1rem .5rem;

  135. }

  136.   nav:last-child {

  137.     border-bottom: 1vh solid #2d7474;

  138.   }

  139.   nav a {

  140.     color: #f0f0ea;

  141.   }

  142.   nav abbr {

  143.     border-bottom: 1px dotted white;

  144.   }

  145. 

  146. h1 {

  147.   border-top: 1vh solid #2d7474;

  148.   border-bottom: .2vh dotted #2d7474;

  149.   background-color: #e3e1e1;

  150.   color: #323a45;

  151.   text-align: center;

  152.   padding: 5rem 0 4rem 0;

  153.   width: 100%;

  154.   font-family: 'ConcourseT3';

  155.   display: flex;

  156.   flex-direction: column;

  157. }

  158.   h1.single {

  159.     padding-bottom: 10rem;

  160.   }

  161.   h1 span {

  162.     position: absolute;

  163.     top: 1vh;

  164.     left: 20%;

  165.     line-height: 0;

  166.   }

  167.     h1 span a {

  168.       line-height: 1.7;

  169.       padding: 1rem 1.2rem .6rem 1.2rem;

  170.       border-radius: 0 0 6% 6%;

  171.       background: #2d7474;

  172.       font-size: 1.3rem;

  173.       color: white;

  174.       text-decoration: none;

  175.     }

  176. h2 {

  177.   margin: 4rem 0 1rem;

  178.   border-top: .2vh solid #2d7474;

  179.   padding-top: 1vh;

  180. }

  181. h3 {

  182.   text-align: center;

  183.   margin: 3rem 0 .75em;

  184. }

  185. hr {

  186.   height: .4rem;

  187.   width: .4rem;

  188.   border-radius: .4rem;

  189.   background: #07486c;

  190.   margin: 2.5rem auto;

  191. }

  192. time {

  193.   display: bloc;

  194.   margin-left: 0 !important;

  195. }

  196. ul, ol {

  197.   margin: 2rem;

  198. }

  199. ul {

  200.   list-style-type: square;

  201. }

  202. a {

  203.   text-decoration-skip-ink: auto;

  204.   text-decoration-thickness: 0.05em;

  205.   text-underline-offset: 0.09em;

  206. }

  207. article {

  208.   max-width: 50rem;

  209.   display: flex;

  210.   flex-direction: column;

  211.   margin: 2rem auto;

  212. }

  213.   article.single {

  214.     border-top: .2vh dotted #2d7474;

  215.     margin: -6rem auto 1rem auto;

  216.     background: #f0f0ea;

  217.     padding: 2rem;

  218.   }

  219.   article p:last-child {

  220.     margin-bottom: 1rem;

  221.   }

  222. p {

  223.   padding: 0 .5rem;

  224.   margin-left: 3rem;

  225. }

  226.   p + p,

  227.   figure + p {

  228.     margin-top: 2rem;

  229.   }

  230. 

  231. blockquote {

  232.   background-color: #e3e1e1;

  233.   border-left: .5vw solid #2d7474;

  234.   display: flex;

  235.   flex-direction: column;

  236.   align-items: center;

  237.   padding: 1rem;

  238.   margin: 1.5rem;

  239. }

  240.   blockquote cite {

  241.     font-style: italic;

  242.   }

  243.   blockquote p {

  244.     margin-left: 0;

  245.   }

  246. 

  247. figure {

  248.   border-top: .2vh solid #2d7474;

  249.   background-color: #e3e1e1;

  250.   text-align: center;

  251.   padding: 1.5rem 0;

  252.   margin: 1rem 0 0;

  253.   font-size: 1.5rem;

  254.   width: 100%;

  255. }

  256.   figure img {

  257.     max-width: 250px;

  258.     max-height: 250px;

  259.     border: .5vw solid #323a45;

  260.     padding: 1px;

  261.   }

  262. figcaption {

  263.   padding: 1rem;

  264.   line-height: 1.4;

  265. }

  266. aside {

  267.   display: flex;

  268.   flex-direction: column;

  269.   background-color: #e3e1e1;

  270.   padding: 1rem 0;

  271.   border-bottom: .2vh solid #07486c;

  272. }

  273.   aside p {

  274.     max-width: 50rem;

  275.     margin: 0 auto;

  276.   }

  277. 

  278. /* https://fvsch.com/code/css-locks/ */

  279. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  280.   font-size: 1rem;

  281.   line-height: calc( 1.5em + 0.2 * 1rem );

  282. }

  283. h1 {

  284.   font-size: 1.9rem;

  285.   line-height: calc( 1.2em + 0.2 * 1rem );

  286. }

  287. h2 {

  288.   font-size: 1.6rem;

  289.   line-height: calc( 1.3em + 0.2 * 1rem );

  290. }

  291. h3 {

  292.   font-size: 1.35rem;

  293.   line-height: calc( 1.4em + 0.2 * 1rem );

  294. }

  295. @media (min-width: 20em) {

  296.   /* The (100vw - 20rem) / (50 - 20) part

  297.      resolves to 0-1rem, depending on the

  298.      viewport width (between 20em and 50em). */

  299.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  300.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  301.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  302.     margin-left: 0;

  303.   }

  304.   h1 {

  305.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  306.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  307.   }

  308.   h2 {

  309.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  310.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  311.   }

  312.   h3 {

  313.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  314.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  315.   }

  316. }

  317. @media (min-width: 50em) {

  318.   /* The right part of the addition *must* be a

  319.      rem value. In this example we *could* change

  320.      the whole declaration to font-size:2.5rem,

  321.      but if our baseline value was not expressed

  322.      in rem we would have to use calc. */

  323.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  324.     font-size: calc( 1rem + .6 * 1rem );

  325.     line-height: 1.5em;

  326.   }

  327.   p, li, pre, details {

  328.     margin-left: 3rem;

  329.   }

  330.   h1 {

  331.     font-size: calc( 1.9rem + 1.5 * 1rem );

  332.     line-height: 1.2em;

  333.   }

  334.   h2 {

  335.     font-size: calc( 1.5rem + 1.5 * 1rem );

  336.     line-height: 1.3em;

  337.   }

  338.   h3 {

  339.     font-size: calc( 1.35rem + 1.5 * 1rem );

  340.     line-height: 1.4em;

  341.   }

  342.   figure img {

  343.     max-width: 500px;

  344.     max-height: 500px;

  345.   }

  346. }

  347. 

  348. figure.unsquared {

  349.   margin-bottom: 1.5rem;

  350. }

  351.   figure.unsquared img {

  352.     height: inherit;

  353.   }

  354. 

  355. 

  356. 

  357. @media print {

  358.   body { font-size: 100%; }

  359.   a:after { content: " (" attr(href) ")"; }

  360.   a, a:link, a:visited, a:after {

  361.     text-decoration: underline;

  362.     text-shadow: none !important;

  363.     background-image: none !important;

  364.     background: white;

  365.     color: black;

  366.   }

  367.   abbr[title] { border-bottom: 0; }

  368.   abbr[title]:after { content: " (" attr(title) ")"; }

  369.   img { page-break-inside: avoid; }

  370.   @page { margin: 2cm .5cm; }

  371.   h1, h2, h3 { page-break-after: avoid; }

  372.   p3 { orphans: 3; widows: 3; }

  373.   img {

  374.     max-width: 250px !important;

  375.     max-height: 250px !important;

  376.   }

  377.   nav, aside { display: none; }

  378. }

  379. 

  380. ul.with_columns {

  381.   column-count: 1;

  382. }

  383. @media (min-width: 20em) {

  384.   ul.with_columns {

  385.     column-count: 2;

  386.   }

  387. }

  388. @media (min-width: 50em) {

  389.   ul.with_columns {

  390.     column-count: 3;

  391.   }

  392. }

  393. ul.with_two_columns {

  394.   column-count: 1;

  395. }

  396. @media (min-width: 20em) {

  397.   ul.with_two_columns {

  398.     column-count: 1;

  399.   }

  400. }

  401. @media (min-width: 50em) {

  402.   ul.with_two_columns {

  403.     column-count: 2;

  404.   }

  405. }

  406. 

  407. .gallery {

  408.   display: flex;

  409.   flex-wrap: wrap;

  410.   justify-content: space-around;

  411. }

  412.   .gallery figure img {

  413.     margin-left: 1rem;

  414.     margin-right: 1rem;

  415.   }

  416.   .gallery figure figcaption {

  417.     font-family: 'ConcourseT3'

  418.   }

  419. 

  420. footer {

  421.   font-family: 'ConcourseT3';

  422.   display: flex;

  423.   flex-direction: column;

  424.   border-top: 3px solid white;

  425.   padding: 4rem 0;

  426.   background-color: #07486c;

  427.   color: white;

  428. }

  429.   footer > * {

  430.     max-width: 50rem;

  431.     margin: 0 auto;

  432.   }

  433.   footer a {

  434.     color: #f1c40f;

  435.   }

  436.   footer .avatar {

  437.     width: 200px;

  438.     height: 200px;

  439.     border-radius: 50%;

  440.     float: left;

  441.     -webkit-shape-outside: circle();

  442.     shape-outside: circle();

  443.     margin-right: 2rem;

  444.     padding: 2px 5px 5px 2px;

  445.     background: white;

  446.     border-left: 1px solid #f1c40f;

  447.     border-top: 1px solid #f1c40f;

  448.     border-right: 5px solid #f1c40f;

  449.     border-bottom: 5px solid #f1c40f;

  450.   }

  451. </style>

  452. 

  453. <h1 class="single">

  454.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  455.   Définitions

  456.   <time>Publié le 5 avril</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Une semaine rythmée par l’exploration de nouveaux lieux de vie. Quitter le plateau et ses montréalisiens pour lequel j’entretiens une relation d’amour-haine. Envisager diverses options, divers choix de vie. Se rappeler que c’est un luxe d’avoir ces choix.</em></p>

  460. <blockquote>

  461. <p>Among the reasons invoked by landlords to reject the application of future tenants, according to the people that responded to me; no couples, no roommates, no children, no animals, no foreigners, and no students. There are even people who said they have been refused an apartment because their job was too recent, or because they did not want to share personal information.</p>

  462. <p><cite><em><a href="https://www.vice.com/en_ca/article/nexppq/even-in-montreal-its-becoming-harder-to-find-an-apartment">Even in Montreal, It’s Becoming Harder to Find an Apartment</a></em> (<a href="/david/cache/96625442246b7e90c3e1dc20a771e2ff/">cache</a>)</cite></p>

  463. </blockquote>

  464. <p>En tant que privilégié, il est assez rare que je subisse des discriminations <em>a priori</em>, juste par mon état familial ou mon pays de naissance. Et même dans ces cas là, j’ai bien conscience qu’il s’agit de problèmes de riche qui me font relativiser considérant ce que subissent et ressentent d’autres personnes au quotidien, depuis leur naissance. Dans quelle mesure est-ce que ma culture se définit comme étant tout ce qui <em>n’est pas</em> accepté par celles des autres ? Est-ce que je dois forcément me définir <em>via</em> les peurs que je suscite ?</p>

  465. <blockquote>

  466. <p>And yet much of that history seems to be lost already. Thousands of sensors were installed throughout Biosphere 2 to harvest data, but in his recent book, “Pushing Our Limits,” the Biospherian Mark Nelson says that only a small fraction of that data have been analyzed and published. When Dr. Nelson asked the University of Arizona about the rest, he was told the university didn’t have it. “It’s shameful to simply accept that these important data are gone,” he wrote.</p>

  467. <p><cite><em><a href="https://www.nytimes.com/2019/03/29/sunday-review/biosphere-2-climate-change.html">The Lost History of One of the World’s Strangest Science Experiments</a></em> (<a href="/david/cache/6c734792866219036818636e2af93e65/">cache</a>)</cite></p>

  468. </blockquote>

  469. <p>Une histoire parmi tant d’autres de données perdues. Peut-être que c’est la meilleure définition de l’Histoire : une donnée qui se perd et que l’on continue à raconter. Comme si l’analytique avait besoin d’être humanisé pour faire partie de l’imaginaire collectif. Comme si le vide béant laissé là était trop douloureux pour ne pas le romancer et se l’approprier par le récit. On conserve si peu de traces des non-évènements qui constituent pourtant la majorité de nos vies.</p>

  470. <blockquote>

  471. <p>When Britain colonised Australia in the 18th and 19th Century, it drew on the legal doctrine now known as <em>terra nullius</em> – nobody’s land – to justify its conquest and treat the indigenous population as if they didn’t exist or have any claims on the land. Today our attitude is one of <em>tempus nullius</em>. The future is an “empty time”, an unclaimed territory that is similarly devoid of inhabitants. Like the distant realms of empire, it is ours for the taking.</p>

  472. <p><cite><em><a href="http://www.bbc.com/future/story/20190318-can-we-reinvent-democracy-for-the-long-term">Why we need to reinvent democracy for the long-term</a></em> (<a href="/david/cache/44f0cb47043f0627df9ccfb4d8227922/">cache</a>)</cite></p>

  473. </blockquote>

  474. <p>Lorsque l’espace n’est plus colonisable, c’est le temps qui le devient. Laisser sa trace partout, en tout temps. Mégal-homme-anes en lutte désespérée contre une vie éphémère. Une fois l’humanité éteinte, nos traces temporelles ne seront que nos déchets. C’est peut-être l’ultime but de la science : obtenir des déchets pérennes pour laisser une trace. « On était là, pas pour longtemps, mais on espère que vous vous souviendrez de nous. » La bouteille en plastique jetée à la mer prend soudain un tout autre sens.</p>

  475. <blockquote>

  476. <p>Ce temps où j’invente mon avenir disparait au profit d’un temps tout immergé dans le présent, lui-même vidé par la déréalisation qu’il subit tant il ne ressortit pas à de l’expérience. Pour se développer, l’individuation a besoin non seulement de temps, mais de définir l’objet même de ce à quoi elle passe son temps. C’est là une lutte quotidienne de ne pas se laisser confisquer le temps propre par autrui ou par tout phénomène exogène. Plus grave encore est la certitude grandissant dans nos cerveaux chloroformés que le temps n’est que dépersonnalisé, comme s’il était une entité chérubinique, purement abstraite, insaisissable. Le temps, c’est seulement ce qu’on en fait. Et Anders de revenir sur ce temps passé devant l’écran, à s’anesthésier l’esprit.</p>

  477. <p><cite><em>Les irremplaçables</em>, <a href="http://www.espritcivique.org/index/wp-content/uploads/2016/01/Prologue-_-les-irremplacables.pdf">Prologue</a> (<a href="/static/david/stream/cynthia-fleury-les-irremplacables-prologue.pdf">cache</a>, PDF 500 Ko), Cynthia Fleury</cite></p>

  478. </blockquote>

  479. <p>Cela fait un mois complet que je n’ai plus pratiqué aucune activité physique. Il s’agit d’un manque important à ma santé, à la fois physique et mentale. Et à ma capacité d’avoir un rapport à l’autre — et donc à moi — qui soit apaisé. Je commence à mieux comprendre l’expression « prendre son mal en patience ».</p>

  480. </article>

  481. 

  482. 

  483. <nav id="jumpto">

  484.   <p>

  485.     <a rel=prev href="/david/stream/2019/03/29/">← Acceptation</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/04/12/">Péremption →</a>

  486.   </p>

  487. </nav>

  488. 

  489. <footer>

  490.   <div>

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

  492.     <p>

  493.       Bonjour/Hi!

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

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

  496.     </p>

  497.     <p>

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

  499.     </p>

  500.     

  501.       <p>

  502.         Les dernières publications hebdomadaires sont :

  503.       </p>

  504.       <ul class="with_columns">

  505.         

  506.           <li>

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

  508.           </li>

  509.         

  510.           <li>

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

  512.           </li>

  513.         

  514.           <li>

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

  516.           </li>

  517.         

  518.           <li>

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

  520.           </li>

  521.         

  522.           <li>

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

  524.           </li>

  525.         

  526.           <li>

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

  528.           </li>

  529.         

  530.           <li>

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

  532.           </li>

  533.         

  534.           <li>

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

  536.           </li>

  537.         

  538.           <li>

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

  540.           </li>

  541.         

  542.           <li>

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

  544.           </li>

  545.         

  546.           <li>

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

  548.           </li>

  549.         

  550.           <li>

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

  552.           </li>

  553.         

  554.           <li>

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

  556.           </li>

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.       </ul>

  691.     

  692.     <p>

  693.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  710.     </p>

  711.     <p>

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

  713.     </p>

  714.     <p>

  715.       Je ne traque pas ta navigation mais mon

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

  717.       conserve des logs d’accès.

  718.     </p>

  719.   </div>

  720. </footer>

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

  722.   ;(_ => {

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

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

  725.       e.preventDefault()

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

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

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

  729.     })

  730.   })()

  731. </script>

  732. 

  733.   <script>

  734.   /* Service workers */

  735.   if (navigator.serviceWorker) {

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

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

  738.       function sendLinks (selector) {

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

  740.           return link.getAttribute('href')

  741.         })

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

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

  744.       }

  745.       navigator.serviceWorker.getRegistration()

  746.         .then(function (registration) {

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

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

  749.               .then(navigator.serviceWorker.ready)

  750.               .then(function () {

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

  752.               })

  753.               .catch(console.error.bind(console))

  754.           } else {

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

  756.             sendLinks(selector)

  757.           }

  758.         })

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

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

  761.         sendLinks(selector)

  762.       })

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

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

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

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

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

  768.           

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

  770.           

  771.         }

  772.       })

  773.     })

  774.   } else {

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

  776.   }

  777. </script>