davidbgk
/
larlet-fr-david
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
270 Commits
1 Branch
Struktur: 7d5e83b35f
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „7d5e83b35f“
${ noResults }
larlet-fr-david/david/stream/2019/01/04/index.html

index.html 31KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813 
  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>Balbutiements — 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/01/04/">

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

  456.   <time>Publié le 4 janvier</time>

  457. </h1>

  458. <article class="single">

  459.  <p><em>Tentatives autour d’un format hebdomadaire.</em></p>

  460. <blockquote>

  461. <p>Lost here is the gentle pursuit of a modest competence, the doing of something just because you enjoy it, not because you are good at it. Hobbies, let me remind you, are supposed to be something different from work. But alien values like “the pursuit of excellence” have crept into and corrupted what was once the realm of leisure, leaving little room for the true amateur.</p>

  462. <p><cite><em><a href="https://www.nytimes.com/2018/09/29/opinion/sunday/in-praise-of-mediocrity.html">In Praise of Mediocrity</a></em> (<a href="/david/cache/4a30c5e49bd90cbd2ecf7f131b2d1a19/">cache</a>)</cite></p>

  463. </blockquote>

  464. <p>Pendant que certains se focalisent sur leur <strike>santé</strike>compétence (en opposition au savoir-faire, voir <a href="https://comptoir.org/2018/12/26/franck-lepage-le-gilet-jaune-est-le-symbole-dune-conscience-de-classe-qui-est-en-train-de-renaitre/">Lepage</a> (<a href="/david/cache/cd9506501d087bff737affa52e9188a2/">cache</a>)), d’autres proposent des cérémonies d’enterrement de leurs données…</p>

  465. <blockquote>

  466. <p>However, do we value them enough to consider funerals for these once beloved traces of our life when they are gone? Through this workshop, participants learnt to use design fiction as a method to explore emerging and speculative rituals helping users to cope with failing data-driven services.</p>

  467. <p><cite><em><a href="https://medium.com/design-friction/requiem-for-a-data-imagining-speculative-rituals-to-cope-with-a-data-loss-32175e6c4c08">Requiem for a data: imagining speculative rituals to cope with a data loss</a></em> (<a href="/david/cache/a3935b1b839c8d6d17ace91e98ff2bbc/">cache</a>)</cite></p>

  468. </blockquote>

  469. <p>… tout en les publiant sur Medium, ce qui n’est pas sans une certaine ironie mais finalement assez cohérent. À se demander si l’éphémère assumé ne serait pas la seule voie de salut pour accepter ses propres contradictions :</p>

  470. <blockquote>

  471. <p>The logic of the camera is that reality is real only to the extent that it is photographable. It pulls individuals out of the moment and makes them see it (and themselves) as an object for the future as well as always already of the past. This seizing of experience’s ephemerality — to possess the present, docile and durable — is what Andreas Kitzmann called a “museal gesture,” what Jean Baudrillard called “museumification,” and what André Bazin called the “mummy complex,” the “need to have the last word in the argument with death by means of the form that endures.” It’s ownership of the present by proxy.</p>

  472. <p><cite><em><a href="https://thenewinquiry.com/pics-and-it-didnt-happen/">Pics and It Didn’t Happen</a></em> (<a href="/david/cache/ebd19f9c1e332d26ebb7f2aa03f5f301/">cache</a>)</cite></p>

  473. </blockquote>

  474. <p>Ce n’est pas pour rien si le logo de Snapchat est un fantôme en effet. Celui de la construction de notre identité. La fuite d’une nostalgie que l’on crée <em>et</em> retrouve avec romantisme d’un côté. Mais aussi les traces d’un chemin permettant de bâtir une souvenance cohérente. De la caverne à la bulle de filtres il n’y a qu’un pas.</p>

  475. <blockquote>

  476. <p>L’écran cathodique est une caverne reconstituée dans la mesure où elle fait voir, non pas le monde, mais ses images. <em>Le monde vient à l’homme et non plus l’homme au monde.</em> Dès lors, il acquiert une réalité fantomatique.</p>

  477. <p><cite><em>Les irremplaçables</em>, Cynthia Fleury</cite></p>

  478. </blockquote>

  479. <p>Twitter et consorts n’étant finalement que des Snapchats du texte, tout est <a href="https://gcemetery.co/">question de temps</a>. Un temps dont on ne prend pas soin et ne pas s’en préoccuper consiste peut-être à ne pas se considérer soi-même. Lorsqu’on ne produit que du jetable, on en vient à se considérer comme étant remplaçable.</p>

  480. <blockquote>

  481. <p>Autrement dit, le temps s’ouvre sur la nécessité même de l’individuation. Le temps ne délivrera son sens qu’à celui qui poursuit le travail d’individuation. Ce travail fait toute sa liberté. […] Ne pas saisir l’instant pour cheminer vers soi, ne pas articuler le « connais l’instant » avec le « connais-toi toi-même », c’est manquer la possibilité de l’individuation, l’ajourner pour une venue plus improbable encore. Les rencontres avec soi-même sont rares.</p>

  482. <p><cite><em>Les irremplaçables</em>, Cynthia Fleury</cite></p>

  483. </blockquote>

  484. <p>Dans quelle mesure est-ce que ce temps — que l’on ne prends plus le temps de savourer — met à mal notre créativité profonde, faute de tension longue ? C’est l’une des explorations pour cette année, publier moins pour tenter d’articuler des pensées en tentant d’éviter l’écueil facile de la revue de presse aigrie. Manifestement loupé pour cette première, j’accepte l’échec sachant que j’ai encore 51 essais.</p>

  485. <blockquote>

  486. <p>Mais là où le travail de l’artiste est de servir de contenant à ces sentiments, de les faire mijoter en ses tréfonds pour mieux les digérer, afin de produire une œuvre, les réseaux sociaux nous invitent à nous en débarrasser aussitôt. Une belle idée ? Aussitôt postée. Une indignation ? Aussitôt postée. Une colère noire ? Aussitôt postée. Nous évacuons sciemment la matière première de notre puissance de création comme nous tirerions la chasse d’eau, sans réfléchir à ce que nous faisons. Les réseaux sociaux comme toilettes des émotions.</p>

  487. <p><cite><em><a href="https://page42.org/suicide-social/">Suicide social (ou comment quitter les réseaux sociaux sur un coup de tête)</a></em> (<a href="/david/cache/830311097b8a4bc8856379842d5bfeec/">cache</a>)</cite></p>

  488. </blockquote>

  489. <p>Toujours intéressant de lire ces retours qui se préoccupent énormément des êtres perdus en tirant la chasse mais parlent peu des personnes à retrouver qui sont déjà passées par là et qui sont maintenant plus légères. Ces <a href="/david/stream/2015/01/01/">articles</a> comme la numérisation du graffiti dans les toilettes : « X a fait caca ici. » Le besoin d’exprimer son détachement pour montrer à quel point l’on était attaché. Se dé-lier pour être en mesure de se re-lier. Comment mailler sans centraliser ?</p>

  490. <p><strong>Le Web permet-il de tisser autre chose qu’une bulle ?</strong></p>

  491. <figure>

  492.   <img src="/static/david/stream/caca-facebook.jpg" alt="Affiche informative sur la loutre et son caca" loading="lazy" width="500" height="500" />

  493.   <figcaption>

  494.     Puisqu’on en est à ces considérations, je n’hésite pas à ressortir cette petite pépite… il y en a qui s’amusent bien :-)

  495.   </figcaption>

  496. </figure>

  497. 

  498. <blockquote>

  499. <p>Notre idéalisme doit se faire à l’époque dans l’espoir de la transformer. Nous avons connaissance du temps long de l’économie du livre, de la présence imbriquée de ses intermédiaires, des pratiques du milieu littéraire et des attitudes trop souvent boutiquières de ses acteurs, mais nous avons surtout connaissance de la méconnaissance des lecteurs quant à toutes ces questions relatives au livre, à son économie, à son existence numérique et à sa diffusion. En écrivant ainsi « NC » dans notre licence, nous raturons « Non au Capital ». À travers cette vulgarité poussiéreuse, nous voulons éviter les usages de nos contemporains qui se servent de la propriété intellectuelle soit pour maintenir une situation passéiste autour de l’usage classique du droit d’auteur, soit pour assurer une certaine fluidité du marché, volontairement ou non, par l’entremise des licences libres.</p>

  500. <p><cite><em><a href="https://abrupt.ch/partage/">Partage</a></em> (<a href="/david/cache/2623ad615200612902d1fa654b6f0b4a/">cache</a>)</cite></p>

  501. </blockquote>

  502. <p>« Non au Capital ». Non à la capitulation. Non au jetable. Non à la propriété. Non à la destruction des identités.</p>

  503. <p><em>Mais « oui » à quoi au juste ?</em></p>

  504. </article>

  505. 

  506. 

  507. <nav id="jumpto">

  508.   <p>

  509.     <a rel=prev href="/david/stream/2018/">← Anciennes notes (2018)</a> | <a href="/david/stream/2019/" title="Retour à la liste complète">↑ Liste complète</a> | <a  rel=next href="/david/stream/2019/01/11/">Métaphores →</a>

  510.   </p>

  511. </nav>

  512. 

  513. <footer>

  514.   <div>

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

  516.     <p>

  517.       Bonjour/Hi!

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

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

  520.     </p>

  521.     <p>

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

  523.     </p>

  524.     

  525.       <p>

  526.         Les dernières publications hebdomadaires sont :

  527.       </p>

  528.       <ul class="with_columns">

  529.         

  530.           <li>

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

  532.           </li>

  533.         

  534.           <li>

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

  536.           </li>

  537.         

  538.           <li>

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

  540.           </li>

  541.         

  542.           <li>

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

  544.           </li>

  545.         

  546.           <li>

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

  548.           </li>

  549.         

  550.           <li>

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

  552.           </li>

  553.         

  554.           <li>

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

  556.           </li>

  557.         

  558.           <li>

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

  560.           </li>

  561.         

  562.           <li>

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

  564.           </li>

  565.         

  566.           <li>

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

  568.           </li>

  569.         

  570.           <li>

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

  572.           </li>

  573.         

  574.           <li>

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

  576.           </li>

  577.         

  578.           <li>

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

  580.           </li>

  581.         

  582.           <li>

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

  584.           </li>

  585.         

  586.           <li>

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

  588.           </li>

  589.         

  590.           <li>

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

  592.           </li>

  593.         

  594.           <li>

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

  596.           </li>

  597.         

  598.           <li>

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

  600.           </li>

  601.         

  602.           <li>

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

  604.           </li>

  605.         

  606.           <li>

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

  608.           </li>

  609.         

  610.           <li>

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

  612.           </li>

  613.         

  614.           <li>

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

  616.           </li>

  617.         

  618.           <li>

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

  620.           </li>

  621.         

  622.           <li>

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

  624.           </li>

  625.         

  626.           <li>

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

  628.           </li>

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.           <li>

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

  716.           </li>

  717.         

  718.           <li>

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

  720.           </li>

  721.         

  722.           <li>

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

  724.           </li>

  725.         

  726.       </ul>

  727.     

  728.     <p>

  729.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  746.     </p>

  747.     <p>

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

  749.     </p>

  750.     <p>

  751.       Je ne traque pas ta navigation mais mon

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

  753.       conserve des logs d’accès.

  754.     </p>

  755.   </div>

  756. </footer>

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

  758.   ;(_ => {

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

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

  761.       e.preventDefault()

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

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

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

  765.     })

  766.   })()

  767. </script>

  768. 

  769.   <script>

  770.   /* Service workers */

  771.   if (navigator.serviceWorker) {

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

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

  774.       function sendLinks (selector) {

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

  776.           return link.getAttribute('href')

  777.         })

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

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

  780.       }

  781.       navigator.serviceWorker.getRegistration()

  782.         .then(function (registration) {

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

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

  785.               .then(navigator.serviceWorker.ready)

  786.               .then(function () {

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

  788.               })

  789.               .catch(console.error.bind(console))

  790.           } else {

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

  792.             sendLinks(selector)

  793.           }

  794.         })

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

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

  797.         sendLinks(selector)

  798.       })

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

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

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

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

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

  804.           

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

  806.           

  807.         }

  808.       })

  809.     })

  810.   } else {

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

  812.   }

  813. </script>