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.

index.html 43KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886
  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>Commodité et effondrement — 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. <!-- Canonical URL for SEO purposes -->
  28. <link rel="canonical" href="https://larlet.fr/david/blog/2018/commodite-effondrement/">
  29. <!-- SEO/Semantic metadata -->
  30. <meta name="description" content="Ce cercle anxiogène qui nous mène dans le mur." />
  31. <meta name="twitter:description" property="og:description" itemprop="description" content="Ce cercle anxiogène qui nous mène dans le mur." />
  32. <meta name="twitter:title" property="og:title" itemprop="name" content="Commodité et effondrement" />
  33. <meta name="twitter:card" content="summary" />
  34. <meta name="twitter:creator" content="@davidbgk" />
  35. <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2018/commodite-effondrement/" />
  36. <meta property="og:type" content="article" />
  37. <meta property="og:site_name" content="David Larlet (@davidbgk)" />
  38. <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2018/commodite-effondrement.jpg" />
  39. <style>
  40. /* http://meyerweb.com/eric/tools/css/reset/ */
  41. html, body, div, span,
  42. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  43. a, abbr, address, big, cite, code,
  44. del, dfn, em, img, ins,
  45. small, strike, strong, tt, var,
  46. dl, dt, dd, ol, ul, li,
  47. fieldset, form, label, legend,
  48. table, caption, tbody, tfoot, thead, tr, th, td,
  49. article, aside, canvas, details, embed,
  50. figure, figcaption, footer, header, hgroup,
  51. menu, nav, output, ruby, section, summary,
  52. time, mark, audio, video {
  53. margin: 0;
  54. padding: 0;
  55. border: 0;
  56. font-size: 100%;
  57. font: inherit;
  58. vertical-align: baseline;
  59. }
  60. /* HTML5 display-role reset for older browsers */
  61. article, aside, details, figcaption, figure,
  62. footer, header, hgroup, menu, nav, section { display: block; }
  63. body { line-height: 1; }
  64. blockquote, q { quotes: none; }
  65. blockquote:before, blockquote:after,
  66. q:before, q:after {
  67. content: '';
  68. content: none;
  69. }
  70. table {
  71. border-collapse: collapse;
  72. border-spacing: 0;
  73. }
  74. /* http://practicaltypography.com/equity.html */
  75. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  76. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: normal;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  89. font-weight: 300;
  90. font-style: italic;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'EquityTextB';
  95. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  96. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  97. font-weight: 700;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. @font-face {
  102. font-family: 'ConcourseT3';
  103. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  104. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  105. font-weight: 300;
  106. font-style: normal;
  107. font-display: swap;
  108. }
  109. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  110. body {
  111. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  112. font-family: "EquityTextB", Palatino, serif;
  113. background-color: #f0f0ea;
  114. color: #07486c;
  115. font-kerning: normal;
  116. -moz-osx-font-smoothing: grayscale;
  117. -webkit-font-smoothing: subpixel-antialiased;
  118. text-rendering: optimizeLegibility;
  119. font-variant-ligatures: common-ligatures contextual;
  120. font-feature-settings: "kern", "liga", "clig", "calt";
  121. }
  122. pre, code, kbd, samp, var, tt {
  123. font-family: 'TriplicateT4c', monospace;
  124. }
  125. em {
  126. font-style: italic;
  127. color: #323a45;
  128. }
  129. strong {
  130. font-weight: bold;
  131. color: black;
  132. }
  133. nav {
  134. background-color: #323a45;
  135. color: #f0f0ea;
  136. display: flex;
  137. justify-content: space-around;
  138. padding: 1rem .5rem;
  139. }
  140. nav:last-child {
  141. border-bottom: 1vh solid #2d7474;
  142. }
  143. nav a {
  144. color: #f0f0ea;
  145. }
  146. nav abbr {
  147. border-bottom: 1px dotted white;
  148. }
  149. h1 {
  150. border-top: 1vh solid #2d7474;
  151. border-bottom: .2vh dotted #2d7474;
  152. background-color: #e3e1e1;
  153. color: #323a45;
  154. text-align: center;
  155. padding: 5rem 0 4rem 0;
  156. width: 100%;
  157. font-family: 'ConcourseT3';
  158. display: flex;
  159. flex-direction: column;
  160. }
  161. h1.single {
  162. padding-bottom: 10rem;
  163. }
  164. h1 span {
  165. position: absolute;
  166. top: 1vh;
  167. left: 20%;
  168. line-height: 0;
  169. }
  170. h1 span a {
  171. line-height: 1.7;
  172. padding: 1rem 1.2rem .6rem 1.2rem;
  173. border-radius: 0 0 6% 6%;
  174. background: #2d7474;
  175. font-size: 1.3rem;
  176. color: white;
  177. text-decoration: none;
  178. }
  179. h2 {
  180. margin: 4rem 0 1rem;
  181. border-top: .2vh solid #2d7474;
  182. padding-top: 1vh;
  183. }
  184. h3 {
  185. text-align: center;
  186. margin: 3rem 0 .75em;
  187. }
  188. hr {
  189. height: .4rem;
  190. width: .4rem;
  191. border-radius: .4rem;
  192. background: #07486c;
  193. margin: 2.5rem auto;
  194. }
  195. time {
  196. display: bloc;
  197. margin-left: 0 !important;
  198. }
  199. ul, ol {
  200. margin: 2rem;
  201. }
  202. ul {
  203. list-style-type: square;
  204. }
  205. a {
  206. text-decoration-skip-ink: auto;
  207. text-decoration-thickness: 0.05em;
  208. text-underline-offset: 0.09em;
  209. }
  210. article {
  211. max-width: 50rem;
  212. display: flex;
  213. flex-direction: column;
  214. margin: 2rem auto;
  215. }
  216. article.single {
  217. border-top: .2vh dotted #2d7474;
  218. margin: -6rem auto 1rem auto;
  219. background: #f0f0ea;
  220. padding: 2rem;
  221. }
  222. article p:last-child {
  223. margin-bottom: 1rem;
  224. }
  225. p {
  226. padding: 0 .5rem;
  227. margin-left: 3rem;
  228. }
  229. p + p,
  230. figure + p {
  231. margin-top: 2rem;
  232. }
  233. blockquote {
  234. background-color: #e3e1e1;
  235. border-left: .5vw solid #2d7474;
  236. display: flex;
  237. flex-direction: column;
  238. align-items: center;
  239. padding: 1rem;
  240. margin: 1.5rem;
  241. }
  242. blockquote cite {
  243. font-style: italic;
  244. }
  245. blockquote p {
  246. margin-left: 0;
  247. }
  248. figure {
  249. border-top: .2vh solid #2d7474;
  250. background-color: #e3e1e1;
  251. text-align: center;
  252. padding: 1.5rem 0;
  253. margin: 1rem 0 0;
  254. font-size: 1.5rem;
  255. width: 100%;
  256. }
  257. figure img {
  258. max-width: 250px;
  259. max-height: 250px;
  260. border: .5vw solid #323a45;
  261. padding: 1px;
  262. }
  263. figcaption {
  264. padding: 1rem;
  265. line-height: 1.4;
  266. }
  267. aside {
  268. display: flex;
  269. flex-direction: column;
  270. background-color: #e3e1e1;
  271. padding: 1rem 0;
  272. border-bottom: .2vh solid #07486c;
  273. }
  274. aside p {
  275. max-width: 50rem;
  276. margin: 0 auto;
  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. figure.unsquared {
  348. margin-bottom: 1.5rem;
  349. }
  350. figure.unsquared img {
  351. height: inherit;
  352. }
  353. @media print {
  354. body { font-size: 100%; }
  355. a:after { content: " (" attr(href) ")"; }
  356. a, a:link, a:visited, a:after {
  357. text-decoration: underline;
  358. text-shadow: none !important;
  359. background-image: none !important;
  360. background: white;
  361. color: black;
  362. }
  363. abbr[title] { border-bottom: 0; }
  364. abbr[title]:after { content: " (" attr(title) ")"; }
  365. img { page-break-inside: avoid; }
  366. @page { margin: 2cm .5cm; }
  367. h1, h2, h3 { page-break-after: avoid; }
  368. p3 { orphans: 3; widows: 3; }
  369. img {
  370. max-width: 250px !important;
  371. max-height: 250px !important;
  372. }
  373. nav, aside { display: none; }
  374. }
  375. ul.with_columns {
  376. column-count: 1;
  377. }
  378. @media (min-width: 20em) {
  379. ul.with_columns {
  380. column-count: 2;
  381. }
  382. }
  383. @media (min-width: 50em) {
  384. ul.with_columns {
  385. column-count: 3;
  386. }
  387. }
  388. ul.with_two_columns {
  389. column-count: 1;
  390. }
  391. @media (min-width: 20em) {
  392. ul.with_two_columns {
  393. column-count: 1;
  394. }
  395. }
  396. @media (min-width: 50em) {
  397. ul.with_two_columns {
  398. column-count: 2;
  399. }
  400. }
  401. .gallery {
  402. display: flex;
  403. flex-wrap: wrap;
  404. justify-content: space-around;
  405. }
  406. .gallery figure img {
  407. margin-left: 1rem;
  408. margin-right: 1rem;
  409. }
  410. .gallery figure figcaption {
  411. font-family: 'ConcourseT3'
  412. }
  413. footer {
  414. font-family: 'ConcourseT3';
  415. display: flex;
  416. flex-direction: column;
  417. border-top: 3px solid white;
  418. padding: 4rem 0;
  419. background-color: #07486c;
  420. color: white;
  421. }
  422. footer > * {
  423. max-width: 50rem;
  424. margin: 0 auto;
  425. }
  426. footer a {
  427. color: #f1c40f;
  428. }
  429. footer .avatar {
  430. width: 200px;
  431. height: 200px;
  432. border-radius: 50%;
  433. float: left;
  434. -webkit-shape-outside: circle();
  435. shape-outside: circle();
  436. margin-right: 2rem;
  437. padding: 2px 5px 5px 2px;
  438. background: white;
  439. border-left: 1px solid #f1c40f;
  440. border-top: 1px solid #f1c40f;
  441. border-right: 5px solid #f1c40f;
  442. border-bottom: 5px solid #f1c40f;
  443. }
  444. </style>
  445. <h1 class="single">
  446. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  447. Commodité et effondrement
  448. <time>Publié le 23 avril 2018</time>
  449. </h1>
  450. <article class="single">
  451. <details lang=en>
  452. <summary>Summary in English</summary>
  453. <p>Convenience leads to luxury which leads to slavery which leads to centralization which leads to convenience. And we are (almost) all sad about that. A few leads before we hit the wall.</p>
  454. </details>
  455. <h2>Commodité</h2>
  456. <blockquote>
  457. <p>« Cette vision est si séduisante qu’elle a fini par dominer notre existence. La plupart des technologies puissantes et importantes créées au cours des dernières décennies offrent une commodité au service de la personnalisation et de l’individualité. Pensez au magnétoscope, à la liste de lecture, à la page Facebook, au compte Instagram. Ce genre de commodité n’est plus une question d’économie de travail physique – beaucoup d’entre nous n’en font pas beaucoup de toute façon. Il s’agit de minimiser les ressources mentales, l’effort mental, nécessaire pour choisir parmi les options qui s’expriment. La commodité est un simple clic, un guichet unique, l’expérience transparente de « plug and play ». L’idéal est la préférence personnelle sans effort. »</p>
  458. <p><cite><em><a href="http://www.internetactu.net/a-lire-ailleurs/la-tyrannie-de-la-commodite/">La tyrannie de la commodité</a></em> (<a href="/david/cache/f33e6b263592725283a74547db24e04b/">cache</a>)</cite></p>
  459. </blockquote>
  460. <p>Quel prix est-on collectivement prêts à payer pour réduire cet effort ? Combien de personnes asservies ? Combien de ressources définitivement transformées ? <a href="https://twitter.com/internetofshit/status/986006653605687296">Combien de serveurs pour allumer une ampoule ?</a> Jusqu’où peut-on encore aller entre le ridicule et l’inconscience ?</p>
  461. <p>La commodité est une nouvelle forme de luxe permettant de différencier ceux et celles qui peuvent en profiter des autres. Ces personnes privilégiées sont en capacité d’affirmer une forme de snobisme car elles se trouvent dans une situation de moindre insécurité.</p>
  462. <p>Et elles souhaitent le rester, c’est peut-être là tout l’enjeu.</p>
  463. <h2>Luxe</h2>
  464. <blockquote>
  465. <p>My ability to avoid Facebook comes from privilege — I have existing social contacts with whom I know how to stay in touch without using Facebook’s network. My job does not require that I use Facebook. I can afford the time and expense to communicate with my electoral representatives and political allies via other channels.</p>
  466. <p>Many people do not have these privileges and are compelled to "opt in" on Facebook’s non-negotiable terms.</p>
  467. <p>[…]</p>
  468. <p>Privacy should not be a luxury good, and while I’m happy to encourage people to opt out of these subtle and socially fraught arrangements, I do not argue that anyone who has signed up has somehow relinquished concerns about their privacy. We need to evaluate privacy concerns in their full social contexts. These are not problems that can be resolved on an individual level, because of the interpersonal nature of much of this data and the complexities of the tradeoffs involved.</p>
  469. <p><cite><em><a href="https://www.aclu.org/blog/privacy-technology/internet-privacy/facebook-tracking-me-even-though-im-not-facebook">Facebook Is Tracking Me Even Though I’m Not on Facebook</a></em> (<a href="/david/cache/f7c6c2e7ad13507e23628638cad87963/">cache</a>)</cite></p>
  470. </blockquote>
  471. <p>Or cette insécurité conduit à l’embrigadement et à la manipulation de masse qui eux-mêmes contribuent à perpétuer ce système mortifère. On se retrouve dans un cercle qui est tout sauf vertueux et les adeptes de la commodité ne sont pas épargnés pour autant car ils sont sujets à la culpabilité de garder une bonne moitié de la planète comme main-d’œuvre bon marché. Pour ne pas dire esclaves.</p>
  472. <h2>Esclavage</h2>
  473. <blockquote>
  474. <p>Nos privilèges découlent uniquement de la pyramide sociale et de l’exploitation de ceux qui sont en dessous. C’est vrai a l’échelle du pays, où le top 20% est très loin d’apporter autant de valeur à la société qu’il n’en consomme. C’est aussi vrai à l’échelle mondiale où le niveau de vie français se base principalement sur les conditions de travail et l’exploitation des ressources des pays dits « en développement ».</p>
  475. <p>Qui pense donc qu’il produit et contribue 100 fois plus que celui qui se tue – littéralement – au travail à l’usine en Asie du sud-est ou celui qui essaie autant que possible de survivre à la misère ou à la guerre dans certaines parties d’Afrique ? Quand je vois les 0,1% les plus privilégiés ont un ratio de richesse probablement bien plus proche du million… Qui peut sérieusement prétendre apporter un million de fois plus que quiconque ?</p>
  476. <p><cite><em><a href="https://n.survol.fr/n/la-chance-et-le-privilege">La chance et le privilège</a></em> (<a href="/david/cache/74d84924951a6a97ffb43d0b1401a978/">cache</a>)</cite></p>
  477. </blockquote>
  478. <p>Le pire étant peut-être que ces bénéficiaires de la commodité font tout pour à la fois faire l’autruche mais intimement aussi conserver cet état de fait avec ce sentiment de supériorité. Ce qui s’avère là aussi alimenter cette roue anxiogène.</p>
  479. <p>Sans compter la déprolétarisation dont nous sommes les objets et qui nous pousse à la consommation et à l’abrutissement volontaire. Voire à l’auto-mutilation si l’on en croit la flambée de l’usage des drogues et médicaments.</p>
  480. <p>Ce vide, cette désindividuation, sont exacerbés par le numérique qui contribue à accélérer la perte de certains savoirs au profit de la commodité.</p>
  481. <h2>Capacitation</h2>
  482. <blockquote>
  483. <p>"Le numérique" est souvent présenté comme un outil de "capacitation", qui nous donne de nouvelles capacités, alors qu’il n’est le plus souvent un outil de facilitation (ce qui n’est déjà pas si mal). </p>
  484. <p>[…]</p>
  485. <p>Confondre ou assimiler facilitation et capacitation n’est pas simplement un abus de langage mais une erreur méthodologique qui empêche d’isoler les invariants sur lesquels jouer pour atténuer les potentialités de nuisance et augmenter celles de résistance ou d’empathie. </p>
  486. <p>Car seule la capacitation authentique est porteuse d’émancipation alors que les logiques de facilitation se contentent le plus souvent de reproduire des effets de rente déjà connus en les monétisant ou en les déployant à une échelle différente. </p>
  487. <p><cite><em><a href="http://affordance.typepad.com/mon_weblog/2018/04/uberisation-de-la-lutte-finale.html">La caisse de grève crowdfundée. C’est (l’uberisation de) la lutte finale.</a></em> (<a href="/david/cache/f677efe72cd0411f9b1a1261450df3da/">cache</a>)</cite></p>
  488. </blockquote>
  489. <p>Malheureusement, le numérique qui aurait pu (pourrait encore ?) être un moyen de s’émanciper de cette relation n’a fait que l’aggraver avec les dérives que l’on commence à peine à mettre à jour.</p>
  490. <p>Il y a pourtant tous les ingrédients pour emprunter une autre voie mais la recette semble être hors de portée. L’intelligence collective peinant à se transformer en action collective. Faute de temps ?</p>
  491. <h2>Accélération</h2>
  492. <blockquote>
  493. <p>Every cultural object we aestheticize and consume — “the most everyday choices of everyday life, e.g., in cooking, clothing or decoration,” Pierre Bourdieu writes in his 1984 book <em>Distinction: A Social Critique of the Judgement of Taste</em> — is a significant part of our identities and reflects who we are. “Taste classifies, and it classifies the classifier,” Bourdieu adds. If our taste is dictated by data-fed algorithms controlled by massive tech corporations, then we must be content to classify ourselves as slavish followers of robots.</p>
  494. <p><cite><em><a href="https://www.racked.com/2018/4/17/17219166/fashion-style-algorithm-amazon-echo-look">What Does The Amazon Echo Look Mean For Personal Style?</a></em> (<a href="/david/cache/58665f820bf600a356e9f6bbad02400f/">cache</a>)</cite></p>
  495. </blockquote>
  496. <p>Les algorithmes comme machines à classer pour mieux uniformiser, pour prendre le contrôle sur la volonté propre et se désintéresser des besoins primaires.</p>
  497. <p>La captation du temps avec pour promesse celle d’en profiter davantage avec une personnalisation accrue. Si tant est <a href="http://www.internetactu.net/2017/09/27/comment-nous-passer-de-la-personnalisation/">qu’elle soit possible</a> (<a href="/david/cache/0d020640f938182ac3368bcf41844594/">cache</a>)…</p>
  498. <h2>Ingénieurs</h2>
  499. <blockquote>
  500. <p>The relational database is a glorious invention, but for most programmers it doesn’t need to be more than an appliance. Sure, take the time to learn how the drying tumbler machine works, it may well save you a service call to a specialized technician one day. But it’s hardly a requirement for living with such a device and getting your clothes dry.</p>
  501. <p>The relegation to “appliance status” isn’t a dig, but an honor. It means we’ve finally made the technology and the abstraction so good that many, if not most, programmers don’t even have to think about it on a daily basis.</p>
  502. <p>It also means it’s become a commodity.</p>
  503. <p><cite><em><a href="https://m.signalvnoise.com/conceptual-compression-means-beginners-dont-need-to-know-sql-hallelujah-661c1eaed983">Conceptual compression means beginners don’t need to know SQL - hallelujah!</a></em> (<a href="/david/cache/b8a65978c91a2b16646ac8a02f943258/">cache</a>)</cite></p>
  504. </blockquote>
  505. <p>Les ingénieurs et les développeurs en particulier sont des générateurs de commodité. À commencer par eux-mêmes. Il est préoccupant de remarquer qu’un emballement local (coucou JS !) conduit à autant de fatigue. <em>Quid</em> d’un passage à l’échelle, quelle est notre finalité lorsqu’on tente de reproduire ces couches d’abstractions au niveau d’une société ?</p>
  506. <p>Le monde est qu’on le veuille ou non façonné par nos créations qui ont la faculté de pouvoir toucher instantanément une large partie de la population.</p>
  507. <h2>Centralisation</h2>
  508. <blockquote>
  509. <p>La centralisation est une autre forme de contraintes et n’est pas requise pour atteindre la « convenience, » la commodité. La centralisation peut permettre l’émergence de certains services et structures qui bénéficient à l’ensemble d’un groupe. Mais ce bénéfice vient avec l’abandon d’autres libertés. C’est ce choix là qui vient toucher à notre intimité profonde. Nous voulons être libres. Ce désir de liberté motive nos choix ajusté en fonction de nos contraintes matérielles et psychologiques.</p>
  510. <p><cite><em><a href="http://www.la-grange.net/2018/04/19/centralisation">Centralisation et choix pratique</a></em> (<a href="/david/cache/16510b73d5aae5c1abb065936a0eaa0d/">cache</a>)</cite></p>
  511. </blockquote>
  512. <p>Je n’arrive pas à identifier de cas de commodité qui ne passent pas par une centralisation. Elle est pour moi requise car c’est sa marque de fabrique : confisquer un savoir-faire en le rendant accessible au plus bas coût. Accessible mais non compréhensible ni modifiable. Il y a une certaine ironie à ce que toute cette commodité numérique repose en grande partie sur des bibliothèques <em>open-source</em> au passage.</p>
  513. <h2>Misanthropie</h2>
  514. <blockquote>
  515. <p>Pris dans un flux de signes, dans des luttes économiques pour la survie ou pour la distinction, vivant sur les réseaux “sociaux” dans l’informalité complète, l’attention intermittente, le décompte des copains, la désillusion ironique, il s’étonne de sentir monter en lui, par épisodes, l’inconvenance ou la bizarrerie, et de voir la distance civile céder toujours plus de terrain à l’affolement relationnel généralisé, à mesure que la paupérisation guette.</p>
  516. <p>La croyance obligée dans le “bonheur” comme valeur unique ou but accessible, est devenue sa névrose, et compte tenu du mensonge qu’elle charrie, la source d’un ressentiment explosif. […] Tout cela, sans aucun doute, dessine un circuit neuf de la violence, un nouveau rapport du désir à la frustration, du signe à l’affect, de la répression au transfert. Toute une énergétique nouvelle</p>
  517. <p><cite><em><a href="https://theconversation.com/lensauvagement-du-web-95190">L’ensauvagement du web</a></em> (<a href="/david/cache/07f1fb28b17eb86cd509fa82a3885f22/">cache</a>)</cite></p>
  518. </blockquote>
  519. <p>En suivant toutes ces ramifications, ma conclusion est loin d’être glorieuse et me fait de plus en plus douter. J’ai de plus en plus l’impression que nos <a href="/david/stream/2018/04/07/">spirales</a> vont inéluctablement s’inverser et finir dans un entonnoir débouchant sur la bêtise et la barbarie.</p>
  520. <p>Néanmoins, il me reste encore un peu d’espoir.</p>
  521. <h2>Pistes</h2>
  522. <p>Dans mes tentatives d’imaginer un <a href="https://www.youtube.com/watch?v=3q54510-HW8">monde plus résilient pour demain</a>, j’essaye de me raccrocher à certaines branches pour ne pas chuter trop bas dans l’aigreur et la dépression. À ce titre, mes <a href="/david/bushcraft/">balades en forêt</a> sont salutaires en revenant à des basiques et à leurs valeurs. Mais ce n’est pas suffisant.</p>
  523. <h3>Spiritualité</h3>
  524. <p><em>Note : je parle bien ici de spiritualité et non de religion qui n’en est qu’une forme d’instanciation inadaptée aux défis actuels.</em></p>
  525. <blockquote>
  526. <p>Avec le biopouvoir, on n’est plus là-dedans, on est dans l’entreprise de soi, et le « contrôle », qui est un paradigme différent, un autre mode de gouvernementalité. Cela ne passe plus par la discipline, mais justement par la prise de risque individuelle et par l’illusion de l’autonomie de sa conduite. Aujourd’hui, on est pris dans un capitalisme cognitif et affectif qui embarque les subjectivités, non pas tant sur un mode disciplinaire, mais beaucoup plus sur le mode de la motivation, soit une mobilisation de l’intérieur des sujets, comme le font les religions.</p>
  527. <p><cite><em><a href="http://jefklak.org/vivez-a-vos-risques-et-perils-mais-vivez-dociles-et-previsibles/">« Vivez à vos risques et périls, mais vivez dociles et prévisibles »</a></em> (<a href="/david/cache/db2c574ef79ba59a6f46898fd3843c55/">cache</a>)</cite></p>
  528. </blockquote>
  529. <p>L’État et sa violence légitime qui est de moins en moins légitime craquelle de toutes parts. Inventer de nouvelles formes de gouvernances entre les membres d’un groupe et entre les groupes eux-mêmes pour passer du vivre seul au être et aimer ensemble et croire qu’une alternative est encore possible.</p>
  530. <p>Ne pas forcément penser qu’il y a quelque chose au-dessus mais que l’on peut atteindre ensemble un nouvel état. Tester d’autres échelles, d’autres rapports de force, d’autres mises en communs.</p>
  531. <h3>Congruence</h3>
  532. <blockquote>
  533. <p>Full disclosure: I believe that groups are mostly held together by good feelings, and the explicit structure is just an artificial scaffold. Enspiral’s written agreements are important because of what they symbolise, not necessarily because of the precise words they say. I think a group is held together by history and relationships and collaborative meaning-making and amorous feelings and psychological responses and co-imagined futures and shared identity, and yes some written agreements and explicit roles too, but I’m convinced the explicit stuff is just the tip of the iceberg.</p>
  534. <p>The explicit stuff is a lot easier to talk about, because we have shared language for it. So it’s easy for us to get distracted and focus on the agreements and lose sight of the underlying meaning that they signify. It’s easy to confuse <em>what we say</em> for <em>what we mean</em>. At times during the Enspiral journey, I’ve felt like we’ve given more attention to the abstract structure of our organisation and lost sight of the <em>tangible things that people are doing</em>. We mistake the symbols for what they symbolise.</p>
  535. <p><cite><em><a href="https://medium.com/the-tuning-fork/the-vibes-theory-of-organisational-design-937a73f791cd">The Vibes Theory of Organisational Design</a></em> (<a href="/david/cache/32a683b164cc4bed15fa506b046acbfb/">cache</a>)</cite></p>
  536. </blockquote>
  537. <p>Il faudrait expérimenter d’autres rapports au travail — mais aussi dans la famille — pour passer du travailler seul au faire ensemble. S’autoriser à ré-interroger périodiquement ce qui nous lie et ce qui nous fait avancer dans une direction commune. Accepter l’autonomie et les erreurs.</p>
  538. <p>Ne pas réduire les aspérités mais au contraire s’en servir pour qu’elles deviennent motrices. Trouver des moyens de transmettre ces apprentissages de différentes manières afin de ne pas réduire les émotions associées.</p>
  539. <h3>Agilité</h3>
  540. <p>L’agilité comme moyen de transformer l’enseignement en apprentissage. Que les savoirs acquis en groupe devienne une connaissance commune, transformant un <em>savoir faire</em> en <em>pouvoir faire</em>.</p>
  541. <p>Se remettre en question collectivement de manière itérative et accepter la diversité d’un groupe. Se rendre compte qu’il s’agit à la fois de sa force et de sa faiblesse. Réduire la durée des boucles de rétro-actions. Faire du partage de ces expériences un objectif en soi.</p>
  542. <p>Essaimer, butiner, partager le miel… en espérant ne pas subir le même sort que les abeilles.</p>
  543. <h2>Conclusion</h2>
  544. <blockquote>
  545. <p>Quelle chose méprisable que l’homme, s’il ne s’élève pas au-dessus de l’humanité ! Tant que nous luttons contre nos passions, que faisons-nous de si grand ? Même si nous sommes les plus forts, nos victimes sont des difformités. Est-ce de quoi nous vanter, que de ne pas ressembler aux derniers des hommes ? Je ne vois pas que ce soit un motif de satisfaction d’être plus robuste qu’un malade. La différence est grande entre la vraie vigueur et la simple santé. Tu as échappé aux vices ; ton front ne ment pas ; tu ne règles pas ton langage sur la volonté d’autrui ; ton cœur est sans détour ; chez toi aucune trace de cette avarice, qui se refuse à elle-même ce qu’elle enlève aux autres ; de ce luxe qui gaspille honteusement l’argent pour le récupérer plus honteusement encore ; de cette ambition qui ne pousse aux dignités que par des voies indignes. Eh bien ! tu n’es encore arrivé à rien ; tu t’es délivré de bien des maux, mais pas encore de toi-même. La vertu que nous voulons est grande, non que l’absence de mal constitue le bonheur, mais elle donne à l’âme plus de liberté, elle la prépare à connaître le ciel, elle la rend digne de partager le sort de Dieu.</p>
  546. <p><cite><em>Recherches sur la Nature</em>, Sénèque, 62</cite></p>
  547. </blockquote>
  548. <p>Ce qui m’intéresse aujourd’hui, ce n’est pas tant de détecter <a href="https://fr.wikipedia.org/wiki/Th%C3%A9orie_du_cygne_noir">le cygne noir</a> qui va mener à l’effondrement, ni même d’envisager les premières semaines qui vont suivre mais de penser à ce qui pourrait être reconstruit ensuite. Quelles valeurs voudra-t-on mettre comme éléments fondateurs de cette nouvelle humanité ? À quelles échelles trouvera-t-on pertinent de se regrouper ? Quels deviendront nos accomplissements à titres individuel et collectif ? Que va-t-on apprendre et transmettre de cette expérience ?</p>
  549. <p><strong>Tout reste à explorer et c’est notamment ce que je trouve enthousiasmant dans ce futur incertain.</strong></p>
  550. </article>
  551. <figure class="image" property="schema:image">
  552. <img src="/static/david/blog/2018/commodite-effondrement.jpg" alt="" />
  553. </figure>
  554. <nav id="jumpto">
  555. <p>
  556. <a rel=prev href="/david/blog/2018/into-the-camp/">← Into the Camp</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2018/into-the-mice/">Into the Mice →</a>
  557. </p>
  558. </nav>
  559. <footer>
  560. <div>
  561. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  562. <p>
  563. Bonjour/Hi!
  564. 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>
  565. 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>).
  566. </p>
  567. <p>
  568. 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>.
  569. </p>
  570. <p>
  571. Les dernières publications hebdomadaires sont :
  572. </p>
  573. <ul class="with_columns">
  574. <li>
  575. <a href="/david/stream/2019/12/31/">Merci</a>
  576. </li>
  577. <li>
  578. <a href="/david/stream/2019/12/27/">Intemporels</a>
  579. </li>
  580. <li>
  581. <a href="/david/stream/2019/12/24/">Outils</a>
  582. </li>
  583. <li>
  584. <a href="/david/stream/2019/12/17/">Origines</a>
  585. </li>
  586. <li>
  587. <a href="/david/stream/2019/12/10/">Publier</a>
  588. </li>
  589. <li>
  590. <a href="/david/stream/2019/12/03/">En forêt</a>
  591. </li>
  592. <li>
  593. <a href="/david/stream/2019/11/26/">Ecocentric</a>
  594. </li>
  595. <li>
  596. <a href="/david/stream/2019/11/19/">Se livrer</a>
  597. </li>
  598. <li>
  599. <a href="/david/stream/2019/11/12/">Dépendances</a>
  600. </li>
  601. <li>
  602. <a href="/david/stream/2019/11/05/">Positif</a>
  603. </li>
  604. <li>
  605. <a href="/david/stream/2019/10/29/">Dettes</a>
  606. </li>
  607. <li>
  608. <a href="/david/stream/2019/10/22/">Privilèges</a>
  609. </li>
  610. <li>
  611. <a href="/david/stream/2019/10/15/">Discrétion</a>
  612. </li>
  613. <li>
  614. <a href="/david/stream/2019/10/08/">Désespérance</a>
  615. </li>
  616. <li>
  617. <a href="/david/stream/2019/10/01/">Présent</a>
  618. </li>
  619. <li>
  620. <a href="/david/stream/2019/09/24/">Manifester</a>
  621. </li>
  622. <li>
  623. <a href="/david/stream/2019/09/17/">Arpenter</a>
  624. </li>
  625. <li>
  626. <a href="/david/stream/2019/09/10/">Nostalgie</a>
  627. </li>
  628. <li>
  629. <a href="/david/stream/2019/09/03/">Déconstruire</a>
  630. </li>
  631. <li>
  632. <a href="/david/stream/2019/08/27/">Documenter</a>
  633. </li>
  634. <li>
  635. <a href="/david/stream/2019/08/20/">Frustration</a>
  636. </li>
  637. <li>
  638. <a href="/david/stream/2019/08/13/">Holisme</a>
  639. </li>
  640. <li>
  641. <a href="/david/stream/2019/08/06/">1%</a>
  642. </li>
  643. <li>
  644. <a href="/david/stream/2019/07/30/">Exemplarité</a>
  645. </li>
  646. <li>
  647. <a href="/david/stream/2019/07/23/">Timelines</a>
  648. </li>
  649. <li>
  650. <a href="/david/stream/2019/07/16/">Écoute</a>
  651. </li>
  652. <li>
  653. <a href="/david/stream/2019/07/02/">Anxiété</a>
  654. </li>
  655. <li>
  656. <a href="/david/stream/2019/06/21/">À lier</a>
  657. </li>
  658. <li>
  659. <a href="/david/stream/2019/06/14/">Pauvreté</a>
  660. </li>
  661. <li>
  662. <a href="/david/stream/2019/06/07/">Amateur</a>
  663. </li>
  664. <li>
  665. <a href="/david/stream/2019/05/31/">Pollution</a>
  666. </li>
  667. <li>
  668. <a href="/david/stream/2019/05/24/">Apaisement</a>
  669. </li>
  670. <li>
  671. <a href="/david/stream/2019/05/10/">Folie</a>
  672. </li>
  673. <li>
  674. <a href="/david/stream/2019/05/03/">Sympathie</a>
  675. </li>
  676. <li>
  677. <a href="/david/stream/2019/04/12/">Péremption</a>
  678. </li>
  679. <li>
  680. <a href="/david/stream/2019/04/05/">Définitions</a>
  681. </li>
  682. <li>
  683. <a href="/david/stream/2019/03/29/">Acceptation</a>
  684. </li>
  685. <li>
  686. <a href="/david/stream/2019/03/22/">Dissonance</a>
  687. </li>
  688. <li>
  689. <a href="/david/stream/2019/03/15/">Reconnaissance</a>
  690. </li>
  691. <li>
  692. <a href="/david/stream/2019/03/08/">Lecture</a>
  693. </li>
  694. <li>
  695. <a href="/david/stream/2019/03/01/">Journaux</a>
  696. </li>
  697. <li>
  698. <a href="/david/stream/2019/02/22/">Écriture</a>
  699. </li>
  700. <li>
  701. <a href="/david/stream/2019/02/15/">Kyriarchie</a>
  702. </li>
  703. <li>
  704. <a href="/david/stream/2019/02/08/">Mots-serrures</a>
  705. </li>
  706. <li>
  707. <a href="/david/stream/2019/02/01/">Sans voie</a>
  708. </li>
  709. <li>
  710. <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
  711. </li>
  712. <li>
  713. <a href="/david/stream/2019/01/18/">Agilité</a>
  714. </li>
  715. <li>
  716. <a href="/david/stream/2019/01/11/">Métaphores</a>
  717. </li>
  718. <li>
  719. <a href="/david/stream/2019/01/04/">Balbutiements</a>
  720. </li>
  721. </ul>
  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. <script>
  763. /* Service workers */
  764. if (navigator.serviceWorker) {
  765. window.addEventListener('load', function () {
  766. var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
  767. function sendLinks (selector) {
  768. var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
  769. return link.getAttribute('href')
  770. })
  771. links.push(location.pathname) // Put the current page in cache too.
  772. navigator.serviceWorker.controller.postMessage({ links: links })
  773. }
  774. navigator.serviceWorker.getRegistration()
  775. .then(function (registration) {
  776. if (!registration || !navigator.serviceWorker.controller) {
  777. return navigator.serviceWorker.register('/serviceworker.js')
  778. .then(navigator.serviceWorker.ready)
  779. .then(function () {
  780. console.log('[ServiceWorker] Ready to go!')
  781. })
  782. .catch(console.error.bind(console))
  783. } else {
  784. console.log('[ServiceWorker] Send links via registration')
  785. sendLinks(selector)
  786. }
  787. })
  788. navigator.serviceWorker.addEventListener('controllerchange', function () {
  789. console.log('[ServiceWorker] Send links via controller change')
  790. sendLinks(selector)
  791. })
  792. navigator.serviceWorker.addEventListener('message', function (event) {
  793. var link = document.querySelector('a[href="' + event.data.link + '"]')
  794. if (event.data.status && link) {
  795. link.style.backgroundColor = '#2d7474'
  796. link.style.color = '#f0f0ea'
  797. link.setAttribute('title', 'En cache pour consultation sans connexion')
  798. }
  799. })
  800. })
  801. } else {
  802. console.warn('[ServiceWorker] No cache for old browsers.')
  803. }
  804. </script>