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

index.html 30KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807 
  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>Timelines — 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/07/23/">

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

  456.   <time>Publié le 23 juillet</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Réflexion sur les lignes de temps, de vie. J’ai un vieux truc pour mes <a href="/david/talks/">présentations</a> et je me pose pas mal de questions sur la généralisation d’une telle représentation, surtout après avoir vu <a href="https://kirk.is/timelines/">ces timelines</a>.</em></p>

  460. <p>Mais avant, la citation de la semaine :</p>

  461. <blockquote>

  462. <p>Substack is — to be <em>extremely</em> reductive — paywalled blogging software that sends out an email notification.</p>

  463. <p><cite><em><a href="https://craigmod.com/roden/028/">Fast Software, Paid Newsletters, Novels</a></em> (<a href="/david/cache/0e61c22644fe5ee4dd27f44be4d4ecd1/">cache</a>)</cite></p>

  464. </blockquote>

  465. <p>C’est la façon dont je considère les listes de diffusion actuelles. Une mode entre intimité et incompréhension. Cela ne m’empêche aucunement d’en apprécier quelques unes, une fois <a href="https://www.kill-the-newsletter.com/">converties en <strike>blog</strike> flux</a>.</p>

  466. <hr />

  467. <blockquote>

  468. <p>“Billionnaire” isn’t a qualification. It’s the description of a person who is hoarding more resources than they could use in 100 lifetimes while other people are starving. It’s the name for a human dragon sleeping on its pile of rubies and gold.</p>

  469. <p><cite>Via mastodon, il semblerait que le compte original ne soit plus accessible.</cite></p>

  470. </blockquote>

  471. <p>Est-ce qu’il faut vraiment être devenu milliardaire pour être dans cette position ? Est-ce que chaque choix dans le but d’établir un capital n’est pas déjà une façon de le subtiliser à d’autres ?</p>

  472. <blockquote>

  473. <p>Je vais le dire autrement : nous sommes en train d’abandonner la solution du pauvre pour la solution du riche. Le rêve ­rifkinien(1) d’avoir chacun son panneau et sa batterie tout en gardant à peu près le même niveau de consommation matérielle requiert de mettre 30 ou 40 fois plus d’argent sur la table pour y parvenir qu’en recourant aux centrales nucléaires que nous avons déjà. L’idée selon laquelle le nucléaire serait cher et les énergies renouvelables (ENR) pas chères ne correspond à aucun fait observable et augmente, selon moi, la vulnérabilité face à ce qui va se passer à l’avenir. </p>

  474. <p><cite><em><a href="http://www.socialter.fr/fr/module/99999672/834/jean_marc_jancovici__qleurope_est_en_dcroissance_nergtique_depuis_2007q">Jean-Marc Jancovici : « l’Europe est en décroissance ­énergétique depuis 2007 »</a></em> (<a href="/david/cache/80d3ead34359f058ced9a7d576fad44f/">cache</a>)</cite></p>

  475. </blockquote>

  476. <p>Je n’avais jamais par exemple pensé l’énergie en ce sens et au moment d’investir (le terme aurait dû me mettre la puce à l’oreille…) dans du solaire pour gagner en autonomie j’ai eu ce recul salutaire d’essayer de comprendre si ça pouvait passer à l’échelle. Il y a une difficulté à encourager du <a href="https://solar.lowtechmagazine.com/2016/05/how-to-go-off-grid-in-your-apartment.html">local expérimental</a> (<a href="/david/cache/6941291d7ecc05597de98d49e641d1da/">cache</a>) qui pourrait rapidement devenir élitiste et capitaliste en privant les autres des ressources nécessaires à sa reproduction.</p>

  477. <hr />

  478. <blockquote>

  479. <p>I’ve always liked to document experiences, and I have a thing for collections and completeness. I decided early that this redesign needed some kind of friendly ’museum of me’ as a way of introducing myself; less about my work and more about my life. The culture we surround ourselves with, the art that speaks to us, and the songs that soundtrack our lives — these things shape our identities. They speak volumes about who we are, and why the things we put into this world look or feel a certain way. There’s so much more to each of us than our professional achievements.</p>

  480. <p><cite><em><a href="https://colly.com/journal/timeline">Timeline</a></em> (<a href="/david/cache/9e00f323536ca62675b40000f757c06b/">cache</a>)</cite></p>

  481. </blockquote>

  482. <p>Chacun de nos échanges est une <em>timeline</em>, une publication sur un mur, des gazouillis, un agrégat de <em>stories</em>, des pouets, des courriels, des articles de blog. Ces 20 dernières années du Web n’ont été qu’une façon de les représenter. Il y a des choix pour chacun des items de ces lignes de vie. En tant que créateur, en tant qu’éditeur, en tant qu’hébergeur et en tant qu’audience. C’est l’équilibre de pouvoir entre ces entités qui rend la relation saine.</p>

  483. <p><em>Les licornes actuelles déstabilisent intentionnellement cette relation.</em></p>

  484. <hr />

  485. <blockquote>

  486. <p>L’association participe à la réflexion sur l’évolution du droit d’auteur et des licences associées : voir la <a href="http://contributivecommons.org/la-licence-contributive-commons/">Licence Contributive Commons</a> (<a href="/david/cache/d21ceba463236ad2cc2f1b451dfb81ee/">cache</a>) qui est un projet initié par l’association.</p>

  487. <p>Elle place ses contenus originaux sous une licence garantissant le partage du savoir selon des modalités visant à une réciprocité.</p>

  488. <p><cite><em><a href="http://semeoz.info/codesocial-de-semeoz/">Code social de Semeoz</a></em> (<a href="/david/cache/19e12f71b92331c5fcdb887f3fb5c923/">cache</a>)</cite></p>

  489. </blockquote>

  490. <p><a href="http://maiadereva.net/">Maïa</a> annonce la fin de <a href="http://semeoz.info/">Semeoz</a> (Observatoire des pratiques collaboratives et constructives) et nous invite à récupérer ce que l’on souhaite. Cela me pousse à m’interroger sur la pertinence d’une licence à réciprocité lorsque l’entité créatrice a été dissoute. Comment rester fidèle à une telle licence dans ces conditions ?</p>

  491. <hr />

  492. <blockquote>

  493. <p>While questioning is key to curiosity, it can be tricky to know what to ask. Here are some of my standbys:</p>

  494. <ul>

  495. <li>“Can you say that in more/different words?”</li>

  496. <li>“How did you come to that decision?”</li>

  497. <li>“Anything else I should know about?”</li>

  498. <li>“Whose land is this?”</li>

  499. <li>“Who’s missing or misrepresented?”</li>

  500. <li>“Who’s telling this story, and why?”</li>

  501. </ul>

  502. <p>There you have it—six questions for better, deeper living. A curious mind can become a caring mind—the more we know, the more we can appreciate a situation’s nuance and complexity.</p>

  503. <p><cite><em><a href="https://lucascherkewski.com/hit-and-miss/98-learning-questions/">Questions for learning</a></em> (<a href="/david/cache/50d50d4d4bfd0aed1ec1e8781d3bf7f5/">cache</a>)</cite></p>

  504. </blockquote>

  505. <p>Différentes questions pour <a href="https://oncletom.io/2019/07/20/niveaux-ecoute/">différents niveaux d’écoute</a> (<a href="/david/cache/92a1b430a0ea471685ef2591066d3a05/">cache</a>). Une façon d’orienter l’échange et donc la relation. Une façon aussi de raconter nos émotions en fonction de son interlocuteur·ice.</p>

  506. <p><em>Une timeline peut-elle être bi-directionnelle ?</em></p>

  507. <hr />

  508. <p>Il aura fallu quelques aiguilles d’acupuncture dans le dos pour percer un abcès psychologique latent. Ou alors c’est juste une question de coussin trop gros, auquel cas ça devient la série la plus stupide et ennuyeuse qui soit. </p>

  509. <p><em>Et coûteuse, à tous les niveaux. #painline</em></p>

  510. </article>

  511. 

  512. 

  513. <nav id="jumpto">

  514.   <p>

  515.     <a rel=prev href="/david/stream/2019/07/16/">← Écoute</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/07/30/">Exemplarité →</a>

  516.   </p>

  517. </nav>

  518. 

  519. <footer>

  520.   <div>

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

  522.     <p>

  523.       Bonjour/Hi!

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

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

  526.     </p>

  527.     <p>

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

  529.     </p>

  530.     

  531.       <p>

  532.         Les dernières publications hebdomadaires sont :

  533.       </p>

  534.       <ul class="with_columns">

  535.         

  536.           <li>

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

  538.           </li>

  539.         

  540.           <li>

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

  542.           </li>

  543.         

  544.           <li>

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

  546.           </li>

  547.         

  548.           <li>

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

  550.           </li>

  551.         

  552.           <li>

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

  554.           </li>

  555.         

  556.           <li>

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

  558.           </li>

  559.         

  560.           <li>

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

  562.           </li>

  563.         

  564.           <li>

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

  566.           </li>

  567.         

  568.           <li>

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

  570.           </li>

  571.         

  572.           <li>

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

  574.           </li>

  575.         

  576.           <li>

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

  578.           </li>

  579.         

  580.           <li>

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

  582.           </li>

  583.         

  584.           <li>

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

  586.           </li>

  587.         

  588.           <li>

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

  590.           </li>

  591.         

  592.           <li>

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

  594.           </li>

  595.         

  596.           <li>

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

  598.           </li>

  599.         

  600.           <li>

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

  602.           </li>

  603.         

  604.           <li>

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

  606.           </li>

  607.         

  608.           <li>

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

  610.           </li>

  611.         

  612.           <li>

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

  614.           </li>

  615.         

  616.           <li>

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

  618.           </li>

  619.         

  620.           <li>

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

  622.           </li>

  623.         

  624.           <li>

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

  626.           </li>

  627.         

  628.           <li>

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

  630.           </li>

  631.         

  632.           <li>

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

  634.           </li>

  635.         

  636.           <li>

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

  638.           </li>

  639.         

  640.           <li>

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

  642.           </li>

  643.         

  644.           <li>

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

  646.           </li>

  647.         

  648.           <li>

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

  650.           </li>

  651.         

  652.           <li>

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

  654.           </li>

  655.         

  656.           <li>

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

  658.           </li>

  659.         

  660.           <li>

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

  662.           </li>

  663.         

  664.           <li>

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

  666.           </li>

  667.         

  668.           <li>

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

  670.           </li>

  671.         

  672.           <li>

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

  674.           </li>

  675.         

  676.           <li>

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

  678.           </li>

  679.         

  680.           <li>

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

  682.           </li>

  683.         

  684.           <li>

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

  686.           </li>

  687.         

  688.           <li>

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

  690.           </li>

  691.         

  692.           <li>

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

  694.           </li>

  695.         

  696.           <li>

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

  698.           </li>

  699.         

  700.           <li>

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

  702.           </li>

  703.         

  704.           <li>

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

  706.           </li>

  707.         

  708.           <li>

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

  710.           </li>

  711.         

  712.           <li>

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

  714.           </li>

  715.         

  716.           <li>

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

  718.           </li>

  719.         

  720.       </ul>

  721.     

  722.     <p>

  723.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  740.     </p>

  741.     <p>

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

  743.     </p>

  744.     <p>

  745.       Je ne traque pas ta navigation mais mon

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

  747.       conserve des logs d’accès.

  748.     </p>

  749.   </div>

  750. </footer>

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

  752.   ;(_ => {

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

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

  755.       e.preventDefault()

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

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

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

  759.     })

  760.   })()

  761. </script>

  762. 

  763.   <script>

  764.   /* Service workers */

  765.   if (navigator.serviceWorker) {

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

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

  768.       function sendLinks (selector) {

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

  770.           return link.getAttribute('href')

  771.         })

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

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

  774.       }

  775.       navigator.serviceWorker.getRegistration()

  776.         .then(function (registration) {

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

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

  779.               .then(navigator.serviceWorker.ready)

  780.               .then(function () {

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

  782.               })

  783.               .catch(console.error.bind(console))

  784.           } else {

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

  786.             sendLinks(selector)

  787.           }

  788.         })

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

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

  791.         sendLinks(selector)

  792.       })

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

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

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

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

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

  798.           

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

  800.           

  801.         }

  802.       })

  803.     })

  804.   } else {

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

  806.   }

  807. </script>