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/05/10/index.html

index.html 29KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810 
  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>Folie — 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/05/10/">

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

  456.   <time>Publié le 10 mai</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Un rythme intenable à être contraint de jouer sur un peu trop de terrains à la fois. Tout en gérant un décal(c)age horaire. Tout quitter et devenir coach effondrementaliste.</em></p>

  460. <hr />

  461. <p>J’ai enfin pu lire <a href="https://fr.wikipedia.org/wiki/Ailefroide,_altitude_3954">Ailefroide</a> sur les bons conseils de <a href="https://twitter.com/providenz">Laurent</a> et c’est chouette. Les montagnes me manquent par ici…</p>

  462. <p>En revanche, j’ai visionné <a href="https://www.imdb.com/title/tt6820256/">Arctic</a> et lorsqu’on est un peu familier de ces environnements froids il est difficile de rentrer dans l’histoire compte-tenu des incohérences. Dommage.</p>

  463. <hr />

  464. <blockquote>

  465. <p>So where does this leave Public Sans? By default, the work of US government employees is in the public domain. Since the GSA can’t adhere to the terms of the OFL, it seems to me that Public Sans must likewise be in the public domain. And because Public Sans incorporates Libre Franklin, it has necessarily dragged Libre Franklin into the public domain as well.</p>

  466. <p><cite><em><a href="https://tinyletter.com/mbutterick/letters/the-curious-case-of-public-sans-billionaire-s-typewriter-update">The curious case of Public Sans; Billionaire’s Typewriter update</a></em> (<a href="/david/cache/fe0aab6c44234efd6f3a6757e7f38169/">cache</a>)</cite></p>

  467. </blockquote>

  468. <p>Du bon <em>#CopyrightMadness</em> comme on les aime.</p>

  469. <hr />

  470. <blockquote>

  471. <p>Cet ordinateur avec lequel j’essaie de sympathiser - et qui en gros est mon patron - ne s’est pas présenté, je ne sais pas ce qu’il regarde dans mon téléphone, comment il me juge, comment il collecte mes données pour faire des statistiques de mes performances et quelles sont les répercussions de ces statistiques sur la quantité et la qualité du travail qu’il va me donner par la suite. Est-ce qu’il va me faire partir à l’autre bout de Paris pour faire une seule commande parce que je suis trop lent ?</p>

  472. <p><cite><em><a href="https://blogs.mediapart.fr/jerome-pimot/blog/020519/livreur-velo-lexploitation-la-cool">Livreur à vélo, l’exploitation à la cool</a></em> (<a href="/david/cache/8b2621de6f87715b8013a4237a504b0c/">cache</a>)</cite></p>

  473. </blockquote>

  474. <p>Esclavagisme assisté par ordinateur.</p>

  475. <hr />

  476. <p>Par l’intermédiaire du <a href="https://en.wikipedia.org/wiki/If_Day">If Day</a>, j’ai découvert les <a href="https://en.wikipedia.org/wiki/New_Order_(Nazism)#Hitler’s_plans_for_North_America">plans de Hitler pour l’Amérique du Nord</a> : de considérer les Premières Nations comme étant Aryennes pour obtenir leur support.</p>

  477. <p>Rétrospectivement je trouve cela assez fou.</p>

  478. <hr />

  479. <blockquote>

  480. <p>Let’s instead invest in many small and independent not-for-profit organisations and task them with building the ethical alternatives. Let’s get them to compete with each other while doing so. Let’s take what we know works from Silicon Valley (small organisations working iteratively, competing, and failing fast) and remove what is toxic: venture capital, exponential growth, and exits.</p>

  481. <p>Instead of startups, lets build stayups in Europe.</p>

  482. <p><cite><em><a href="https://ar.al/2019/05/02/slavery-2.0-and-how-to-avoid-it-a-practical-guide-for-cyborgs/">Slavery 2.0 and how to avoid it: a practical guide for cyborgs</a></em> (<a href="/david/cache/885c812a3156031e704ca62b5aa89b12/">cache</a>)</cite></p>

  483. </blockquote>

  484. <p>Et on pourrait appeler cela des « entreprises ». <em>#TraduisonsLes</em></p>

  485. <hr />

  486. <blockquote>

  487. <p>When we simply say <em>users want control</em> it’s giving up on understanding people’s specific desires. Still it’s not exactly wrong: it’s reasonable to assume people will use control to achieve their desires. But if, as technologists, we can’t map functionality to desire, it’s a bit of a stretch to imagine everyone else will figure it out on the fly.</p>

  488. <p><cite><em><a href="https://www.ianbicking.org/blog/2019/04/users-want-control-is-a-shrug.html">“Users want control” is a shoulder shrug</a></em> (<a href="/david/cache/8135e6506cf4f7b56c2acd99a877a091/">cache</a>)</cite></p>

  489. </blockquote>

  490. <p>Il faudra que je revienne sur ces notions de contrôle d’un côté et de <a href="https://www.affordance.info/mon_weblog/2019/05/viscosite-sociale.html">viscosité/friction</a> (<a href="/david/cache/eabd508b2f024897e2589a0b313c74bd/">cache</a>) de l’autre.</p>

  491. <p><em>Entre les deux : celui ou celle qui développe.</em></p>

  492. <hr />

  493. <blockquote>

  494. <p>À la fin, le constat que je fais de mes « histoires d’a » n’est pas très glorieux. Ce qui ressort de tout cela est bien ce « a ». Le préfixe « a- ». Celui qu’il faut bien distinguer d’un « anti ». C’est un préfixe qui retranche, qui ignore, qui méprise ou qui élude. Il n’est ni pour, ni contre. Que l’on soit pour ou contre quelque chose implique de considérer la chose en question. De lui accorder de l’importance, de la rendre intrinsèque. Qu’il s’agisse de l’embrasser et la soutenir ou de la combattre et la dénoncer. Ce « a- », lui qui m’est si précieux, permet d’éviter, de se défiler au lieu de soit subir, soit affronter. Il ne représente même pas un déni franc et vigoureux. Il n’est rien de plus qu’une misérable sourdine qu’on poserait sur un déni possible. Histoire de se mettre confortable dans les plus grandes largeurs possible. Tous ces « a- » en guise de protection. Contre les mauvaises choses. Mais contre les bonnes, également. Cela revient à se regarder dans un miroir tout en ignorant son propre reflet. Un dédain poli, par ignorance. Mon dédain quotidien. Ce truc sur lequel je me condamne à ne rien bâtir.</p>

  495. <p><cite><em><a href="https://nrkn.fr/blog/2019/05/09/les-histoires-d-a/">Les histoires d’a</a></em> (<a href="/david/cache/c323dcb4a952228855ffc7df8484b456/">cache</a>)</cite></p>

  496. </blockquote>

  497. <p>C’est fou comme il écrit bien Pep.</p>

  498. <hr />

  499. <p><em>Recomposed</em> par Max Richter. Découvert il y a quatre ans et je ne m’en suis toujours pas remis. <em>Music for 18 Musicians</em> de Steve Reich est incroyable aussi.</p>

  500. <p><em>À écouter jusqu’à la démence.</em></p>

  501. </article>

  502. 

  503. 

  504. <nav id="jumpto">

  505.   <p>

  506.     <a rel=prev href="/david/stream/2019/05/03/">← Sympathie</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/05/24/">Apaisement →</a>

  507.   </p>

  508. </nav>

  509. 

  510. <footer>

  511.   <div>

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

  513.     <p>

  514.       Bonjour/Hi!

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

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

  517.     </p>

  518.     <p>

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

  520.     </p>

  521.     

  522.       <p>

  523.         Les dernières publications hebdomadaires sont :

  524.       </p>

  525.       <ul class="with_columns">

  526.         

  527.           <li>

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

  529.           </li>

  530.         

  531.           <li>

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

  533.           </li>

  534.         

  535.           <li>

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

  537.           </li>

  538.         

  539.           <li>

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

  541.           </li>

  542.         

  543.           <li>

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

  545.           </li>

  546.         

  547.           <li>

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

  549.           </li>

  550.         

  551.           <li>

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

  553.           </li>

  554.         

  555.           <li>

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

  557.           </li>

  558.         

  559.           <li>

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

  561.           </li>

  562.         

  563.           <li>

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

  565.           </li>

  566.         

  567.           <li>

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

  569.           </li>

  570.         

  571.           <li>

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

  573.           </li>

  574.         

  575.           <li>

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

  577.           </li>

  578.         

  579.           <li>

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

  581.           </li>

  582.         

  583.           <li>

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

  585.           </li>

  586.         

  587.           <li>

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

  589.           </li>

  590.         

  591.           <li>

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

  593.           </li>

  594.         

  595.           <li>

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

  597.           </li>

  598.         

  599.           <li>

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

  601.           </li>

  602.         

  603.           <li>

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

  605.           </li>

  606.         

  607.           <li>

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

  609.           </li>

  610.         

  611.           <li>

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

  613.           </li>

  614.         

  615.           <li>

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

  617.           </li>

  618.         

  619.           <li>

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

  621.           </li>

  622.         

  623.           <li>

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

  625.           </li>

  626.         

  627.           <li>

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

  629.           </li>

  630.         

  631.           <li>

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

  633.           </li>

  634.         

  635.           <li>

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

  637.           </li>

  638.         

  639.           <li>

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

  641.           </li>

  642.         

  643.           <li>

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

  645.           </li>

  646.         

  647.           <li>

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

  649.           </li>

  650.         

  651.           <li>

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

  653.           </li>

  654.         

  655.           <li>

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

  657.           </li>

  658.         

  659.           <li>

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

  661.           </li>

  662.         

  663.           <li>

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

  665.           </li>

  666.         

  667.           <li>

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

  669.           </li>

  670.         

  671.           <li>

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

  673.           </li>

  674.         

  675.           <li>

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

  677.           </li>

  678.         

  679.           <li>

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

  681.           </li>

  682.         

  683.           <li>

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

  685.           </li>

  686.         

  687.           <li>

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

  689.           </li>

  690.         

  691.           <li>

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

  693.           </li>

  694.         

  695.           <li>

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

  697.           </li>

  698.         

  699.           <li>

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

  701.           </li>

  702.         

  703.           <li>

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

  705.           </li>

  706.         

  707.           <li>

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

  709.           </li>

  710.         

  711.           <li>

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

  713.           </li>

  714.         

  715.           <li>

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

  717.           </li>

  718.         

  719.           <li>

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

  721.           </li>

  722.         

  723.       </ul>

  724.     

  725.     <p>

  726.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  743.     </p>

  744.     <p>

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

  746.     </p>

  747.     <p>

  748.       Je ne traque pas ta navigation mais mon

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

  750.       conserve des logs d’accès.

  751.     </p>

  752.   </div>

  753. </footer>

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

  755.   ;(_ => {

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

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

  758.       e.preventDefault()

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

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

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

  762.     })

  763.   })()

  764. </script>

  765. 

  766.   <script>

  767.   /* Service workers */

  768.   if (navigator.serviceWorker) {

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

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

  771.       function sendLinks (selector) {

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

  773.           return link.getAttribute('href')

  774.         })

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

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

  777.       }

  778.       navigator.serviceWorker.getRegistration()

  779.         .then(function (registration) {

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

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

  782.               .then(navigator.serviceWorker.ready)

  783.               .then(function () {

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

  785.               })

  786.               .catch(console.error.bind(console))

  787.           } else {

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

  789.             sendLinks(selector)

  790.           }

  791.         })

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

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

  794.         sendLinks(selector)

  795.       })

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

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

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

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

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

  801.           

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

  803.           

  804.         }

  805.       })

  806.     })

  807.   } else {

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

  809.   }

  810. </script>