davidbgk
/
larlet-fr-david
Seguir 1
Destacar 0
Fork 0
Código Lanzamientos 0 Actividad
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.
228 Commits
1 Rama
Árbol: 488f7fdd11
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '488f7fdd11'
${ noResults }
larlet-fr-david/david/stream/2019/03/01/index.html

index.html 29KB
Original Blame Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797 
  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>Journaux — 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/03/01/">

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

  456.   <time>Publié le 1 mars</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>J’ai rererelu <a href="https://fr.wikipedia.org/wiki/Le_Grand_M%C3%A9chant_Renard">Le grand méchant renard</a> et c’est trop bien de pouvoir partager des lectures saines à plusieurs niveaux de compréhension. Il faudrait que je détaille ce que j’entends par sain dans ce contexte.</em></p>

  460. <blockquote>

  461. <p>But there’s still plenty left. And I certainly wonder whether with all the technology we now have, more could be automated, or delegated to machines. Perhaps all that data I’ve collected on myself will one day let one basically just built a “bot of me”. Having seen so many of my emails—and being able to look at all my files and personal analytics—maybe it’s actually possible to predict how I’d respond to any particular question.</p>

  462. <p><cite><em><a href="https://blog.stephenwolfram.com/2019/02/seeking-the-productive-life-some-details-of-my-personal-infrastructure/">Seeking the Productive Life: Some Details of My Personal Infrastructure</a></em> (<a href="/david/cache/b575f1ff37d73ad1daddb682de8dd784/">cache</a>)</cite></p>

  463. </blockquote>

  464. <p>Article passionnant de Stephen Wolfram sur sa façon de travailler et de stocker les choses. Quand je dis passionnant c’est pour le chemin que cela me montre et que je ne veux surtout <a href="/david/blog/2013/souffrance-plaisir/">pas emprunter</a>. Lorsque je vois des personnes comme <a href="https://aaronparecki.com/">Aaron Parecki</a> partager autant de données (sommeil, localisation, voyages, nourriture, boisson, etc), j’ai l’impression qu’il y a une motivation sous-jacente d’ordre <a href="https://fr.wikipedia.org/wiki/George_Mallory">Mallory</a>-esque : parce qu’elles sont là.</p>

  465. <p><em>Dans quelle mesure est-ce que cela se rapproche d’un <a href="http://www.jcdardart.net/index.php?article11/jouissance-et-capitalisme-des-mort-vivants-entre-psychanalyse-et-economie-politique-ii">capitalisme de la donnée</a> (<a href="/david/cache/ebb3b367810e7a8dba723d9c0a932cf3/">cache</a>), une accumulation sans jouissance ? — Cette fin d’article &lt;3</em></p>

  466. <p>Ce que je retiens notamment de la façon de s’organiser de Stephen Wolfram, c’est le fait de tout organiser par carnets et c’est une chose qui me trotte en tête depuis un moment. Une façon d’agencer sa pensée et ses activités puis de pouvoir les redistribuer de manière pertinente en les agrégeant et/ou en les partageant. Un truc à l’intersection du réseau social, de la prise de note et de la carte mentale (rien que ça). Pour que ça soit vraiment un <em>vaporware</em> il suffirait que j’ajoute la possibilité d’agréger celles des autres…</p>

  467. <blockquote>

  468. <p>The boy kings of Silicon Valley love a good algorithm—they’ve designed some great ones over the years. But there are problems even the best math can’t solve. There are times when you physically have to walk over to a server and pull the plug. I get why they want an algorithm to do it—lack of accountability. Intentionally pulling the plug on someone who’s trolling women on your service is a decision. It requires agency, leadership, and a point of view. But should that troll get caught in an algorithm? Well, that’s a different matter. There was no intent to specifically get rid of that person. A good algorithm is the equivalent of breaking up with someone over a text message and then turning your phone off. It’s cowardly. Good leaders should aspire to have their fingerprints all over hard decisions.</p>

  469. <p><cite><em><a href="https://monteiro.substack.com/p/good-news">Good news!</a></em> (<a href="/david/cache/59ebc5c5d2325856df1ac97f6d5f8853/">cache</a>)</cite></p>

  470. </blockquote>

  471. <p>En parlant de données, on peut observer comment <a href="https://blog.jonlu.ca/posts/experiments-and-growth-hacking">les licornes jouent avec les nôtres</a> (<a href="/david/cache/e17eedd1ba5b82341c39695cd3c84723/">cache</a>). Si tout cela doit servir de base d’apprentissage pour des algorithmes, tenter de fuir cette collecte laisse la place à une autre culture, <a href="https://www.affordance.info/mon_weblog/2019/02/la-moderation-est-une-ponctuation.html">une autre ponctuation</a> (<a href="/david/cache/d001d5ea62a121f9c794dde7d7da0325/">cache</a>).</p>

  472. <p><em>L’absence (intentionnelle) de données signifie-t-elle l’absence de lutte ?</em></p>

  473. <blockquote>

  474. <p>Ce n’est pas seulement dans les pays ravagés par la guerre qu’il faut apprendre à vivre dans les ruines. Car les ruines se rapprochent et nous enserrent de toute part, des sites industriels aux paysages naturels dévastés. Mais l’erreur serait de croire que l’on se contente d’y survivre.</p>

  475. <p>Dans les ruines prolifèrent en effet de nouveaux mondes qu’Anna Tsing a choisi d’explorer en suivant l’odyssée étonnante d’un mystérieux champignon qui ne pousse que dans les forêts détruites.</p>

  476. <p><cite><em><a href="https://www.editionsladecouverte.fr/catalogue/index-Le_champignon_de_la_fin_du_monde-9782359251364.html">Le champignon de la fin du monde</a></em> (<a href="/david/cache/0bc37cc4c13212ae125cd6d239291263/">cache</a>)</cite></p>

  477. </blockquote>

  478. <p>Il faut que je trouve ce livre. Ça me rappelle que je n’arrive pas à écrire quelque chose de plus conséquent ici. Pas sûr de savoir si c’est une bonne chose ou pas… à sur-réfléchir, je sous-agis.</p>

  479. <p><em>Mais ne serait-ce pas l’objectif en fait ?</em></p>

  480. <blockquote>

  481. <p>“oh, are you the guy with the orange website?”</p>

  482. <p>“Why, yes I am.”</p>

  483. <p><cite><em><a href="http://bradfrost.com/blog/post/write-on-your-own-website/">Write on your own website</a></em> (<a href="/david/cache/e48fafd147f4483c551da036d392e829/">cache</a>)</cite></p>

  484. </blockquote>

  485. <p>Envie de couleurs pour cet espace. Qu’est-ce que cela signifie pour mon état d’esprit actuel ? mon identité numérique future ? (ouh le gros mot.)</p>

  486. <p>Vous vous rappelez de ma <a href="/david/stream/2019/01/18/">définition de l’agilité</a> ? Et bien pour aller plus loin, je pense que les agilistes sont des personnes ayant pris conscience d’un (de leurs) défaut(s) de communication. Les parenthèses sont importantes.</p>

  487. <p><em>Bon et sinon, je commence <a href="http://www.bikepacking.com/plog/breakfast-with-muskox-film/">à bien m’impatienter</a> (<a href="/david/cache/4769d145b21f418532af646960fbff9d/">cache</a>) que la neige fonde !</em></p>

  488. </article>

  489. 

  490. 

  491. <nav id="jumpto">

  492.   <p>

  493.     <a rel=prev href="/david/stream/2019/02/22/">← Écriture</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/03/08/">Lecture →</a>

  494.   </p>

  495. </nav>

  496. 

  497. <footer>

  498.   <div>

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

  500.     <p>

  501.       Bonjour/Hi!

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

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

  504.     </p>

  505.     <p>

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

  507.     </p>

  508.     

  509.       <p>

  510.         Les dernières publications hebdomadaires sont :

  511.       </p>

  512.       <ul class="with_columns">

  513.         

  514.           <li>

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

  516.           </li>

  517.         

  518.           <li>

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

  520.           </li>

  521.         

  522.           <li>

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

  524.           </li>

  525.         

  526.           <li>

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

  528.           </li>

  529.         

  530.           <li>

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

  532.           </li>

  533.         

  534.           <li>

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

  536.           </li>

  537.         

  538.           <li>

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

  540.           </li>

  541.         

  542.           <li>

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

  544.           </li>

  545.         

  546.           <li>

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

  548.           </li>

  549.         

  550.           <li>

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

  552.           </li>

  553.         

  554.           <li>

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

  556.           </li>

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.       </ul>

  711.     

  712.     <p>

  713.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  730.     </p>

  731.     <p>

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

  733.     </p>

  734.     <p>

  735.       Je ne traque pas ta navigation mais mon

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

  737.       conserve des logs d’accès.

  738.     </p>

  739.   </div>

  740. </footer>

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

  742.   ;(_ => {

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

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

  745.       e.preventDefault()

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

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

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

  749.     })

  750.   })()

  751. </script>

  752. 

  753.   <script>

  754.   /* Service workers */

  755.   if (navigator.serviceWorker) {

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

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

  758.       function sendLinks (selector) {

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

  760.           return link.getAttribute('href')

  761.         })

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

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

  764.       }

  765.       navigator.serviceWorker.getRegistration()

  766.         .then(function (registration) {

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

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

  769.               .then(navigator.serviceWorker.ready)

  770.               .then(function () {

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

  772.               })

  773.               .catch(console.error.bind(console))

  774.           } else {

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

  776.             sendLinks(selector)

  777.           }

  778.         })

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

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

  781.         sendLinks(selector)

  782.       })

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

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

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

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

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

  788.           

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

  790.           

  791.         }

  792.       })

  793.     })

  794.   } else {

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

  796.   }

  797. </script>