davidbgk
/
larlet-fr-david
關註 1
收藏 0
複製 0
程式碼 版本發佈 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.
244 Commit
1 分支
目錄樹: f16aada5e3
分支列表 標籤列表
${ item.name }
Create branch ${ searchTerm }
from 'f16aada5e3'
${ noResults }
larlet-fr-david/david/blog/2013/diete-tweets/index.html

index.html 30KB
原始文件 Blame 文件歷史

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821 
  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>Diète de tweets — 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/blog/2013/diete-tweets/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Rien de mieux pour découvrir à quel point cette addiction s’était développée au cours des années." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Rien de mieux pour découvrir à quel point cette addiction s’était développée au cours des années." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Diète de tweets" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/diete-tweets/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Diète de tweets

  468.   <time>Publié le 15 juillet 2013</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>The side affect of owning your owning content and controlling what you do with it, is that it become much more shareable. You don’t have to have a Facebook or Google+ account to read this post. It is freely shared and anyone can read it. I can archive it and access it 20 years from now, because it is a portable format (at least it will be when I am done).</p>

  473. <p><cite><em><a href="http://elroyjetson.org/blog/declaration-of-content-independence">Declaration of Content Independence</a></em>, James King</cite></p>

  474. </blockquote>

  475. <p>J'ai récemment arrêté de <a href="https://twitter.com/davidbgk">tweeter</a> pendant 3 semaines, après avoir identifié Twitter comme étant le service en ligne dont j'étais le plus dépendant (et <a href="/david/stream/">archivé mon historique</a>). <strong>Rien de mieux pour découvrir à quel point cette addiction s'était développée au cours des années.</strong></p>

  476. <p>L'objectif initial était de ne publier aucun tweet et de ne lire ma <em>timeline</em> qu'une à deux fois par jour, ce à quoi je me suis à peu près tenu, j'ai juste signalé après une semaine que je testais <a href="http://vole.cc/">Vole</a> pour ceux qui voulaient tenter une expérience décentralisée à base de <a href="http://labs.bittorrent.com/experiments/sync.html">Bittorrent Sync</a>. Quelques personnes ont suivi et on a réussi à avoir quelques échanges mais rapidement le soufflé s'est dégonflé et on s'est retrouvés en dialogue avec <a href="http://nicolas.perriault.net/">Nico</a> ce qui limite un peu l'intérêt d'un <em>réseau</em> socia^W^soucieux.</p>

  477. <p>La première journée a été très difficile : mon navigateur était plein de liens à échanger, ma <em>timeline</em> pleine de <em>tweets</em> auxquels réagir. J'ai envoyé quelques mails à certains pour répondre via un autre canal. <strong>La frustration était bien réelle, l'addiction aussi.</strong> Puis est arrivée <a href="http://pytong.org/">la première conférence</a> et j'avais vraiment envie de partager <a href="/david/blog/2013/pytong/">mon bonheur d'avoir réuni des personnes intéressantes dans un lieu paradisiaque</a>. Puis sont arrivés les premières questions directement sur Twitter auxquelles je me suis empêché de répondre, après tout mon mail est suffisamment public pour pouvoir être joignable différemment (ce qui n'a pas été le cas).</p>

  478. <p><strong>Je n'avais jamais vraiment envisagé Twitter comme étant un mégaphone à mon égo.</strong> Et pourtant… je me suis rendu compte qu'il s'agissait avant tout de communiquer sur du positif et de l'auto-flatterie. Dur bilan. Mais c'était peut-être aussi l'objectif de cette prise de recul : observer ce qui avait vraiment de la valeur dans ce que je partageais et ce que je consultait. Fort de ce constat, je me suis remis à suivre <a href="/david/blog/2013/twitter-dunbar/">moins de 100 personnes</a> et je me limite dorénavant à 3 tweets par jour (excepté les discussions). Un besoin d'augmenter le rapport signal/bruit, en commençant par l'appliquer à mes propres publications.</p>

  479. <p>Beaucoup de questions relatives à mon exil de Twitter par conviction — suite aux révélations sur <code>PRISM</code> etc — c'était surtout l'occasion de voir si d'autres solutions pouvaient être envisagées et la réponse est négative pour l'instant, que ce soit Vole, <a href="http://app.net/">App.net</a> ou <a href="http://pump.io/">Pump.io</a>, aucun des réseaux n'atteint la masse critique permettant d'avoir la qualité des échanges que j'ai actuellement sur Twitter. Il y aurait bien <a href="http://t37.net/posse-syndique-partout-publie-chez-toi-et-reapproprie-toi-le-web-intelligemment.html">la solution POSSE</a> mais ça ne résout pas la distribution des discussions, leur agrégation et leur pérennité.</p>

  480. <p><em>Le bilan de cette expérience est cruellement insatisfaisant.</em> Si Twitter venait à disparaitre, tout un graphe de relations serait perdu (ou plutôt revendu au plus offrant) sans qu'il y ait d'alternative réelle, peut-être que je devrais davantage m'intéresser à la sauvegarde de ces relations plutôt qu'aux contenus <a href="/david/stream/">sur ma page dédiée</a> car c'est ce qui fait la réelle valeur de ce réseau social. Mais les identifiants étant définis au niveau de la plateforme et non du web, ceux-ci disparaitraient malheureusement aussi. Il est peut-être temps de jouer avec le champ URL de la bio Twitter :-).</p>

  481. </article>

  482. 

  483.   <section>

  484.     <h3>Discussion suite à l’article :</h3>

  485. 

  486.       <article id="comment-1" class="comment">

  487.         <p>Première réponse : <a href="http://bufferapp.com/">Buffer</a> est pas mal pour temporiser les liens partagés, les diffuser à meilleure heure et pour les étaler dans le temps.</p>

  488.         <p><cite>Thomas Parisot, le <a href="#comment-1">2013-07-15 à 11:50</a></cite></p>

  489.       </article>

  490. 

  491.       <article id="comment-2" class="comment">

  492.         <p>Il y a également la solution de <a href="http://impressive.net/people/gerald/1999/12/fogo/">FOGO</a> Friends of Gerald Oskoibony. La liste n’est plus vraiment active, mais je pense que c’est plus une question d’animation de Gerald qu’autre chose. Elle possède une <a href="http://impressive.net/archives/fogo/">archive Web</a>. </p>

  493. <p>Je viens de tenter d’envoyer un message à fogo. La liste semble morte. Je demande à <a href="http://twitter.com/karlpro/status/356804525975273472">Gerald</a></p>

  494. <p>Il y a une autre liste à laquelle j’appartiens qui est la liste des personnes qui étaient employées de Calvacom entre 1994 et 1996 et qui est toujours opérationnelle avec des activités de temps en temps. Celle ci non publique.</p>

  495.         <p><cite>Karl Dubost, le <a href="#comment-2">2013-07-15 à 17:57</a></cite></p>

  496.       </article>

  497. 

  498.       <article id="comment-3" class="comment">

  499.         <blockquote>

  500. <p>Première réponse : Buffer est pas mal pour temporiser les liens partagés, les diffuser à meilleure heure et pour les étaler dans le temps.</p>

  501. </blockquote>

  502. <p>Avec 3 tweets par jour je ne pense pas avoir besoin de les étaler dans le temps !</p>

  503. <blockquote>

  504. <p>Il y a également la solution de FOGO Friends of Gerald Oskoibony. La liste n’est plus vraiment active, mais je pense que c’est plus une question d’animation de Gerald qu’autre chose. Elle possède une archive Web. </p>

  505. </blockquote>

  506. <p>Je pourrais appeler cette liste FODL vu qu’elle dispose également d’<a href="http://librelist.com/browser/larletfr/">archives publiques</a> et la transformer en autre chose que des discussions sur mes articles. Ou plutôt que nous la transformions ensemble :)</p>

  507.         <p><cite>David Larlet, le <a href="#comment-3">2013-07-16 à 11:01</a></cite></p>

  508.       </article>

  509. 

  510.   </section>

  511. 

  512. 

  513. 

  514. 

  515. <nav id="jumpto">

  516.   <p>

  517.     <a rel=prev href="/david/blog/2013/communautes-liens/">← Communautés et liens</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/integrer-equipe/">Intégrer une équipe →</a>

  518.   </p>

  519. </nav>

  520. 

  521. <footer>

  522.   <div>

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

  524.     <p>

  525.       Bonjour/Hi!

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

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

  528.     </p>

  529.     <p>

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

  531.     </p>

  532. 

  533.       <p>

  534.         Les dernières publications hebdomadaires sont :

  535.       </p>

  536.       <ul class="with_columns">

  537. 

  538.           <li>

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

  540.           </li>

  541. 

  542.           <li>

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

  544.           </li>

  545. 

  546.           <li>

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

  548.           </li>

  549. 

  550.           <li>

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

  552.           </li>

  553. 

  554.           <li>

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

  556.           </li>

  557. 

  558.           <li>

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

  560.           </li>

  561. 

  562.           <li>

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

  564.           </li>

  565. 

  566.           <li>

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

  568.           </li>

  569. 

  570.           <li>

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

  572.           </li>

  573. 

  574.           <li>

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

  576.           </li>

  577. 

  578.           <li>

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

  580.           </li>

  581. 

  582.           <li>

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

  584.           </li>

  585. 

  586.           <li>

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

  588.           </li>

  589. 

  590.           <li>

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

  592.           </li>

  593. 

  594.           <li>

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

  596.           </li>

  597. 

  598.           <li>

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

  600.           </li>

  601. 

  602.           <li>

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

  604.           </li>

  605. 

  606.           <li>

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

  608.           </li>

  609. 

  610.           <li>

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

  612.           </li>

  613. 

  614.           <li>

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

  616.           </li>

  617. 

  618.           <li>

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

  620.           </li>

  621. 

  622.           <li>

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

  624.           </li>

  625. 

  626.           <li>

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

  628.           </li>

  629. 

  630.           <li>

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

  632.           </li>

  633. 

  634.           <li>

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

  636.           </li>

  637. 

  638.           <li>

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

  640.           </li>

  641. 

  642.           <li>

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

  644.           </li>

  645. 

  646.           <li>

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

  648.           </li>

  649. 

  650.           <li>

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

  652.           </li>

  653. 

  654.           <li>

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

  656.           </li>

  657. 

  658.           <li>

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

  660.           </li>

  661. 

  662.           <li>

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

  664.           </li>

  665. 

  666.           <li>

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

  668.           </li>

  669. 

  670.           <li>

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

  672.           </li>

  673. 

  674.           <li>

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

  676.           </li>

  677. 

  678.           <li>

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

  680.           </li>

  681. 

  682.           <li>

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

  684.           </li>

  685. 

  686.           <li>

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

  688.           </li>

  689. 

  690.           <li>

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

  692.           </li>

  693. 

  694.           <li>

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

  696.           </li>

  697. 

  698.           <li>

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

  700.           </li>

  701. 

  702.           <li>

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

  704.           </li>

  705. 

  706.           <li>

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

  708.           </li>

  709. 

  710.           <li>

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

  712.           </li>

  713. 

  714.           <li>

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

  716.           </li>

  717. 

  718.           <li>

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

  720.           </li>

  721. 

  722.           <li>

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

  724.           </li>

  725. 

  726.           <li>

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

  728.           </li>

  729. 

  730.           <li>

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

  732.           </li>

  733. 

  734.       </ul>

  735. 

  736.     <p>

  737.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  754.     </p>

  755.     <p>

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

  757.     </p>

  758.     <p>

  759.       Je ne traque pas ta navigation mais mon

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

  761.       conserve des logs d’accès.

  762.     </p>

  763.   </div>

  764. </footer>

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

  766.   ;(_ => {

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

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

  769.       e.preventDefault()

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

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

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

  773.     })

  774.   })()

  775. </script>

  776. 

  777.   <script>

  778.   /* Service workers */

  779.   if (navigator.serviceWorker) {

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

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

  782.       function sendLinks (selector) {

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

  784.           return link.getAttribute('href')

  785.         })

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

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

  788.       }

  789.       navigator.serviceWorker.getRegistration()

  790.         .then(function (registration) {

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

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

  793.               .then(navigator.serviceWorker.ready)

  794.               .then(function () {

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

  796.               })

  797.               .catch(console.error.bind(console))

  798.           } else {

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

  800.             sendLinks(selector)

  801.           }

  802.         })

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

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

  805.         sendLinks(selector)

  806.       })

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

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

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

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

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

  812. 

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

  814. 

  815.         }

  816.       })

  817.     })

  818.   } else {

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

  820.   }

  821. </script>