100 changed files with 51761 additions and 0 deletions
+ 537
- 0
cache/00011f902c5c3ba730866d4e86287a97/index.html
View File
| @@ -0,0 +1,537 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Break out of the echo chamber (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://andy-bell.design/wrote/break-out-of-the-echo-chamber/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Break out of the echo chamber (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://andy-bell.design/wrote/break-out-of-the-echo-chamber/">Source originale du contenu</a></h3> | |||
| <p>As much value as Twitter can bring to the web community, in terms of discussion: one thing it’s terrible for is statements, like this:</p> | |||
| <blockquote><p>“...Web Components have failed”</p><p><a href="https://twitter.com/kylemathews/status/1114288205367525377?s=21">Kyle Mathews - 05/04/2019</a></p></blockquote> | |||
| <p>This particular example of absolutistism is more than likely to be framed as a comparison to React, by proxy of the author’s apparent interests. That statement in the context of the wider web is fundamentally wrong, though. But, it’s also an understandable opinion to hold based on the common attitude of what I presume is his echo chamber is: the React community.</p> | |||
| <p>I’m also probably in an echo chamber—the so-called “Old Guard”—so I also often find myself making absolutist statements of the opposite opinion. I am working hard to get out of my echo chamber, though by trying to follow more moderate members of the React community to try to see things from their perspective, rather than my own pessimistic perspective.</p> | |||
| <p>We should try hard to break out of our echo chambers because if not, it’s easy to forget and discount the wider community, which often results in less desirable outcomes. Brexit is now a classic example of this, because in my echo chamber, we were all flabbergasted at the result, because we all generally float around the left of the political spectrum. We’re all mostly middle class, too. A serious lesson was learned about how people who were systemically screwed over by successive governments were presented with genuine change and understandably snatched at it. Yet, people in my echo chamber have the audacity to call these voters “stupid”, which is incredibly unfair and short-sighted.</p> | |||
| <p><hr/><p>So much of my echo chamber is consumed by people, including myself, who have a very dim view of JavaScript frameworks being thrown at everything, arguing with the people who are in the process of throwing JavaScript frameworks at everything. We forget one very important thing, though: we represent the <em>minority</em> of the web community and our arguments probably look very pointless and silly to the <em>majority</em>.</p><p>The <em>majority</em> of the web community are probably building—y’know—modest websites. There’s a reason why <a href="https://w3techs.com/technologies/details/cm-wordpress/all/all">WordPress powers 33.5% of the web</a>: because most of the web isn’t big applications or design systems—it’s straight-up websites. We would all do well to remember that.</p><p>To tie all this back to Web Components and React: saying “Web Components have failed” in the context of a certain, <em>minority</em> echo chamber might well be true. Web Components are, however, probably going to be more useful to the <em>majority</em> of the web community, who’d benefit from an encapsulated, low-level primitive to enhance their modest website. Let’s also not forget that they are currenly very useful to folks building all sorts of exciting things.</p><p>We should try harder as a whole web community to break out of our echo chambers, and appreciate other’s, conflicting views more. This includes me, especially.</p></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://andy-bell.design/wrote/break-out-of-the-echo-chamber/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 5
- 0
cache/00011f902c5c3ba730866d4e86287a97/index.md
View File
| @@ -0,0 +1,5 @@ | |||
| title: Break out of the echo chamber | |||
| url: https://andy-bell.design/wrote/break-out-of-the-echo-chamber/ | |||
| hash_url: 00011f902c5c3ba730866d4e86287a97 | |||
| <p>As much value as Twitter can bring to the web community, in terms of discussion: one thing it’s terrible for is statements, like this:</p><blockquote><p>“...Web Components have failed”</p><p><a href="https://twitter.com/kylemathews/status/1114288205367525377?s=21">Kyle Mathews - 05/04/2019</a></p></blockquote><p>This particular example of absolutistism is more than likely to be framed as a comparison to React, by proxy of the author’s apparent interests. That statement in the context of the wider web is fundamentally wrong, though. But, it’s also an understandable opinion to hold based on the common attitude of what I presume is his echo chamber is: the React community.</p><p>I’m also probably in an echo chamber—the so-called “Old Guard”—so I also often find myself making absolutist statements of the opposite opinion. I am working hard to get out of my echo chamber, though by trying to follow more moderate members of the React community to try to see things from their perspective, rather than my own pessimistic perspective.</p><p>We should try hard to break out of our echo chambers because if not, it’s easy to forget and discount the wider community, which often results in less desirable outcomes. Brexit is now a classic example of this, because in my echo chamber, we were all flabbergasted at the result, because we all generally float around the left of the political spectrum. We’re all mostly middle class, too. A serious lesson was learned about how people who were systemically screwed over by successive governments were presented with genuine change and understandably snatched at it. Yet, people in my echo chamber have the audacity to call these voters “stupid”, which is incredibly unfair and short-sighted.</p><hr/><p>So much of my echo chamber is consumed by people, including myself, who have a very dim view of JavaScript frameworks being thrown at everything, arguing with the people who are in the process of throwing JavaScript frameworks at everything. We forget one very important thing, though: we represent the <em>minority</em> of the web community and our arguments probably look very pointless and silly to the <em>majority</em>.</p><p>The <em>majority</em> of the web community are probably building—y’know—modest websites. There’s a reason why <a href="https://w3techs.com/technologies/details/cm-wordpress/all/all">WordPress powers 33.5% of the web</a>: because most of the web isn’t big applications or design systems—it’s straight-up websites. We would all do well to remember that.</p><p>To tie all this back to Web Components and React: saying “Web Components have failed” in the context of a certain, <em>minority</em> echo chamber might well be true. Web Components are, however, probably going to be more useful to the <em>majority</em> of the web community, who’d benefit from an encapsulated, low-level primitive to enhance their modest website. Let’s also not forget that they are currenly very useful to folks building all sorts of exciting things.</p><p>We should try harder as a whole web community to break out of our echo chambers, and appreciate other’s, conflicting views more. This includes me, especially.</p> | |||
+ 579
- 0
cache/000c16d784ca75d3bc0a86c8c5955e2b/index.html
View File
| @@ -0,0 +1,579 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Canada climate change: Quebec’s islands are crumbling (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.washingtonpost.com/graphics/2019/world/climate-environment/canada-quebec-islands-climate-change/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Canada climate change: Quebec’s islands are crumbling (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://www.washingtonpost.com/graphics/2019/world/climate-environment/canada-quebec-islands-climate-change/">Source originale du contenu</a></h3> | |||
| <div class="pg-entry" id="newJersey"><p id="text-HE5HYJZDD5BRRIMZHSROPDIHQE" class="pg-body-copy">ILES-DE-LA-MADELEINE, QUEBEC — High on a bluff overlooking the Gulf of St. Lawrence, Adele Chiasson no longer ventures into her backyard for a simple reason: It is falling into the sea.</p><p id="text-RHH5NLSAFJBMHGXZ6J6ECVZJNU" class="pg-body-copy">“I’m afraid to go out there,” the widow said one afternoon from the safety of her kitchen. She nodded toward the 70-foot-tall, red sandstone cliffs out back that creep closer with each passing year. “You never know when a section will fall off.”</p><p id="text-RFJKUOOH3RFYFG2DJ3JSDUPS3Y" class="pg-body-copy">Decades ago, when she and her husband moved to this modest house with its majestic views, they never imagined a vanishing coastline might one day drive them away. But the sea long ago claimed the ground where their children once played. An abandoned road out back has mostly crumbled into the surf below. Two of her neighbor’s homes have been moved inland.</p><p id="text-6ZAIMIKDNNDKXOLESG67GP7MKI" class="pg-body-copy">The day might come when she, too, will be forced to abandon this precarious patch of earth. “I might not have a choice,” she says.</p><div id="image-PAPLE7VUCEI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-PAPLE7VUCEI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/PAPLE7VUCEI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/PAPLE7VUCEI6TLGIDWCHXLGKOM.jpg" src="./img/200/PAPLE7VUCEI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>An abandoned road is crumbling into the Gulf of St. Lawrence. Adele Chiasson, a widow who lives nearby, said visitors “are shocked at the changes” that erosion has wrought on the cliffs. <span></span></p></div> | |||
| </div> | |||
| <p id="text-WGKKA76KVRAMNKZ43OO7E5IBOM" class="pg-body-copy">The more than 12,000 residents of this windswept Canadian archipelago are facing a growing number of gut-wrenching choices, as extreme climate change transforms the land and water around them. Season after season, storm after storm, it is becoming clearer that the sea, which has always sustained these islands, is now their greatest threat.</p><div class="temp-changer"><i class="fa fa-exclamation-circle" aria-hidden="true"></i><p class="pg-body-copy temp-text">Click any temperature underlined in the story to convert between Celsius and Fahrenheit</p></div> | |||
| <p id="text-AUIR3VMCAJGTVKELCTTV5WFHNA" class="pg-body-copy first-temp">A Washington Post examination of the fastest-warming places around the world has found that the Magdalen Islands, as they are known in English, have warmed <span>2.3 degrees Celsius (4.2 degrees Fahrenheit)</span> since the late 19th century, twice the global average.</p><p id="text-B2LW3JI7ZZHAZPUP6EWNOERZHE" class="pg-body-copy">As in <a href="https://www.washingtonpost.com/graphics/2019/national/climate-environment/climate-change-america/">New England</a>, <a href="https://www.washingtonpost.com/graphics/2019/national/climate-environment/climate-change-siberia/">Siberia</a> and other global hot spots<b> </b>at higher latitudes, winters here are heating up even more quickly, eclipsing <span>3 degrees Celsius (5.4 degrees Fahrenheit)</span>. That change has fueled freezing and thawing cycles here that wreak havoc on the famous — and famously fragile — sandstone cliffs.</p></div> | |||
| <p id="text-RZL6B2FAU5DA7HX3GYDWS2H6KQ" class="pg-body-copy">The sea ice that used to encase the islands most winters, shielding them from the brunt of fierce storms and pounding waves, is shrinking at a rate of about 555 square miles annually, data shows. That’s a swath of ice larger than Los Angeles.</p> | |||
| <p id="text-O3FXN2VI2RFGVNENS2YN6MR5OU" class="pg-body-copy">Even as that natural defense collapses, sea levels have been rising at a rate roughly twice the global norm in recent years, researchers say.</p> | |||
| <p id="text-ZB26CKDBWVCYPBJJ53WCYR7OAU" class="pg-body-copy">The result is an escalating battle against erosion and flooding — one that a growing number of coastal populations face, from islands in the South Pacific to communities along the U.S. East Coast.</p> | |||
| <p id="text-E3A4T7VOHRGV7F7LIGU67454SQ" class="pg-body-copy">In the Magdalen Islands, the consequences are unmistakable: Some parts of the shoreline have lost as much as 14 feet per year to the sea over the past decade. Key roads face perpetual risk of washing out. The hospital and the city hall sit alarmingly close to deteriorating cliffs. Rising waters threaten to contaminate aquifers used for drinking water. And each year, the sea inches closer to more homes and businesses.</p> | |||
| <div class="bigbox-wrapper text-center"> | |||
| <p id="text-43MNH2HJVRBXBM6D7UQIVQT3H4" class="pg-body-copy">Guillaume Marie, a geography professor at the University of Quebec at Rimouski, has studied coastal hazards around Quebec for years. He said the islands’ inhabitants are pioneers of a sort, as they wrestle with the daily challenges posed by climate change.</p><p id="text-G7MBIGUQV5EW7OT5LFAXGOAZT4" class="pg-body-copy">“In Quebec, it’s clearly the most vulnerable place,” he said. “They are the first ones who are facing these kinds of problems.”</p><p id="text-VB7GYEHPCNEYLGWLJF4IVWQEKU" class="pg-body-copy">Even the good news is worrisome, as Mario Cyr, a Magdalen Islands native and renowned underwater cinematographer, discovered last summer.</p><p id="text-EXZ2KAYM5ZBHZNVTFMHNODX4JE" class="pg-body-copy">Cyr, who has crisscrossed the world from the Arctic to Antarctica to film nature documentaries, was astounded by what he found when he went diving in the Gulf of St. Lawrence.</p><p id="text-NUIW2K7BCBCGVLQO6GHURII5DE" class="pg-body-copy">It was the end of the annual lobster season. Fishing crews had hauled millions of pounds of lobster from the gulf, reveling in historic catches. But when Cyr ventured roughly 50 feet down, he saw that the seafloor remained full of lobsters, almost as if the fishing had yet to begin.</p><p id="text-AWQ5UUM6PJE6HG25OUVCRU35IA" class="pg-body-copy">“It’s not normal,” he said one morning inside Bistro Plongée Alpha, the restaurant he owns on the northern tip of the islands.</p><div id="image-KQ7VAUD5XZERZDGOXTN4X73YNY" class="flow-wrapper"><img id="image-YN3PP2FUBYI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/YN3PP2FUBYI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/YN3PP2FUBYI6TLGIDWCHXLGKOM.jpg" src="./img/200/YN3PP2FUBYI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>The shoreline has crept within 20 feet of a home off Route 199. <span></span></p></div> | |||
| <img id="image-MOX2MXFUCMI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/MOX2MXFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/MOX2MXFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/MOX2MXFUCMI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Myriam-Esther Hadland, left, and Tanya Deraspe install signs warning people to stay off dunes undergoing restoration. <span></span></p></div> | |||
| <img id="image-XEFPPXFUCMI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/XEFPPXFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/XEFPPXFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/XEFPPXFUCMI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>A sign warns about the danger of unstable cliffs. <span></span></p></div> | |||
| </div> | |||
| <p id="text-LJMYWEP5YRAU3J6HQH6YVMRSYY" class="pg-body-copy">Like <a href="https://www.washingtonpost.com/graphics/2019/national/climate-environment/climate-change-world/">baffled clammers</a> in Uruguay and the <a href="https://www.washingtonpost.com/graphics/2019/national/gone-in-a-generation/#lobster">struggling lobster industry</a> off the fast-warming coast of Rhode Island, islanders here are anxious about the shifting sea. The deep waters of the gulf also have warmed more than 2 degrees Celsius over the past century, scientists have found, raising concerns about the fisheries that power the economy in communities around coastal Quebec.</p><p id="text-4PO25D44HNCFZD3IUW3JQIOHTM" class="pg-body-copy">As residents witness the changes, they worry their children and grandchildren will inherit a far different place than the one they have always known. And as the growing problems threaten fragile infrastructure, local officials spend their days figuring out how to try to hold back the encroaching sea — and where to simply surrender to it.</p><div id="lobster-video" class="looping-video pg-visual" data-muted="true" data-uuid="fdad73d5-9c7f-4963-a88e-21d7d32dfb96"></div> | |||
| <div class="pg-caption video-caption"><p>Lobstermen in the harbor at Grande-Entrée unload another stellar catch.</p></div> | |||
| <h3 class="pg-body-copy pg-h3">‘It used to be all ice’</h3><p id="text-WRSQXXKLWFGJVN7JJCQ2U7F4ZY" class="pg-body-copy">They remember the ice.</p><p id="text-CAOS6NYDUNA5XHPFQ76ITJNXBE" class="pg-body-copy">The fishermen, the mayor, the 101-year-old woman in her hilltop house built with wood from an old shipwreck — all of them describe the mystical look the frozen gulf once had in winter and the feeling of utter isolation from the rest of the world.</p><p id="text-RFBUTNVCUBGW7EBTOPESHW6HRQ" class="pg-body-copy">“It used to be all ice, as far as the eye could see. . . . You’d look out, and all you could see was white. Now you look out, and it’s just the ocean,” said Geraldine Burke, now 72. “The changes I’ve seen in the last 10 years have been astounding.”</p><p id="text-4AYL2MYDMBC6BCQDQHMCOUHJPQ" class="pg-body-copy">“My grandfather said he could remember when there was one winter with no ice,” said Serge Bourgeois, 53, the planning director for the municipality of Iles-de-la-Madeleine. Now, if ice materializes at all around the islands in winter, “it is exceptional.”</p><p id="text-CG4AFOVPVJCDXL3FKPPUPALMIM" class="pg-body-copy">While year-to-year variability exists, the amount of sea ice that blankets the Gulf of St. Lawrence is shrinking at a rate of roughly 12 percent per decade, <a href="https://nsidc.org/data/smmr_ssmi_ancillary/regions/lawrence.html">according to data</a> from the National Snow and Ice Data Center.</p><p id="text-UZ4SNJLHJJETJINIDR4CYKHT5A" class="pg-body-copy">Walt Meier, a senior research scientist at the center, said the loss of sea ice leaves the islands exposed and ripe for erosion. “The presence of ice acts like a cover on the ocean that dampens the waves of winter storms,” he said.</p><div id="image-OYQILQFUCAI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-OYQILQFUCAI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/OYQILQFUCAI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/OYQILQFUCAI6TLGIDWCHXLGKOM.jpg" src="./img/200/OYQILQFUCAI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>Rhoda Davies, 101, has lived almost all her life in the same hilltop house in Old Harry, constructed with wood from a shipwreck. Davies said winters on the islands now have far less ice and snow than those of her youth. “It must be climate change, wouldn’t you say?” she said. <span></span></p></div> | |||
| </div> | |||
| <p id="text-LEWNF2GWWVBG7IQSJ4VZ2O2XTI" class="pg-body-copy">A number of harrowing storms have clobbered the islands in recent years, including last November, when 75 mph winds and massive waves knocked out power and communication with mainland Quebec. Sections of the main road were damaged and sand dunes obliterated. The Canadian military <a href="https://globalnews.ca/news/4713452/military-plane-headed-to-iles-de-la-madeleine-after-massive-wind-storm-cuts-communications/">flew in workers</a> to help restore power and check on residents.</p><p id="text-PTACZ7OWFNEA7C372KXIV6TITM" class="pg-body-copy">Isabelle Cormier, 42, who returned last year from Australia to raise her children on her native islands, said that storm left many people particularly rattled.</p><p id="text-CWOOAL4BQBG2VI7PPUYIWYHLCE" class="pg-body-copy">“This is home, and hopefully it will be here for a while. But I don’t know, it’s going quick,” said Cormier, who saw her family’s small beach cottage inundated after a towering dune that had shielded it for decades washed away in hours. “To witness it in one lifetime, it’s shocking.”</p><p id="text-BEVERYL2GBCSTPSUGU5W6CGNHQ" class="pg-body-copy">The islands have long been home to hardy French and English seafarers, who are no stranger to the risks posed by nature.</p><p id="text-6D4QBQTMN5EBVCPGRMGXDLGSBA" class="pg-body-copy">Inside a small, century-old church in Old Harry, hundreds of black-and-white portraits hang in tribute to those lost at sea over the decades.</p><p id="text-5L32VAY3XBCU5PZU6OSHB7IRDI" class="pg-body-copy">The <a href="https://www.tourismeilesdelamadeleine.com/en/discover-the-islands/unique-features-of-the-region/history/">Acadian refugees</a> who colonized the archipelago in the latter half of the 18th century brought with them their unique strain of French and their Catholic faith. Other residents, including the islands’ minority English-speaking community, trace their roots to the survivors of <a href="http://www.bbc.com/travel/gallery/20170523-a-tempestuous-isle-of-1000-shipwrecks">shipwrecks</a> that claimed vessels off these shores in the 18th and 19th centuries.</p><p id="text-AMVWW2SADFBJJA6QQGC5ETRWKA" class="pg-body-copy">The land they occupy is an Edward Hopper landscape come to life. Brightly colored houses dot rolling green hills. Lighthouses cling to jagged sandstone cliffs. Massive sand dunes guard salt marshes and serene lagoons, and unspoiled beaches stretch for miles.</p><div id="image-2MPMGPTMARCSDCVCPBDD6AT3HQ" class="pg-visual"><img id="image-ZG5HDTVUCQI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/ZG5HDTVUCQI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/ZG5HDTVUCQI6TLGIDWCHXLGKOM.jpg" src="./img/200/ZG5HDTVUCQI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>A boat sits on the rolling landscape of the Magdalen Islands, which have warmed at twice the global average since the late 19th century. <span></span></p></div> | |||
| </div> | |||
| <p id="text-25AF3LBHOZCKTP72IEF2WQHWSI" class="pg-body-copy">But as the sea ice that traditionally protected these islands shrinks, the sea that surrounds them is swelling.</p><p id="text-VZSOFAGHDFBWVPFAB4AZCBOMFY" class="pg-body-copy">Between 1964 and 2013, the waters along the coast of the archipelago rose an average of about 4.3 millimeters per year. Since 2000, that rate has been closer to 7 millimeters, or more than a quarter of an inch per year, said Marie, the geography professor. That trend is <a href="https://www.ipcc.ch/srocc/home/">expected to continue</a>.</p><p id="text-HTDSP7ONZZDTHPX5N6H4BMJMGU" class="pg-body-copy">While the numbers seem small and the data covers only a limited period, the change could result in multiple feet of sea level rise by century’s end.</p><p class="pg-interstitial-link"><a href="https://www.washingtonpost.com/podcasts/post-reports/the-canadian-islands-crumbling-into-the-sea/"><i>[Post Reports: The Canadian islands crumbling into the sea.]</i></a></p><p id="text-FFDD2C7RNZASNKOLT2DAOT3EFI" class="pg-body-copy">For more than a decade, researchers have maintained a network of more than 1,100 coastal monitoring stations around the islands’ perimeter, which paint a portrait of how erosion is altering the shoreline. While some spots are relatively stable, others have steadily receded year after year. Severe storms have claimed as much as 55 feet of shoreline all at once.</p><p id="text-DO2KFVRWJJFLHN6WGOITNXBTPY" class="pg-body-copy">The Post relied on data from Berkeley Earth, an independent group that analyzes temperature data, for its findings about how the islands have already warmed more than 2 degrees Celsius — a threshold world leaders have pledged not to allow the globe to surpass.</p><div id="temp-chart-container"><div class="temp-chart_key">The region around <span class="zyryanka">the Magdalen Islands</span> has experienced warming nearly twice the <span class="global">global average</span></div> | |||
| <div id="temp-chart"></div> | |||
| <div class="wpv-caption">Source: Berkeley Earth</div> | |||
| </div> | |||
| <p id="text-FSNQVZ2NXJAHBJEHTRSWCA6IT4" class="pg-body-copy">Canadian researchers, who drew on air temperature records dating to 1873, have documented a similar change. Researcher <a href="https://profils-profiles.science.gc.ca/en/profile/peter-galbraith">Peter Galbraith</a> and colleagues found the region has warmed about <span>1.9 degrees Celsius (3.4 degrees Fahrenheit)</span>.</p><p id="text-HUQTYRXP4NFPFFZZHHDBSVDADA" class="pg-body-copy">Milder winters and longer summers have kept the tourists coming — some 80,000 trekked here last year to wind surf, bike and bird-watch — many arriving on a ferry that now runs year-round.</p><p id="text-JDMHHFVZ3FCJZCAX3YS45MNXZE" class="pg-body-copy">But the islands’ fragility has brought them a sort of grim notoriety. Time magazine put the Magdalen Islands <a href="https://time.com/42294/amazing-places-visit-vanish/">on its list</a> of “10 amazing places to visit before they vanish.” Architectural Digest <a href="https://www.architecturaldigest.com/gallery/endangered-places-to-visit-now">included them</a> on its “30 places to visit before they’re gone forever.”</p><p id="text-O7NAYF5JQBETXM5ZNZXH6ILSCA" class="pg-body-copy">Madelinots, as locals call themselves, have no intention of vanishing anytime soon. But researchers estimate that without serious action, hundreds of structures and miles of roads could fall victim to erosion and flooding in coming decades.</p><p id="text-GUQMJPHIIJB6VNJLVFHU7JC4MI" class="pg-body-copy">“We can try adaptation. We must try it,” Marie said. “But the solutions could be very expensive.”</p><div id="image-AWWL6DFUCAI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-AWWL6DFUCAI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/AWWL6DFUCAI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/AWWL6DFUCAI6TLGIDWCHXLGKOM.jpg" src="./img/200/AWWL6DFUCAI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>Parts of a popular bike path have been closed near Cap-aux-Meules. Erosion from Hurricane Dorian caused even more damage to the path in September, as the cliffs — which residents call capes — inched closer to the nearby hospital and municipal building. <span></span></p></div> | |||
| </div> | |||
| <h3 class="pg-body-copy pg-h3">‘Not everything can be saved’</h3><p id="text-BELMGVBEDFFNFEHJXOJ5W7IJYA" class="pg-body-copy">At 17, Bourgeois left his native islands to study in Montreal. Eventually, like many Madelinots, he felt the pull of home.</p><p id="text-KHLTA6VMH5H4FMBQ3DHY6QAKPQ" class="pg-body-copy">When he began his career, the idea that climate change would seriously threaten the islands seemed a stretch. Now, he spends his days worrying about how to protect infrastructure from crumbling cliffs, eroding dunes and rising seas.</p><p id="text-7S5YIRI3XFDPTHBFLYBDNUQJYA" class="pg-body-copy">“It wasn’t part of the job description. Now, it’s my priority,” he said. “In 30 years, it has completely changed.”</p><p id="text-KHVIGVOXONGWHMDJBAKA2RZL3Q" class="pg-body-copy">As climate change bears down on the islands, he views them as a laboratory, “a place where we can study ways to adapt.”</p><p id="text-OCMDHWEIHRG3NKI4DXPM7YZINE" class="pg-body-copy">In recent years, local officials have singled out a half dozen locations<b> </b>that must somehow be protected — including the municipal headquarters and the hospital.</p><p id="text-JO3REY4PHZEV5D2UMCZ2KKT6CE" class="pg-body-copy">Another priority is the low-lying, historic fishing village of La Grave, a bustling tourist destination lined with shops and restaurants. Its weatherworn buildings sit on a spit of rocky beach only feet from the rising gulf.</p><p id="text-GANBL4UA4JCWPFF247ODX5GKJE" class="pg-body-copy">Marie-Claude Vigneault, co-owner of Café de la Grave, said last fall’s storm ripped away the rear terrace from her 150-year-old building. “It does worry me,” she said of future storms, noting that when the restaurant closes each winter, workers remove the tables and anything else that could get damaged by flooding.</p><div id="image-4NBNDFJYH5DZ3PXX7O4I3TJSFM" class="flow-wrapper"><img id="image-SRMQQYVUBUI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/SRMQQYVUBUI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/SRMQQYVUBUI6TLGIDWCHXLGKOM.jpg" src="./img/200/SRMQQYVUBUI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Artist and graphic designer Hugues Poirier at his shop in low-lying La Grave, before it was flooded during Hurricane Dorian. <span></span></p></div> | |||
| <img id="image-C4YGR3FUB4I6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/C4YGR3FUB4I6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/C4YGR3FUB4I6TLGIDWCHXLGKOM.jpg" src="./img/200/C4YGR3FUB4I6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>A storm last November ripped away the rear terrace of Café de la Grave, which sits only feet from the rising gulf. “We will have to adapt,” said the restaurant’s co-owner, Marie-Claude Vigneault. <span></span></p></div> | |||
| <img id="image-HN2TGUFUBYI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/HN2TGUFUBYI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/HN2TGUFUBYI6TLGIDWCHXLGKOM.jpg" src="./img/200/HN2TGUFUBYI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Musicians perform outside a restaurant in La Grave. The area is a popular summer destination for tourists. <span></span></p></div> | |||
| </div> | |||
| <p id="text-HG4SQM6GWZCW3PFAKTLJPB2EZY" class="pg-body-copy">Then there are the roads, none more critical than Route 199, the islands’ main artery. Maintained by the provincial government, it connects the islands with bridges and causeways, often running along slivers of land hemmed in on both sides by water.</p><p id="text-R2TXKOFTRVARXKUYEWRZOS7GJA" class="pg-body-copy">Officials have added a dozen miles of massive rocks around parts of the island to shore up dunes and protect power poles and stretches of road. But much of the rock must be imported from New Brunswick or Nova Scotia. It is expensive and can be an eyesore. And officials have realized that protecting one spot can divert water and create another problem nearby.</p><p id="text-QBYXFCHO35ECNM5DW5JO7QQJ7Q" class="pg-body-copy">“A lot of what we are doing is trial and error,” Bourgeois said. “And there are unintended consequences.”</p><p id="text-DHU6HFTSVBEOFGO2VRFRNKNWME" class="pg-body-copy">In locations in need of immediate attention, officials often rely on huge amounts of sand to replenish dunes and beaches. It’s a quicker, cheaper solution, and sand is abundant on the islands. But it’s a temporary fix — the sea is always hungry.</p><div class="bigbox-wrapper text-center"><div class="bottom-ad--bigbox ad--desktop"><wp-ad id="slug_bigbox_1"></wp-ad></div> | |||
| <div class="bottom-ad--bigbox ad--mobile"><wp-ad id="slug_mob_bigbox_1"></wp-ad></div> | |||
| </div> | |||
| <p id="text-DR23PUJN7NERNI4BKCZLU5Z6DE" class="pg-body-copy">Jonathan Lapierre, now in his second term as Iles-de-la-Madeleine’s mayor, refers to the approach as “nourrir le monstre.” <i>Feeding the monster.</i></p><p id="text-I4YT2FE5FRFWXL3VI33PIF7UNE" class="pg-body-copy">Officials say the local government simply can’t afford to spend huge sums to protect places that aren’t economically essential.</p><p id="text-TPRJSHDL5ZB2BMZ6KPTFMGL2T4" class="pg-body-copy">“Not everything can be fixed; not everything can be saved,” Bourgeois said, noting that parking lots, hiking trails and scenic overlooks already have been relocated to sturdier ground. “In some cases, you have to accept retreat.”</p><p id="text-SX52W46CJZF27MT5W6JCUUZUNY" class="pg-body-copy">Already, nearly a dozen homes on the islands have been relocated, and most everyone expects that number to grow.</p><p id="text-ZDZSBTSHARF6XGWIYDJWWUUF7E" class="pg-body-copy">The government of Quebec has <a href="https://globalnews.ca/news/5877577/quebec-hurricane-dorian-iles-de-la-madeleine/">set aside</a> tens of millions of dollars to help with coastal erosion across the sprawling province. But Lapierre estimated it will take upward of $100 million in coming years to shore up infrastructure on the Magdalen Islands alone — much of it to safeguard Route 199, raise buildings and reinforce the shoreline near the hospital and city hall.</p><p id="text-WGESCL2OXRDMHG6AZ55QQ6F2O4" class="pg-body-copy">The municipality’s total annual budget is roughly $26 million.</p><div id="image-F4D4TBFUCMI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-F4D4TBFUCMI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/F4D4TBFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/F4D4TBFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/F4D4TBFUCMI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>Massive rocks line the shore to shield waterfront vacation cottages from flooding and erosion along Chemin des Chalets. But soon, it will have no more chalets. After Hurricane Dorian became the latest storm to wreck the area, officials said the strip must be abandoned over the next year. <span></span></p></div> | |||
| </div> | |||
| <p id="text-VS2PRXWECFCCJODS47KSFO5754" class="pg-body-copy">“We need more money, more human resources, more help,” the mayor said. “With just the municipality alone, it’s impossible to protect the islands completely.”</p><p id="text-AS4UNAORAFBUHITIDBEMMVFDA4" class="pg-body-copy">But the Canadian government, where lawmakers in June <a href="https://globalnews.ca/news/5401586/canada-national-climate-emergency/">declared</a> a national “climate emergency,” is navigating an array of calamities.</p><p id="text-IUHBO4CBABGSRLG22MJYDHNL6E" class="pg-body-copy">Thousands in eastern Canada were forced to <a href="https://www.theguardian.com/world/2019/apr/30/canada-flooding-quebec-montreal-justin-trudeau-climate-change">evacuate</a> this year after monumental flooding. In the country’s Northwest Territories, melting permafrost is threatening roads and structures. Troops have been <a href="https://www.cbc.ca/news/politics/canada-s-military-adopting-climate-change-1.5186337">strained</a> not only by overseas deployments, but also by constant missions to help after floods, wildfires and other disasters.</p><p id="text-343XA42NHJD5BHVAY3F4LKAAKM" class="pg-body-copy">Amid so many priorities, Lapierre and other officials keep lobbying for aid, emphasizing the islands’ importance as a vacation destination, its history and its future.</p><p id="text-VIICW2X2JRDIFPS4I3YOYOOTYQ" class="pg-body-copy">“I hope my daughter will be able to live her life here,” Lapierre said, “and also my daughter’s daughter.”</p><div id="newsLetter-signup-box" class="pb-f-page-newsletter"><p class="headline" id="newsletter-headline">Sign up for the Energy and Environment newsletter</p><p class="title-newsletter" id="newsletter-tagline">The latest news about climate change, energy and the environment, delivered every Thursday.</p><div class="posrel"><form name="twpNewsletter" id="subscribeForm" class="active"><input type="text" name="email" placeholder="E-mail address"> <input type="submit" class="submit-button" value="Sign up"></form><p class="subscribeSuccess">Thank you for subscribing</p></div> | |||
| </div> | |||
| <h3 class="pg-body-copy pg-h3">‘All this will change’</h3><p id="text-HDVMFOZTPJD4PFYYBYJSVORXFI" class="pg-body-copy">Across the islands, the wharfs brim with tales about fishermen ordering bigger boats, upgrading their engines and buying new pickup trucks. A local boatbuilding shop is booked with orders more than a year out.</p><p id="text-QHLEUTQLZZCYRJCHMAPFM67Q5Y" class="pg-body-copy">For now, the hundreds of lobster fishermen and women on the Magdalen Islands, are delighted to be catching <a href="http://www.dfo-mpo.gc.ca/stats/commercial/sea-maritimes-eng.htm">double or more</a> what boats here caught barely a decade ago. Fishermen who once expected to haul in 15,000 pounds of lobster during the nine-week season that begins each spring now say 30,000 to 40,000 pounds isn’t uncommon.</p><p id="text-2FMLDU7ESRCGZAOXOICNLDSEXQ" class="pg-body-copy">“Last year was the best year in 40 to 50 years. And this year has been even better,” Claude Cyr, 67, said one morning as he unloaded the day’s haul from his boat, Cap Bleu.</p><p id="text-5UBAVF2CNZHV7JOUKZIKMBPBDA" class="pg-body-copy">But the captains who have long fished these waters know that if the gulf continues to warm, the lobsters that have flocked north from places such as Maine might one day keep moving, taking the good times with them.</p><p id="text-2N57OE6K4NDKTL6Y4UIRIMKBFY" class="pg-body-copy">“We’re all worried about that,” said Sidney Clark, 63, as he checked each of his nearly 300 traps one morning.</p><div id="image-YDXIZRBMV5EBZIEFZF3YG5RLTQ" class="flow-wrapper"><img id="image-CHYU4TFUCMI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/CHYU4TFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/CHYU4TFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/CHYU4TFUCMI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Lobstermen greet each other in the Gulf of St. Lawrence. <span></span></p></div> | |||
| <img id="image-4SF6PRFUCEI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/4SF6PRFUCEI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/4SF6PRFUCEI6TLGIDWCHXLGKOM.jpg" src="./img/200/4SF6PRFUCEI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Sidney Clark, the son and grandson of fishermen, leaves before dawn each morning on his boat, the Sandcov’r, to check his 273 traps. <span></span></p></div> | |||
| <img id="image-APMBAKVUBYI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/APMBAKVUBYI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/APMBAKVUBYI6TLGIDWCHXLGKOM.jpg" src="./img/200/APMBAKVUBYI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Lobster traps spill across a field in the Magdalen Islands, where fishing has been a way of life for centuries. <span></span></p></div> | |||
| </div> | |||
| <p id="text-LD3ZVH2WQ5BNNOXJ6US7O2HIHE" class="pg-body-copy">Mario Cyr, the underwater cinematographer, said the bizarre lobster scene he witnessed on the sea floor last summer brought to mind Inuit hunters he’d met in the Arctic, where climate change has shifted hunting seasons in confounding ways and altered the rhythms of everyday life.</p><p id="text-UCQUOD7F6RGC5PSZIY7O2724W4" class="pg-body-copy">“Right now, we are lucky,” said Cyr, 59. “We have the ideal temperature for lobsters. But nobody knows how long it will last.”</p><h3 class="pg-body-copy pg-h3">Nowhere to hide</h3><p id="text-WP4KKKHCWVGBBE5HBIEGHFVV3Q" class="pg-body-copy">In September, Hurricane Dorian delivered the latest lesson on fragility.</p><p id="text-QY75AS2IUREEPO7EAHNYCXUPS4" class="pg-body-copy">The storm, which ravaged the Bahamas on its way up the Atlantic coast, was weakening but still packed winds topping 80 miles per hour as it plowed through the Gulf of St. Lawrence.</p><p id="text-7EBTB2Z3K5BJDMDP4NJB7GPIBY" class="pg-body-copy">That was enough to once again pummel the Magdalen Islands.</p><p id="text-TMUZ2WZULFGZBOPKH7JLGMYQ3Y" class="pg-body-copy">Business owners in La Grave watched as water flooded their shops. Several homes were destroyed, including along a popular strip lined with about 30 seaside cottages that officials now insist will be abandoned for good over the next year — the latest retreat, but certainly not the last.</p><p id="text-V7SQPL5XUNB5VL5OCYQKTCRWKQ" class="pg-body-copy">The storm tossed boats ashore like bath toys. Massive waves pounded the sandstone cliffs, tearing away large sections in places. Storm surges blocked roads. Thousands of homes lost power.</p><div id="storm-video" class="looping-video pg-visual" data-muted="true" data-uuid="6e60e348-4cca-42f8-b4f1-1154f19eed69"></div> | |||
| <div class="pg-caption video-caption"><p>Waves crash over a form of heavy concrete barriers along the shore of the Magdalen Islands.</p></div> | |||
| <p id="text-F7MITTXYABHODGA2IMMIDRE74M" class="pg-body-copy">“People are very emotional right now,” Mayor Lapierre said during a news conference the day after the storm. “It was a long night. Some probably haven’t slept and today are seeing their investments, their dreams and goals swept away.”</p><p id="text-KQ7SLUMT7JA7LKJUGKR5SZECAY" class="pg-body-copy">One of those people was Cynthia Baril, who co-owns two rental cottages on the quaint strip that will now be surrendered to the sea. She has spent long hours trying to find a new place to move the homes, agonizing over the small fortune it will take to do so and mourning the loss of a place she called “a little paradise.”</p><p id="text-N6B3MDXGEFDOXHL6WYKRI2K56E" class="pg-body-copy">“Has Dorian caused significant damage?” she asked. “Yes, and not just to the cottages, but to people, too.”</p><div class="bigbox-wrapper text-center"><div class="bottom-ad--bigbox ad--desktop"><wp-ad id="slug_bigbox_2"></wp-ad></div> | |||
| <div class="bottom-ad--bigbox ad--mobile"><wp-ad id="slug_mob_bigbox_2"></wp-ad></div> | |||
| </div> | |||
| <p id="text-INPNQLY5PRDWJEWYELD6E6RTUY" class="pg-body-copy">Bourgeois said residents have reacted with their typical resilience, but also with a measure of acceptance about what increasingly seems like a new reality. Two crippling storms had hit the islands in 10 months, the second during a time of year that typically is calm. Now, the winter storm season lies ahead, and with it, another season of uncertainty and angst.</p><p id="text-Z6BGKYTFXJGLJCU4V2EZXGTLIA" class="pg-body-copy">Crews continue fortifying parts of Route 199, trying to hold the swelling waters at bay. The fishermen have stored their wooden traps until spring, when they can return to the lobster-filled gulf. Adele Chiasson sits in her house atop the bluff, hoping the cliffs keep their distance. She tried to sell several years ago, but there were no takers.</p><p id="text-LM3JETH22RCURGFDNN5D5YSMXY" class="pg-body-copy">“A lot of people really liked the house,” she said, “but when they went out back, they were afraid.”</p><p id="text-O3EXUNJCZNB2BLU23NPHX3OG6M" class="pg-body-copy">Like other Madelinots, she is left to wait and worry, to hope and to carry on.</p><p id="text-AJY4YCEEDJGVPNBERADCOEPYA4" class="pg-body-copy">“Nous sommes entourés par l’océan. Il n’y a nulle part où se cacher,” Bourgeois said.</p><p id="text-NOKZ4EODPZG67KJTENDV2VNIXI" class="pg-body-copy"><i>We are surrounded by the ocean. There is nowhere to hide.</i></p><div id="image-VEEI5OVUBMI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-VEEI5OVUBMI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/VEEI5OVUBMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/VEEI5OVUBMI6TLGIDWCHXLGKOM.jpg" src="./img/200/VEEI5OVUBMI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>The sun rises beyond a sandstone spire, which the sea has separated from the shore in the Magdalen Islands. <span></span></p></div> | |||
| </div> | |||
| <p id="text-U140019256310261aG" class="pg-body-copy contribution">Chris Mooney and Olivier Laurent contributed to this report.</p></div> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://www.washingtonpost.com/graphics/2019/world/climate-environment/canada-quebec-islands-climate-change/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 48
- 0
cache/000c16d784ca75d3bc0a86c8c5955e2b/index.md
View File
| @@ -0,0 +1,48 @@ | |||
| title: Canada climate change: Quebec’s islands are crumbling | |||
| url: https://www.washingtonpost.com/graphics/2019/world/climate-environment/canada-quebec-islands-climate-change/ | |||
| hash_url: 000c16d784ca75d3bc0a86c8c5955e2b | |||
| <div class="pg-entry" id="newJersey"><p id="text-HE5HYJZDD5BRRIMZHSROPDIHQE" class="pg-body-copy">ILES-DE-LA-MADELEINE, QUEBEC — High on a bluff overlooking the Gulf of St. Lawrence, Adele Chiasson no longer ventures into her backyard for a simple reason: It is falling into the sea.</p><p id="text-RHH5NLSAFJBMHGXZ6J6ECVZJNU" class="pg-body-copy">“I’m afraid to go out there,” the widow said one afternoon from the safety of her kitchen. She nodded toward the 70-foot-tall, red sandstone cliffs out back that creep closer with each passing year. “You never know when a section will fall off.”</p><p id="text-RFJKUOOH3RFYFG2DJ3JSDUPS3Y" class="pg-body-copy">Decades ago, when she and her husband moved to this modest house with its majestic views, they never imagined a vanishing coastline might one day drive them away. But the sea long ago claimed the ground where their children once played. An abandoned road out back has mostly crumbled into the surf below. Two of her neighbor’s homes have been moved inland.</p><p id="text-6ZAIMIKDNNDKXOLESG67GP7MKI" class="pg-body-copy">The day might come when she, too, will be forced to abandon this precarious patch of earth. “I might not have a choice,” she says.</p><div id="image-PAPLE7VUCEI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-PAPLE7VUCEI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/PAPLE7VUCEI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/PAPLE7VUCEI6TLGIDWCHXLGKOM.jpg" src="./img/200/PAPLE7VUCEI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>An abandoned road is crumbling into the Gulf of St. Lawrence. Adele Chiasson, a widow who lives nearby, said visitors “are shocked at the changes” that erosion has wrought on the cliffs. <span></span></p></div> | |||
| </div> | |||
| <p id="text-WGKKA76KVRAMNKZ43OO7E5IBOM" class="pg-body-copy">The more than 12,000 residents of this windswept Canadian archipelago are facing a growing number of gut-wrenching choices, as extreme climate change transforms the land and water around them. Season after season, storm after storm, it is becoming clearer that the sea, which has always sustained these islands, is now their greatest threat.</p><div class="temp-changer"><i class="fa fa-exclamation-circle" aria-hidden="true"></i><p class="pg-body-copy temp-text">Click any temperature underlined in the story to convert between Celsius and Fahrenheit</p></div> | |||
| <p id="text-AUIR3VMCAJGTVKELCTTV5WFHNA" class="pg-body-copy first-temp">A Washington Post examination of the fastest-warming places around the world has found that the Magdalen Islands, as they are known in English, have warmed <span>2.3 degrees Celsius (4.2 degrees Fahrenheit)</span> since the late 19th century, twice the global average.</p><p id="text-B2LW3JI7ZZHAZPUP6EWNOERZHE" class="pg-body-copy">As in <a href="https://www.washingtonpost.com/graphics/2019/national/climate-environment/climate-change-america/">New England</a>, <a href="https://www.washingtonpost.com/graphics/2019/national/climate-environment/climate-change-siberia/">Siberia</a> and other global hot spots<b> </b>at higher latitudes, winters here are heating up even more quickly, eclipsing <span>3 degrees Celsius (5.4 degrees Fahrenheit)</span>. That change has fueled freezing and thawing cycles here that wreak havoc on the famous — and famously fragile — sandstone cliffs.</p></div> | |||
| <p id="text-RZL6B2FAU5DA7HX3GYDWS2H6KQ" class="pg-body-copy">The sea ice that used to encase the islands most winters, shielding them from the brunt of fierce storms and pounding waves, is shrinking at a rate of about 555 square miles annually, data shows. That’s a swath of ice larger than Los Angeles.</p><p id="text-O3FXN2VI2RFGVNENS2YN6MR5OU" class="pg-body-copy">Even as that natural defense collapses, sea levels have been rising at a rate roughly twice the global norm in recent years, researchers say.</p><p id="text-ZB26CKDBWVCYPBJJ53WCYR7OAU" class="pg-body-copy">The result is an escalating battle against erosion and flooding — one that a growing number of coastal populations face, from islands in the South Pacific to communities along the U.S. East Coast.</p><p id="text-E3A4T7VOHRGV7F7LIGU67454SQ" class="pg-body-copy">In the Magdalen Islands, the consequences are unmistakable: Some parts of the shoreline have lost as much as 14 feet per year to the sea over the past decade. Key roads face perpetual risk of washing out. The hospital and the city hall sit alarmingly close to deteriorating cliffs. Rising waters threaten to contaminate aquifers used for drinking water. And each year, the sea inches closer to more homes and businesses.</p><div class="bigbox-wrapper text-center"> | |||
| <p id="text-43MNH2HJVRBXBM6D7UQIVQT3H4" class="pg-body-copy">Guillaume Marie, a geography professor at the University of Quebec at Rimouski, has studied coastal hazards around Quebec for years. He said the islands’ inhabitants are pioneers of a sort, as they wrestle with the daily challenges posed by climate change.</p><p id="text-G7MBIGUQV5EW7OT5LFAXGOAZT4" class="pg-body-copy">“In Quebec, it’s clearly the most vulnerable place,” he said. “They are the first ones who are facing these kinds of problems.”</p><p id="text-VB7GYEHPCNEYLGWLJF4IVWQEKU" class="pg-body-copy">Even the good news is worrisome, as Mario Cyr, a Magdalen Islands native and renowned underwater cinematographer, discovered last summer.</p><p id="text-EXZ2KAYM5ZBHZNVTFMHNODX4JE" class="pg-body-copy">Cyr, who has crisscrossed the world from the Arctic to Antarctica to film nature documentaries, was astounded by what he found when he went diving in the Gulf of St. Lawrence.</p><p id="text-NUIW2K7BCBCGVLQO6GHURII5DE" class="pg-body-copy">It was the end of the annual lobster season. Fishing crews had hauled millions of pounds of lobster from the gulf, reveling in historic catches. But when Cyr ventured roughly 50 feet down, he saw that the seafloor remained full of lobsters, almost as if the fishing had yet to begin.</p><p id="text-AWQ5UUM6PJE6HG25OUVCRU35IA" class="pg-body-copy">“It’s not normal,” he said one morning inside Bistro Plongée Alpha, the restaurant he owns on the northern tip of the islands.</p><div id="image-KQ7VAUD5XZERZDGOXTN4X73YNY" class="flow-wrapper"><img id="image-YN3PP2FUBYI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/YN3PP2FUBYI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/YN3PP2FUBYI6TLGIDWCHXLGKOM.jpg" src="./img/200/YN3PP2FUBYI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>The shoreline has crept within 20 feet of a home off Route 199. <span></span></p></div> | |||
| <img id="image-MOX2MXFUCMI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/MOX2MXFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/MOX2MXFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/MOX2MXFUCMI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Myriam-Esther Hadland, left, and Tanya Deraspe install signs warning people to stay off dunes undergoing restoration. <span></span></p></div> | |||
| <img id="image-XEFPPXFUCMI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/XEFPPXFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/XEFPPXFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/XEFPPXFUCMI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>A sign warns about the danger of unstable cliffs. <span></span></p></div> | |||
| </div> | |||
| <p id="text-LJMYWEP5YRAU3J6HQH6YVMRSYY" class="pg-body-copy">Like <a href="https://www.washingtonpost.com/graphics/2019/national/climate-environment/climate-change-world/">baffled clammers</a> in Uruguay and the <a href="https://www.washingtonpost.com/graphics/2019/national/gone-in-a-generation/#lobster">struggling lobster industry</a> off the fast-warming coast of Rhode Island, islanders here are anxious about the shifting sea. The deep waters of the gulf also have warmed more than 2 degrees Celsius over the past century, scientists have found, raising concerns about the fisheries that power the economy in communities around coastal Quebec.</p><p id="text-4PO25D44HNCFZD3IUW3JQIOHTM" class="pg-body-copy">As residents witness the changes, they worry their children and grandchildren will inherit a far different place than the one they have always known. And as the growing problems threaten fragile infrastructure, local officials spend their days figuring out how to try to hold back the encroaching sea — and where to simply surrender to it.</p><div id="lobster-video" class="looping-video pg-visual" data-muted="true" data-uuid="fdad73d5-9c7f-4963-a88e-21d7d32dfb96"></div> | |||
| <div class="pg-caption video-caption"><p>Lobstermen in the harbor at Grande-Entrée unload another stellar catch.</p></div> | |||
| <h3 class="pg-body-copy pg-h3">‘It used to be all ice’</h3><p id="text-WRSQXXKLWFGJVN7JJCQ2U7F4ZY" class="pg-body-copy">They remember the ice.</p><p id="text-CAOS6NYDUNA5XHPFQ76ITJNXBE" class="pg-body-copy">The fishermen, the mayor, the 101-year-old woman in her hilltop house built with wood from an old shipwreck — all of them describe the mystical look the frozen gulf once had in winter and the feeling of utter isolation from the rest of the world.</p><p id="text-RFBUTNVCUBGW7EBTOPESHW6HRQ" class="pg-body-copy">“It used to be all ice, as far as the eye could see. . . . You’d look out, and all you could see was white. Now you look out, and it’s just the ocean,” said Geraldine Burke, now 72. “The changes I’ve seen in the last 10 years have been astounding.”</p><p id="text-4AYL2MYDMBC6BCQDQHMCOUHJPQ" class="pg-body-copy">“My grandfather said he could remember when there was one winter with no ice,” said Serge Bourgeois, 53, the planning director for the municipality of Iles-de-la-Madeleine. Now, if ice materializes at all around the islands in winter, “it is exceptional.”</p><p id="text-CG4AFOVPVJCDXL3FKPPUPALMIM" class="pg-body-copy">While year-to-year variability exists, the amount of sea ice that blankets the Gulf of St. Lawrence is shrinking at a rate of roughly 12 percent per decade, <a href="https://nsidc.org/data/smmr_ssmi_ancillary/regions/lawrence.html">according to data</a> from the National Snow and Ice Data Center.</p><p id="text-UZ4SNJLHJJETJINIDR4CYKHT5A" class="pg-body-copy">Walt Meier, a senior research scientist at the center, said the loss of sea ice leaves the islands exposed and ripe for erosion. “The presence of ice acts like a cover on the ocean that dampens the waves of winter storms,” he said.</p><div id="image-OYQILQFUCAI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-OYQILQFUCAI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/OYQILQFUCAI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/OYQILQFUCAI6TLGIDWCHXLGKOM.jpg" src="./img/200/OYQILQFUCAI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>Rhoda Davies, 101, has lived almost all her life in the same hilltop house in Old Harry, constructed with wood from a shipwreck. Davies said winters on the islands now have far less ice and snow than those of her youth. “It must be climate change, wouldn’t you say?” she said. <span></span></p></div> | |||
| </div> | |||
| <p id="text-LEWNF2GWWVBG7IQSJ4VZ2O2XTI" class="pg-body-copy">A number of harrowing storms have clobbered the islands in recent years, including last November, when 75 mph winds and massive waves knocked out power and communication with mainland Quebec. Sections of the main road were damaged and sand dunes obliterated. The Canadian military <a href="https://globalnews.ca/news/4713452/military-plane-headed-to-iles-de-la-madeleine-after-massive-wind-storm-cuts-communications/">flew in workers</a> to help restore power and check on residents.</p><p id="text-PTACZ7OWFNEA7C372KXIV6TITM" class="pg-body-copy">Isabelle Cormier, 42, who returned last year from Australia to raise her children on her native islands, said that storm left many people particularly rattled.</p><p id="text-CWOOAL4BQBG2VI7PPUYIWYHLCE" class="pg-body-copy">“This is home, and hopefully it will be here for a while. But I don’t know, it’s going quick,” said Cormier, who saw her family’s small beach cottage inundated after a towering dune that had shielded it for decades washed away in hours. “To witness it in one lifetime, it’s shocking.”</p><p id="text-BEVERYL2GBCSTPSUGU5W6CGNHQ" class="pg-body-copy">The islands have long been home to hardy French and English seafarers, who are no stranger to the risks posed by nature.</p><p id="text-6D4QBQTMN5EBVCPGRMGXDLGSBA" class="pg-body-copy">Inside a small, century-old church in Old Harry, hundreds of black-and-white portraits hang in tribute to those lost at sea over the decades.</p><p id="text-5L32VAY3XBCU5PZU6OSHB7IRDI" class="pg-body-copy">The <a href="https://www.tourismeilesdelamadeleine.com/en/discover-the-islands/unique-features-of-the-region/history/">Acadian refugees</a> who colonized the archipelago in the latter half of the 18th century brought with them their unique strain of French and their Catholic faith. Other residents, including the islands’ minority English-speaking community, trace their roots to the survivors of <a href="http://www.bbc.com/travel/gallery/20170523-a-tempestuous-isle-of-1000-shipwrecks">shipwrecks</a> that claimed vessels off these shores in the 18th and 19th centuries.</p><p id="text-AMVWW2SADFBJJA6QQGC5ETRWKA" class="pg-body-copy">The land they occupy is an Edward Hopper landscape come to life. Brightly colored houses dot rolling green hills. Lighthouses cling to jagged sandstone cliffs. Massive sand dunes guard salt marshes and serene lagoons, and unspoiled beaches stretch for miles.</p><div id="image-2MPMGPTMARCSDCVCPBDD6AT3HQ" class="pg-visual"><img id="image-ZG5HDTVUCQI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/ZG5HDTVUCQI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/ZG5HDTVUCQI6TLGIDWCHXLGKOM.jpg" src="./img/200/ZG5HDTVUCQI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>A boat sits on the rolling landscape of the Magdalen Islands, which have warmed at twice the global average since the late 19th century. <span></span></p></div> | |||
| </div> | |||
| <p id="text-25AF3LBHOZCKTP72IEF2WQHWSI" class="pg-body-copy">But as the sea ice that traditionally protected these islands shrinks, the sea that surrounds them is swelling.</p><p id="text-VZSOFAGHDFBWVPFAB4AZCBOMFY" class="pg-body-copy">Between 1964 and 2013, the waters along the coast of the archipelago rose an average of about 4.3 millimeters per year. Since 2000, that rate has been closer to 7 millimeters, or more than a quarter of an inch per year, said Marie, the geography professor. That trend is <a href="https://www.ipcc.ch/srocc/home/">expected to continue</a>.</p><p id="text-HTDSP7ONZZDTHPX5N6H4BMJMGU" class="pg-body-copy">While the numbers seem small and the data covers only a limited period, the change could result in multiple feet of sea level rise by century’s end.</p><p class="pg-interstitial-link"><a href="https://www.washingtonpost.com/podcasts/post-reports/the-canadian-islands-crumbling-into-the-sea/"><i>[Post Reports: The Canadian islands crumbling into the sea.]</i></a></p><p id="text-FFDD2C7RNZASNKOLT2DAOT3EFI" class="pg-body-copy">For more than a decade, researchers have maintained a network of more than 1,100 coastal monitoring stations around the islands’ perimeter, which paint a portrait of how erosion is altering the shoreline. While some spots are relatively stable, others have steadily receded year after year. Severe storms have claimed as much as 55 feet of shoreline all at once.</p><p id="text-DO2KFVRWJJFLHN6WGOITNXBTPY" class="pg-body-copy">The Post relied on data from Berkeley Earth, an independent group that analyzes temperature data, for its findings about how the islands have already warmed more than 2 degrees Celsius — a threshold world leaders have pledged not to allow the globe to surpass.</p><div id="temp-chart-container"><div class="temp-chart_key">The region around <span class="zyryanka">the Magdalen Islands</span> has experienced warming nearly twice the <span class="global">global average</span></div> | |||
| <div id="temp-chart"></div> | |||
| <div class="wpv-caption">Source: Berkeley Earth</div> | |||
| </div> | |||
| <p id="text-FSNQVZ2NXJAHBJEHTRSWCA6IT4" class="pg-body-copy">Canadian researchers, who drew on air temperature records dating to 1873, have documented a similar change. Researcher <a href="https://profils-profiles.science.gc.ca/en/profile/peter-galbraith">Peter Galbraith</a> and colleagues found the region has warmed about <span>1.9 degrees Celsius (3.4 degrees Fahrenheit)</span>.</p><p id="text-HUQTYRXP4NFPFFZZHHDBSVDADA" class="pg-body-copy">Milder winters and longer summers have kept the tourists coming — some 80,000 trekked here last year to wind surf, bike and bird-watch — many arriving on a ferry that now runs year-round.</p><p id="text-JDMHHFVZ3FCJZCAX3YS45MNXZE" class="pg-body-copy">But the islands’ fragility has brought them a sort of grim notoriety. Time magazine put the Magdalen Islands <a href="https://time.com/42294/amazing-places-visit-vanish/">on its list</a> of “10 amazing places to visit before they vanish.” Architectural Digest <a href="https://www.architecturaldigest.com/gallery/endangered-places-to-visit-now">included them</a> on its “30 places to visit before they’re gone forever.”</p><p id="text-O7NAYF5JQBETXM5ZNZXH6ILSCA" class="pg-body-copy">Madelinots, as locals call themselves, have no intention of vanishing anytime soon. But researchers estimate that without serious action, hundreds of structures and miles of roads could fall victim to erosion and flooding in coming decades.</p><p id="text-GUQMJPHIIJB6VNJLVFHU7JC4MI" class="pg-body-copy">“We can try adaptation. We must try it,” Marie said. “But the solutions could be very expensive.”</p><div id="image-AWWL6DFUCAI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-AWWL6DFUCAI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/AWWL6DFUCAI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/AWWL6DFUCAI6TLGIDWCHXLGKOM.jpg" src="./img/200/AWWL6DFUCAI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>Parts of a popular bike path have been closed near Cap-aux-Meules. Erosion from Hurricane Dorian caused even more damage to the path in September, as the cliffs — which residents call capes — inched closer to the nearby hospital and municipal building. <span></span></p></div> | |||
| </div> | |||
| <h3 class="pg-body-copy pg-h3">‘Not everything can be saved’</h3><p id="text-BELMGVBEDFFNFEHJXOJ5W7IJYA" class="pg-body-copy">At 17, Bourgeois left his native islands to study in Montreal. Eventually, like many Madelinots, he felt the pull of home.</p><p id="text-KHLTA6VMH5H4FMBQ3DHY6QAKPQ" class="pg-body-copy">When he began his career, the idea that climate change would seriously threaten the islands seemed a stretch. Now, he spends his days worrying about how to protect infrastructure from crumbling cliffs, eroding dunes and rising seas.</p><p id="text-7S5YIRI3XFDPTHBFLYBDNUQJYA" class="pg-body-copy">“It wasn’t part of the job description. Now, it’s my priority,” he said. “In 30 years, it has completely changed.”</p><p id="text-KHVIGVOXONGWHMDJBAKA2RZL3Q" class="pg-body-copy">As climate change bears down on the islands, he views them as a laboratory, “a place where we can study ways to adapt.”</p><p id="text-OCMDHWEIHRG3NKI4DXPM7YZINE" class="pg-body-copy">In recent years, local officials have singled out a half dozen locations<b> </b>that must somehow be protected — including the municipal headquarters and the hospital.</p><p id="text-JO3REY4PHZEV5D2UMCZ2KKT6CE" class="pg-body-copy">Another priority is the low-lying, historic fishing village of La Grave, a bustling tourist destination lined with shops and restaurants. Its weatherworn buildings sit on a spit of rocky beach only feet from the rising gulf.</p><p id="text-GANBL4UA4JCWPFF247ODX5GKJE" class="pg-body-copy">Marie-Claude Vigneault, co-owner of Café de la Grave, said last fall’s storm ripped away the rear terrace from her 150-year-old building. “It does worry me,” she said of future storms, noting that when the restaurant closes each winter, workers remove the tables and anything else that could get damaged by flooding.</p><div id="image-4NBNDFJYH5DZ3PXX7O4I3TJSFM" class="flow-wrapper"><img id="image-SRMQQYVUBUI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/SRMQQYVUBUI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/SRMQQYVUBUI6TLGIDWCHXLGKOM.jpg" src="./img/200/SRMQQYVUBUI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Artist and graphic designer Hugues Poirier at his shop in low-lying La Grave, before it was flooded during Hurricane Dorian. <span></span></p></div> | |||
| <img id="image-C4YGR3FUB4I6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/C4YGR3FUB4I6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/C4YGR3FUB4I6TLGIDWCHXLGKOM.jpg" src="./img/200/C4YGR3FUB4I6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>A storm last November ripped away the rear terrace of Café de la Grave, which sits only feet from the rising gulf. “We will have to adapt,” said the restaurant’s co-owner, Marie-Claude Vigneault. <span></span></p></div> | |||
| <img id="image-HN2TGUFUBYI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/HN2TGUFUBYI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/HN2TGUFUBYI6TLGIDWCHXLGKOM.jpg" src="./img/200/HN2TGUFUBYI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Musicians perform outside a restaurant in La Grave. The area is a popular summer destination for tourists. <span></span></p></div> | |||
| </div> | |||
| <p id="text-HG4SQM6GWZCW3PFAKTLJPB2EZY" class="pg-body-copy">Then there are the roads, none more critical than Route 199, the islands’ main artery. Maintained by the provincial government, it connects the islands with bridges and causeways, often running along slivers of land hemmed in on both sides by water.</p><p id="text-R2TXKOFTRVARXKUYEWRZOS7GJA" class="pg-body-copy">Officials have added a dozen miles of massive rocks around parts of the island to shore up dunes and protect power poles and stretches of road. But much of the rock must be imported from New Brunswick or Nova Scotia. It is expensive and can be an eyesore. And officials have realized that protecting one spot can divert water and create another problem nearby.</p><p id="text-QBYXFCHO35ECNM5DW5JO7QQJ7Q" class="pg-body-copy">“A lot of what we are doing is trial and error,” Bourgeois said. “And there are unintended consequences.”</p><p id="text-DHU6HFTSVBEOFGO2VRFRNKNWME" class="pg-body-copy">In locations in need of immediate attention, officials often rely on huge amounts of sand to replenish dunes and beaches. It’s a quicker, cheaper solution, and sand is abundant on the islands. But it’s a temporary fix — the sea is always hungry.</p><div class="bigbox-wrapper text-center"><div class="bottom-ad--bigbox ad--desktop"><wp-ad id="slug_bigbox_1"></wp-ad></div> | |||
| <div class="bottom-ad--bigbox ad--mobile"><wp-ad id="slug_mob_bigbox_1"></wp-ad></div> | |||
| </div> | |||
| <p id="text-DR23PUJN7NERNI4BKCZLU5Z6DE" class="pg-body-copy">Jonathan Lapierre, now in his second term as Iles-de-la-Madeleine’s mayor, refers to the approach as “nourrir le monstre.” <i>Feeding the monster.</i></p><p id="text-I4YT2FE5FRFWXL3VI33PIF7UNE" class="pg-body-copy">Officials say the local government simply can’t afford to spend huge sums to protect places that aren’t economically essential.</p><p id="text-TPRJSHDL5ZB2BMZ6KPTFMGL2T4" class="pg-body-copy">“Not everything can be fixed; not everything can be saved,” Bourgeois said, noting that parking lots, hiking trails and scenic overlooks already have been relocated to sturdier ground. “In some cases, you have to accept retreat.”</p><p id="text-SX52W46CJZF27MT5W6JCUUZUNY" class="pg-body-copy">Already, nearly a dozen homes on the islands have been relocated, and most everyone expects that number to grow.</p><p id="text-ZDZSBTSHARF6XGWIYDJWWUUF7E" class="pg-body-copy">The government of Quebec has <a href="https://globalnews.ca/news/5877577/quebec-hurricane-dorian-iles-de-la-madeleine/">set aside</a> tens of millions of dollars to help with coastal erosion across the sprawling province. But Lapierre estimated it will take upward of $100 million in coming years to shore up infrastructure on the Magdalen Islands alone — much of it to safeguard Route 199, raise buildings and reinforce the shoreline near the hospital and city hall.</p><p id="text-WGESCL2OXRDMHG6AZ55QQ6F2O4" class="pg-body-copy">The municipality’s total annual budget is roughly $26 million.</p><div id="image-F4D4TBFUCMI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-F4D4TBFUCMI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/F4D4TBFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/F4D4TBFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/F4D4TBFUCMI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>Massive rocks line the shore to shield waterfront vacation cottages from flooding and erosion along Chemin des Chalets. But soon, it will have no more chalets. After Hurricane Dorian became the latest storm to wreck the area, officials said the strip must be abandoned over the next year. <span></span></p></div> | |||
| </div> | |||
| <p id="text-VS2PRXWECFCCJODS47KSFO5754" class="pg-body-copy">“We need more money, more human resources, more help,” the mayor said. “With just the municipality alone, it’s impossible to protect the islands completely.”</p><p id="text-AS4UNAORAFBUHITIDBEMMVFDA4" class="pg-body-copy">But the Canadian government, where lawmakers in June <a href="https://globalnews.ca/news/5401586/canada-national-climate-emergency/">declared</a> a national “climate emergency,” is navigating an array of calamities.</p><p id="text-IUHBO4CBABGSRLG22MJYDHNL6E" class="pg-body-copy">Thousands in eastern Canada were forced to <a href="https://www.theguardian.com/world/2019/apr/30/canada-flooding-quebec-montreal-justin-trudeau-climate-change">evacuate</a> this year after monumental flooding. In the country’s Northwest Territories, melting permafrost is threatening roads and structures. Troops have been <a href="https://www.cbc.ca/news/politics/canada-s-military-adopting-climate-change-1.5186337">strained</a> not only by overseas deployments, but also by constant missions to help after floods, wildfires and other disasters.</p><p id="text-343XA42NHJD5BHVAY3F4LKAAKM" class="pg-body-copy">Amid so many priorities, Lapierre and other officials keep lobbying for aid, emphasizing the islands’ importance as a vacation destination, its history and its future.</p><p id="text-VIICW2X2JRDIFPS4I3YOYOOTYQ" class="pg-body-copy">“I hope my daughter will be able to live her life here,” Lapierre said, “and also my daughter’s daughter.”</p><div id="newsLetter-signup-box" class="pb-f-page-newsletter"><p class="headline" id="newsletter-headline">Sign up for the Energy and Environment newsletter</p><p class="title-newsletter" id="newsletter-tagline">The latest news about climate change, energy and the environment, delivered every Thursday.</p><div class="posrel"><form name="twpNewsletter" id="subscribeForm" class="active"><input type="text" name="email" placeholder="E-mail address"> <input type="submit" class="submit-button" value="Sign up"></form><p class="subscribeSuccess">Thank you for subscribing</p></div> | |||
| </div> | |||
| <h3 class="pg-body-copy pg-h3">‘All this will change’</h3><p id="text-HDVMFOZTPJD4PFYYBYJSVORXFI" class="pg-body-copy">Across the islands, the wharfs brim with tales about fishermen ordering bigger boats, upgrading their engines and buying new pickup trucks. A local boatbuilding shop is booked with orders more than a year out.</p><p id="text-QHLEUTQLZZCYRJCHMAPFM67Q5Y" class="pg-body-copy">For now, the hundreds of lobster fishermen and women on the Magdalen Islands, are delighted to be catching <a href="http://www.dfo-mpo.gc.ca/stats/commercial/sea-maritimes-eng.htm">double or more</a> what boats here caught barely a decade ago. Fishermen who once expected to haul in 15,000 pounds of lobster during the nine-week season that begins each spring now say 30,000 to 40,000 pounds isn’t uncommon.</p><p id="text-2FMLDU7ESRCGZAOXOICNLDSEXQ" class="pg-body-copy">“Last year was the best year in 40 to 50 years. And this year has been even better,” Claude Cyr, 67, said one morning as he unloaded the day’s haul from his boat, Cap Bleu.</p><p id="text-5UBAVF2CNZHV7JOUKZIKMBPBDA" class="pg-body-copy">But the captains who have long fished these waters know that if the gulf continues to warm, the lobsters that have flocked north from places such as Maine might one day keep moving, taking the good times with them.</p><p id="text-2N57OE6K4NDKTL6Y4UIRIMKBFY" class="pg-body-copy">“We’re all worried about that,” said Sidney Clark, 63, as he checked each of his nearly 300 traps one morning.</p><div id="image-YDXIZRBMV5EBZIEFZF3YG5RLTQ" class="flow-wrapper"><img id="image-CHYU4TFUCMI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/CHYU4TFUCMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/CHYU4TFUCMI6TLGIDWCHXLGKOM.jpg" src="./img/200/CHYU4TFUCMI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Lobstermen greet each other in the Gulf of St. Lawrence. <span></span></p></div> | |||
| <img id="image-4SF6PRFUCEI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/4SF6PRFUCEI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/4SF6PRFUCEI6TLGIDWCHXLGKOM.jpg" src="./img/200/4SF6PRFUCEI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Sidney Clark, the son and grandson of fishermen, leaves before dawn each morning on his boat, the Sandcov’r, to check his 273 traps. <span></span></p></div> | |||
| <img id="image-APMBAKVUBYI6TLGIDWCHXLGKOM" class="flow-visual" data-hi-res-src="./img/1800/APMBAKVUBYI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/APMBAKVUBYI6TLGIDWCHXLGKOM.jpg" src="./img/200/APMBAKVUBYI6TLGIDWCHXLGKOM.jpg"><div class="flow-caption"><p>Lobster traps spill across a field in the Magdalen Islands, where fishing has been a way of life for centuries. <span></span></p></div> | |||
| </div> | |||
| <p id="text-LD3ZVH2WQ5BNNOXJ6US7O2HIHE" class="pg-body-copy">Mario Cyr, the underwater cinematographer, said the bizarre lobster scene he witnessed on the sea floor last summer brought to mind Inuit hunters he’d met in the Arctic, where climate change has shifted hunting seasons in confounding ways and altered the rhythms of everyday life.</p><p id="text-UCQUOD7F6RGC5PSZIY7O2724W4" class="pg-body-copy">“Right now, we are lucky,” said Cyr, 59. “We have the ideal temperature for lobsters. But nobody knows how long it will last.”</p><h3 class="pg-body-copy pg-h3">Nowhere to hide</h3><p id="text-WP4KKKHCWVGBBE5HBIEGHFVV3Q" class="pg-body-copy">In September, Hurricane Dorian delivered the latest lesson on fragility.</p><p id="text-QY75AS2IUREEPO7EAHNYCXUPS4" class="pg-body-copy">The storm, which ravaged the Bahamas on its way up the Atlantic coast, was weakening but still packed winds topping 80 miles per hour as it plowed through the Gulf of St. Lawrence.</p><p id="text-7EBTB2Z3K5BJDMDP4NJB7GPIBY" class="pg-body-copy">That was enough to once again pummel the Magdalen Islands.</p><p id="text-TMUZ2WZULFGZBOPKH7JLGMYQ3Y" class="pg-body-copy">Business owners in La Grave watched as water flooded their shops. Several homes were destroyed, including along a popular strip lined with about 30 seaside cottages that officials now insist will be abandoned for good over the next year — the latest retreat, but certainly not the last.</p><p id="text-V7SQPL5XUNB5VL5OCYQKTCRWKQ" class="pg-body-copy">The storm tossed boats ashore like bath toys. Massive waves pounded the sandstone cliffs, tearing away large sections in places. Storm surges blocked roads. Thousands of homes lost power.</p><div id="storm-video" class="looping-video pg-visual" data-muted="true" data-uuid="6e60e348-4cca-42f8-b4f1-1154f19eed69"></div> | |||
| <div class="pg-caption video-caption"><p>Waves crash over a form of heavy concrete barriers along the shore of the Magdalen Islands.</p></div> | |||
| <p id="text-F7MITTXYABHODGA2IMMIDRE74M" class="pg-body-copy">“People are very emotional right now,” Mayor Lapierre said during a news conference the day after the storm. “It was a long night. Some probably haven’t slept and today are seeing their investments, their dreams and goals swept away.”</p><p id="text-KQ7SLUMT7JA7LKJUGKR5SZECAY" class="pg-body-copy">One of those people was Cynthia Baril, who co-owns two rental cottages on the quaint strip that will now be surrendered to the sea. She has spent long hours trying to find a new place to move the homes, agonizing over the small fortune it will take to do so and mourning the loss of a place she called “a little paradise.”</p><p id="text-N6B3MDXGEFDOXHL6WYKRI2K56E" class="pg-body-copy">“Has Dorian caused significant damage?” she asked. “Yes, and not just to the cottages, but to people, too.”</p><div class="bigbox-wrapper text-center"><div class="bottom-ad--bigbox ad--desktop"><wp-ad id="slug_bigbox_2"></wp-ad></div> | |||
| <div class="bottom-ad--bigbox ad--mobile"><wp-ad id="slug_mob_bigbox_2"></wp-ad></div> | |||
| </div> | |||
| <p id="text-INPNQLY5PRDWJEWYELD6E6RTUY" class="pg-body-copy">Bourgeois said residents have reacted with their typical resilience, but also with a measure of acceptance about what increasingly seems like a new reality. Two crippling storms had hit the islands in 10 months, the second during a time of year that typically is calm. Now, the winter storm season lies ahead, and with it, another season of uncertainty and angst.</p><p id="text-Z6BGKYTFXJGLJCU4V2EZXGTLIA" class="pg-body-copy">Crews continue fortifying parts of Route 199, trying to hold the swelling waters at bay. The fishermen have stored their wooden traps until spring, when they can return to the lobster-filled gulf. Adele Chiasson sits in her house atop the bluff, hoping the cliffs keep their distance. She tried to sell several years ago, but there were no takers.</p><p id="text-LM3JETH22RCURGFDNN5D5YSMXY" class="pg-body-copy">“A lot of people really liked the house,” she said, “but when they went out back, they were afraid.”</p><p id="text-O3EXUNJCZNB2BLU23NPHX3OG6M" class="pg-body-copy">Like other Madelinots, she is left to wait and worry, to hope and to carry on.</p><p id="text-AJY4YCEEDJGVPNBERADCOEPYA4" class="pg-body-copy">“Nous sommes entourés par l’océan. Il n’y a nulle part où se cacher,” Bourgeois said.</p><p id="text-NOKZ4EODPZG67KJTENDV2VNIXI" class="pg-body-copy"><i>We are surrounded by the ocean. There is nowhere to hide.</i></p><div id="image-VEEI5OVUBMI6TLGIDWCHXLGKOM" class="pg-visual"><img id="image-VEEI5OVUBMI6TLGIDWCHXLGKOM" class="lazyld" data-hi-res-src="./img/1800/VEEI5OVUBMI6TLGIDWCHXLGKOM.jpg" data-low-res-src="./img/1800/VEEI5OVUBMI6TLGIDWCHXLGKOM.jpg" src="./img/200/VEEI5OVUBMI6TLGIDWCHXLGKOM.jpg"><div class="pg-caption"><p>The sun rises beyond a sandstone spire, which the sea has separated from the shore in the Magdalen Islands. <span></span></p></div> | |||
| </div> | |||
| <p id="text-U140019256310261aG" class="pg-body-copy contribution">Chris Mooney and Olivier Laurent contributed to this report.</p></div> | |||
+ 703
- 0
cache/0012ffa54d39ac5b4227d629730c1008/index.html
View File
| @@ -0,0 +1,703 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Comment l'itinérance a mis notre relation à l'épreuve (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://estcequecestdutravail.xyz/2019/07/weathers-of-the-heart.html"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Comment l'itinérance a mis notre relation à l'épreuve (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://estcequecestdutravail.xyz/2019/07/weathers-of-the-heart.html">Source originale du contenu</a></h3> | |||
| <blockquote> | |||
| <p>If we think of love as a feeling we tend to expect it to always feel good, a view that is self-focused + unrealistic. If we think of love as an action, we make room for the range of feelings that relationship involves, including disappointment, anger + frustration.<br/> | |||
| <a href="https://twitter.com/thejessicadore/status/1146047702058381313">Jessica Dore</a></p> | |||
| </blockquote> | |||
| <p>Depuis la fin de notre itinérance et le début de notre ancrage à Crest, plusieurs personnes sont venues prendre des nouvelles, demander comment ça allait, en disant : « si je m’en tiens à tes photos ça a l’air génial ! »<br/> | |||
| À un moment où, en réalité, je traversais une période très difficile. Cet énorme décalage avec mon ressenti m’a fait un choc. Comme si j’avais trahi quelque chose qui me tenait beaucoup à cœur : être transparente sur les aspects difficiles de l’itinérance, ne pas en arrondir les angles pour présenter une version lisse, “acceptable” ou facile à fantasmer. Véhiculer des imaginaires creux, ça ne m’intéresse pas. Où était passée la ruguosité de nos expériences ?</p> | |||
| <p>Je pense qu’on était au plus proche de cette intention de discours nuancé et fidèle à notre vécu quand on a écrit <a href="https://estcequecestdutravail.xyz/2018/09/joies-et-peines.html">nos joies et nos peines</a> à mi-parcours.</p> | |||
| <p>Au-delà de ça, j’ai pris conscience que mes réseaux sociaux (et dans une certaine mesure la newsletter) proposaient des updates de la vie douce par facilité.<br/> | |||
| Parce que la difficulté et la tristesse nécessitent plus de recul, parce qu’il faut attendre qu’un peu de clarté se dégage. Et sans doute aussi par pudeur : ce sont des parts qui touchent de près une intimité qui n’a pas forcément vocation à être dévoilée.<br/> | |||
| Équilibre difficile à atteindre.</p> | |||
| <p>Alors j’ai voulu raconter combien l’itinérance nous a mis à l’épreuve à la fois individuellement et dans notre relation. | |||
| Comment on a tâtonné, quelles pistes on a trouvé, et comment on a bricolé des outils qui nous ont apporté un peu d’aide en chemin.</p> | |||
| <h3 id="secouer-les-structures-de-stabilité">Secouer les structures de stabilité</h3> | |||
| <p>Je ne compte plus le nombre de fois où on m’a parlé de <a href="https://fr.wikipedia.org/wiki/Pyramide_des_besoins#cite_note-2">la pyramide de Maslow</a>.</p> | |||
| <p>Je me souviens avoir entendu quelqu’un dire que le changement provoque des réactions régressives, comme des mécanismes de défense. Des choses qu’on n’aurait pas forcément faites si on ne s’était pas senti.e en insécurité.</p> | |||
| <p>Il faut dire qu’on a cumulé :</p> | |||
| <ul> | |||
| <li>Ne pas avoir de logement qui serve d’ancre a chamboulé bien plus de choses qu’on ne l’imaginait au départ.</li> | |||
| <li>Trimballer ses affaires de maison en maison toutes les semaines pendant un an, c’est parfois super, et parfois terriblement éprouvant.</li> | |||
| <li>Vous vous souvenez d’une période de chômage, où vous vous sentiez déboussolé.e à la suite de journées déstructurées et sans l’injonction du “je dois aller au boulot” ? L’itinérance, c’est un peu comme ça, mais cette fois-ci on jouait à deux.</li> | |||
| <li>Parce qu’il est un peu doux-dingue, Thomas s’est dit que ça serait un super moment pour terminer son livre. L’écriture étant un exercice-souffrance exemplaire.</li> | |||
| <li>Soyons clair.es, dans l’itinérance, une des seules constantes c’est d’être à deux… Quelle place alors pour le temps seul.e ? Comment l’organiser ?</li> | |||
| </ul> | |||
| <h3 id="dès-le-deuxième-mois-on-a-une-conversation-qui-ressemble-fort-à-une-crise-et-qui-va-durer-huit-mois">Dès le deuxième mois, on a une conversation qui ressemble fort à une crise, et qui va durer huit mois</h3> | |||
| <p>Bien sûr, la quête d’un nouveau lieu de vie, c’est à la fois un projet extraordinaire et totalement vertigineux : une des réponses à l’itinérance aurait tout à fait pu être une séparation.<br/> | |||
| Mais il se produit un truc, un lien qu’on ne veut pas lâcher.<br/> | |||
| Alors comment faire pour gérer nos besoins, nos peurs, nos problèmes de communication ?</p> | |||
| <p>Un jour, je suis tombée sur l’article <a href="https://medium.com/@alannallama/running-agile-scrum-on-our-relationship-9b2085c5d747">Running Agile Scrum on our Relationship</a>.<br/> | |||
| Qu’est-ce que c’est ?</p> | |||
| <blockquote> | |||
| <p>My partner and I are process nerds. Most projects we’re involved in use Agile, and it’s a set of tools and vocabulary we already share. We thought, why not run it on our relationship?<br/> | |||
| In Agile Scrum development, a sprint is a set period of time during which specific work is completed and made ready for review. […] Continuous improvement is mainly achieved through Retrospectives, where the team reviews what happened during the sprint: what worked, what didn’t, and what could be improved.</p> | |||
| </blockquote> | |||
| <p>Peut être qu’on est des process nerds. En tous cas, nos vies personnelles et professionnelles se nourrissent l’une de l’autre, c’est aussi pour ça que notre blog s’appelle comme ça. Ça commence à faire un bail qu’on traîne dans des évènements professionnels qui parlent de la nécessité de vivre ses émotions. Et quel chantier.</p> | |||
| <h3 id="on-a-commencé-à-se-donner-rendez-vous-pour-parler-de-nous">On a commencé à se donner rendez-vous pour parler de nous</h3> | |||
| <p>En fait, on s’en fout du mot qu’on met dessus. Appeler ça “rétrospective” ou appeler ça autrement n’a aucune importance. Ce qui compte, ce sont ces moments où on sait qu’on passe du temps uniquement à prendre soin de nous et de notre relation. | |||
| On a grandi dans des contextes qui nous ont appris à nous couper de nos émotions et à taire nos besoins, comment est-ce qu’on s’en défait ? Comment est-ce qu’on ré-apprend ensemble ?<br/> | |||
| Et pourquoi est-ce qu’un rendez-vous apporterait quelque chose de différent ?</p> | |||
| <p>Pour nous, ça a été l’occasion d’aborder des choses qu’on gardait pour nous, ne sachant pas quand ou comment les aborder. Les petites blessures qu’on pensait trop insignifiantes pour revenir dessus (mais qui alimentent la rancœur et globalement qui nous pourrissent la vie à petit feu), comme les gros trucs qu’on n’osait pas dire, qu’on n’osait pas avouer.<br/> | |||
| L’accumulation, le secret et le manque de considération, cancers du quotidien.</p> | |||
| <p>Les formats que je propose plus bas, je les ai adaptés de ce que j’ai trouvé soit <a href="https://retromat.org/fr/?id=2-33-20-48-16">ici</a>, soit <a href="https://gamestorming.com/">là</a>, soit dans mon cerveau.<br/> | |||
| À vous de picorer et voir ce qui vous paraît le plus adapté à votre singularité et celle de votre relation, le but étant de ne rien forcer, de ne rien ériger en règle. Mieux vaut bricoler les formats qui nous conviennent et dans lesquels on peut se sentir le plus fidèle à soi. If this isn’t your jam, make your own.</p> | |||
| <p><img src="/images/2019-07-07-weathers-of-the-heart/retro chat suisse.jpg" alt="Le cadre, c'est important"/> | |||
| Soigner le cadre, c’est important.</p> | |||
| <p>NB : j’écris cet article dans le contexte d’une relation monogame (mot affreux mais passons). Les relations ouvertes et/ou polyamoureuses ont exploré la sécurité affective depuis bien longtemps et ont certainement des manières super intéressantes d’aborder ce sujet. A voir si certaines sections de ces propositions peuvent s’adapter ou non à des participant.es multiples.</p> | |||
| <h5 id="ouverture">Ouverture</h5> | |||
| <p>• <strong>Météo</strong><br/> | |||
| Grand classique. Tour rapide de parole pour dire comment chacun.e se sent : fatigué, débordant.e d’énergie, nerveux, serein.e…</p> | |||
| <p>• <strong>Souvenirs de la dernière rétro.<br/> | |||
| Comment se sent-on depuis ? Qu’est-ce qui a changé ?</strong></p> | |||
| <h5 id="réparer">Réparer</h5> | |||
| <p>• <strong>Merci</strong><br/> | |||
| Je vous mets au défi de demander aux personnes autour de vous si elles sentent qu’elles reçoivent assez reconnaissance pour les efforts, l’attentions, le travail qu’elles fournissent. C’est le moment de se plonger dans la gratitude pour se remercier - de choses profondes ou de celles du quotidien.</p> | |||
| <p>• <strong>Je te présente mes excuses pour…</strong><br/> | |||
| L’occasion de formuler (ou de réitérer !) des excuses. Parfois, ce n’est pas évident de demander pardon, surtout sur le moment. Mises bout à bout, ces petites et grandes blessures s’accumulent, et finissent par peser lourd dans nos interactions au quotidien, qu’on en soit conscient.es ou non. C’est le moment de verbaliser le problème, quelle que soit l’échelle, de partager sa version et recevoir ce dont on a besoin pour dépasser la chose.</p> | |||
| <h5 id="prendre-du-recul">Prendre du recul</h5> | |||
| <p>• <strong>4 Ls - Loved, Learned, Lacked, Longed for</strong><br/> | |||
| Retour sur le mois qui vient de passer.<br/> | |||
| Qu’avez-vous aimé, appris, qu’est-ce qui vous a manqué, qu’auriez-vous aimé avoir ou recevoir ?</p> | |||
| <p>• <strong>La boîte à relation (j’enlève, j’ajoute) ou ‘The hopes & fears box’</strong><br/> | |||
| Crée un cadre de partage pour parler d’un truc qui vous dérange ou qui vous manque, mais vous n’aviez pas réussi à trouver un bon moment pour l’aborder. Explicitez vos besoins, observez les points communs et la manière dont les expériences et les demandes diffèrent l’une de l’autre.</p> | |||
| <p>• <strong>Les chantiers du moment (pour toi, pour moi)</strong><br/> | |||
| On ne prend pas toujours le temps de parler aux autres de ce qui se passe à l’intérieur de soi. Quelles réflexions nous habitent, qu’est-ce qu’on a réalisé récemment, qu’est-ce qu’on essaie consciemment de changer en ce moment, quelles difficultés est-ce qu’on traverse ?</p> | |||
| <h5 id="dé-centrer-son-regard-comprendre-ce-que-traverse-lautre">Dé-centrer son regard, comprendre ce que traverse l’autre</h5> | |||
| <p>• <strong>Drawing together</strong><br/> | |||
| Dessiner sa compréhension de sa propre trajectoire / celle de l’autre / celle de la relation sur un temps récent. Partager et voir combien les versions se recoupent… ou non. Ça permet de voir sur quoi chacun.e met l’accent.</p> | |||
| <p>• <strong>Où sommes-nous maintenant / où allons-nous ensemble ?</strong><br/> | |||
| On sera où à la saison prochaine ? L’année prochaine ?<br/> | |||
| On peut imaginer des versions idéales ou des versions réalistes de cet exercice qui sert à se projeter et à clarifier ses intentions.</p> | |||
| <p>• <strong>Nos récits intérieurs : quelles ont été nos crises ? Quels étaient nos plus beaux moments ?</strong><br/> | |||
| Comment est-ce qu’on se raconte ? Les réponses divergentes vont probablement soulever des sujets à approfondir.</p> | |||
| <p>• <strong>Tell me something I don’t know</strong><br/> | |||
| On n’extériorise jamais autant qu’on ne pense.</p> | |||
| <p>• <strong>L’écoute en silence</strong><br/> | |||
| A faire à tour de rôle. Quand on est en échange “ping-pong”, c’est la meilleure recette pour rentrer dans la surenchère des besoins et des blessures.<br/> | |||
| Pour s’assurer qu’une personne se sente comprise, entendue, accueillie, l’autre lui propose un temps d’écoute ininterrompu.<br/> | |||
| Si on est en posture d’écoute, qu’on voudrait reparler de certaines choses ou poser des questions après mais qu’on a peur d’oublier : il suffit de se munir d’un papier ou d’un carnet (qui peut aussi servir à prendre des notes pour revenir à ce qui s’est dit et/ou se remettre en question par la suite).</p> | |||
| <p>• <strong>Le temps des questions (que je te pose, que je voudrais que tu me poses)</strong></p> | |||
| <h5 id="conclure">Conclure</h5> | |||
| <p>• <strong>Demain, tu fais quoi pour te faire du bien ?</strong><br/> | |||
| • <strong>On se revoit quand ?</strong><br/> | |||
| • <strong>Qu’est-ce qu’on met en place, concrètement ? Individuellement et dans la relation ?</strong><br/> | |||
| • <strong>Comment est-ce que je peux te soutenir ? Comment puis-je mieux respecter mes propres besoins ? (concrètement, dans le mois à venir)</strong> (première question tirée du <a href="https://loomio.coop/stewarding.html">principe de “stewarding” chez Loomio</a>)<br/> | |||
| • <strong>Écrire ou dessiner ce qui nous a le plus touché, ce qu’on a appris</strong></p> | |||
| <p>Pour consigner ça quelque part et pouvoir y revenir si besoin, je documente ça (avec un outil qu’on maîtrise tous les deux) :</p> | |||
| <p><img src="/images/2019-07-07-weathers-of-the-heart/Repo retro.png" alt="Documentation nerds too"/></p> | |||
| <h4 id="labour-of-love">Labour of love</h4> | |||
| <p>Est-ce que c’est du travail ? Oui.<br/> | |||
| <a href="https://emmaclit.com/2017/05/09/repartition-des-taches-hommes-femmes/">Une BD a popularisé la notion de charge mentale</a> en France, et on commence à se réchauffer à l’idée qu’il existe une charge émotionnelle bien spécifique à celle d’un couple hétéro.<br/> | |||
| C’est utile de se demander qui fait le travail émotionnel dans le groupe ?<br/> | |||
| Qui investit son temps dans le fait de déconstruire et comprendre ce qui se passe ? Qui fait le travail d’introspection pour pouvoir mieux créer des passerelles ?<br/> | |||
| Est-ce que c’est déséquilibré ? Est-ce que c’est super-genré ?<br/> | |||
| La plupart du temps la réponse est oui, parce que qu’on est humains, que c’est le bordel, que c’est le reflet de notre société hétéro-patriarcale et qu’on ne peut pas tout maîtriser consciemment.</p> | |||
| <p>Personnellement, j’ai ressenti un énorme besoin de poser ces questions et de regarder les réponses en face (même celles qui me déplaisent profondément, comme celles qui concernent la dépendance affective et ma responsabilité dans ces schémas, au hasard). L’idée c’est de s’accompagner dans nos remises en question et d’ajuster la trajectoire.<br/> | |||
| D’essayer de préserver le temps de la cicatrisation.</p> | |||
| <p>Ce qu’on découvre, au terme de l’itinérance, c’est qu’elle n’a agi qu’en accélératrice et révélatrice de tendances qui étaient déjà présentes en nous, déjà en jeu dans la relation.<br/> | |||
| Au-delà des questions de surface, ou même de relation, on a commencé à toucher à des principes fondateurs de nos identités, aux choses qui se répètent malgré nous, malgré nos efforts conscients.</p> | |||
| <p>Les deux années qui viennent de passer ont probablement été à proportion égale les plus riches et les plus éprouvantes de ma vie. J’ai suivi ma boussole, je me suis remise en question, j’ai été invitée à / obligée de regarder des choses de moi que je ne connaissais pas. On m’a offert un autre regard, je suis passée par plusieurs prises de conscience d’une intensité que je ne soupçonnais pas.<br/> | |||
| Regarder ces choses-là en face, même si c’est douloureux, me fait faire d’immenses pas dans la compréhension de moi-même. <br/> | |||
| Maintenant j’ai besoin de sérénité, de repos, de racines, de clarté. De temps pour célébrer (mon courage, ma force, ma fatigue, ma prise de risque, mes apprentissages, ma détermination).</p> | |||
| <hr/> | |||
| <p>Article écrit en écoutant beaucoup 🎧 Herizen - <em><a href="https://www.deezer.com/us/track/565850072?">Do What You Want To</a><br/> | |||
| “Sometimes it feels like it is all bad, but it gets better”</em><br/> | |||
| et période influencée grandement par Adrienne Maree Brown, son livre 📚 <em><a href="https://www.akpress.org/pleasure-activism.html">Pleasure Activism</a></em> et sa question “Who taught you to feel good ?”</p> | |||
| <h4 id="-la-recette-de-larticle-">✐ la recette de l’article ✐</h4> | |||
| <p>Certains d’entre vous ont demandé comment on faisait pour tenir ce blog à deux.<br/> | |||
| C’est loin d’être évident. L’exercice de l’écriture est difficile en soi, à deux n’en parlons pas. (Même si on a développé quelques méthodes pour nos articles co-écrits).<br/> | |||
| Il faut que chacun.e soit disponible sur un temps donné. Pas évident quand on jongle entre plusieurs projets à la fois, comme c’est le cas pour nous. <br/> | |||
| Parfois, on a volontairement publié des articles co-signés et écrits à la première personne pour que nos ressentis se mêlent sans qu’il soit forcément nécessaire de retracer à qui appartient telle ou telle expérience.</p> | |||
| <p><strong>Alors comment a-t-on fait cette fois-ci ?</strong> <br/> | |||
| D’abord, j’écris la trame de l’article en partant de la base de nos formats de rétrospective : c’est la matière première de mon brouillon.<br/> | |||
| Ensuite, je passe du temps à l’augmenter : je travaille à clarifier mon intention et donner une direction claire à l’article dans l’introduction. Je décris les enjeux de manière plus étoffée, je contextualise mon cheminement, pourquoi je trouve ça intéressant de partager, je conclus avec quelques constats. <br/> | |||
| Lorsque je me sens satisfaite (ça m’a souvent pris déjà beaucoup de temps, de ré-écriture, de maturation), je montre l’article à Thomas, on le lit ensemble.</p> | |||
| <p>Ça m’aide à :</p> | |||
| <ul> | |||
| <li><strong>Prendre du recul</strong>.<br/> | |||
| En général, j’ai passé beaucoup de temps à écrire, j’ai le nez dedans, et à ce stade j’en ai souvent un peu marre, j’ai juste envie de publier pour que ce soit fait. Mais cette deuxième lecture m’apporte toujours. C’est comme si j’arrivais moi-même à porter un nouveau regard sur ce que j’ai écrit, rien que parce que je le soumet à une autre paire d’yeux.</li> | |||
| <li><strong>Intégrer : des conseils, des ressentis, des perspectives</strong><br/> | |||
| Ça permet de faire des rebonds qui enrichissent la première version. On finit toujours par avoir des discussions géniales à la clé qui alimentent le contenu : d’ailleurs on retient rarement les mêmes choses d’une expérience partagée.</li> | |||
| </ul> | |||
| <p>Je prends des notes, je change, j’ajoute tout un tas de choses.<br/> | |||
| Et à partir de là, on est en bonne voie pour la publication. | |||
| C’est comme ça qu’on a fonctionné, la plupart du temps, pour nos articles passés !</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://estcequecestdutravail.xyz/2019/07/weathers-of-the-heart.html">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 170
- 0
cache/0012ffa54d39ac5b4227d629730c1008/index.md
View File
| @@ -0,0 +1,170 @@ | |||
| title: Comment l'itinérance a mis notre relation à l'épreuve | |||
| url: https://estcequecestdutravail.xyz/2019/07/weathers-of-the-heart.html | |||
| hash_url: 0012ffa54d39ac5b4227d629730c1008 | |||
| <blockquote> | |||
| <p>If we think of love as a feeling we tend to expect it to always feel good, a view that is self-focused + unrealistic. If we think of love as an action, we make room for the range of feelings that relationship involves, including disappointment, anger + frustration.<br/> | |||
| <a href="https://twitter.com/thejessicadore/status/1146047702058381313">Jessica Dore</a></p> | |||
| </blockquote> | |||
| <p>Depuis la fin de notre itinérance et le début de notre ancrage à Crest, plusieurs personnes sont venues prendre des nouvelles, demander comment ça allait, en disant : « si je m’en tiens à tes photos ça a l’air génial ! »<br/> | |||
| À un moment où, en réalité, je traversais une période très difficile. Cet énorme décalage avec mon ressenti m’a fait un choc. Comme si j’avais trahi quelque chose qui me tenait beaucoup à cœur : être transparente sur les aspects difficiles de l’itinérance, ne pas en arrondir les angles pour présenter une version lisse, “acceptable” ou facile à fantasmer. Véhiculer des imaginaires creux, ça ne m’intéresse pas. Où était passée la ruguosité de nos expériences ?</p> | |||
| <p>Je pense qu’on était au plus proche de cette intention de discours nuancé et fidèle à notre vécu quand on a écrit <a href="https://estcequecestdutravail.xyz/2018/09/joies-et-peines.html">nos joies et nos peines</a> à mi-parcours.</p> | |||
| <p>Au-delà de ça, j’ai pris conscience que mes réseaux sociaux (et dans une certaine mesure la newsletter) proposaient des updates de la vie douce par facilité.<br/> | |||
| Parce que la difficulté et la tristesse nécessitent plus de recul, parce qu’il faut attendre qu’un peu de clarté se dégage. Et sans doute aussi par pudeur : ce sont des parts qui touchent de près une intimité qui n’a pas forcément vocation à être dévoilée.<br/> | |||
| Équilibre difficile à atteindre.</p> | |||
| <p>Alors j’ai voulu raconter combien l’itinérance nous a mis à l’épreuve à la fois individuellement et dans notre relation. | |||
| Comment on a tâtonné, quelles pistes on a trouvé, et comment on a bricolé des outils qui nous ont apporté un peu d’aide en chemin.</p> | |||
| <h3 id="secouer-les-structures-de-stabilité">Secouer les structures de stabilité</h3> | |||
| <p>Je ne compte plus le nombre de fois où on m’a parlé de <a href="https://fr.wikipedia.org/wiki/Pyramide_des_besoins#cite_note-2">la pyramide de Maslow</a>.</p> | |||
| <p>Je me souviens avoir entendu quelqu’un dire que le changement provoque des réactions régressives, comme des mécanismes de défense. Des choses qu’on n’aurait pas forcément faites si on ne s’était pas senti.e en insécurité.</p> | |||
| <p>Il faut dire qu’on a cumulé :</p> | |||
| <ul> | |||
| <li>Ne pas avoir de logement qui serve d’ancre a chamboulé bien plus de choses qu’on ne l’imaginait au départ.</li> | |||
| <li>Trimballer ses affaires de maison en maison toutes les semaines pendant un an, c’est parfois super, et parfois terriblement éprouvant.</li> | |||
| <li>Vous vous souvenez d’une période de chômage, où vous vous sentiez déboussolé.e à la suite de journées déstructurées et sans l’injonction du “je dois aller au boulot” ? L’itinérance, c’est un peu comme ça, mais cette fois-ci on jouait à deux.</li> | |||
| <li>Parce qu’il est un peu doux-dingue, Thomas s’est dit que ça serait un super moment pour terminer son livre. L’écriture étant un exercice-souffrance exemplaire.</li> | |||
| <li>Soyons clair.es, dans l’itinérance, une des seules constantes c’est d’être à deux… Quelle place alors pour le temps seul.e ? Comment l’organiser ?</li> | |||
| </ul> | |||
| <h3 id="dès-le-deuxième-mois-on-a-une-conversation-qui-ressemble-fort-à-une-crise-et-qui-va-durer-huit-mois">Dès le deuxième mois, on a une conversation qui ressemble fort à une crise, et qui va durer huit mois</h3> | |||
| <p>Bien sûr, la quête d’un nouveau lieu de vie, c’est à la fois un projet extraordinaire et totalement vertigineux : une des réponses à l’itinérance aurait tout à fait pu être une séparation.<br/> | |||
| Mais il se produit un truc, un lien qu’on ne veut pas lâcher.<br/> | |||
| Alors comment faire pour gérer nos besoins, nos peurs, nos problèmes de communication ?</p> | |||
| <p>Un jour, je suis tombée sur l’article <a href="https://medium.com/@alannallama/running-agile-scrum-on-our-relationship-9b2085c5d747">Running Agile Scrum on our Relationship</a>.<br/> | |||
| Qu’est-ce que c’est ?</p> | |||
| <blockquote> | |||
| <p>My partner and I are process nerds. Most projects we’re involved in use Agile, and it’s a set of tools and vocabulary we already share. We thought, why not run it on our relationship?<br/> | |||
| In Agile Scrum development, a sprint is a set period of time during which specific work is completed and made ready for review. […] Continuous improvement is mainly achieved through Retrospectives, where the team reviews what happened during the sprint: what worked, what didn’t, and what could be improved.</p> | |||
| </blockquote> | |||
| <p>Peut être qu’on est des process nerds. En tous cas, nos vies personnelles et professionnelles se nourrissent l’une de l’autre, c’est aussi pour ça que notre blog s’appelle comme ça. Ça commence à faire un bail qu’on traîne dans des évènements professionnels qui parlent de la nécessité de vivre ses émotions. Et quel chantier.</p> | |||
| <h3 id="on-a-commencé-à-se-donner-rendez-vous-pour-parler-de-nous">On a commencé à se donner rendez-vous pour parler de nous</h3> | |||
| <p>En fait, on s’en fout du mot qu’on met dessus. Appeler ça “rétrospective” ou appeler ça autrement n’a aucune importance. Ce qui compte, ce sont ces moments où on sait qu’on passe du temps uniquement à prendre soin de nous et de notre relation. | |||
| On a grandi dans des contextes qui nous ont appris à nous couper de nos émotions et à taire nos besoins, comment est-ce qu’on s’en défait ? Comment est-ce qu’on ré-apprend ensemble ?<br/> | |||
| Et pourquoi est-ce qu’un rendez-vous apporterait quelque chose de différent ?</p> | |||
| <p>Pour nous, ça a été l’occasion d’aborder des choses qu’on gardait pour nous, ne sachant pas quand ou comment les aborder. Les petites blessures qu’on pensait trop insignifiantes pour revenir dessus (mais qui alimentent la rancœur et globalement qui nous pourrissent la vie à petit feu), comme les gros trucs qu’on n’osait pas dire, qu’on n’osait pas avouer.<br/> | |||
| L’accumulation, le secret et le manque de considération, cancers du quotidien.</p> | |||
| <p>Les formats que je propose plus bas, je les ai adaptés de ce que j’ai trouvé soit <a href="https://retromat.org/fr/?id=2-33-20-48-16">ici</a>, soit <a href="https://gamestorming.com/">là</a>, soit dans mon cerveau.<br/> | |||
| À vous de picorer et voir ce qui vous paraît le plus adapté à votre singularité et celle de votre relation, le but étant de ne rien forcer, de ne rien ériger en règle. Mieux vaut bricoler les formats qui nous conviennent et dans lesquels on peut se sentir le plus fidèle à soi. If this isn’t your jam, make your own.</p> | |||
| <p><img src="/images/2019-07-07-weathers-of-the-heart/retro chat suisse.jpg" alt="Le cadre, c'est important"/> | |||
| Soigner le cadre, c’est important.</p> | |||
| <p>NB : j’écris cet article dans le contexte d’une relation monogame (mot affreux mais passons). Les relations ouvertes et/ou polyamoureuses ont exploré la sécurité affective depuis bien longtemps et ont certainement des manières super intéressantes d’aborder ce sujet. A voir si certaines sections de ces propositions peuvent s’adapter ou non à des participant.es multiples.</p> | |||
| <h5 id="ouverture">Ouverture</h5> | |||
| <p>• <strong>Météo</strong><br/> | |||
| Grand classique. Tour rapide de parole pour dire comment chacun.e se sent : fatigué, débordant.e d’énergie, nerveux, serein.e…</p> | |||
| <p>• <strong>Souvenirs de la dernière rétro.<br/> | |||
| Comment se sent-on depuis ? Qu’est-ce qui a changé ?</strong></p> | |||
| <h5 id="réparer">Réparer</h5> | |||
| <p>• <strong>Merci</strong><br/> | |||
| Je vous mets au défi de demander aux personnes autour de vous si elles sentent qu’elles reçoivent assez reconnaissance pour les efforts, l’attentions, le travail qu’elles fournissent. C’est le moment de se plonger dans la gratitude pour se remercier - de choses profondes ou de celles du quotidien.</p> | |||
| <p>• <strong>Je te présente mes excuses pour…</strong><br/> | |||
| L’occasion de formuler (ou de réitérer !) des excuses. Parfois, ce n’est pas évident de demander pardon, surtout sur le moment. Mises bout à bout, ces petites et grandes blessures s’accumulent, et finissent par peser lourd dans nos interactions au quotidien, qu’on en soit conscient.es ou non. C’est le moment de verbaliser le problème, quelle que soit l’échelle, de partager sa version et recevoir ce dont on a besoin pour dépasser la chose.</p> | |||
| <h5 id="prendre-du-recul">Prendre du recul</h5> | |||
| <p>• <strong>4 Ls - Loved, Learned, Lacked, Longed for</strong><br/> | |||
| Retour sur le mois qui vient de passer.<br/> | |||
| Qu’avez-vous aimé, appris, qu’est-ce qui vous a manqué, qu’auriez-vous aimé avoir ou recevoir ?</p> | |||
| <p>• <strong>La boîte à relation (j’enlève, j’ajoute) ou ‘The hopes & fears box’</strong><br/> | |||
| Crée un cadre de partage pour parler d’un truc qui vous dérange ou qui vous manque, mais vous n’aviez pas réussi à trouver un bon moment pour l’aborder. Explicitez vos besoins, observez les points communs et la manière dont les expériences et les demandes diffèrent l’une de l’autre.</p> | |||
| <p>• <strong>Les chantiers du moment (pour toi, pour moi)</strong><br/> | |||
| On ne prend pas toujours le temps de parler aux autres de ce qui se passe à l’intérieur de soi. Quelles réflexions nous habitent, qu’est-ce qu’on a réalisé récemment, qu’est-ce qu’on essaie consciemment de changer en ce moment, quelles difficultés est-ce qu’on traverse ?</p> | |||
| <h5 id="dé-centrer-son-regard-comprendre-ce-que-traverse-lautre">Dé-centrer son regard, comprendre ce que traverse l’autre</h5> | |||
| <p>• <strong>Drawing together</strong><br/> | |||
| Dessiner sa compréhension de sa propre trajectoire / celle de l’autre / celle de la relation sur un temps récent. Partager et voir combien les versions se recoupent… ou non. Ça permet de voir sur quoi chacun.e met l’accent.</p> | |||
| <p>• <strong>Où sommes-nous maintenant / où allons-nous ensemble ?</strong><br/> | |||
| On sera où à la saison prochaine ? L’année prochaine ?<br/> | |||
| On peut imaginer des versions idéales ou des versions réalistes de cet exercice qui sert à se projeter et à clarifier ses intentions.</p> | |||
| <p>• <strong>Nos récits intérieurs : quelles ont été nos crises ? Quels étaient nos plus beaux moments ?</strong><br/> | |||
| Comment est-ce qu’on se raconte ? Les réponses divergentes vont probablement soulever des sujets à approfondir.</p> | |||
| <p>• <strong>Tell me something I don’t know</strong><br/> | |||
| On n’extériorise jamais autant qu’on ne pense.</p> | |||
| <p>• <strong>L’écoute en silence</strong><br/> | |||
| A faire à tour de rôle. Quand on est en échange “ping-pong”, c’est la meilleure recette pour rentrer dans la surenchère des besoins et des blessures.<br/> | |||
| Pour s’assurer qu’une personne se sente comprise, entendue, accueillie, l’autre lui propose un temps d’écoute ininterrompu.<br/> | |||
| Si on est en posture d’écoute, qu’on voudrait reparler de certaines choses ou poser des questions après mais qu’on a peur d’oublier : il suffit de se munir d’un papier ou d’un carnet (qui peut aussi servir à prendre des notes pour revenir à ce qui s’est dit et/ou se remettre en question par la suite).</p> | |||
| <p>• <strong>Le temps des questions (que je te pose, que je voudrais que tu me poses)</strong></p> | |||
| <h5 id="conclure">Conclure</h5> | |||
| <p>• <strong>Demain, tu fais quoi pour te faire du bien ?</strong><br/> | |||
| • <strong>On se revoit quand ?</strong><br/> | |||
| • <strong>Qu’est-ce qu’on met en place, concrètement ? Individuellement et dans la relation ?</strong><br/> | |||
| • <strong>Comment est-ce que je peux te soutenir ? Comment puis-je mieux respecter mes propres besoins ? (concrètement, dans le mois à venir)</strong> (première question tirée du <a href="https://loomio.coop/stewarding.html">principe de “stewarding” chez Loomio</a>)<br/> | |||
| • <strong>Écrire ou dessiner ce qui nous a le plus touché, ce qu’on a appris</strong></p> | |||
| <p>Pour consigner ça quelque part et pouvoir y revenir si besoin, je documente ça (avec un outil qu’on maîtrise tous les deux) :</p> | |||
| <p><img src="/images/2019-07-07-weathers-of-the-heart/Repo retro.png" alt="Documentation nerds too"/></p> | |||
| <h4 id="labour-of-love">Labour of love</h4> | |||
| <p>Est-ce que c’est du travail ? Oui.<br/> | |||
| <a href="https://emmaclit.com/2017/05/09/repartition-des-taches-hommes-femmes/">Une BD a popularisé la notion de charge mentale</a> en France, et on commence à se réchauffer à l’idée qu’il existe une charge émotionnelle bien spécifique à celle d’un couple hétéro.<br/> | |||
| C’est utile de se demander qui fait le travail émotionnel dans le groupe ?<br/> | |||
| Qui investit son temps dans le fait de déconstruire et comprendre ce qui se passe ? Qui fait le travail d’introspection pour pouvoir mieux créer des passerelles ?<br/> | |||
| Est-ce que c’est déséquilibré ? Est-ce que c’est super-genré ?<br/> | |||
| La plupart du temps la réponse est oui, parce que qu’on est humains, que c’est le bordel, que c’est le reflet de notre société hétéro-patriarcale et qu’on ne peut pas tout maîtriser consciemment.</p> | |||
| <p>Personnellement, j’ai ressenti un énorme besoin de poser ces questions et de regarder les réponses en face (même celles qui me déplaisent profondément, comme celles qui concernent la dépendance affective et ma responsabilité dans ces schémas, au hasard). L’idée c’est de s’accompagner dans nos remises en question et d’ajuster la trajectoire.<br/> | |||
| D’essayer de préserver le temps de la cicatrisation.</p> | |||
| <p>Ce qu’on découvre, au terme de l’itinérance, c’est qu’elle n’a agi qu’en accélératrice et révélatrice de tendances qui étaient déjà présentes en nous, déjà en jeu dans la relation.<br/> | |||
| Au-delà des questions de surface, ou même de relation, on a commencé à toucher à des principes fondateurs de nos identités, aux choses qui se répètent malgré nous, malgré nos efforts conscients.</p> | |||
| <p>Les deux années qui viennent de passer ont probablement été à proportion égale les plus riches et les plus éprouvantes de ma vie. J’ai suivi ma boussole, je me suis remise en question, j’ai été invitée à / obligée de regarder des choses de moi que je ne connaissais pas. On m’a offert un autre regard, je suis passée par plusieurs prises de conscience d’une intensité que je ne soupçonnais pas.<br/> | |||
| Regarder ces choses-là en face, même si c’est douloureux, me fait faire d’immenses pas dans la compréhension de moi-même. <br/> | |||
| Maintenant j’ai besoin de sérénité, de repos, de racines, de clarté. De temps pour célébrer (mon courage, ma force, ma fatigue, ma prise de risque, mes apprentissages, ma détermination).</p> | |||
| <hr/> | |||
| <p>Article écrit en écoutant beaucoup 🎧 Herizen - <em><a href="https://www.deezer.com/us/track/565850072?">Do What You Want To</a><br/> | |||
| “Sometimes it feels like it is all bad, but it gets better”</em><br/> | |||
| et période influencée grandement par Adrienne Maree Brown, son livre 📚 <em><a href="https://www.akpress.org/pleasure-activism.html">Pleasure Activism</a></em> et sa question “Who taught you to feel good ?”</p> | |||
| <h4 id="-la-recette-de-larticle-">✐ la recette de l’article ✐</h4> | |||
| <p>Certains d’entre vous ont demandé comment on faisait pour tenir ce blog à deux.<br/> | |||
| C’est loin d’être évident. L’exercice de l’écriture est difficile en soi, à deux n’en parlons pas. (Même si on a développé quelques méthodes pour nos articles co-écrits).<br/> | |||
| Il faut que chacun.e soit disponible sur un temps donné. Pas évident quand on jongle entre plusieurs projets à la fois, comme c’est le cas pour nous. <br/> | |||
| Parfois, on a volontairement publié des articles co-signés et écrits à la première personne pour que nos ressentis se mêlent sans qu’il soit forcément nécessaire de retracer à qui appartient telle ou telle expérience.</p> | |||
| <p><strong>Alors comment a-t-on fait cette fois-ci ?</strong> <br/> | |||
| D’abord, j’écris la trame de l’article en partant de la base de nos formats de rétrospective : c’est la matière première de mon brouillon.<br/> | |||
| Ensuite, je passe du temps à l’augmenter : je travaille à clarifier mon intention et donner une direction claire à l’article dans l’introduction. Je décris les enjeux de manière plus étoffée, je contextualise mon cheminement, pourquoi je trouve ça intéressant de partager, je conclus avec quelques constats. <br/> | |||
| Lorsque je me sens satisfaite (ça m’a souvent pris déjà beaucoup de temps, de ré-écriture, de maturation), je montre l’article à Thomas, on le lit ensemble.</p> | |||
| <p>Ça m’aide à :</p> | |||
| <ul> | |||
| <li><strong>Prendre du recul</strong>.<br/> | |||
| En général, j’ai passé beaucoup de temps à écrire, j’ai le nez dedans, et à ce stade j’en ai souvent un peu marre, j’ai juste envie de publier pour que ce soit fait. Mais cette deuxième lecture m’apporte toujours. C’est comme si j’arrivais moi-même à porter un nouveau regard sur ce que j’ai écrit, rien que parce que je le soumet à une autre paire d’yeux.</li> | |||
| <li><strong>Intégrer : des conseils, des ressentis, des perspectives</strong><br/> | |||
| Ça permet de faire des rebonds qui enrichissent la première version. On finit toujours par avoir des discussions géniales à la clé qui alimentent le contenu : d’ailleurs on retient rarement les mêmes choses d’une expérience partagée.</li> | |||
| </ul> | |||
| <p>Je prends des notes, je change, j’ajoute tout un tas de choses.<br/> | |||
| Et à partir de là, on est en bonne voie pour la publication. | |||
| C’est comme ça qu’on a fonctionné, la plupart du temps, pour nos articles passés !</p> | |||
+ 616
- 0
cache/005ce2de88f4572bab2af5426d637e84/index.html
View File
| @@ -0,0 +1,616 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Amir Taaki, l’anarchiste pro-Kurde qui veut repolitiser les hackers (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://usbeketrica.com/article/amir-taaki-l-anarchiste-pro-kurde-qui-veut-repolitiser-les-hackers"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Amir Taaki, l’anarchiste pro-Kurde qui veut repolitiser les hackers (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://usbeketrica.com/article/amir-taaki-l-anarchiste-pro-kurde-qui-veut-repolitiser-les-hackers">Source originale du contenu</a></h3> | |||
| <p>À 30 ans à peine, Amir Taaki a déjà vécu plusieurs vies. Star du <a href="/article/bitcoin-peut-on-arreter-ce-monstre-energivore" target="_blank">bitcoin</a>, militant anarchiste, combattant sur le terrain pour la cause kurde, il se donne désormais pour mission de repolitiser le mouvement hacker en créant une académie dédiée à cette tâche. Baptisé <a href="https://polyteknik.org/poly.pdf" target="_blank">Autonomous Polytechnics</a>, cet institut sera basé à Barcelone, où Amir a accepté de nous rencontrer. Retrouvez également l'intégralité de ce portrait dans <a href="/magazine" target="_blank">le nouveau numéro d'</a><em><a href="/magazine" target="_blank">Usbek & Rica</a>.</em></p> | |||
| <p>Amir Taaki est un personnage insaisissable. Rencontrer ce garçon exige de passer par une première phase d’acharnement téléphonique. À force d’insistance, le jeune Anglo-Iranien finit par me donner rendez-vous devant un petit immeuble de Barcelone, non loin de la Sagrada Familia. La Aurea Social sert de quartier général à une multitude de projets sociaux. Amir me fait traverser le rez-de-chaussée, encombré d’une nuée de vêtements et de chaussures. <em>« C’est pour une collecte »</em>, précise-t-il. Amir Taaki m’entraîne vers le toit pour <em>« discuter au calme</em> <em>»</em>.</p> | |||
| <p>Assis sur son siège en plastique blanc, le trentenaire me fait face, béret noir vissé sur la tête, Ray-Ban sur le nez, les yeux perdus sur les toits de la capitale catalane. C’est à Barcelone qu’Amir a décidé d’installer son institut <a href="https://polyteknik.org/poly.pdf" target="_blank">Autonomous Polytechnics</a>, une académie censée redonner un souffle politique à la « communauté » des hackers.</p> | |||
| <p><iframe src="https://www.youtube.com/embed/OPmLn2fLcvU" frameborder="0" allowfullscreen="">VIDEO</iframe></p> | |||
| <p>Pour comprendre la raison d’être de cette structure supposée mettre la technologie au service de buts sociaux et politiques, il faut d’abord remonter le cours de l’histoire personnelle d’Amir. À 13 ans, il obtient son premier ordinateur. L’adolescent passe un nombre d’heures incommensurables à tâtonner, apprendre, pour enfin maîtriser le langage d’Internet. <em>« J’ai beaucoup travaillé pour réussir à comprendre ce monde. C’était devenu une obsession. Pendant cette période, j’ai été très marqué par Linux et les logiciels libres. »</em> La progression de l’autodidacte est impressionnante. Quelques années lui suffisent pour devenir un codeur de génie. <em>« Et puis j’ai entendu parler de l’idée de créer une nouvelle économie qui existerait dans l’Internet. Je me suis reconnu dans cette vision des choses. On disait aussi que cette nouvelle économie pourrait inspirer les autres pans de la société. »</em></p> | |||
| <blockquote> | |||
| <p>La rumeur avait couru qu’Amir Taaki et Satoshi Nakamoto, « l’inventeur » du bitcoin – dont l’identité exacte est toujours inconnue –, n’étaient qu’une seule et même personne</p> | |||
| </blockquote> | |||
| <p>Il participe alors aux débuts de l’aventure bitcoin, la crypto-monnaie la plus utilisée aujourd’hui. Les incroyables capacités d’Amir n’échappent pas aux observateurs avisés : en 2014, son nom apparaît dans le classement du magazine <em>Forbes</em> des « 30 Under 30 », qui établit la liste des personnalités les plus prometteuses du secteur de la tech – et potentiellement susceptibles de devenir un jour millionnaires grâce à leurs innovations. Un classement qu’Amir s’est bien gardé d’évoquer pendant notre entretien, sans doute parce que ce palmarès ne colle pas avec l’image d’anarchiste révolutionnaire qu’il s’est ensuite évertué à construire. À l’époque, la rumeur avait même couru qu’Amir Taaki et Satoshi Nakamoto, « l’inventeur » du bitcoin – dont l’identité exacte est toujours inconnue –, n’étaient qu’une seule et même personne.</p> | |||
| <h2><strong>« Deux cents idées à la seconde »</strong></h2> | |||
| <p>La notoriété d’Amir décolle surtout à partir du moment où il met en place le « dark wallet » : <em>« Le concept du dark wallet était de créer un portefeuille de </em><em>bitcoins permettant de faire des transactions sans laisser de traces sur la blockchain.</em> <em>»</em> Pour relever ce défi, Amir rassemble une équipe de développeurs informatiques à la réputation parfois sulfureuse, à l’image de Cody Wilson, un Texan célèbre pour avoir imprimé des armes en 3D. Si le dark wallet se présente comme un instrument de liberté, il peut aussi être utilisé pour toutes sortes de trafics illicites ou le blanchiment d’argent. <em>« L’État islamique avait recommandé à ses membres l’utilisation du dark wallet »</em>, reconnaît Amir Taaki, du ton légèrement provocant de celui qui assume tout. <em>« Le dark wallet était une bonne idée. Mais je pense qu’il y a eu un problème dans l’exécution du projet. La mise de fonds était trop faible pour résister à la concurrence</em>, estime quant à lui Stephan Tual, ami d’Amir et cofondateur de la <a href="/article/typologie-des-crypto-monnaies-a-l-usage-de-ceux-qui-n-y-comprennent-rien" target="_blank">crypto-monnaie Ethereum</a>. <em>C’est un trait de caractère spécifique aux génies : ils ont deux cents idées à la seconde, mais ils ne sont pas très doués pour la mise en application. »</em></p> | |||
| <p><iframe src="https://www.youtube.com/embed/A0tCaOI0UYM" frameborder="0" allowfullscreen="">VIDEO</iframe></p> | |||
| <p>Amir Taaki décide alors de quitter l’univers du bitcoin, perverti selon lui par ceux qui ne cherchent qu’à faire du profit : <em>« Aujourd’hui, on n’est plus du tout dans l’esprit originel du bitcoin. Les businessmans et les entreprises ont pris les commandes. Au départ, l’objectif était d’avoir une monnaie qui ne serait ni contrôlée par l’État, ni par les banques centrales. C’est ça qui faisait du bitcoin un projet politique</em>. <em>»</em> Amir reste silencieux quelques secondes en se frottant la barbe, comme pour donner plus de poids aux mots qu’il s’apprête à prononcer : <em>«</em> <em>La technologie n’est jamais neutre. »</em></p> | |||
| <blockquote> | |||
| <p>« Amir aurait pu devenir millionnaire, mais il a choisi un autre chemin. Il s’est investi dans les causes auxquelles il croyait. »</p> | |||
| </blockquote> | |||
| <p>Ce choix de prendre ses distances avec le bitcoin fait encore aujourd’hui l’admiration de Stephan Tual : <em>« On rencontre beaucoup de gens cyniques et intéressés par le profit dans l’univers des crypto-monnaies. Amir n’est pas comme ça. Il aurait pu devenir millionnaire, mais il a choisi un autre chemin. Il s’est investi dans les causes auxquelles il croyait. »</em></p> | |||
| <p>Amir se fait discret avant de ressurgir, quelques mois plus tard, au Rojava, dans le nord de la Syrie. C’est là que ses penchants anarchistes l’ont mené pour défendre les Kurdes face à l’État islamique, dans une région devenue le laboratoire politique du peuple kurde. La zone s’est en effet déclarée « fédérale et administrative » le 17 mars 2016. Son modèle de gouvernance s’inspire du « confédéralisme démocratique » théorisé par Abdullah Öcalan, le chef du Parti des travailleurs du Kurdistan (PKK), arrêté au Kenya en 1999 et emprisonné depuis sur une île turque de la mer de Marmara.</p> | |||
| <h2><strong>Sur le front avec les Kurdes</strong></h2> | |||
| <p>Séduit par cette dimension expérimentale, Amir décide de s’engager physiquement aux côtés des Kurdes : <em>« Ce qui est fait en ce moment au Rojava peut être une étape très importante pour les anarchistes. J’ai senti qu’il était de mon devoir d’aller défendre le Rojava. J’ai tout lâché et j’y suis allé. »</em></p> | |||
| <p>Il emporte avec lui du matériel informatique, dans l’espoir de mettre son génie technologique au service du Rojava. Mais, arrivé sur place, c’est un tout autre programme qui l’attend. C’est surtout de main-d’œuvre humaine dont les Kurdes ont besoin pour faire face à l’État islamique. Amir est donc envoyé se battre sur la ligne de front avec les YPG (Unités de protection du peuple).</p> | |||
| <figure class="default"><img src="https://s3-eu-west-1.amazonaws.com/usb-prd-upload/images/thumb_840xh/5b194eb40c15d.jpg" alt="Une combattante kurde des Unités de protection du peuple"/> | |||
| <figcaption>Une combattante kurde des Unités de protection du peuple / © Kurdishstruggle / Flickr</figcaption> | |||
| <figcaption/> | |||
| </figure> | |||
| <p>Lorsqu’il raconte cet épisode, Amir Taaki reste flou. Il préfère évoquer son apprentissage de la langue kurde. Au bout de trois mois et demi sur le front, le combattant débutant est envoyé à l’arrière. D’abord dans un comité économique où il s’occupe du recyclage et de l’implantation d’usines à engrais. Il apporte ensuite sa contribution intellectuelle à des projets de recherche sur l’énergie, l’industrie et la technologie. D’ailleurs, l’idée initiale d’Amir Taaki était d’installer du réseau au Rojava, ce qu’il a en partie réussi à faire : <em>« Mais rien de substantiel</em> <em>»</em>, nuance-t-il.</p> | |||
| <blockquote> | |||
| <p>« Abdullah Öcalan est un des plus grands penseurs du XXI<sup>e</sup> siècle. C’est un prophète. »</p> | |||
| </blockquote> | |||
| <p>Après un an et demi en Syrie, le pionnier du bitcoin fait ses valises pour revenir en Angleterre. Mais à l’aéroport, la police saisit son passeport et l’assigne à résidence : <em>« Les autorités voulaient savoir ce que je faisais exactement en Syrie. Parce que si tu vas te battre pour tes idées, pour une idéologie, tu es considéré comme un terroriste</em>. <em>»</em> Alors, pendant toute une année, Amir Taaki reste en Angleterre. <em>« Une année horrible »</em>, grimace-t-il. Mais l’ex-soldat ne reste pas les bras croisés. Il lit et étudie, <em>« surtout </em><em>pour comprendre la pensée d’Öcalan</em> <em>»</em>.</p> | |||
| <figure class="medium"><img src="https://s3-eu-west-1.amazonaws.com/usb-prd-upload/images/thumb_wx1200/5b194dc997f80.jpg" alt="Manifestants pro-PKK à Londres, en avril 2003"/> | |||
| <figcaption>Manifestants pro-PKK à Londres, en avril 2003 / © FrancisTyers~commonswiki</figcaption> | |||
| <figcaption/> | |||
| </figure> | |||
| <p>La lecture des écrits du chef du PKK l’a beaucoup marqué : <em>« C’est un des plus grands penseurs du XXI<sup>e</sup> siècle. C’est un prophète.</em> <em>»</em> Amir profite également de son séjour forcé au Royaume-Uni pour aller à la rencontre des groupes anarchistes et des hackers du coin, qui le déçoivent profondément.</p> | |||
| <h2><strong>« Bulle de confort »</strong></h2> | |||
| <p>Après son année anglaise, Amir renouvelle l’expérience du contact des communautés anarchistes et des hackers, à l’échelle européenne cette fois. Partout, il dresse un même constat : celui de la dépolitisation. <em>« Aujourd’hui, l’utilisation de la technologie ne répond à aucune vision. La technologie est vraiment un grand pouvoir, et on devrait l’utiliser pour changer la société et la politique. Mais ceux qui savent utiliser cette technologie se retrouvent dans des </em>hacker spaces<em> et se consacrent à leurs projets individuels. Ils se servent de la technologie comme d’un jouet. » </em>Amir prend un ton blasé et peste : <em>« C’est vraiment très immature comme attitude. Les hackers devraient utiliser leurs compétences pour avoir une action sur la société. À la place, on a l’impression qu’être hacker est une déclaration à la mode, comme pour dire “Regarde, je suis hacker, je suis tellement cool”.</em> <em>»</em></p> | |||
| <blockquote> | |||
| <p>« En Occident, beaucoup de hackers n’ont aucune idée à défendre, ils sont juste perdus, enfermés dans leur bulle de confort »</p> | |||
| </blockquote> | |||
| <p>Même à Exarchia, quartier d’Athènes réputé pour abriter les derniers bastions d’anarchistes européens, la désillusion est au rendez-vous : <em>« Là-bas, ils s’habillent comme des anarchistes, ils parlent parfois comme des anarchistes, mais ils n’ont aucune conscience politique</em>. <em>»</em> De l’avis d’Amir, hackers et anarchistes souffrent du même mal : un manque d’implication réel dans le champ politique. Et cela serait la conséquence d’un <em>« monde incroyablement complexe. En Occident, beaucoup de hackers n’essaient pas d’améliorer la situation pour mieux appréhender le monde parce qu’ils ont purement et simplement arrêté de croire en quoi que ce soit. Ils n’ont aucune idée à défendre, ils sont juste perdus, enfermés dans leur bulle de confort</em> <em>»</em>.</p> | |||
| <p>Fort de toutes ces expériences, Amir Taaki conçoit un projet qui rassemblerait toutes les facettes de sa personnalité : le hacker surdoué, l’anarchiste ancré dans le réel et l’admirateur du penseur Abdullah Öcalan. Ce sera une académie pour hackers. Jusqu’à ce moment de notre entrevue, Amir s’est exprimé de manière un peu décousue, se lançant dans de longs raisonnements où lui-même semblait parfois s’égarer, s’interrompant quelques secondes entre deux mots, comme pour retrouver le fil de sa pensée. Mais lorsqu’il parle de Polytechnics, il prend soin de trouver le bon équilibre entre concepts idéologiques et données concrètes pour expliquer le futur fonctionnement de son institut.</p> | |||
| <h2><strong>Programme scolaire sous Linux</strong></h2> | |||
| <p>Il s’agit de rassembler une équipe de cinq personnes, <em>« pour commencer</em> <em>»</em>, dans le but de leur fournir un entraînement à la fois idéologique et physique. <em>« Ils étudieront Öcalan, évidemment, mais aussi des penseurs comme Friedrich Nietzsche, Michel Foucault ou Max Weber. Ils verront aussi l’histoire des techniques, la sociologie, la méthodologie… »</em> Les candidats pourront être des hommes comme des femmes, mais jeunes de préférence. Il ne faudra pas nécessairement être un hacker, même si les programmeurs seront plus à même d’intégrer l’institut. En revanche, une motivation de fer et le partage des valeurs prônées par Amir Taaki seront déterminants : <em>« Les membres devront observer une discipline stricte et être entièrement dévoués à la cause. »</em> L’emploi du temps, quasi martial, qui prévoit des journées démarrant à 6 heures et comprenant six leçons par jour, est d’ores et déjà établi. Le sport sera un complément d’apprentissage, non pas pour devenir une force paramilitaire, mais pour <em>« avoir un esprit sain dans un corps sain »</em>, souligne Amir.</p> | |||
| <figure class="default"><img src="https://s3-eu-west-1.amazonaws.com/usb-prd-upload/images/thumb_840xh/5b194f9ed87af.jpg" alt="Dessin de François Olislaeger pour Usbek & Rica"/> | |||
| <figcaption>Dessin de François Olislaeger pour Usbek & Rica</figcaption> | |||
| <figcaption/> | |||
| </figure> | |||
| <p>Le projet Autonomous Polytechnics est détaillé dans un dossier de 18 pages qu’il distribue dans différentes réunions. On y découvre que le groupe de cinq personnes aura comme première mission d’appuyer le mouvement enclenché au Rojava : <em>« Ceux qui seront des nôtres seront les leaders d’un futur mouvement technologique organisé autour d’une initiative méthodologique et idéologique née de la longue lutte des Kurdes contre les forces féodales oppressives cherchant à supprimer leur existence. </em>(…)<em> Il est impératif de commencer à mettre en place le bras technologique de ce mouvement. Notre portée est historique et globale. Nous voulons toucher tous les secteurs de la société à travers la technologie, pour l’influencer selon nos idéaux. »</em></p> | |||
| <p>Le document précise aussi que l’administration actuelle du Rojava est favorable à la mise en place d’actions menées par le futur institut. Les mots de Stephan Tual au sujet de l’expérience syrienne d’Amir me reviennent alors en mémoire : <em>« Il n’est pas resté longtemps au front. Mais il a rencontré ce général qui s’est rendu compte de ses capacités et ils ont décidé ensemble de mettre des choses en place.</em> <em>»</em> Peut-être qu’en fin de compte Amir n’a pas juste fait partie sur place d’un comité économique mais qu’il a également profité de son séjour syrien pour jeter les bases de l’action de sa future académie.</p> | |||
| <blockquote> | |||
| <p>La création d’un programme scolaire sous Linux est prévue, ainsi que la configuration de plateformes en ligne pour « l’auto-organisation écologique »</p> | |||
| </blockquote> | |||
| <p>Le Rojava ne sera qu’une première étape, une première lutte. Amir prévoit déjà d’appuyer d’autres mouvements révolutionnaires qui partageront sa vision. Des antennes de l’institut sont prévues en Inde et en Amérique latine. Pour mener des actions concrètes sur tous ces terrains, Polytechnics s’est doté d’un plan précis dont la pierre angulaire sera le bitcoin, afin d’opérer différentes transactions financières. Des messageries et des réseaux sociaux spécifiques seront aussi mis en place. La création d’un programme scolaire sous Linux est prévue, ainsi que la configuration de plateformes en ligne pour <em>« l’auto-organisation écologique »</em>. Tout semble fin prêt. Au printemps 2018, l’institut devrait donc ouvrir ses portes aux cinq candidats sélectionnés.</p> | |||
| <p>Faut-il voir dans cette académie de hackers un rassemblement de doux dingues en mal de sensations fortes ? Ou plutôt le regroupement tout ce qu’il y a de plus sérieux d’hacktivistes pouvant apporter un soutien décisif aux futurs mouvements révolutionnaires ? Car après tout, les révolutions sont aussi, parfois, le fait d’individus solitaires et sortant des clous, dont le seul moteur est d’aller vers de<em> « nouveaux paradigmes »</em>, selon la formule qui revient sans cesse dans la bouche du codeur anarchiste. En tout cas, Amir tient déjà sa <em>baseline</em>. Une ambition qui sonne très Silicon Valley et que les candidats à son académie devront tous avoir chevillée au corps : « Changer le monde ».</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://usbeketrica.com/article/amir-taaki-l-anarchiste-pro-kurde-qui-veut-repolitiser-les-hackers">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 59
- 0
cache/005ce2de88f4572bab2af5426d637e84/index.md
View File
| @@ -0,0 +1,59 @@ | |||
| title: Amir Taaki, l’anarchiste pro-Kurde qui veut repolitiser les hackers | |||
| url: https://usbeketrica.com/article/amir-taaki-l-anarchiste-pro-kurde-qui-veut-repolitiser-les-hackers | |||
| hash_url: 005ce2de88f4572bab2af5426d637e84 | |||
| <p>À 30 ans à peine, Amir Taaki a déjà vécu plusieurs vies. Star du <a href="/article/bitcoin-peut-on-arreter-ce-monstre-energivore" target="_blank">bitcoin</a>, militant anarchiste, combattant sur le terrain pour la cause kurde, il se donne désormais pour mission de repolitiser le mouvement hacker en créant une académie dédiée à cette tâche. Baptisé <a href="https://polyteknik.org/poly.pdf" target="_blank">Autonomous Polytechnics</a>, cet institut sera basé à Barcelone, où Amir a accepté de nous rencontrer. Retrouvez également l'intégralité de ce portrait dans <a href="/magazine" target="_blank">le nouveau numéro d'</a><em><a href="/magazine" target="_blank">Usbek & Rica</a>.</em></p> | |||
| <p>Amir Taaki est un personnage insaisissable. Rencontrer ce garçon exige de passer par une première phase d’acharnement téléphonique. À force d’insistance, le jeune Anglo-Iranien finit par me donner rendez-vous devant un petit immeuble de Barcelone, non loin de la Sagrada Familia. La Aurea Social sert de quartier général à une multitude de projets sociaux. Amir me fait traverser le rez-de-chaussée, encombré d’une nuée de vêtements et de chaussures. <em>« C’est pour une collecte »</em>, précise-t-il. Amir Taaki m’entraîne vers le toit pour <em>« discuter au calme</em> <em>»</em>.</p> | |||
| <p>Assis sur son siège en plastique blanc, le trentenaire me fait face, béret noir vissé sur la tête, Ray-Ban sur le nez, les yeux perdus sur les toits de la capitale catalane. C’est à Barcelone qu’Amir a décidé d’installer son institut <a href="https://polyteknik.org/poly.pdf" target="_blank">Autonomous Polytechnics</a>, une académie censée redonner un souffle politique à la « communauté » des hackers.</p> | |||
| <p><iframe src="https://www.youtube.com/embed/OPmLn2fLcvU" frameborder="0" allowfullscreen="">VIDEO</iframe></p> | |||
| <p>Pour comprendre la raison d’être de cette structure supposée mettre la technologie au service de buts sociaux et politiques, il faut d’abord remonter le cours de l’histoire personnelle d’Amir. À 13 ans, il obtient son premier ordinateur. L’adolescent passe un nombre d’heures incommensurables à tâtonner, apprendre, pour enfin maîtriser le langage d’Internet. <em>« J’ai beaucoup travaillé pour réussir à comprendre ce monde. C’était devenu une obsession. Pendant cette période, j’ai été très marqué par Linux et les logiciels libres. »</em> La progression de l’autodidacte est impressionnante. Quelques années lui suffisent pour devenir un codeur de génie. <em>« Et puis j’ai entendu parler de l’idée de créer une nouvelle économie qui existerait dans l’Internet. Je me suis reconnu dans cette vision des choses. On disait aussi que cette nouvelle économie pourrait inspirer les autres pans de la société. »</em></p> | |||
| <blockquote> | |||
| <p>La rumeur avait couru qu’Amir Taaki et Satoshi Nakamoto, « l’inventeur » du bitcoin – dont l’identité exacte est toujours inconnue –, n’étaient qu’une seule et même personne</p> | |||
| </blockquote> | |||
| <p>Il participe alors aux débuts de l’aventure bitcoin, la crypto-monnaie la plus utilisée aujourd’hui. Les incroyables capacités d’Amir n’échappent pas aux observateurs avisés : en 2014, son nom apparaît dans le classement du magazine <em>Forbes</em> des « 30 Under 30 », qui établit la liste des personnalités les plus prometteuses du secteur de la tech – et potentiellement susceptibles de devenir un jour millionnaires grâce à leurs innovations. Un classement qu’Amir s’est bien gardé d’évoquer pendant notre entretien, sans doute parce que ce palmarès ne colle pas avec l’image d’anarchiste révolutionnaire qu’il s’est ensuite évertué à construire. À l’époque, la rumeur avait même couru qu’Amir Taaki et Satoshi Nakamoto, « l’inventeur » du bitcoin – dont l’identité exacte est toujours inconnue –, n’étaient qu’une seule et même personne.</p> | |||
| <h2><strong>« Deux cents idées à la seconde »</strong></h2> | |||
| <p>La notoriété d’Amir décolle surtout à partir du moment où il met en place le « dark wallet » : <em>« Le concept du dark wallet était de créer un portefeuille de </em><em>bitcoins permettant de faire des transactions sans laisser de traces sur la blockchain.</em> <em>»</em> Pour relever ce défi, Amir rassemble une équipe de développeurs informatiques à la réputation parfois sulfureuse, à l’image de Cody Wilson, un Texan célèbre pour avoir imprimé des armes en 3D. Si le dark wallet se présente comme un instrument de liberté, il peut aussi être utilisé pour toutes sortes de trafics illicites ou le blanchiment d’argent. <em>« L’État islamique avait recommandé à ses membres l’utilisation du dark wallet »</em>, reconnaît Amir Taaki, du ton légèrement provocant de celui qui assume tout. <em>« Le dark wallet était une bonne idée. Mais je pense qu’il y a eu un problème dans l’exécution du projet. La mise de fonds était trop faible pour résister à la concurrence</em>, estime quant à lui Stephan Tual, ami d’Amir et cofondateur de la <a href="/article/typologie-des-crypto-monnaies-a-l-usage-de-ceux-qui-n-y-comprennent-rien" target="_blank">crypto-monnaie Ethereum</a>. <em>C’est un trait de caractère spécifique aux génies : ils ont deux cents idées à la seconde, mais ils ne sont pas très doués pour la mise en application. »</em></p> | |||
| <p><iframe src="https://www.youtube.com/embed/A0tCaOI0UYM" frameborder="0" allowfullscreen="">VIDEO</iframe></p> | |||
| <p>Amir Taaki décide alors de quitter l’univers du bitcoin, perverti selon lui par ceux qui ne cherchent qu’à faire du profit : <em>« Aujourd’hui, on n’est plus du tout dans l’esprit originel du bitcoin. Les businessmans et les entreprises ont pris les commandes. Au départ, l’objectif était d’avoir une monnaie qui ne serait ni contrôlée par l’État, ni par les banques centrales. C’est ça qui faisait du bitcoin un projet politique</em>. <em>»</em> Amir reste silencieux quelques secondes en se frottant la barbe, comme pour donner plus de poids aux mots qu’il s’apprête à prononcer : <em>«</em> <em>La technologie n’est jamais neutre. »</em></p> | |||
| <blockquote> | |||
| <p>« Amir aurait pu devenir millionnaire, mais il a choisi un autre chemin. Il s’est investi dans les causes auxquelles il croyait. »</p> | |||
| </blockquote> | |||
| <p>Ce choix de prendre ses distances avec le bitcoin fait encore aujourd’hui l’admiration de Stephan Tual : <em>« On rencontre beaucoup de gens cyniques et intéressés par le profit dans l’univers des crypto-monnaies. Amir n’est pas comme ça. Il aurait pu devenir millionnaire, mais il a choisi un autre chemin. Il s’est investi dans les causes auxquelles il croyait. »</em></p> | |||
| <p>Amir se fait discret avant de ressurgir, quelques mois plus tard, au Rojava, dans le nord de la Syrie. C’est là que ses penchants anarchistes l’ont mené pour défendre les Kurdes face à l’État islamique, dans une région devenue le laboratoire politique du peuple kurde. La zone s’est en effet déclarée « fédérale et administrative » le 17 mars 2016. Son modèle de gouvernance s’inspire du « confédéralisme démocratique » théorisé par Abdullah Öcalan, le chef du Parti des travailleurs du Kurdistan (PKK), arrêté au Kenya en 1999 et emprisonné depuis sur une île turque de la mer de Marmara.</p> | |||
| <h2><strong>Sur le front avec les Kurdes</strong></h2> | |||
| <p>Séduit par cette dimension expérimentale, Amir décide de s’engager physiquement aux côtés des Kurdes : <em>« Ce qui est fait en ce moment au Rojava peut être une étape très importante pour les anarchistes. J’ai senti qu’il était de mon devoir d’aller défendre le Rojava. J’ai tout lâché et j’y suis allé. »</em></p> | |||
| <p>Il emporte avec lui du matériel informatique, dans l’espoir de mettre son génie technologique au service du Rojava. Mais, arrivé sur place, c’est un tout autre programme qui l’attend. C’est surtout de main-d’œuvre humaine dont les Kurdes ont besoin pour faire face à l’État islamique. Amir est donc envoyé se battre sur la ligne de front avec les YPG (Unités de protection du peuple).</p> | |||
| <figure class="default"><img src="https://s3-eu-west-1.amazonaws.com/usb-prd-upload/images/thumb_840xh/5b194eb40c15d.jpg" alt="Une combattante kurde des Unités de protection du peuple"/> | |||
| <figcaption>Une combattante kurde des Unités de protection du peuple / © Kurdishstruggle / Flickr</figcaption> | |||
| <figcaption/> | |||
| </figure> | |||
| <p>Lorsqu’il raconte cet épisode, Amir Taaki reste flou. Il préfère évoquer son apprentissage de la langue kurde. Au bout de trois mois et demi sur le front, le combattant débutant est envoyé à l’arrière. D’abord dans un comité économique où il s’occupe du recyclage et de l’implantation d’usines à engrais. Il apporte ensuite sa contribution intellectuelle à des projets de recherche sur l’énergie, l’industrie et la technologie. D’ailleurs, l’idée initiale d’Amir Taaki était d’installer du réseau au Rojava, ce qu’il a en partie réussi à faire : <em>« Mais rien de substantiel</em> <em>»</em>, nuance-t-il.</p> | |||
| <blockquote> | |||
| <p>« Abdullah Öcalan est un des plus grands penseurs du XXI<sup>e</sup> siècle. C’est un prophète. »</p> | |||
| </blockquote> | |||
| <p>Après un an et demi en Syrie, le pionnier du bitcoin fait ses valises pour revenir en Angleterre. Mais à l’aéroport, la police saisit son passeport et l’assigne à résidence : <em>« Les autorités voulaient savoir ce que je faisais exactement en Syrie. Parce que si tu vas te battre pour tes idées, pour une idéologie, tu es considéré comme un terroriste</em>. <em>»</em> Alors, pendant toute une année, Amir Taaki reste en Angleterre. <em>« Une année horrible »</em>, grimace-t-il. Mais l’ex-soldat ne reste pas les bras croisés. Il lit et étudie, <em>« surtout </em><em>pour comprendre la pensée d’Öcalan</em> <em>»</em>.</p> | |||
| <figure class="medium"><img src="https://s3-eu-west-1.amazonaws.com/usb-prd-upload/images/thumb_wx1200/5b194dc997f80.jpg" alt="Manifestants pro-PKK à Londres, en avril 2003"/> | |||
| <figcaption>Manifestants pro-PKK à Londres, en avril 2003 / © FrancisTyers~commonswiki</figcaption> | |||
| <figcaption/> | |||
| </figure> | |||
| <p>La lecture des écrits du chef du PKK l’a beaucoup marqué : <em>« C’est un des plus grands penseurs du XXI<sup>e</sup> siècle. C’est un prophète.</em> <em>»</em> Amir profite également de son séjour forcé au Royaume-Uni pour aller à la rencontre des groupes anarchistes et des hackers du coin, qui le déçoivent profondément.</p> | |||
| <h2><strong>« Bulle de confort »</strong></h2> | |||
| <p>Après son année anglaise, Amir renouvelle l’expérience du contact des communautés anarchistes et des hackers, à l’échelle européenne cette fois. Partout, il dresse un même constat : celui de la dépolitisation. <em>« Aujourd’hui, l’utilisation de la technologie ne répond à aucune vision. La technologie est vraiment un grand pouvoir, et on devrait l’utiliser pour changer la société et la politique. Mais ceux qui savent utiliser cette technologie se retrouvent dans des </em>hacker spaces<em> et se consacrent à leurs projets individuels. Ils se servent de la technologie comme d’un jouet. » </em>Amir prend un ton blasé et peste : <em>« C’est vraiment très immature comme attitude. Les hackers devraient utiliser leurs compétences pour avoir une action sur la société. À la place, on a l’impression qu’être hacker est une déclaration à la mode, comme pour dire “Regarde, je suis hacker, je suis tellement cool”.</em> <em>»</em></p> | |||
| <blockquote> | |||
| <p>« En Occident, beaucoup de hackers n’ont aucune idée à défendre, ils sont juste perdus, enfermés dans leur bulle de confort »</p> | |||
| </blockquote> | |||
| <p>Même à Exarchia, quartier d’Athènes réputé pour abriter les derniers bastions d’anarchistes européens, la désillusion est au rendez-vous : <em>« Là-bas, ils s’habillent comme des anarchistes, ils parlent parfois comme des anarchistes, mais ils n’ont aucune conscience politique</em>. <em>»</em> De l’avis d’Amir, hackers et anarchistes souffrent du même mal : un manque d’implication réel dans le champ politique. Et cela serait la conséquence d’un <em>« monde incroyablement complexe. En Occident, beaucoup de hackers n’essaient pas d’améliorer la situation pour mieux appréhender le monde parce qu’ils ont purement et simplement arrêté de croire en quoi que ce soit. Ils n’ont aucune idée à défendre, ils sont juste perdus, enfermés dans leur bulle de confort</em> <em>»</em>.</p> | |||
| <p>Fort de toutes ces expériences, Amir Taaki conçoit un projet qui rassemblerait toutes les facettes de sa personnalité : le hacker surdoué, l’anarchiste ancré dans le réel et l’admirateur du penseur Abdullah Öcalan. Ce sera une académie pour hackers. Jusqu’à ce moment de notre entrevue, Amir s’est exprimé de manière un peu décousue, se lançant dans de longs raisonnements où lui-même semblait parfois s’égarer, s’interrompant quelques secondes entre deux mots, comme pour retrouver le fil de sa pensée. Mais lorsqu’il parle de Polytechnics, il prend soin de trouver le bon équilibre entre concepts idéologiques et données concrètes pour expliquer le futur fonctionnement de son institut.</p> | |||
| <h2><strong>Programme scolaire sous Linux</strong></h2> | |||
| <p>Il s’agit de rassembler une équipe de cinq personnes, <em>« pour commencer</em> <em>»</em>, dans le but de leur fournir un entraînement à la fois idéologique et physique. <em>« Ils étudieront Öcalan, évidemment, mais aussi des penseurs comme Friedrich Nietzsche, Michel Foucault ou Max Weber. Ils verront aussi l’histoire des techniques, la sociologie, la méthodologie… »</em> Les candidats pourront être des hommes comme des femmes, mais jeunes de préférence. Il ne faudra pas nécessairement être un hacker, même si les programmeurs seront plus à même d’intégrer l’institut. En revanche, une motivation de fer et le partage des valeurs prônées par Amir Taaki seront déterminants : <em>« Les membres devront observer une discipline stricte et être entièrement dévoués à la cause. »</em> L’emploi du temps, quasi martial, qui prévoit des journées démarrant à 6 heures et comprenant six leçons par jour, est d’ores et déjà établi. Le sport sera un complément d’apprentissage, non pas pour devenir une force paramilitaire, mais pour <em>« avoir un esprit sain dans un corps sain »</em>, souligne Amir.</p> | |||
| <figure class="default"><img src="https://s3-eu-west-1.amazonaws.com/usb-prd-upload/images/thumb_840xh/5b194f9ed87af.jpg" alt="Dessin de François Olislaeger pour Usbek & Rica"/> | |||
| <figcaption>Dessin de François Olislaeger pour Usbek & Rica</figcaption> | |||
| <figcaption/> | |||
| </figure> | |||
| <p>Le projet Autonomous Polytechnics est détaillé dans un dossier de 18 pages qu’il distribue dans différentes réunions. On y découvre que le groupe de cinq personnes aura comme première mission d’appuyer le mouvement enclenché au Rojava : <em>« Ceux qui seront des nôtres seront les leaders d’un futur mouvement technologique organisé autour d’une initiative méthodologique et idéologique née de la longue lutte des Kurdes contre les forces féodales oppressives cherchant à supprimer leur existence. </em>(…)<em> Il est impératif de commencer à mettre en place le bras technologique de ce mouvement. Notre portée est historique et globale. Nous voulons toucher tous les secteurs de la société à travers la technologie, pour l’influencer selon nos idéaux. »</em></p> | |||
| <p>Le document précise aussi que l’administration actuelle du Rojava est favorable à la mise en place d’actions menées par le futur institut. Les mots de Stephan Tual au sujet de l’expérience syrienne d’Amir me reviennent alors en mémoire : <em>« Il n’est pas resté longtemps au front. Mais il a rencontré ce général qui s’est rendu compte de ses capacités et ils ont décidé ensemble de mettre des choses en place.</em> <em>»</em> Peut-être qu’en fin de compte Amir n’a pas juste fait partie sur place d’un comité économique mais qu’il a également profité de son séjour syrien pour jeter les bases de l’action de sa future académie.</p> | |||
| <blockquote> | |||
| <p>La création d’un programme scolaire sous Linux est prévue, ainsi que la configuration de plateformes en ligne pour « l’auto-organisation écologique »</p> | |||
| </blockquote> | |||
| <p>Le Rojava ne sera qu’une première étape, une première lutte. Amir prévoit déjà d’appuyer d’autres mouvements révolutionnaires qui partageront sa vision. Des antennes de l’institut sont prévues en Inde et en Amérique latine. Pour mener des actions concrètes sur tous ces terrains, Polytechnics s’est doté d’un plan précis dont la pierre angulaire sera le bitcoin, afin d’opérer différentes transactions financières. Des messageries et des réseaux sociaux spécifiques seront aussi mis en place. La création d’un programme scolaire sous Linux est prévue, ainsi que la configuration de plateformes en ligne pour <em>« l’auto-organisation écologique »</em>. Tout semble fin prêt. Au printemps 2018, l’institut devrait donc ouvrir ses portes aux cinq candidats sélectionnés.</p> | |||
| <p>Faut-il voir dans cette académie de hackers un rassemblement de doux dingues en mal de sensations fortes ? Ou plutôt le regroupement tout ce qu’il y a de plus sérieux d’hacktivistes pouvant apporter un soutien décisif aux futurs mouvements révolutionnaires ? Car après tout, les révolutions sont aussi, parfois, le fait d’individus solitaires et sortant des clous, dont le seul moteur est d’aller vers de<em> « nouveaux paradigmes »</em>, selon la formule qui revient sans cesse dans la bouche du codeur anarchiste. En tout cas, Amir tient déjà sa <em>baseline</em>. Une ambition qui sonne très Silicon Valley et que les candidats à son académie devront tous avoir chevillée au corps : « Changer le monde ».</p> | |||
+ 606
- 0
cache/00a288de97e8a854d5fdfe03ba2bcf72/index.html
View File
| @@ -0,0 +1,606 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Do-nothing scripting: the key to gradual automation (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://blog.danslimmon.com/2019/07/15/do-nothing-scripting-the-key-to-gradual-automation/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Do-nothing scripting: the key to gradual automation (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://blog.danslimmon.com/2019/07/15/do-nothing-scripting-the-key-to-gradual-automation/">Source originale du contenu</a></h3> | |||
| <p>Every ops team has some manual procedures that they haven’t gotten around to automating yet. <a href="https://landing.google.com/sre/sre-book/chapters/eliminating-toil/">Toil</a> can never be totally eliminated.</p> | |||
| <p>Very often, the biggest toil center for a team at a growing company will be its procedure for modifying infrastructure or its procedure for provisioning user accounts. Partial instructions for the latter might look like this:</p> | |||
| <ol><li>Create an SSH key pair for the user.</li><li>Commit the public key to Git and push to master.</li><li>Wait for the build job to finish.</li><li>Find the user’s email address in the employee directory.</li><li>Send the user their private key via 1Password.</li></ol> | |||
| <p>This is a relatively short example. Sometimes there are 20 steps in the process. Sometimes there are branches and special cases to keep track of as you go. Over time, these procedures can become unmanageably large and complex.</p> | |||
| <p>Procedures like this are frustrating because they’re focus-intensive yet require very little thought. They demand our full attention, but our attention isn’t rewarded with interesting problems or satisfying solutions – just another checkbox checked. I have a word for a procedure like this: a <strong>slog</strong>.</p> | |||
| <p>We know that this procedure is ripe for automation. We can easily see how to automate any given step. And we know that a computer could carry out the instructions with far greater speed and accuracy than we can, and with less tendency toward <a href="https://risk-engineering.org/concept/Rasmussen-practical-drift">practical drift</a>.</p> | |||
| <p>However, automating slogs sometimes feels like an all-or-nothing proposition. Sure, we could write a script to handle step 2, or step 5. But that wouldn’t <em>really</em> make the procedure any less cumbersome. It would lead to a proliferation of single-purpose scripts with different conventions and expectations, and you’d still have to follow a documented multi-step procedure for using those scripts.</p> | |||
| <p>This perception of futility is the problem we really need to solve in order to escape from these manual slogs. I’ve found an approach that works pretty reliably: <strong>do-nothing scripting</strong>.</p> | |||
| <h2>Do-nothing scripting</h2> | |||
| <p>Almost any slog can be turned into a <strong>do-nothing script</strong>. A do-nothing script is a script that encodes the instructions of a slog, encapsulating each step in a function. For the example procedure above, we could write the following do-nothing script:</p> | |||
| <pre class="brush: python; title: ; notranslate" title=""> | |||
| import sys | |||
| def wait_for_enter(): | |||
| raw_input("Press Enter to continue: ") | |||
| class CreateSSHKeypairStep(object): | |||
| def run(self, context): | |||
| print("Run:") | |||
| print(" ssh-keygen -t rsa -f ~/{0}".format(context["username"])) | |||
| wait_for_enter() | |||
| class GitCommitStep(object): | |||
| def run(self, context): | |||
| print("Copy ~/new_key.pub into the `user_keys` Git repository, then run:") | |||
| print(" git commit {0}".format(context["username"])) | |||
| print(" git push") | |||
| wait_for_enter() | |||
| class WaitForBuildStep(object): | |||
| build_url = "http://example.com/builds/user_keys" | |||
| def run(self, context): | |||
| print("Wait for the build job at {0} to finish".format(self.build_url)) | |||
| wait_for_enter() | |||
| class RetrieveUserEmailStep(object): | |||
| dir_url = "http://example.com/directory" | |||
| def run(self, context): | |||
| print("Go to {0}".format(self.dir_url)) | |||
| print("Find the email address for user `{0}`".format(context["username"])) | |||
| context["email"] = raw_input("Paste the email address and press enter: ") | |||
| class SendPrivateKeyStep(object): | |||
| def run(self, context): | |||
| print("Go to 1Password") | |||
| print("Paste the contents of ~/new_key into a new document") | |||
| print("Share the document with {0}".format(context["email"])) | |||
| wait_for_enter() | |||
| if __name__ == "__main__": | |||
| context = {"username": sys.argv[1]} | |||
| procedure = [ | |||
| CreateSSHKeypairStep(), | |||
| GitCommitStep(), | |||
| WaitForBuildStep(), | |||
| RetrieveUserEmailStep(), | |||
| SendPrivateKeyStep(), | |||
| ] | |||
| for step in procedure: | |||
| step.run(context) | |||
| print("Done.") | |||
| </pre> | |||
| <p>This script doesn’t actually <em>do</em> any of the steps of the procedure. That’s why it’s called a do-nothing script. It feeds the user a step at a time and waits for them to complete each step manually.</p> | |||
| <p>At first glance, it might not be obvious that this script provides value. Maybe it looks like all we’ve done is make the instructions harder to read. But the value of a do-nothing script is immense:</p> | |||
| <ul><li>It’s now much less likely that you’ll lose your place and skip a step. This makes it easier to maintain focus and power through the slog.</li><li>Each step of the procedure is now encapsulated in a function, which makes it possible to replace the text in any given step with code that performs the action automatically.</li><li>Over time, you’ll develop a library of useful steps, which will make future automation tasks more efficient.</li></ul> | |||
| <p>A do-nothing script doesn’t save your team any manual effort. It lowers the activation energy for automating tasks, which allows the team to eliminate toil over time.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://blog.danslimmon.com/2019/07/15/do-nothing-scripting-the-key-to-gradual-automation/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 110
- 0
cache/00a288de97e8a854d5fdfe03ba2bcf72/index.md
View File
| @@ -0,0 +1,110 @@ | |||
| title: Do-nothing scripting: the key to gradual automation | |||
| url: https://blog.danslimmon.com/2019/07/15/do-nothing-scripting-the-key-to-gradual-automation/ | |||
| hash_url: 00a288de97e8a854d5fdfe03ba2bcf72 | |||
| <p>Every ops team has some manual procedures that they haven’t gotten around to automating yet. <a href="https://landing.google.com/sre/sre-book/chapters/eliminating-toil/">Toil</a> can never be totally eliminated.</p> | |||
| <p>Very often, the biggest toil center for a team at a growing company will be its procedure for modifying infrastructure or its procedure for provisioning user accounts. Partial instructions for the latter might look like this:</p> | |||
| <ol><li>Create an SSH key pair for the user.</li><li>Commit the public key to Git and push to master.</li><li>Wait for the build job to finish.</li><li>Find the user’s email address in the employee directory.</li><li>Send the user their private key via 1Password.</li></ol> | |||
| <p>This is a relatively short example. Sometimes there are 20 steps in the process. Sometimes there are branches and special cases to keep track of as you go. Over time, these procedures can become unmanageably large and complex.</p> | |||
| <p>Procedures like this are frustrating because they’re focus-intensive yet require very little thought. They demand our full attention, but our attention isn’t rewarded with interesting problems or satisfying solutions – just another checkbox checked. I have a word for a procedure like this: a <strong>slog</strong>.</p> | |||
| <p>We know that this procedure is ripe for automation. We can easily see how to automate any given step. And we know that a computer could carry out the instructions with far greater speed and accuracy than we can, and with less tendency toward <a href="https://risk-engineering.org/concept/Rasmussen-practical-drift">practical drift</a>.</p> | |||
| <p>However, automating slogs sometimes feels like an all-or-nothing proposition. Sure, we could write a script to handle step 2, or step 5. But that wouldn’t <em>really</em> make the procedure any less cumbersome. It would lead to a proliferation of single-purpose scripts with different conventions and expectations, and you’d still have to follow a documented multi-step procedure for using those scripts.</p> | |||
| <p>This perception of futility is the problem we really need to solve in order to escape from these manual slogs. I’ve found an approach that works pretty reliably: <strong>do-nothing scripting</strong>.</p> | |||
| <h2>Do-nothing scripting</h2> | |||
| <p>Almost any slog can be turned into a <strong>do-nothing script</strong>. A do-nothing script is a script that encodes the instructions of a slog, encapsulating each step in a function. For the example procedure above, we could write the following do-nothing script:</p> | |||
| <pre class="brush: python; title: ; notranslate" title=""> | |||
| import sys | |||
| def wait_for_enter(): | |||
| raw_input("Press Enter to continue: ") | |||
| class CreateSSHKeypairStep(object): | |||
| def run(self, context): | |||
| print("Run:") | |||
| print(" ssh-keygen -t rsa -f ~/{0}".format(context["username"])) | |||
| wait_for_enter() | |||
| class GitCommitStep(object): | |||
| def run(self, context): | |||
| print("Copy ~/new_key.pub into the `user_keys` Git repository, then run:") | |||
| print(" git commit {0}".format(context["username"])) | |||
| print(" git push") | |||
| wait_for_enter() | |||
| class WaitForBuildStep(object): | |||
| build_url = "http://example.com/builds/user_keys" | |||
| def run(self, context): | |||
| print("Wait for the build job at {0} to finish".format(self.build_url)) | |||
| wait_for_enter() | |||
| class RetrieveUserEmailStep(object): | |||
| dir_url = "http://example.com/directory" | |||
| def run(self, context): | |||
| print("Go to {0}".format(self.dir_url)) | |||
| print("Find the email address for user `{0}`".format(context["username"])) | |||
| context["email"] = raw_input("Paste the email address and press enter: ") | |||
| class SendPrivateKeyStep(object): | |||
| def run(self, context): | |||
| print("Go to 1Password") | |||
| print("Paste the contents of ~/new_key into a new document") | |||
| print("Share the document with {0}".format(context["email"])) | |||
| wait_for_enter() | |||
| if __name__ == "__main__": | |||
| context = {"username": sys.argv[1]} | |||
| procedure = [ | |||
| CreateSSHKeypairStep(), | |||
| GitCommitStep(), | |||
| WaitForBuildStep(), | |||
| RetrieveUserEmailStep(), | |||
| SendPrivateKeyStep(), | |||
| ] | |||
| for step in procedure: | |||
| step.run(context) | |||
| print("Done.") | |||
| </pre> | |||
| <p>This script doesn’t actually <em>do</em> any of the steps of the procedure. That’s why it’s called a do-nothing script. It feeds the user a step at a time and waits for them to complete each step manually.</p> | |||
| <p>At first glance, it might not be obvious that this script provides value. Maybe it looks like all we’ve done is make the instructions harder to read. But the value of a do-nothing script is immense:</p> | |||
| <ul><li>It’s now much less likely that you’ll lose your place and skip a step. This makes it easier to maintain focus and power through the slog.</li><li>Each step of the procedure is now encapsulated in a function, which makes it possible to replace the text in any given step with code that performs the action automatically.</li><li>Over time, you’ll develop a library of useful steps, which will make future automation tasks more efficient.</li></ul> | |||
| <p>A do-nothing script doesn’t save your team any manual effort. It lowers the activation energy for automating tasks, which allows the team to eliminate toil over time.</p> | |||
+ 555
- 0
cache/00a6f389ff68c589db05f40e71fe1c53/index.html
View File
| @@ -0,0 +1,555 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>What Is Going To Happen (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://avc.com/2015/01/what-is-going-to-happen/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| What Is Going To Happen (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://avc.com/2015/01/what-is-going-to-happen/">Source originale du contenu</a></h3> | |||
| <p>Yesterday I wrote a post <a href="http://avc.com/2014/12/what-just-happened/">summing up what happened in 2014</a>. In it I promised a post on what is going to happen. What I did not specify was how far forward I am going to look. It’s a lot easier to predict the future without a timeline on it. I think we all know, for example, we are going to have driverless cars. When that is going to be mainstream, however, is a pretty big question that I can’t answer.</p> | |||
| <p>But, because yesterday was about 2014, I am going to make this post about 2015. And so here is what is going to happen in 2015 according to me.</p> | |||
| <p>1/ The big companies that were started in the second half of the last decade, Uber, Airbnb, Dropbox, etc, will start going public. Investors will be glad to scoop up some of their shares. That will lead, in turn, to a wave of acquisitions by these newly minted goldmines.</p> | |||
| <p>2/ Xiaomi will spend some of the $1.1bn they just raised coming to the US. This will bring a strong player in the non-google android sector into the US market and legitimize a “third mobile OS” in the western world. The good news for developers is developing for non-google android is not much different than developing for google android.</p> | |||
| <p>3/ More asian penetration into the US market will come from the messenger sector as both Line and WeChat make strong moves to gain a share of the lucrative US messenger market.</p> | |||
| <p>4/ After a big year in 2014 with the Facebook acquisition of Oculus Rift, virtual reality will hit some headwinds. Oculus will struggle to ship their consumer version and competitive products will underwhelm. The virtual reality will eventually catch up to the virtual hype, but not in 2015.</p> | |||
| <p>5/ Another market where the reality will not live up to the hype is wearables. The Apple Watch will not be the homerun product that iPod, iPhone, and iPad have been. Not everyone will want to wear a computer on their wrist. Eventually, this market will be realized as the personal mesh/personal cloud, but the focus on wearables will be a bit of a headfake and take up a lot of time, energy, and money in 2015 with not a lot of results.</p> | |||
| <p>6/ Capital markets will be a mixed bag in 2015. Big tech names will continue to access capital easily (see 1/), but the combination of rising rates and depressed prices for oil will bring great stress to global capital markets and there will be a noticeable flight to safety around the world. Safety used to mean gold, US treasuries, and blue chip stocks. Now it means Google, Apple, Amazon, and Facebook.</p> | |||
| <p>7/ The Republicans and Democrats will start jockeying for position in silicon valley for the next presidential election and tech issues will loom large. Republicans will put forward their own answers on immigration and net neutrality (Title X) and the White House will meet them halfway. Both sides will claim victory, but the real winners will be the people.</p> | |||
| <p>8/ The horrible year that bitcoin had in 2014 will be a wakeup call for all stakeholders. Developers will turn their energy from creating the next bitcoin (all the alt stuff) to creating <a href="http://joel.mn/post/103546215249/the-blockchain-application-stack">the stack on top of the bitcoin blockchain</a>. Real decentralized applications will start to emerge as the platform matures and entrepreneurial energy is channeled in the right direction.</p> | |||
| <p>9/ the enterprise/saas sector will shine in 2015 with dozens of emerging important new companies taking advantage of the cloud and mobile to redefine what work and workflow looks like in the enterprise.</p> | |||
| <p>10/ cybersecurity budgets will explode in 2015 as every company, institution, and government attempts to avoid being Sony’d. VCs will pour money into this sector in the same way they poured money into the rental economy. and, yet, the hacks will continue because on the open internet there is no such thing as an impenetrable system.</p> | |||
| <p>11/ the health care sector will start to feel the pressure of real patient centered healthcare brought on by the trifecta of the smartphone becoming the EMR, patients treating patients (p2p medicine), and real market economies entering health care (people paying for their own healthcare). this is a megatrend that will take decades to fully play out but we will see the start of it in 2015.</p> | |||
| <p>Of course, many other things will happen this year. A lot of them will be things we could never see or predict. And this list is biased by what interests me and what we’ve invested in. It is, as someone said in the comments yesterday, “biased”. But then so is every single word ever written on this blog. As it should be.</p> | |||
| <p>Happy New Year everyone. Here’s to a great 2015.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://avc.com/2015/01/what-is-going-to-happen/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 19
- 0
cache/00a6f389ff68c589db05f40e71fe1c53/index.md
View File
| @@ -0,0 +1,19 @@ | |||
| title: What Is Going To Happen | |||
| url: http://avc.com/2015/01/what-is-going-to-happen/ | |||
| hash_url: 00a6f389ff68c589db05f40e71fe1c53 | |||
| <p>Yesterday I wrote a post <a href="http://avc.com/2014/12/what-just-happened/">summing up what happened in 2014</a>. In it I promised a post on what is going to happen. What I did not specify was how far forward I am going to look. It’s a lot easier to predict the future without a timeline on it. I think we all know, for example, we are going to have driverless cars. When that is going to be mainstream, however, is a pretty big question that I can’t answer.</p> | |||
| <p>But, because yesterday was about 2014, I am going to make this post about 2015. And so here is what is going to happen in 2015 according to me.</p> | |||
| <p>1/ The big companies that were started in the second half of the last decade, Uber, Airbnb, Dropbox, etc, will start going public. Investors will be glad to scoop up some of their shares. That will lead, in turn, to a wave of acquisitions by these newly minted goldmines.</p> | |||
| <p>2/ Xiaomi will spend some of the $1.1bn they just raised coming to the US. This will bring a strong player in the non-google android sector into the US market and legitimize a “third mobile OS” in the western world. The good news for developers is developing for non-google android is not much different than developing for google android.</p> | |||
| <p>3/ More asian penetration into the US market will come from the messenger sector as both Line and WeChat make strong moves to gain a share of the lucrative US messenger market.</p> | |||
| <p>4/ After a big year in 2014 with the Facebook acquisition of Oculus Rift, virtual reality will hit some headwinds. Oculus will struggle to ship their consumer version and competitive products will underwhelm. The virtual reality will eventually catch up to the virtual hype, but not in 2015.</p> | |||
| <p>5/ Another market where the reality will not live up to the hype is wearables. The Apple Watch will not be the homerun product that iPod, iPhone, and iPad have been. Not everyone will want to wear a computer on their wrist. Eventually, this market will be realized as the personal mesh/personal cloud, but the focus on wearables will be a bit of a headfake and take up a lot of time, energy, and money in 2015 with not a lot of results.</p> | |||
| <p>6/ Capital markets will be a mixed bag in 2015. Big tech names will continue to access capital easily (see 1/), but the combination of rising rates and depressed prices for oil will bring great stress to global capital markets and there will be a noticeable flight to safety around the world. Safety used to mean gold, US treasuries, and blue chip stocks. Now it means Google, Apple, Amazon, and Facebook.</p> | |||
| <p>7/ The Republicans and Democrats will start jockeying for position in silicon valley for the next presidential election and tech issues will loom large. Republicans will put forward their own answers on immigration and net neutrality (Title X) and the White House will meet them halfway. Both sides will claim victory, but the real winners will be the people.</p> | |||
| <p>8/ The horrible year that bitcoin had in 2014 will be a wakeup call for all stakeholders. Developers will turn their energy from creating the next bitcoin (all the alt stuff) to creating <a href="http://joel.mn/post/103546215249/the-blockchain-application-stack">the stack on top of the bitcoin blockchain</a>. Real decentralized applications will start to emerge as the platform matures and entrepreneurial energy is channeled in the right direction.</p> | |||
| <p>9/ the enterprise/saas sector will shine in 2015 with dozens of emerging important new companies taking advantage of the cloud and mobile to redefine what work and workflow looks like in the enterprise.</p> | |||
| <p>10/ cybersecurity budgets will explode in 2015 as every company, institution, and government attempts to avoid being Sony’d. VCs will pour money into this sector in the same way they poured money into the rental economy. and, yet, the hacks will continue because on the open internet there is no such thing as an impenetrable system.</p> | |||
| <p>11/ the health care sector will start to feel the pressure of real patient centered healthcare brought on by the trifecta of the smartphone becoming the EMR, patients treating patients (p2p medicine), and real market economies entering health care (people paying for their own healthcare). this is a megatrend that will take decades to fully play out but we will see the start of it in 2015.</p> | |||
| <p>Of course, many other things will happen this year. A lot of them will be things we could never see or predict. And this list is biased by what interests me and what we’ve invested in. It is, as someone said in the comments yesterday, “biased”. But then so is every single word ever written on this blog. As it should be.</p> | |||
| <p>Happy New Year everyone. Here’s to a great 2015.</p> | |||
+ 570
- 0
cache/00c9fbe2bf8fb00270b36167878d952a/index.html
View File
| @@ -0,0 +1,570 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The reactive manifesto (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.reactivemanifesto.org/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The reactive manifesto (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.reactivemanifesto.org/">Source originale du contenu</a></h3> | |||
| <article> | |||
| <section id="the-reactive-manifesto"> | |||
| <p>Organisations working in disparate domains are independently discovering patterns for building software that look the same. These systems are more robust, more resilient, more flexible and better positioned to meet modern demands.</p> | |||
| <p>These changes are happening because application requirements have changed dramatically in recent years. Only a few years ago a large application had tens of servers, seconds of response time, hours of offline maintenance and gigabytes of data. Today applications are deployed on everything from mobile devices to cloud-based clusters running thousands of multi-core processors. Users expect millisecond response times and 100% uptime. Data is measured in Petabytes. Today's demands are simply not met by yesterday’s software architectures.</p> | |||
| <p>We believe that a coherent approach to systems architecture is needed, and we believe that all necessary aspects are already recognised individually: we want systems that are Responsive, Resilient, Elastic and Message Driven. We call these Reactive Systems.</p> | |||
| <p>Systems built as Reactive Systems are more flexible, loosely-coupled and <a href="http://www.reactivemanifesto.org/glossary#Scalability">scalable</a>. This makes them easier to develop and amenable to change. They are significantly more tolerant of failure and when <a href="http://www.reactivemanifesto.org/glossary#Failure">failure</a> does occur they meet it with elegance rather than disaster. Reactive Systems are highly responsive, giving <a href="http://www.reactivemanifesto.org/glossary#User">users</a> effective interactive feedback.</p> | |||
| <h3>Reactive Systems are:</h3> | |||
| </section> | |||
| <section id="responsive" class="trait"> | |||
| <p><strong>Responsive: </strong>The <a href="http://www.reactivemanifesto.org/glossary#System">system</a> responds in a timely manner if at all possible. Responsiveness is the cornerstone of usability and utility, but more than that, responsiveness means that problems may be detected quickly and dealt with effectively. Responsive systems focus on providing rapid and consistent response times, establishing reliable upper bounds so they deliver a consistent quality of service. This consistent behaviour in turn simplifies error handling, builds end user confidence, and encourages further interaction.</p> | |||
| </section> | |||
| <section id="resilient" class="trait"> | |||
| <p><strong>Resilient: </strong>The system stays responsive in the face of <a href="http://www.reactivemanifesto.org/glossary#Failure">failure</a>. This applies not only to highly-available, mission critical systems — any system that is not resilient will be unresponsive after a failure. Resilience is achieved by <a href="http://www.reactivemanifesto.org/glossary#Replication">replication</a>, containment, <a href="http://www.reactivemanifesto.org/glossary#Isolation">isolation</a> and <a href="http://www.reactivemanifesto.org/glossary#Delegation">delegation</a>. Failures are contained within each <a href="http://www.reactivemanifesto.org/glossary#Component">component</a>, isolating components from each other and thereby ensuring that parts of the system can fail and recover without compromising the system as a whole. Recovery of each component is delegated to another (external) component and high-availability is ensured by replication where necessary. The client of a component is not burdened with handling its failures.</p> | |||
| </section> | |||
| <section id="elastic" class="trait"> | |||
| <p><strong>Elastic: </strong>The system stays responsive under varying workload. Reactive Systems can react to changes in the input rate by increasing or decreasing the <a href="http://www.reactivemanifesto.org/glossary#Resource">resources</a> allocated to service these inputs. This implies designs that have no contention points or central bottlenecks, resulting in the ability to shard or replicate components and distribute inputs among them. Reactive Systems support predictive, as well as Reactive, scaling algorithms by providing relevant live performance measures. They achieve <a href="http://www.reactivemanifesto.org/glossary#Elasticity">elasticity</a> in a cost-effective way on commodity hardware and software platforms.</p> | |||
| </section> | |||
| <section id="message-driven" class="trait"> | |||
| <p><strong>Message Driven: </strong>Reactive Systems rely on <a href="http://www.reactivemanifesto.org/glossary#Asynchronous">asynchronous</a> <a href="http://www.reactivemanifesto.org/glossary#Message-Driven">message-passing</a> to establish a boundary between components that ensures loose coupling, isolation, <a href="http://www.reactivemanifesto.org/glossary#Location-Transparency">location transparency</a>, and provides the means to delegate <a href="http://www.reactivemanifesto.org/glossary#Failure">errors</a> as messages. Employing explicit message-passing enables load management, elasticity, and flow control by shaping and monitoring the message queues in the system and applying <a href="http://www.reactivemanifesto.org/glossary#Back-Pressure">back-pressure</a> when necessary. Location transparent messaging as a means of communication makes it possible for the management of failure to work with the same constructs and semantics across a cluster or within a single host. <a href="http://www.reactivemanifesto.org/glossary#Non-Blocking">Non-blocking</a> communication allows recipients to only consume <a href="http://www.reactivemanifesto.org/glossary#Resource">resources</a> while active, leading to less system overhead.</p> | |||
| <img src="http://www.reactivemanifesto.org/images/reactive-traits.svg"/> | |||
| </section> | |||
| <section id="conclusion"> | |||
| <p>Large systems are composed of smaller ones and therefore depend on the Reactive properties of their constituents. This means that Reactive Systems apply design principles so these properties apply at all levels of scale, making them composable. The largest systems in the world rely upon architectures based on these properties and serve the needs of billions of people daily. It is time to apply these design principles consciously from the start instead of rediscovering them each time.</p> | |||
| </section> | |||
| </article> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.reactivemanifesto.org/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 48
- 0
cache/00c9fbe2bf8fb00270b36167878d952a/index.md
View File
| @@ -0,0 +1,48 @@ | |||
| title: The reactive manifesto | |||
| url: http://www.reactivemanifesto.org/ | |||
| hash_url: 00c9fbe2bf8fb00270b36167878d952a | |||
| <article> | |||
| <section id="the-reactive-manifesto"> | |||
| <p>Organisations working in disparate domains are independently discovering patterns for building software that look the same. These systems are more robust, more resilient, more flexible and better positioned to meet modern demands.</p> | |||
| <p>These changes are happening because application requirements have changed dramatically in recent years. Only a few years ago a large application had tens of servers, seconds of response time, hours of offline maintenance and gigabytes of data. Today applications are deployed on everything from mobile devices to cloud-based clusters running thousands of multi-core processors. Users expect millisecond response times and 100% uptime. Data is measured in Petabytes. Today's demands are simply not met by yesterday’s software architectures.</p> | |||
| <p>We believe that a coherent approach to systems architecture is needed, and we believe that all necessary aspects are already recognised individually: we want systems that are Responsive, Resilient, Elastic and Message Driven. We call these Reactive Systems.</p> | |||
| <p>Systems built as Reactive Systems are more flexible, loosely-coupled and <a href="http://www.reactivemanifesto.org/glossary#Scalability">scalable</a>. This makes them easier to develop and amenable to change. They are significantly more tolerant of failure and when <a href="http://www.reactivemanifesto.org/glossary#Failure">failure</a> does occur they meet it with elegance rather than disaster. Reactive Systems are highly responsive, giving <a href="http://www.reactivemanifesto.org/glossary#User">users</a> effective interactive feedback.</p> | |||
| <h3>Reactive Systems are:</h3> | |||
| </section> | |||
| <section id="responsive" class="trait"> | |||
| <p><strong>Responsive: </strong>The <a href="http://www.reactivemanifesto.org/glossary#System">system</a> responds in a timely manner if at all possible. Responsiveness is the cornerstone of usability and utility, but more than that, responsiveness means that problems may be detected quickly and dealt with effectively. Responsive systems focus on providing rapid and consistent response times, establishing reliable upper bounds so they deliver a consistent quality of service. This consistent behaviour in turn simplifies error handling, builds end user confidence, and encourages further interaction.</p> | |||
| </section> | |||
| <section id="resilient" class="trait"> | |||
| <p><strong>Resilient: </strong>The system stays responsive in the face of <a href="http://www.reactivemanifesto.org/glossary#Failure">failure</a>. This applies not only to highly-available, mission critical systems — any system that is not resilient will be unresponsive after a failure. Resilience is achieved by <a href="http://www.reactivemanifesto.org/glossary#Replication">replication</a>, containment, <a href="http://www.reactivemanifesto.org/glossary#Isolation">isolation</a> and <a href="http://www.reactivemanifesto.org/glossary#Delegation">delegation</a>. Failures are contained within each <a href="http://www.reactivemanifesto.org/glossary#Component">component</a>, isolating components from each other and thereby ensuring that parts of the system can fail and recover without compromising the system as a whole. Recovery of each component is delegated to another (external) component and high-availability is ensured by replication where necessary. The client of a component is not burdened with handling its failures.</p> | |||
| </section> | |||
| <section id="elastic" class="trait"> | |||
| <p><strong>Elastic: </strong>The system stays responsive under varying workload. Reactive Systems can react to changes in the input rate by increasing or decreasing the <a href="http://www.reactivemanifesto.org/glossary#Resource">resources</a> allocated to service these inputs. This implies designs that have no contention points or central bottlenecks, resulting in the ability to shard or replicate components and distribute inputs among them. Reactive Systems support predictive, as well as Reactive, scaling algorithms by providing relevant live performance measures. They achieve <a href="http://www.reactivemanifesto.org/glossary#Elasticity">elasticity</a> in a cost-effective way on commodity hardware and software platforms.</p> | |||
| </section> | |||
| <section id="message-driven" class="trait"> | |||
| <p><strong>Message Driven: </strong>Reactive Systems rely on <a href="http://www.reactivemanifesto.org/glossary#Asynchronous">asynchronous</a> <a href="http://www.reactivemanifesto.org/glossary#Message-Driven">message-passing</a> to establish a boundary between components that ensures loose coupling, isolation, <a href="http://www.reactivemanifesto.org/glossary#Location-Transparency">location transparency</a>, and provides the means to delegate <a href="http://www.reactivemanifesto.org/glossary#Failure">errors</a> as messages. Employing explicit message-passing enables load management, elasticity, and flow control by shaping and monitoring the message queues in the system and applying <a href="http://www.reactivemanifesto.org/glossary#Back-Pressure">back-pressure</a> when necessary. Location transparent messaging as a means of communication makes it possible for the management of failure to work with the same constructs and semantics across a cluster or within a single host. <a href="http://www.reactivemanifesto.org/glossary#Non-Blocking">Non-blocking</a> communication allows recipients to only consume <a href="http://www.reactivemanifesto.org/glossary#Resource">resources</a> while active, leading to less system overhead.</p> | |||
| <img src="http://www.reactivemanifesto.org/images/reactive-traits.svg"/> | |||
| </section> | |||
| <section id="conclusion"> | |||
| <p>Large systems are composed of smaller ones and therefore depend on the Reactive properties of their constituents. This means that Reactive Systems apply design principles so these properties apply at all levels of scale, making them composable. The largest systems in the world rely upon architectures based on these properties and serve the needs of billions of people daily. It is time to apply these design principles consciously from the start instead of rediscovering them each time.</p> | |||
| </section> | |||
| </article> | |||
+ 555
- 0
cache/010d7b4cef0538d956bae632f72cef53/index.html
View File
| @@ -0,0 +1,555 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The Strange Failure of the Educated Elite (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.nytimes.com/2018/05/28/opinion/failure-educated-elite.html"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The Strange Failure of the Educated Elite (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://www.nytimes.com/2018/05/28/opinion/failure-educated-elite.html">Source originale du contenu</a></h3> | |||
| <p class="css-1i0edl6 e2kc3sl0">Once upon a time, white male Protestants ruled the roost. You got into a fancy school if your father had gone to the fancy school. You got a job at a white-shoe law firm or climbed the corporate ladder if you golfed at the right club.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">Then we smashed all that. We replaced a system based on birth with a fairer system based on talent. We opened up the universities and the workplace to Jews, women and minorities. University attendance surged, creating the most educated generation in history. We created a new boomer ethos, which was egalitarian (bluejeans everywhere!), socially conscious (recycling!) and deeply committed to ending bigotry.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">You’d think all this would have made the U.S. the best governed nation in history. Instead, inequality rose. Faith in institutions plummeted. Social trust declined. The federal government became dysfunctional and society bitterly divided.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">The older establishment won World War II and built the American Century. We, on the other hand, led to Donald Trump. The chief accomplishment of the current educated elite is that it has produced a bipartisan revolt against itself.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">What happened? How has so much amazing talent produced such poor results?</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">A narrative is emerging. It is that the new meritocratic aristocracy has come to look like every other aristocracy. The members of the educated class use their intellectual, financial and social advantages to pass down privilege to their children, creating a hereditary elite that is ever more insulated from the rest of society. We need to build a meritocracy that is true to its values, truly open to all.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">I’m among the many who have been telling this story for 20 years. And I enjoy books that fill in compelling details, like <a class="css-1g7m0tk" href="http://knopfdoubleday.com/2018/04/24/media-center-tailspin-by-steven-brill/" title="" target="_blank">Steven Brill’s<span class="css-8l6xbc e1tp43kk0"> </span>“Tailspin,”</a> which is being released Tuesday.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">But the narrative is insufficient. The real problem with the modern meritocracy can be found in the ideology of meritocracy itself. Meritocracy is a system built on the maximization of individual talent, and that system unwittingly encourages several ruinous beliefs:</p> | |||
| <p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Exaggerated faith in intelligence</em>. Today’s educated establishment is still basically selected on the basis of I.Q. High I.Q. correlates with career success but is not the crucial quality required for civic leadership. Many of the great failures of the last 50 years, from Vietnam to Watergate to the financial crisis, were caused by extremely intelligent people who didn’t care about the civic consequences of their actions.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Misplaced faith in autonomy</em>. The meritocracy is based on the metaphor that life is a journey. On graduation days, members for the educated class give their young Dr. Seuss’ “Oh, the Places You’ll Go!” which shows a main character, “you,” who goes on a solitary, unencumbered journey through life toward success. If you build a society upon this metaphor you will wind up with a society high in narcissism and low in social connection. Life is not really an individual journey. Life is more like settling a sequence of villages. You help build a community at home, at work, in your town and then you go off and settle more villages.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Misplaced notion of the self</em>. Instead of seeing the self as the seat of the soul, the meritocracy sees the self as a vessel of human capital, a series of talents to be cultivated and accomplishments to be celebrated. If you base a society on a conception of self that is about achievement, not character, you will wind up with a society that is demoralized; that puts little emphasis on the sorts of moral systems that create harmony within people, harmony between people and harmony between people and their ultimate purpose.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Inability to think institutionally</em>. Previous elites poured themselves into institutions and were pretty good at maintaining existing institutions, like the U.S. Congress, and building new ones, like the postwar global order. The current generation sees institutions as things they pass through on the way to individual success. Some institutions, like Congress and the political parties, have decayed to the point of uselessness, while others, like corporations, lose their generational consciousness and become obsessed with the short term.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Misplaced idolization of diversity</em>. The great achievement of the meritocracy is that it has widened opportunities to those who were formerly oppressed. But diversity is a midpoint, not an endpoint. Just as a mind has to be opened so that it can close on something, an organization has to be diverse so that different perspectives can serve some end. Diversity for its own sake, without a common telos, is infinitely centrifugal, and leads to social fragmentation.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">The essential point is this: Those dimwitted, stuck up blue bloods in the old establishment had something we meritocrats lack — a civic consciousness, a sense that we live life embedded in community and nation, that we owe a debt to community and nation and that the essence of the admirable life is community before self.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">The meritocracy is here to stay, thank goodness, but we probably need a new ethos to reconfigure it — to redefine how people are seen, how applicants are selected, how social roles are understood and how we narrate a common national purpose.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://www.nytimes.com/2018/05/28/opinion/failure-educated-elite.html">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 7
- 0
cache/010d7b4cef0538d956bae632f72cef53/index.md
View File
| @@ -0,0 +1,7 @@ | |||
| title: The Strange Failure of the Educated Elite | |||
| url: https://www.nytimes.com/2018/05/28/opinion/failure-educated-elite.html | |||
| hash_url: 010d7b4cef0538d956bae632f72cef53 | |||
| <p class="css-1i0edl6 e2kc3sl0">Once upon a time, white male Protestants ruled the roost. You got into a fancy school if your father had gone to the fancy school. You got a job at a white-shoe law firm or climbed the corporate ladder if you golfed at the right club.</p><p class="css-1i0edl6 e2kc3sl0">Then we smashed all that. We replaced a system based on birth with a fairer system based on talent. We opened up the universities and the workplace to Jews, women and minorities. University attendance surged, creating the most educated generation in history. We created a new boomer ethos, which was egalitarian (bluejeans everywhere!), socially conscious (recycling!) and deeply committed to ending bigotry.</p><p class="css-1i0edl6 e2kc3sl0">You’d think all this would have made the U.S. the best governed nation in history. Instead, inequality rose. Faith in institutions plummeted. Social trust declined. The federal government became dysfunctional and society bitterly divided.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0">The older establishment won World War II and built the American Century. We, on the other hand, led to Donald Trump. The chief accomplishment of the current educated elite is that it has produced a bipartisan revolt against itself.</p><p class="css-1i0edl6 e2kc3sl0">What happened? How has so much amazing talent produced such poor results?</p><p class="css-1i0edl6 e2kc3sl0">A narrative is emerging. It is that the new meritocratic aristocracy has come to look like every other aristocracy. The members of the educated class use their intellectual, financial and social advantages to pass down privilege to their children, creating a hereditary elite that is ever more insulated from the rest of society. We need to build a meritocracy that is true to its values, truly open to all.</p><p class="css-1i0edl6 e2kc3sl0">I’m among the many who have been telling this story for 20 years. And I enjoy books that fill in compelling details, like <a class="css-1g7m0tk" href="http://knopfdoubleday.com/2018/04/24/media-center-tailspin-by-steven-brill/" title="" target="_blank">Steven Brill’s<span class="css-8l6xbc e1tp43kk0"> </span>“Tailspin,”</a> which is being released Tuesday.</p><p class="css-1i0edl6 e2kc3sl0">But the narrative is insufficient. The real problem with the modern meritocracy can be found in the ideology of meritocracy itself. Meritocracy is a system built on the maximization of individual talent, and that system unwittingly encourages several ruinous beliefs:</p><p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Exaggerated faith in intelligence</em>. Today’s educated establishment is still basically selected on the basis of I.Q. High I.Q. correlates with career success but is not the crucial quality required for civic leadership. Many of the great failures of the last 50 years, from Vietnam to Watergate to the financial crisis, were caused by extremely intelligent people who didn’t care about the civic consequences of their actions.</p> | |||
| <p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Misplaced faith in autonomy</em>. The meritocracy is based on the metaphor that life is a journey. On graduation days, members for the educated class give their young Dr. Seuss’ “Oh, the Places You’ll Go!” which shows a main character, “you,” who goes on a solitary, unencumbered journey through life toward success. If you build a society upon this metaphor you will wind up with a society high in narcissism and low in social connection. Life is not really an individual journey. Life is more like settling a sequence of villages. You help build a community at home, at work, in your town and then you go off and settle more villages.</p><p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Misplaced notion of the self</em>. Instead of seeing the self as the seat of the soul, the meritocracy sees the self as a vessel of human capital, a series of talents to be cultivated and accomplishments to be celebrated. If you base a society on a conception of self that is about achievement, not character, you will wind up with a society that is demoralized; that puts little emphasis on the sorts of moral systems that create harmony within people, harmony between people and harmony between people and their ultimate purpose.</p><p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Inability to think institutionally</em>. Previous elites poured themselves into institutions and were pretty good at maintaining existing institutions, like the U.S. Congress, and building new ones, like the postwar global order. The current generation sees institutions as things they pass through on the way to individual success. Some institutions, like Congress and the political parties, have decayed to the point of uselessness, while others, like corporations, lose their generational consciousness and become obsessed with the short term.</p><p class="css-1i0edl6 e2kc3sl0"><em class="css-2fg4z9 ehxkw330">Misplaced idolization of diversity</em>. The great achievement of the meritocracy is that it has widened opportunities to those who were formerly oppressed. But diversity is a midpoint, not an endpoint. Just as a mind has to be opened so that it can close on something, an organization has to be diverse so that different perspectives can serve some end. Diversity for its own sake, without a common telos, is infinitely centrifugal, and leads to social fragmentation.</p><p class="css-1i0edl6 e2kc3sl0">The essential point is this: Those dimwitted, stuck up blue bloods in the old establishment had something we meritocrats lack — a civic consciousness, a sense that we live life embedded in community and nation, that we owe a debt to community and nation and that the essence of the admirable life is community before self.</p><p class="css-1i0edl6 e2kc3sl0">The meritocracy is here to stay, thank goodness, but we probably need a new ethos to reconfigure it — to redefine how people are seen, how applicants are selected, how social roles are understood and how we narrate a common national purpose.</p> | |||
+ 687
- 0
cache/011e34ad5c059996409dc1ee3caa6b17/index.html
View File
| @@ -0,0 +1,687 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Documenting Architecture Decisions (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Documenting Architecture Decisions (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions">Source originale du contenu</a></h3> | |||
| <h1>Context</h1> | |||
| <p>Architecture for agile projects has to be described and defined | |||
| differently. Not all decisions will be made at once, nor will all of | |||
| them be done when the project begins.</p> | |||
| <p>Agile methods are not opposed to documentation, only to valueless | |||
| documentation. Documents that assist the team itself can have value, | |||
| but only if they are kept up to date. Large documents are never kept | |||
| up to date. Small, modular documents have at least a chance at being | |||
| updated.</p> | |||
| <p>Nobody ever reads large documents, either. Most developers have been | |||
| on at least one project where the specification document was larger | |||
| (in bytes) than the total source code size. Those documents are too | |||
| large to open, read, or update. Bite sized pieces are easier for for | |||
| all stakeholders to consume.</p> | |||
| <p>One of the hardest things to track during the life of a project is the | |||
| motivation behind certain decisions. A new person coming on to a | |||
| project may be perplexed, baffled, delighted, or infuriated by some | |||
| past decision. Without understanding the rationale or consequences, | |||
| this person has only two choices:</p> | |||
| <ol> | |||
| <li><p><strong>Blindly accept the decision.</strong> </p> | |||
| <p>This response may be OK, if the decision is still valid. It may | |||
| not be good, however, if the context has changed and the decision | |||
| should really be revisited. If the project accumulates too many | |||
| decisions accepted without understanding, then the development | |||
| team becomes afraid to change anything and the project collapses | |||
| under its own weight.</p></li> | |||
| <li><p><strong>Blindly change it.</strong></p> | |||
| <p>Again, this may be OK if the decision needs to be reversed. On the | |||
| other hand, changing the decision without understanding its | |||
| motivation or consequences could mean damaging the project's | |||
| overall value without realizing it. (E.g., the decision supported | |||
| a non-functional requirement that hasn't been tested yet.)</p></li> | |||
| </ol> | |||
| <p>It's better to avoid either blind acceptance or blind reversal.</p> | |||
| <h1>Decision</h1> | |||
| <p>We will keep a collection of records for "architecturally significant" | |||
| decisions: those that affect the structure, non-functional | |||
| characteristics, dependencies, interfaces, or construction techniques.</p> | |||
| <p>An architecture decision record is a short text file in a format | |||
| similar to an Alexandrian pattern. (Though the decisions themselves | |||
| are not necessarily patterns, they share the characteristic balancing | |||
| of forces.) Each record describes a set of forces and a single | |||
| decision in response to those forces. Note that the decision is the | |||
| central piece here, so specific forces may appear in multiple ADRs.</p> | |||
| <p>We will keep ADRs in the project repository under doc/arch/adr-NNN.md</p> | |||
| <p>We should use a lightweight text formatting language like Markdown or | |||
| Textile.</p> | |||
| <p>ADRs will be numbered sequentially and monotonically. Numbers will not | |||
| be reused.</p> | |||
| <p>If a decision is reversed, we will keep the old one around, but mark | |||
| it as superseded. (It's still relevant to know that it <em>was</em> the | |||
| decision, but is <em>no longer</em> the decision.)</p> | |||
| <p>We will use a format with just a few parts, so each document is easy | |||
| to digest. The format has just a few parts.</p> | |||
| <p><strong>Title</strong> These documents have names that are short noun phrases. For | |||
| example, "ADR 1: Deployment on Ruby on Rails 3.0.10" or "ADR 9: LDAP | |||
| for Multitenant Integration"</p> | |||
| <p><strong>Context</strong> This section describes the forces at play, including | |||
| technological, political, social, and project local. These forces are | |||
| probably in tension, and should be called out as such. The language in | |||
| this section is value-neutral. It is simply describing facts.</p> | |||
| <p><strong>Decision</strong> This section describes our response to these forces. It | |||
| is stated in full sentences, with active voice. "We will ..."</p> | |||
| <p><strong>Status</strong> A decision may be "proposed" if the project stakeholders | |||
| haven't agreed with it yet, or "accepted" once it is agreed. If a | |||
| later ADR changes or reverses a decision, it may be marked as | |||
| "deprecated" or "superseded" with a reference to its replacement.</p> | |||
| <p><strong>Consequences</strong> This section describes the resulting context, after | |||
| applying the decision. All consequences should be listed here, not | |||
| just the "positive" ones. A particular decision may have positive, | |||
| negative, and neutral consequences, but all of them affect the team | |||
| and project in the future.</p> | |||
| <p>The whole document should be one or two pages long. We will write each | |||
| ADR as if it is a conversation with a future developer. This requires | |||
| good writing style, with full sentences organized into | |||
| paragraphs. Bullets are acceptable only for visual style, not as an | |||
| excuse for writing sentence fragments. (Bullets kill people, even | |||
| PowerPoint bullets.)</p> | |||
| <h1>Status</h1> | |||
| <p>Accepted.</p> | |||
| <h1>Consequences</h1> | |||
| <p>One ADR describes one significant decision for a specific project. It | |||
| should be something that has an effect on how the rest of the project | |||
| will run.</p> | |||
| <p>The consequences of one ADR are very likely to become the context for | |||
| subsequent ADRs. This is also similar to Alexander's idea of a pattern | |||
| language: the large-scale responses create spaces for the smaller | |||
| scale to fit into.</p> | |||
| <p>Developers and project stakeholders can see the ADRs, even as the team | |||
| composition changes over time.</p> | |||
| <p>The motivation behind previous decisions is visible for everyone, | |||
| present and future. Nobody is left scratching their heads to | |||
| understand, "What were they thinking?" and the time to change old | |||
| decisions will be clear from changes in the project's context.</p> | |||
| <hr/> | |||
| <h1>Experience Report</h1> | |||
| <p>You may have noticed that this post is formatted like an ADR | |||
| itself. We've been using this format on a few of our projects since | |||
| early August. That's not a very long time in the global sense, but | |||
| early feedback from both clients and developers has been quite | |||
| positive. In that time, we've had six to ten developers rotate through | |||
| projects using ADRs. All of them have stated that they appreciate the | |||
| degree of context they received by reading them.</p> | |||
| <p>ADRs have been especially useful for capturing longer-term | |||
| intentions. We have several clients who are stabilizing their current | |||
| systems, but looking toward a larger rearchitecture in the | |||
| not-too-distant future. By writing these intentions down, we don't | |||
| inadvertently make those future changes harder.</p> | |||
| <p>One potential objection is that keeping these in version control with | |||
| the code makes them less accessible for project managers, client | |||
| stakeholders, and others who don't live in version control like the | |||
| development team does. In practice, our projects almost all live in | |||
| GitHub private repositories, so we can exchange links to the latest | |||
| version in master. Since GitHub does markdown processing | |||
| automatically, it looks just as friendly as any wiki page would.</p> | |||
| <p>So far, ADRs are proving to be a useful tool, so we'll keep using | |||
| them.</p> | |||
| <h1>More Reading</h1> | |||
| <p>Thanks to Philipe Kruchten for discussing the <a href="http://www.computer.org/portal/web/csdl/doi/10.1109/MS.2009.52">importance of | |||
| architecture decisions</a>. I'm | |||
| told there is more about them in | |||
| <a href="http://www.sei.cmu.edu/library/abstracts/books/0321552687.cfm">Documenting Software Architectures</a> | |||
| which is near the top of my reading queue.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 165
- 0
cache/011e34ad5c059996409dc1ee3caa6b17/index.md
View File
| @@ -0,0 +1,165 @@ | |||
| title: Documenting Architecture Decisions | |||
| url: http://thinkrelevance.com/blog/2011/11/15/documenting-architecture-decisions | |||
| hash_url: 011e34ad5c059996409dc1ee3caa6b17 | |||
| <h1>Context</h1> | |||
| <p>Architecture for agile projects has to be described and defined | |||
| differently. Not all decisions will be made at once, nor will all of | |||
| them be done when the project begins.</p> | |||
| <p>Agile methods are not opposed to documentation, only to valueless | |||
| documentation. Documents that assist the team itself can have value, | |||
| but only if they are kept up to date. Large documents are never kept | |||
| up to date. Small, modular documents have at least a chance at being | |||
| updated.</p> | |||
| <p>Nobody ever reads large documents, either. Most developers have been | |||
| on at least one project where the specification document was larger | |||
| (in bytes) than the total source code size. Those documents are too | |||
| large to open, read, or update. Bite sized pieces are easier for for | |||
| all stakeholders to consume.</p> | |||
| <p>One of the hardest things to track during the life of a project is the | |||
| motivation behind certain decisions. A new person coming on to a | |||
| project may be perplexed, baffled, delighted, or infuriated by some | |||
| past decision. Without understanding the rationale or consequences, | |||
| this person has only two choices:</p> | |||
| <ol> | |||
| <li><p><strong>Blindly accept the decision.</strong> </p> | |||
| <p>This response may be OK, if the decision is still valid. It may | |||
| not be good, however, if the context has changed and the decision | |||
| should really be revisited. If the project accumulates too many | |||
| decisions accepted without understanding, then the development | |||
| team becomes afraid to change anything and the project collapses | |||
| under its own weight.</p></li> | |||
| <li><p><strong>Blindly change it.</strong></p> | |||
| <p>Again, this may be OK if the decision needs to be reversed. On the | |||
| other hand, changing the decision without understanding its | |||
| motivation or consequences could mean damaging the project's | |||
| overall value without realizing it. (E.g., the decision supported | |||
| a non-functional requirement that hasn't been tested yet.)</p></li> | |||
| </ol> | |||
| <p>It's better to avoid either blind acceptance or blind reversal.</p> | |||
| <h1>Decision</h1> | |||
| <p>We will keep a collection of records for "architecturally significant" | |||
| decisions: those that affect the structure, non-functional | |||
| characteristics, dependencies, interfaces, or construction techniques.</p> | |||
| <p>An architecture decision record is a short text file in a format | |||
| similar to an Alexandrian pattern. (Though the decisions themselves | |||
| are not necessarily patterns, they share the characteristic balancing | |||
| of forces.) Each record describes a set of forces and a single | |||
| decision in response to those forces. Note that the decision is the | |||
| central piece here, so specific forces may appear in multiple ADRs.</p> | |||
| <p>We will keep ADRs in the project repository under doc/arch/adr-NNN.md</p> | |||
| <p>We should use a lightweight text formatting language like Markdown or | |||
| Textile.</p> | |||
| <p>ADRs will be numbered sequentially and monotonically. Numbers will not | |||
| be reused.</p> | |||
| <p>If a decision is reversed, we will keep the old one around, but mark | |||
| it as superseded. (It's still relevant to know that it <em>was</em> the | |||
| decision, but is <em>no longer</em> the decision.)</p> | |||
| <p>We will use a format with just a few parts, so each document is easy | |||
| to digest. The format has just a few parts.</p> | |||
| <p><strong>Title</strong> These documents have names that are short noun phrases. For | |||
| example, "ADR 1: Deployment on Ruby on Rails 3.0.10" or "ADR 9: LDAP | |||
| for Multitenant Integration"</p> | |||
| <p><strong>Context</strong> This section describes the forces at play, including | |||
| technological, political, social, and project local. These forces are | |||
| probably in tension, and should be called out as such. The language in | |||
| this section is value-neutral. It is simply describing facts.</p> | |||
| <p><strong>Decision</strong> This section describes our response to these forces. It | |||
| is stated in full sentences, with active voice. "We will ..."</p> | |||
| <p><strong>Status</strong> A decision may be "proposed" if the project stakeholders | |||
| haven't agreed with it yet, or "accepted" once it is agreed. If a | |||
| later ADR changes or reverses a decision, it may be marked as | |||
| "deprecated" or "superseded" with a reference to its replacement.</p> | |||
| <p><strong>Consequences</strong> This section describes the resulting context, after | |||
| applying the decision. All consequences should be listed here, not | |||
| just the "positive" ones. A particular decision may have positive, | |||
| negative, and neutral consequences, but all of them affect the team | |||
| and project in the future.</p> | |||
| <p>The whole document should be one or two pages long. We will write each | |||
| ADR as if it is a conversation with a future developer. This requires | |||
| good writing style, with full sentences organized into | |||
| paragraphs. Bullets are acceptable only for visual style, not as an | |||
| excuse for writing sentence fragments. (Bullets kill people, even | |||
| PowerPoint bullets.)</p> | |||
| <h1>Status</h1> | |||
| <p>Accepted.</p> | |||
| <h1>Consequences</h1> | |||
| <p>One ADR describes one significant decision for a specific project. It | |||
| should be something that has an effect on how the rest of the project | |||
| will run.</p> | |||
| <p>The consequences of one ADR are very likely to become the context for | |||
| subsequent ADRs. This is also similar to Alexander's idea of a pattern | |||
| language: the large-scale responses create spaces for the smaller | |||
| scale to fit into.</p> | |||
| <p>Developers and project stakeholders can see the ADRs, even as the team | |||
| composition changes over time.</p> | |||
| <p>The motivation behind previous decisions is visible for everyone, | |||
| present and future. Nobody is left scratching their heads to | |||
| understand, "What were they thinking?" and the time to change old | |||
| decisions will be clear from changes in the project's context.</p> | |||
| <hr/> | |||
| <h1>Experience Report</h1> | |||
| <p>You may have noticed that this post is formatted like an ADR | |||
| itself. We've been using this format on a few of our projects since | |||
| early August. That's not a very long time in the global sense, but | |||
| early feedback from both clients and developers has been quite | |||
| positive. In that time, we've had six to ten developers rotate through | |||
| projects using ADRs. All of them have stated that they appreciate the | |||
| degree of context they received by reading them.</p> | |||
| <p>ADRs have been especially useful for capturing longer-term | |||
| intentions. We have several clients who are stabilizing their current | |||
| systems, but looking toward a larger rearchitecture in the | |||
| not-too-distant future. By writing these intentions down, we don't | |||
| inadvertently make those future changes harder.</p> | |||
| <p>One potential objection is that keeping these in version control with | |||
| the code makes them less accessible for project managers, client | |||
| stakeholders, and others who don't live in version control like the | |||
| development team does. In practice, our projects almost all live in | |||
| GitHub private repositories, so we can exchange links to the latest | |||
| version in master. Since GitHub does markdown processing | |||
| automatically, it looks just as friendly as any wiki page would.</p> | |||
| <p>So far, ADRs are proving to be a useful tool, so we'll keep using | |||
| them.</p> | |||
| <h1>More Reading</h1> | |||
| <p>Thanks to Philipe Kruchten for discussing the <a href="http://www.computer.org/portal/web/csdl/doi/10.1109/MS.2009.52">importance of | |||
| architecture decisions</a>. I'm | |||
| told there is more about them in | |||
| <a href="http://www.sei.cmu.edu/library/abstracts/books/0321552687.cfm">Documenting Software Architectures</a> | |||
| which is near the top of my reading queue.</p> | |||
+ 672
- 0
cache/01cff17987cebe12c642331a004a575e/index.html
View File
| @@ -0,0 +1,672 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The 'Future Book' Is Here, but It's Not What We Expected (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.wired.com/story/future-book-is-here-but-not-what-we-expected/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The 'Future Book' Is Here, but It's Not What We Expected (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://www.wired.com/story/future-book-is-here-but-not-what-we-expected/">Source originale du contenu</a></h3> | |||
| <p><span class="lede">The Future Book </span>was meant to be interactive, moving, alive. Its pages were supposed to be lush with whirling doodads, responsive, hands-on. The old paperback Zork choose-your-own-adventures were just the start. The Future Book would change depending on where you were, how you were feeling. It would incorporate your very environment into its story—the name of the coffee shop you were sitting at, your best friend’s birthday. It would be sly, maybe a little creepy. Definitely programmable. <em>Ulysses</em> would extend indefinitely in any direction you wanted to explore; just tap and some unique, mega-mind-blowing sui generis path of Joycean machine-learned words would wend itself out before your very eyes.</p> | |||
| <p>Prognostications about how technology would affect the form of paper books have been with us for centuries. Each new medium was poised to deform or murder the book: newspapers, photography, radio, movies, television, videogames, the internet.</p> | |||
| <p class="paywall">Some viewed the intersection of books and technology more positively: In 1945, Vannevar Bush wrote in <em>The Atlantic</em>: “Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified.”</p> | |||
| <p class="paywall">Researcher Alan Kay created a cardboard prototype of a tablet-like device in 1968. He called it the "Dynabook," saying, “We created a new kind of medium for boosting human thought, for amplifying human intellectual endeavor. We thought it could be as significant as Gutenberg’s invention of the printing press 500 years ago.”</p> | |||
| <p class="paywall">In the 1990s, Future Bookism hit a kind of beautiful fever pitch. We were so close. Brown University professor Robert Coover, in a 1992 <em>New York Times</em> op-ed titled “<a href="https://archive.nytimes.com/www.nytimes.com/books/98/09/27/specials/coover-end.html?pagewanted=all" target="_blank">The End of Books</a>,” wrote of the future of writing: “Fluidity, contingency, indeterminacy, plurality, discontinuity are the hypertext buzzwords of the day, and they seem to be fast becoming principles, in the same way that relativity not so long ago displaced the falling apple.” And then, more broadly: “The print medium is a doomed and outdated technology, a mere curiosity of bygone days destined soon to be consigned forever to those dusty unattended museums we now call libraries.”</p> | |||
| <p class="paywall">Normal books? Bo-ring. Future Books? Awesome—indeterminate—and we were almost there! The Voyager Company built its "expanded books" platform on Hypercard, launching with three titles at MacWorld 1992. Microsoft launched Encarta on CD-ROM.</p> | |||
| <p class="paywall">But … by the mid-2000s, there still were no real digital books. The Rocket eBook was too little, too early. Sony launched the eink-based Librie platform in 2004 to little uptake. Interactive CD-ROMs had dropped off the map. We had Wikipedia, blogs, and the internet, but the mythological Future Book—some electric slab that would somehow both be <em>like</em> and <em>not like</em> the quartos of yore—had yet to materialize. Peter Meirs, head of technology at <em>Time</em>, <a href="https://observer.com/2008/04/where-will-magazines-be-ten-years-from-now/" target="_blank">hedged his bets</a> perfectly, proclaiming: “Ultimately, there will be some sort of device!”</p> | |||
| <p class="paywall">And then there was. Several devices, actually. The iPhone launched in June 2007, the Kindle that November. Then, in 2010, the iPad arrived. High-resolution screens were suddenly in everyone’s hands and bags. And for a brief moment during the early 2010s, it seemed like it might finally be here: the glorious Future Book.</p> | |||
| <h3 class="paywall">A Cry in the Wilderness</h3> | |||
| <p class="paywall">Fast forward to 2018. At the end of Denis Johnson’s short story “Triumph Over the Grave,” he writes: “It doesn’t matter. The world keeps turning. It’s plain to you that at the time I write this, I’m not dead. But maybe by the time you read it.”</p> | |||
| <p class="paywall">It’s a kick in the gut, not just because of his tone, rhythm, grammar but because he <em>is</em> dead. Passed away in 2017. I was reading this story—part of his collection <em>The Largesse of the Maiden</em>—on my Kindle, during a many-day hike. Hiking with a Kindle definitely feels futuristic—an entire library in a device that weighs less than a small book, and rarely needs charging. And my first impulse on reading Johnson’s final line, sitting on a dirt path in the mountains of Japan flanked by <em>Cryptomeria japonica</em>, was to eulogize him right there, smack dab in the text while a nightingale whistled overhead. The Kindle indicated with a subtle dotted underline and small inline text that those final sentences had been highlighted by “56 highlighters.” Other humans! Reading this same text, feeling the same impulse. Some need to mark those lines.</p> | |||
| <div class="inset-left-component paywall inset-left-component--pullquote"><blockquote name="inset-left" class="inset-left-component__el"><p>My first impulse on reading Johnson’s final line, sitting on a dirt path in the mountains of Japan, was to eulogize him right there, smack dab in the text while a nightingale whistled overhead.</p></blockquote></div> | |||
| <p class="paywall">I wanted to write, “Fuck. Sad to think this is the last new work we’re going to get from this guy. Most definitely dead as I’m reading it.” You know, something in the vulgarity of Johnson himself. I wanted to stick my 10-cent eulogy between those lines for others to read, and to read what those others had thought. Purchasing a book is one of the strongest self-selections of community, and damn it, I wanted to engage.</p> | |||
| <p class="paywall">But I couldn’t. For my Kindle Oasis—one of the most svelte, elegant, and expensive digital book containers you can buy in 2018—is about as interactive as a potato. Instead, I left a note for myself: “Write something about how this isn’t the digital book we thought we’d have.”</p> | |||
| <p class="paywall">Physical books today look like physical books of last century. And digital books of today look, feel, and function almost identically to digital books of 10 years ago, when the Kindle launched. The biggest change is that many of Amazon’s competitors have gone belly up or shrunken to irrelevancy. The digital reading and digital book startup ecosystem that briefly emerged in the early 2010s has shriveled to a nubbin.</p> | |||
| <p class="paywall">Amazon won. Trounced, really. As of the end of 2017, about <a href="http://authorearnings.com/report/january-2018-report-us-online-book-sales-q2-q4-2017/" target="_blank">45 percent</a> (up from 37 percent in 2015) of all print sales and 83 percent of all ebook sales happen through Amazon channels. There are few alternatives with meaningful mind- or market share, especially among digital books.</p> | |||
| <figure class="image-embed-component"><p class="component-lazy pending" data-component="Lazy"/><figcaption class="caption-component"> | |||
| <div class="caption-component__caption"><p>Kindle Oasis displaying the last page of Denis Johnson's <em>Triumph Over the Grave</em>.</p> | |||
| </div> | |||
| <p class="caption-component__credit-container"><i aria-label="Photo attribution" class=" ui-camera icon icon--16"/><cite class="caption-component__credit">Craig Mod</cite></p></figcaption></figure> | |||
| <p class="paywall">Yet here’s the surprise: We were looking for the Future Book in the wrong place. It’s not the form, necessarily, that needed to evolve—I think we can agree that, in an age of infinite distraction, one of the strongest assets of a “book” as a book is its singular, sustained, distraction-free, blissfully immutable voice. Instead, technology changed everything that <em>enables</em> a book, fomenting a quiet revolution. Funding, printing, fulfillment, community-building—everything leading up to and supporting a book has shifted meaningfully, even if the containers haven’t. Perhaps the form and interactivity of what we consider a “standard book” will change in the future, as screens become as cheap and durable as paper. But the books made today, held in our hands, digital or print, <em>are</em> Future Books, unfuturistic and inert may they seem.</p> | |||
| <h3 class="paywall">A Publishing Revolution</h3> | |||
| <p class="paywall">Twenty years ago, what did you need to make a book on your own? You needed a pile of words, sure. But you also needed a mountain of cash. And even if you had the cash—say, $20,000 to get the thing edited, designed, proofed, and printed—you still needed a printer. Assuming you could get your books printed, you needed a place to store them. You needed someone to ship them. You needed a relationship with a distributor to get them into Barnes and Noble. And you needed a marketing budget to get them on that front table.</p> | |||
| <p class="paywall">To publish a digital book today, you still need the words, but you can skip many of the other steps. From a Pages or Microsoft Word document you can export an .epub file—the open standard for digital books. Open an Amazon and iBooks account, upload the file, and suddenly you’re accessing <a href="https://www.bloomberg.com/news/articles/2018-01-25/apple-is-said-to-ready-revamped-e-books-push-against-amazon" target="_blank">92 percent</a> of the digital book market.</p> | |||
| <p class="paywall">For printed books, a slew of new funding, production, and distribution tools make creating and selling a physical artifact much easier. <a href="http://www.blurb.com/" target="_blank">Blurb</a>, <a href="https://kdp.amazon.com/en_US/l/print-on-demand" target="_blank">Amazon</a>, <a href="https://www.lulu.com/" target="_blank">Lulu</a>, <a href="https://www.ingramcontent.com/publishers/print" target="_blank">Lightning Source</a>, and <a href="https://www.ingramspark.com/" target="_blank">Ingram Spark</a> are just a few of the print-on-demand companies we all have access to. Many will handle sales—providing you with a web page to send potential readers to, managing the burdensome tasks of payments and shipping. The improvement in print-on-demand quality in recent decades is astounding. The books look fabulous—with decent paper options, cover types, finishes. Professional photographers are even offering up <a href="http://www.blurb.com/b/9125874-sri-lanka" target="_blank">monographs</a> in collaboration with companies like Blurb. And Amazon will have the finished books on your doorstep the next day.</p> | |||
| <div class="inset-left-component paywall inset-left-component--pullquote"><blockquote name="inset-left" class="inset-left-component__el"><p>Almost half of author earnings now come from independently published books.</p></blockquote></div> | |||
| <p class="paywall">It’s easy to take these offerings for granted. Today, anyone with a bit of technological know-how and an internet connection can publish—offering digital or physical editions, on the same online retail shelves—alongside Alexander Chee, Rebecca Makkai, or Tom Clancy.</p> | |||
| <p class="paywall">This proliferation of new technology and services has altered author economics. Almost <a href="http://authorearnings.com/report/the-report/" target="_blank">half of author <em>earnings</em></a> now come from independently published books. Independent books don’t outsell big-five books, but they offer higher royalty rates—roughly 70 percent versus 25 percent. For the first time—perhaps since the invention of the printing press—authors and small presses have viable independent options beyond the “traditional” publishing path with its gatekeepers.</p> | |||
| <h3 class="paywall">How Crowdfunding Changed the Game</h3> | |||
| <p class="paywall">For six years in the 2000s I was an art director and producer of printed books with a small indie press and, let me tell you, there were no great models for pre-sales or raising capital. Then crowdfunding arrived.</p> | |||
| <p class="paywall">Kickstarter launched in 2009. Although it wasn’t the first crowdfunding platform, it quickly became the largest and most influential. Since launch, Kickstarter has helped fund <a href="https://www.kickstarter.com/help/stats?ref=footer" target="_blank">more than 14,000 “publishing”</a>-related projects, collecting some $134 million. The 10 best-funded publishing projects on Kickstarter alone generated more than $6 million in funding—and then reaped much more in post-publication sales.</p> | |||
| <p class="paywall">Best-selling authors like Jack Cheng (<em>See You in the Cosmos</em>) and Robin Sloan (<em>Mr. Penumbra’s 24-Hour Bookstore</em>) got their start funding <a href="https://www.kickstarter.com/projects/robinsloan/robin-writes-a-book-and-you-get-a-copy" target="_blank">novellas</a> or <a href="https://www.kickstarter.com/projects/jackcheng/these-days-a-novel" target="_blank">first novels</a> on Kickstarter. Sloan launched his project “Robin Writes a Book” in August 2009, when few had heard the phrase “crowdfunding” and the idea of giving money for a thing not yet made seemed slightly bonkers.</p> | |||
| <p class="paywall">Kickstarter is not explicit patronage in the classical sense. At its worst, the platform produces products that feel chintzy and a bit scammy, an unholy union between QVC and SkyMall. But at its best there’s a sense of, as Tim Carmody puts it, “<a href="https://kottke.org/17/12/unlocking-the-commons-or-the-psychoeconomics-of-patronage" target="_blank">unlocking the commons</a>”—of helping something get into the world that otherwise wouldn’t exist, and <em>you</em> are part of that.</p> | |||
| <p class="paywall">I’ve published two books (with both physical and digital components) that wouldn’t have been made without crowdfunding. In 2010 I republished a guide I coauthored to the <a href="https://www.kickstarter.com/projects/craigmod/art-space-tokyo-ipad-edition-hardcover-reprint" target="_blank">Tokyo art world</a>, and in 2016 I published a <a href="https://www.kickstarter.com/projects/craigmod/koya-bound-a-book-of-photography-from-japans-kuman" target="_blank">photo collection</a> and comprehensive <a href="https://walkkumano.com/" target="_blank">online guide</a> to Japan’s Kumano Kodo UNESCO World Heritage pilgrimage path.</p> | |||
| <figure class="image-embed-component"><p class="component-lazy pending" data-component="Lazy"/><figcaption class="caption-component"><p class="caption-component__caption">Two books that the author self-published with the help of a Kickstarter campaign.</p><p class="caption-component__credit-container"><i aria-label="Photo attribution" class=" ui-camera icon icon--16"/><cite class="caption-component__credit">Craig Mod</cite></p></figcaption></figure> | |||
| <p class="paywall">I compiled everything I learned in that first campaign into a breakdown called "<a href="https://craigmod.com/journal/kickstartup/" target="_blank">Kickstartup</a>." That essay described cash raised through Kickstarter as “… micro seed capital. This—capital without relinquishment of ownership—is where the latent potential of Kickstarter funding lies.”</p> | |||
| <p class="paywall">I wrote that essay in 2010 just as crowdfunding was entering the mainstream. Soon after, it seemed everyone was launching books.</p> | |||
| <p class="paywall">The emblematic story of a Kickstarted book is <em><a href="https://www.kickstarter.com/projects/timbuktu/good-night-stories-for-rebel-girls-100-tales-to-dr" target="_blank">Goodnight Stories for Rebel Girls</a></em>. Launched in 2016, it quickly shattered all book-funding records, raising $1.2 million combined during its initial Kickstarter and IndieGogo campaigns. The book went on to sell over 1 million copies around the world. <em>Rebel Girls</em> has become a brand unto itself. Publisher Timbuktu Labs launched <em><a href="https://www.kickstarter.com/projects/timbuktu/kickstarter-gold-good-night-stories-for-rebel-girl" target="_blank">Goodnight Stories for Rebel Girls 2</a></em> in 2018, raising another $866,000 in pre-sales. Earlier this year, <a href="https://craigmod.com/onmargins/004/" target="_blank">I asked Elena Favilli</a>, co-founder of Timbuktu Labs, how she would describe the company: “When I think about <em>Goodnight Stories for Rebel Girls</em>, and the whole movement, and the whole community that has formed around it … I would say that today we are a digital native brand, and that we have done this starting from a physical object, and a very traditional one such as a children’s book.”</p> | |||
| <p class="paywall">The Timbuktu success story often omits one important detail: The company began in 2011 as a breathlessly future-of-publishing app developer, making a digital children’s magazine for the newly launched iPad. Timbuktu was part of a wide-eyed first wave of tablet-focused digital-publishing upstarts that tumbled forth, frothy with venture capital. This was when WIRED was publishing gigabyte-sized app updates for the digital version of the magazine, and venture capital firm Kleiner Perkins was pushing for publishing innovation via its $100 million-plus iFund. When Flipboard (where I worked from 2010 to 2011)—which reimagined the beauty of print magazines in digital-first form—went live on the App Store, it proved so popular it had to turn off signups and create a waiting list, one of the first iPad apps to constrain access.</p> | |||
| <p class="paywall">Amid this rush, Timbuktu Labs began winning awards for its magazine app, which was updated daily with new content. Despite the positive press, it never gained the necessary traction to become a sustainable business or justify taking on more capital. I invested a small amount in their angel round in 2012. And as an investor, I had a front-row seat: They tried. They really tried. The market simply wasn’t there. And so as a last-ditch effort, cofounders Favilli and Francesca Cavallo retreated to LA to rethink their business and life plans. It was there the idea for <em>Rebel Girls</em> was born, and a sustainable business was built around the opposite of an app: a physical book. <em>Goodnight Stories</em> didn’t emerge spontaneously, though; they began to test it, six months before launching their now famed Kickstarter campaign, using the simplest of internet technologies: email.</p> | |||
| <h3 class="paywall">Crucial Tech for an Author: Email</h3> | |||
| <p class="paywall">In 2014, <em>The New York Times</em> had 6.5 million subscribers to its email newsletters. By 2017, that number had doubled. Companies like Mailchimp have been offering newsletter services for nearly two decades, but they were never as popular as they are now. In 2018, users sent about 1 billion emails per day through Mailchimp, a 5,000-fold increase from 2013, when the service handled only 200,000 emails a day.</p> | |||
| <p class="paywall">In response to this email explosion, the startup <a href="https://www.substack.com/" target="_blank">Substack</a> launched in 2017 as a newsletter publishing and monetization platform. Most newsletter platforms and payment systems aren’t integrated in any smooth or meaningful way. Charging for access can be an onerous task. Through the Substack system, though, a publisher can easily set up metered access to a newsletter for a subscription fee. As of October, Substack boasts over <a href="https://techcrunch.com/2018/10/16/substack-one-year/" target="_blank">25,000 subscribers</a> across various newsletters, paying on average $80 a year. <em>Rolling Stone</em> reporter Matt Taibbi recently launched his novel, <em><a href="https://taibbi.substack.com" target="_blank">The Business Secrets of Drug Dealing</a></em>, in serial on Substack. Judd Legum’s <em><a href="https://popular.info/subscribe" target="_blank">Popular Information</a></em> is also published via Substack.</p> | |||
| <p class="paywall">Almost every writer or artist I know has a newsletter. One way to understand this boom is that as social media has siloed off chunks of the open web, sucking up attention, the energy that was once put into blogging has now shifted to email. Robin Sloan, in a recent—of course—<a href="https://www.robinsloan.com/" target="_blank">email newsletter</a>, lays it out thusly:</p> | |||
| <blockquote class="paywall"><p>In addition to sending several email newsletters, I subscribe to many, and I talk about them a lot; you might have heard me say this at some point (or seen me type it) but I think any artist or scholar or person-in-the-world today, if they don't have one already, needs to start an email list immediately.</p></blockquote> | |||
| <blockquote class="paywall"><p>Why? Because we simply cannot trust the social networks, or any centralized commercial platform, with these cliques and crews most vital to our lives, these bands of fellow-travelers who are—who must be—the first to hear about all good things. Email is definitely not ideal, but it is: decentralized, reliable, and not going anywhere—and more and more, those feel like quasi-magical properties.</p></blockquote> | |||
| <p class="paywall">Ownership. We recognize we (largely) own the mailing lists; they are portable, can be printed out, stored in a safe; they are not governed by unknowable algorithmic tomfoolery. I maintain an <a href="https://craigmod.com/explorers/" target="_blank">email newsletter</a> with more than 10,000 recipients, and I treat it as the most direct, most intimate, most valuable connection to my audience. In hard economic terms, when I was promoting my Kickstarter campaign for <em>Koya Bound</em>, each time I sent out a newsletter, I had roughly 10,000 more backer-dollars within an hour. That’s a pretty damn strong, tangible community signal. Far more immediate and predictable than I’ve found Twitter or Facebook or Instagram to be.</p> | |||
| <p class="paywall">That first <em>Rebel Girls</em> test email went to 25 recipients; the list snowballed in size and excitement over the six months leading up to the Kickstarter campaign. Timbuktu’s goal was—what seemed ambitious and implausible in the moment—$40,000. This exemplifies the amplification voodoo of a platform like Kickstarter: When someone backs a project, it broadcasts the news to their friends, creating a network effect. The bigger the network, the more powerful the effect. Kickstarter, with more than 15 million patrons, has the biggest network effect game in town. That also makes it a powerful online marketing force for independent authors and publishers.</p> | |||
| <h3 class="paywall">Newsletters as Books</h3> | |||
| <p class="paywall">The trouble with rigid definitions of what is or isn’t a “book” is that sometimes something that’s not <em>shaped</em> like a book, is actually very book-like.</p> | |||
| <p class="paywall">Taiwan-based Ben Thompson publishes a newsletter called <a href="https://stratechery.com/" target="_blank">Stratechery</a>. For $100 a year you get Thompson’s thoughts on technology and startups four times a week. Yes, he’s sharp and diligent, but most importantly he has a <em>voice</em>. And if you’re paying attention, his analysis will probably make you money. So it’s an easy sell. According to <a href="https://www.recode.net/2017/2/14/14612178/ben-thompson-stratechery-publishing-news" target="_blank">public statements</a>, in 2014 he had over 1,000 subscribers paying $100 a year. He later said his subscriptions generate 100 times what he made in 2014. Could it be? Could Ben Thompson be making $10 million a year on a newsletter? I asked him to confirm and he wrote back, “I am very successful but not near $10m unfortunately!” Still, it’s hard to imagine him with fewer than 10,000 subscribers.</p> | |||
| <p class="paywall">In 2008, <em>WIRED</em> co-founder and technologist Kevin Kelly predicted how the internet and email would allow creators to be independent. He called it the <a href="https://kk.org/thetechnium/1000-true-fans/" target="_blank">1,000 True Fans</a> theory of market building. Now the payments and funding and production pieces are in place to allow someone—given 1,000 fervent and supportive fans—to reliably publish for fun and profit. Stratechery is just an archetypical example of Kelly’s 1000 True Fans theory in practice.</p> | |||
| <p class="paywall">Folks like Ben Thompson <em>are</em> effectively writing books. Take a year of his essays, edit them for brevity and clarity, and you’d have a brilliant edition of <em>This Year in Tech</em>. And so in a strange way, Stratechery in paid newsletter form is as much a Future Book as a bounded Kindle edition.</p> | |||
| <div class="inset-left-component paywall inset-left-component--pullquote"><blockquote name="inset-left" class="inset-left-component__el"><p>Email is a boring, simple, old technology. Unlike followers or social media subscribers, email has yet to be usurped by algorithms.</p></blockquote></div> | |||
| <p class="paywall">It’s also worth noting that Thompson’s position is protected: No outsider can take away his subscribers or prevent him from communicating with them. Email is a boring, simple, old technology. The first email was sent in 1971 by Ray Tomlinson. Unlike followers or social media subscribers, email has yet to be usurped by algorithms (for the most part; Gmail does a little bit of sorting now). It’s a predictable marketing channel.</p> | |||
| <p class="paywall">Social media, however, is not predictable. Algorithms and product functionality have all the stability of rolling magma as companies refine how they engage, and extract value from, users. This means an investment in social media can go belly up in a few years. Take author Teju Cole, for example. His <a href="https://twitter.com/tejucole?lang=en" target="_blank">use of Twitter</a> was both <a href="https://6thfloor.blogs.nytimes.com/2014/01/09/teju-cole-puts-story-telling-to-the-twitter-test?smid=tw-nytimes" target="_blank">delicate and brilliant</a>. He amassed a quarter of a million followers before unceremoniously dropping the service in 2014, perhaps feeling the growing invective so characteristic of the platform today. He then consolidated his promotional social media activity around Facebook. Today, he says, “My main experience of Facebook is that I have no idea who sees what. I allegedly have 29,000 people following the page. I doubt that more than a few hundred of them are ever shown what I post.” Of course, Facebook gently suggests that page owners can reach their full audience by paying for promotion. Considering the <a href="https://www.theguardian.com/technology/2018/jun/01/facebook-teens-leaving-instagram-snapchat-study-user-numbers" target="_blank">shift in demographics</a> of Facebook usage, who knows if his audience is even checking their timelines, and would see the posts if he paid.</p> | |||
| <p class="paywall">By contrast, there’s something almost ahistorical about email, existing outside the normal flow of technological progress. It works and has worked, reliably, for decades. There’s no central email authority. Most bookish people use it. Today I’m convinced you could skip a website, Facebook page, or Twitter account, and launch a publishing company on email alone. <a href="https://coffeehousepress.org/" target="_blank">Coffee House Press</a> is a good example: I don’t ever peek at the website, or see any of the social media updates, but I love its semiregular, well-considered emails, and almost always buy something when they arrive. Similarly, publisher MCD Books’ newsletter, <a href="https://mcdbooks.us18.list-manage.com/subscribe?u=a51fdf73467e2176b71972da6&id=2497c5a088" target="_blank">Electric Eel</a>, is my main vector for keeping up with their work. <a href="https://www.instagram.com/mcdbooks/?hl=en" target="_blank">MCD Books</a> has also discovered what covers in the digital age were missing: a little bit of animation. Just enough movement to catch the eye of someone scrolling through their feed.</p> | |||
| <p class="paywall">If a publisher <em>is</em> going to augment emails with social media, Instagram feels like the best fit. Books are inherently visual, and cover design is in something of a golden age at the moment with designers like <a href="https://www.instagram.com/aforner1/" target="_blank">Alison Forner</a>, <a href="https://www.instagram.com/gray.318/?hl=en" target="_blank">Gray318</a>, <a href="https://www.instagram.com/rodrigocorral_/?hl=en" target="_blank">Rodrigo Corral</a>, <a href="https://www.instagram.com/suzanneldean/" target="_blank">Suzanne Dean</a>, and many others producing consistently outstanding work.</p> | |||
| <h3 class="paywall">Bring Up the Audio</h3> | |||
| <p class="paywall">The Library of Congress began distributing books on cassette tape in 1969, but audiobooks only gained significant publishing market share in recent years. Once physical, now almost entirely digital and ephemeral, audiobooks have gone from a rounding error to generating <a href="https://www.publishersweekly.com/pw/by-topic/industry-news/audio-books/article/77303-audiobook-revenue-jumped-22-7-in-2018.html" target="_blank">$2.5 billion in revenue</a> in 2017, up 22 percent from the prior year.</p> | |||
| <p class="paywall">It turns out smartphones aren’t the best digital book <em>reading</em> devices (too many seductions, real-time travesties, notifications just behind the words), but they make excellent audiobook players, stowed away in pockets while commuting. Top-tier podcasts like Serial, S-Town, and Homecoming have normalized listening to audio or (nonfiction) booklike productions on smartphones.</p> | |||
| <p class="paywall">The technical improvements that made audiobooks a great experience arrived suddenly in the past few years: Higher quality, better battery life, and less expensive Bluetooth headphones have flooded the market. Connectivity and multi-device cloud syncing are ubiquitous. By August, 25 million smart home speakers had shipped, with sales rising <a href="https://venturebeat.com/2018/08/16/canalys-smart-speaker-market-grew-187-percent-in-q2-2018/" target="_blank">187 percent</a> in the second quarter. That’s useful because over <a href="https://goodereader.com/blog/audiobooks/global-audiobook-trends-and-statistics-for-2018" target="_blank">half of all audio book listening</a> takes places at home.</p> | |||
| <p class="paywall">From the production side of things: A serviceable home voice-over studio can be cobbled together for less than $1,000 (even less if you’re willing to cut corners and work in a closet) thanks in part to the boom in podcasting. And the distribution channels for audiobooks are accessible to anyone who has an ACX (Audiobook Creation eXchange) file to upload.</p> | |||
| <p class="paywall">This <a href="https://www.vulture.com/2018/09/audiobooks-are-booming-but-how-long-will-that-last.html" target="_blank">escalation</a> of audiobook mindshare has been quietly simmering on the fringes for decades. In 2005, <em>The New York Times</em> <a href="https://www.nytimes.com/2005/05/26/style/loud-proud-unabridged-it-is-too-reading.html" target="_blank">argued</a> that listening to books was roughly the same as reading them. Back then, an audiobook required intention—buying physical media (<em>Lord of the Rings</em> required juggling 12 cassettes), a trip to the library, charging the batteries on your Discman. Now our always-connected, always-charged, always-networked devices make listening to an audiobook as effortless as “Alexa, read me Moby Dick.” And so it is. So much so that <em>The New York Times</em> launched an <a href="https://www.nytimes.com/books/best-sellers/audio-fiction/" target="_blank">audiobooks best seller</a> list in March.</p> | |||
| <h3 class="paywall">The Complete Package</h3> | |||
| <p class="paywall">Last August, a box arrived on my doorstep that seemed to embody the apotheosis of contemporary publishing. The <em><a href="https://www.kickstarter.com/projects/ozmarecords/voyager-golden-record-40th-anniversary-edition" target="_blank">Voyager Golden Record: 40th Anniversary Edition</a></em> was published via a crowdfunding campaign. The edition includes a book of images, three records, and a small poster packaged in an exquisite box set with supplementary online material. When I held it, I didn’t think about how futuristic it felt, nor did I lament the lack of digital paper or interactivity. I thought: What a strange miracle to be able to publish an object like this today. Something independently produced, complex and beautiful, with foil stamping and thick pages, full-color, in multiple volumes, made into a box set, with an accompanying record and other shimmering artifacts, for a weirdly niche audience, funded by geeks like me who are turned on by the romance of space.</p> | |||
| <figure class="image-embed-component"><p class="component-lazy pending" data-component="Lazy"/><figcaption class="caption-component"><p class="caption-component__caption"><em>Voyager Golden Record: 40th Anniversary Edition</em>, which was published with the help of a crowdfunding campaign. The edition includes a book of images, three records and a small poster.</p><p class="caption-component__credit-container"><i aria-label="Photo attribution" class=" ui-camera icon icon--16"/><cite class="caption-component__credit">Craig Mod</cite></p></figcaption></figure> | |||
| <p class="paywall">We have arrived to the once imagined Future Book in piecemeal truths.</p> | |||
| <p class="paywall">Moving images were often espoused to be a core part of our Future Book. While rarely found inside of an iBooks or Kindle book, they are here. If you want to learn the ukulele, you don’t search Amazon for a Kindle how-to book, you go to YouTube and binge on hours of lessons, stopping when you need to, rewinding as necessary, learning at your own pace.</p> | |||
| <p class="paywall">Vannevar Bush's “Memex” essentially described Wikipedia built into a desk.</p> | |||
| <p class="paywall">The "Hitchhiker’s Guide to the Galaxy" in <em>The Hitchhiker's Guide to the Galaxy</em> is an iPhone.</p> | |||
| <p class="paywall">In <em>The Book of Sand</em>, Borges wrote of an infinite book: "It was then that the stranger told me: 'Study the page well. You will never see it again.'" Describing in many ways what it feels like to browse the internet or peek at Twitter.</p> | |||
| <p class="paywall">Our Future Book is composed of email, tweets, YouTube videos, mailing lists, crowdfunding campaigns, PDF to .mobi converters, Amazon warehouses, and a surge of hyper-affordable offset printers in places like Hong Kong.</p> | |||
| <p class="paywall">For a “book” is just the endpoint of a latticework of complex infrastructure, made increasingly accessible. Even if the endpoint stays stubbornly the same—either as an unchanging Kindle edition or simple paperback—the universe that produces, breathes life into, and supports books is changing in positive, inclusive ways, year by year. The Future Book is here and continues to evolve. You’re holding it. It’s exciting. It’s boring. It’s more important than it has ever been.</p> | |||
| <p class="paywall">But temper some of those flight-of-fancy expectations. In many ways, it’s still a potato.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://www.wired.com/story/future-book-is-here-but-not-what-we-expected/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 14
- 0
cache/01cff17987cebe12c642331a004a575e/index.md
File diff suppressed because it is too large
View File
+ 733
- 0
cache/01d0d98c268032cbd58e7ccf9f806ebd/index.html
View File
| @@ -0,0 +1,733 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The Two Pillars of JavaScript (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The Two Pillars of JavaScript (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3">Source originale du contenu</a></h3> | |||
| <p name="b45e" id="b45e" class="graf--p graf--first">Before we get into this, allow me to introduce myself — you’re probably going to wonder who I think I am before this is over.</p> | |||
| <p name="9935" id="9935" class="graf--p">I’m <strong class="markup--strong markup--p-strong">Eric Elliott</strong>, author of <strong class="markup--strong markup--p-strong">“Programming JavaScript Applications”</strong> <strong class="markup--strong markup--p-strong">(O’Reilly)</strong>, host of the <em class="markup--em markup--p-em">feature-length documentary film-in-production,</em> <strong class="markup--strong markup--p-strong">“Programming Literacy”</strong>, and creator of the <a target="_blank" href="http://ericelliottjs.com/" data-href="http://ericelliottjs.com/" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">“Learn JavaScript with Eric Elliott”</strong></a><strong class="markup--strong markup--p-strong"> </strong>series of online JavaScript courses.</p> | |||
| <p name="edcb" id="edcb" class="graf--p">I have contributed to software experiences for <strong class="markup--strong markup--p-strong">Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, </strong>and top recording artists including <strong class="markup--strong markup--p-strong">Usher, Frank Ocean, Metallica,</strong> and many more.</p> | |||
| <h4 name="0262" id="0262" class="graf--h4">Once Upon a Time</h4> | |||
| <p name="f4e0" id="f4e0" class="graf--p">I was trapped in the darkness. I was blind — shuffling about, bumping into things, breaking things, and generally making an unholy mess of everything I touched.</p> | |||
| <p name="49d1" id="49d1" class="graf--p">In the 90's, I was programming in C++, Delphi, and Java and writing 3D plugins for the software suite that eventually became Maya (used by lots of major motion picture studios to make summer blockbuster movies).</p> | |||
| <p name="6b47" id="6b47" class="graf--p">Then it happened: The internet took off. Everybody started building websites, and after writing and editing a couple online magazines, a friend convinced me that the future of the web would be SaaS products (before the term was coined). I didn’t know it then, but that subtle course change transformed the way I think about programming on a fundamental level, because <em class="markup--em markup--p-em">if you want to make a good SaaS product, you have to learn JavaScript.</em></p> | |||
| <p name="7211" id="7211" class="graf--p">Once I learned it, I never looked back. Suddenly, everything was easier. The software I made was more malleable. Code survived longer without being rewritten. Initially, I thought JavaScript was mostly UI scripting glue, but when I learned cookies and AJAX blew up, that transformed, too.</p> | |||
| <p name="ac42" id="ac42" class="graf--p">I got addicted, and I couldn’t go back. JavaScript offers something other languages lack:</p> | |||
| <blockquote name="9463" id="9463" class="graf--pullquote pullquote">Freedom!</blockquote> | |||
| <p name="eaea" id="eaea" class="graf--p">JavaScript is one of the most important programming languages of all time, not simply because of it’s popularity, but because it popularized two features which are extremely important for the evolution of programming:</p> | |||
| <ul class="postList"><li name="3d98" id="3d98" class="graf--li"><strong class="markup--strong markup--li-strong">Objects without classes</strong> (and prototypal inheritance aka OLOO — Objects Linking to Other Objects), and</li><li name="09e2" id="09e2" class="graf--li"><strong class="markup--strong markup--li-strong">Lambdas</strong> (with closure — the keys to functional programming)</li></ul> | |||
| <p name="f8a1" id="f8a1" class="graf--p">Collectively, I like to call these paradigms <strong class="markup--strong markup--p-strong">the two pillars of JavaScript,</strong><em class="markup--em markup--p-em"> </em>and I’m not ashamed to admit that they’ve spoiled me. I don’t want to program in a language without them.</p> | |||
| <p name="8a9c" id="8a9c" class="graf--p"><em class="markup--em markup--p-em">JavaScript will be remembered as one of the most influential languages ever created.</em> Lots of other languages have already copied one or the other, or both of the pillars, and the pillars have transformed the way we write applications, <em class="markup--em markup--p-em">even in other languages.</em></p> | |||
| <p name="da48" id="da48" class="graf--p">Brendan Eich didn’t invent either of the pillars, but JavaScript exposed the programming masses to them. Both pillars are equally important, but I’m concerned that a large number of JavaScript programmers are completely missing one or both innovations, because JavaScript is pretty good at letting you code poorly if you don’t bother to learn it properly.</p> | |||
| <p name="44a9" id="44a9" class="graf--p">This is actually a feature, because it makes it really easy to pick up JavaScript and start doing useful things with it, but that phase of your development as a JavaScript programmer <em class="markup--em markup--p-em">should last no more than a year.</em></p> | |||
| <p name="1e20" id="1e20" class="graf--p">If you haven’t yet, <strong class="markup--strong markup--p-strong">it’s time to level up.</strong></p> | |||
| <p name="5d45" id="5d45" class="graf--p">If you’re creating constructor functions and inheriting from them, you haven’t learned JavaScript. It doesn’t matter if you’ve been doing it since 1995. You’re failing to take advantage of JavaScript’s most powerful capabilities.</p> | |||
| <p name="828b" id="828b" class="graf--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">You’re working in the phony version of JavaScript that only exists to dress the language up like Java.</em></strong></p> | |||
| <p name="1dac" id="1dac" class="graf--p">You’re coding in this amazing, game-changing, seminal programming language and <em class="markup--em markup--p-em">completely missing what makes it so cool and interesting.</em></p> | |||
| <h3 name="284a" id="284a" class="graf--h3">We’re Constructing a Mess.</h3> | |||
| <p name="d0e8" id="d0e8" class="graf--p graf--empty"><br/></p> | |||
| <blockquote name="1693" id="1693" class="graf--blockquote graf--startsWithDoubleQuote">“Those who are not aware they are walking in darkness will never seek the light.” ~ Bruce Lee</blockquote> | |||
| <p name="9ae3" id="9ae3" class="graf--p"><strong class="markup--strong markup--p-strong">Constructors violate the open/closed principle</strong> because they couple all callers to the details of how your object gets instantiated. Making an HTML5 game? Want to change from new object instances to use object pools so you can recycle objects and <a target="_blank" href="https://www.youtube.com/watch?v=RWmzxyMf2cE" data-href="https://www.youtube.com/watch?v=RWmzxyMf2cE" class="markup--anchor markup--p-anchor" rel="nofollow">stop the garbage collector from trashing your frame rate?</a> Too bad. You’ll either break all the callers, or you’ll end up with a hobbled factory function.</p> | |||
| <p name="aa79" id="aa79" class="graf--p">If you return an arbitrary object from a constructor function, it will break your prototype links, and the <em class="markup--em markup--p-em">`this`</em> keyword will no longer be bound to the new object instance in the constructor. It’s also less flexible than a real factory function because you can’t use <em class="markup--em markup--p-em">`this`</em> at all in the factory; it just gets thrown away.</p> | |||
| <p name="5208" id="5208" class="graf--p">Constructors that aren’t running in strict mode can be downright dangerous, too. If a caller forgets <em class="markup--em markup--p-em">`new`</em> and you’re not using <em class="markup--em markup--p-em">strict mode</em> or <em class="markup--em markup--p-em">ES6 classes</em> <em class="markup--em markup--p-em">[sigh]</em>, anything you assign to <em class="markup--em markup--p-em">`this`</em> will pollute the global namespace. That’s ugly.</p> | |||
| <p name="7c90" id="7c90" class="graf--p">Prior to strict mode, this language glitch caused hard-to-find bugs at two different startups I worked for, during critical growth periods when we didn’t have a lot of extra time to chase down hard-to-find bugs.</p> | |||
| <p name="594a" id="594a" class="graf--p">In JavaScript, <strong class="markup--strong markup--p-strong">factory functions</strong> are simply constructor functions <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">minus</em></strong> the <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">`new` </em>requirement,</strong> <strong class="markup--strong markup--p-strong">global pollution danger</strong> and <strong class="markup--strong markup--p-strong">awkward limitations</strong> (including that annoying initial capitalized letter convention).</p> | |||
| <p name="8b23" id="8b23" class="graf--p"><strong class="markup--strong markup--p-strong">JavaScript doesn’t need constructor functions</strong> because <em class="markup--em markup--p-em">any function can return a new object. </em>With dynamic object extension, object literals and `<em class="markup--em markup--p-em">Object.create()`, </em>we have everything we need — with none of the mess. And <em class="markup--em markup--p-em">`this`</em> behaves just like it does in any other function. Hurray!</p> | |||
| <h3 name="9ed4" id="9ed4" class="graf--h3">Welcome to the Seventh Circle of Hell.</h3> | |||
| <p name="18a2" id="18a2" class="graf--p graf--empty"><br/></p> | |||
| <blockquote name="a445" id="a445" class="graf--blockquote graf--startsWithDoubleQuote">“Quite frequently I am not so miserable as it would be wise to be.” ~ T.H. White</blockquote> | |||
| <p name="d6bd" id="d6bd" class="graf--p">Everyone has heard the boiling frog anecdote: If you put a frog in boiling water, it will jump out. If you put the frog in cool water and gradually increase the heat, the frog will boil to death because it doesn’t sense the danger. In this story, we are the frogs.</p> | |||
| <p name="3970" id="3970" class="graf--p">If <em class="markup--em markup--p-em">constructor</em> behavior is the <em class="markup--em markup--p-em">frying pan</em>, <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">classical inheritance</em></strong> isn’t <em class="markup--em markup--p-em">the fire;</em> <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">it’s the fire from Dante’s seventh circle of hell.</em></strong></p> | |||
| <h4 name="aec9" id="aec9" class="graf--h4">The Gorilla / Banana problem:</h4> | |||
| <p name="a781" id="a781" class="graf--p graf--empty"><br/></p> | |||
| <blockquote name="508e" id="508e" class="graf--blockquote graf--startsWithDoubleQuote">“The problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong</blockquote> | |||
| <p name="d129" id="d129" class="graf--p">Classical Inheritance generally lets you inherit only from a single ancestor, forcing you into awkward taxonomies. I say awkward because without fail, <em class="markup--em markup--p-em">every OO design taxonomy I have ever seen in a large application was eventually wrong.</em></p> | |||
| <p name="b5fe" id="b5fe" class="graf--p">Say you start with two classes: <em class="markup--em markup--p-em">Tool</em> and <em class="markup--em markup--p-em">Weapon</em>. You’ve already screwed up — <em class="markup--em markup--p-em">You can’t make the game “Clue.”</em></p> | |||
| <h4 name="3ded" id="3ded" class="graf--h4">The Tight Coupling Problem</h4> | |||
| <p name="a3e1" id="a3e1" class="graf--p graf--empty"><br/></p> | |||
| <p name="b97f" id="b97f" class="graf--p"><em class="markup--em markup--p-em">The coupling between a child class and its parent is the tightest form of coupling in OO design. </em>That’s the opposite of reusable, modular code.</p> | |||
| <p name="ad0c" id="ad0c" class="graf--p">Making <em class="markup--em markup--p-em">small changes </em>to a class creates <em class="markup--em markup--p-em">rippling side-effects </em>that break things that should be completely unrelated.</p> | |||
| <h4 name="b1e7" id="b1e7" class="graf--h4">The Duplication by Necessity Problem</h4> | |||
| <p name="5ba1" id="5ba1" class="graf--p graf--empty"><br/></p> | |||
| <p name="ddc0" id="ddc0" class="graf--p">The obvious solution to taxonomy troubles is to go back in time, build up new classes with subtle differences by changing up what inherits from what — but it’s too tightly coupled to properly extract and refactor. You end up duplicating code instead of reusing it. You violate the <strong class="markup--strong markup--p-strong">DRY</strong> principle (Don’t Repeat Yourself).</p> | |||
| <p name="b132" id="b132" class="graf--p">As a consequence, you keep growing your subtly different jungle of classes, and as you add inheritance levels, your classes get more and more arthritic and brittle. When you find a bug, you don’t fix it in one place. <em class="markup--em markup--p-em">You fix it everywhere.</em></p> | |||
| <blockquote name="06aa" id="06aa" class="graf--blockquote graf--startsWithDoubleQuote">“Oops. Missed one.” — Every Classical OO programmer, ever.</blockquote> | |||
| <p name="7f79" id="7f79" class="graf--p">This is known as <strong class="markup--strong markup--p-strong">the duplication by necessity problem </strong>in OO design circles.</p> | |||
| <p name="1124" id="1124" class="graf--p"><strong class="markup--strong markup--p-strong">ES6 classes don’t fix any of these problems. </strong>ES6 makes them worse, because these <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">bad ideas </em></strong><em class="markup--em markup--p-em">will be officially blessed by the spec, </em>and written about in a thousand books and blog posts.</p> | |||
| <p name="b086" id="b086" class="graf--p"><strong class="markup--strong markup--p-strong">The <em class="markup--em markup--p-em">`class` </em>keyword will probably be the most harmful feature in JavaScript. </strong>I have enormous respect for the brilliant and hard-working people who have been involved in the standardization effort, but even brilliant people occasionally do the wrong thing. Try adding .1 + .2 in your browser console, for instance. I still think Brendan Eich has contributed greatly to the web, to programming languages, and to computer science in general.</p> | |||
| <p name="5bb1" id="5bb1" class="graf--p">P.S. Don’t use <em class="markup--em markup--p-em">`super` </em>unless you enjoy stepping through the debugger into multiple layers of inheritance abstraction.</p> | |||
| <h4 name="c610" id="c610" class="graf--h4">The Fallout</h4> | |||
| <p name="682d" id="682d" class="graf--p graf--empty"><br/></p> | |||
| <p name="19ae" id="19ae" class="graf--p">These problems have a multiplying effect as your application grows, and eventually, the only solution is to rewrite the application from scratch or scrap it entirely — sometimes the business just needs to cut its losses.</p> | |||
| <p name="d917" id="d917" class="graf--p">I have seen this process play out <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">again</em></strong><em class="markup--em markup--p-em">, and </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">again</em></strong><em class="markup--em markup--p-em">, </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">job</em></strong><em class="markup--em markup--p-em"> after </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">job</em></strong><em class="markup--em markup--p-em">, </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">project</em></strong><em class="markup--em markup--p-em"> after </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">project</em></strong><em class="markup--em markup--p-em">.</em> <em class="markup--em markup--p-em">Will we ever learn?</em></p> | |||
| <p name="f140" id="f140" class="graf--p">At one company I worked for, <em class="markup--em markup--p-em">it caused a software release date to slip by an entire year for a rewrite.</em> I believe in <strong class="markup--strong markup--p-strong">updates, not rewrites.</strong> At another company I consulted for, <em class="markup--em markup--p-em">it almost caused the entire company to crash and burn.</em></p> | |||
| <blockquote name="30ac" id="30ac" class="graf--pullquote pullquote"><strong class="markup--strong markup--pullquote-strong">These problems are not just a matter of taste or style. This choice can make or break your product.</strong></blockquote> | |||
| <p name="4f7d" id="4f7d" class="graf--p">Large companies can usually chug along like nothing is wrong, but startups can’t afford to spin their wheels on problems like these while they’re struggling to find their product/market fit on a limited runway.</p> | |||
| <p name="399b" id="399b" class="graf--p"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">I’ve never seen any of the problems above in a modern code base that avoids classical inheritance altogether.</em></strong></p> | |||
| <h3 name="04ab" id="04ab" class="graf--h3">Step into the light.</h3> | |||
| <p name="2b66" id="2b66" class="graf--p graf--empty"><br/></p> | |||
| <blockquote name="4e2c" id="4e2c" class="graf--blockquote graf--startsWithDoubleQuote">“Perfection is reached not when there is nothing more to add, but when there is nothing more to subtract.” ~ Antoine de Saint-Exupéry</blockquote> | |||
| <p name="cd1f" id="cd1f" class="graf--p">A while back, I was working on a library to demonstrate how to use prototypal inheritance for my book, <a target="_blank" href="http://www.amazon.com/gp/product/1491950293?ie=UTF8&camp=213733&creative=393185&creativeASIN=1491950293&linkCode=shr&tag=eejs-20&linkId=ZURITP6JDCUKP6QF" data-href="http://www.amazon.com/gp/product/1491950293?ie=UTF8&camp=213733&creative=393185&creativeASIN=1491950293&linkCode=shr&tag=eejs-20&linkId=ZURITP6JDCUKP6QF" class="markup--anchor markup--p-anchor" rel="nofollow">“Programming JavaScript Applications”</a> (O’Reilly), when I settled on an interesting idea: a factory function that helps you produce factory functions that you can inherit from and compose together. I called the composable factories “stamps,” and the library, “Stampit.” The library is very small and simple. I gave a talk about Stampit at the O’Reilly Fluent Conference in 2013 (included here at the end of the article), and wrote a blog post about stamps (see below).</p> | |||
| <p name="8078" id="8078" class="graf--p">There is a small, but steadily growing community of developers whose coding styles have been transformed by stamps. Stampit is in production use in multiple apps with millions of monthly active users.</p> | |||
| <figure name="d01f" id="d01f" class="graf--figure postField--insetLeftImage"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*6432XLMVYjpOCisNaKEBgw.jpeg" data-width="1145" data-height="1145" data-action="zoom" data-action-value="1*6432XLMVYjpOCisNaKEBgw.jpeg" src="https://d262ilb51hltx0.cloudfront.net/max/600/1*6432XLMVYjpOCisNaKEBgw.jpeg"/></div></figure> | |||
| <blockquote name="ef35" id="ef35" class="graf--blockquote graf--startsWithDoubleQuote">“I have been using Stampit a lot and really enjoy the power afforded by the simplicity in the separation of concerns between the types of prototypes as well as composable nature of stamps. Classical deep inheritance trees always bothered me, especially in the context of web development where business needs are often a moving target. The above mentioned talk and Stampit have inspired different thinking and allow me to do things that feel like interfaces without the overhead, or inherit private data with privileged methods from multiple sources. My prototypal inheritance is now strong, my objects have become shapeless, formless, like water. Keep up the great work, class sugar has nothing on this.” ~ Justin Schroeder, Senior Developer, Wrecking Ball Media Group</blockquote> | |||
| <p name="5bf1" id="5bf1" class="graf--p">Stampit isn’t the only alternative, of course. Douglas Crockford doesn’t use <em class="markup--em markup--p-em">`new`</em> or <em class="markup--em markup--p-em">`this`</em> at all, instead opting for an entirely functional approach to code reuse.</p> | |||
| <p name="c7fe" id="c7fe" class="graf--p">All his objects are just stateless bags of functions, or data-only objects like associative arrays with no methods. This works well unless you’re creating a hundreds of thousands of objects and you need your app to perform smoothly at or near realtime (think game engines, realtime signal processors, etc…). In those situations, delegating calls to methods can save you from a lot of manual memory management.</p> | |||
| <p name="ba8f" id="ba8f" class="graf--p">Other good alternatives include making better use of JavaScript modules as an alternative to inheritance (I recommend npm and Node-style modules with Browserify), or simply cloning objects by copying properties from a source object to a new object (e.g. <em class="markup--em markup--p-em">`$.extend()`, `_.extend()`,</em> etc…).</p> | |||
| <p name="1b5c" id="1b5c" class="graf--p">The copy mechanism is another form of prototypal inheritance. Sources of clone properties are a specific kind of prototype called <strong class="markup--strong markup--p-strong">exemplar prototypes, </strong>and cloning an exemplar prototype is known as <strong class="markup--strong markup--p-strong">concatenative inheritance.</strong></p> | |||
| <p name="fe19" id="fe19" class="graf--p">Even if you follow Douglas Crockford’s advice and stop using <em class="markup--em markup--p-em">`this`, </em>you can still do things the prototypal way. Concatenative inheritance is possible because of a feature in JavaScript known as <strong class="markup--strong markup--p-strong">dynamic object extension: </strong>the ability to add to an object after it has been instantiated.</p> | |||
| <p name="72d1" id="72d1" class="graf--p"><strong class="markup--strong markup--p-strong">You never need classes in JavaScript,</strong> and I have never seen a situation where class is a better approach than the alternatives. If you can think of any, leave a comment, but I’ve been making that challenge for years now, and <em class="markup--em markup--p-em">nobody has come up with a good use-case</em> — just flimsy arguments about micro-optimizations or style preferences.</p> | |||
| <p name="8534" id="8534" class="graf--p">When I tell people that constructors and classical inheritance are bad, they get defensive. <em class="markup--em markup--p-em">I’m not attacking you. I’m trying to help you.</em></p> | |||
| <p name="fabd" id="fabd" class="graf--p">People get attached to their programming style as if their coding style is how they express themselves. <em class="markup--em markup--p-em">Nonsense.</em></p> | |||
| <blockquote name="340f" id="340f" class="graf--pullquote pullquote">What you make with your code is how you express yourself.</blockquote> | |||
| <p name="17a1" id="17a1" class="graf--p">How it’s implemented doesn’t matter <strong class="markup--strong markup--p-strong">at all</strong> <em class="markup--em markup--p-em">unless it’s implemented poorly.</em></p> | |||
| <blockquote name="a834" id="a834" class="graf--blockquote">The only thing that matters in software development is that your users love the software.</blockquote> | |||
| <p name="12c4" id="12c4" class="graf--p">I can warn you that there’s a cliff ahead, but some people don’t believe there is danger until they experience it first hand. Don’t make that mistake; <em class="markup--em markup--p-em">the cost can be enormous.</em> <strong class="markup--strong markup--p-strong">This is your chance</strong> to learn from the mistakes that countless others have made <em class="markup--em markup--p-em">again</em> and <em class="markup--em markup--p-em">again</em> over the span of <em class="markup--em markup--p-em">decades.</em> Entire books have been written about these problems.</p> | |||
| <p name="acaf" id="acaf" class="graf--p">The seminal <a target="_blank" href="http://www.amazon.com/gp/product/0201633612?ie=UTF8&camp=213733&creative=393185&creativeASIN=0201633612&linkCode=shr&tag=eejs-20&linkId=5S2XB3C32NLP7IVQ" data-href="http://www.amazon.com/gp/product/0201633612?ie=UTF8&camp=213733&creative=393185&creativeASIN=0201633612&linkCode=shr&tag=eejs-20&linkId=5S2XB3C32NLP7IVQ" class="markup--anchor markup--p-anchor" rel="nofollow">“Design Patterns” book by the Gang of Four</a> is built around two foundational principles:</p> | |||
| <p name="23bc" id="23bc" class="graf--p graf--startsWithDoubleQuote"><em class="markup--em markup--p-em">“Program to an interface, not an implementation,”</em> and <em class="markup--em markup--p-em">“favor object composition over class inheritance.”</em></p> | |||
| <p name="f411" id="f411" class="graf--p">Because child classes code to the implementation of the parent class, the second principle follows from the first, but it’s useful to spell it out.</p> | |||
| <blockquote name="2f7f" id="2f7f" class="graf--pullquote pullquote">The seminal work on classical OO design is anti-class inheritance.</blockquote> | |||
| <p name="5774" id="5774" class="graf--p">It contains a whole section of object creational patterns that exist solely to work around the limitations of constructors and class inheritance.</p> | |||
| <p name="331c" id="331c" class="graf--p">Google <em class="markup--em markup--p-em">“new considered harmful,” “inheritance considered harmful,”</em> and <em class="markup--em markup--p-em">“super is a code smell.”</em> You’ll dig up dozens of articles from blog posts and respected publications like Dr. Dobb’s Journal dating back to before JavaScript was invented, all saying much the same thing: <em class="markup--em markup--p-em">`new`</em>, brittle classical inheritance taxonomies, and parent-child coupling (e.g. <em class="markup--em markup--p-em">`super`</em>) are recipes for disaster.</p> | |||
| <p name="212b" id="212b" class="graf--p"><em class="markup--em markup--p-em">Even James Gosling, the creator of Java, admits that Java didn’t get objects right.</em></p> | |||
| <p name="f34a" id="f34a" class="graf--p">Want to stick with JavaScript references? <a target="_blank" href="https://www.youtube.com/watch?v=bo36MrBfTk4" data-href="https://www.youtube.com/watch?v=bo36MrBfTk4" class="markup--anchor markup--p-anchor" rel="nofollow">Douglas Crockford</a> got <em class="markup--em markup--p-em">Object.create()</em> added to the language so he wouldn’t have to use <em class="markup--em markup--p-em">`new`</em>.</p> | |||
| <p name="c349" id="c349" class="graf--p">Kyle Simpson (author, <a target="_blank" href="http://www.amazon.com/s/?_encoding=UTF8&camp=213733&creative=393193&linkCode=shr&tag=eejs-20&linkId=YSQEZLRZIRKYVBNS&rl=search-alias%3Daps&field-keywords=you%20don%27t%20know%20js&sprefix=you+don%27t+know+js%2Caps" data-href="http://www.amazon.com/s/?_encoding=UTF8&camp=213733&creative=393193&linkCode=shr&tag=eejs-20&linkId=YSQEZLRZIRKYVBNS&rl=search-alias%3Daps&field-keywords=you%20don%27t%20know%20js&sprefix=you+don%27t+know+js%2Caps" class="markup--anchor markup--p-anchor" rel="nofollow">“You Don’t Know JS”</a>) wrote a fascinating three part blog series on the topic called <a target="_blank" href="http://davidwalsh.name/javascript-objects" data-href="http://davidwalsh.name/javascript-objects" class="markup--anchor markup--p-anchor" rel="nofollow">“JS Objects: Inherited a Mess.”</a></p> | |||
| <p name="654b" id="654b" class="graf--p">Kyle argues that prototypal inheritance is anti-class, that’s simpler and better than class. He even coined the term <strong class="markup--strong markup--p-strong">OLOO</strong> (Objects Linked to Other Objects) to clarify the distinction between prototype delegation and class inheritance.</p> | |||
| <p name="f3b3" id="f3b3" class="graf--p graf--empty"><br/></p> | |||
| <h2 name="a985" id="a985" class="graf--h2">Good code is simple.</h2> | |||
| <p name="f64e" id="f64e" class="graf--p graf--empty"><br/></p> | |||
| <blockquote name="d4ee" id="d4ee" class="graf--blockquote graf--startsWithDoubleQuote">“Simplicity is about subtracting the obvious and adding the meaningful.” ~ John Maeda</blockquote> | |||
| <h4 name="f616" id="f616" class="graf--h4">As you strip constructors and classical inheritance out of JavaScript, it:</h4> | |||
| <ul class="postList"><li name="db15" id="db15" class="graf--li"><strong class="markup--strong markup--li-strong">Gets simpler</strong> (Easier to read and to write. No more wrong design taxonomies.)</li><li name="24fb" id="24fb" class="graf--li"><strong class="markup--strong markup--li-strong">Gets more flexible</strong> (Switch from new instances to recycling object pools or proxies? No problem.)</li><li name="cf5f" id="cf5f" class="graf--li"><strong class="markup--strong markup--li-strong">Gets more powerful & expressive</strong> (Inherit from multiple ancestors? Inherit private state? No problem.)</li></ul> | |||
| <h4 name="d03c" id="d03c" class="graf--h4">The Better Option</h4> | |||
| <p name="b16a" id="b16a" class="graf--p graf--empty"><br/></p> | |||
| <blockquote name="1bfe" id="1bfe" class="graf--blockquote graf--startsWithDoubleQuote">“If a feature is sometimes dangerous, and there is a better option, then always use the better option.” ~ Douglas Crockford</blockquote> | |||
| <p name="67ef" id="67ef" class="graf--p">I’m not trying to take a useful tool away from you. I’m warning you that <em class="markup--em markup--p-em">what you think is a tool is actually a foot-gun.</em> In the case of constructors and classes, there are <em class="markup--em markup--p-em">several better options.</em></p> | |||
| <p name="0b11" id="0b11" class="graf--p">Another common argument that programmers use is that it should be up to them how they express themselves, as if code style rises to the level of art or fashion. This argument is a purely emotional and irrational:</p> | |||
| <p name="1a92" id="1a92" class="graf--p"><em class="markup--em markup--p-em">Your code isn’t the product of your self expression any more than a painter’s paintbrush is the product of their self expression. </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">Code is the tool. The program is the product.</em></strong></p> | |||
| <p name="55ff" id="55ff" class="graf--p">Yes, <em class="markup--em markup--p-em">some code is art in and of itself,</em> but if it doesn’t stand alone published on paper, <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">your code doesn’t fall into that category.</em></strong><em class="markup--em markup--p-em"> </em>Otherwise, as far as your users are concerned, <em class="markup--em markup--p-em">the code is a black box, and what they enjoy is the program.</em></p> | |||
| <p name="0db8" id="0db8" class="graf--p">Good programming style requires that when you’re presented with a choice that’s elegant, simple, and flexible, or another choice that’s complex, awkward, and restricting, you choose the former. I know it’s popular to be open minded about language features, but <em class="markup--em markup--p-em">there is a right way and a wrong way.</em></p> | |||
| <p name="cc68" id="cc68" class="graf--p"><strong class="markup--strong markup--p-strong">Choose the right way.</strong></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 6
- 0
cache/01d0d98c268032cbd58e7ccf9f806ebd/index.md
File diff suppressed because it is too large
View File
+ 593
- 0
cache/01fe9dacc4f148d6a1d10838124139b5/index.html
View File
| @@ -0,0 +1,593 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The Art of Aligning Groups (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The Art of Aligning Groups (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/">Source originale du contenu</a></h3> | |||
| <p><a href="https://www.flickr.com/photos/walhalla/24145962492/"><img data-attachment-id="2891" data-permalink="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/chapelizod_murmuration/" data-orig-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg" data-orig-size="2048,1367" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Chapelizod Murmuration" data-image-description="<p>Photo by <a href="https://www.flickr.com/photos/walhalla/24145962492/">Simon</a>. CC BY-NC-ND 2.0.</p> " data-medium-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-300x200.jpg" data-large-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1024x684.jpg" src="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg" alt="" class="alignnone size-full wp-image-2891" srcset="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg 2048w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-300x200.jpg 300w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-768x513.jpg 768w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1024x684.jpg 1024w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1229x820.jpg 1229w" sizes="(max-width: 2048px) 100vw, 2048px"/></a></p> | |||
| <p>My best experience collaborating with a group happened almost 20 years ago on a basketball court. I had just recovered from a back injury and was returning to my regular pickup game for the first time in two months. To my surprise, a bunch of new people had shown up that day, and I ended up on a team with four other guys I didn’t know.</p> | |||
| <p>It didn’t matter. That day, that game, we played the most beautiful basketball I had ever experienced. It was like a dance. No one was particularly great individually, but everyone knew how to play <em>together</em>. People moved without the ball, sprinting down the floor, screening and cutting. The ball barely touched the ground as we whipped it around to each other — dribble, dribble, pass, pass, pass.</p> | |||
| <p>We were playing fast, but I felt like I was seeing things in slow motion. I would pass the ball to empty spots, and the right guy would magically materialize just as the ball got there. Every basket we made was an easy basket, and we scored them in large quantities before finally putting the other team out of its misery.</p> | |||
| <p>The final score showed that we had collaborated effectively, but it didn’t tell the whole story. It didn’t say how it <em>felt</em> to play with that team, to be in <em>flow</em> with four other people, none of whom had ever played together before. Every movement felt effortless and joyful. I felt alive. The team felt alive.</p> | |||
| <h2>Alignment Versus Agreement</h2> | |||
| <p>People often ask how I measure effective collaboration. My answer is always, “It depends. What’s the goal?” Collaboration, by definition, is working together in pursuit of a shared, bounded goal. Whether or not you achieve that goal matters. However, how everyone <em>feels</em> in pursuit of that goal also matters. Success needs to take both of those things into account.</p> | |||
| <p>I think the word, “alignment,” conveys this nuance nicely by suggesting both directionality and movement. Alignment is dynamic. It’s irrelevant if the wheels in your car are in alignment if you’re not moving. Alignment is also not binary. If the wheels in your car are not perfectly aligned, you’ll still be able to drive. It just won’t be as smooth or as efficient as it could be. The level of resistance you experience is a measure of how aligned you actually are.</p> | |||
| <p>“Alignment” is not the same thing as “agreement,” although people often conflate the two. A group might verbally agree on a destination, but its participants might still move in conflicting directions. Conversely, a group might move in perfect lock-step without ever having explicitly agreed on where it’s going or how (as was the case in my pickup game). It might even achieve this while <a href="https://en.wikipedia.org/wiki/Disagree_and_commit">explicitly disagreeing</a>.</p> | |||
| <p>This distinction is important, because it’s not necessarily hard to get a group to agree on something. One way is to make a statement that is so abstract, it’s both indisputable and meaningless. An example of something I often hear is, “We value collaboration.” Another one is, “Our goal is to better serve our customers.” Very few people would disagree with either of those statements, but by themselves, they’re too broad to mean anything. Agreement without alignment also often happens in groups with conflict-averse cultures, where people would rather assent than argue.</p> | |||
| <p><em>Being in alignment</em> is different than <em>moving in alignment</em>. If the goal is for everyone to be moving toward the same goal <a href="http://fasterthan20.com/2015/08/bring-groups-alive-by-establishing-a-rhythm/">in rhythm</a> and without resistance, then everyone must both <em>want</em> to move in alignment with everyone else and <em>be capable</em> of doing this. You achieve the former by <em>aligning</em>. You achieve the latter by <em><a href="http://fasterthan20.com/collaboration-muscles-and-mindsets/">practicing</a></em>.</p> | |||
| <p>How do you get a group into alignment? How can you tell when a group is aligned? And how can groups practice <em>moving</em> in alignment?</p> | |||
| <h2>Alignment, Not Control</h2> | |||
| <p>There is no one right way to get a group aligned. Sometimes, it just happens. More often than not, it takes work.</p> | |||
| <p>Most people seem to equate aligning as a top-down version of “getting buy-in.” In other words, someone — usually a person with positional power over everyone else — thinks really hard about the “right” way to do something, then tries to convince everyone else to go along with it with some combination of encouragement and threats, possibly integrating some feedback along the way.</p> | |||
| <p>This isn’t wrong, but it’s not the best way to motivate people, it doesn’t tap into a group’s full <a href="http://fasterthan20.com/2013/12/maximizing-collective-intelligence-means-giving-up-control/">collective intelligence</a>, and it doesn’t usually lead to great performance.</p> | |||
| <p>My philosophy with groups is that more perspectives lead to better outcomes. When it comes to <a href="http://fasterthan20.com/toolkit/goals-success-spectrum/">goals</a> and <a href="http://fasterthan20.com/diy-strategy-culture/">strategy</a> in particular, rather than one or a few people coming up with their own ideas first and having others respond or comply, I want as many people as possible to think critically about the problem at hand and to co-create the solution. This is generally messier and slower (at first), because it requires people to align around language and worldviews and to <em>struggle</em> both individually and collectively. But that struggle leads to greater ownership and agency, which ultimately leads to higher performance.</p> | |||
| <p>Alignment obviates the need for control, but it requires stomaching the messiness of aligning. While the hallmark of moving in alignment is a feeling of flow, the process of aligning can feel exactly the opposite.</p> | |||
| <h2>Building Alignment</h2> | |||
| <p>What does a productive struggle look like? What does it <em>feel</em> like? How is it different from an unproductive struggle? How do you know how long to let it go?</p> | |||
| <p>The best I can offer are my own strategies for building alignment.</p> | |||
| <p><strong>Ask and listen first.</strong> Give people a chance to think about something on their own first, even if you’ve already done a lot of your own thinking. If their thinking is aligned with yours, use their words, so that they see themselves in the work.</p> | |||
| <p><strong>Write it down.</strong> We all lead busy lives. It’s easy to forget things, especially when they’re complicated. Capturing the state of people’s thinking, even when it’s messy, and constantly keeping it in front of them helps a group build on rather than reconstruct its thinking.</p> | |||
| <p><strong>Put a stake in the ground.</strong> Stakes can be pulled out and moved, which means you don’t have to get it exactly right the first time. Don’t expect a group to align on the first try, especially if it’s about something that’s messy and complicated. Instead, get as much alignment as you can around something imperfect, move forward as much as you can, and revisit and revise based on your experience. The whole group will <a href="http://fasterthan20.com/lean/">learn as it moves</a>.</p> | |||
| <p>I use the <a href="http://fasterthan20.com/2014/02/tic-tac-toe-and-the-squirm-test-building-trust-and-shared-understanding/">“Squirm Test”</a> and the “T-shirt Test” to help me gauge how aligned a group is. Simply put, if the group makes a decision, and someone starts to squirm, that person is not fully aligned. If people believe so strongly in a decision, they’re willing or even excited about wearing it on a T-shirt, they are aligned. Continue adjusting the stakes over time until the squirming goes away and everyone is wearing the T-shirt.</p> | |||
| <p><strong>Create real-time feedback loops.</strong> Moving in alignment with others requires constant feedback. If you can’t see how your group is moving as a whole, you can’t adjust. The more real-time indicators you have (including the Squirm and T-shirt Tests) and the more transparently you work, the more likely others will be able to see and react to each other.</p> | |||
| <p><strong>Remind each other what you’re doing and why.</strong> The best thing you can do when you’re struggling is to take a step back and remind yourself of why you’re going through this process. It’s helpful to remember times when you were in alignment with others and what it took to get there. It’s also helpful to remember times when you decided to take shortcuts without being fully aligned.</p> | |||
| <h2>Moving in Alignment Is Hard</h2> | |||
| <p>I’m particularly fond of physical (also referred to as “embodied” or “somatic”) practices as a way to viscerally remind yourself of what alignment looks and feels like and what it takes to get there. Pickup basketball is certainly one form of physical practice, but it’s not for everyone, and there are lots of other great practices that are a lot easier on the body.</p> | |||
| <p>One of my favorites is a group breathing exercise I learned from <a href="https://www.linkedin.com/in/eveline-shen-a600b8b/">Eveline Shen</a>, the Executive Director of <a href="https://forwardtogether.org/">Forward Together</a>, a group that regularly uses a form of physical practice they call, <a href="https://forwardtogether.org/forward-stance/">“Courageous Practice,”</a> as a way of staying grounded and aligned. It starts by standing in a circle and taking a few deep breaths together. You then add movement to your breath, raising your hand at a right angle as you inhale, and lowering it as you exhale. The goal is to breathe in alignment with each other. It helps to have a few people step out of the circle to act as observers, so that they can see how aligned the group actually is.</p> | |||
| <p>There are lots of different variations of this exercise. You can change the orientation of people in the circle, so that some people are facing inwards and other are facing outwards. You can stand in a line or some other shape. You can designate a leader or not.</p> | |||
| <p>It turns out that the simple act of breathing in alignment as a group is hard. Practicing not only helps you get better at it, but it also helps you develop strategies for moving in alignment that can apply to activities beyond breathing.</p> | |||
| <p>As difficult as it is to achieve perfect alignment, perhaps the most important lesson from this exercise is that, when everyone is trying, people are generally very good at breathing together. “Very good” is a worthy goal for any group trying to collaborate. As singular as that one pickup basketball game was for me, I’ve had many more experiences that were very good, and each of those were joyful, satisfying, and productive.</p> | |||
| <p>Alignment is a <a href="http://fasterthan20.com/2016/04/loving-vs-hating-process/">process</a>. Set your expectations accordingly, and celebrate each victory along the way.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 39
- 0
cache/01fe9dacc4f148d6a1d10838124139b5/index.md
View File
| @@ -0,0 +1,39 @@ | |||
| title: The Art of Aligning Groups | |||
| url: http://fasterthan20.com/2018/08/the-art-of-aligning-groups/ | |||
| hash_url: 01fe9dacc4f148d6a1d10838124139b5 | |||
| <p><a href="https://www.flickr.com/photos/walhalla/24145962492/"><img data-attachment-id="2891" data-permalink="http://fasterthan20.com/2018/08/the-art-of-aligning-groups/chapelizod_murmuration/" data-orig-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg" data-orig-size="2048,1367" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="Chapelizod Murmuration" data-image-description="<p>Photo by <a href="https://www.flickr.com/photos/walhalla/24145962492/">Simon</a>. CC BY-NC-ND 2.0.</p> " data-medium-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-300x200.jpg" data-large-file="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1024x684.jpg" src="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg" alt="" class="alignnone size-full wp-image-2891" srcset="http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration.jpg 2048w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-300x200.jpg 300w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-768x513.jpg 768w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1024x684.jpg 1024w, http://fasterthan20.com/wp-content/uploads/2018/08/chapelizod_murmuration-1229x820.jpg 1229w" sizes="(max-width: 2048px) 100vw, 2048px"/></a></p> | |||
| <p>My best experience collaborating with a group happened almost 20 years ago on a basketball court. I had just recovered from a back injury and was returning to my regular pickup game for the first time in two months. To my surprise, a bunch of new people had shown up that day, and I ended up on a team with four other guys I didn’t know.</p> | |||
| <p>It didn’t matter. That day, that game, we played the most beautiful basketball I had ever experienced. It was like a dance. No one was particularly great individually, but everyone knew how to play <em>together</em>. People moved without the ball, sprinting down the floor, screening and cutting. The ball barely touched the ground as we whipped it around to each other — dribble, dribble, pass, pass, pass.</p> | |||
| <p>We were playing fast, but I felt like I was seeing things in slow motion. I would pass the ball to empty spots, and the right guy would magically materialize just as the ball got there. Every basket we made was an easy basket, and we scored them in large quantities before finally putting the other team out of its misery.</p> | |||
| <p>The final score showed that we had collaborated effectively, but it didn’t tell the whole story. It didn’t say how it <em>felt</em> to play with that team, to be in <em>flow</em> with four other people, none of whom had ever played together before. Every movement felt effortless and joyful. I felt alive. The team felt alive.</p> | |||
| <h2>Alignment Versus Agreement</h2> | |||
| <p>People often ask how I measure effective collaboration. My answer is always, “It depends. What’s the goal?” Collaboration, by definition, is working together in pursuit of a shared, bounded goal. Whether or not you achieve that goal matters. However, how everyone <em>feels</em> in pursuit of that goal also matters. Success needs to take both of those things into account.</p> | |||
| <p>I think the word, “alignment,” conveys this nuance nicely by suggesting both directionality and movement. Alignment is dynamic. It’s irrelevant if the wheels in your car are in alignment if you’re not moving. Alignment is also not binary. If the wheels in your car are not perfectly aligned, you’ll still be able to drive. It just won’t be as smooth or as efficient as it could be. The level of resistance you experience is a measure of how aligned you actually are.</p> | |||
| <p>“Alignment” is not the same thing as “agreement,” although people often conflate the two. A group might verbally agree on a destination, but its participants might still move in conflicting directions. Conversely, a group might move in perfect lock-step without ever having explicitly agreed on where it’s going or how (as was the case in my pickup game). It might even achieve this while <a href="https://en.wikipedia.org/wiki/Disagree_and_commit">explicitly disagreeing</a>.</p> | |||
| <p>This distinction is important, because it’s not necessarily hard to get a group to agree on something. One way is to make a statement that is so abstract, it’s both indisputable and meaningless. An example of something I often hear is, “We value collaboration.” Another one is, “Our goal is to better serve our customers.” Very few people would disagree with either of those statements, but by themselves, they’re too broad to mean anything. Agreement without alignment also often happens in groups with conflict-averse cultures, where people would rather assent than argue.</p> | |||
| <p><em>Being in alignment</em> is different than <em>moving in alignment</em>. If the goal is for everyone to be moving toward the same goal <a href="http://fasterthan20.com/2015/08/bring-groups-alive-by-establishing-a-rhythm/">in rhythm</a> and without resistance, then everyone must both <em>want</em> to move in alignment with everyone else and <em>be capable</em> of doing this. You achieve the former by <em>aligning</em>. You achieve the latter by <em><a href="http://fasterthan20.com/collaboration-muscles-and-mindsets/">practicing</a></em>.</p> | |||
| <p>How do you get a group into alignment? How can you tell when a group is aligned? And how can groups practice <em>moving</em> in alignment?</p> | |||
| <h2>Alignment, Not Control</h2> | |||
| <p>There is no one right way to get a group aligned. Sometimes, it just happens. More often than not, it takes work.</p> | |||
| <p>Most people seem to equate aligning as a top-down version of “getting buy-in.” In other words, someone — usually a person with positional power over everyone else — thinks really hard about the “right” way to do something, then tries to convince everyone else to go along with it with some combination of encouragement and threats, possibly integrating some feedback along the way.</p> | |||
| <p>This isn’t wrong, but it’s not the best way to motivate people, it doesn’t tap into a group’s full <a href="http://fasterthan20.com/2013/12/maximizing-collective-intelligence-means-giving-up-control/">collective intelligence</a>, and it doesn’t usually lead to great performance.</p> | |||
| <p>My philosophy with groups is that more perspectives lead to better outcomes. When it comes to <a href="http://fasterthan20.com/toolkit/goals-success-spectrum/">goals</a> and <a href="http://fasterthan20.com/diy-strategy-culture/">strategy</a> in particular, rather than one or a few people coming up with their own ideas first and having others respond or comply, I want as many people as possible to think critically about the problem at hand and to co-create the solution. This is generally messier and slower (at first), because it requires people to align around language and worldviews and to <em>struggle</em> both individually and collectively. But that struggle leads to greater ownership and agency, which ultimately leads to higher performance.</p> | |||
| <p>Alignment obviates the need for control, but it requires stomaching the messiness of aligning. While the hallmark of moving in alignment is a feeling of flow, the process of aligning can feel exactly the opposite.</p> | |||
| <h2>Building Alignment</h2> | |||
| <p>What does a productive struggle look like? What does it <em>feel</em> like? How is it different from an unproductive struggle? How do you know how long to let it go?</p> | |||
| <p>The best I can offer are my own strategies for building alignment.</p> | |||
| <p><strong>Ask and listen first.</strong> Give people a chance to think about something on their own first, even if you’ve already done a lot of your own thinking. If their thinking is aligned with yours, use their words, so that they see themselves in the work.</p> | |||
| <p><strong>Write it down.</strong> We all lead busy lives. It’s easy to forget things, especially when they’re complicated. Capturing the state of people’s thinking, even when it’s messy, and constantly keeping it in front of them helps a group build on rather than reconstruct its thinking.</p> | |||
| <p><strong>Put a stake in the ground.</strong> Stakes can be pulled out and moved, which means you don’t have to get it exactly right the first time. Don’t expect a group to align on the first try, especially if it’s about something that’s messy and complicated. Instead, get as much alignment as you can around something imperfect, move forward as much as you can, and revisit and revise based on your experience. The whole group will <a href="http://fasterthan20.com/lean/">learn as it moves</a>.</p> | |||
| <p>I use the <a href="http://fasterthan20.com/2014/02/tic-tac-toe-and-the-squirm-test-building-trust-and-shared-understanding/">“Squirm Test”</a> and the “T-shirt Test” to help me gauge how aligned a group is. Simply put, if the group makes a decision, and someone starts to squirm, that person is not fully aligned. If people believe so strongly in a decision, they’re willing or even excited about wearing it on a T-shirt, they are aligned. Continue adjusting the stakes over time until the squirming goes away and everyone is wearing the T-shirt.</p> | |||
| <p><strong>Create real-time feedback loops.</strong> Moving in alignment with others requires constant feedback. If you can’t see how your group is moving as a whole, you can’t adjust. The more real-time indicators you have (including the Squirm and T-shirt Tests) and the more transparently you work, the more likely others will be able to see and react to each other.</p> | |||
| <p><strong>Remind each other what you’re doing and why.</strong> The best thing you can do when you’re struggling is to take a step back and remind yourself of why you’re going through this process. It’s helpful to remember times when you were in alignment with others and what it took to get there. It’s also helpful to remember times when you decided to take shortcuts without being fully aligned.</p> | |||
| <h2>Moving in Alignment Is Hard</h2> | |||
| <p>I’m particularly fond of physical (also referred to as “embodied” or “somatic”) practices as a way to viscerally remind yourself of what alignment looks and feels like and what it takes to get there. Pickup basketball is certainly one form of physical practice, but it’s not for everyone, and there are lots of other great practices that are a lot easier on the body.</p> | |||
| <p>One of my favorites is a group breathing exercise I learned from <a href="https://www.linkedin.com/in/eveline-shen-a600b8b/">Eveline Shen</a>, the Executive Director of <a href="https://forwardtogether.org/">Forward Together</a>, a group that regularly uses a form of physical practice they call, <a href="https://forwardtogether.org/forward-stance/">“Courageous Practice,”</a> as a way of staying grounded and aligned. It starts by standing in a circle and taking a few deep breaths together. You then add movement to your breath, raising your hand at a right angle as you inhale, and lowering it as you exhale. The goal is to breathe in alignment with each other. It helps to have a few people step out of the circle to act as observers, so that they can see how aligned the group actually is.</p> | |||
| <p>There are lots of different variations of this exercise. You can change the orientation of people in the circle, so that some people are facing inwards and other are facing outwards. You can stand in a line or some other shape. You can designate a leader or not.</p> | |||
| <p>It turns out that the simple act of breathing in alignment as a group is hard. Practicing not only helps you get better at it, but it also helps you develop strategies for moving in alignment that can apply to activities beyond breathing.</p> | |||
| <p>As difficult as it is to achieve perfect alignment, perhaps the most important lesson from this exercise is that, when everyone is trying, people are generally very good at breathing together. “Very good” is a worthy goal for any group trying to collaborate. As singular as that one pickup basketball game was for me, I’ve had many more experiences that were very good, and each of those were joyful, satisfying, and productive.</p> | |||
| <p>Alignment is a <a href="http://fasterthan20.com/2016/04/loving-vs-hating-process/">process</a>. Set your expectations accordingly, and celebrate each victory along the way.</p> | |||
+ 741
- 0
cache/0223c2efd811be0c22cec3a29bacc3e8/index.html
View File
| @@ -0,0 +1,741 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Responsive Images Done Right: A Guide To <picture> And srcset (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Responsive Images Done Right: A Guide To <picture> And srcset (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">Source originale du contenu</a></h3> | |||
| <p><em>On Monday, we published an <a href="http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill/">article on Picturefill 2.0</a><sup class="po" id="note-1"><a href="#1">1</a></sup>, a perfect polyfill for responsive images. Today’s article complements Tim Wright’s article and explains exactly how we can use the upcoming <picture> element and srcset, with simple fallbacks for legacy browsers. There is <a href="http://timkadlec.com/2014/05/dont-wait-on-responsive-images/">no reason to wait for responsive images</a><sup class="po" id="note-2"><a href="#2">2</a></sup>; we can actually have them <a href="https://twitter.com/wilto/status/465850875102371840">very, very soon</a><sup class="po" id="note-3"><a href="#3">3</a></sup>.</em> — Ed.</p> | |||
| <blockquote> | |||
| <p>“Everything I’ve said so far could be summarized as: make pages which are adaptable.… Designing adaptable pages is designing accessible pages. And perhaps the great promise of the web, far from fulfilled as yet, is accessibility, regardless of difficulties, to information.”</p> | |||
| <p>– John Allsopp, <em><a href="http://alistapart.com/article/dao">A Dao of Web Design</a><sup class="po" id="note-4"><a href="#4">4</a></sup></em></p> | |||
| </blockquote> | |||
| <p><a href="http://www.google.com/imghp">Images</a><sup class="po" id="note-5"><a href="#5">5</a></sup> are <a href="http://mashable.com/2013/09/16/facebook-photo-uploads/">some</a><sup class="po" id="note-6"><a href="#6">6</a></sup> of the <a href="http://www.loc.gov/pictures/">most</a><sup class="po" id="note-7"><a href="#7">7</a></sup> <a href="https://www.flickr.com/commons">important</a><sup class="po" id="note-8"><a href="#8">8</a></sup> <a href="http://www.google.com/culturalinstitute/about/artproject/">pieces</a><sup class="po" id="note-9"><a href="#9">9</a></sup> of <a href="http://www.huffingtonpost.com/2012/07/10/first-photo-ever-on-the-internet-les-horribles-cernettes_n_1662823.html">information</a><sup class="po" id="note-10"><a href="#10">10</a></sup> on the <a href="http://bukk.it/look.jpg">web</a><sup class="po" id="note-11"><a href="#11">11</a></sup>, but over the web’s 25-year history, they haven’t been very adaptable at all. Everything about them has been stubbornly fixed: their size, format and crop, all set in stone by a single <code>src</code>.</p> | |||
| <p>HTML authors began to really feel these limitations when high-resolution screens and responsive layouts hit the web like a one-two punch. Authors — wanting their images to look crisp in huge layouts and on high-resolution screens — began sending larger and larger sources to everyone; the average size of an image file <a href="http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2014#bytesImg&reqImg">ballooned</a><sup class="po" id="note-12"><a href="#12">12</a></sup>; very smart people called responsive web design "<a href="http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/">unworkably slow</a><sup class="po" id="note-13"><a href="#13">13</a></sup>".</p> | |||
| <p><strong>Images have been the number one obstacle</strong> to implementing truly adaptable and performant responsive pages — pages that scale both up and down, efficiently tailoring themselves to both the constraints and the affordances of the browsing context at hand.</p> | |||
| <p>That is about to change.</p> | |||
| <p>The latest <a href="http://picture.responsiveimages.org">specification of the <code><picture></code> element</a><sup class="po" id="note-14"><a href="#14">14</a></sup> is the result of <a href="http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/">years</a><sup class="po" id="note-15"><a href="#15">15</a></sup> (<a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0121.html">years!</a><sup class="po" id="note-16"><a href="#16">16</a></sup>) of debate on how to make images adapt. It gives authors semantic ways to group multiple versions of the same image, each version having technical characteristics that make it more or less suitable for a particular user. The new specification has achieved broad consensus and is being implemented in Chrome, Opera and Firefox (<a href="http://status.modern.ie/pictureelement">maybe even Internet Explorer!</a><sup class="po" id="note-17"><a href="#17">17</a></sup>) as I type.</p> | |||
| <p>The time to start learning this stuff is now!</p> | |||
| <p>Before we get to any of the (<em>shiny! new!</em>) markup, let’s look at the relevant ways in which browsing environments vary, i.e. the ways in which we want our images to adapt.</p> | |||
| <ol> | |||
| <li>Our images need to be able to render crisply at different <code>device-pixel-ratio</code>s. We want high-resolution screens to get high-resolution images, but we don’t want to send those images to users who wouldn’t see all of those extra pixels. Let’s call this the <code>device-pixel-ratio</code> use case.</li> | |||
| <li>If our layout is fluid (i.e. responsive), then our images will need to squish and stretch to fit it. We’ll call this fluid-image use case.</li> | |||
| <li>Note that these two use cases are closely related: To solve both, we’ll want our images to be available in multiple resolutions so that they scale efficiently. We’ll call tackling both problems simultaneously the variable-sized-image use case</li> | |||
| <li>Sometimes we’ll want to adapt our images in ways that go beyond simple scaling. We might want to crop the images or even subtly alter their content. We’ll call this the art-direction use case.</li> | |||
| <li>Finally, different browsers support different image formats. We might want to send a fancy new format such as WebP to browsers that can render it, and fall back to trusty old JPEGs in browsers that don’t. We’ll call this the type-switching use case.</li> | |||
| </ol> | |||
| <p>The new <code><picture></code> specification includes features for all of these cases. Let’s look at them one by one.</p> | |||
| <p><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/viewport-selection-opt.jpg" width="500" height="245" alt="" title=""/><br/><em>Rearranging images across various resolutions is relatively easy, however, loading different images (and only them) depending on the user’s resolution is quite difficult. Well, not any more. (<a href="http://picture.responsiveimages.org/images/viewport_selection_mob_first.jpg">Image credit</a><sup class="po" id="note-18"><a href="#18">18</a></sup>)</em></p> | |||
| <h3>The <code>device-pixel-ratio</code> Use Case</h3> | |||
| <p>Let’s start simply, with a fixed-width image that we want to adapt to varying <code>device-pixel-ratio</code>s. To do this, we’ll use the first tool that the new specification gives us for grouping and describing image sources: the <code>srcset</code> attribute.</p> | |||
| <p>Say we have two versions of an image:</p> | |||
| <ul> | |||
| <li><code>small.jpg</code> (320 × 240 pixels)</li> | |||
| <li><code>large.jpg</code> (640 × 480 pixels)</li> | |||
| </ul> | |||
| <p>We want to send <code>large.jpg</code> only to users with high-resolution screens. Using <code>srcset</code>, we’d mark up our image like so:</p> | |||
| <pre><code class="language-markup"><img srcset="small.jpg 1x, large.jpg 2x" | |||
| src="small.jpg" | |||
| alt="A rad wolf" /> | |||
| </code></pre> | |||
| <p>The <code>srcset</code> attribute takes a comma-separated list of image URLs, each with an <code>x</code> descriptor stating the <code>device-pixel-ratio</code> that that file is intended for.</p> | |||
| <p>The <code>src</code> is there for browsers that don’t understand <code>srcset</code>. The <code>alt</code>, of course, is included for browsers that don’t render images at all. One element and three attributes gets us an image that looks crisp on high-resolution devices and efficiently degrades all the way down to text. Not too shabby!</p> | |||
| <h3 id="the-fluid-and-variable-sized-image-use-cases">The Fluid- And Variable-Sized-Image Use Cases <a href="#the-fluid-and-variable-sized-image-use-cases" aria-label="Link to section 'The Fluid- And Variable-Sized-Image Use Cases'" class="sr hsl">Link</a></h3> | |||
| <p>What that markup won’t do is efficiently squish and stretch our image in a fluid layout. Before addressing this fluid-image use case, we need a little background on how browsers work.</p> | |||
| <p>Image preloading is, according to Steve Souders, “<a href="http://www.stevesouders.com/blog/2013/04/26/i/">the single biggest performance improvement browsers have ever made</a><sup class="po" id="note-19"><a href="#19">19</a></sup>.” Images are often the heaviest elements on a page; loading them ASAP is in everyone’s best interest. Thus, the first thing a browser will do with a page is scan the HTML for image URLs and begin loading them. The browser does this long before it has constructed a DOM, loaded external CSS or painted a layout. Solving the fluid-image use case is tricky, then; we need the browser to pick a source before it knows the image’s rendered size.</p> | |||
| <p><strong>What a browser does know at all times is the environment it’s rendering in</strong>: the size of the viewport, the resolution of the user’s screen, that sort of thing. We use this information when we use media queries, which tailor our layouts to fit particular browsing environments.</p> | |||
| <p>Thus, to get around the preloading problem, the first <a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html">proposals</a><sup class="po" id="note-20"><a href="#20">20</a></sup> for fluid-image <a href="http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need">features</a><sup class="po" id="note-21"><a href="#21">21</a></sup> suggested attaching media queries to sources. We would base our source-picking mechanism on the size of the viewport, which the browser knows at picking-time, not on the final rendered size of the image, which it doesn’t.</p> | |||
| <p><a href="http://ericportis.com/posts/2014/srcset-sizes/"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/measuring-image-size.png" width="500" height="340" alt="" title=""/></a><sup class="po" id="note-22"><a href="#22">22</a></sup><br/><em>Dealing with responsive images turned out to be quite a nightmare. A better way to provide the browser with details about its environment is by simply telling the browser the rendered size of the image. Kind of obvious, really. (<a href="http://ericportis.com/posts/2014/srcset-sizes/">Image credit</a><sup class="po" id="note-23"><a href="#23">23</a></sup>)</em></p> | |||
| <p>As it <a href="http://ericportis.com/posts/2014/srcset-sizes/">turns out</a><sup class="po" id="note-24"><a href="#24">24</a></sup>, that’s a bad idea. While it’s technically workable, calculating the media queries needed is tedious and error-prone. A better idea is to <strong>simply tell the browser the rendered size of the image</strong>!</p> | |||
| <p>Once we tell the browser how many pixels it <em>needs</em> (via a new attribute, <code>sizes</code>) and how many pixels each of the sources <em>has</em> (via <code>w</code> descriptors in <code>srcset</code>), picking a source becomes trivial. The browser picks the smallest source that will still look reasonably crisp within its container.</p> | |||
| <p>Let’s make this concrete by developing our previous example. Suppose we now have three versions of our image:</p> | |||
| <ul> | |||
| <li><code>large.jpg</code> (1024 × 768 pixels)</li> | |||
| <li><code>medium.jpg</code> (640 × 480 pixels)</li> | |||
| <li><code>small.jpg</code> (320 × 240 pixels)</li> | |||
| </ul> | |||
| <p>And we want to place these in a flexible grid — a grid that starts out as a single column but switches to three columns in larger viewports, <a href="http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html">like this</a><sup class="po" id="note-25"><a href="#25">25</a></sup>:</p> | |||
| <p><a href="http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/wolves-picture-examples-opt.png" width="500" height="310" alt="" title=""/></a><sup class="po" id="note-26"><a href="#26">26</a></sup><br/><em>A responsive grid example. (<a href="http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html">See the demo</a><sup class="po" id="note-27"><a href="#27">27</a></sup>)</em></p> | |||
| <p>Here’s how we’d mark it up:</p> | |||
| <pre><code class="language-markup"><img srcset="large.jpg 1024w, | |||
| medium.jpg 640w, | |||
| small.jpg 320w" | |||
| sizes="(min-width: 36em) 33.3vw, | |||
| 100vw" | |||
| src="small.jpg" | |||
| alt="A rad wolf" /> | |||
| </code></pre> | |||
| <p>We’re using <code>srcset</code> again, but instead of <code>x</code> descriptors, we’re attaching <code>w</code> descriptors to our sources. These describe the actual width, in pixels, of the referenced file. So, if you “Save for Web…” at 1024 × 768 pixels, then mark up that source in <code>srcset</code> as <code>1024w</code>.</p> | |||
| <p>You’ll note that <strong>we’re specifying only image widths</strong>. Why not heights, too? The images in our layout are width-constrained; their widths are set explicitly by the CSS, but their heights are not. The vast majority of responsive images in the wild are width-constrained, too, so the specification keeps things simple by dealing only in widths. There are some <a href="https://github.com/ResponsiveImagesCG/picture-element/issues/85">good</a><sup class="po" id="note-28"><a href="#28">28</a></sup> <a href="https://github.com/ResponsiveImagesCG/picture-element/issues/86">reasons</a><sup class="po" id="note-29"><a href="#29">29</a></sup> for including heights, too — but not yet.</p> | |||
| <p>So, that’s <code>w</code> in <code>srcset</code>, which describes how many pixels each of our sources <em>has</em>. Next up, the <code>sizes</code> attribute. The <code>sizes</code> attribute tells the browser how many pixels it <em>needs</em> by describing the final rendered width of our image. Think of <code>sizes</code> as a way to give the browser a bit of information about the page’s layout a little ahead of time, so that it can pick a source before it has parsed or rendered any of the page’s CSS.</p> | |||
| <p>We do this by passing the browser a <a href="http://www.w3.org/TR/css3-values/#lengths">CSS length</a><sup class="po" id="note-30"><a href="#30">30</a></sup> that describes the image’s rendered width. CSS lengths can be either absolute (for example, <code>99px</code> or <code>16em</code>) or <a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">relative to the viewport</a><sup class="po" id="note-31"><a href="#31">31</a></sup> (<code>33.3vw</code>, as in our example). That “relative to the viewport” part is what enables images to flex.</p> | |||
| <p>If our image occupies a third of the viewport, then our <code>sizes</code> attribute should look like this:</p> | |||
| <pre><code class="language-css">sizes="33.3vw" | |||
| </code></pre> | |||
| <p>Our example isn’t quite so simple. Our layout has a breakpoint at 36 ems. When the viewport is narrower than 36 ems, the layout changes. Below that breakpoint, the image will fill 100% of the viewport’s width. How do we encode that information in our <code>sizes</code> attribute?</p> | |||
| <p>We do it by pairing media queries with lengths:</p> | |||
| <pre><code class="language-css">sizes="(min-width: 36em) 33.3vw, | |||
| 100vw" | |||
| </code></pre> | |||
| <p>This is its format:</p> | |||
| <pre><code class="language-css">sizes="[media query] [length], | |||
| [media query] [length], | |||
| etc… | |||
| [default length]" | |||
| </code></pre> | |||
| <p>The browser goes over each media query until it finds one that matches and then uses the matching query’s paired length. If no media queries match, then the browser uses the “default” length, i.e. any length it comes across that doesn’t have a paired query.</p> | |||
| <p>With both a <code>sizes</code> length and a set of sources with <code>w</code> descriptors in <code>srcset</code> to choose from, the browser has everything it needs to efficiently load an image in a fluid, responsive layout.</p> | |||
| <p>Wonderfully, <code>sizes</code> and <code>w</code> in <code>srcset</code> also give the browser enough information to adapt the image to varying <code>device-pixel-ratio</code>s. Converting the CSS length, we give it in <code>sizes</code> to CSS pixels; and, multiplying that by the user’s <code>device-pixel-ratio</code>, the browser knows the number of device pixels it needs to fill — no matter what the user’s <code>device-pixel-ratio</code> is.</p> | |||
| <p>So, while the example in our <code>device-pixel-ratio</code> use case works only for fixed-width images and covers only 1x and 2x screens, this <code>srcset</code> and <code>sizes</code> example not only covers the fluid-image use case, but also adapts to arbitrary screen densities.</p> | |||
| <p>We’ve solved both problems at once. In the parlance set out at the beginning of this article, <code>w</code> in <code>srcset</code> and <code>sizes</code> covers the variable-sized-image use case.</p> | |||
| <p>Even more wonderfully, <strong>this markup also gives the browser some wiggle room</strong>. Attaching specific browsing conditions to sources means that the browser does its picking based on a strict set of conditions. “If the screen is high-resolution,” we say to the browser, “then you must use this source.” By simply describing the resources’ dimensions with <code>w</code> in <code>srcset</code> and the area they’ll be occupying with <code>sizes</code>, we enable the browser to apply its wealth of additional knowledge about a given user’s environment to the source-picking problem. The specification allows browsers to, say, optionally load smaller sources when bandwidth is slow or expensive.</p> | |||
| <p>One more thing. In our example, the size of the image is always a simple percentage of the viewport’s width. What if our layout combined both absolute and relative lengths by, say, adding a fixed 12-em sidebar to the three-column layout, <a href="http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html">like this</a><sup class="po" id="note-32"><a href="#32">32</a></sup>?</p> | |||
| <p><a href="http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/absolute-relative-lengths-opt.png" width="500" height="271" alt="" title=""/></a><sup class="po" id="note-33"><a href="#33">33</a></sup><br/><em>A layout combines absolute and relative lengths. (<a href="http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html">See the demo</a><sup class="po" id="note-34"><a href="#34">34</a></sup>)</em></p> | |||
| <p>We’d use the <a href="http://caniuse.com/calc">surprisingly well-supported</a><sup class="po" id="note-35"><a href="#35">35</a></sup> <a href="http://dev.w3.org/csswg/css-values/#calc-notation"><code>calc()</code> function</a><sup class="po" id="note-36"><a href="#36">36</a></sup> in our <code>sizes</code> attribute.</p> | |||
| <pre><code class="language-markup">sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), | |||
| 100vw" | |||
| </code></pre> | |||
| <p>And… done!</p> | |||
| <p class="icad" id="cad-middle" data-ad-zone-id="97"/> | |||
| <h3 id="the-art-direction-use-case">The Art-Direction Use Case <a href="#the-art-direction-use-case" aria-label="Link to section 'The Art-Direction Use Case'" class="sr hsl">Link</a></h3> | |||
| <p>Now we’re cooking with gas! We’ve learned how to mark up varible-sized images that scale up and down efficiently, rendering crisply on any and all layouts, viewports and screens.</p> | |||
| <p>But what if we wanted to go further? What if we wanted to adapt more?</p> | |||
| <p>When Apple introduced the iPad Air last year, its website featured a <a href="http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_a.jpg">huge image of the device</a><sup class="po" id="note-37"><a href="#37">37</a></sup>. This might sound rather unremarkable, unless you — as web design geeks are wont to do — compulsively resized your browser window. When the viewport was short enough, the iPad did a remarkable thing: it <a href="http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_b.jpg">rotated to better fit the viewport</a><sup class="po" id="note-38"><a href="#38">38</a></sup> | |||
| !</p> | |||
| <p>We call this sort of thing “art direction.”</p> | |||
| <p>Apple art-directed its image by abusing HTML and CSS: marking up its image — which was clearly content — as an empty <code>div</code> and switching its <code>background-image</code> with CSS. The new <code><picture></code> specification allows authors to do this sort of breakpoint-based art direction entirely in HTML.</p> | |||
| <p>The specification facilitates this by layering another method of source grouping on top of <code>srcset</code>: <code><picture></code> and <code>source</code>.</p> | |||
| <p>Let’s get back to our example. Suppose that instead of letting our image fill the full width of the viewport on small screens, we crop the image square, zooming in on the most important part of the subject, and present that small square crop at a fixed size floated off to the left, leaving a lot of space for descriptive text, <a href="http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html">like this</a><sup class="po" id="note-39"><a href="#39">39</a></sup>:</p> | |||
| <p><a href="http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/wolves-descriptive-text-opt.jpg" width="500" height="392" alt="" title=""/></a><sup class="po" id="note-40"><a href="#40">40</a></sup><br/><em>An example with images combined with descriptive text. (<a href="http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html">See the demo</a><sup class="po" id="note-41"><a href="#41">41</a></sup>)</em></p> | |||
| <p>To achieve this, we’ll need a couple of additional image sources:</p> | |||
| <ul> | |||
| <li><code>cropped-small.jpg</code> (96 × 96 pixels)</li> | |||
| <li><code>cropped-large.jpg</code> (192 × 192 pixels)</li> | |||
| <li><code>small.jpg</code> (320 × 240 pixels)</li> | |||
| <li><code>medium.jpg</code> (640 × 480 pixels)</li> | |||
| <li><code>large.jpg</code> (1024 × 768 pixels)</li> | |||
| </ul> | |||
| <p>How do we mark them up? Like so:</p> | |||
| <pre><code class="language-markup"><picture> | |||
| <source media="(min-width: 36em)" | |||
| srcset="large.jpg 1024w, | |||
| medium.jpg 640w, | |||
| small.jpg 320w" | |||
| sizes="33.3vw" /> | |||
| <source srcset="cropped-large.jpg 2x, | |||
| cropped-small.jpg 1x" /> | |||
| <img src="small.jpg" alt="A rad wolf" /> | |||
| </picture> | |||
| </code></pre> | |||
| <p>This example is as complex as it gets, using every feature that we’ve covered so far. Let’s break it down.</p> | |||
| <p>The <code><picture></code> element contains two <code>source</code>s and an <code>img</code>. The <code>source</code>s represent the two separate art-directed versions of the image (the square crop and the full crop). The (required) <code>img</code> serves as our fallback. As we’ll soon discover, it does much of the actual work behind the scenes.</p> | |||
| <p>First, let’s take a close look at that first <code>source</code>:</p> | |||
| <pre><code class="language-markup"><source media="(min-width: 36em)" | |||
| srcset="large.jpg 1024w, | |||
| medium.jpg 640w, | |||
| small.jpg 320w" | |||
| sizes="33.3vw" /> | |||
| </code></pre> | |||
| <p>This <code>source</code> represents the full uncropped version of our image. We want to show the full image only in the three-column layout — that is, when the viewport is wider than 36 ems. The first attribute here, <code>media="(min-width: 36em)"</code>, makes that happen. If a query in a <code>media</code> attribute evaluates to <code>true</code>, then the browser must use that <code>source</code>; otherwise, it’s skipped.</p> | |||
| <p>The <code>source</code>’s other two attributes — <code>srcset</code> and <code>sizes</code> — are mostly copied from our previous variable-sized-image example. One difference: Because this <code>source</code> will be chosen only for the three-column layout, our <code>sizes</code> attribute only needs a single length, <code>33.3vw</code>.</p> | |||
| <p>When the viewport is narrower than 36 ems, the first <code>source</code>’s media query will evaluate to <code>false</code>, and we’d proceed to the second:</p> | |||
| <pre><code class="language-markup"><source srcset="square-large.jpg 2x, | |||
| square-small.jpg 1x" /> | |||
| </code></pre> | |||
| <p>This represents our small square crop. This version is displayed at a fixed width, but we still want it to render crisply on high-resolution screens. Thus, we’ve supplied both 1x and 2x versions and marked them up with simple <code>x</code> descriptors.</p> | |||
| <p>Lastly, we come to the surprisingly important (<em>indeed, required!</em>) <code>img</code>.</p> | |||
| <p>Any child of an <code>audio</code> or <code>video</code> element that isn’t a <code>source</code> is treated as fallback content and hidden in supporting browsers. You might, therefore, assume the same thing about the <code>img</code> here. Wrong! Users actually see the <code>img</code> element when we use <code><picture></code>. Without <code>img</code>, there’s no image; <code><picture></code> and all of its <code>source</code>s are just there to feed it a source.</p> | |||
| <p>Why? One of the main complaints about the first <code><picture></code> specification was that it reinvented the wheel, propsing an entirely new HTML media element, along the lines of <code>audio</code> and <code>video</code>, that mostly duplicated the functionality of <code>img</code>. Duplicated functionality means duplicated implementation and maintenance work — work that browser vendors weren’t keen to undertake.</p> | |||
| <p>Thus, the new specification’s reuse of <code>img</code>. The <code><picture></code> itself is invisible, a bit like a magical <code>span</code>. Its <code>source</code>s are just there for the browser to draw alternate versions of the image from. Once a source URL is chosen, that URL is fed to the <code>img</code>. Practically speaking, this means that any styles that you want to apply to your rendered image (like, say, <code>max-width: 100%</code>) need to be applied to <code>img</code>, not to <code><picture></code>.</p> | |||
| <p>OK, on to our last feature.</p> | |||
| <h3 id="the-type-switching-use-case">The Type-Switching Use Case <a href="#the-type-switching-use-case" aria-label="Link to section 'The Type-Switching Use Case'" class="sr hsl">Link</a></h3> | |||
| <p>Let’s say that, instead of doing all of this squishing, stretching and adapting to myriad viewport conditions, we simply want to give a new file format a spin and provide a fallback for non-supporting browsers. For this, we follow the pattern established by <code>audio</code> and <code>video</code>: <code>source type</code>.</p> | |||
| <pre><code class="language-markup"><picture> | |||
| <source type="image/svg" src="logo.svg" /> | |||
| <source type="image/png" src="logo.png" /> | |||
| <img src="logo.gif" alt="RadWolf, Inc." /> | |||
| </picture> | |||
| </code></pre> | |||
| <p>If the browser doesn’t understand the <code>image/svg</code> <a href="http://en.wikipedia.org/wiki/Internet_media_type">media type</a><sup class="po" id="note-42"><a href="#42">42</a></sup>, then it skips the first <code>source</code>; if it can’t make heads or tails of <code>image/png</code>, then it falls back to <code>img</code> and the GIF.</p> | |||
| <p>During the <a href="http://alistapart.com/article/pngopacity">extremely painful GIF-to-PNG transition</a><sup class="po" id="note-43"><a href="#43">43</a></sup> period, web designers would have killed for such a feature. The <code><picture></code> element gives it to us, setting the stage for new image formats to be easily adopted in the years to come.</p> | |||
| <h3 id="thats-it">That’s It! <a href="#thats-it" aria-label="Link to section 'That’s It!'" class="sr hsl">Link</a></h3> | |||
| <p>That’s everything: every feature in the new <code><picture></code> specification and the rationale behind each. All in all, <code>srcset</code>, <code>x</code>, <code>w</code>, <code>sizes</code>, <code><picture></code>, <code>source</code>, <code>media</code> and <code>type</code> give us a rich set of tools with which to make images truly adaptable — images that can (<em>finally!</em>) flow efficiently in flexible layouts and a wide range of devices.</p> | |||
| <p><strong>The specification is not yet final</strong>. The first implementations are in progress and are being staged behind experimental flags; its implementors and authors are working together to hash out the specification’s finer details on a daily basis. All of this is happening under the umbrella of the <a href="http://responsiveimages.org">Responsive Images Community Group</a><sup class="po" id="note-44"><a href="#44">44</a></sup>. If you’re interested in following along, <a href="http://www.w3.org/community/respimg/">join</a><sup class="po" id="note-45"><a href="#45">45</a></sup> the group, drop in on the <a href="http://irc.lc/w3c/respimg/newb">IRC channel</a><sup class="po" id="note-46"><a href="#46">46</a></sup>, weigh in on a <a href="https://github.com/ResponsiveImagesCG/picture-element/issues">GitHub issue</a><sup class="po" id="note-47"><a href="#47">47</a></sup> or file a new one, sign up for the <a href="http://responsiveimages.org">newsletter</a><sup class="po" id="note-48"><a href="#48">48</a></sup>, or follow the RICG <a href="http://www.twitter.com/respimg">on Twitter</a><sup class="po" id="note-49"><a href="#49">49</a></sup>. | |||
| </p><p><em>(il, al)</em></p> | |||
| <ol class="po"><li id="#1"><a href="#note-1">1 http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill/</a></li><li id="#2"><a href="#note-2">2 http://timkadlec.com/2014/05/dont-wait-on-responsive-images/</a></li><li id="#3"><a href="#note-3">3 https://twitter.com/wilto/status/465850875102371840</a></li><li id="#4"><a href="#note-4">4 http://alistapart.com/article/dao</a></li><li id="#5"><a href="#note-5">5 http://www.google.com/imghp</a></li><li id="#6"><a href="#note-6">6 http://mashable.com/2013/09/16/facebook-photo-uploads/</a></li><li id="#7"><a href="#note-7">7 http://www.loc.gov/pictures/</a></li><li id="#8"><a href="#note-8">8 https://www.flickr.com/commons</a></li><li id="#9"><a href="#note-9">9 http://www.google.com/culturalinstitute/about/artproject/</a></li><li id="#10"><a href="#note-10">10 http://www.huffingtonpost.com/2012/07/10/first-photo-ever-on-the-internet-les-horribles-cernettes_n_1662823.html</a></li><li id="#11"><a href="#note-11">11 http://bukk.it/look.jpg</a></li><li id="#12"><a href="#note-12">12 http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2014#bytesImg&reqImg</a></li><li id="#13"><a href="#note-13">13 http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/</a></li><li id="#14"><a href="#note-14">14 http://picture.responsiveimages.org</a></li><li id="#15"><a href="#note-15">15 http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/</a></li><li id="#16"><a href="#note-16">16 http://lists.w3.org/Archives/Public/public-html/2007Jul/0121.html</a></li><li id="#17"><a href="#note-17">17 http://status.modern.ie/pictureelement</a></li><li id="#18"><a href="#note-18">18 http://picture.responsiveimages.org/images/viewport_selection_mob_first.jpg</a></li><li id="#19"><a href="#note-19">19 http://www.stevesouders.com/blog/2013/04/26/i/</a></li><li id="#20"><a href="#note-20">20 http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html</a></li><li id="#21"><a href="#note-21">21 http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need</a></li><li id="#22"><a href="#note-22">22 http://ericportis.com/posts/2014/srcset-sizes/</a></li><li id="#23"><a href="#note-23">23 http://ericportis.com/posts/2014/srcset-sizes/</a></li><li id="#24"><a href="#note-24">24 http://ericportis.com/posts/2014/srcset-sizes/</a></li><li id="#25"><a href="#note-25">25 http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html</a></li><li id="#26"><a href="#note-26">26 http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html</a></li><li id="#27"><a href="#note-27">27 http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html</a></li><li id="#28"><a href="#note-28">28 https://github.com/ResponsiveImagesCG/picture-element/issues/85</a></li><li id="#29"><a href="#note-29">29 https://github.com/ResponsiveImagesCG/picture-element/issues/86</a></li><li id="#30"><a href="#note-30">30 http://www.w3.org/TR/css3-values/#lengths</a></li><li id="#31"><a href="#note-31">31 http://www.w3.org/TR/css3-values/#viewport-relative-lengths</a></li><li id="#32"><a href="#note-32">32 http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html</a></li><li id="#33"><a href="#note-33">33 http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html</a></li><li id="#34"><a href="#note-34">34 http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html</a></li><li id="#35"><a href="#note-35">35 http://caniuse.com/calc</a></li><li id="#36"><a href="#note-36">36 http://dev.w3.org/csswg/css-values/#calc-notation</a></li><li id="#37"><a href="#note-37">37 http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_a.jpg</a></li><li id="#38"><a href="#note-38">38 http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_b.jpg</a></li><li id="#39"><a href="#note-39">39 http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html</a></li><li id="#40"><a href="#note-40">40 http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html</a></li><li id="#41"><a href="#note-41">41 http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html</a></li><li id="#42"><a href="#note-42">42 http://en.wikipedia.org/wiki/Internet_media_type</a></li><li id="#43"><a href="#note-43">43 http://alistapart.com/article/pngopacity</a></li><li id="#44"><a href="#note-44">44 http://responsiveimages.org</a></li><li id="#45"><a href="#note-45">45 http://www.w3.org/community/respimg/</a></li><li id="#46"><a href="#note-46">46 http://irc.lc/w3c/respimg/newb</a></li><li id="#47"><a href="#note-47">47 https://github.com/ResponsiveImagesCG/picture-element/issues</a></li><li id="#48"><a href="#note-48">48 http://responsiveimages.org</a></li><li id="#49"><a href="#note-49">49 http://www.twitter.com/respimg</a></li></ol> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 162
- 0
cache/0223c2efd811be0c22cec3a29bacc3e8/index.md
View File
| @@ -0,0 +1,162 @@ | |||
| title: Responsive Images Done Right: A Guide To <picture> And srcset | |||
| url: http://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ | |||
| hash_url: 0223c2efd811be0c22cec3a29bacc3e8 | |||
| <p><em>On Monday, we published an <a href="http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill/">article on Picturefill 2.0</a><sup class="po" id="note-1"><a href="#1">1</a></sup>, a perfect polyfill for responsive images. Today’s article complements Tim Wright’s article and explains exactly how we can use the upcoming <picture> element and srcset, with simple fallbacks for legacy browsers. There is <a href="http://timkadlec.com/2014/05/dont-wait-on-responsive-images/">no reason to wait for responsive images</a><sup class="po" id="note-2"><a href="#2">2</a></sup>; we can actually have them <a href="https://twitter.com/wilto/status/465850875102371840">very, very soon</a><sup class="po" id="note-3"><a href="#3">3</a></sup>.</em> — Ed.</p> | |||
| <blockquote> | |||
| <p>“Everything I’ve said so far could be summarized as: make pages which are adaptable.… Designing adaptable pages is designing accessible pages. And perhaps the great promise of the web, far from fulfilled as yet, is accessibility, regardless of difficulties, to information.”</p> | |||
| <p>– John Allsopp, <em><a href="http://alistapart.com/article/dao">A Dao of Web Design</a><sup class="po" id="note-4"><a href="#4">4</a></sup></em></p> | |||
| </blockquote> | |||
| <p><a href="http://www.google.com/imghp">Images</a><sup class="po" id="note-5"><a href="#5">5</a></sup> are <a href="http://mashable.com/2013/09/16/facebook-photo-uploads/">some</a><sup class="po" id="note-6"><a href="#6">6</a></sup> of the <a href="http://www.loc.gov/pictures/">most</a><sup class="po" id="note-7"><a href="#7">7</a></sup> <a href="https://www.flickr.com/commons">important</a><sup class="po" id="note-8"><a href="#8">8</a></sup> <a href="http://www.google.com/culturalinstitute/about/artproject/">pieces</a><sup class="po" id="note-9"><a href="#9">9</a></sup> of <a href="http://www.huffingtonpost.com/2012/07/10/first-photo-ever-on-the-internet-les-horribles-cernettes_n_1662823.html">information</a><sup class="po" id="note-10"><a href="#10">10</a></sup> on the <a href="http://bukk.it/look.jpg">web</a><sup class="po" id="note-11"><a href="#11">11</a></sup>, but over the web’s 25-year history, they haven’t been very adaptable at all. Everything about them has been stubbornly fixed: their size, format and crop, all set in stone by a single <code>src</code>.</p> | |||
| <p>HTML authors began to really feel these limitations when high-resolution screens and responsive layouts hit the web like a one-two punch. Authors — wanting their images to look crisp in huge layouts and on high-resolution screens — began sending larger and larger sources to everyone; the average size of an image file <a href="http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2014#bytesImg&reqImg">ballooned</a><sup class="po" id="note-12"><a href="#12">12</a></sup>; very smart people called responsive web design "<a href="http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/">unworkably slow</a><sup class="po" id="note-13"><a href="#13">13</a></sup>".</p> | |||
| <p><strong>Images have been the number one obstacle</strong> to implementing truly adaptable and performant responsive pages — pages that scale both up and down, efficiently tailoring themselves to both the constraints and the affordances of the browsing context at hand.</p> | |||
| <p>That is about to change.</p> | |||
| <p>The latest <a href="http://picture.responsiveimages.org">specification of the <code><picture></code> element</a><sup class="po" id="note-14"><a href="#14">14</a></sup> is the result of <a href="http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/">years</a><sup class="po" id="note-15"><a href="#15">15</a></sup> (<a href="http://lists.w3.org/Archives/Public/public-html/2007Jul/0121.html">years!</a><sup class="po" id="note-16"><a href="#16">16</a></sup>) of debate on how to make images adapt. It gives authors semantic ways to group multiple versions of the same image, each version having technical characteristics that make it more or less suitable for a particular user. The new specification has achieved broad consensus and is being implemented in Chrome, Opera and Firefox (<a href="http://status.modern.ie/pictureelement">maybe even Internet Explorer!</a><sup class="po" id="note-17"><a href="#17">17</a></sup>) as I type.</p> | |||
| <p>The time to start learning this stuff is now!</p> | |||
| <p>Before we get to any of the (<em>shiny! new!</em>) markup, let’s look at the relevant ways in which browsing environments vary, i.e. the ways in which we want our images to adapt.</p> | |||
| <ol> | |||
| <li>Our images need to be able to render crisply at different <code>device-pixel-ratio</code>s. We want high-resolution screens to get high-resolution images, but we don’t want to send those images to users who wouldn’t see all of those extra pixels. Let’s call this the <code>device-pixel-ratio</code> use case.</li> | |||
| <li>If our layout is fluid (i.e. responsive), then our images will need to squish and stretch to fit it. We’ll call this fluid-image use case.</li> | |||
| <li>Note that these two use cases are closely related: To solve both, we’ll want our images to be available in multiple resolutions so that they scale efficiently. We’ll call tackling both problems simultaneously the variable-sized-image use case</li> | |||
| <li>Sometimes we’ll want to adapt our images in ways that go beyond simple scaling. We might want to crop the images or even subtly alter their content. We’ll call this the art-direction use case.</li> | |||
| <li>Finally, different browsers support different image formats. We might want to send a fancy new format such as WebP to browsers that can render it, and fall back to trusty old JPEGs in browsers that don’t. We’ll call this the type-switching use case.</li> | |||
| </ol> | |||
| <p>The new <code><picture></code> specification includes features for all of these cases. Let’s look at them one by one.</p> | |||
| <p><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/viewport-selection-opt.jpg" width="500" height="245" alt="" title=""/><br/><em>Rearranging images across various resolutions is relatively easy, however, loading different images (and only them) depending on the user’s resolution is quite difficult. Well, not any more. (<a href="http://picture.responsiveimages.org/images/viewport_selection_mob_first.jpg">Image credit</a><sup class="po" id="note-18"><a href="#18">18</a></sup>)</em></p> | |||
| <h3>The <code>device-pixel-ratio</code> Use Case</h3> | |||
| <p>Let’s start simply, with a fixed-width image that we want to adapt to varying <code>device-pixel-ratio</code>s. To do this, we’ll use the first tool that the new specification gives us for grouping and describing image sources: the <code>srcset</code> attribute.</p> | |||
| <p>Say we have two versions of an image:</p> | |||
| <ul> | |||
| <li><code>small.jpg</code> (320 × 240 pixels)</li> | |||
| <li><code>large.jpg</code> (640 × 480 pixels)</li> | |||
| </ul> | |||
| <p>We want to send <code>large.jpg</code> only to users with high-resolution screens. Using <code>srcset</code>, we’d mark up our image like so:</p> | |||
| <pre><code class="language-markup"><img srcset="small.jpg 1x, large.jpg 2x" | |||
| src="small.jpg" | |||
| alt="A rad wolf" /> | |||
| </code></pre> | |||
| <p>The <code>srcset</code> attribute takes a comma-separated list of image URLs, each with an <code>x</code> descriptor stating the <code>device-pixel-ratio</code> that that file is intended for.</p> | |||
| <p>The <code>src</code> is there for browsers that don’t understand <code>srcset</code>. The <code>alt</code>, of course, is included for browsers that don’t render images at all. One element and three attributes gets us an image that looks crisp on high-resolution devices and efficiently degrades all the way down to text. Not too shabby!</p> | |||
| <h3 id="the-fluid-and-variable-sized-image-use-cases">The Fluid- And Variable-Sized-Image Use Cases <a href="#the-fluid-and-variable-sized-image-use-cases" aria-label="Link to section 'The Fluid- And Variable-Sized-Image Use Cases'" class="sr hsl">Link</a></h3> | |||
| <p>What that markup won’t do is efficiently squish and stretch our image in a fluid layout. Before addressing this fluid-image use case, we need a little background on how browsers work.</p> | |||
| <p>Image preloading is, according to Steve Souders, “<a href="http://www.stevesouders.com/blog/2013/04/26/i/">the single biggest performance improvement browsers have ever made</a><sup class="po" id="note-19"><a href="#19">19</a></sup>.” Images are often the heaviest elements on a page; loading them ASAP is in everyone’s best interest. Thus, the first thing a browser will do with a page is scan the HTML for image URLs and begin loading them. The browser does this long before it has constructed a DOM, loaded external CSS or painted a layout. Solving the fluid-image use case is tricky, then; we need the browser to pick a source before it knows the image’s rendered size.</p> | |||
| <p><strong>What a browser does know at all times is the environment it’s rendering in</strong>: the size of the viewport, the resolution of the user’s screen, that sort of thing. We use this information when we use media queries, which tailor our layouts to fit particular browsing environments.</p> | |||
| <p>Thus, to get around the preloading problem, the first <a href="http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html">proposals</a><sup class="po" id="note-20"><a href="#20">20</a></sup> for fluid-image <a href="http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need">features</a><sup class="po" id="note-21"><a href="#21">21</a></sup> suggested attaching media queries to sources. We would base our source-picking mechanism on the size of the viewport, which the browser knows at picking-time, not on the final rendered size of the image, which it doesn’t.</p> | |||
| <p><a href="http://ericportis.com/posts/2014/srcset-sizes/"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/measuring-image-size.png" width="500" height="340" alt="" title=""/></a><sup class="po" id="note-22"><a href="#22">22</a></sup><br/><em>Dealing with responsive images turned out to be quite a nightmare. A better way to provide the browser with details about its environment is by simply telling the browser the rendered size of the image. Kind of obvious, really. (<a href="http://ericportis.com/posts/2014/srcset-sizes/">Image credit</a><sup class="po" id="note-23"><a href="#23">23</a></sup>)</em></p> | |||
| <p>As it <a href="http://ericportis.com/posts/2014/srcset-sizes/">turns out</a><sup class="po" id="note-24"><a href="#24">24</a></sup>, that’s a bad idea. While it’s technically workable, calculating the media queries needed is tedious and error-prone. A better idea is to <strong>simply tell the browser the rendered size of the image</strong>!</p> | |||
| <p>Once we tell the browser how many pixels it <em>needs</em> (via a new attribute, <code>sizes</code>) and how many pixels each of the sources <em>has</em> (via <code>w</code> descriptors in <code>srcset</code>), picking a source becomes trivial. The browser picks the smallest source that will still look reasonably crisp within its container.</p> | |||
| <p>Let’s make this concrete by developing our previous example. Suppose we now have three versions of our image:</p> | |||
| <ul> | |||
| <li><code>large.jpg</code> (1024 × 768 pixels)</li> | |||
| <li><code>medium.jpg</code> (640 × 480 pixels)</li> | |||
| <li><code>small.jpg</code> (320 × 240 pixels)</li> | |||
| </ul> | |||
| <p>And we want to place these in a flexible grid — a grid that starts out as a single column but switches to three columns in larger viewports, <a href="http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html">like this</a><sup class="po" id="note-25"><a href="#25">25</a></sup>:</p> | |||
| <p><a href="http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/wolves-picture-examples-opt.png" width="500" height="310" alt="" title=""/></a><sup class="po" id="note-26"><a href="#26">26</a></sup><br/><em>A responsive grid example. (<a href="http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html">See the demo</a><sup class="po" id="note-27"><a href="#27">27</a></sup>)</em></p> | |||
| <p>Here’s how we’d mark it up:</p> | |||
| <pre><code class="language-markup"><img srcset="large.jpg 1024w, | |||
| medium.jpg 640w, | |||
| small.jpg 320w" | |||
| sizes="(min-width: 36em) 33.3vw, | |||
| 100vw" | |||
| src="small.jpg" | |||
| alt="A rad wolf" /> | |||
| </code></pre> | |||
| <p>We’re using <code>srcset</code> again, but instead of <code>x</code> descriptors, we’re attaching <code>w</code> descriptors to our sources. These describe the actual width, in pixels, of the referenced file. So, if you “Save for Web…” at 1024 × 768 pixels, then mark up that source in <code>srcset</code> as <code>1024w</code>.</p> | |||
| <p>You’ll note that <strong>we’re specifying only image widths</strong>. Why not heights, too? The images in our layout are width-constrained; their widths are set explicitly by the CSS, but their heights are not. The vast majority of responsive images in the wild are width-constrained, too, so the specification keeps things simple by dealing only in widths. There are some <a href="https://github.com/ResponsiveImagesCG/picture-element/issues/85">good</a><sup class="po" id="note-28"><a href="#28">28</a></sup> <a href="https://github.com/ResponsiveImagesCG/picture-element/issues/86">reasons</a><sup class="po" id="note-29"><a href="#29">29</a></sup> for including heights, too — but not yet.</p> | |||
| <p>So, that’s <code>w</code> in <code>srcset</code>, which describes how many pixels each of our sources <em>has</em>. Next up, the <code>sizes</code> attribute. The <code>sizes</code> attribute tells the browser how many pixels it <em>needs</em> by describing the final rendered width of our image. Think of <code>sizes</code> as a way to give the browser a bit of information about the page’s layout a little ahead of time, so that it can pick a source before it has parsed or rendered any of the page’s CSS.</p> | |||
| <p>We do this by passing the browser a <a href="http://www.w3.org/TR/css3-values/#lengths">CSS length</a><sup class="po" id="note-30"><a href="#30">30</a></sup> that describes the image’s rendered width. CSS lengths can be either absolute (for example, <code>99px</code> or <code>16em</code>) or <a href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">relative to the viewport</a><sup class="po" id="note-31"><a href="#31">31</a></sup> (<code>33.3vw</code>, as in our example). That “relative to the viewport” part is what enables images to flex.</p> | |||
| <p>If our image occupies a third of the viewport, then our <code>sizes</code> attribute should look like this:</p> | |||
| <pre><code class="language-css">sizes="33.3vw" | |||
| </code></pre> | |||
| <p>Our example isn’t quite so simple. Our layout has a breakpoint at 36 ems. When the viewport is narrower than 36 ems, the layout changes. Below that breakpoint, the image will fill 100% of the viewport’s width. How do we encode that information in our <code>sizes</code> attribute?</p> | |||
| <p>We do it by pairing media queries with lengths:</p> | |||
| <pre><code class="language-css">sizes="(min-width: 36em) 33.3vw, | |||
| 100vw" | |||
| </code></pre> | |||
| <p>This is its format:</p> | |||
| <pre><code class="language-css">sizes="[media query] [length], | |||
| [media query] [length], | |||
| etc… | |||
| [default length]" | |||
| </code></pre> | |||
| <p>The browser goes over each media query until it finds one that matches and then uses the matching query’s paired length. If no media queries match, then the browser uses the “default” length, i.e. any length it comes across that doesn’t have a paired query.</p> | |||
| <p>With both a <code>sizes</code> length and a set of sources with <code>w</code> descriptors in <code>srcset</code> to choose from, the browser has everything it needs to efficiently load an image in a fluid, responsive layout.</p> | |||
| <p>Wonderfully, <code>sizes</code> and <code>w</code> in <code>srcset</code> also give the browser enough information to adapt the image to varying <code>device-pixel-ratio</code>s. Converting the CSS length, we give it in <code>sizes</code> to CSS pixels; and, multiplying that by the user’s <code>device-pixel-ratio</code>, the browser knows the number of device pixels it needs to fill — no matter what the user’s <code>device-pixel-ratio</code> is.</p> | |||
| <p>So, while the example in our <code>device-pixel-ratio</code> use case works only for fixed-width images and covers only 1x and 2x screens, this <code>srcset</code> and <code>sizes</code> example not only covers the fluid-image use case, but also adapts to arbitrary screen densities.</p> | |||
| <p>We’ve solved both problems at once. In the parlance set out at the beginning of this article, <code>w</code> in <code>srcset</code> and <code>sizes</code> covers the variable-sized-image use case.</p> | |||
| <p>Even more wonderfully, <strong>this markup also gives the browser some wiggle room</strong>. Attaching specific browsing conditions to sources means that the browser does its picking based on a strict set of conditions. “If the screen is high-resolution,” we say to the browser, “then you must use this source.” By simply describing the resources’ dimensions with <code>w</code> in <code>srcset</code> and the area they’ll be occupying with <code>sizes</code>, we enable the browser to apply its wealth of additional knowledge about a given user’s environment to the source-picking problem. The specification allows browsers to, say, optionally load smaller sources when bandwidth is slow or expensive.</p> | |||
| <p>One more thing. In our example, the size of the image is always a simple percentage of the viewport’s width. What if our layout combined both absolute and relative lengths by, say, adding a fixed 12-em sidebar to the three-column layout, <a href="http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html">like this</a><sup class="po" id="note-32"><a href="#32">32</a></sup>?</p> | |||
| <p><a href="http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/absolute-relative-lengths-opt.png" width="500" height="271" alt="" title=""/></a><sup class="po" id="note-33"><a href="#33">33</a></sup><br/><em>A layout combines absolute and relative lengths. (<a href="http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html">See the demo</a><sup class="po" id="note-34"><a href="#34">34</a></sup>)</em></p> | |||
| <p>We’d use the <a href="http://caniuse.com/calc">surprisingly well-supported</a><sup class="po" id="note-35"><a href="#35">35</a></sup> <a href="http://dev.w3.org/csswg/css-values/#calc-notation"><code>calc()</code> function</a><sup class="po" id="note-36"><a href="#36">36</a></sup> in our <code>sizes</code> attribute.</p> | |||
| <pre><code class="language-markup">sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), | |||
| 100vw" | |||
| </code></pre> | |||
| <p>And… done!</p> | |||
| <p class="icad" id="cad-middle" data-ad-zone-id="97"/> | |||
| <h3 id="the-art-direction-use-case">The Art-Direction Use Case <a href="#the-art-direction-use-case" aria-label="Link to section 'The Art-Direction Use Case'" class="sr hsl">Link</a></h3> | |||
| <p>Now we’re cooking with gas! We’ve learned how to mark up varible-sized images that scale up and down efficiently, rendering crisply on any and all layouts, viewports and screens.</p> | |||
| <p>But what if we wanted to go further? What if we wanted to adapt more?</p> | |||
| <p>When Apple introduced the iPad Air last year, its website featured a <a href="http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_a.jpg">huge image of the device</a><sup class="po" id="note-37"><a href="#37">37</a></sup>. This might sound rather unremarkable, unless you — as web design geeks are wont to do — compulsively resized your browser window. When the viewport was short enough, the iPad did a remarkable thing: it <a href="http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_b.jpg">rotated to better fit the viewport</a><sup class="po" id="note-38"><a href="#38">38</a></sup>!</p> | |||
| <p>We call this sort of thing “art direction.”</p> | |||
| <p>Apple art-directed its image by abusing HTML and CSS: marking up its image — which was clearly content — as an empty <code>div</code> and switching its <code>background-image</code> with CSS. The new <code><picture></code> specification allows authors to do this sort of breakpoint-based art direction entirely in HTML.</p> | |||
| <p>The specification facilitates this by layering another method of source grouping on top of <code>srcset</code>: <code><picture></code> and <code>source</code>.</p> | |||
| <p>Let’s get back to our example. Suppose that instead of letting our image fill the full width of the viewport on small screens, we crop the image square, zooming in on the most important part of the subject, and present that small square crop at a fixed size floated off to the left, leaving a lot of space for descriptive text, <a href="http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html">like this</a><sup class="po" id="note-39"><a href="#39">39</a></sup>:</p> | |||
| <p><a href="http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html"><img src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2014/05/wolves-descriptive-text-opt.jpg" width="500" height="392" alt="" title=""/></a><sup class="po" id="note-40"><a href="#40">40</a></sup><br/><em>An example with images combined with descriptive text. (<a href="http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html">See the demo</a><sup class="po" id="note-41"><a href="#41">41</a></sup>)</em></p> | |||
| <p>To achieve this, we’ll need a couple of additional image sources:</p> | |||
| <ul> | |||
| <li><code>cropped-small.jpg</code> (96 × 96 pixels)</li> | |||
| <li><code>cropped-large.jpg</code> (192 × 192 pixels)</li> | |||
| <li><code>small.jpg</code> (320 × 240 pixels)</li> | |||
| <li><code>medium.jpg</code> (640 × 480 pixels)</li> | |||
| <li><code>large.jpg</code> (1024 × 768 pixels)</li> | |||
| </ul> | |||
| <p>How do we mark them up? Like so:</p> | |||
| <pre><code class="language-markup"><picture> | |||
| <source media="(min-width: 36em)" | |||
| srcset="large.jpg 1024w, | |||
| medium.jpg 640w, | |||
| small.jpg 320w" | |||
| sizes="33.3vw" /> | |||
| <source srcset="cropped-large.jpg 2x, | |||
| cropped-small.jpg 1x" /> | |||
| <img src="small.jpg" alt="A rad wolf" /> | |||
| </picture> | |||
| </code></pre> | |||
| <p>This example is as complex as it gets, using every feature that we’ve covered so far. Let’s break it down.</p> | |||
| <p>The <code><picture></code> element contains two <code>source</code>s and an <code>img</code>. The <code>source</code>s represent the two separate art-directed versions of the image (the square crop and the full crop). The (required) <code>img</code> serves as our fallback. As we’ll soon discover, it does much of the actual work behind the scenes.</p> | |||
| <p>First, let’s take a close look at that first <code>source</code>:</p> | |||
| <pre><code class="language-markup"><source media="(min-width: 36em)" | |||
| srcset="large.jpg 1024w, | |||
| medium.jpg 640w, | |||
| small.jpg 320w" | |||
| sizes="33.3vw" /> | |||
| </code></pre> | |||
| <p>This <code>source</code> represents the full uncropped version of our image. We want to show the full image only in the three-column layout — that is, when the viewport is wider than 36 ems. The first attribute here, <code>media="(min-width: 36em)"</code>, makes that happen. If a query in a <code>media</code> attribute evaluates to <code>true</code>, then the browser must use that <code>source</code>; otherwise, it’s skipped.</p> | |||
| <p>The <code>source</code>’s other two attributes — <code>srcset</code> and <code>sizes</code> — are mostly copied from our previous variable-sized-image example. One difference: Because this <code>source</code> will be chosen only for the three-column layout, our <code>sizes</code> attribute only needs a single length, <code>33.3vw</code>.</p> | |||
| <p>When the viewport is narrower than 36 ems, the first <code>source</code>’s media query will evaluate to <code>false</code>, and we’d proceed to the second:</p> | |||
| <pre><code class="language-markup"><source srcset="square-large.jpg 2x, | |||
| square-small.jpg 1x" /> | |||
| </code></pre> | |||
| <p>This represents our small square crop. This version is displayed at a fixed width, but we still want it to render crisply on high-resolution screens. Thus, we’ve supplied both 1x and 2x versions and marked them up with simple <code>x</code> descriptors.</p> | |||
| <p>Lastly, we come to the surprisingly important (<em>indeed, required!</em>) <code>img</code>.</p> | |||
| <p>Any child of an <code>audio</code> or <code>video</code> element that isn’t a <code>source</code> is treated as fallback content and hidden in supporting browsers. You might, therefore, assume the same thing about the <code>img</code> here. Wrong! Users actually see the <code>img</code> element when we use <code><picture></code>. Without <code>img</code>, there’s no image; <code><picture></code> and all of its <code>source</code>s are just there to feed it a source.</p> | |||
| <p>Why? One of the main complaints about the first <code><picture></code> specification was that it reinvented the wheel, propsing an entirely new HTML media element, along the lines of <code>audio</code> and <code>video</code>, that mostly duplicated the functionality of <code>img</code>. Duplicated functionality means duplicated implementation and maintenance work — work that browser vendors weren’t keen to undertake.</p> | |||
| <p>Thus, the new specification’s reuse of <code>img</code>. The <code><picture></code> itself is invisible, a bit like a magical <code>span</code>. Its <code>source</code>s are just there for the browser to draw alternate versions of the image from. Once a source URL is chosen, that URL is fed to the <code>img</code>. Practically speaking, this means that any styles that you want to apply to your rendered image (like, say, <code>max-width: 100%</code>) need to be applied to <code>img</code>, not to <code><picture></code>.</p> | |||
| <p>OK, on to our last feature.</p> | |||
| <h3 id="the-type-switching-use-case">The Type-Switching Use Case <a href="#the-type-switching-use-case" aria-label="Link to section 'The Type-Switching Use Case'" class="sr hsl">Link</a></h3> | |||
| <p>Let’s say that, instead of doing all of this squishing, stretching and adapting to myriad viewport conditions, we simply want to give a new file format a spin and provide a fallback for non-supporting browsers. For this, we follow the pattern established by <code>audio</code> and <code>video</code>: <code>source type</code>.</p> | |||
| <pre><code class="language-markup"><picture> | |||
| <source type="image/svg" src="logo.svg" /> | |||
| <source type="image/png" src="logo.png" /> | |||
| <img src="logo.gif" alt="RadWolf, Inc." /> | |||
| </picture> | |||
| </code></pre> | |||
| <p>If the browser doesn’t understand the <code>image/svg</code> <a href="http://en.wikipedia.org/wiki/Internet_media_type">media type</a><sup class="po" id="note-42"><a href="#42">42</a></sup>, then it skips the first <code>source</code>; if it can’t make heads or tails of <code>image/png</code>, then it falls back to <code>img</code> and the GIF.</p> | |||
| <p>During the <a href="http://alistapart.com/article/pngopacity">extremely painful GIF-to-PNG transition</a><sup class="po" id="note-43"><a href="#43">43</a></sup> period, web designers would have killed for such a feature. The <code><picture></code> element gives it to us, setting the stage for new image formats to be easily adopted in the years to come.</p> | |||
| <h3 id="thats-it">That’s It! <a href="#thats-it" aria-label="Link to section 'That’s It!'" class="sr hsl">Link</a></h3> | |||
| <p>That’s everything: every feature in the new <code><picture></code> specification and the rationale behind each. All in all, <code>srcset</code>, <code>x</code>, <code>w</code>, <code>sizes</code>, <code><picture></code>, <code>source</code>, <code>media</code> and <code>type</code> give us a rich set of tools with which to make images truly adaptable — images that can (<em>finally!</em>) flow efficiently in flexible layouts and a wide range of devices.</p> | |||
| <p><strong>The specification is not yet final</strong>. The first implementations are in progress and are being staged behind experimental flags; its implementors and authors are working together to hash out the specification’s finer details on a daily basis. All of this is happening under the umbrella of the <a href="http://responsiveimages.org">Responsive Images Community Group</a><sup class="po" id="note-44"><a href="#44">44</a></sup>. If you’re interested in following along, <a href="http://www.w3.org/community/respimg/">join</a><sup class="po" id="note-45"><a href="#45">45</a></sup> the group, drop in on the <a href="http://irc.lc/w3c/respimg/newb">IRC channel</a><sup class="po" id="note-46"><a href="#46">46</a></sup>, weigh in on a <a href="https://github.com/ResponsiveImagesCG/picture-element/issues">GitHub issue</a><sup class="po" id="note-47"><a href="#47">47</a></sup> or file a new one, sign up for the <a href="http://responsiveimages.org">newsletter</a><sup class="po" id="note-48"><a href="#48">48</a></sup>, or follow the RICG <a href="http://www.twitter.com/respimg">on Twitter</a><sup class="po" id="note-49"><a href="#49">49</a></sup>. | |||
| </p><p><em>(il, al)</em></p> | |||
| <ol class="po"><li id="#1"><a href="#note-1">1 http://www.smashingmagazine.com/2014/05/12/picturefill-2-0-responsive-images-and-the-perfect-polyfill/</a></li><li id="#2"><a href="#note-2">2 http://timkadlec.com/2014/05/dont-wait-on-responsive-images/</a></li><li id="#3"><a href="#note-3">3 https://twitter.com/wilto/status/465850875102371840</a></li><li id="#4"><a href="#note-4">4 http://alistapart.com/article/dao</a></li><li id="#5"><a href="#note-5">5 http://www.google.com/imghp</a></li><li id="#6"><a href="#note-6">6 http://mashable.com/2013/09/16/facebook-photo-uploads/</a></li><li id="#7"><a href="#note-7">7 http://www.loc.gov/pictures/</a></li><li id="#8"><a href="#note-8">8 https://www.flickr.com/commons</a></li><li id="#9"><a href="#note-9">9 http://www.google.com/culturalinstitute/about/artproject/</a></li><li id="#10"><a href="#note-10">10 http://www.huffingtonpost.com/2012/07/10/first-photo-ever-on-the-internet-les-horribles-cernettes_n_1662823.html</a></li><li id="#11"><a href="#note-11">11 http://bukk.it/look.jpg</a></li><li id="#12"><a href="#note-12">12 http://httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Apr+1+2014#bytesImg&reqImg</a></li><li id="#13"><a href="#note-13">13 http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/</a></li><li id="#14"><a href="#note-14">14 http://picture.responsiveimages.org</a></li><li id="#15"><a href="#note-15">15 http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/</a></li><li id="#16"><a href="#note-16">16 http://lists.w3.org/Archives/Public/public-html/2007Jul/0121.html</a></li><li id="#17"><a href="#note-17">17 http://status.modern.ie/pictureelement</a></li><li id="#18"><a href="#note-18">18 http://picture.responsiveimages.org/images/viewport_selection_mob_first.jpg</a></li><li id="#19"><a href="#note-19">19 http://www.stevesouders.com/blog/2013/04/26/i/</a></li><li id="#20"><a href="#note-20">20 http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035855.html</a></li><li id="#21"><a href="#note-21">21 http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need</a></li><li id="#22"><a href="#note-22">22 http://ericportis.com/posts/2014/srcset-sizes/</a></li><li id="#23"><a href="#note-23">23 http://ericportis.com/posts/2014/srcset-sizes/</a></li><li id="#24"><a href="#note-24">24 http://ericportis.com/posts/2014/srcset-sizes/</a></li><li id="#25"><a href="#note-25">25 http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html</a></li><li id="#26"><a href="#note-26">26 http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html</a></li><li id="#27"><a href="#note-27">27 http://ericportis.com/etc/smashing-mag-picture-examples/variable-size.html</a></li><li id="#28"><a href="#note-28">28 https://github.com/ResponsiveImagesCG/picture-element/issues/85</a></li><li id="#29"><a href="#note-29">29 https://github.com/ResponsiveImagesCG/picture-element/issues/86</a></li><li id="#30"><a href="#note-30">30 http://www.w3.org/TR/css3-values/#lengths</a></li><li id="#31"><a href="#note-31">31 http://www.w3.org/TR/css3-values/#viewport-relative-lengths</a></li><li id="#32"><a href="#note-32">32 http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html</a></li><li id="#33"><a href="#note-33">33 http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html</a></li><li id="#34"><a href="#note-34">34 http://ericportis.com/etc/smashing-mag-picture-examples/absolute-and-fixed.html</a></li><li id="#35"><a href="#note-35">35 http://caniuse.com/calc</a></li><li id="#36"><a href="#note-36">36 http://dev.w3.org/csswg/css-values/#calc-notation</a></li><li id="#37"><a href="#note-37">37 http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_a.jpg</a></li><li id="#38"><a href="#note-38">38 http://ericportis.com/etc/ipad-air-art-direction/ipadair_hero_b.jpg</a></li><li id="#39"><a href="#note-39">39 http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html</a></li><li id="#40"><a href="#note-40">40 http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html</a></li><li id="#41"><a href="#note-41">41 http://ericportis.com/etc/smashing-mag-picture-examples/art-direction.html</a></li><li id="#42"><a href="#note-42">42 http://en.wikipedia.org/wiki/Internet_media_type</a></li><li id="#43"><a href="#note-43">43 http://alistapart.com/article/pngopacity</a></li><li id="#44"><a href="#note-44">44 http://responsiveimages.org</a></li><li id="#45"><a href="#note-45">45 http://www.w3.org/community/respimg/</a></li><li id="#46"><a href="#note-46">46 http://irc.lc/w3c/respimg/newb</a></li><li id="#47"><a href="#note-47">47 https://github.com/ResponsiveImagesCG/picture-element/issues</a></li><li id="#48"><a href="#note-48">48 http://responsiveimages.org</a></li><li id="#49"><a href="#note-49">49 http://www.twitter.com/respimg</a></li></ol> | |||
+ 641
- 0
cache/022aa5f71ca584e61c09e8635f77a3bc/index.html
View File
| @@ -0,0 +1,641 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>8 Reasons to Turn Down That Startup Job (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://deardesignstudent.com/8-reasons-to-turn-down-that-startup-job-1f82a00ade34"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| 8 Reasons to Turn Down That Startup Job (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://deardesignstudent.com/8-reasons-to-turn-down-that-startup-job-1f82a00ade34">Source originale du contenu</a></h3> | |||
| <p name="9a85" id="9a85" class="graf--p"><em class="markup--em markup--p-em">Q: I graduated from school this year and I’ve been looking for my first job. After interviewing around, I finally got a job offer at a small startup. How do I decide if it’s the right offer to take?</em></p> | |||
| <p name="cdbc" id="cdbc" class="graf--p">This one is easy. Don’t take it. You’re just starting your career, and a startup is the absolute <em class="markup--em markup--p-em">worst</em> place for you right now. Let me break it down:</p> | |||
| <p name="5f5c" id="5f5c" class="graf--p graf--empty"><br/></p> | |||
| <figure name="352c" id="352c" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div><figcaption class="imageCaption">Amazing angry monkey animation by Neil Sanders, <a href="http://www.neilsanders.com.au/" data-href="http://www.neilsanders.com.au/" class="markup--anchor markup--figure-anchor" rel="nofollow">who you should totally hire.</a></figcaption></figure> | |||
| <h4 name="2289" id="2289" data-align="center" class="graf--h4">1. You don’t know how to be a designer yet.</h4> | |||
| <p name="1257" id="1257" class="graf--p graf--empty"><br/></p> | |||
| <p name="eff9" id="eff9" class="graf--p">I hate to be the one to tell you this, but I promised I would never lie to you. You have absolutely no idea how to be a designer yet. You might have been the greatest design student at your school, and you still have no idea how to be a designer. At best, you’ve picked up a very strong set of formal and aesthetic skills which will serve as a foundation to become a designer. But you’ve never dealt with a client or a boss, you’ve never had to sell an idea. You’ve never dealt with having to convince your engineering team of why something was important, you’ve never learned to say no to a bad request, you’ve never had to gather requirements, and you’ve most likely never interviewed a user. Your mileage may vary, depending on where you went to school, of course.</p> | |||
| <p name="70cc" id="70cc" class="graf--p">This isn’t me being a jerk, either. At this stage, there’s no way you <em class="markup--em markup--p-em">would</em> know these things. But you want to put yourself in a position where you can learn them. And a startup, where you’ll most likely have to do all of these things, probably isn’t going to have anyone who can teach you.</p> | |||
| <p name="c5e0" id="c5e0" class="graf--p graf--empty"><br/></p> | |||
| <figure name="7bdc" id="7bdc" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="1642" id="1642" data-align="center" class="graf--h4">2. No one at that startup is going to teach you how to be a better designer.</h4> | |||
| <p name="57f4" id="57f4" class="graf--p">You will most likely be on a very small team of designers, all of them with the same experience as you. Maybe one will have been there six months longer, which means he’s making more money. And in a world where you have to watch your burn rate, he’s getting laid off first. So he’s not teaching you anything.</p> | |||
| <p name="f2f2" id="f2f2" class="graf--p">You may be looking at Silicon Valley’s new favorite game: Let’s hire 200 designers and see who sticks. Which is not unlike when the sea monkey company would send you a thousand sea monkeys, knowing that 900 would die within the first week.</p> | |||
| <p name="a504" id="a504" class="graf--p">Or, You may be the <em class="markup--em markup--p-em">only </em>designer on staff. Which means you’re either getting tacked to the marketing team or the dev team. Both of which will see you as a weird “other type” who they’ll use to meet their needs. You’ll be making buttons and display ads.</p> | |||
| <p name="2658" id="2658" class="graf--p graf--empty"><br/></p> | |||
| <p name="2e4f" id="2e4f" class="graf--p graf--empty"><br/></p> | |||
| <figure name="e457" id="e457" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="4c86" id="4c86" data-align="center" class="graf--h4">3. You need a mentor.</h4> | |||
| <p name="96b1" id="96b1" class="graf--p graf--empty"><br/></p> | |||
| <p name="b27c" id="b27c" class="graf--p">I think I’ve told you guys about my mom before. She’s a seamstress. When she was a teen, her mother (my grandmother) took her to the best seamstress in town. She convinced the seamstress to take her on as an apprentice. Over the years, she taught my mother the trade. She taught her the technical stuff, but she also taught her how to bill, how to properly charge for her work, how to get new clients. In essence, she taught her how to earn a living. And when the day came, the seamstress gave her a few choice clients from her rolodex and told her she was ready to set up shop for herself. This is the kind of relationship you should be looking for.</p> | |||
| <p name="ba68" id="ba68" class="graf--p">Humble yourself enough to be an apprentice. Find a mentor. The good ones are hard to find and aren’t usually found at startups.</p> | |||
| <p name="083d" id="083d" class="graf--p graf--empty"><br/></p> | |||
| <p name="68f5" id="68f5" class="graf--p graf--empty"><br/></p> | |||
| <figure name="9137" id="9137" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="a6a6" id="a6a6" data-align="center" class="graf--h4">4. You need to be going wider than deep right now.</h4> | |||
| <p name="a14f" id="a14f" class="graf--p graf--empty"><br/></p> | |||
| <p name="1c12" id="1c12" class="graf--p">The only problem you will learn to solve at a startup is that startup’s problem. And it may well indeed be a worthy problem to solve. But right now you need to be learning how to solve a wide variety of problems for a wide variety of people. You need to be trying different things. Dealing with different types of clients.</p> | |||
| <figure name="c87a" id="c87a" class="graf--figure graf--layoutInsetLeft"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><a href="http://muledesign.com/workshops/" data-href="http://muledesign.com/workshops/" class="graf-imageAnchor"><img class="graf-image" data-image-id="1*_A21nqbY0Pu9oWCwmWk-FQ.jpeg" data-width="300" data-height="250" src="https://cdn-images-1.medium.com/max/600/1*_A21nqbY0Pu9oWCwmWk-FQ.jpeg"/></a></div></figure> | |||
| <p name="f24d" id="f24d" class="graf--p">And that mentor we talked about? They’ll be an invaluable resource in teaching you how to deal with all of those different people. And reminding you that lessons you learned on a project a year ago are applicable to the current project in a way you hadn’t thought of.</p> | |||
| <p name="86af" id="86af" class="graf--p">I run a design studio, and on any typical day we have about a half dozen different projects running through the job. It’s never boring. We learn a little bit about this and a little bit about that. We get to find out about industries we knew nothing about. And we get to design a variety of things. Every once in a while one of our designers enjoys a project so much that she decides she wants to go focus in that area. Which is great. She’s put in her time and made her choice. And she can go off and focus in that area knowing that she has a strong general foundation.</p> | |||
| <p name="fb11" id="fb11" class="graf--p graf--empty"><br/></p> | |||
| <p name="2be0" id="2be0" class="graf--p graf--empty"><br/></p> | |||
| <figure name="0303" id="0303" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="ddc3" id="ddc3" data-align="center" class="graf--h4">5. You are not going to get rich.</h4> | |||
| <p name="438a" id="438a" class="graf--p graf--empty"><br/></p> | |||
| <p name="fd3a" id="fd3a" class="graf--p">Most startups fail. That’s just the nature of the business. And as I’m sure someone will point out in a comment, most businesses fail. In fact, if we stretch it out far enough, <em class="markup--em markup--p-em">all </em>businesses fail. But startups fail <em class="markup--em markup--p-em">fast. </em>Which means they have to move faster than they might fail. So you’re taking on more risk. And they’ll ask you to share that risk with them. Sometimes that means offering you equity, in lieu of a good salary, but more often than not these days, they’ll offer you equity <em class="markup--em markup--p-em">and </em>a large salary.</p> | |||
| <p name="3076" id="3076" class="graf--p">Do the math. You will be asked to work incredibly long hours. You will most likely need to be available to answer your email at any time of day, and you’ll probably be expected to work weekends when asked. More insidiously, you’ll be made to feel like you’re not a “team player” if you don’t dedicate yourself heart and soul to the well-being of someone else’s company. And god forbid you have a family. So do the math. Take that annual salary and break it down by the actual hours you’ll spend working. (Ask a few of the other employees how much time they spend working to get an average.)</p> | |||
| <p name="2b7c" id="2b7c" class="graf--p">And that equity? Yes, you could be one of the very few who cashes in. And I hope you are. Just know that the percentage of those that do are very very small. And you’re betting your career on it. If we’re in Vegas, I don’t take those odds.</p> | |||
| <p name="47a3" id="47a3" class="graf--p graf--empty"><br/></p> | |||
| <p name="906c" id="906c" class="graf--p graf--empty"><br/></p> | |||
| <figure name="261c" id="261c" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="384d" id="384d" data-align="center" class="graf--h4">6. Unless you thrive in chaos you will not be comfortable.</h4> | |||
| <p name="1082" id="1082" class="graf--p graf--empty"><br/></p> | |||
| <p name="cfe2" id="cfe2" class="graf--p">New companies are making it up as they go. This is not a criticism. This is a fact. And there’s a certain level of excitement in that. But you’re already busy enough trying to figure out what it means to work as a designer. You’ve got enough chaos to deal with inside your own little 4' radius. Once your own skillset is robust, then go ahead and put yourself in exciting chaotic environments. But right now you’d just be another person running around in a burning house.</p> | |||
| <p name="1ab8" id="1ab8" class="graf--p">You know that whole thing about making sure your own oxygen mask is secure before you try to help anyone else? That’s what this is about. Before you go putting yourself in a chaotic situation, make sure you’re the one who can keep their shit together. That means someone who has seen a lot, and knows what to do when something goes crazy. That’s not you yet.</p> | |||
| <p name="9218" id="9218" class="graf--p graf--empty"><br/></p> | |||
| <h4 name="aee7" id="aee7" data-align="center" class="graf--h4 graf--empty"><br/></h4> | |||
| <figure name="5d4d" id="5d4d" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="589b" id="589b" data-align="center" class="graf--h4">7. The world needs fixing, not disrupting.</h4> | |||
| <p name="1db9" id="1db9" class="graf--p graf--empty"><br/></p> | |||
| <p name="1bac" id="1bac" class="graf--p">I hate to tell you this, but right now the startup world, or at least the ones making the majority of the noise, have their heads up their own ass and don’t realize it stinks. They’re solving problems for the top 5% of the population. How can I get poor people to do my chores? How can I get people to drive me around without having to pay them health insurance? How can a drone deliver my toilet paper within 15 minutes while the person who fulfilled my order sits at her desk crying because she’s working a 15-hour day and can’t take time off to get that lump in her chest looked at. This is known as the service economy. Where entitled white boys figure out how to replicate their private school dorm experience for life.</p> | |||
| <figure name="6541" id="6541" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*MUEFB9g7B3EHNJxwNmlV5g.jpeg" data-width="400" data-height="397" src="https://cdn-images-1.medium.com/max/800/1*MUEFB9g7B3EHNJxwNmlV5g.jpeg"/></div><figcaption class="imageCaption">The service economy is nothing new. And there’s nothing disruptive about the rich getting richer.</figcaption></figure> | |||
| <p name="f459" id="f459" class="graf--p">Don’t play that game. As a newly-minted designer, I want you to consider using your skills for the betterment of society. Go find some real problems to solve. We have enough of them. Check out Code for America, or 18F, or US Digital Services. Our craft is a service that should be used to make people’s life easier. And especially those who need us most.</p> | |||
| <p name="8f24" id="8f24" class="graf--p graf--empty"><br/></p> | |||
| <figure name="a6a2" id="a6a2" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*idWl0dtU7Wyo9EMKSFqzUg.gif" data-width="250" data-height="141" src="https://cdn-images-1.medium.com/max/800/1*idWl0dtU7Wyo9EMKSFqzUg.gif"/></div></figure> | |||
| <h4 name="28c2" id="28c2" data-align="center" class="graf--h4">8. Don’t be somebody’s monkey.</h4> | |||
| <p name="b710" id="b710" class="graf--p graf--empty"><br/></p> | |||
| <p name="76cc" id="76cc" class="graf--p">Whatever you choose to do, whether you decide to take this startup job or not, I wish you luck. I commend you on entering the workforce. And I hope you take this article, and everything else you read, with a little grain of salt. Trust in your own abilities. Be confident enough stand by your ideas, and to admit when you are wrong. Look out for your own needs. Learn to say no more than you say yes. Treat people the way you wish they would treat you. And help those that come after you, like those you came before you are now helping you.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://deardesignstudent.com/8-reasons-to-turn-down-that-startup-job-1f82a00ade34">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 5
- 0
cache/022aa5f71ca584e61c09e8635f77a3bc/index.md
File diff suppressed because it is too large
View File
+ 9980
- 0
cache/02a55f4340a09188addcf4448823a985/index.html
File diff suppressed because it is too large
View File
+ 9458
- 0
cache/02a55f4340a09188addcf4448823a985/index.md
File diff suppressed because it is too large
View File
+ 626
- 0
cache/02bea22fe97283a306c5eac5d6479c3f/index.html
View File
| @@ -0,0 +1,626 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Many questions about Google's AMP (Accelerated Mobile Pages) (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.otsukare.info/2015/11/03/amp-google"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Many questions about Google's AMP (Accelerated Mobile Pages) (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.otsukare.info/2015/11/03/amp-google">Source originale du contenu</a></h3> | |||
| <p>During the last <a href="http://www.w3.org/2015/10/TPAC/schedule.html">TPAC</a> meetings (<a href="https://en.wikipedia.org/wiki/October_2015">October 2015</a>, <a href="https://en.wikipedia.org/wiki/Sapporo">Sapporo</a>), Google <a href="http://www.w3.org/2015/10/28-amp-minutes">convened</a> during the unconference about <a href="https://www.ampproject.org/">AMP</a> (Accelerated Mobile Pages), their new project. Jeremy Keith has a <a href="https://adactio.com/journal/9646">very good blog post</a> about it.</p> | |||
| <blockquote> | |||
| <p>Rather than creating a proprietary format from scratch, it mandates a subset of HTML…with some proprietary elements thrown in (or, to use the more diplomatic parlance of the extensible web, custom elements).</p> | |||
| </blockquote> | |||
| <p>I have a similar feeling about it than Jeremy. Based on a nascent technology, custom elements, Google will probably have the leverage for forcing people into these new elements. </p> | |||
| <h3>AMP markup</h3> | |||
| <p>Basically Google is trying to get Publishers to have a set of limited elements for increasing performances on the Web and more specifically on mobile. A way to promote the static Web, but more on that later. Alex <a href="https://infrequently.org/15/amp-up/demo/amp-shell-demo.html">made a demo page</a> on his Web site.</p> | |||
| <p>You can discover the list of scripts to create the elements on the fly. </p> | |||
| <div class="highlight"><pre><span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-audio"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-audio-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-anim"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-anim-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-carousel"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-carousel-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-iframe"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-iframe-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-image-lightbox"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-instagram"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-instagram-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-fit-text"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-twitter"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-twitter-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-youtube"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-youtube-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><style>body</span> <span class="p">{</span><span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="p">}</span><span class="nt"></style></span> | |||
| <span class="nt"><noscript><style>body</span> <span class="p">{</span><span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">}</span><span class="nt"></style></noscript></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0.js"</span><span class="nt">></script></span> | |||
| </pre></div> | |||
| <p>And in the HTML Markup we can see things like:</p> | |||
| <div class="highlight"><pre><span class="nt"><amp</span><span class="na">-img</span> <span class="na">src=</span><span class="s">"https://www.ampproject.org/how-it-works/malte.jpg"</span> | |||
| <span class="na">id=</span><span class="s">"author-avatar"</span> <span class="na">placeholder</span> | |||
| <span class="na">height=</span><span class="s">"50"</span> <span class="na">width=</span><span class="s">"50"</span> <span class="na">alt=</span><span class="s">"Malte Ubl"</span><span class="nt">></span> | |||
| <span class="err"><</span>/amp-img> | |||
| </pre></div> | |||
| <h2>Pull Requests and Governance</h2> | |||
| <p>In return, it raises a lot of questions about the freedom for other people outside of Google of creating more elements. The answer given about the governance of what goes in and out of the list of elements has been avoided or more exactly <a href="https://plus.google.com/+ChrisWilson/posts">Chris Wilson</a> said:</p> | |||
| <blockquote> | |||
| <p>Like any other project. <a href="https://github.com/ampproject/amphtml/pulls">Pull requests</a>.</p> | |||
| </blockquote> | |||
| <p>To the credits of Chris Wilson, Alex Russel and Dan Brickley (poor them), the project is not coming from them but from the Google Search team who was not here to defend their own project. I feel their pain in having to deal with this hot potato. You can read the <a href="http://www.w3.org/2015/10/28-amp-minutes">archived minutes</a> of the meeting.</p> | |||
| <p><strong>Pull Requests are not governance</strong>. It's a geek curtain to avoid talking about the real issues. The <a href="https://github.com/ampproject/amphtml/blob/master/GOVERNANCE.md">governance</a> comes into play when you know who decides to merge (or deny) the pull request and why it was done based on which criteria. So that would be very cool to clarify these aspects of the project. From the current <a href="https://github.com/ampproject/amphtml/blob/master/GOVERNANCE.md">governance</a> rules: </p> | |||
| <blockquote> | |||
| <p>In the event there are no Core Committers, Google Inc. will appoint one.</p> | |||
| </blockquote> | |||
| <p>Interesting question here. What's happening if Chrome team starts to implement natively the elements sanctified by the Google's AMP Project? What does it mean for other browsers in forcing them to adopt the same elements? <a href="http://www.otsukare.info/2012/02/15/vendor-extensions-been-there-done-that">Vendor extensions circa 1995</a>.</p> | |||
| <h2>Blocking Everything and Web Readability</h2> | |||
| <p>I <a href="http://www.w3.org/2015/10/28-amp-minutes">asked</a>:</p> | |||
| <blockquote> | |||
| <p>What's in it for Google.</p> | |||
| </blockquote> | |||
| <p>To which Chris replied:</p> | |||
| <blockquote> | |||
| <p>Google wants the web to be fast. </p> | |||
| </blockquote> | |||
| <p>This is true for everyone, every player on the Web. So I tried to ask again the question. This time, Dan Brickly answered:</p> | |||
| <blockquote> | |||
| <p>When the web sucks we suck</p> | |||
| </blockquote> | |||
| <p>Yeah⦠still true for everyone. So it's not really an answer. They said at the beginning it was coming from the Google Search team <strong>and</strong> they were targeting publishers. They also said during the meeting that it was not hard to convince Web developers about the performance issues, but Web developers didn't have enough power to change the mind of business people on not adding yet another tracker. As someone else said during the meeting, this is more of psychological event to help people move forward with optimization. This is indeed a possibility. What I foresee is that business people once they learn custom elements == performance, they will go back to their old habits and ask the developers to add custom elements trackers. And we go round again about the governance and the impact that Google has potentially on the project through deciding what is valid AMPed pages and how it <strong>affects their SEO</strong>.</p> | |||
| <p>And here maybe is the start of an answer. For the last couple of weeks, I have started to browse blocking everything by default with <a href="https://www.ublock.org/">uBlock origin</a>. Here is the rendering of the same page with blocking everything and not blocking anything in Firefox. An <a href="http://fortune.com/2015/11/01/brighton-tech-hub">article</a> in Fortune Magazine that Jeremy Keith talked about recently.</p> | |||
| <p><img alt="Fortune Magazine in two different modes" src="http://www.otsukare.info/images/20151103-fortune-firefox.jpg"/></p> | |||
| <p>The main difference is not that much about the style, but about the content. Without JavaScript the content is simply not loaded and some links do not exist at all. It means that the content is very hard to both:</p> | |||
| <ol> | |||
| <li>index</li> | |||
| <li>browse</li> | |||
| </ol> | |||
| <p>Remember AMP is coming from Google <strong>Search</strong> team. Heavy pages in JavaScript requires more CPU, more time, and a JS enabled bot to index pages. The more time you spend on one page, the less time for other pages and being able to index the full Web. The <strong>core business of Google is to know everything about everything</strong> so they can <strong>sell relevant ads</strong>. I <strong>imagine</strong> the decrease in performances of Web pages directly hinders the business model of Google.</p> | |||
| <p>This is all supposition. Nothing in the meeting minutes or discussions says so. So to take with a grain of salt.</p> | |||
| <h2>Future of AMP</h2> | |||
| <p>After the meeting, I was still confused and I was wondering why the project was not brought to the W3C WebPlatform, so if there was really an issue to solve about Web Performance (<strong>and there is</strong>), the idea of doing that in cooperation with other people would be better.</p> | |||
| <p>Improving the performance of the Web is a good goal, but I still don't have the feeling that AMP, <strong>as it is proposed today</strong>, is a good way to achieve this in a collegial and cooperative way. Google has too much power already (IBM or Microsoft of the past). So any projects of this nature should be carefully handled.</p> | |||
| <p>Thanks to Alex, Chris and Dan for answering the question to the best they could.</p> | |||
| <p>Otsukare!</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.otsukare.info/2015/11/03/amp-google">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 74
- 0
cache/02bea22fe97283a306c5eac5d6479c3f/index.md
View File
| @@ -0,0 +1,74 @@ | |||
| title: Many questions about Google's AMP (Accelerated Mobile Pages) | |||
| url: http://www.otsukare.info/2015/11/03/amp-google | |||
| hash_url: 02bea22fe97283a306c5eac5d6479c3f | |||
| <p>During the last <a href="http://www.w3.org/2015/10/TPAC/schedule.html">TPAC</a> meetings (<a href="https://en.wikipedia.org/wiki/October_2015">October 2015</a>, <a href="https://en.wikipedia.org/wiki/Sapporo">Sapporo</a>), Google <a href="http://www.w3.org/2015/10/28-amp-minutes">convened</a> during the unconference about <a href="https://www.ampproject.org/">AMP</a> (Accelerated Mobile Pages), their new project. Jeremy Keith has a <a href="https://adactio.com/journal/9646">very good blog post</a> about it.</p> | |||
| <blockquote> | |||
| <p>Rather than creating a proprietary format from scratch, it mandates a subset of HTML…with some proprietary elements thrown in (or, to use the more diplomatic parlance of the extensible web, custom elements).</p> | |||
| </blockquote> | |||
| <p>I have a similar feeling about it than Jeremy. Based on a nascent technology, custom elements, Google will probably have the leverage for forcing people into these new elements. </p> | |||
| <h3>AMP markup</h3> | |||
| <p>Basically Google is trying to get Publishers to have a set of limited elements for increasing performances on the Web and more specifically on mobile. A way to promote the static Web, but more on that later. Alex <a href="https://infrequently.org/15/amp-up/demo/amp-shell-demo.html">made a demo page</a> on his Web site.</p> | |||
| <p>You can discover the list of scripts to create the elements on the fly. </p> | |||
| <div class="highlight"><pre><span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-audio"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-audio-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-anim"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-anim-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-carousel"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-carousel-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-iframe"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-iframe-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-image-lightbox"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-instagram"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-instagram-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-fit-text"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-twitter"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-twitter-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">custom-element=</span><span class="s">"amp-youtube"</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0/amp-youtube-0.1.js"</span><span class="nt">></script></span> | |||
| <span class="nt"><style>body</span> <span class="p">{</span><span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="p">}</span><span class="nt"></style></span> | |||
| <span class="nt"><noscript><style>body</span> <span class="p">{</span><span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">}</span><span class="nt"></style></noscript></span> | |||
| <span class="nt"><script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"https://cdn.ampproject.org/v0.js"</span><span class="nt">></script></span> | |||
| </pre></div> | |||
| <p>And in the HTML Markup we can see things like:</p> | |||
| <div class="highlight"><pre><span class="nt"><amp</span><span class="na">-img</span> <span class="na">src=</span><span class="s">"https://www.ampproject.org/how-it-works/malte.jpg"</span> | |||
| <span class="na">id=</span><span class="s">"author-avatar"</span> <span class="na">placeholder</span> | |||
| <span class="na">height=</span><span class="s">"50"</span> <span class="na">width=</span><span class="s">"50"</span> <span class="na">alt=</span><span class="s">"Malte Ubl"</span><span class="nt">></span> | |||
| <span class="err"><</span>/amp-img> | |||
| </pre></div> | |||
| <h2>Pull Requests and Governance</h2> | |||
| <p>In return, it raises a lot of questions about the freedom for other people outside of Google of creating more elements. The answer given about the governance of what goes in and out of the list of elements has been avoided or more exactly <a href="https://plus.google.com/+ChrisWilson/posts">Chris Wilson</a> said:</p> | |||
| <blockquote> | |||
| <p>Like any other project. <a href="https://github.com/ampproject/amphtml/pulls">Pull requests</a>.</p> | |||
| </blockquote> | |||
| <p>To the credits of Chris Wilson, Alex Russel and Dan Brickley (poor them), the project is not coming from them but from the Google Search team who was not here to defend their own project. I feel their pain in having to deal with this hot potato. You can read the <a href="http://www.w3.org/2015/10/28-amp-minutes">archived minutes</a> of the meeting.</p> | |||
| <p><strong>Pull Requests are not governance</strong>. It's a geek curtain to avoid talking about the real issues. The <a href="https://github.com/ampproject/amphtml/blob/master/GOVERNANCE.md">governance</a> comes into play when you know who decides to merge (or deny) the pull request and why it was done based on which criteria. So that would be very cool to clarify these aspects of the project. From the current <a href="https://github.com/ampproject/amphtml/blob/master/GOVERNANCE.md">governance</a> rules: </p> | |||
| <blockquote> | |||
| <p>In the event there are no Core Committers, Google Inc. will appoint one.</p> | |||
| </blockquote> | |||
| <p>Interesting question here. What's happening if Chrome team starts to implement natively the elements sanctified by the Google's AMP Project? What does it mean for other browsers in forcing them to adopt the same elements? <a href="http://www.otsukare.info/2012/02/15/vendor-extensions-been-there-done-that">Vendor extensions circa 1995</a>.</p> | |||
| <h2>Blocking Everything and Web Readability</h2> | |||
| <p>I <a href="http://www.w3.org/2015/10/28-amp-minutes">asked</a>:</p> | |||
| <blockquote> | |||
| <p>What's in it for Google.</p> | |||
| </blockquote> | |||
| <p>To which Chris replied:</p> | |||
| <blockquote> | |||
| <p>Google wants the web to be fast. </p> | |||
| </blockquote> | |||
| <p>This is true for everyone, every player on the Web. So I tried to ask again the question. This time, Dan Brickly answered:</p> | |||
| <blockquote> | |||
| <p>When the web sucks we suck</p> | |||
| </blockquote> | |||
| <p>Yeah⦠still true for everyone. So it's not really an answer. They said at the beginning it was coming from the Google Search team <strong>and</strong> they were targeting publishers. They also said during the meeting that it was not hard to convince Web developers about the performance issues, but Web developers didn't have enough power to change the mind of business people on not adding yet another tracker. As someone else said during the meeting, this is more of psychological event to help people move forward with optimization. This is indeed a possibility. What I foresee is that business people once they learn custom elements == performance, they will go back to their old habits and ask the developers to add custom elements trackers. And we go round again about the governance and the impact that Google has potentially on the project through deciding what is valid AMPed pages and how it <strong>affects their SEO</strong>.</p> | |||
| <p>And here maybe is the start of an answer. For the last couple of weeks, I have started to browse blocking everything by default with <a href="https://www.ublock.org/">uBlock origin</a>. Here is the rendering of the same page with blocking everything and not blocking anything in Firefox. An <a href="http://fortune.com/2015/11/01/brighton-tech-hub">article</a> in Fortune Magazine that Jeremy Keith talked about recently.</p> | |||
| <p><img alt="Fortune Magazine in two different modes" src="http://www.otsukare.info/images/20151103-fortune-firefox.jpg"/></p> | |||
| <p>The main difference is not that much about the style, but about the content. Without JavaScript the content is simply not loaded and some links do not exist at all. It means that the content is very hard to both:</p> | |||
| <ol> | |||
| <li>index</li> | |||
| <li>browse</li> | |||
| </ol> | |||
| <p>Remember AMP is coming from Google <strong>Search</strong> team. Heavy pages in JavaScript requires more CPU, more time, and a JS enabled bot to index pages. The more time you spend on one page, the less time for other pages and being able to index the full Web. The <strong>core business of Google is to know everything about everything</strong> so they can <strong>sell relevant ads</strong>. I <strong>imagine</strong> the decrease in performances of Web pages directly hinders the business model of Google.</p> | |||
| <p>This is all supposition. Nothing in the meeting minutes or discussions says so. So to take with a grain of salt.</p> | |||
| <h2>Future of AMP</h2> | |||
| <p>After the meeting, I was still confused and I was wondering why the project was not brought to the W3C WebPlatform, so if there was really an issue to solve about Web Performance (<strong>and there is</strong>), the idea of doing that in cooperation with other people would be better.</p> | |||
| <p>Improving the performance of the Web is a good goal, but I still don't have the feeling that AMP, <strong>as it is proposed today</strong>, is a good way to achieve this in a collegial and cooperative way. Google has too much power already (IBM or Microsoft of the past). So any projects of this nature should be carefully handled.</p> | |||
| <p>Thanks to Alex, Chris and Dan for answering the question to the best they could.</p> | |||
| <p>Otsukare!</p> | |||
+ 575
- 0
cache/02d33333881215df45f6af30987c2395/index.html
View File
| @@ -0,0 +1,575 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>La tragédie des communs était un mythe (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://lejournal.cnrs.fr/billets/la-tragedie-des-communs-etait-un-mythe"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| La tragédie des communs était un mythe (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://lejournal.cnrs.fr/billets/la-tragedie-des-communs-etait-un-mythe">Source originale du contenu</a></h3> | |||
| <p class="billet-chapo resize-chapo-contenu"> | |||
| La propriété commune d’une ressource conduit nécessairement à la ruine de celle-ci, concluait en 1968 un biologiste dans la revue Science. Son article, « La tragédie des communs », a façonné les raisonnements économiques et politiques de ces dernières décennies. L’historien Fabien Locher nous expose les enjeux de ce débat et en souligne les limites dans le cadre d’une pensée de l’environnement. | |||
| </p> | |||
| <p>Décembre 1968 : le biologiste américain Garrett Hardin (1915-2003) publie l’un des articles les plus influents de l’histoire de la pensée environnementale<a class="see-footnote" id="footnoteref1_pt0km5p" title=" 1243-1248." href="#footnote1_pt0km5p">1</a>. Il décrit, dans la <a href="http://science.sciencemag.org/content/162/3859/1243.full" target="_blank">revue <em>Science</em></a>, un mécanisme social et écologique qu’il nomme la « tragédie des communs ». Le concept va rapidement faire florès, tant au sein des cercles académiques que des médias, des milieux écologistes, des administrations, du personnel politique. Les uns et les autres y trouvent une justification scientifique à une gestion étatique ou (surtout) à une privatisation des ressources et des écosystèmes. Or, le recul historique et l’avancée des connaissances nous montrent aujourd’hui ce raisonnement pour ce qu’il est : une vue de l’esprit, déconnectée des réalités concrètes et biaisée par une vision très idéologique du monde social.<br/> | |||
| </p> | |||
| <h2><strong>L’expérience du pâturage</strong></h2> | |||
| <p>Le raisonnement du biologiste se fonde sur une expérience de pensée. Considérons, dit Hardin, un pâturage possédé en commun par des éleveurs. Chacun y fait paître ses vaches. Que se passe-t-il lorsqu’un éleveur achète une nouvelle bête au marché, et la rajoute sur le pâturage commun ? Une fois engraissée, il peut la vendre et récolter une certaine somme. Il s’enrichit de +1.</p> | |||
| <p class="citation left">Même s’ils sont conscients de la catastrophe à venir, explique Hardin, les éleveurs sont pris dans une logique inexorable, qui les conduit à détruire la ressource qui les fait vivre.</p> | |||
| <p>Toutefois, ce n’est pas tout : en ajoutant une vache au pâturage, il exploite un peu plus ses ressources en herbe. Donc chaque vache a un peu moins de nourriture et maigrit un peu. Mais – et c’est le point crucial – cet effet négatif est partagé entre toutes les vaches, alors que la vente de la vache supplémentaire ne profite qu’à son propriétaire. Ce dernier gagne +1 mais perd seulement une fraction de -1. Son bénéfice est toujours supérieur à sa perte. Il a donc toujours intérêt à rajouter une bête.</p> | |||
| <p> | |||
| Mais d’ajout en ajout, le pâturage est surexploité et finalement détruit. Même s’ils sont conscients de la catastrophe à venir, explique Hardin, les éleveurs sont pris dans une logique inexorable, qui les conduit à détruire la ressource qui les fait vivre. Jusqu’au bord de l’abîme, ils ont intérêt à tirer profit de l’ajout d’une nouvelle bête. Si le biologiste a choisi le terme de « tragédie », c’est pour insister sur cette idée d’enchaînement inéluctable, comme dans la tragédie grecque.</p> | |||
| <p>La conclusion est sans appel : il y a incompatibilité entre la propriété commune d’une ressource et sa durabilité. Pour éviter la destruction, assène Hardin, il n’y a que deux solutions : soit la diviser en parcelles possédées par des acteurs individuels, soit la faire gérer par une administration supérieure. C’est la propriété privée ou l’État.<br/> | |||
| </p> | |||
| <p><img src="https://lejournal.cnrs.fr/sites/default/files/styles/asset_image_full/public/assets/images/rea_250858_038_72dpi.jpg?itok=E0IKsMku" alt="" title=" ©John Gundlach/HH-REA"/> | |||
| <p> | |||
| Selon le raisonnement de Garrett Hardin, la possession en commun d’un pâturage par des éleveurs exploitant individuellement leurs vaches finira toujours par épuiser la ressource naturelle. Le biologiste en déduira deux alternatives : la division en lots privés ou l’appropriation de l'ensemble par l’État. | |||
| </p></p> | |||
| <h2><strong>État contre propriété privée</strong></h2> | |||
| <p>L’impact de ce raisonnement a été immense. La pensée économique a renforcé cette influence en associant l’expression « tragédie des communs » et l’image du pâturage à des raisonnements analogues, mais plus sophistiqués, relevant de la microéconomie ou de l’économie des « externalités ».<br/> | |||
| </p> | |||
| <p class="citation left">Avec l’essor du néolibéralisme, la « tragédie des communs » va être rapidement simplifiée sous la forme d’un plaidoyer pour la seule propriété privée.</p> | |||
| <p>L’une des raisons de ce succès tient, au moins au départ, à la conclusion binaire de Hardin. Elle peut en effet être invoquée à la fois par les partisans de l’intervention étatique et par ceux prônant un recours privilégié au marché. Néanmoins, avec l’essor du néolibéralisme comme école de pensée et force sociopolitique, la « tragédie des communs » va être rapidement simplifiée sous la forme d’un plaidoyer pour la seule propriété privée.</p> | |||
| <p>Dans les années 1980 et 1990, le récit du pâturage hardinien est populaire au sein des administrations américaines, des institutions internationales et des firmes promouvant les privatisations et le « free-market environmentalism ». Le raisonnement est appliqué aux ressources forestières, aux bassins hydriques, aux terres agricoles, mais aussi à l’atmosphère ou aux ressources marines, auxquels il s’agit d’étendre des logiques d’appropriation passant par la privatisation ou la création de marchés de droits d’usage.</p> | |||
| <h2><strong>Une erreur historique et conceptuelle</strong></h2> | |||
| <p>Pourtant, ces décennies sont aussi celles d’une profonde remise en cause du raisonnement – qui fut critiqué dès l’origine. D’abord, parce qu’il se fonde sur une modélisation très peu crédible des acteurs. En effet, le raisonnement ne tient que si l’on suppose qu’on a affaire à des éleveurs n’agissant qu’en fonction d’un intérêt individuel étroit, réduit au gain financier. Ces mêmes éleveurs, on les dirait aussi privés de langage, car ils sont incapables de communiquer pour créer des formes d’organisation régulant l’exploitation du pâturage. Cela renvoie à une erreur historique et conceptuelle grossière de Hardin. Il confond en effet ce qu’il appelle des « communs » (<em>commons</em>) avec des situations de libre accès où tout le monde peut se servir à sa guise. Or, le terme de « communs » recouvre tout autre chose : il désigne des institutions grâce auxquelles des communautés ont géré, et gèrent encore aujourd’hui, des ressources communes partout dans le monde, et souvent de façon très durable. Il peut s’agir de pâtures mais aussi de forêts, de champs, de tourbières, de zones humides… souvent indispensables à leur survie.<br/> | |||
| <br/> | |||
| La « tragédie des communs » nie par avance l’efficacité de ces organisations, en assimilant la bonne gestion avec l’État ou la privatisation. Or, depuis les années 1970, les sciences sociales ont documenté empiriquement des centaines de cas de communautés présentes ou passées gérant durablement leurs ressources sous le régime de la propriété commune. La politiste Elinor Ostrom (1933-2012) obtiendra le prix Nobel d’économie, en 2009, pour son étude des systèmes de règles organisant ces communs. Le raisonnement de Hardin appartient aujourd’hui au passé. Ce qui n’empêche pas sa rémanence dans certains discours médiatiques, militants ou politiques.<br/> | |||
| </p> | |||
| <p><img src="https://lejournal.cnrs.fr/sites/default/files/styles/asset_image_full/public/assets/images/000_par2941662_72dpi.jpg?itok=zQJMfRco" alt="" title=" ©PONTUS LUNDAHL / SCANPIX SWEDEN / AFP "/> | |||
| <p>La politiste américaine Elinor Ostrom a reçu le prix Nobel des sciences économiques le 10 décembre 2009, «pour avoir démontré comment les biens communs peuvent être efficacement gérés par des associations d'usagers». | |||
| </p> | |||
| <h2><strong>Une pensée malthusienne</strong></h2> | |||
| <p>Ce qui a aussi été perdu de vue en route, c’est le but que visait Hardin dans son article de 1968. Celui-ci est un biologiste, mais avant tout un militant fervent de la cause néomalthusienne. Son article vise surtout à dénoncer le mécanisme irrépressible qui pousserait les individus à se reproduire sans frein, jusqu’à détruire les ressources naturelles. Dans sa métaphore, les bêtes que les éleveurs rajoutent sans cesse au pâturage, ce sont aussi… les enfants de ces mêmes éleveurs, qui ponctionnent toujours plus les richesses communes. Et c’est pourquoi il recommandait, là aussi, deux solutions : soit un contrôle de l’État sur la reproduction humaine, soit la création de « droits à enfanter » monétisables et échangeables. Un mélange d’État coercitif et d’idéologie de marché caractéristique de cette pensée de guerre froide que fut la (soi-disant) « tragédie des communs ». | |||
| </p></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://lejournal.cnrs.fr/billets/la-tragedie-des-communs-etait-un-mythe">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 39
- 0
cache/02d33333881215df45f6af30987c2395/index.md
View File
| @@ -0,0 +1,39 @@ | |||
| title: La tragédie des communs était un mythe | |||
| url: https://lejournal.cnrs.fr/billets/la-tragedie-des-communs-etait-un-mythe | |||
| hash_url: 02d33333881215df45f6af30987c2395 | |||
| <p class="billet-chapo resize-chapo-contenu"> | |||
| La propriété commune d’une ressource conduit nécessairement à la ruine de celle-ci, concluait en 1968 un biologiste dans la revue Science. Son article, « La tragédie des communs », a façonné les raisonnements économiques et politiques de ces dernières décennies. L’historien Fabien Locher nous expose les enjeux de ce débat et en souligne les limites dans le cadre d’une pensée de l’environnement. | |||
| </p> | |||
| <p>Décembre 1968 : le biologiste américain Garrett Hardin (1915-2003) publie l’un des articles les plus influents de l’histoire de la pensée environnementale<a class="see-footnote" id="footnoteref1_pt0km5p" title=" 1243-1248." href="#footnote1_pt0km5p">1</a>. Il décrit, dans la <a href="http://science.sciencemag.org/content/162/3859/1243.full" target="_blank">revue <em>Science</em></a>, un mécanisme social et écologique qu’il nomme la « tragédie des communs ». Le concept va rapidement faire florès, tant au sein des cercles académiques que des médias, des milieux écologistes, des administrations, du personnel politique. Les uns et les autres y trouvent une justification scientifique à une gestion étatique ou (surtout) à une privatisation des ressources et des écosystèmes. Or, le recul historique et l’avancée des connaissances nous montrent aujourd’hui ce raisonnement pour ce qu’il est : une vue de l’esprit, déconnectée des réalités concrètes et biaisée par une vision très idéologique du monde social.<br/> | |||
| </p> | |||
| <h2><strong>L’expérience du pâturage</strong></h2> | |||
| <p>Le raisonnement du biologiste se fonde sur une expérience de pensée. Considérons, dit Hardin, un pâturage possédé en commun par des éleveurs. Chacun y fait paître ses vaches. Que se passe-t-il lorsqu’un éleveur achète une nouvelle bête au marché, et la rajoute sur le pâturage commun ? Une fois engraissée, il peut la vendre et récolter une certaine somme. Il s’enrichit de +1.</p> | |||
| <p class="citation left">Même s’ils sont conscients de la catastrophe à venir, explique Hardin, les éleveurs sont pris dans une logique inexorable, qui les conduit à détruire la ressource qui les fait vivre.</p> | |||
| <p>Toutefois, ce n’est pas tout : en ajoutant une vache au pâturage, il exploite un peu plus ses ressources en herbe. Donc chaque vache a un peu moins de nourriture et maigrit un peu. Mais – et c’est le point crucial – cet effet négatif est partagé entre toutes les vaches, alors que la vente de la vache supplémentaire ne profite qu’à son propriétaire. Ce dernier gagne +1 mais perd seulement une fraction de -1. Son bénéfice est toujours supérieur à sa perte. Il a donc toujours intérêt à rajouter une bête.</p> | |||
| <p> | |||
| Mais d’ajout en ajout, le pâturage est surexploité et finalement détruit. Même s’ils sont conscients de la catastrophe à venir, explique Hardin, les éleveurs sont pris dans une logique inexorable, qui les conduit à détruire la ressource qui les fait vivre. Jusqu’au bord de l’abîme, ils ont intérêt à tirer profit de l’ajout d’une nouvelle bête. Si le biologiste a choisi le terme de « tragédie », c’est pour insister sur cette idée d’enchaînement inéluctable, comme dans la tragédie grecque.</p> | |||
| <p>La conclusion est sans appel : il y a incompatibilité entre la propriété commune d’une ressource et sa durabilité. Pour éviter la destruction, assène Hardin, il n’y a que deux solutions : soit la diviser en parcelles possédées par des acteurs individuels, soit la faire gérer par une administration supérieure. C’est la propriété privée ou l’État.<br/> | |||
| </p> | |||
| <img src="https://lejournal.cnrs.fr/sites/default/files/styles/asset_image_full/public/assets/images/rea_250858_038_72dpi.jpg?itok=E0IKsMku" alt="" title=" ©John Gundlach/HH-REA"/> | |||
| <p> | |||
| Selon le raisonnement de Garrett Hardin, la possession en commun d’un pâturage par des éleveurs exploitant individuellement leurs vaches finira toujours par épuiser la ressource naturelle. Le biologiste en déduira deux alternatives : la division en lots privés ou l’appropriation de l'ensemble par l’État. | |||
| </p> | |||
| <h2><strong>État contre propriété privée</strong></h2> | |||
| <p>L’impact de ce raisonnement a été immense. La pensée économique a renforcé cette influence en associant l’expression « tragédie des communs » et l’image du pâturage à des raisonnements analogues, mais plus sophistiqués, relevant de la microéconomie ou de l’économie des « externalités ».<br/> | |||
| </p> | |||
| <p class="citation left">Avec l’essor du néolibéralisme, la « tragédie des communs » va être rapidement simplifiée sous la forme d’un plaidoyer pour la seule propriété privée.</p> | |||
| <p>L’une des raisons de ce succès tient, au moins au départ, à la conclusion binaire de Hardin. Elle peut en effet être invoquée à la fois par les partisans de l’intervention étatique et par ceux prônant un recours privilégié au marché. Néanmoins, avec l’essor du néolibéralisme comme école de pensée et force sociopolitique, la « tragédie des communs » va être rapidement simplifiée sous la forme d’un plaidoyer pour la seule propriété privée.</p> | |||
| <p>Dans les années 1980 et 1990, le récit du pâturage hardinien est populaire au sein des administrations américaines, des institutions internationales et des firmes promouvant les privatisations et le « free-market environmentalism ». Le raisonnement est appliqué aux ressources forestières, aux bassins hydriques, aux terres agricoles, mais aussi à l’atmosphère ou aux ressources marines, auxquels il s’agit d’étendre des logiques d’appropriation passant par la privatisation ou la création de marchés de droits d’usage.</p> | |||
| <h2><strong>Une erreur historique et conceptuelle</strong></h2> | |||
| <p>Pourtant, ces décennies sont aussi celles d’une profonde remise en cause du raisonnement – qui fut critiqué dès l’origine. D’abord, parce qu’il se fonde sur une modélisation très peu crédible des acteurs. En effet, le raisonnement ne tient que si l’on suppose qu’on a affaire à des éleveurs n’agissant qu’en fonction d’un intérêt individuel étroit, réduit au gain financier. Ces mêmes éleveurs, on les dirait aussi privés de langage, car ils sont incapables de communiquer pour créer des formes d’organisation régulant l’exploitation du pâturage. Cela renvoie à une erreur historique et conceptuelle grossière de Hardin. Il confond en effet ce qu’il appelle des « communs » (<em>commons</em>) avec des situations de libre accès où tout le monde peut se servir à sa guise. Or, le terme de « communs » recouvre tout autre chose : il désigne des institutions grâce auxquelles des communautés ont géré, et gèrent encore aujourd’hui, des ressources communes partout dans le monde, et souvent de façon très durable. Il peut s’agir de pâtures mais aussi de forêts, de champs, de tourbières, de zones humides… souvent indispensables à leur survie.<br/> | |||
| <br/> | |||
| La « tragédie des communs » nie par avance l’efficacité de ces organisations, en assimilant la bonne gestion avec l’État ou la privatisation. Or, depuis les années 1970, les sciences sociales ont documenté empiriquement des centaines de cas de communautés présentes ou passées gérant durablement leurs ressources sous le régime de la propriété commune. La politiste Elinor Ostrom (1933-2012) obtiendra le prix Nobel d’économie, en 2009, pour son étude des systèmes de règles organisant ces communs. Le raisonnement de Hardin appartient aujourd’hui au passé. Ce qui n’empêche pas sa rémanence dans certains discours médiatiques, militants ou politiques.<br/> | |||
| </p> | |||
| <img src="https://lejournal.cnrs.fr/sites/default/files/styles/asset_image_full/public/assets/images/000_par2941662_72dpi.jpg?itok=zQJMfRco" alt="" title=" ©PONTUS LUNDAHL / SCANPIX SWEDEN / AFP "/> | |||
| <p>La politiste américaine Elinor Ostrom a reçu le prix Nobel des sciences économiques le 10 décembre 2009, «pour avoir démontré comment les biens communs peuvent être efficacement gérés par des associations d'usagers». | |||
| </p> | |||
| <h2><strong>Une pensée malthusienne</strong></h2> | |||
| <p>Ce qui a aussi été perdu de vue en route, c’est le but que visait Hardin dans son article de 1968. Celui-ci est un biologiste, mais avant tout un militant fervent de la cause néomalthusienne. Son article vise surtout à dénoncer le mécanisme irrépressible qui pousserait les individus à se reproduire sans frein, jusqu’à détruire les ressources naturelles. Dans sa métaphore, les bêtes que les éleveurs rajoutent sans cesse au pâturage, ce sont aussi… les enfants de ces mêmes éleveurs, qui ponctionnent toujours plus les richesses communes. Et c’est pourquoi il recommandait, là aussi, deux solutions : soit un contrôle de l’État sur la reproduction humaine, soit la création de « droits à enfanter » monétisables et échangeables. Un mélange d’État coercitif et d’idéologie de marché caractéristique de cette pensée de guerre froide que fut la (soi-disant) « tragédie des communs ». | |||
| </p> | |||
+ 760
- 0
cache/02d602945ced92669da54be1e19edee0/index.html
View File
| @@ -0,0 +1,760 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The Good Room (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://frankchimero.com/writing/the-good-room/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The Good Room (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://frankchimero.com/writing/the-good-room/">Source originale du contenu</a></h3> | |||
| <p><img src="https://frankchimero.com/writing/the-good-room/images/the-good-room.svg"/> | |||
| <div class="section foreword"> | |||
| <p>This talk was given on February 15, 2018 at <a href="https://www.myldring.no/substans">Substans</a> in Bergen, Norway.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>I’m a designer, but writing is another important part of my practice. Most of what I’ve written focuses on making the case for a cohesive and generous philosophy for how we design technology: it must not only look good and feel good, it must also <em>be</em> good. Today, I’ll be focusing on the other side of how technology gets made. I want to talk about ways to find a clear path through how we use technology and what we expect from it.</p> | |||
| <p>This need seems urgent. It has been the central topic of many of my conversations with friends and professional acquaintances for the last year and a half. If you bundle those conversations together, the diagnosis is clear: there is so much convenience, but so little comfort. Everyone is tired. Our attention is over-extended, over-stimulated, and over-commodified, making us twitchy, unfocused, and, in a very crude sense, afraid.</p> | |||
| <p>It feels like many of us are in the first stages of untethering, and we can use this situation as an opportunity for reassessment. Blindly chasing after convenience, amusement, and connection wasn’t all it was set up to be, and it certainly didn’t make life any less complicated. We know that digital technology isn’t going anywhere because of its obvious benefits, so the primary question becomes: how do we fix the way technology fits? Is there a way to keep some of the benefits and diminish the damage? What stays? What goes? Why? And how can we begin to change that fit in our own lives?</p> | |||
| <hr/> | |||
| <p>Let me start by stating something obvious: in the last decade, technology has transformed from a tool that we use to a place where we live. If we’re setting out to change the character of technology in our lives, we’d be wise to learn from the character of places.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Place<br/>One<br/><br/></h1> | |||
| </p> | |||
| <div class="section realblack"> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/samuel-tilden.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>Let’s take a step back in time. In 1886, Samuel Tilden, the wealthy former governor of New York state, died and left a few million dollars for New York City to establish and maintain a free, public library and reading room. This was an astronomical sum in the late 19th century, and after hearing about it a couple years later, the industrialist Andrew Carnegie, below, decided to splash an additional $5 million on to the pile. Happy days for readers, indeed.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/andrew-carnegie.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>The city eventually settled on a site for the new library at 5th Avenue between 40th and 42nd Street. We now know that area as Bryant Park, but back then it was the defunct Croton Reservoir. The library has a line it likes to use these days when it talks about its construction. They say the pool of water was transformed into a pool of knowledge. Perfection.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/croton-reservoir.jpg" class="full lazyload"/> | |||
| <figcaption>New York City’s Croton Reservoir, early 1900s</figcaption></figure> | |||
| <p>Preparations to the site began in 1900 and construction of the building started in 1902.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-construction.jpg" class="full lazyload"/> | |||
| <figcaption>Under construction: the New York Public Library, 1902</figcaption></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-1911.jpg" class="full lazyload"/> | |||
| <figcaption>The completed New York Public Library, 1911</figcaption></figure> | |||
| <p>By 1911, the library was ready for the public. The building is now considered to be a Beaux-Arts classic—its most famous touches being those two lions that flank the front stairs. One is named Patience; the other is Fortitude. We don’t name things like that any more, do we?</p> | |||
| <p>The location is still open today. In fact, many people who visit New York City put the main branch on their sightseeing list. The tourists are not alone: the NYPL is one of the few tourist stops with just as many visiting locals. I love going to the library, and encourage my friends to visit every time I get the chance. At first, they think this is a very uncool recommendation, but they change their minds when I show them the room at the library where I work.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-rosereadingroom.jpg" class="full lazyload"/></figure> | |||
| <p>Step into my office, baby. This is the Rose Reading Room. It’s on the top floor of the building. I do a fair amount of my writing here.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-happyme.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>For the sake of being meta, here is a picture of me in the room writing this talk. Look at how happy I am. No big, cheap smiles; instead, you’re seeing a deep and genuine gratitude created by the humility and awe that the room inspires. Those ceilings above me are 16 meters high, and you know what they say—high ceilings, lofty thoughts. This is the best room to work from in New York City. It’s a shame you can’t sneak in a bottle of wine.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-ceilingmural.jpg" class="full lazyload"/></figure> | |||
| <p>Here’s a better photo of the murals on the reading room’s ceiling. It’s not quite the Sistine Chapel, but the paintings are a very welcome addition when you’re gazing up, trying to get your arms around a thought.</p> | |||
| </div> | |||
| <div class="section fade"> | |||
| <p>The main branch of the NYPL is obviously a beautiful and impressive place, but it shares its most important characteristic with any other library location in the city: it is free and open. All that’s required to sit and work in the Rose Reading Room is a quick check of the bags to ensure you’re not smuggling books or wine. Everyone has access to the library, whatever their purpose.</p> | |||
| <p>On my last visit, I saw students studying, a retiree reading Shakespeare out of a big leather-bound edition, a family filling out visa applications they printed, and a kid in headphones making beats in Ableton. This is a nice representation of the world as I wish it to be—all creation, appreciation, education, and exploration. The library is what brought them together, and it asks for nothing back. Its purpose is fulfilled by all of us using it. That means, I think, that the library is one of the best places to get a real and generous sense of the city. How does a city wish to be? Look to the library. A library is the gift a city gives to itself.</p> | |||
| <hr/> | |||
| <p>This all sounds very rosy and pure, but the first visit to the library as an adult can be a little unnerving. It feels like you are doing something wrong by being there. What’s the catch? Is it a trap? How often is nothing expected of us? It is so rare in New York (and in many other places), because our presence is expected to be the start of a transaction. New York City has some of the most expensive real estate in the world, so every square inch must be monetized. That is why it is so special that this big, beautiful building is plopped right in the center of everything. Just a few blocks away from the mania of Times Square, Samuel Tilden’s gift sits waiting for anyone who wants to open it.</p> | |||
| <p>I once heard that a library is one of the few remaining places that cares more about you than your wallet. It means that a person can be a <em>person</em> there: not a customer, not a user, not an economic agent, not a pair of eyes to monetize, but a citizen and community-member, a reader and a thinker, a mind and—God, I am going to say it—a <em>soul</em>.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Place<br/>Two<br/><br/></h1> | |||
| </p> | |||
| <div class="section"> | |||
| <p>Let’s step back in time again. As the city was breaking ground for the library, another large construction job began about 8 blocks away.</p> | |||
| <p>The Pennsylvania Railroad Company was building a marquee station for New York City. The city was surprised at the sudden announcement, since the lots for the station’s 12-block footprint were bought in secret. This mixed with a sense of relief, because the station would simplify a complicated train commute into New York.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-map.jpg" class="full multiply lazyload"/></figure> | |||
| <p>There were no direct Pennsylvania Railroad trains into New York City at the time; their passengers commuted by rail to Jersey City, then had to board ferries across the Hudson River to enter Manhattan. The Penn Station project aimed to give the railroad a proper home in America’s biggest city by boring a new tunnel under the Hudson River to the west and a second tunnel for the East River to the east, thereby connecting Manhattan to Brooklyn, Long Island, and the mainland.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-alexandercassat.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>The project was an enormously risky undertaking, and Pennsylvania Railroad’s president Alexander Cassatt knew it. Boring under the silty Hudson River would be a dicey proposition for the safety of the workers and structural integrity of the tunnel. In addition, drilling two tunnels underground and expecting them to meet in the middle carried its own degree of risk if the precision of the operation slipped. And then there was the expense on top of the logistical risks. The total cost of the project ballooned to $114 million, or about $3 billion in today’s dollars. That’s a huge investment for one company to service one city, so Cassatt, understandably, absorbed himself in the fun part of the project: the station.</p> | |||
| <p>After studying public spaces in Europe ranging from the Gare d’Orsay train station in Paris to the Baths of Caracalla in Rome, this is what they drew up:</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-architecturaldrawing.jpg" class="full lazyload"/> | |||
| <figcaption>Architectural drawing of Pennsylvania Station</figcaption></figure> | |||
| <p>In 1910, seven years after tunnel boring began and six years after they broke ground on the terminal, New York City’s Penn Station was open.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo1.jpg" class="full lazyload"/></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo2.jpg" class="full lazyload"/></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo3.jpg" class="full lazyload"/></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo4.jpg" class="full lazyload"/></figure> | |||
| <p>What a magnificent space: airy, light—inspiring in the same way as many of the train stations you find in Europe. America’s premiere city finally had a suitable welcome to those who arrived by rail.</p> | |||
| </div> | |||
| <div class="section black"> | |||
| <p>The story has a sad end: Alexander Cassatt died before the construction was completed. He never saw the station open to the public.</p> | |||
| <p>Do you know who else has never seen that station? Me. No sentimental stories about my charmed experiences in Penn Station for you. If you’ve been to New York, you know that Penn Station looks nothing like what I’ve just shown you.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-soldiers.jpg" class="full lazyload"/></figure> | |||
| <p>Here’s why: after World War II, American families flooded out of the cities and into the suburbs. There, they opted to drive instead of travel by train. Pennsylvania Railroad’s business went bust, and by the ’60s, the company was forced to sell the land and airspace above the underground stops.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-demolition.jpg" class="full lazyload"/> | |||
| <figcaption>Penn Station during the demolition process, 1964</figcaption></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-demolition2.jpg" class="full lazyload"/></figure> | |||
| <p>In 1963, demolition began on the building, to be replaced by Madison Square Garden. The underground stops were left and are still functional—that’s what you see when you visit the station today. Penn Station went from a building worthy of comparison to Europe’s great feats of architecture to a hole in the ground.</p> | |||
| <p>Here is Penn Station today. It’s hard to get a good photo, because there is no light. The station resembles what Kafka would write about if he had the chance to see a derelict shopping mall. He’d have some choice words about the Pizza Hut.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-today.jpg" class="full lazyload"/></figure> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Land<br/>Grab<br/><br/></h1> | |||
| </p> | |||
| <div class="section fade"> | |||
| <p>I’ve shared the story of these two buildings for a few reasons. The first is to emphasize the importance of a good room. What kind of thoughts are possible at the library versus the ones that are had in the current Penn Station? Then ask yourself this: if technology is a place where we live, a place that we carry around with us, shouldn’t we choose to be in lively and nourishing digital environments? This reasoning should be enough to encourage you to leave the optional digital places that you don’t enjoy.</p> | |||
| <p>Another reason for the comparison is to remind you that we have both commercial and non-commercial elements in our lives. Each has their role, but we shouldn’t misapply commercial approaches to all our needs. Commercial endeavors, even huge ones, are not necessarily more stable than public ones. Look at Penn Station. And private enterprise can’t always provide everything a person requires on good terms. Look at healthcare in America. Life would be miserable if we only spent time in commercial spaces, because not all value can be captured and supported in a commercial context. We all know this, so it is a pity how overfitted and commercialized the internet, our second home, has become.</p> | |||
| <p>Commerce can fail us, because money and people sometimes have disagreements about what is valuable. The compatibility between a company’s needs and the public’s needs may only be temporary. This seems to be the case with social media companies, where, right now, what they need and what’s good for society seem to be in conflict. They are wedged between maximizing profits by capturing, retaining, and funneling the majority of the web's attention, while holding the increasingly forced pose of free speech. Meanwhile, there’s increasing evidence, even from Facebook’s own research, that says social media depresses its users and that automated, algorithmic recommendations of content promotes extremism. A few weeks ago, I watched a video on YouTube about an alternate ending for a Star Wars movie; within two autoplays I was knee-deep in misogynistic conspiracy theory videos. The wrong roads are being paved in an increasingly automated culture that values ease.</p> | |||
| <p>Consolidated attention produces fewer targets to exploit. Democracy has suffered in the last few years, because these massive systems haven’t differentiated between serving the needs of advertising and inadvertently serving the needs of propaganda. Targeting helps both. In addition, the citizenship doesn’t bring the right level of skepticism to what they’re delivered through these platforms. Any huge, attention-absorbing, unsupervised commercial space that’s supported by advertising will produce the same opportunity for exploitation. All of this would be a difficult problem for anyone to solve, but I have no sympathy. Why should anything that grows to a billion people be allowed to be privately controlled?</p> | |||
| <p>The market research firm <a href="https://www.edelman.com/trust-barometer">Edelman recently published their 2018 Trust Barometer</a> and it contains some bad news for everyone, especially those platforms that serve billions. It says that trust in social media is quickly eroding worldwide, because social and search platforms like Facebook and Google are no longer seen as technology, but as part of an untrusted media institution—and the least trusted part of the media at that. 63% of people say they can’t tell the difference between good journalism and falsehoods. 59% say this processes is becoming more difficult. Even more concerning is that participants expressed the lowest confidence ever recorded in the credibility of “a person like yourself.” We are in a spiral of distrust instigated by our digital environments.</p> | |||
| <p>Something must change, and to many of us, it seems that a whole new path is necessary. Can we create one without completely disconnecting? I am here to offer a very loud and exasperated, <em>“I don’t know.”</em></p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>On the bright side, these transformations and re-imaginings happen more frequently than we think. It’s part of digital technology’s origin story: the web began as military technology co-opted to share scientific knowledge between universities and institutions. The spirit and promise of the early web was captured well by Kevin Kelly, one of the founders of WIRED Magazine, when he wrote:</p> | |||
| <blockquote>“Out of complete nothingness we were harnessing a virtual commonwealth.”</blockquote> | |||
| <p>Kelly is saying that the web is a boundless and shared estate, and we only later learned how to commercialize it. The commercial endeavors that now dominate our digital experience sit on public land, or, should I say, open protocols. (For now, at least. Eliminating net neutrality and selling privileged access to the network is another attempt to turn the public commons into private property.)</p> | |||
| <p>The web commercialization project has been the boom of our age, and the commercial yawp has become the dominant tone of our technology. It’s loud out there. We’re exhausted and over-extended, because everything is vying for nearly boundless amounts of our time and attention. Late last year, Netflix CEO Reed Hastings said their biggest competition was sleep. That’s a pretty grim statement, joke or not. Biology is always such a nuisance for business.</p> | |||
| <p>As companies scaled, more and more of the web became monetized. Interactivity cleared a path for transactional thinking because of their striking resemblance. (Let’s remember that pay-per-click is the origin of both Google’s and Facebook’s fortunes.) Helpful personal sites and informational hubs have been replaced by content marketing. Even in places where no money changes hands, follows and likes act as representations of worth, just like money. That’s not to say you can’t ask for money, though—even the dogs I follow on Instagram are trying to sell me stuff. No species is safe from salesmanship.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/instagram.jpg" class="full limitmed lazyload"/></figure> | |||
| <hr/> | |||
| <p>That was a little harsh, wasn’t it? Sorry about that. Though dismal and accurate, what I just offered is an incomplete picture of the web. Remember: the web is a marketplace <em>and</em> a commonwealth, so we have both commerce and culture; it’s just that the non-commercial bits of the web get more difficult to see in comparison to the outsized presence of the commercial web and all that caters to it. It’s a visibility problem that’s an inadvertent consequence of values. The commercial parts become more self-contained and link inside themselves to keep you around—after a while, you’re looping around their cul-de-sac because attention is money on the web. Non-commercial sites link out and will let you go, which immediately puts them at a disadvantage for mindshare.</p> | |||
| <p>Facebook, Google, Apple, and Amazon aren’t going anywhere at this point—nor should we expect them to—so it’s best to recalibrate the digital experience by increasing the footprint and mindshare of the kinds of cultural and communal value they can’t provide. The web isn’t like Manhattan real estate—if we want something, we can make space for it.</p> | |||
| <p>Different measuring sticks are also in order. If commercial networks on the web measure success by <em>reach and profit</em>, cultural endeavors need to see their successes in terms of <em>resonance and significance</em>. This is the new game, one that elevates both the people who make the work and those who see, use, and enjoy it.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Choice<br/>and<br/>Will<br/><br/></h1> | |||
| </p> | |||
| <div class="section"> | |||
| <p>The digital landscape has an influence on our lives, but we are more directly affected by our personal choices. We must fend for ourselves, whether or not the technology industry chooses to deal with the implications of their work.</p> | |||
| <p>Earlier, I said that I felt unfocused and twitchy—too much time in fast-paced places that see me as a bundle of nerves with a wallet, and not enough time in slower, more nourishing places, like the library. The solution seems simple: spend less time in the bad places and more time in the good places!</p> | |||
| <p>Okay, but not so fast. First, that’s easier to say than to do. Second, there are no practical steps in there. What are other people doing?</p> | |||
| </div> | |||
| <div class="section fade"> | |||
| <h2>Immunization</h2> | |||
| <p>Reading a book on paper is a simple, easy step to regain some composure and inoculate yourself against hysterics. That’s it, that’s the whole tip. Books are medicine. This suggestion, of course, is coming from the guy who just spilled a few hundred words on the greatness of libraries. My bias is showing, but follow me here.</p> | |||
| <p>A book is useful because it is entertaining and naturally offsets the time you would spend staring into your phone; it’s portable and a great sleep aide. It re-calibrates your expectations for rewards, and properly shames us all by showing us how much our attentions have atrophied. That focus improves with practice, but it will take time. Before, we were scrolling through Instagram reading screenshots of tweets. We have to work our way up to Dostoevsky, you know?</p> | |||
| <p>Most importantly, reading a book is active, unlike most of the passive consumption we do in front of screens. I think a lot of the anxiety we can feel from technology comes from that passive relationship alongside its speed. Look at cable news or your social media feeds. All day long, we’re having absurd novelty, enviable affluence, and sincere tragedy and distress sandwiched together and railgunned into our face. A book offers some necessary composure and consistency to help find our bearings in a world oriented toward violent delivery.</p> | |||
| <p>A day eventually comes along when a reader’s head clicks back into place. It’s like something important was realigned and you remembered how to carry yourself, similar to how it feels after having your back popped. There are other ways to achieve this, but reading is my preferred method, and maybe by talking about books, I can help you discover a counter-balancing activity that works for you. These benefits can come from any slow, focused, and deep practice. More on beneficial practices in a moment.</p> | |||
| <h2>Abstinence</h2> | |||
| <p>A drastic step I’ve seen is called “digital detox.” It’s sort of like a destination cleanse diet: you go off to the woods outside San Francisco, for instance, and give them your phone, laptop, and any other digital paraphernalia. The purpose of the trip is to disabuse yourself of your screen addiction by staying away from all screens and media for a week. Mysterious things happen at undisclosed locations, then attendees return home pure, with a slightly worrying glint of rapture in their eyes.</p> | |||
| <p>I haven’t done this, but I would like to try, if only to recalibrate my brain’s expectations for dopamine. Perhaps the experience would be similar to when I return to the States after a trip overseas: my tastebuds have adapted, and all American food (even the very nice stuff) tastes too sweet and salty.</p> | |||
| <p>Full digital immersion after digital abstinence seems like a difficult plunge. Attendees are dropped back into the environment that produced their problem, though, hopefully, with better skills and tools to manage it. These new strategies, however, might presume a degree of autonomy that may not be available. Most of us are not lucky enough to have much choice in where our social lives happen or what sort of technology we use at our jobs. Many will return from their detox trips, revisit these places, and get a bad taste in their mouth. Perhaps that distaste is precisely what’s needed to create technological change. Time will tell.</p> | |||
| <h2>Regulation</h2> | |||
| <p>Most of us can’t control our whole technological situation, so it’s been fascinating for me to see how people shape it in the one place where they have the most influence: raising their children. I don’t have kids, so it’s been especially interesting hearing the different standards my friends have set up. Some are laissez-faire with their kids’ use of technology, others set up extremely regimented schedules and sets of rules about what is allowed when and where. Other times things are bonkers enough to sound like a psychological experiment: a friend of mine is raising his kid exclusively on Sesame Street clips from his childhood. We’ll see how long that lasts.</p> | |||
| <p>I have no right to judgements about this, but the situation has shown me that we also create these sets of rules for ourselves—it’s just that the ones created for our kids are more evident because they are a mindful construction. The decisions for ourselves are instinctual and individualistic, so there’s usually not a cohesive philosophy behind our personal standards. It’s easy to see how scattered we can be when it’s all spelled out.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>My technological profile makes it seem like I skipped the 20th century, and it’s not just because I live in a New York City apartment without air conditioning. Let me tell you about my setup:</p></p> | |||
| <div class="step"> | |||
| <p>Yes to high-speed internet.</p> | |||
| </div> | |||
| <div class="step"> | |||
| <p>Increasingly, no to Twitter.</p> | |||
| </div> | |||
| <div class="step"> | |||
| <p>No to doing anything new with them.</p> | |||
| </div> | |||
| <div class="step"> | |||
| <p>No to the creepy wiretap speakers they sell.</p> | |||
| </div> | |||
| <p>Of course my standards are wildly inconsistent and sometimes completely contradictory. So, I hope all of this sounds as weird to you as other people’s setups sound strange to me. For instance: most of my friends who own an Amazon Echo also put tape over the cameras on their laptops. Why bother if you’re going to sit next to a microphone that listens to you all day? The mind is a funny place.</p> | |||
| <p></div> | |||
| <div class="section black"> | |||
| <p>Outside standards always seem to take on this unusual appearance, and in America, the Amish have the most prominent outside attitude to technology. The Amish are a group of religious communities located mostly in the eastern United States, primarily in Pennsylvania, Ohio, and Indiana.</p> | |||
| <p>They’re typically seen as anti-technological. Similar to my leapfrogging the 20th century, the Amish are slightly out of time and have mostly stuck to 19th-century technologies. Most notably, they still drive horse and buggy.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/amish-buggy.jpg" class="full lazyload"/></figure> | |||
| <p>Nearly all of my knowledge about the Amish’s relationship to technology comes from Kevin Kelly. Remember him? He’s the guy I previously quoted about the early web:</p> | |||
| <blockquote>“Out of complete nothingness we were harnessing a virtual commonwealth.”</blockquote> | |||
| <p>But that’s not the whole quote. He goes on to say:</p> | |||
| <blockquote>“And the internet came along and it seemed almost Amish.”</blockquote> | |||
| <p>How can the internet, something so obviously technological, seem to be Amish, a set of people resiliently holding out <em>against</em> technology?</p> | |||
| <p>It comes down to the idea of the web as a commonwealth. The Amish are not anti-technology. It’s more accurate to say they are only interested in adopting technologies which meet their community-focused criteria. While you or I make individual choices for what technologies we adopt and feel our way through the choice, the Amish collectively make these decisions, so their criteria must be much more clear.</p> | |||
| <p>They have two collective standards. First: will it strengthen the family? Second: will it strengthen the community? So when Kelly said that the early web felt Amish, he meant that the digital space they were creating felt like an open, communal space filled with strong bonds.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>How do the Amish apply these criteria? In some pretty interesting ways. I’d argue that they are only slightly more strange or arbitrary than our own choices once you know their reasons.</p> | |||
| <p>The Amish say yes to traveling by horse. Skateboards and rollerblades are also allowed.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/amish-yes.jpg" class="full multiply limitsm lazyload"/></figure> | |||
| <hr/> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/amish-no.jpg" class="full multiply limitsm lazyload"/></figure> | |||
| <p>But bicycles and cars are not. Why is that? You can stray too far from home with a car or bike. Horses are accepted, because they can only travel about 30 miles a day. Going by horse keeps you close to your family and tied to your community. You shop locally, attend church locally, and so on. According to the Amish, the choice of transportation method can either strengthen or weaken a sense of family and community.</p> | |||
| <p>This all sounds very sensible in intent, if a bit extreme in execution. Still, I’d love to hear the rationale behind some of their other choices. Disposable diapers are allowed, I think for obvious reasons, but zippers are still condemned in most communities. Chainsaws are fine, but velcro is taboo. It is all so strange, but perhaps no stranger than my enjoyment of Instagram and disdain of Facebook.</p> | |||
| <hr/> | |||
| <p>Aside from the occasional foreign standard, the Amish know what we are having to re-learn: technology’s influence is not a problem to solve through dominance; it’s a situation to navigate through clear goals and critical thinking. Attentiveness is key. Technological adoption can’t be on auto-complete.</p> | |||
| <p>Vaguely stated needs lead to bad decisions, so saying you want convenience, amusement, or productivity from technology isn’t enough. Convenience to invest the time where? Productive to what end? Everything we take in comes at the cost of something else, so it’s best to think it through and be sure it is a good deal. There are now so few benefits to early adoption.</p> | |||
| <p>The Amish lesson is that what you let in will eventually form you. We both make technology and are made by it. That paradox is uncomfortable for many people, but it must be honored. And there is hope in the situation: as any Eastern or Western spiritual mystic will tell you, a paradox is a sign that you are at the heart of the truth.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Space<br/>for<br/>Soul<br/><br/></h1> | |||
| </p> | |||
| <div class="section black"> | |||
| <p>Here’s another quote from Kevin Kelly:</p> | |||
| <blockquote>“What’s missing is the spiritual meaning of technology.”</blockquote> | |||
| <p>If technology is increasingly a place where we live, it needs to have space for the soul, like how the library makes room for a healthy, elevated mindset while the current Penn Station inspires despair. Beauty is an important element, but purpose also matters. I think this is what Kelly is hinting at. Using technology for commerce, efficiency, and ease are not enough of a higher purpose for something that dominates a great part of our lives. The heart demands a bigger dream.</p> | |||
| <p>What is it all for? What can we imagine? These questions become critical as we find ourselves in a time where we are confronted with questions about identity, self-worth, community, and citizenship in this connected world. If technology is not only for profit and ease, what is it for? We must use our soulful imaginations and be specific.</p> | |||
| <hr/> | |||
| <p>Most of our dream worlds are dystopias. One reason for this is that we feel technology is only producing commercial possibilities while neglecting or distorting the other essential parts of us. It’s not being very library-like. People have an easier time imagining how technology’s influence can go wrong. Our imaginations have a negative flair, and it’s always been this way.</p> | |||
| <p>Take a look at any medieval altarpiece that depicts heaven and hell.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-whole.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement by Hans Memling</figcaption></figure> | |||
| <p>The hell panel is always so much more interesting and fully realized.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-hell.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement (Detail) by Hans Memling</figcaption></figure> | |||
| <p>Hell is a masochistic orgy of nightmares rendered with impressive, inventive detail.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-heaven.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement (Detail) by Hans Memling</figcaption></figure> | |||
| <p>Meanwhile in heaven, it is a bunch of severe and blank men, sitting on clouds, looking like they’re in a board meeting.</p> | |||
| <p>This is the divine reward?</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-jamsession.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement (Detail) by Hans Memling</figcaption></figure> | |||
| <p>The only ones in heaven who have the opportunity for a good time are the angels jamming on lutes and trumpets at the gates. But it doesn’t seem like a very celebratory welcome committee. Maybe Prince is up there whipping everyone into shape?</p> | |||
| <p>Our minds can be gruesomely specific about our fears, but can only make vague, imprecise gestures at our desires through broad words like love, happiness, or contentedness. But these words provide no insight on how to actually achieve any of it or what form it takes. At least advertising is specific about what will make us happy. Perhaps that’s why we trust it, even though we know we shouldn’t.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>Let’s go back to Kelly’s quote. Spiritual technology is such a captivating phrase. It seems to open up possibilities instead of closing them down, and can help us ask more incisive questions about what we want to happen up there in the clouds. What does the good life look like, and if we use technology to help us get there, what form should it take? What’s the dream again?</p> | |||
| <p>I started thinking about what could be considered spiritual technology in a secular sense to help me decide what technology stays and what goes from my life. A few examples came to mind, ranging from small acts like lighting a candle to larger practices like yoga or meditation. The obvious deficiency was that nothing I identified involved screens, which is a bit problematic if you’re searching for ways to add some soul to technology.</p> | |||
| <p>That’s why I was pleased to find the <a href="http://humanetech.com/app-ratings/">app ratings survey by the Center for Humane Technology</a>. The survey tracked how much time the 200,000 participants spent in each app on their phone, then asked them if they were happy with that time or if they regretted it.</p> | |||
| <p>Let’s start with the apps people regret: Grindr, Candy Crush, Facebook, Reddit, Twitter, Tinder, Instagram, Snapchat—generally the apps we resort to out of boredom, desperation, or loneliness. It's shocking to me that the durations average between 40 minutes to over an hour per day for <em>each</em> app. That’s downright crazy. People are also very regretful of the time spent. It seems these places make our boredom, desperation, or loneliness worse.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/survey-unhappy.jpg" class="full limitmed lazyload"/></figure> | |||
| <p>Now let’s look at the apps where the participants were pleased with themselves: Calm, Headspace, Insight Timer are three of the top four, and all are apps that help you meditate. I’ll repeat: three out of the top four could be considered spiritual technology. The other two in the top five are a calendar app and the weather, which, at this point, might as well be the digital air we breath.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/survey-happy.jpg" class="full limitmed lazyload"/></figure> | |||
| <p>A majority of the remaining apps provide art: Spotify, Kindle, Audible, Amazon Music, Podcasts. And look at the average usage: it tops out at 26 minutes of reading or 20 minutes of meditating, but most times are 10 minutes or less. I find it absolutely fascinating that there are no social or communication apps on this “Most Happy” list. Every app either points inward through personal practice, organization, and art, or points outward to help us navigate the world. It seems our alone time with technology should truly be alone time, and that halfway socializing is a source of disappointment, not pleasure.</p> | |||
| </div> | |||
| <div class="section fade"> | |||
| <p>The survey provides some clear guidance on forming new technology and making decisions about what we should keep around. There is enough entertainment and connection without intimacy out there, so spiritual technology must take a different path and be a gateway to induce a state of well-being. These tools are about teaching and reinforcing methods, and acknowledge that a primary source of happiness is not convenience, but empowerment.</p> | |||
| <p>I started to find other examples of what could be considered spiritual technology. Across the board, they were programs for people instead of programs for computers. The software was merely an assistive device to help people more easily follow the program. It was technology in its best role: as a sidekick for personal application.</p> | |||
| <h2>Couch to 5K</h2> | |||
| <p>One example is Couch to 5K, a beginner’s program for running. It began <a href="https://bigmedium.com/ideas/c25k.html">as a written routine to follow for a couple months</a>, then some industrious developers came along and wrote apps to help schedule and track your runs. I did a quick search on the app store to check how many apps may be out there, but I lost track at about 20.</p> | |||
| <h2>The New York Times H.I.I.T. Workout</h2> | |||
| <p>In a similar vein, the New York Times published their <a href="https://well.blogs.nytimes.com/2013/05/09/the-scientific-7-minute-workout/">high-impact, seven-minute workout</a> a few years ago, and shortly after, many apps showed up to help people along.</p> | |||
| <h2>Guided Meditation</h2> | |||
| <p>And, of course, there are all the apps for guided meditation shown in the survey above. Meditation (along with reading) has turned into one of my daily non-negotiable activities, and my commitment is thanks to some careful prodding by app notifications.</p> | |||
| <h2>And others...</h2> | |||
| <p>The examples need not only be about health: for instance, consider the glut of productivity apps that follow <a href="https://en.wikipedia.org/wiki/Getting_Things_Done">David Allen’s <em>Getting Things Done</em> methodology.</a> I’m sure there are many other examples.</p> | |||
| <p>One of my favorites has been new research from my friend <a href="http://colly.com">Simon Collison</a>. He’s focusing on what he calls <a href="https://tinyletter.com/colly/archive">“The Internet of Natural Things”</a>, meaning ways to use technology to enhance and deepen our connection to the natural world. All of his recommendations have been wonderful. They range from the expected, like the app <a href="https://www.inaturalist.org">iNaturalist</a> to help you identify trees and flowers, bugs and other critters. Others are more odd and imaginative, like his recommendation of a bat detector. It’s called the <a href="https://www.echometertouch.com">Echo Meter Touch</a>, and it plugs into your phone to transform ultrasonic bat calls into audio you can hear. Yes, it’s a real batphone. No matter what the technology, the goal is to cater to our most primary spiritual need: to embody ourselves in the landscape, illuminate our awareness of what is around us, and to encourage us along in the daily practice of discovering our place in the family of life.</p> | |||
| <hr/> | |||
| <p>It’s interesting to note that many of these apps are corporeal. Contrary to intuition, the way to better technology is through the body, because we do not leave our body behind when we log on. We may be striving to create a nourishing digital condition for ourselves, but it will always be informed by what’s happening on the ground. The place of technology in our lives begins and ends with the place where we find ourselves.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-happyme.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>Which brings me back to my seat at the library. It was a Tuesday afternoon, cold and quiet, the day wrapped up in that winter sun which gives the sharpest light.</p> | |||
| <p>I thought about how to fill out that vague painting of heaven, asking what we want, what we need. What could be up there in those clouds? My dream wasn’t hard to find. It was all around me: a comfortable, lofty, and shared space where everything is borrowed, always circulating. This is a good room for all of us.</p> | |||
| <p>There’s the student engaged in her studies, the retiree finally getting to what he has put off for far too long, the family vibrating with anticipation for their trip, the kid in headphones absorbed in making the song he’s about to give to the world. Then there’s me, wondering if this place means as much to them as it does to me. What’s it worth? The money only matters so you can get to this way of being: to have the time, find the opening, get the chance to only be. It takes something to get here, and yet it doesn’t. We all walked right in. I was happy enough to sit and appreciate it all. Maybe that painting of heaven was right—nothing else was necessary.</p> | |||
| <hr/> | |||
| <p>I only wrote three sentences on the day I took the photo.</p> | |||
| <blockquote> | |||
| Everyone is looking for help.<br/> | |||
| Modest needs should be lavishly met.<br/> | |||
| Be grateful for every chance to do something right.<br/> | |||
| </blockquote> | |||
| <p>Could this dream be big enough?</p> | |||
| </div></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://frankchimero.com/writing/the-good-room/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 248
- 0
cache/02d602945ced92669da54be1e19edee0/index.md
View File
| @@ -0,0 +1,248 @@ | |||
| title: The Good Room | |||
| url: https://frankchimero.com/writing/the-good-room/ | |||
| hash_url: 02d602945ced92669da54be1e19edee0 | |||
| <img src="https://frankchimero.com/writing/the-good-room/images/the-good-room.svg"/> | |||
| <div class="section foreword"> | |||
| <p>This talk was given on February 15, 2018 at <a href="https://www.myldring.no/substans">Substans</a> in Bergen, Norway.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>I’m a designer, but writing is another important part of my practice. Most of what I’ve written focuses on making the case for a cohesive and generous philosophy for how we design technology: it must not only look good and feel good, it must also <em>be</em> good. Today, I’ll be focusing on the other side of how technology gets made. I want to talk about ways to find a clear path through how we use technology and what we expect from it.</p> | |||
| <p>This need seems urgent. It has been the central topic of many of my conversations with friends and professional acquaintances for the last year and a half. If you bundle those conversations together, the diagnosis is clear: there is so much convenience, but so little comfort. Everyone is tired. Our attention is over-extended, over-stimulated, and over-commodified, making us twitchy, unfocused, and, in a very crude sense, afraid.</p> | |||
| <p>It feels like many of us are in the first stages of untethering, and we can use this situation as an opportunity for reassessment. Blindly chasing after convenience, amusement, and connection wasn’t all it was set up to be, and it certainly didn’t make life any less complicated. We know that digital technology isn’t going anywhere because of its obvious benefits, so the primary question becomes: how do we fix the way technology fits? Is there a way to keep some of the benefits and diminish the damage? What stays? What goes? Why? And how can we begin to change that fit in our own lives?</p> | |||
| <hr/> | |||
| <p>Let me start by stating something obvious: in the last decade, technology has transformed from a tool that we use to a place where we live. If we’re setting out to change the character of technology in our lives, we’d be wise to learn from the character of places.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Place<br/>One<br/><br/></h1> | |||
| </p> | |||
| <div class="section realblack"> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/samuel-tilden.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>Let’s take a step back in time. In 1886, Samuel Tilden, the wealthy former governor of New York state, died and left a few million dollars for New York City to establish and maintain a free, public library and reading room. This was an astronomical sum in the late 19th century, and after hearing about it a couple years later, the industrialist Andrew Carnegie, below, decided to splash an additional $5 million on to the pile. Happy days for readers, indeed.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/andrew-carnegie.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>The city eventually settled on a site for the new library at 5th Avenue between 40th and 42nd Street. We now know that area as Bryant Park, but back then it was the defunct Croton Reservoir. The library has a line it likes to use these days when it talks about its construction. They say the pool of water was transformed into a pool of knowledge. Perfection.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/croton-reservoir.jpg" class="full lazyload"/> | |||
| <figcaption>New York City’s Croton Reservoir, early 1900s</figcaption></figure> | |||
| <p>Preparations to the site began in 1900 and construction of the building started in 1902.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-construction.jpg" class="full lazyload"/> | |||
| <figcaption>Under construction: the New York Public Library, 1902</figcaption></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-1911.jpg" class="full lazyload"/> | |||
| <figcaption>The completed New York Public Library, 1911</figcaption></figure> | |||
| <p>By 1911, the library was ready for the public. The building is now considered to be a Beaux-Arts classic—its most famous touches being those two lions that flank the front stairs. One is named Patience; the other is Fortitude. We don’t name things like that any more, do we?</p> | |||
| <p>The location is still open today. In fact, many people who visit New York City put the main branch on their sightseeing list. The tourists are not alone: the NYPL is one of the few tourist stops with just as many visiting locals. I love going to the library, and encourage my friends to visit every time I get the chance. At first, they think this is a very uncool recommendation, but they change their minds when I show them the room at the library where I work.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-rosereadingroom.jpg" class="full lazyload"/></figure> | |||
| <p>Step into my office, baby. This is the Rose Reading Room. It’s on the top floor of the building. I do a fair amount of my writing here.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-happyme.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>For the sake of being meta, here is a picture of me in the room writing this talk. Look at how happy I am. No big, cheap smiles; instead, you’re seeing a deep and genuine gratitude created by the humility and awe that the room inspires. Those ceilings above me are 16 meters high, and you know what they say—high ceilings, lofty thoughts. This is the best room to work from in New York City. It’s a shame you can’t sneak in a bottle of wine.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-ceilingmural.jpg" class="full lazyload"/></figure> | |||
| <p>Here’s a better photo of the murals on the reading room’s ceiling. It’s not quite the Sistine Chapel, but the paintings are a very welcome addition when you’re gazing up, trying to get your arms around a thought.</p> | |||
| </div> | |||
| <div class="section fade"> | |||
| <p>The main branch of the NYPL is obviously a beautiful and impressive place, but it shares its most important characteristic with any other library location in the city: it is free and open. All that’s required to sit and work in the Rose Reading Room is a quick check of the bags to ensure you’re not smuggling books or wine. Everyone has access to the library, whatever their purpose.</p> | |||
| <p>On my last visit, I saw students studying, a retiree reading Shakespeare out of a big leather-bound edition, a family filling out visa applications they printed, and a kid in headphones making beats in Ableton. This is a nice representation of the world as I wish it to be—all creation, appreciation, education, and exploration. The library is what brought them together, and it asks for nothing back. Its purpose is fulfilled by all of us using it. That means, I think, that the library is one of the best places to get a real and generous sense of the city. How does a city wish to be? Look to the library. A library is the gift a city gives to itself.</p> | |||
| <hr/> | |||
| <p>This all sounds very rosy and pure, but the first visit to the library as an adult can be a little unnerving. It feels like you are doing something wrong by being there. What’s the catch? Is it a trap? How often is nothing expected of us? It is so rare in New York (and in many other places), because our presence is expected to be the start of a transaction. New York City has some of the most expensive real estate in the world, so every square inch must be monetized. That is why it is so special that this big, beautiful building is plopped right in the center of everything. Just a few blocks away from the mania of Times Square, Samuel Tilden’s gift sits waiting for anyone who wants to open it.</p> | |||
| <p>I once heard that a library is one of the few remaining places that cares more about you than your wallet. It means that a person can be a <em>person</em> there: not a customer, not a user, not an economic agent, not a pair of eyes to monetize, but a citizen and community-member, a reader and a thinker, a mind and—God, I am going to say it—a <em>soul</em>.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Place<br/>Two<br/><br/></h1> | |||
| </p> | |||
| <div class="section"> | |||
| <p>Let’s step back in time again. As the city was breaking ground for the library, another large construction job began about 8 blocks away.</p> | |||
| <p>The Pennsylvania Railroad Company was building a marquee station for New York City. The city was surprised at the sudden announcement, since the lots for the station’s 12-block footprint were bought in secret. This mixed with a sense of relief, because the station would simplify a complicated train commute into New York.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-map.jpg" class="full multiply lazyload"/></figure> | |||
| <p>There were no direct Pennsylvania Railroad trains into New York City at the time; their passengers commuted by rail to Jersey City, then had to board ferries across the Hudson River to enter Manhattan. The Penn Station project aimed to give the railroad a proper home in America’s biggest city by boring a new tunnel under the Hudson River to the west and a second tunnel for the East River to the east, thereby connecting Manhattan to Brooklyn, Long Island, and the mainland.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-alexandercassat.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>The project was an enormously risky undertaking, and Pennsylvania Railroad’s president Alexander Cassatt knew it. Boring under the silty Hudson River would be a dicey proposition for the safety of the workers and structural integrity of the tunnel. In addition, drilling two tunnels underground and expecting them to meet in the middle carried its own degree of risk if the precision of the operation slipped. And then there was the expense on top of the logistical risks. The total cost of the project ballooned to $114 million, or about $3 billion in today’s dollars. That’s a huge investment for one company to service one city, so Cassatt, understandably, absorbed himself in the fun part of the project: the station.</p> | |||
| <p>After studying public spaces in Europe ranging from the Gare d’Orsay train station in Paris to the Baths of Caracalla in Rome, this is what they drew up:</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-architecturaldrawing.jpg" class="full lazyload"/> | |||
| <figcaption>Architectural drawing of Pennsylvania Station</figcaption></figure> | |||
| <p>In 1910, seven years after tunnel boring began and six years after they broke ground on the terminal, New York City’s Penn Station was open.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo1.jpg" class="full lazyload"/></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo2.jpg" class="full lazyload"/></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo3.jpg" class="full lazyload"/></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-photo4.jpg" class="full lazyload"/></figure> | |||
| <p>What a magnificent space: airy, light—inspiring in the same way as many of the train stations you find in Europe. America’s premiere city finally had a suitable welcome to those who arrived by rail.</p> | |||
| </div> | |||
| <div class="section black"> | |||
| <p>The story has a sad end: Alexander Cassatt died before the construction was completed. He never saw the station open to the public.</p> | |||
| <p>Do you know who else has never seen that station? Me. No sentimental stories about my charmed experiences in Penn Station for you. If you’ve been to New York, you know that Penn Station looks nothing like what I’ve just shown you.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-soldiers.jpg" class="full lazyload"/></figure> | |||
| <p>Here’s why: after World War II, American families flooded out of the cities and into the suburbs. There, they opted to drive instead of travel by train. Pennsylvania Railroad’s business went bust, and by the ’60s, the company was forced to sell the land and airspace above the underground stops.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-demolition.jpg" class="full lazyload"/> | |||
| <figcaption>Penn Station during the demolition process, 1964</figcaption></figure> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-demolition2.jpg" class="full lazyload"/></figure> | |||
| <p>In 1963, demolition began on the building, to be replaced by Madison Square Garden. The underground stops were left and are still functional—that’s what you see when you visit the station today. Penn Station went from a building worthy of comparison to Europe’s great feats of architecture to a hole in the ground.</p> | |||
| <p>Here is Penn Station today. It’s hard to get a good photo, because there is no light. The station resembles what Kafka would write about if he had the chance to see a derelict shopping mall. He’d have some choice words about the Pizza Hut.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/penn-today.jpg" class="full lazyload"/></figure> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Land<br/>Grab<br/><br/></h1> | |||
| </p> | |||
| <div class="section fade"> | |||
| <p>I’ve shared the story of these two buildings for a few reasons. The first is to emphasize the importance of a good room. What kind of thoughts are possible at the library versus the ones that are had in the current Penn Station? Then ask yourself this: if technology is a place where we live, a place that we carry around with us, shouldn’t we choose to be in lively and nourishing digital environments? This reasoning should be enough to encourage you to leave the optional digital places that you don’t enjoy.</p> | |||
| <p>Another reason for the comparison is to remind you that we have both commercial and non-commercial elements in our lives. Each has their role, but we shouldn’t misapply commercial approaches to all our needs. Commercial endeavors, even huge ones, are not necessarily more stable than public ones. Look at Penn Station. And private enterprise can’t always provide everything a person requires on good terms. Look at healthcare in America. Life would be miserable if we only spent time in commercial spaces, because not all value can be captured and supported in a commercial context. We all know this, so it is a pity how overfitted and commercialized the internet, our second home, has become.</p> | |||
| <p>Commerce can fail us, because money and people sometimes have disagreements about what is valuable. The compatibility between a company’s needs and the public’s needs may only be temporary. This seems to be the case with social media companies, where, right now, what they need and what’s good for society seem to be in conflict. They are wedged between maximizing profits by capturing, retaining, and funneling the majority of the web's attention, while holding the increasingly forced pose of free speech. Meanwhile, there’s increasing evidence, even from Facebook’s own research, that says social media depresses its users and that automated, algorithmic recommendations of content promotes extremism. A few weeks ago, I watched a video on YouTube about an alternate ending for a Star Wars movie; within two autoplays I was knee-deep in misogynistic conspiracy theory videos. The wrong roads are being paved in an increasingly automated culture that values ease.</p> | |||
| <p>Consolidated attention produces fewer targets to exploit. Democracy has suffered in the last few years, because these massive systems haven’t differentiated between serving the needs of advertising and inadvertently serving the needs of propaganda. Targeting helps both. In addition, the citizenship doesn’t bring the right level of skepticism to what they’re delivered through these platforms. Any huge, attention-absorbing, unsupervised commercial space that’s supported by advertising will produce the same opportunity for exploitation. All of this would be a difficult problem for anyone to solve, but I have no sympathy. Why should anything that grows to a billion people be allowed to be privately controlled?</p> | |||
| <p>The market research firm <a href="https://www.edelman.com/trust-barometer">Edelman recently published their 2018 Trust Barometer</a> and it contains some bad news for everyone, especially those platforms that serve billions. It says that trust in social media is quickly eroding worldwide, because social and search platforms like Facebook and Google are no longer seen as technology, but as part of an untrusted media institution—and the least trusted part of the media at that. 63% of people say they can’t tell the difference between good journalism and falsehoods. 59% say this processes is becoming more difficult. Even more concerning is that participants expressed the lowest confidence ever recorded in the credibility of “a person like yourself.” We are in a spiral of distrust instigated by our digital environments.</p> | |||
| <p>Something must change, and to many of us, it seems that a whole new path is necessary. Can we create one without completely disconnecting? I am here to offer a very loud and exasperated, <em>“I don’t know.”</em></p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>On the bright side, these transformations and re-imaginings happen more frequently than we think. It’s part of digital technology’s origin story: the web began as military technology co-opted to share scientific knowledge between universities and institutions. The spirit and promise of the early web was captured well by Kevin Kelly, one of the founders of WIRED Magazine, when he wrote:</p> | |||
| <blockquote>“Out of complete nothingness we were harnessing a virtual commonwealth.”</blockquote> | |||
| <p>Kelly is saying that the web is a boundless and shared estate, and we only later learned how to commercialize it. The commercial endeavors that now dominate our digital experience sit on public land, or, should I say, open protocols. (For now, at least. Eliminating net neutrality and selling privileged access to the network is another attempt to turn the public commons into private property.)</p> | |||
| <p>The web commercialization project has been the boom of our age, and the commercial yawp has become the dominant tone of our technology. It’s loud out there. We’re exhausted and over-extended, because everything is vying for nearly boundless amounts of our time and attention. Late last year, Netflix CEO Reed Hastings said their biggest competition was sleep. That’s a pretty grim statement, joke or not. Biology is always such a nuisance for business.</p> | |||
| <p>As companies scaled, more and more of the web became monetized. Interactivity cleared a path for transactional thinking because of their striking resemblance. (Let’s remember that pay-per-click is the origin of both Google’s and Facebook’s fortunes.) Helpful personal sites and informational hubs have been replaced by content marketing. Even in places where no money changes hands, follows and likes act as representations of worth, just like money. That’s not to say you can’t ask for money, though—even the dogs I follow on Instagram are trying to sell me stuff. No species is safe from salesmanship.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/instagram.jpg" class="full limitmed lazyload"/></figure> | |||
| <hr/> | |||
| <p>That was a little harsh, wasn’t it? Sorry about that. Though dismal and accurate, what I just offered is an incomplete picture of the web. Remember: the web is a marketplace <em>and</em> a commonwealth, so we have both commerce and culture; it’s just that the non-commercial bits of the web get more difficult to see in comparison to the outsized presence of the commercial web and all that caters to it. It’s a visibility problem that’s an inadvertent consequence of values. The commercial parts become more self-contained and link inside themselves to keep you around—after a while, you’re looping around their cul-de-sac because attention is money on the web. Non-commercial sites link out and will let you go, which immediately puts them at a disadvantage for mindshare.</p> | |||
| <p>Facebook, Google, Apple, and Amazon aren’t going anywhere at this point—nor should we expect them to—so it’s best to recalibrate the digital experience by increasing the footprint and mindshare of the kinds of cultural and communal value they can’t provide. The web isn’t like Manhattan real estate—if we want something, we can make space for it.</p> | |||
| <p>Different measuring sticks are also in order. If commercial networks on the web measure success by <em>reach and profit</em>, cultural endeavors need to see their successes in terms of <em>resonance and significance</em>. This is the new game, one that elevates both the people who make the work and those who see, use, and enjoy it.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Choice<br/>and<br/>Will<br/><br/></h1> | |||
| </p> | |||
| <div class="section"> | |||
| <p>The digital landscape has an influence on our lives, but we are more directly affected by our personal choices. We must fend for ourselves, whether or not the technology industry chooses to deal with the implications of their work.</p> | |||
| <p>Earlier, I said that I felt unfocused and twitchy—too much time in fast-paced places that see me as a bundle of nerves with a wallet, and not enough time in slower, more nourishing places, like the library. The solution seems simple: spend less time in the bad places and more time in the good places!</p> | |||
| <p>Okay, but not so fast. First, that’s easier to say than to do. Second, there are no practical steps in there. What are other people doing?</p> | |||
| </div> | |||
| <div class="section fade"> | |||
| <h2>Immunization</h2> | |||
| <p>Reading a book on paper is a simple, easy step to regain some composure and inoculate yourself against hysterics. That’s it, that’s the whole tip. Books are medicine. This suggestion, of course, is coming from the guy who just spilled a few hundred words on the greatness of libraries. My bias is showing, but follow me here.</p> | |||
| <p>A book is useful because it is entertaining and naturally offsets the time you would spend staring into your phone; it’s portable and a great sleep aide. It re-calibrates your expectations for rewards, and properly shames us all by showing us how much our attentions have atrophied. That focus improves with practice, but it will take time. Before, we were scrolling through Instagram reading screenshots of tweets. We have to work our way up to Dostoevsky, you know?</p> | |||
| <p>Most importantly, reading a book is active, unlike most of the passive consumption we do in front of screens. I think a lot of the anxiety we can feel from technology comes from that passive relationship alongside its speed. Look at cable news or your social media feeds. All day long, we’re having absurd novelty, enviable affluence, and sincere tragedy and distress sandwiched together and railgunned into our face. A book offers some necessary composure and consistency to help find our bearings in a world oriented toward violent delivery.</p> | |||
| <p>A day eventually comes along when a reader’s head clicks back into place. It’s like something important was realigned and you remembered how to carry yourself, similar to how it feels after having your back popped. There are other ways to achieve this, but reading is my preferred method, and maybe by talking about books, I can help you discover a counter-balancing activity that works for you. These benefits can come from any slow, focused, and deep practice. More on beneficial practices in a moment.</p> | |||
| <h2>Abstinence</h2> | |||
| <p>A drastic step I’ve seen is called “digital detox.” It’s sort of like a destination cleanse diet: you go off to the woods outside San Francisco, for instance, and give them your phone, laptop, and any other digital paraphernalia. The purpose of the trip is to disabuse yourself of your screen addiction by staying away from all screens and media for a week. Mysterious things happen at undisclosed locations, then attendees return home pure, with a slightly worrying glint of rapture in their eyes.</p> | |||
| <p>I haven’t done this, but I would like to try, if only to recalibrate my brain’s expectations for dopamine. Perhaps the experience would be similar to when I return to the States after a trip overseas: my tastebuds have adapted, and all American food (even the very nice stuff) tastes too sweet and salty.</p> | |||
| <p>Full digital immersion after digital abstinence seems like a difficult plunge. Attendees are dropped back into the environment that produced their problem, though, hopefully, with better skills and tools to manage it. These new strategies, however, might presume a degree of autonomy that may not be available. Most of us are not lucky enough to have much choice in where our social lives happen or what sort of technology we use at our jobs. Many will return from their detox trips, revisit these places, and get a bad taste in their mouth. Perhaps that distaste is precisely what’s needed to create technological change. Time will tell.</p> | |||
| <h2>Regulation</h2> | |||
| <p>Most of us can’t control our whole technological situation, so it’s been fascinating for me to see how people shape it in the one place where they have the most influence: raising their children. I don’t have kids, so it’s been especially interesting hearing the different standards my friends have set up. Some are laissez-faire with their kids’ use of technology, others set up extremely regimented schedules and sets of rules about what is allowed when and where. Other times things are bonkers enough to sound like a psychological experiment: a friend of mine is raising his kid exclusively on Sesame Street clips from his childhood. We’ll see how long that lasts.</p> | |||
| <p>I have no right to judgements about this, but the situation has shown me that we also create these sets of rules for ourselves—it’s just that the ones created for our kids are more evident because they are a mindful construction. The decisions for ourselves are instinctual and individualistic, so there’s usually not a cohesive philosophy behind our personal standards. It’s easy to see how scattered we can be when it’s all spelled out.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>My technological profile makes it seem like I skipped the 20th century, and it’s not just because I live in a New York City apartment without air conditioning. Let me tell you about my setup:</p> | |||
| <div class="step"> | |||
| <p>Yes to high-speed internet.</p> | |||
| </div> | |||
| <div class="step"> | |||
| <p>Increasingly, no to Twitter.</p> | |||
| </div> | |||
| <div class="step"> | |||
| <p>No to doing anything new with them.</p> | |||
| </div> | |||
| <div class="step"> | |||
| <p>No to the creepy wiretap speakers they sell.</p> | |||
| </div> | |||
| <p>Of course my standards are wildly inconsistent and sometimes completely contradictory. So, I hope all of this sounds as weird to you as other people’s setups sound strange to me. For instance: most of my friends who own an Amazon Echo also put tape over the cameras on their laptops. Why bother if you’re going to sit next to a microphone that listens to you all day? The mind is a funny place.</p> | |||
| </div> | |||
| <div class="section black"> | |||
| <p>Outside standards always seem to take on this unusual appearance, and in America, the Amish have the most prominent outside attitude to technology. The Amish are a group of religious communities located mostly in the eastern United States, primarily in Pennsylvania, Ohio, and Indiana.</p> | |||
| <p>They’re typically seen as anti-technological. Similar to my leapfrogging the 20th century, the Amish are slightly out of time and have mostly stuck to 19th-century technologies. Most notably, they still drive horse and buggy.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/amish-buggy.jpg" class="full lazyload"/></figure> | |||
| <p>Nearly all of my knowledge about the Amish’s relationship to technology comes from Kevin Kelly. Remember him? He’s the guy I previously quoted about the early web:</p> | |||
| <blockquote>“Out of complete nothingness we were harnessing a virtual commonwealth.”</blockquote> | |||
| <p>But that’s not the whole quote. He goes on to say:</p> | |||
| <blockquote>“And the internet came along and it seemed almost Amish.”</blockquote> | |||
| <p>How can the internet, something so obviously technological, seem to be Amish, a set of people resiliently holding out <em>against</em> technology?</p> | |||
| <p>It comes down to the idea of the web as a commonwealth. The Amish are not anti-technology. It’s more accurate to say they are only interested in adopting technologies which meet their community-focused criteria. While you or I make individual choices for what technologies we adopt and feel our way through the choice, the Amish collectively make these decisions, so their criteria must be much more clear.</p> | |||
| <p>They have two collective standards. First: will it strengthen the family? Second: will it strengthen the community? So when Kelly said that the early web felt Amish, he meant that the digital space they were creating felt like an open, communal space filled with strong bonds.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>How do the Amish apply these criteria? In some pretty interesting ways. I’d argue that they are only slightly more strange or arbitrary than our own choices once you know their reasons.</p> | |||
| <p>The Amish say yes to traveling by horse. Skateboards and rollerblades are also allowed.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/amish-yes.jpg" class="full multiply limitsm lazyload"/></figure> | |||
| <hr/> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/amish-no.jpg" class="full multiply limitsm lazyload"/></figure> | |||
| <p>But bicycles and cars are not. Why is that? You can stray too far from home with a car or bike. Horses are accepted, because they can only travel about 30 miles a day. Going by horse keeps you close to your family and tied to your community. You shop locally, attend church locally, and so on. According to the Amish, the choice of transportation method can either strengthen or weaken a sense of family and community.</p> | |||
| <p>This all sounds very sensible in intent, if a bit extreme in execution. Still, I’d love to hear the rationale behind some of their other choices. Disposable diapers are allowed, I think for obvious reasons, but zippers are still condemned in most communities. Chainsaws are fine, but velcro is taboo. It is all so strange, but perhaps no stranger than my enjoyment of Instagram and disdain of Facebook.</p> | |||
| <hr/> | |||
| <p>Aside from the occasional foreign standard, the Amish know what we are having to re-learn: technology’s influence is not a problem to solve through dominance; it’s a situation to navigate through clear goals and critical thinking. Attentiveness is key. Technological adoption can’t be on auto-complete.</p> | |||
| <p>Vaguely stated needs lead to bad decisions, so saying you want convenience, amusement, or productivity from technology isn’t enough. Convenience to invest the time where? Productive to what end? Everything we take in comes at the cost of something else, so it’s best to think it through and be sure it is a good deal. There are now so few benefits to early adoption.</p> | |||
| <p>The Amish lesson is that what you let in will eventually form you. We both make technology and are made by it. That paradox is uncomfortable for many people, but it must be honored. And there is hope in the situation: as any Eastern or Western spiritual mystic will tell you, a paradox is a sign that you are at the heart of the truth.</p> | |||
| </div> | |||
| <p class="section rainbowbreak"> | |||
| <h1><br/>Space<br/>for<br/>Soul<br/><br/></h1> | |||
| </p> | |||
| <div class="section black"> | |||
| <p>Here’s another quote from Kevin Kelly:</p> | |||
| <blockquote>“What’s missing is the spiritual meaning of technology.”</blockquote> | |||
| <p>If technology is increasingly a place where we live, it needs to have space for the soul, like how the library makes room for a healthy, elevated mindset while the current Penn Station inspires despair. Beauty is an important element, but purpose also matters. I think this is what Kelly is hinting at. Using technology for commerce, efficiency, and ease are not enough of a higher purpose for something that dominates a great part of our lives. The heart demands a bigger dream.</p> | |||
| <p>What is it all for? What can we imagine? These questions become critical as we find ourselves in a time where we are confronted with questions about identity, self-worth, community, and citizenship in this connected world. If technology is not only for profit and ease, what is it for? We must use our soulful imaginations and be specific.</p> | |||
| <hr/> | |||
| <p>Most of our dream worlds are dystopias. One reason for this is that we feel technology is only producing commercial possibilities while neglecting or distorting the other essential parts of us. It’s not being very library-like. People have an easier time imagining how technology’s influence can go wrong. Our imaginations have a negative flair, and it’s always been this way.</p> | |||
| <p>Take a look at any medieval altarpiece that depicts heaven and hell.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-whole.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement by Hans Memling</figcaption></figure> | |||
| <p>The hell panel is always so much more interesting and fully realized.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-hell.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement (Detail) by Hans Memling</figcaption></figure> | |||
| <p>Hell is a masochistic orgy of nightmares rendered with impressive, inventive detail.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-heaven.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement (Detail) by Hans Memling</figcaption></figure> | |||
| <p>Meanwhile in heaven, it is a bunch of severe and blank men, sitting on clouds, looking like they’re in a board meeting.</p> | |||
| <p>This is the divine reward?</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/panel-jamsession.jpg" class="full lazyload"/> | |||
| <figcaption>The Last Judgement (Detail) by Hans Memling</figcaption></figure> | |||
| <p>The only ones in heaven who have the opportunity for a good time are the angels jamming on lutes and trumpets at the gates. But it doesn’t seem like a very celebratory welcome committee. Maybe Prince is up there whipping everyone into shape?</p> | |||
| <p>Our minds can be gruesomely specific about our fears, but can only make vague, imprecise gestures at our desires through broad words like love, happiness, or contentedness. But these words provide no insight on how to actually achieve any of it or what form it takes. At least advertising is specific about what will make us happy. Perhaps that’s why we trust it, even though we know we shouldn’t.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <p>Let’s go back to Kelly’s quote. Spiritual technology is such a captivating phrase. It seems to open up possibilities instead of closing them down, and can help us ask more incisive questions about what we want to happen up there in the clouds. What does the good life look like, and if we use technology to help us get there, what form should it take? What’s the dream again?</p> | |||
| <p>I started thinking about what could be considered spiritual technology in a secular sense to help me decide what technology stays and what goes from my life. A few examples came to mind, ranging from small acts like lighting a candle to larger practices like yoga or meditation. The obvious deficiency was that nothing I identified involved screens, which is a bit problematic if you’re searching for ways to add some soul to technology.</p> | |||
| <p>That’s why I was pleased to find the <a href="http://humanetech.com/app-ratings/">app ratings survey by the Center for Humane Technology</a>. The survey tracked how much time the 200,000 participants spent in each app on their phone, then asked them if they were happy with that time or if they regretted it.</p> | |||
| <p>Let’s start with the apps people regret: Grindr, Candy Crush, Facebook, Reddit, Twitter, Tinder, Instagram, Snapchat—generally the apps we resort to out of boredom, desperation, or loneliness. It's shocking to me that the durations average between 40 minutes to over an hour per day for <em>each</em> app. That’s downright crazy. People are also very regretful of the time spent. It seems these places make our boredom, desperation, or loneliness worse.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/survey-unhappy.jpg" class="full limitmed lazyload"/></figure> | |||
| <p>Now let’s look at the apps where the participants were pleased with themselves: Calm, Headspace, Insight Timer are three of the top four, and all are apps that help you meditate. I’ll repeat: three out of the top four could be considered spiritual technology. The other two in the top five are a calendar app and the weather, which, at this point, might as well be the digital air we breath.</p> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/survey-happy.jpg" class="full limitmed lazyload"/></figure> | |||
| <p>A majority of the remaining apps provide art: Spotify, Kindle, Audible, Amazon Music, Podcasts. And look at the average usage: it tops out at 26 minutes of reading or 20 minutes of meditating, but most times are 10 minutes or less. I find it absolutely fascinating that there are no social or communication apps on this “Most Happy” list. Every app either points inward through personal practice, organization, and art, or points outward to help us navigate the world. It seems our alone time with technology should truly be alone time, and that halfway socializing is a source of disappointment, not pleasure.</p> | |||
| </div> | |||
| <div class="section fade"> | |||
| <p>The survey provides some clear guidance on forming new technology and making decisions about what we should keep around. There is enough entertainment and connection without intimacy out there, so spiritual technology must take a different path and be a gateway to induce a state of well-being. These tools are about teaching and reinforcing methods, and acknowledge that a primary source of happiness is not convenience, but empowerment.</p> | |||
| <p>I started to find other examples of what could be considered spiritual technology. Across the board, they were programs for people instead of programs for computers. The software was merely an assistive device to help people more easily follow the program. It was technology in its best role: as a sidekick for personal application.</p> | |||
| <h2>Couch to 5K</h2> | |||
| <p>One example is Couch to 5K, a beginner’s program for running. It began <a href="https://bigmedium.com/ideas/c25k.html">as a written routine to follow for a couple months</a>, then some industrious developers came along and wrote apps to help schedule and track your runs. I did a quick search on the app store to check how many apps may be out there, but I lost track at about 20.</p> | |||
| <h2>The New York Times H.I.I.T. Workout</h2> | |||
| <p>In a similar vein, the New York Times published their <a href="https://well.blogs.nytimes.com/2013/05/09/the-scientific-7-minute-workout/">high-impact, seven-minute workout</a> a few years ago, and shortly after, many apps showed up to help people along.</p> | |||
| <h2>Guided Meditation</h2> | |||
| <p>And, of course, there are all the apps for guided meditation shown in the survey above. Meditation (along with reading) has turned into one of my daily non-negotiable activities, and my commitment is thanks to some careful prodding by app notifications.</p> | |||
| <h2>And others...</h2> | |||
| <p>The examples need not only be about health: for instance, consider the glut of productivity apps that follow <a href="https://en.wikipedia.org/wiki/Getting_Things_Done">David Allen’s <em>Getting Things Done</em> methodology.</a> I’m sure there are many other examples.</p> | |||
| <p>One of my favorites has been new research from my friend <a href="http://colly.com">Simon Collison</a>. He’s focusing on what he calls <a href="https://tinyletter.com/colly/archive">“The Internet of Natural Things”</a>, meaning ways to use technology to enhance and deepen our connection to the natural world. All of his recommendations have been wonderful. They range from the expected, like the app <a href="https://www.inaturalist.org">iNaturalist</a> to help you identify trees and flowers, bugs and other critters. Others are more odd and imaginative, like his recommendation of a bat detector. It’s called the <a href="https://www.echometertouch.com">Echo Meter Touch</a>, and it plugs into your phone to transform ultrasonic bat calls into audio you can hear. Yes, it’s a real batphone. No matter what the technology, the goal is to cater to our most primary spiritual need: to embody ourselves in the landscape, illuminate our awareness of what is around us, and to encourage us along in the daily practice of discovering our place in the family of life.</p> | |||
| <hr/> | |||
| <p>It’s interesting to note that many of these apps are corporeal. Contrary to intuition, the way to better technology is through the body, because we do not leave our body behind when we log on. We may be striving to create a nourishing digital condition for ourselves, but it will always be informed by what’s happening on the ground. The place of technology in our lives begins and ends with the place where we find ourselves.</p> | |||
| </div> | |||
| <div class="section"> | |||
| <figure><img data-src="https://frankchimero.com/writing/the-good-room/images/nypl-happyme.jpg" class="tinycentered lazyload"/></figure> | |||
| <p>Which brings me back to my seat at the library. It was a Tuesday afternoon, cold and quiet, the day wrapped up in that winter sun which gives the sharpest light.</p> | |||
| <p>I thought about how to fill out that vague painting of heaven, asking what we want, what we need. What could be up there in those clouds? My dream wasn’t hard to find. It was all around me: a comfortable, lofty, and shared space where everything is borrowed, always circulating. This is a good room for all of us.</p> | |||
| <p>There’s the student engaged in her studies, the retiree finally getting to what he has put off for far too long, the family vibrating with anticipation for their trip, the kid in headphones absorbed in making the song he’s about to give to the world. Then there’s me, wondering if this place means as much to them as it does to me. What’s it worth? The money only matters so you can get to this way of being: to have the time, find the opening, get the chance to only be. It takes something to get here, and yet it doesn’t. We all walked right in. I was happy enough to sit and appreciate it all. Maybe that painting of heaven was right—nothing else was necessary.</p> | |||
| <hr/> | |||
| <p>I only wrote three sentences on the day I took the photo.</p> | |||
| <blockquote> | |||
| Everyone is looking for help.<br/> | |||
| Modest needs should be lavishly met.<br/> | |||
| Be grateful for every chance to do something right.<br/> | |||
| </blockquote> | |||
| <p>Could this dream be big enough?</p> | |||
| </div> | |||
+ 527
- 0
cache/02fabe23e3fc45303b659417eaf6ddad/index.html
File diff suppressed because it is too large
View File
+ 5
- 0
cache/02fabe23e3fc45303b659417eaf6ddad/index.md
File diff suppressed because it is too large
View File
+ 537
- 0
cache/031fd65bf92fec13351403b10831acd7/index.html
View File
| @@ -0,0 +1,537 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Dépeindre un monde trop sombre (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://n.survol.fr/n/depeindre-un-monde-trop-sombre"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Dépeindre un monde trop sombre (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://n.survol.fr/n/depeindre-un-monde-trop-sombre">Source originale du contenu</a></h3> | |||
| <blockquote class="wp-block-quote"><p>Mon souci, étant donné les comptes que je suis, est que le fil d’actualité est rempli d’informations et de messages plutôt critiques à propos de la société dépeignant un monde sombre. Avant je considérais ces messages intéressants, aujourd’hui je trouve que la balance penche trop vers le négatif et ça a un impact émotionnel. Je souhaiterais également trouver des messages positifs pour conserver mon bien-être.</p><cite><em><a rel="noreferrer noopener" href="https://www.killiankemps.fr/fr/blog/ma-lassitude-des-reseaux-sociaux-aujourdhui/" target="_blank">Ma lassitude des réseaux sociaux aujourd’hui</a></em> (<a href="https://larlet.fr/david/stream/2019/11/05/">via David</a>)</cite></blockquote> | |||
| <p>Je contribue certainement beaucoup à ce climat. Quelque part c’est aussi justement une façon de me protéger, pour ne pas garder pour moi, pour sortir les choses. C’est aussi une façon de partager, parce que la prise de conscience me semble utile si on veut changer les choses. C’est parfois ces mécanismes qui m’ont appris et fait changer.</p> | |||
| <p>Et en même temps je comprends le problème. J’acquiesce, même.</p> | |||
| <p>Autre façon de voir les choses : Jusqu’où vouloir filtrer le négatif et encourager le positif revient à se mettre la tête dans le sable pour ne pas voir la réalité ? </p> | |||
| <p>À quel point filtrer ce côté sombre, même partiellement, n’est pas une posture de privilégié qui n’est pas impacté aussi directement que d’autres ? Un peu comme faire semblant de ne pas voir le SDF en sortant de la boulangerie avec un gros éclair au chocolat en main.</p> | |||
| <p>Ce ne sont pas des jugements mais des questions ouvertes chez moi. Je n’ai aucune réponse à tout ça.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://n.survol.fr/n/depeindre-un-monde-trop-sombre">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 25
- 0
cache/031fd65bf92fec13351403b10831acd7/index.md
View File
| @@ -0,0 +1,25 @@ | |||
| title: Dépeindre un monde trop sombre | |||
| url: https://n.survol.fr/n/depeindre-un-monde-trop-sombre | |||
| hash_url: 031fd65bf92fec13351403b10831acd7 | |||
| <blockquote class="wp-block-quote"><p>Mon souci, étant donné les comptes que je suis, est que le fil d’actualité est rempli d’informations et de messages plutôt critiques à propos de la société dépeignant un monde sombre. Avant je considérais ces messages intéressants, aujourd’hui je trouve que la balance penche trop vers le négatif et ça a un impact émotionnel. Je souhaiterais également trouver des messages positifs pour conserver mon bien-être.</p><cite><em><a rel="noreferrer noopener" href="https://www.killiankemps.fr/fr/blog/ma-lassitude-des-reseaux-sociaux-aujourdhui/" target="_blank">Ma lassitude des réseaux sociaux aujourd’hui</a></em> (<a href="https://larlet.fr/david/stream/2019/11/05/">via David</a>)</cite></blockquote> | |||
| <p>Je contribue certainement beaucoup à ce climat. Quelque part c’est aussi justement une façon de me protéger, pour ne pas garder pour moi, pour sortir les choses. C’est aussi une façon de partager, parce que la prise de conscience me semble utile si on veut changer les choses. C’est parfois ces mécanismes qui m’ont appris et fait changer.</p> | |||
| <p>Et en même temps je comprends le problème. J’acquiesce, même.</p> | |||
| <p>Autre façon de voir les choses : Jusqu’où vouloir filtrer le négatif et encourager le positif revient à se mettre la tête dans le sable pour ne pas voir la réalité ? </p> | |||
| <p>À quel point filtrer ce côté sombre, même partiellement, n’est pas une posture de privilégié qui n’est pas impacté aussi directement que d’autres ? Un peu comme faire semblant de ne pas voir le SDF en sortant de la boulangerie avec un gros éclair au chocolat en main.</p> | |||
| <p>Ce ne sont pas des jugements mais des questions ouvertes chez moi. Je n’ai aucune réponse à tout ça.</p> | |||
+ 538
- 0
cache/0371234edf3786107d5522cfa14b976a/index.html
View File
| @@ -0,0 +1,538 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Michel Serres : «La question est de savoir qui sera le dépositaire de nos données» (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.lefigaro.fr/secteur/high-tech/2015/03/13/01007-20150313ARTFIG00159-michel-serres-la-question-est-de-savoir-qui-sera-le-depositaire-de-nos-donnees.php"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Michel Serres : «La question est de savoir qui sera le dépositaire de nos données» (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.lefigaro.fr/secteur/high-tech/2015/03/13/01007-20150313ARTFIG00159-michel-serres-la-question-est-de-savoir-qui-sera-le-depositaire-de-nos-donnees.php">Source originale du contenu</a></h3> | |||
| <p>En 2012, Michel Serres a publié <i>Petite poucette</i>. Le philosophe français, membre de l'Académie française, y livrait <a href="http://www.lefigaro.fr/secteur/high-tech/2013/02/08/01007-20130208ARTFIG00585-l-homme-nouveau-tient-le-monde-en-main.php" target="">une vision optimiste des transformations provoquées par le numérique</a>. Son héroïne passe ses journées les pouces collés sur l'écran de son smartphone. Elle accède à une montagne de savoir sur Wikipedia. Dialogue sur Facebook. Elle et ses amis «peuvent manipuler plusieurs informations à la fois. Ils ne connaissent, ni n'intègrent, ni ne synthétisent comme nous, leurs ascendants. Ils n'ont plus la même tête», écrivait le philosophe.</p> | |||
| <p><p>Ce type de transformation, qui bouscule les civilisations, est rare. Il y a plus de deux mille ans, l'écriture a provoqué une première vague de transformations économiques, juridiques, politiques, pédagogiques et religieuses. Durant la Renaissance, l'imprimerie a conduit à de nouveaux bouleversements. Selon Michel Serres, nous vivons aujourd'hui la troisième de ces grandes révolutions, période extraordinaire de nouveautés, mais aussi de crises. Alors que les ordinateurs et les smartphones nous conduisent à externatiliser notre savoir, notre mémoire, «que reste-t-il sur nos épaules? (...) Sommes-nous condamnés à devenir intelligents?» questionne le philosophe.</p> <p>Trois ans après la parution de son livre, <i>Le Figaro </i>a souhaité prendre des nouvelles de Petite poucette et de ses amis.</p> <p><strong>LE FIGARO. - Depuis que vous avez fait le portrait de la Petite poucette, le numérique n'a pas cessé d'évoluer. On nous propose désormais de porter des lunettes et des montres connectées. Après avoir assisté à la mutation de notre mémoire, va-t-on perdre peu à peu l'usage de notre corps, remplacé par des avatars numériques?</strong></p> <p><strong>MICHEL SERRES. - </strong>Depuis la question posée par le sphinx à Œdipe, on sait que les vieillards peuvent marcher avec une canne. La technique servait déjà à suppléer une déficience, comme le font ces nouveaux objets. On a ensuite inventé les lunettes pour le regard, ou encore les pacemakers. Pour autant, le fait que j'ai une canne, des lunettes ou un pacemaker n'a pas bouleversé l'Humanité au point de considérer que l'on était tous obligés d'en utiliser. C'est la vieille idée que la technique est terrible, qu'elle va nous dévorer. Je remarque simplement que le numérique n'a pas encore trouvé son expression originale. Avec le smartphone et l'ordinateur, où il est encore question de page, il est toujours pris dans le format du livre.</p> <aside class="fig-embed fig-exergue fig-media-gauche fig-exergue-gauche"> | |||
| <blockquote> | |||
| <p>Dans la Silicon Valley, ils méditent, car ils ont perdu la religion de leurs ancêtres et que le monde technique n'est pas tout.</p> </blockquote> | |||
| </aside> <p><strong>Depuis la parution de votre livre, nous avons aussi assisté, dans la Silicon Valley, à un regain d'intérêt pour la méditation, tandis que l'on voit fleurir des théories prônant la déconnexion. Va-t-on assister à un reflux du numérique?</strong></p> <p>C'est une réaction d'équilibre. Il y a quinze ans, le soulier de randonnée a connu une envolée de son chiffre d'affaires. Les gens étaient tellement dans les villes qu'ils ont voulu aller à la campagne, en plein air. Dans la Silicon Valley, et je connais les gens dont vous parlez, ils méditent, car ils ont perdu la religion de leurs ancêtres et que le monde technique n'est pas tout. Dès qu'il y a quelque chose de nouveau, tout le monde a peur. Il est même très à la mode de dire que ce qui va nous arriver est terrible. L'innovation est invisible, mais les gens redoutent le changement. Aujourd'hui, nous sommes déjà dans le numérique. C'est fini. Il n'y a pas de doute là-dessus. En revanche, je ne sais pas quelle dimension cela va prendre. Il est impossible de le savoir. Le téléphone a été inventé pour permettre aux belles dames d'écouter de l'opéra de chez elles. Comme vous le voyez, son usage a beaucoup changé depuis.</p> <figure class="fig-photo fig-media-droite" itemscope itemtype="http://schema.org/ImageObject"> | |||
| <img itemprop="contentURL" alt="" src="http://i.f1g.fr/media/ext/300x400_crop/www.lefigaro.fr/medias/2015/03/13/PHOada8b96c-c8e8-11e4-bac3-5be59eee9a01-300x400.jpg"><figcaption class="fig-media-legende"> | |||
| <p><span class="fig-media-credits"> Crédits photo : <span itemprop="author">ETIENNE DE MALGLAIVE/AFP</span></span> </p> | |||
| </figcaption></figure> <p><strong>Vous faites l'éloge de la «pensée algorithmique» et du code. Ce que nous voyons aussi, c'est que les algorithmes de Facebook ou de Google peuvent façonner la manière dont nous suivons l'actualité, dont nous prenons des nouvelles de nos amis. Nous rendent-ils vraiment plus libre?</strong></p> <p>Quand on vous demandait de raconter vos vacances, vous les racontiez déjà selon des codes bien précis, qui étaient la syntaxe française, le sens des mots, l'orthographe. C'était votre individualité, mais c'était aussi un passage par des codes. L'individu qui inventerait lui-même son propre mode d'expression ne serait pas compris et parfaitement paranoïaque. Vous passez toujours par un code commun. Qu'il soit la propriété de monsieur Google ou de monsieur Facebook, c'est là un autre problème et l'objet de grandes discussions aujourd'hui. Il y a deux groupes, ceux qui sont pour une possession privée, ceux pour une possession d'État. Ce sont selon moi presque deux Big Brother. Entre l'un et l'autre, cela m'est presque égal. Je préfèrerais des appropriations plus parcellaires.</p> <p><strong>C'est-à-dire?</strong></p> <p>Un capital est en train de se former, qui est le capital des données. La question est de savoir qui sera le dépositaire de ces données. De même que les notaires sont en grande partie les dépositaires de mes secrets, de mon testament, de mon contrat de mariage, parfois de mon argent, il nous faudrait inventer des «dataires», des notaires des données. Elles ne seraient confiées ni à un État, ni à Google et à Facebook, mais à un nuage de dépositaires. Et ce serait au passage une nouvelle manière d'exister pour le notariat.</p> <aside class="fig-embed fig-exergue fig-media-gauche fig-exergue-gauche"> | |||
| <blockquote> | |||
| <p>On sait qu'il existe d'importants pouvoirs. Mais le scandale des révélations d'Edward Snowden a prouvé qu'une seule personne pouvait les mettre à mal.</p> </blockquote> | |||
| </aside> <p><strong>Vous avez choisi de parler de la Petite poucette, au féminin, car les dernières décennies «virent la victoire des femmes». Les entreprises du numérique, pourtant, restent en grande partie dirigées par des hommes...</strong></p> <p>Depuis cinquante ans, je constate que les femmes sont en tête des concours et des examens. On se moque que ces entreprises soient toujours gouvernées par des hommes. Le numérique révolutionne la société par le bas, non par le haut. Ce que nous avons fait est en train de changer le monde. Cela ne vient pas des patrons, de la hérarchie, mais des découvertes que nous avons faites à la base. Voilà pourquoi c'est imprévisible. Personne n'avait décidé que l'on utiliserait Internet pour faire du covoiturage jusqu'à Tours. </p> <p><strong>Le pouvoir pris des géants du Net dans nos vies ne vous inquiète-t-il pas?</strong></p> <p>On sait qu'il existe d'importants pouvoirs. Mais le scandale des révélations d'Edward Snowden a prouvé qu'une seule personne pouvait les mettre à mal. Toutes ces sociétés sont fragiles. Nous avons déjà connu trois âges. Celui du matériel, avec IBM que l'on a tendance à oublier, celui du logiciel avec Microsoft qui ne va pas très bien, et celui plus sociétal, avec Google et Facebook. Ce sont des géants très fragiles. Je crois que les nouvelles technologies favorisent énormément la démocratie, le «peer to peer», et le pouvoir de Petite poucette comme individu. Dans l'Antiquité, il n'y avait pas d'individu. Il y avait les Athéniens, les Juifs, les Égyptiens. Peu à peu, l'individu est né. C'est Saint-Paul qui l'invente et puis il a fallu Saint-Agustin, Descartes, les autobiographies. Petite poucette a moins de libido d'appartenance que ses prédécesseurs. Elle est peut-être le premier individu de l'Histoire.</p></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.lefigaro.fr/secteur/high-tech/2015/03/13/01007-20150313ARTFIG00159-michel-serres-la-question-est-de-savoir-qui-sera-le-depositaire-de-nos-donnees.php">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 14
- 0
cache/0371234edf3786107d5522cfa14b976a/index.md
View File
| @@ -0,0 +1,14 @@ | |||
| title: Michel Serres : «La question est de savoir qui sera le dépositaire de nos données» | |||
| url: http://www.lefigaro.fr/secteur/high-tech/2015/03/13/01007-20150313ARTFIG00159-michel-serres-la-question-est-de-savoir-qui-sera-le-depositaire-de-nos-donnees.php | |||
| hash_url: 0371234edf3786107d5522cfa14b976a | |||
| <p>En 2012, Michel Serres a publié <i>Petite poucette</i>. Le philosophe français, membre de l'Académie française, y livrait <a href="http://www.lefigaro.fr/secteur/high-tech/2013/02/08/01007-20130208ARTFIG00585-l-homme-nouveau-tient-le-monde-en-main.php" target="">une vision optimiste des transformations provoquées par le numérique</a>. Son héroïne passe ses journées les pouces collés sur l'écran de son smartphone. Elle accède à une montagne de savoir sur Wikipedia. Dialogue sur Facebook. Elle et ses amis «peuvent manipuler plusieurs informations à la fois. Ils ne connaissent, ni n'intègrent, ni ne synthétisent comme nous, leurs ascendants. Ils n'ont plus la même tête», écrivait le philosophe.</p> <p>Ce type de transformation, qui bouscule les civilisations, est rare. Il y a plus de deux mille ans, l'écriture a provoqué une première vague de transformations économiques, juridiques, politiques, pédagogiques et religieuses. Durant la Renaissance, l'imprimerie a conduit à de nouveaux bouleversements. Selon Michel Serres, nous vivons aujourd'hui la troisième de ces grandes révolutions, période extraordinaire de nouveautés, mais aussi de crises. Alors que les ordinateurs et les smartphones nous conduisent à externatiliser notre savoir, notre mémoire, «que reste-t-il sur nos épaules? (...) Sommes-nous condamnés à devenir intelligents?» questionne le philosophe.</p> <p>Trois ans après la parution de son livre, <i>Le Figaro </i>a souhaité prendre des nouvelles de Petite poucette et de ses amis.</p> <p><strong>LE FIGARO. - Depuis que vous avez fait le portrait de la Petite poucette, le numérique n'a pas cessé d'évoluer. On nous propose désormais de porter des lunettes et des montres connectées. Après avoir assisté à la mutation de notre mémoire, va-t-on perdre peu à peu l'usage de notre corps, remplacé par des avatars numériques?</strong></p> <p><strong>MICHEL SERRES. - </strong>Depuis la question posée par le sphinx à Œdipe, on sait que les vieillards peuvent marcher avec une canne. La technique servait déjà à suppléer une déficience, comme le font ces nouveaux objets. On a ensuite inventé les lunettes pour le regard, ou encore les pacemakers. Pour autant, le fait que j'ai une canne, des lunettes ou un pacemaker n'a pas bouleversé l'Humanité au point de considérer que l'on était tous obligés d'en utiliser. C'est la vieille idée que la technique est terrible, qu'elle va nous dévorer. Je remarque simplement que le numérique n'a pas encore trouvé son expression originale. Avec le smartphone et l'ordinateur, où il est encore question de page, il est toujours pris dans le format du livre.</p> <aside class="fig-embed fig-exergue fig-media-gauche fig-exergue-gauche"> | |||
| <blockquote> | |||
| <p>Dans la Silicon Valley, ils méditent, car ils ont perdu la religion de leurs ancêtres et que le monde technique n'est pas tout.</p> </blockquote> | |||
| </aside> <p><strong>Depuis la parution de votre livre, nous avons aussi assisté, dans la Silicon Valley, à un regain d'intérêt pour la méditation, tandis que l'on voit fleurir des théories prônant la déconnexion. Va-t-on assister à un reflux du numérique?</strong></p> <p>C'est une réaction d'équilibre. Il y a quinze ans, le soulier de randonnée a connu une envolée de son chiffre d'affaires. Les gens étaient tellement dans les villes qu'ils ont voulu aller à la campagne, en plein air. Dans la Silicon Valley, et je connais les gens dont vous parlez, ils méditent, car ils ont perdu la religion de leurs ancêtres et que le monde technique n'est pas tout. Dès qu'il y a quelque chose de nouveau, tout le monde a peur. Il est même très à la mode de dire que ce qui va nous arriver est terrible. L'innovation est invisible, mais les gens redoutent le changement. Aujourd'hui, nous sommes déjà dans le numérique. C'est fini. Il n'y a pas de doute là-dessus. En revanche, je ne sais pas quelle dimension cela va prendre. Il est impossible de le savoir. Le téléphone a été inventé pour permettre aux belles dames d'écouter de l'opéra de chez elles. Comme vous le voyez, son usage a beaucoup changé depuis.</p> <figure class="fig-photo fig-media-droite" itemscope itemtype="http://schema.org/ImageObject"> | |||
| <img itemprop="contentURL" alt="" src="http://i.f1g.fr/media/ext/300x400_crop/www.lefigaro.fr/medias/2015/03/13/PHOada8b96c-c8e8-11e4-bac3-5be59eee9a01-300x400.jpg"><figcaption class="fig-media-legende"> | |||
| <p><span class="fig-media-credits"> Crédits photo : <span itemprop="author">ETIENNE DE MALGLAIVE/AFP</span></span> </p> | |||
| </figcaption></figure> <p><strong>Vous faites l'éloge de la «pensée algorithmique» et du code. Ce que nous voyons aussi, c'est que les algorithmes de Facebook ou de Google peuvent façonner la manière dont nous suivons l'actualité, dont nous prenons des nouvelles de nos amis. Nous rendent-ils vraiment plus libre?</strong></p> <p>Quand on vous demandait de raconter vos vacances, vous les racontiez déjà selon des codes bien précis, qui étaient la syntaxe française, le sens des mots, l'orthographe. C'était votre individualité, mais c'était aussi un passage par des codes. L'individu qui inventerait lui-même son propre mode d'expression ne serait pas compris et parfaitement paranoïaque. Vous passez toujours par un code commun. Qu'il soit la propriété de monsieur Google ou de monsieur Facebook, c'est là un autre problème et l'objet de grandes discussions aujourd'hui. Il y a deux groupes, ceux qui sont pour une possession privée, ceux pour une possession d'État. Ce sont selon moi presque deux Big Brother. Entre l'un et l'autre, cela m'est presque égal. Je préfèrerais des appropriations plus parcellaires.</p> <p><strong>C'est-à-dire?</strong></p> <p>Un capital est en train de se former, qui est le capital des données. La question est de savoir qui sera le dépositaire de ces données. De même que les notaires sont en grande partie les dépositaires de mes secrets, de mon testament, de mon contrat de mariage, parfois de mon argent, il nous faudrait inventer des «dataires», des notaires des données. Elles ne seraient confiées ni à un État, ni à Google et à Facebook, mais à un nuage de dépositaires. Et ce serait au passage une nouvelle manière d'exister pour le notariat.</p> <aside class="fig-embed fig-exergue fig-media-gauche fig-exergue-gauche"> | |||
| <blockquote> | |||
| <p>On sait qu'il existe d'importants pouvoirs. Mais le scandale des révélations d'Edward Snowden a prouvé qu'une seule personne pouvait les mettre à mal.</p> </blockquote> | |||
| </aside> <p><strong>Vous avez choisi de parler de la Petite poucette, au féminin, car les dernières décennies «virent la victoire des femmes». Les entreprises du numérique, pourtant, restent en grande partie dirigées par des hommes...</strong></p> <p>Depuis cinquante ans, je constate que les femmes sont en tête des concours et des examens. On se moque que ces entreprises soient toujours gouvernées par des hommes. Le numérique révolutionne la société par le bas, non par le haut. Ce que nous avons fait est en train de changer le monde. Cela ne vient pas des patrons, de la hérarchie, mais des découvertes que nous avons faites à la base. Voilà pourquoi c'est imprévisible. Personne n'avait décidé que l'on utiliserait Internet pour faire du covoiturage jusqu'à Tours. </p> <p><strong>Le pouvoir pris des géants du Net dans nos vies ne vous inquiète-t-il pas?</strong></p> <p>On sait qu'il existe d'importants pouvoirs. Mais le scandale des révélations d'Edward Snowden a prouvé qu'une seule personne pouvait les mettre à mal. Toutes ces sociétés sont fragiles. Nous avons déjà connu trois âges. Celui du matériel, avec IBM que l'on a tendance à oublier, celui du logiciel avec Microsoft qui ne va pas très bien, et celui plus sociétal, avec Google et Facebook. Ce sont des géants très fragiles. Je crois que les nouvelles technologies favorisent énormément la démocratie, le «peer to peer», et le pouvoir de Petite poucette comme individu. Dans l'Antiquité, il n'y avait pas d'individu. Il y avait les Athéniens, les Juifs, les Égyptiens. Peu à peu, l'individu est né. C'est Saint-Paul qui l'invente et puis il a fallu Saint-Agustin, Descartes, les autobiographies. Petite poucette a moins de libido d'appartenance que ses prédécesseurs. Elle est peut-être le premier individu de l'Histoire.</p> | |||
+ 547
- 0
cache/037c1290a99c2e030ab70f72d4797092/index.html
View File
| @@ -0,0 +1,547 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>#CodeImpot : un hackathon autour de l’ouverture du code source du calculateur impôts (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.etalab.gouv.fr/codeimpot-un-hackathon-autour-de-louverture-du-code-source-du-calculateur-impots"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| #CodeImpot : un hackathon autour de l’ouverture du code source du calculateur impôts (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://www.etalab.gouv.fr/codeimpot-un-hackathon-autour-de-louverture-du-code-source-du-calculateur-impots">Source originale du contenu</a></h3> | |||
| <p>Pour la première fois en France, une administration va au-delà de l’ouverture des données publiques et met à disposition le code source d’un de ses calculateurs. La <a href="http://www.economie.gouv.fr/dgfip" target="_blank">Direction générale des finances publiques</a> (DGFiP) ouvre ainsi à tous le code source de son calculateur impôt. Pour accompagner cette ouverture, Etalab et la DGFiP organisent conjointement les 1er et 2avril, un hackathon de deux jours : <a href="https://twitter.com/search?q=%23codeimpot&src=typd" target="_blank">#CodeImpot</a>.</p> | |||
| <p><strong>L’ouverture du code source d’un calculateur par une administration, une première en France</strong></p> | |||
| <p>La Direction générale des finances publiques mettra à partir du 1er avril le code source du calculateur impôt à la disposition de tous. Acte de transparence et de <a href="https://www.etalab.gouv.fr/gouvernement-ouvert">gouvernement ouvert</a>, cette ouverture permettra d’expliciter les modalités de calcul des impôts, dans l’esprit de l’<a href="http://www.assemblee-nationale.fr/14/projets/pl3318.asp" target="_blank">article 2 du projet de loi numérique</a>. Elle est aussi un gage d’innovation car de nouveaux usages pourraient en découler, à l’image du <a href="http://www.openfisca.fr/" target="_blank">micro-simulateur ouvert OpenFisca</a>, que ce code enrichira.</p> | |||
| <p>Ce code source sera présenté dans sa version 2014 qui a permis de calculer le montant d’imposition de 37 millions de foyers fiscaux. Il s’attache uniquement à la fiscalité des personnes. Développé par la DGFiP dans un langage dédié, le langage M, ce code source est transformé par Etalab en <a href="https://fr.wikipedia.org/wiki/Arbre_syntaxique_abstrait" target="_blank">arbre syntaxique abstrait</a> qui sert de base à une compilation en langage Python. Ces deux déclinaisons seront également mises à disposition au début du hackathon.</p> | |||
| <p><strong>#CodeImpot, un hackathon de deux jours pour accompagner l’ouverture du code source </strong></p> | |||
| <p>Pour accompagner l’ouverture et développer des cas d’usage, Etalab et la DGFiP organisent un hackathon autour de ce code source. Pourront en découler à travers différents ateliers des traductions de la « calculette impôt » vers d’autres langages de programmation, permettant le développement d’applications ou d’API Web, et des réutilisations par des chercheurs et des économistes pour réaliser des évaluations et des études.</p> | |||
| <p>Ce hackathon de deux jours aura lieu les 1er et 2 avril à la <a href="https://twitter.com/MozillaParis" target="_blank">fondation Mozilla</a> (<a href="http://www.openstreetmap.org/node/2883451098" target="_blank"><span class="street-address">16 Bis Boulevard Montmartre,</span> <span class="locality">Paris</span> </a><span class="postal-code"><a href="http://www.openstreetmap.org/node/2883451098" target="_blank">75009</a>). Développeurs, économistes, fiscalistes, venus de d’administrations, de startups ou encore de laboratoires : les participants intéressés sont <a href="https://www.eventbrite.fr/e/billets-codeimpot-21385456476"><strong>invités à s’inscrire aux deux jours du hackathon</strong></a>. Des agents de la DGFiP et les équipes d’Etalab et d’OpenFisca seront présents les accompagner dans leurs travaux. Les restitutions auront lieu le samedi 2 avril à partir de 17h où un large public est <a href="https://www.eventbrite.fr/e/billets-codeimpot-21385456476">également invité à s’inscrire</a>.<br/> | |||
| </span></p> | |||
| <p>Un <a href="https://mensuel.framapad.org/p/OpenImpots">Framapad</a> est <strong>ouvert</strong><strong> à la contribution de tous</strong> pour recenser en amont de l’événement les idées des participants. Ceux désirant travailler sur un sujet précis durant le hackathon auront également l’opportunité de le présenter en deux minutes dans la matinée du 1er avril afin de former un groupe de travail autour de celui-ci.</p> | |||
| <p>En s’engageant dans le mouvement d’ouverture des codes sources des logiciels, la DGFiP ouvre la voie à la transparence des calculs et algorithmes qu’ils produisent. Cette démarche inédite pourrait faire école dans d’autres domaines, comme le calcul des droits à la retraite ou bien l’affectation des élèves dans l’enseignement supérieur.</p> | |||
| <p><em>Légende : la data-visualisation ci-dessus représente les relations entre les variables du code source des impôts.<br/> | |||
| </em></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://www.etalab.gouv.fr/codeimpot-un-hackathon-autour-de-louverture-du-code-source-du-calculateur-impots">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 16
- 0
cache/037c1290a99c2e030ab70f72d4797092/index.md
View File
| @@ -0,0 +1,16 @@ | |||
| title: #CodeImpot : un hackathon autour de l’ouverture du code source du calculateur impôts | |||
| url: https://www.etalab.gouv.fr/codeimpot-un-hackathon-autour-de-louverture-du-code-source-du-calculateur-impots | |||
| hash_url: 037c1290a99c2e030ab70f72d4797092 | |||
| <p>Pour la première fois en France, une administration va au-delà de l’ouverture des données publiques et met à disposition le code source d’un de ses calculateurs. La <a href="http://www.economie.gouv.fr/dgfip" target="_blank">Direction générale des finances publiques</a> (DGFiP) ouvre ainsi à tous le code source de son calculateur impôt. Pour accompagner cette ouverture, Etalab et la DGFiP organisent conjointement les 1er et 2avril, un hackathon de deux jours : <a href="https://twitter.com/search?q=%23codeimpot&src=typd" target="_blank">#CodeImpot</a>.</p> | |||
| <p><strong>L’ouverture du code source d’un calculateur par une administration, une première en France</strong></p> | |||
| <p>La Direction générale des finances publiques mettra à partir du 1er avril le code source du calculateur impôt à la disposition de tous. Acte de transparence et de <a href="https://www.etalab.gouv.fr/gouvernement-ouvert">gouvernement ouvert</a>, cette ouverture permettra d’expliciter les modalités de calcul des impôts, dans l’esprit de l’<a href="http://www.assemblee-nationale.fr/14/projets/pl3318.asp" target="_blank">article 2 du projet de loi numérique</a>. Elle est aussi un gage d’innovation car de nouveaux usages pourraient en découler, à l’image du <a href="http://www.openfisca.fr/" target="_blank">micro-simulateur ouvert OpenFisca</a>, que ce code enrichira.</p> | |||
| <p>Ce code source sera présenté dans sa version 2014 qui a permis de calculer le montant d’imposition de 37 millions de foyers fiscaux. Il s’attache uniquement à la fiscalité des personnes. Développé par la DGFiP dans un langage dédié, le langage M, ce code source est transformé par Etalab en <a href="https://fr.wikipedia.org/wiki/Arbre_syntaxique_abstrait" target="_blank">arbre syntaxique abstrait</a> qui sert de base à une compilation en langage Python. Ces deux déclinaisons seront également mises à disposition au début du hackathon.</p> | |||
| <p><strong>#CodeImpot, un hackathon de deux jours pour accompagner l’ouverture du code source </strong></p> | |||
| <p>Pour accompagner l’ouverture et développer des cas d’usage, Etalab et la DGFiP organisent un hackathon autour de ce code source. Pourront en découler à travers différents ateliers des traductions de la « calculette impôt » vers d’autres langages de programmation, permettant le développement d’applications ou d’API Web, et des réutilisations par des chercheurs et des économistes pour réaliser des évaluations et des études.</p> | |||
| <p>Ce hackathon de deux jours aura lieu les 1er et 2 avril à la <a href="https://twitter.com/MozillaParis" target="_blank">fondation Mozilla</a> (<a href="http://www.openstreetmap.org/node/2883451098" target="_blank"><span class="street-address">16 Bis Boulevard Montmartre,</span> <span class="locality">Paris</span> </a><span class="postal-code"><a href="http://www.openstreetmap.org/node/2883451098" target="_blank">75009</a>). Développeurs, économistes, fiscalistes, venus de d’administrations, de startups ou encore de laboratoires : les participants intéressés sont <a href="https://www.eventbrite.fr/e/billets-codeimpot-21385456476"><strong>invités à s’inscrire aux deux jours du hackathon</strong></a>. Des agents de la DGFiP et les équipes d’Etalab et d’OpenFisca seront présents les accompagner dans leurs travaux. Les restitutions auront lieu le samedi 2 avril à partir de 17h où un large public est <a href="https://www.eventbrite.fr/e/billets-codeimpot-21385456476">également invité à s’inscrire</a>.<br/> | |||
| </span></p> | |||
| <p>Un <a href="https://mensuel.framapad.org/p/OpenImpots">Framapad</a> est <strong>ouvert</strong><strong> à la contribution de tous</strong> pour recenser en amont de l’événement les idées des participants. Ceux désirant travailler sur un sujet précis durant le hackathon auront également l’opportunité de le présenter en deux minutes dans la matinée du 1er avril afin de former un groupe de travail autour de celui-ci.</p> | |||
| <p>En s’engageant dans le mouvement d’ouverture des codes sources des logiciels, la DGFiP ouvre la voie à la transparence des calculs et algorithmes qu’ils produisent. Cette démarche inédite pourrait faire école dans d’autres domaines, comme le calcul des droits à la retraite ou bien l’affectation des élèves dans l’enseignement supérieur.</p> | |||
| <p><em>Légende : la data-visualisation ci-dessus représente les relations entre les variables du code source des impôts.<br/> | |||
| </em></p> | |||
+ 832
- 0
cache/03b7612652c2e454733ffae0b90274c8/index.html
View File
| @@ -0,0 +1,832 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>HPKP: HTTP Public Key Pinning (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://scotthelme.co.uk/hpkp-http-public-key-pinning/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| HPKP: HTTP Public Key Pinning (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://scotthelme.co.uk/hpkp-http-public-key-pinning/">Source originale du contenu</a></h3> | |||
| <p>HTTP Public Key Pinning, or HPKP, is a security policy delivered via a HTTP response header much like <a href="https://scotthelme.co.uk/hsts-the-missing-link-in-tls/">HSTS</a> and <a href="https://scotthelme.co.uk/content-security-policy-an-introduction/">CSP</a>. It allows a host to provide information to a user agent about which cryptographic identities it should accept from the host in the future. This can protect a host website from a security compromise at a Certificate Authority where rogue certificates may be issued for your hostname. </p> | |||
| <p> </p> | |||
| <h2 id="whatishpkp">What Is HPKP?</h2> | |||
| <p>HPKP is a HTTP response header that allows a host to deliver a set of fingerprints to cryptographic identities that the User Agent (UA) should accept for the site going forwards. Much like HSTS, HPKP is a Trust On First Use (TOFU) mechanism and the UA must establish at least one secure session with the host to receive the header intact. Once the header has been received, the UA will cache and apply the policy as per the directives included in the header. </p> | |||
| <p> </p> | |||
| <h2 id="whydoweneedhpkp">Why Do We Need HPKP?</h2> | |||
| <p>Any one of the Certificate Authorities (CAs) in your trust store can issue a certificate for your hostname and the browser will trust it implicitly. This is great in the sense that you can obtain a certificate from any CA of your choosing, but not so great when one gets compromised. </p> | |||
| <p> </p> | |||
| <h4 id="diginotar">DigiNotar</h4> | |||
| <p>Back in 2011 a Dutch CA called DigiNotar was hacked. After gaining access to their systems, the hackers managed to make their way to the CA servers and issued over 500 rogue certificates to themselves. Included in those certificates was one for the google.com domain. This certificate was used to launch a Man in The Middle (MiTM) attack against 300,000 Iranian users of Google services, including GMail. From the end user perspective, the attack was undetectable. The browser received a certifcate for the domain, it was valid and the chain of trust was intact. They had all the indicators of a secure connection but it was totally compromised. There was a lot of speculation about who was responsible for the hack, but from the host's perspective, their users were compromised without any way for them to have known. HPKP changes that. </p> | |||
| <p> </p> | |||
| <h4 id="startcom">StartCom</h4> | |||
| <p>In 2008 and again in 2011 the StartCom CA was breached. The 2008 breach, carried out by a security researcher, resulted in rogue certificates being issued for the paypal.com and verisign.com domains. The 2011 breach, carried out by an unkown attacker, came very close to the crown jewel, the StartCom root key. With access to the StartCom root key, the attacker could have generated a certificate for any domain they like, but not only that, it would have led to the necessary revocation and reissue of every single certificate issued by StartCom. No small task!</p> | |||
| <p> </p> | |||
| <h2 id="whatdoeshpkpdo">What Does HPKP Do?</h2> | |||
| <p>HPKP can be enforced with a very simple HTTP response header. By specifying the fingerprint of certain cryptographic identities, you can force the UA to only accept those identities going forwards. The most ideal solution is to include the fingerprint of your current TLS certificate and at least one backup. The backup can be the fingerprint of a Certificate Signing Request so that you don't have to purchase a backup certificate. If the private key of your certificate were ever compromised, you could use the CSR to request the signing of a new public key. For this to work, the CSR has to be created with a brand new RSA key pair and stored securely offline. As the fingerprint of the CSR was already in the HPKP header, you can switch out to the new certificate without a problem. Using this method, if any CA was ever compromised, even your own CA, any rogue certificates that were issued for your domain would not be accepted by a browser that had received the HPKP header. Because the fingerprint of the rogue certificate has not been received and cached by the browser, it will be rejected and a connection to the site won't be allowed. </p> | |||
| <p> </p> | |||
| <h2 id="howdowesetuphpkp">How Do We Setup HPKP?</h2> | |||
| <p>Setting up and deploying HPKP is incredibly easy, you just have to make sure that you have appropriate backups in place. If you lose all of the backups then you only have until your current certificate expires to get a new policy out to all of your visitors!</p> | |||
| <p> </p> | |||
| <h4 id="addyourexistingcertificate">Add Your Existing Certificate</h4> | |||
| <p>The first step to creating a HPKP policy is to get the fingerprint of your current certificate. </p> | |||
| <p><code>openssl x509 -pubkey < tls.crt | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | base64</code></p> | |||
| <p> </p> | |||
| <p>That looks like a fairly complicated command but it breaks down to be quite simple.</p> | |||
| <p><code>openssl x509</code> We're using the OpenSSL x509 certificate utility which can perform a variety of tasks. All we will be using it for is to output some information about our certificate.<br/> | |||
| <code>-pubkey</code> Output the Subject Public Key Info (SPKI) block in PEM format.<br/> | |||
| <code>< tls.crt</code> The TLS certificate you want to output the information of.</p> | |||
| <p> </p> | |||
| <p>This information is then piped into a new command with the <code>|</code> operator.</p> | |||
| <p><code>openssl pkey</code> The OpenSSL pkey command allows keys to be converted between forms.<br/> | |||
| <code>-pubin</code> Flag that we are providing a public key, as a private key is the default.<br/> | |||
| <code>-outform der</code> Set the output format to DER.</p> | |||
| <p> </p> | |||
| <p>This information is then piped again into the penultimate command.</p> | |||
| <p><code>openssl dgst</code> The OpenSSL dgst command is used to output the digest of the provided file.<br/> | |||
| <code>-sha256</code> Use the SHA256 hash on the input.<br/> | |||
| <code>-binary</code> Output the signature in binary format.</p> | |||
| <p> </p> | |||
| <p>Lastly, we want to pipe the signature into the <code>base64</code> command to get the fingerprint.<br/></p> | |||
| <p>You will end up with a Base64 string that looks something like this:<br/></p> | |||
| <p><code>X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg=</code></p> | |||
| <p> </p> | |||
| <p>Make a note of your fingerprint as you will need it to construct the HPKP header later on.</p> | |||
| <p> </p> | |||
| <h4 id="creatingabackupcsr">Creating A Backup CSR</h4> | |||
| <p>Because we're going to be telling the browser to only accept the specific identities we provide in the header, it's a good idea to have some backups. In fact, I'd say it was absolutely essential. Fortunately, you don't need to have backup certificates. Instead, you create some backup CSRs and include their fingerprints in the header. The only time you will need these is if your private key is compromsied and you need a new certificate, or at your next renewal. It's always a good idea to generate a new key when you renew but you <em>must</em> create the CSRs based on a new key. If your private key is compromised and the CSR was based on your current key pair, it's useless. I'm going to be creating 2 new keys and 2 CSRs so I have a robust backup plan. To start with, generate a new private key. </p> | |||
| <p><code>openssl genrsa -out scotthelme.first.key 4096</code></p> | |||
| <p> </p> | |||
| <p>This command uses the <code>openssl genrsa</code> command to create a new RSA private key. The <code>-out scotthelme.first.key</code> specifies where we would like to save the key and <code>4096</code> sets how large the key should be in bits. Now we have a new private key, we need to generate a CSR for it. </p> | |||
| <p><code>openssl req -new -key scotthelme.first.key -sha256 -out scotthelme.first.csr</code></p> | |||
| <p> </p> | |||
| <p>Using the <code>openssl req</code> (request) command we want to create a <code>-new</code> CSR using the <code>-key scotthelme.first.key</code>. The certificate needs to use the <code>-sha256</code> message digest and finally we specify where to save the CSR <code>-out scotthelme.first.csr</code>. There is then some information you need to provide for the CSR.</p> | |||
| <pre><code>Country Name (2 letter code) [AU]:UK | |||
| State or Province Name (full name) [Some-State]:Lancashire | |||
| Locality Name (eg, city) []:Clitheroe | |||
| Organization Name (eg, company) [Internet Widgits Pty Ltd]:Scott Helme | |||
| Organizational Unit Name (eg, section) []:IT | |||
| Common Name (e.g. server FQDN or YOUR name) []:scotthelme.co.uk | |||
| Email Address []:scotthelme@hotmail.com | |||
| Please enter the following 'extra' attributes | |||
| to be sent with your certificate request | |||
| A challenge password []: | |||
| An optional company name []: | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>Change the information in the above example to suit your own and note that the last 2 fields can be left empty. Now that the CSR is generated, all we need is the fingerprint to include in the HPKP header and we're good to go. </p> | |||
| <p><code>openssl req -pubkey < scotthelme.first.csr | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | base64</code></p> | |||
| <p> </p> | |||
| <p>Similar to the previous step on obtaining the fingerprint for the certificate, there are just a couple of differences. </p> | |||
| <p><code>openssl req</code> Using the OpenSSL request command again.<br/> | |||
| <code>-pubkey < scotthelme.first.csr</code> We want the public key from the CSR we just created.</p> | |||
| <p> </p> | |||
| <p>That is then piped into another command to convert the key. </p> | |||
| <p><code>openssl pkey</code> Using OpenSSL pkey again to convert between formats.<br/> | |||
| <code>-pubin</code> Flag that we are providing a public key, as a private key is the default.<br/> | |||
| <code>-outform der</code> Set the oputput format to DER. </p> | |||
| <p> </p> | |||
| <p>The penultimate command to get the SHA256 digest. </p> | |||
| <p><code>openssl dgst</code> The OpenSSL dgst command to hash the provided input.<br/> | |||
| <code>-sha256</code> Hashed using SHA256.<br/> | |||
| <code>-binary</code> Output in binary. </p> | |||
| <p> </p> | |||
| <p>Finally we pipe that into the <code>base64</code> command to get the fingerprint. </p> | |||
| <p><code>MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec=</code></p> | |||
| <p> </p> | |||
| <p>Now, you may have noticed that I used a naming convention in the files through that example that included <code>first</code>, because you guessed it, it's time to rinse and repeat for a second backup! Once you've run all the commands again with <code>second</code>, you should have another private key, CSR and fingerprint. </p> | |||
| <p><code>isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg=</code></p> | |||
| <p> </p> | |||
| <h4 id="configuringnginx">Configuring NginX</h4> | |||
| <p>The easiest part of configuring HPKP is adding the header to NginX. Open up the config file for your site and in the server block, add the following with substitutions for your own fingerprints.</p> | |||
| <pre><code>add_header Public-Key-Pins 'pin-sha256="X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| max-age=10'; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>This adds a new HTTP response header in NginX, defines the 3 fingerprints that we have created above and finally sets a maximum age for the policy. Save the changes to your config and reload the NginX configuration.</p> | |||
| <p><code>sudo service nginx reload</code></p> | |||
| <p> </p> | |||
| <p>I've used a very short <code>max-age</code> value of 10 seconds for testing purposes so that if something does go wrong, you can remove the header and the policy will expire very quickly, allowing you access to your site again. Once you're happy with the setup and that everything is working you can increase the <code>max-age</code> value to something more suitable like 6-12 months. But remember, the value is in seconds!</p> | |||
| <p> </p> | |||
| <h4 id="thereportonlyheader">The Report Only Header</h4> | |||
| <p>(<strong>added 27th Jan</strong>)</p> | |||
| <p>Thanks to Jerome (<a href="https://twitter.com/exploresecurity/status/560020530800377857">@exploresecurity</a>) and his follow-up <a href="http://www.exploresecurity.com/five-considerations-for-http-public-key-pinning-hpkp/">article</a>, I'm adding in this section on a better way to test your HPKP header. Using the HPKP Report Only header (<code>Public-Key-Pins-Report-Only</code>), you can issue your HPKP policy and test the impact without the risk of a failed connection if you get it wrong. In the same way as the report only header for CSP works, the browser will receive the header and output any information about violations to the console and to the <code>report-uri</code>, if one is provided, but it will not block the connection. I have covered the <code>report-uri</code> directive further on in this blog if you want to implement it, otherwise your header would look something like this.</p> | |||
| <pre><code>add_header Public-Key-Pins-Report-Only | |||
| 'pin-sha256="X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| includeSubdomains'; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>There are quite a few things to note with using the report only header, and indeed a few other elements of using HPKP in general, so I'd recommend Jerome's article linked above. Even with the testing that you can do with the report only header, I'd still recommend a short <code>max-age</code> value when deploying a policy into a live environment just as an added precaution. (<code>max-age</code> is missing from the example above as report only policies are not cached so the directive is ignored).</p> | |||
| <p> </p> | |||
| <h4 id="includingsubdomainsinhpkp">Including Subdomains In HPKP</h4> | |||
| <p>There are 2 ways of dealing with subdomains that also utilise TLS on your site. You can have each domain issue its own unique HPKP policy that specifies the fingerprints for identities to be used on that domain, or, you can issue a HPKP policy at the top that will cascade down all subdomains by using the <code>includeSubdomains</code> directive. Each method has advantages and drawbacks.</p> | |||
| <pre><code>add_header Public-Key-Pins 'pin-sha256="X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| max-age=10; includeSubdomains'; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>For example, if you were to navigate directly to test.scotthelme.co.uk, but scotthelme.co.uk was issuing the HPKP policy for that domain and all subdomains, you wouldn't receive the policy. The HPKP header from scotthelme.co.uk would contain the fingerprints for all certificates used on the site and all subdomains, so would act like a master policy. This policy would need to be issued across all subdomains to be effective. You'd also have to have a lot of backups in there to cover revocations if you were compromised and renewals when they come around. I'd say 2 backups per domain is a good idea. It'd be a cumbersome policy but a 'one size fits all' to be issued across all subdomains. </p> | |||
| <p>Issuing a specific HPKP header per subdomain results in a smaller header, but a little more management. You need to track the fingerprints for each subdomains certificate and backups and ensure that they are presented in the correct header. Once setup in this manner, none of the policies can contain the <code>includeSubdomains</code> directive or there is the potential to break access to subdomains. You would have a much nicer header containing only 3 fingerprints per subdomain and the management isn't so bad once setup.</p> | |||
| <p> </p> | |||
| <h2 id="reportingpinvalidationfailures">Reporting Pin Validation Failures</h2> | |||
| <p>Now that we have HPKP setup, we can rest assured that our visitors won't fall victim to a MiTM attack where a rogue certificate is used. That's fantastic news, but wouldn't it be even better if we could not only prevent the attack, but know about it in real time? Well, you can! HPKP has a <code>report-uri</code> directive where you can specify a URI for the UA to POST a JSON formatted failure report to. If the UA tries to connect to your site and the certificate fails to meet the criteria of the HPKP policy, we want to know about it. The report format is specified in the <a href="https://tools.ietf.org/html/draft-ietf-websec-key-pinning-21#section-3">IETF Draft</a>. </p> | |||
| <pre><code>{ | |||
| "date-time": date-time, | |||
| "hostname": hostname, | |||
| "port": port, | |||
| "effective-expiration-date": expiration-date, | |||
| "include-subdomains": include-subdomains, | |||
| "noted-hostname": noted-hostname, | |||
| "served-certificate-chain": [ | |||
| pem1, ... pemN | |||
| ], | |||
| "validated-certificate-chain": [ | |||
| pem1, ... pemN | |||
| ], | |||
| "known-pins": [ | |||
| known-pin1, ... known-pinN | |||
| ] | |||
| } | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>You need to include the directive in the policy and provide a suitable URI that is capable of receiving and processing such reports. </p> | |||
| <pre><code>add_header Public-Key-Pins "pin-sha256='X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg='; \ | |||
| pin-sha256='MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec='; \ | |||
| pin-sha256='isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg='; \ | |||
| max-age=10; report-uri='https://report.scotthelme.co.uk'"; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>Now, it goes without saying that the authenticity of these reports can never be assured. We have no way to prevent forged reports being delivered and reports may even contain malicious content like SQL Injection or XSS attempts. They should be treated with care and investigated with that in mind. There's also another problem. Well, actually, there could be a few. First, if an attacker has enough access to be able to MiTM you with a rogue certificate, they're going to be able to kill access to the URI used for reporting HPKP validation failures. Second, I use HSTS on my main domain and I'm even <a href="https://scotthelme.co.uk/hsts-preloading/">HSTS preloaded</a> into Chrome, Firefox and Safari. As a result, HSTS is enforced on all my subdomains with the <code>includeSubdomains</code> directive in my HSTS policy. That also means that we should really be issuing a HPKP Policy on all subdomains if we're doing it right. Well, if we're reporting HPKP validation failures, how would we communicate with the report URI? </p> | |||
| <blockquote> | |||
| <p>Hosts may set report-uris that use HTTP or HTTPS. If the scheme in | |||
| the report-uri is one that uses TLS (e.g. HTTPS), UAs MUST perform | |||
| Pinning Validation when the host in the report-uri is a Known Pinned | |||
| Host; similarly, UAs MUST apply HSTS if the host in the report-uri is | |||
| a Known HSTS Host.</p> | |||
| </blockquote> | |||
| <p> </p> | |||
| <p>Of course, the attacker may only have a certificate for our main domain and the reports may be sent just fine, or the attacker could just block access to the URI, but it presents an interesting predicament. The draft does go on to say:</p> | |||
| <blockquote> | |||
| <p>In any case of report failure, the UA MAY attempt to re-send the | |||
| report later.</p> | |||
| </blockquote> | |||
| <p> </p> | |||
| <p>Perhaps for now this is really the best option the UA has available. We are preventing the attack from taking place with the HPKP header, it would just be nice to know about it so that steps could be taken to resolve the issue. </p> | |||
| <p> </p> | |||
| <h2 id="conclusion">Conclusion</h2> | |||
| <p>It's easy to make your site inaccessible if you get HPKP wrong, but, the same applies to any configuration change really. That said, it's also incredibly easy to do right and hugely improve your security stance. The 3 fingerprints we have set in the HPKP header are the <em>only</em> certificates that a browser will now accept for your site. As mentioned earlier, if a CA gets popped and issues rogue certificates for your domain, any browser that has received this header will reject the rogue certificates. This also means that you need to be cautious about how you backup the newly created keys and CSRs. If your server is compromised, it's no use having them on there as they will be compromised too. They need to be taken off the server and stored in a safe location for when they are needed. If your private key is compromised or your certificate is up for renewal, you will need to use one of the CSRs to obtain a new certificate. At that point, you switch to the new certificate, remove the fingerprint for the certificate that's on the way out, generate a new key pair and CSR, get the fingerprint and put that into the header so you always have 2 backup options. Anyone who has previously cached the policy will accept the new certificate as it was one of your backups and this is how you move forwards. </p> | |||
| <p> </p> | |||
| <h2 id="hpkpandgooglechrome">HPKP And Google Chrome</h2> | |||
| <p>Whilst writing this blog I came across a bug in how Google Chrome handles the HPKP header. You can find details on the bug <a href="https://scotthel.me/r3j">here</a>. The problem was around the handling of the <code>max-age</code> and <code>includeSubdomains</code> directives between HSTS and HPKP policies. If one policy had one of these values set, it would apply to the other. This resulted in my 10 second <code>max-age</code> value in the HPKP policy being ignored and the 31536000 value from my HSTS policy being applied across both. The same thing also happened for my subdomains. As it was now applying the fingerprints for scotthelme.co.uk to all my subdomains, they became inaccessible and the policy had an incredibly long duration too. For anyone who visited my site in the brief window that I had issued the policy, they would not have been able to access my subdomains until the patch for the issue made it to the stable build (or some time soon if they were running <a href="https://www.google.com/chrome/browser/canary.html">Canary</a>), or I included the fingerprints for all of my subdomain certificates and their backups in the policy issued on the scotthelme.co.uk domain at the top. Not an ideal solution but HPKP policy is now being applied properly and here is my final policy.</p> | |||
| <pre><code>add_header Public-Key-Pins "pin-sha256='X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| pin-sha256="aVNttuSMXJLW/fZOCaR/27b8k6ll5VDuoaVZf2rHIFU="; \ | |||
| pin-sha256="I/bAACUzdYEFNw2ZKRaypOyYvvOtqBzg21g9a5WVClg="; \ | |||
| pin-sha256="Y4/Gxyck5JLLnC/zWHtSHfNljuMbOJi6dRQuRJTgYdo="; \ | |||
| pin-sha256="9Eef0hLnaqy+EhIy8HnUCqFOKzTIWlNNZ5iCJlqT01E="; \ | |||
| pin-sha256="t3EPvqF+7XoKypCPHyN1b5uey7zTfIGDHn4oBWz2pds="; \ | |||
| pin-sha256="zqbcEslrpiH0bA9uhNyl2ovpLEfGJQM/QvZSVumMFJ8="; \ | |||
| includeSubdomains; max-age=31536000' always; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p><strong>Read More:</strong> <a href="https://scotthelme.co.uk/content-security-policy-an-introduction/">Content Security Policy - An Introduction</a> <strong>-</strong> <a href="https://scotthelme.co.uk/hsts-the-missing-link-in-tls/">HSTS - The missing link in Transport Layer Security</a></p> | |||
| <p> </p> | |||
| <p>Scott. <br/> | |||
| Short URL: <a href="https://scotthel.me/hpkp">https://scotthel.me/hpkp</a></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://scotthelme.co.uk/hpkp-http-public-key-pinning/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 196
- 0
cache/03b7612652c2e454733ffae0b90274c8/index.md
View File
| @@ -0,0 +1,196 @@ | |||
| title: HPKP: HTTP Public Key Pinning | |||
| url: https://scotthelme.co.uk/hpkp-http-public-key-pinning/ | |||
| hash_url: 03b7612652c2e454733ffae0b90274c8 | |||
| <p>HTTP Public Key Pinning, or HPKP, is a security policy delivered via a HTTP response header much like <a href="https://scotthelme.co.uk/hsts-the-missing-link-in-tls/">HSTS</a> and <a href="https://scotthelme.co.uk/content-security-policy-an-introduction/">CSP</a>. It allows a host to provide information to a user agent about which cryptographic identities it should accept from the host in the future. This can protect a host website from a security compromise at a Certificate Authority where rogue certificates may be issued for your hostname. </p> | |||
| <p> </p> | |||
| <h2 id="whatishpkp">What Is HPKP?</h2> | |||
| <p>HPKP is a HTTP response header that allows a host to deliver a set of fingerprints to cryptographic identities that the User Agent (UA) should accept for the site going forwards. Much like HSTS, HPKP is a Trust On First Use (TOFU) mechanism and the UA must establish at least one secure session with the host to receive the header intact. Once the header has been received, the UA will cache and apply the policy as per the directives included in the header. </p> | |||
| <p> </p> | |||
| <h2 id="whydoweneedhpkp">Why Do We Need HPKP?</h2> | |||
| <p>Any one of the Certificate Authorities (CAs) in your trust store can issue a certificate for your hostname and the browser will trust it implicitly. This is great in the sense that you can obtain a certificate from any CA of your choosing, but not so great when one gets compromised. </p> | |||
| <p> </p> | |||
| <h4 id="diginotar">DigiNotar</h4> | |||
| <p>Back in 2011 a Dutch CA called DigiNotar was hacked. After gaining access to their systems, the hackers managed to make their way to the CA servers and issued over 500 rogue certificates to themselves. Included in those certificates was one for the google.com domain. This certificate was used to launch a Man in The Middle (MiTM) attack against 300,000 Iranian users of Google services, including GMail. From the end user perspective, the attack was undetectable. The browser received a certifcate for the domain, it was valid and the chain of trust was intact. They had all the indicators of a secure connection but it was totally compromised. There was a lot of speculation about who was responsible for the hack, but from the host's perspective, their users were compromised without any way for them to have known. HPKP changes that. </p> | |||
| <p> </p> | |||
| <h4 id="startcom">StartCom</h4> | |||
| <p>In 2008 and again in 2011 the StartCom CA was breached. The 2008 breach, carried out by a security researcher, resulted in rogue certificates being issued for the paypal.com and verisign.com domains. The 2011 breach, carried out by an unkown attacker, came very close to the crown jewel, the StartCom root key. With access to the StartCom root key, the attacker could have generated a certificate for any domain they like, but not only that, it would have led to the necessary revocation and reissue of every single certificate issued by StartCom. No small task!</p> | |||
| <p> </p> | |||
| <h2 id="whatdoeshpkpdo">What Does HPKP Do?</h2> | |||
| <p>HPKP can be enforced with a very simple HTTP response header. By specifying the fingerprint of certain cryptographic identities, you can force the UA to only accept those identities going forwards. The most ideal solution is to include the fingerprint of your current TLS certificate and at least one backup. The backup can be the fingerprint of a Certificate Signing Request so that you don't have to purchase a backup certificate. If the private key of your certificate were ever compromised, you could use the CSR to request the signing of a new public key. For this to work, the CSR has to be created with a brand new RSA key pair and stored securely offline. As the fingerprint of the CSR was already in the HPKP header, you can switch out to the new certificate without a problem. Using this method, if any CA was ever compromised, even your own CA, any rogue certificates that were issued for your domain would not be accepted by a browser that had received the HPKP header. Because the fingerprint of the rogue certificate has not been received and cached by the browser, it will be rejected and a connection to the site won't be allowed. </p> | |||
| <p> </p> | |||
| <h2 id="howdowesetuphpkp">How Do We Setup HPKP?</h2> | |||
| <p>Setting up and deploying HPKP is incredibly easy, you just have to make sure that you have appropriate backups in place. If you lose all of the backups then you only have until your current certificate expires to get a new policy out to all of your visitors!</p> | |||
| <p> </p> | |||
| <h4 id="addyourexistingcertificate">Add Your Existing Certificate</h4> | |||
| <p>The first step to creating a HPKP policy is to get the fingerprint of your current certificate. </p> | |||
| <p><code>openssl x509 -pubkey < tls.crt | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | base64</code></p> | |||
| <p> </p> | |||
| <p>That looks like a fairly complicated command but it breaks down to be quite simple.</p> | |||
| <p><code>openssl x509</code> We're using the OpenSSL x509 certificate utility which can perform a variety of tasks. All we will be using it for is to output some information about our certificate.<br/> | |||
| <code>-pubkey</code> Output the Subject Public Key Info (SPKI) block in PEM format.<br/> | |||
| <code>< tls.crt</code> The TLS certificate you want to output the information of.</p> | |||
| <p> </p> | |||
| <p>This information is then piped into a new command with the <code>|</code> operator.</p> | |||
| <p><code>openssl pkey</code> The OpenSSL pkey command allows keys to be converted between forms.<br/> | |||
| <code>-pubin</code> Flag that we are providing a public key, as a private key is the default.<br/> | |||
| <code>-outform der</code> Set the output format to DER.</p> | |||
| <p> </p> | |||
| <p>This information is then piped again into the penultimate command.</p> | |||
| <p><code>openssl dgst</code> The OpenSSL dgst command is used to output the digest of the provided file.<br/> | |||
| <code>-sha256</code> Use the SHA256 hash on the input.<br/> | |||
| <code>-binary</code> Output the signature in binary format.</p> | |||
| <p> </p> | |||
| <p>Lastly, we want to pipe the signature into the <code>base64</code> command to get the fingerprint.<br/></p> | |||
| <p>You will end up with a Base64 string that looks something like this:<br/></p> | |||
| <p><code>X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg=</code></p> | |||
| <p> </p> | |||
| <p>Make a note of your fingerprint as you will need it to construct the HPKP header later on.</p> | |||
| <p> </p> | |||
| <h4 id="creatingabackupcsr">Creating A Backup CSR</h4> | |||
| <p>Because we're going to be telling the browser to only accept the specific identities we provide in the header, it's a good idea to have some backups. In fact, I'd say it was absolutely essential. Fortunately, you don't need to have backup certificates. Instead, you create some backup CSRs and include their fingerprints in the header. The only time you will need these is if your private key is compromsied and you need a new certificate, or at your next renewal. It's always a good idea to generate a new key when you renew but you <em>must</em> create the CSRs based on a new key. If your private key is compromised and the CSR was based on your current key pair, it's useless. I'm going to be creating 2 new keys and 2 CSRs so I have a robust backup plan. To start with, generate a new private key. </p> | |||
| <p><code>openssl genrsa -out scotthelme.first.key 4096</code></p> | |||
| <p> </p> | |||
| <p>This command uses the <code>openssl genrsa</code> command to create a new RSA private key. The <code>-out scotthelme.first.key</code> specifies where we would like to save the key and <code>4096</code> sets how large the key should be in bits. Now we have a new private key, we need to generate a CSR for it. </p> | |||
| <p><code>openssl req -new -key scotthelme.first.key -sha256 -out scotthelme.first.csr</code></p> | |||
| <p> </p> | |||
| <p>Using the <code>openssl req</code> (request) command we want to create a <code>-new</code> CSR using the <code>-key scotthelme.first.key</code>. The certificate needs to use the <code>-sha256</code> message digest and finally we specify where to save the CSR <code>-out scotthelme.first.csr</code>. There is then some information you need to provide for the CSR.</p> | |||
| <pre><code>Country Name (2 letter code) [AU]:UK | |||
| State or Province Name (full name) [Some-State]:Lancashire | |||
| Locality Name (eg, city) []:Clitheroe | |||
| Organization Name (eg, company) [Internet Widgits Pty Ltd]:Scott Helme | |||
| Organizational Unit Name (eg, section) []:IT | |||
| Common Name (e.g. server FQDN or YOUR name) []:scotthelme.co.uk | |||
| Email Address []:scotthelme@hotmail.com | |||
| Please enter the following 'extra' attributes | |||
| to be sent with your certificate request | |||
| A challenge password []: | |||
| An optional company name []: | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>Change the information in the above example to suit your own and note that the last 2 fields can be left empty. Now that the CSR is generated, all we need is the fingerprint to include in the HPKP header and we're good to go. </p> | |||
| <p><code>openssl req -pubkey < scotthelme.first.csr | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | base64</code></p> | |||
| <p> </p> | |||
| <p>Similar to the previous step on obtaining the fingerprint for the certificate, there are just a couple of differences. </p> | |||
| <p><code>openssl req</code> Using the OpenSSL request command again.<br/> | |||
| <code>-pubkey < scotthelme.first.csr</code> We want the public key from the CSR we just created.</p> | |||
| <p> </p> | |||
| <p>That is then piped into another command to convert the key. </p> | |||
| <p><code>openssl pkey</code> Using OpenSSL pkey again to convert between formats.<br/> | |||
| <code>-pubin</code> Flag that we are providing a public key, as a private key is the default.<br/> | |||
| <code>-outform der</code> Set the oputput format to DER. </p> | |||
| <p> </p> | |||
| <p>The penultimate command to get the SHA256 digest. </p> | |||
| <p><code>openssl dgst</code> The OpenSSL dgst command to hash the provided input.<br/> | |||
| <code>-sha256</code> Hashed using SHA256.<br/> | |||
| <code>-binary</code> Output in binary. </p> | |||
| <p> </p> | |||
| <p>Finally we pipe that into the <code>base64</code> command to get the fingerprint. </p> | |||
| <p><code>MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec=</code></p> | |||
| <p> </p> | |||
| <p>Now, you may have noticed that I used a naming convention in the files through that example that included <code>first</code>, because you guessed it, it's time to rinse and repeat for a second backup! Once you've run all the commands again with <code>second</code>, you should have another private key, CSR and fingerprint. </p> | |||
| <p><code>isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg=</code></p> | |||
| <p> </p> | |||
| <h4 id="configuringnginx">Configuring NginX</h4> | |||
| <p>The easiest part of configuring HPKP is adding the header to NginX. Open up the config file for your site and in the server block, add the following with substitutions for your own fingerprints.</p> | |||
| <pre><code>add_header Public-Key-Pins 'pin-sha256="X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| max-age=10'; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>This adds a new HTTP response header in NginX, defines the 3 fingerprints that we have created above and finally sets a maximum age for the policy. Save the changes to your config and reload the NginX configuration.</p> | |||
| <p><code>sudo service nginx reload</code></p> | |||
| <p> </p> | |||
| <p>I've used a very short <code>max-age</code> value of 10 seconds for testing purposes so that if something does go wrong, you can remove the header and the policy will expire very quickly, allowing you access to your site again. Once you're happy with the setup and that everything is working you can increase the <code>max-age</code> value to something more suitable like 6-12 months. But remember, the value is in seconds!</p> | |||
| <p> </p> | |||
| <h4 id="thereportonlyheader">The Report Only Header</h4> | |||
| <p>(<strong>added 27th Jan</strong>)</p> | |||
| <p>Thanks to Jerome (<a href="https://twitter.com/exploresecurity/status/560020530800377857">@exploresecurity</a>) and his follow-up <a href="http://www.exploresecurity.com/five-considerations-for-http-public-key-pinning-hpkp/">article</a>, I'm adding in this section on a better way to test your HPKP header. Using the HPKP Report Only header (<code>Public-Key-Pins-Report-Only</code>), you can issue your HPKP policy and test the impact without the risk of a failed connection if you get it wrong. In the same way as the report only header for CSP works, the browser will receive the header and output any information about violations to the console and to the <code>report-uri</code>, if one is provided, but it will not block the connection. I have covered the <code>report-uri</code> directive further on in this blog if you want to implement it, otherwise your header would look something like this.</p> | |||
| <pre><code>add_header Public-Key-Pins-Report-Only | |||
| 'pin-sha256="X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| includeSubdomains'; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>There are quite a few things to note with using the report only header, and indeed a few other elements of using HPKP in general, so I'd recommend Jerome's article linked above. Even with the testing that you can do with the report only header, I'd still recommend a short <code>max-age</code> value when deploying a policy into a live environment just as an added precaution. (<code>max-age</code> is missing from the example above as report only policies are not cached so the directive is ignored).</p> | |||
| <p> </p> | |||
| <h4 id="includingsubdomainsinhpkp">Including Subdomains In HPKP</h4> | |||
| <p>There are 2 ways of dealing with subdomains that also utilise TLS on your site. You can have each domain issue its own unique HPKP policy that specifies the fingerprints for identities to be used on that domain, or, you can issue a HPKP policy at the top that will cascade down all subdomains by using the <code>includeSubdomains</code> directive. Each method has advantages and drawbacks.</p> | |||
| <pre><code>add_header Public-Key-Pins 'pin-sha256="X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| max-age=10; includeSubdomains'; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>For example, if you were to navigate directly to test.scotthelme.co.uk, but scotthelme.co.uk was issuing the HPKP policy for that domain and all subdomains, you wouldn't receive the policy. The HPKP header from scotthelme.co.uk would contain the fingerprints for all certificates used on the site and all subdomains, so would act like a master policy. This policy would need to be issued across all subdomains to be effective. You'd also have to have a lot of backups in there to cover revocations if you were compromised and renewals when they come around. I'd say 2 backups per domain is a good idea. It'd be a cumbersome policy but a 'one size fits all' to be issued across all subdomains. </p> | |||
| <p>Issuing a specific HPKP header per subdomain results in a smaller header, but a little more management. You need to track the fingerprints for each subdomains certificate and backups and ensure that they are presented in the correct header. Once setup in this manner, none of the policies can contain the <code>includeSubdomains</code> directive or there is the potential to break access to subdomains. You would have a much nicer header containing only 3 fingerprints per subdomain and the management isn't so bad once setup.</p> | |||
| <p> </p> | |||
| <h2 id="reportingpinvalidationfailures">Reporting Pin Validation Failures</h2> | |||
| <p>Now that we have HPKP setup, we can rest assured that our visitors won't fall victim to a MiTM attack where a rogue certificate is used. That's fantastic news, but wouldn't it be even better if we could not only prevent the attack, but know about it in real time? Well, you can! HPKP has a <code>report-uri</code> directive where you can specify a URI for the UA to POST a JSON formatted failure report to. If the UA tries to connect to your site and the certificate fails to meet the criteria of the HPKP policy, we want to know about it. The report format is specified in the <a href="https://tools.ietf.org/html/draft-ietf-websec-key-pinning-21#section-3">IETF Draft</a>. </p> | |||
| <pre><code>{ | |||
| "date-time": date-time, | |||
| "hostname": hostname, | |||
| "port": port, | |||
| "effective-expiration-date": expiration-date, | |||
| "include-subdomains": include-subdomains, | |||
| "noted-hostname": noted-hostname, | |||
| "served-certificate-chain": [ | |||
| pem1, ... pemN | |||
| ], | |||
| "validated-certificate-chain": [ | |||
| pem1, ... pemN | |||
| ], | |||
| "known-pins": [ | |||
| known-pin1, ... known-pinN | |||
| ] | |||
| } | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>You need to include the directive in the policy and provide a suitable URI that is capable of receiving and processing such reports. </p> | |||
| <pre><code>add_header Public-Key-Pins "pin-sha256='X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg='; \ | |||
| pin-sha256='MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec='; \ | |||
| pin-sha256='isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg='; \ | |||
| max-age=10; report-uri='https://report.scotthelme.co.uk'"; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p>Now, it goes without saying that the authenticity of these reports can never be assured. We have no way to prevent forged reports being delivered and reports may even contain malicious content like SQL Injection or XSS attempts. They should be treated with care and investigated with that in mind. There's also another problem. Well, actually, there could be a few. First, if an attacker has enough access to be able to MiTM you with a rogue certificate, they're going to be able to kill access to the URI used for reporting HPKP validation failures. Second, I use HSTS on my main domain and I'm even <a href="https://scotthelme.co.uk/hsts-preloading/">HSTS preloaded</a> into Chrome, Firefox and Safari. As a result, HSTS is enforced on all my subdomains with the <code>includeSubdomains</code> directive in my HSTS policy. That also means that we should really be issuing a HPKP Policy on all subdomains if we're doing it right. Well, if we're reporting HPKP validation failures, how would we communicate with the report URI? </p> | |||
| <blockquote> | |||
| <p>Hosts may set report-uris that use HTTP or HTTPS. If the scheme in | |||
| the report-uri is one that uses TLS (e.g. HTTPS), UAs MUST perform | |||
| Pinning Validation when the host in the report-uri is a Known Pinned | |||
| Host; similarly, UAs MUST apply HSTS if the host in the report-uri is | |||
| a Known HSTS Host.</p> | |||
| </blockquote> | |||
| <p> </p> | |||
| <p>Of course, the attacker may only have a certificate for our main domain and the reports may be sent just fine, or the attacker could just block access to the URI, but it presents an interesting predicament. The draft does go on to say:</p> | |||
| <blockquote> | |||
| <p>In any case of report failure, the UA MAY attempt to re-send the | |||
| report later.</p> | |||
| </blockquote> | |||
| <p> </p> | |||
| <p>Perhaps for now this is really the best option the UA has available. We are preventing the attack from taking place with the HPKP header, it would just be nice to know about it so that steps could be taken to resolve the issue. </p> | |||
| <p> </p> | |||
| <h2 id="conclusion">Conclusion</h2> | |||
| <p>It's easy to make your site inaccessible if you get HPKP wrong, but, the same applies to any configuration change really. That said, it's also incredibly easy to do right and hugely improve your security stance. The 3 fingerprints we have set in the HPKP header are the <em>only</em> certificates that a browser will now accept for your site. As mentioned earlier, if a CA gets popped and issues rogue certificates for your domain, any browser that has received this header will reject the rogue certificates. This also means that you need to be cautious about how you backup the newly created keys and CSRs. If your server is compromised, it's no use having them on there as they will be compromised too. They need to be taken off the server and stored in a safe location for when they are needed. If your private key is compromised or your certificate is up for renewal, you will need to use one of the CSRs to obtain a new certificate. At that point, you switch to the new certificate, remove the fingerprint for the certificate that's on the way out, generate a new key pair and CSR, get the fingerprint and put that into the header so you always have 2 backup options. Anyone who has previously cached the policy will accept the new certificate as it was one of your backups and this is how you move forwards. </p> | |||
| <p> </p> | |||
| <h2 id="hpkpandgooglechrome">HPKP And Google Chrome</h2> | |||
| <p>Whilst writing this blog I came across a bug in how Google Chrome handles the HPKP header. You can find details on the bug <a href="https://scotthel.me/r3j">here</a>. The problem was around the handling of the <code>max-age</code> and <code>includeSubdomains</code> directives between HSTS and HPKP policies. If one policy had one of these values set, it would apply to the other. This resulted in my 10 second <code>max-age</code> value in the HPKP policy being ignored and the 31536000 value from my HSTS policy being applied across both. The same thing also happened for my subdomains. As it was now applying the fingerprints for scotthelme.co.uk to all my subdomains, they became inaccessible and the policy had an incredibly long duration too. For anyone who visited my site in the brief window that I had issued the policy, they would not have been able to access my subdomains until the patch for the issue made it to the stable build (or some time soon if they were running <a href="https://www.google.com/chrome/browser/canary.html">Canary</a>), or I included the fingerprints for all of my subdomain certificates and their backups in the policy issued on the scotthelme.co.uk domain at the top. Not an ideal solution but HPKP policy is now being applied properly and here is my final policy.</p> | |||
| <pre><code>add_header Public-Key-Pins "pin-sha256='X3pGTSOuJeEVw989IJ/cEtXUEmy52zs1TZQrU06KUKg="; \ | |||
| pin-sha256="MHJYVThihUrJcxW6wcqyOISTXIsInsdj3xK8QrZbHec="; \ | |||
| pin-sha256="isi41AizREkLvvft0IRW4u3XMFR2Yg7bvrF7padyCJg="; \ | |||
| pin-sha256="aVNttuSMXJLW/fZOCaR/27b8k6ll5VDuoaVZf2rHIFU="; \ | |||
| pin-sha256="I/bAACUzdYEFNw2ZKRaypOyYvvOtqBzg21g9a5WVClg="; \ | |||
| pin-sha256="Y4/Gxyck5JLLnC/zWHtSHfNljuMbOJi6dRQuRJTgYdo="; \ | |||
| pin-sha256="9Eef0hLnaqy+EhIy8HnUCqFOKzTIWlNNZ5iCJlqT01E="; \ | |||
| pin-sha256="t3EPvqF+7XoKypCPHyN1b5uey7zTfIGDHn4oBWz2pds="; \ | |||
| pin-sha256="zqbcEslrpiH0bA9uhNyl2ovpLEfGJQM/QvZSVumMFJ8="; \ | |||
| includeSubdomains; max-age=31536000' always; | |||
| </code></pre> | |||
| <p> </p> | |||
| <p><strong>Read More:</strong> <a href="https://scotthelme.co.uk/content-security-policy-an-introduction/">Content Security Policy - An Introduction</a> <strong>-</strong> <a href="https://scotthelme.co.uk/hsts-the-missing-link-in-tls/">HSTS - The missing link in Transport Layer Security</a></p> | |||
| <p> </p> | |||
| <p>Scott. <br/> | |||
| Short URL: <a href="https://scotthel.me/hpkp">https://scotthel.me/hpkp</a></p> | |||
+ 651
- 0
cache/03f7d88efe4db61d7007bcf736aa789f/index.html
View File
| @@ -0,0 +1,651 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Our Development Philosophy (2): Collaboration & Testing (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.git-tower.com/blog/dev-philosophy-2"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Our Development Philosophy (2): Collaboration & Testing (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://www.git-tower.com/blog/dev-philosophy-2">Source originale du contenu</a></h3> | |||
| <p>We learned in countless situations within our own team how important these skills really are: very often when things went wrong, it had been due to a lack of testing and/or collaboration. Here are some things we've learned while growing <a href="https://www.git-tower.com/" rel="noopener noreferrer" target="_blank">Tower</a> to serve almost 100,000 users.</p> | |||
| <p><br/></p> | |||
| <h2>All Code Belongs to the Team</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-code-belongs-to-the-team.svg" alt=""/></figure> | |||
| <p><strong>Code is teamwork, not the work of any individual developer.</strong> This also means that none of the code you've written belongs to you – it belongs to the team! Looking at code in this way is helpful and liberating for a couple of reasons:</p> | |||
| <ul> | |||
| <li> | |||
| <p><strong>It doesn't have to go your way.</strong> After understanding that code always belongs to the team, it becomes obvious that we need to comply with coding standards and guidelines. Since it's not your code you can't just write it any way you fancy. It's a common code base, so common rules must be adhered.<br/> | |||
| This should also make you more tolerant when looking at your colleagues' code. You might instinctively think of all the ways you would have done it differently. But again: it doesn't have to go your way, but your team's way. This can help a lot in making you more open-minded towards other solutions and approaches.</p> | |||
| </li> | |||
| <li> | |||
| <p><strong>Everything is your problem.</strong> When you spot a potential problem in the code, it doesn't really matter if it was your fault for not. Since all of the project's code belongs to the team – and you are part of this team – weak code from any source becomes your problem.<br/> | |||
| Contrast this to an atmosphere where people are detached from their teams and their shared code: "this is not my problem" is an attitude that will never produce great products.</p> | |||
| </li> | |||
| <li><strong>You. You. You.</strong> I learned this one from <a href="https://opbeat.com/" rel="noopener noreferrer" target="_blank">opbeat's</a> <a href="https://twitter.com/roncohen" rel="noopener noreferrer" target="_blank">Ron Cohen</a> when I heard him speak at a conference. It's a simple reminder of our responsibilities as software developers: <strong>You</strong> are responsible for writing code. Then, <strong>you</strong> are also responsible for making it shippable or production ready. And of course, <strong>you</strong> are responsible for fixing any problems with it.<br/> | |||
| In our own team, where we don't have a dedicated quality assurance team, this reminded us that developers are not only responsible for writing down lines of code – but also for the quality of that code. This responsibility is nothing that you can duck out of or hand over to someone else.</li> | |||
| </ul> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"Code is teamwork, not the work of any individual developer." </span> </blockquote> </div> | |||
| <h2>Sharing Knowledge with Code Reviews</h2> | |||
| <p>Code reviews have a huge potential to lift your development team to new heights.</p> | |||
| <p>Most obviously, discussing code in a review session can lead to a better solution than the original developer had had on her own. Two minds working together on the same problem will always have the chance to produce higher quality code.</p> | |||
| <p>But other potential benefits of code reviews might be even more interesting. Shared ownership, for example, is crucial to reduce knowledge silos: whenever you find that only a single developer in your team knows a certain piece of code, you are at risk. Whenever this developer goes on holidays, gets sick, or maybe even leaves the company you'll be in trouble.<br/> | |||
| But even if none of these situations occur: the fact that your team doesn't seem to have a truly shared code base is already telling. Have a look at the previous section and you'll understand why.</p> | |||
| <p>Additionally, code reviews can solve the hairy problem of knowledge exchange. If, like most teams, you have a mixture of junior and senior developers, you will certainly want those junior developers to benefit from your experts' experience and knowledge. Code reviews are an excellent way to pass on knowledge in situations like these.</p> | |||
| <p>And to make the process worthwhile for both sides (juniors and seniors), make sure your senior developers understand that both parties – the student and the teacher – will learn something on the way!</p> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"Senior developers should understand that they, too, might learn something when mentoring a junior colleague!" </span> </blockquote> </div> | |||
| <h2>Not Everything Needs Improvement</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-fast-car.svg" alt=""/></figure> | |||
| <p>Since there is no such thing as a perfect solution, you could argue that everything can be improved. And you're probably right. But the interesting question is not if something can be improved – but rather if it's worthwhile to improve a certain part in your application.</p> | |||
| <p>We know where our own product, <a href="https://www.git-tower.com">Tower</a>, has its weak spots. And if time was infinite, we would probably polish and improve every single bit. But with time being a scarce resource for any team you will have to set priorities. If you don't, your product will not take the direction you want it to take - or it might very well take no direction at all.</p> | |||
| <p>Being able to responsibly ponder if or if not to improve something really is an art. It takes years of experience and, in the best case, even conscious training. Saying no to a lot of things is a prerequisite for achieving anything of worth.</p> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"Saying no to a lot of things is a prerequisite for achieving anything of worth." </span> </blockquote> </div> | |||
| <p>True in life, and true in software development.</p> | |||
| <h2>Ask Questions</h2> | |||
| <p>When reading other people's code it's all too easy to assume that you would have done it better. On first encounter, this or that line might seem unnecessarily complex or even superfluous. And you might of course be right. But it's very hard to say because of one simple fact: you didn't actually <em>write</em> the code.</p> | |||
| <p>From our own experience, we know that even the simplest problem can really contain a surprising and infinite amount of complexity. Only when actually working on the problem – when picking it apart, thinking about possible solutions, side effects, etc. – will one be able to understand its scope.</p> | |||
| <p>Therefore, when coming across a piece of code that makes you suspicious, it's a great ground rule to <strong>assume a good amount of hidden complexity</strong>. From this point of view you can either dive deep into the code and try to understand it and the underlying problem – or you simply get into a conversation with your teammate(s) and ask some humble questions.</p> | |||
| <h2>Software is Only Complete with Tests</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-developer-tasks.svg" alt=""/></figure> | |||
| <p>Unit tests are sometimes regarded as the icing on the cake. More appropriately, however, they would be better described as the cake's <em>base</em>.</p> | |||
| <p>In smaller projects, you might get away without writing unit tests. In any project with just a slight amount of complexity, however, you will not. And, just as a side note, it's remarkable to see how many projects started simple and very soon became complex. So please don't act surprised.</p> | |||
| <p>There are indeed countless reasons why unit testing is essential for us:</p> | |||
| <ul> | |||
| <li><strong>Making big changes, safely and quickly.</strong> In every larger project, you will have to perform refactorings at some point. But refactoring code without a decent amount of unit tests in place is a very frustrating experience: While fixing something you will often and inevitably break something else. Unit tests let you know when this happens.</li> | |||
| <li><strong>Releasing to the public, confidently.</strong> If your application is shipped to paying customers, not having a solid unit test coverage should make you shiver every time you make a release.</li> | |||
| <li><strong>Better code through tests.</strong> Writing good tests is one of the best preconditions to have good code in the end. This is because tests help you understand the problem you're trying to solve and create a simple, modular architecture.</li> | |||
| <li><strong>Up-to-date documentation.</strong> In an ideal world, every important part of an application would be nicely documented. We would have wonderful, clean, and beautifully formatted documents that are a joy to read. And most importantly, we would update the documentation every time something in the code changes. Well... this is of course a fairytale.<br/> | |||
| But having up to date documentation in general does <em>not</em> have to be a fairytale: unit tests can serve this purpose. Although probably not as <em>pleasant</em> to read as dedicated documentation, they are (almost by definition) always up to date. This makes unit tests a very valuable and reliable source of documentation.</li> | |||
| </ul> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"If you have paying customers, not having unit tests for your app should make you shiver every time you ship it." </span> </blockquote> </div> | |||
| <p>Good test <em>quality</em> and good test <em>coverage</em> of important code parts are mandatory for larger projects. It made us much more confident that we would always be able to deliver <a href="https://www.git-tower.com">Tower</a> with a high quality and that we would always be able to make changes (big and small) safely and effectively.</p> | |||
| <h2>Tests Make Development Faster</h2> | |||
| <p>At first glance, using a test-driven approach would seem to be time-consuming and slow down your progress. And indeed, writing good unit tests takes time.</p> | |||
| <p>But over time, you will find that unit testing will in fact make you faster! For one thing, after thinking about your code design while writing a test, you will need less time to write the actual implementation code. You will have done a lot of the heavy lifting already by writing the tests.</p> | |||
| <p>The other benefit that will make you a lot more effective in the long run is stability: the likelihood of breaking existing code when making changes is significantly reduced through tests. You will save countless hours of bug hunting that you can now invest in something more useful.</p> | |||
| <h2>Fixing by Testing</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-bugs-computer.svg" alt=""/></figure> | |||
| <p>Bug fixing should be inseparably connected with writing tests. Of course you could just track that bloody animal down and simply fix the code. However, I guess that a lot of you are painfully familiar with the term "regression": the annoying re-emergence of a bug that you were so confident to have fixed.</p> | |||
| <p>If you want to make sure (and you should!) that a bug is fixed for good, there is only on proven way - by writing a test to safeguard this piece of code.</p> | |||
| <h2>Test Low-Level Components</h2> | |||
| <p>While producing a <a href="https://www.git-tower.com">software product that is in daily use by almost 100,000 people</a>, we learned a lot about errors. For one thing, we learned that they are an inevitable part of the business; especially with the diverse and complex system setups that Tower has to deal with, you cannot rule out and safeguard everything. But for another thing, we also learned <em>where</em> errors mostly occured.</p> | |||
| <p>In Tower (and most likely in a lot of other larger applications), most errors tend to occur in low level components. The good thing about this is that such components lend themselves very well to unit testing. In this area, a test-driven approach offers a huge chance to improve your application's overall stability and quality with a reasonable investment – by thoroughly testing low-level components.</p> | |||
| <h2>Efficient Testing</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-assert-test.svg" alt=""/></figure> | |||
| <p>In general, having a large amount of your code covered by unit tests is a good thing. However, if you ever hear a software developer brag about his "100% test coverage", you should be wary. Testing every single line of your application code might sound like something to strive for - but it really isn't!</p> | |||
| <p>On the one hand, this would of course afford an infinite amount of time. Much more importantly, however, there <em>is</em> in fact something like writing too many tests! At the latest, you will learn this when making a bigger refectoring: not only your code, but also your tests have to be maintained. When your code changes, your tests need to change, too.</p> | |||
| <p>The crucial criteria is <em>value</em>. Does the test bring you enough value to justify writing it? Typically, tests are of <em>low</em> value if they test only very simple logic. In these cases, the burden of having to maintain the test outweighs the little value that it brings.</p> | |||
| <p>Writing tests <em>efficiently</em>, then, means preferring fewer high-value tests over many low value tests.</p> | |||
| <h2>Test, Don't Run</h2> | |||
| <p>Manually testing a certain scenario in your application can really take a huge amount of time: you have to start the app, navigate your way to a certain view, and perform various additional actions to reproduce a certain scenario.</p> | |||
| <p>Writing a unit test for a scenario will indeed afford some time initially. But very quickly, probably already after having to test this only a couple of times, running the test will be much faster than starting the whole application and testing your way through it manually.</p> | |||
| <p>Besides being faster, however, the test will also provide better results in terms of quality and stability. In most cases, the initial effort is worth the long time benefits.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://www.git-tower.com/blog/dev-philosophy-2">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 77
- 0
cache/03f7d88efe4db61d7007bcf736aa789f/index.md
View File
| @@ -0,0 +1,77 @@ | |||
| title: Our Development Philosophy (2): Collaboration & Testing | |||
| url: https://www.git-tower.com/blog/dev-philosophy-2 | |||
| hash_url: 03f7d88efe4db61d7007bcf736aa789f | |||
| <p>We learned in countless situations within our own team how important these skills really are: very often when things went wrong, it had been due to a lack of testing and/or collaboration. Here are some things we've learned while growing <a href="https://www.git-tower.com/" rel="noopener noreferrer" target="_blank">Tower</a> to serve almost 100,000 users.</p> | |||
| <p><br/></p> | |||
| <h2>All Code Belongs to the Team</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-code-belongs-to-the-team.svg" alt=""/></figure> | |||
| <p><strong>Code is teamwork, not the work of any individual developer.</strong> This also means that none of the code you've written belongs to you – it belongs to the team! Looking at code in this way is helpful and liberating for a couple of reasons:</p> | |||
| <ul> | |||
| <li> | |||
| <p><strong>It doesn't have to go your way.</strong> After understanding that code always belongs to the team, it becomes obvious that we need to comply with coding standards and guidelines. Since it's not your code you can't just write it any way you fancy. It's a common code base, so common rules must be adhered.<br/> | |||
| This should also make you more tolerant when looking at your colleagues' code. You might instinctively think of all the ways you would have done it differently. But again: it doesn't have to go your way, but your team's way. This can help a lot in making you more open-minded towards other solutions and approaches.</p> | |||
| </li> | |||
| <li> | |||
| <p><strong>Everything is your problem.</strong> When you spot a potential problem in the code, it doesn't really matter if it was your fault for not. Since all of the project's code belongs to the team – and you are part of this team – weak code from any source becomes your problem.<br/> | |||
| Contrast this to an atmosphere where people are detached from their teams and their shared code: "this is not my problem" is an attitude that will never produce great products.</p> | |||
| </li> | |||
| <li><strong>You. You. You.</strong> I learned this one from <a href="https://opbeat.com/" rel="noopener noreferrer" target="_blank">opbeat's</a> <a href="https://twitter.com/roncohen" rel="noopener noreferrer" target="_blank">Ron Cohen</a> when I heard him speak at a conference. It's a simple reminder of our responsibilities as software developers: <strong>You</strong> are responsible for writing code. Then, <strong>you</strong> are also responsible for making it shippable or production ready. And of course, <strong>you</strong> are responsible for fixing any problems with it.<br/> | |||
| In our own team, where we don't have a dedicated quality assurance team, this reminded us that developers are not only responsible for writing down lines of code – but also for the quality of that code. This responsibility is nothing that you can duck out of or hand over to someone else.</li> | |||
| </ul> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"Code is teamwork, not the work of any individual developer." </span> </blockquote> </div> | |||
| <h2>Sharing Knowledge with Code Reviews</h2> | |||
| <p>Code reviews have a huge potential to lift your development team to new heights.</p> | |||
| <p>Most obviously, discussing code in a review session can lead to a better solution than the original developer had had on her own. Two minds working together on the same problem will always have the chance to produce higher quality code.</p> | |||
| <p>But other potential benefits of code reviews might be even more interesting. Shared ownership, for example, is crucial to reduce knowledge silos: whenever you find that only a single developer in your team knows a certain piece of code, you are at risk. Whenever this developer goes on holidays, gets sick, or maybe even leaves the company you'll be in trouble.<br/> | |||
| But even if none of these situations occur: the fact that your team doesn't seem to have a truly shared code base is already telling. Have a look at the previous section and you'll understand why.</p> | |||
| <p>Additionally, code reviews can solve the hairy problem of knowledge exchange. If, like most teams, you have a mixture of junior and senior developers, you will certainly want those junior developers to benefit from your experts' experience and knowledge. Code reviews are an excellent way to pass on knowledge in situations like these.</p> | |||
| <p>And to make the process worthwhile for both sides (juniors and seniors), make sure your senior developers understand that both parties – the student and the teacher – will learn something on the way!</p> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"Senior developers should understand that they, too, might learn something when mentoring a junior colleague!" </span> </blockquote> </div> | |||
| <h2>Not Everything Needs Improvement</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-fast-car.svg" alt=""/></figure> | |||
| <p>Since there is no such thing as a perfect solution, you could argue that everything can be improved. And you're probably right. But the interesting question is not if something can be improved – but rather if it's worthwhile to improve a certain part in your application.</p> | |||
| <p>We know where our own product, <a href="https://www.git-tower.com">Tower</a>, has its weak spots. And if time was infinite, we would probably polish and improve every single bit. But with time being a scarce resource for any team you will have to set priorities. If you don't, your product will not take the direction you want it to take - or it might very well take no direction at all.</p> | |||
| <p>Being able to responsibly ponder if or if not to improve something really is an art. It takes years of experience and, in the best case, even conscious training. Saying no to a lot of things is a prerequisite for achieving anything of worth.</p> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"Saying no to a lot of things is a prerequisite for achieving anything of worth." </span> </blockquote> </div> | |||
| <p>True in life, and true in software development.</p> | |||
| <h2>Ask Questions</h2> | |||
| <p>When reading other people's code it's all too easy to assume that you would have done it better. On first encounter, this or that line might seem unnecessarily complex or even superfluous. And you might of course be right. But it's very hard to say because of one simple fact: you didn't actually <em>write</em> the code.</p> | |||
| <p>From our own experience, we know that even the simplest problem can really contain a surprising and infinite amount of complexity. Only when actually working on the problem – when picking it apart, thinking about possible solutions, side effects, etc. – will one be able to understand its scope.</p> | |||
| <p>Therefore, when coming across a piece of code that makes you suspicious, it's a great ground rule to <strong>assume a good amount of hidden complexity</strong>. From this point of view you can either dive deep into the code and try to understand it and the underlying problem – or you simply get into a conversation with your teammate(s) and ask some humble questions.</p> | |||
| <h2>Software is Only Complete with Tests</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-developer-tasks.svg" alt=""/></figure> | |||
| <p>Unit tests are sometimes regarded as the icing on the cake. More appropriately, however, they would be better described as the cake's <em>base</em>.</p> | |||
| <p>In smaller projects, you might get away without writing unit tests. In any project with just a slight amount of complexity, however, you will not. And, just as a side note, it's remarkable to see how many projects started simple and very soon became complex. So please don't act surprised.</p> | |||
| <p>There are indeed countless reasons why unit testing is essential for us:</p> | |||
| <ul> | |||
| <li><strong>Making big changes, safely and quickly.</strong> In every larger project, you will have to perform refactorings at some point. But refactoring code without a decent amount of unit tests in place is a very frustrating experience: While fixing something you will often and inevitably break something else. Unit tests let you know when this happens.</li> | |||
| <li><strong>Releasing to the public, confidently.</strong> If your application is shipped to paying customers, not having a solid unit test coverage should make you shiver every time you make a release.</li> | |||
| <li><strong>Better code through tests.</strong> Writing good tests is one of the best preconditions to have good code in the end. This is because tests help you understand the problem you're trying to solve and create a simple, modular architecture.</li> | |||
| <li><strong>Up-to-date documentation.</strong> In an ideal world, every important part of an application would be nicely documented. We would have wonderful, clean, and beautifully formatted documents that are a joy to read. And most importantly, we would update the documentation every time something in the code changes. Well... this is of course a fairytale.<br/> | |||
| But having up to date documentation in general does <em>not</em> have to be a fairytale: unit tests can serve this purpose. Although probably not as <em>pleasant</em> to read as dedicated documentation, they are (almost by definition) always up to date. This makes unit tests a very valuable and reliable source of documentation.</li> | |||
| </ul> | |||
| <div class="canned-tweet"> <p class="tweet-button"/> <blockquote> <span>"If you have paying customers, not having unit tests for your app should make you shiver every time you ship it." </span> </blockquote> </div> | |||
| <p>Good test <em>quality</em> and good test <em>coverage</em> of important code parts are mandatory for larger projects. It made us much more confident that we would always be able to deliver <a href="https://www.git-tower.com">Tower</a> with a high quality and that we would always be able to make changes (big and small) safely and effectively.</p> | |||
| <h2>Tests Make Development Faster</h2> | |||
| <p>At first glance, using a test-driven approach would seem to be time-consuming and slow down your progress. And indeed, writing good unit tests takes time.</p> | |||
| <p>But over time, you will find that unit testing will in fact make you faster! For one thing, after thinking about your code design while writing a test, you will need less time to write the actual implementation code. You will have done a lot of the heavy lifting already by writing the tests.</p> | |||
| <p>The other benefit that will make you a lot more effective in the long run is stability: the likelihood of breaking existing code when making changes is significantly reduced through tests. You will save countless hours of bug hunting that you can now invest in something more useful.</p> | |||
| <h2>Fixing by Testing</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-bugs-computer.svg" alt=""/></figure> | |||
| <p>Bug fixing should be inseparably connected with writing tests. Of course you could just track that bloody animal down and simply fix the code. However, I guess that a lot of you are painfully familiar with the term "regression": the annoying re-emergence of a bug that you were so confident to have fixed.</p> | |||
| <p>If you want to make sure (and you should!) that a bug is fixed for good, there is only on proven way - by writing a test to safeguard this piece of code.</p> | |||
| <h2>Test Low-Level Components</h2> | |||
| <p>While producing a <a href="https://www.git-tower.com">software product that is in daily use by almost 100,000 people</a>, we learned a lot about errors. For one thing, we learned that they are an inevitable part of the business; especially with the diverse and complex system setups that Tower has to deal with, you cannot rule out and safeguard everything. But for another thing, we also learned <em>where</em> errors mostly occured.</p> | |||
| <p>In Tower (and most likely in a lot of other larger applications), most errors tend to occur in low level components. The good thing about this is that such components lend themselves very well to unit testing. In this area, a test-driven approach offers a huge chance to improve your application's overall stability and quality with a reasonable investment – by thoroughly testing low-level components.</p> | |||
| <h2>Efficient Testing</h2> | |||
| <figure class="cartoon"><img src="https://www.git-tower.com/blog/content/posts/103-dev-philosophy-2/cartoon-assert-test.svg" alt=""/></figure> | |||
| <p>In general, having a large amount of your code covered by unit tests is a good thing. However, if you ever hear a software developer brag about his "100% test coverage", you should be wary. Testing every single line of your application code might sound like something to strive for - but it really isn't!</p> | |||
| <p>On the one hand, this would of course afford an infinite amount of time. Much more importantly, however, there <em>is</em> in fact something like writing too many tests! At the latest, you will learn this when making a bigger refectoring: not only your code, but also your tests have to be maintained. When your code changes, your tests need to change, too.</p> | |||
| <p>The crucial criteria is <em>value</em>. Does the test bring you enough value to justify writing it? Typically, tests are of <em>low</em> value if they test only very simple logic. In these cases, the burden of having to maintain the test outweighs the little value that it brings.</p> | |||
| <p>Writing tests <em>efficiently</em>, then, means preferring fewer high-value tests over many low value tests.</p> | |||
| <h2>Test, Don't Run</h2> | |||
| <p>Manually testing a certain scenario in your application can really take a huge amount of time: you have to start the app, navigate your way to a certain view, and perform various additional actions to reproduce a certain scenario.</p> | |||
| <p>Writing a unit test for a scenario will indeed afford some time initially. But very quickly, probably already after having to test this only a couple of times, running the test will be much faster than starting the whole application and testing your way through it manually.</p> | |||
| <p>Besides being faster, however, the test will also provide better results in terms of quality and stability. In most cases, the initial effort is worth the long time benefits.</p> | |||
+ 562
- 0
cache/043a8a5bb6350dd5ddba7789a77df9b2/index.html
View File
| @@ -0,0 +1,562 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Lire, écrire et la révolution (par Derrick Jensen) (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://partage-le.com/2018/08/lire-ecrire-et-la-revolution-par-derrick-jensen/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Lire, écrire et la révolution (par Derrick Jensen) (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://partage-le.com/2018/08/lire-ecrire-et-la-revolution-par-derrick-jensen/">Source originale du contenu</a></h3> | |||
| <p><span>Le texte qui suit est une traduction d’une partie du chapitre « Revolution » du livre de Derrick Jensen intitulé <em>Walking on Water: Reading, writing and Revolution</em> (non traduit, en français : « Marcher sur l’eau : lire, écrire et la révolution »).</span></p> | |||
| <p><hr/> | |||
| <p>La semaine dernière, une amie m’a envoyé deux e-mails détaillant sa vision de l’éducation. Le premier disait : « Ayant été préservée du système scolaire public jusqu’au CM1, dès le premier jour, je n’y ai pas adhéré. Ils ne m’ont pas eue assez tôt. Je me rappelle de ce premier jour, et de mon effroi lorsque j’ai réalisé que mes camarades venaient là jour après jour, depuis des années. Pourquoi ne m’avait-on pas prévenue qu’il s’agissait d’une prison diurne ? J’ai été d’autant plus horrifiée en réalisant que j’avais moi aussi été condamnée à cet enfer pour les huit prochaines années. Je crois encore fortement que le fait qu’on m’ait épargné les premières années d’endoctrinement a toujours constitué une de mes plus grandes forces. » Et le second : « Certains de mes professeurs ont fermé les yeux sur les approches créatives que je mettais en place pour supporter mes journées, ceux-là étaient des alliés qui nous permettaient d’endurer la misère à laquelle nous étions condamnés, mais aucun ne m’a suffisamment aimée pour me permettre de devenir qui j’étais. Ils étaient tous si dégradés par leur propre éducation institutionnelle débilitante que bien peu parvenaient ne serait-ce qu’à entrevoir ce que devrait être une véritable éducation. Ce système a trahi ma confiance à de si nombreuses reprises que j’ai été amenée à le détester. Cela dit, je suis évidemment contente de savoir que je le hais. J’ai toujours su qu’il était abominable parce que j’avais de quoi comparer, grâce à l’éducation que ma mère me fournissait de première main. J’adorais l’école à la maison. Aucun stress n’accompagnait cet apprentissage. C’était un jeu. Tous les enfants (et tous les humains, et même tous les non humains !) aiment apprendre. Il faut vraiment travailler dur pour réussir à leur retirer cela. Ce système y parvient très bien en à peine quelques années. Et je ne prétends jamais ne pas le haïr, pas plus que je ne crois qu’il puisse être réformé — cette autre idée doit également être anéantie. Je suis constamment stupéfaite et horrifiée de voir des parents qui semblent prometteurs et intelligents, qui font un travail formidable à la maison avec leurs enfants — qui prennent soin d’eux, qui surveillent leur régime et leur exposition aux médias —, les confier au système dès qu’ils atteignent cinq ans. Il s’agit d’une incohérence colossale, d’un angle mort terrible. Et leurs justifications sont tout aussi stupéfiantes. Cela me fait penser à ce phénomène, dont tu es familier, à coup sûr, de ces parents qui remettent leurs enfants directement entre les mains de leurs abuseurs. Ce matin, j’ai accompagné une amie qui emmenait son fils à l’école (au CP), et lorsque nous sommes reparties, elle m’a dit qu’elle avait vu beaucoup de mères pleurer la semaine dernière tandis qu’elles laissaient leurs enfants à l’école pour la première fois. Elle a esquissé une sorte de sourire, l’air de dire ‘toutes les mères connaissent ce genre de peine’. Je lui ai dit que je voulais bien le croire, et lui ai demandé pourquoi, selon elle, toutes ces mères pleuraient. Elle n’a pas répondu. Je pense qu’elle sait que c’est parce qu’elles vont à l’encontre de ce que leur suggère tout l’instinct qu’elles ont pour le bien-être de leurs enfants. »</p> | |||
| <p>Cela nous mène directement à la question que j’ai jusqu’ici pris soin d’éviter dans ce livre. Qui consiste à savoir si nous devrions tenter de faire au mieux dans le cadre de ce système vérolé, ou si nous ferions mieux d’essayer de le démanteler intégralement.</p> | |||
| <p>Il se trouve que j’ai reçu un autre e-mail aujourd’hui, également sur l’éducation, mais écrit par une autre amie. Elle écrit : « Il est important de se pencher sur l’éducation parce qu’elle constitue une relation que nous sommes tous contraints de connaître, ainsi qu’une métaphore ou un modèle pour toutes les autres relations de domination. J’ai beaucoup pensé à cela dernièrement, parce que ces deux dernières années je me suis trouvée dans deux positions, à la fois dans le rôle de victime (en tant que doctorante) et de coupable (en tant qu’enseignante), et j’ai réalisé que lorsque nous parlons d’éducation (ou de la culture dominante) nous parlons de défaire une relation de domination. Chaque jour, je lutte pour trouver des moyens d’éviter les mécanismes d’oppression (ce qui est véritablement impossible) et pour éviter d’y avoir recours (ce qui est assez difficile, je ne sais pas à quel point j’y arrive). Dans les cours que je donne, j’essaie de ne pas infliger de violence émotionnelle à mes élèves et d’éviter la coercition, ce qui m’a confrontée à de nombreuses reprises à la question : Quelle est la différence entre le fait de diriger et la coercition ? Il m’arrive de parvenir à pousser mes élèves vers plus de responsabilités, à s’émanciper davantage, et parfois non. Dans mes classes les plus restreintes, qui me permettent d’enseigner comme je le souhaite, cela m’est plus facile. Je peux rendre ces cours concrets, et les étudiants aiment en apprendre sur eux-mêmes. Mais je remarque que dans mes classes plus nombreuses, plusieurs de mes étudiants sont malpolis envers moi, sauf lorsque j’ai recours à une forme d’Autorité. Certains d’entre eux considèrent mon ouverture comme une faiblesse et ma gentillesse comme une vulnérabilité. Lorsque l’ouverture et la gentillesse inspirent le mépris et le ridicule, que pouvons-nous faire ? Ainsi beaucoup de mes élèves attendent de moi que je les “dirige” comme ils ont été dirigés auparavant, et s’arrangent pour m’y obliger. Cela me rappelle une relation que j’ai connue il y a longtemps, dans laquelle mon compagnon me poussait à bout de manière émotionnelle pendant plusieurs mois, puis me contraignait de manière physique. Je lui hurlais dessus en lui disant de me laisser, et je n’oublierai jamais son regard, cet air suffisant, satisfait et content, cette expression qui m’indiquait qu’il avait finalement réussi à me faire agir de la manière dont il voulait que j’agisse. J’ai mis un terme à cette relation. Ou, plutôt, devrais-je dire que je me suis extirpée de cette relation forcée. Ce genre de chose est très fréquent. La domination imprègne tous les aspects de nos relations, et certaines choses stimulent son emprise. Lorsqu’un tel système de relations envahit nos relations les plus sacrées, celles qui unissent le corps et le cœur, plus rien ne peut l’arrêter. Mais, bien sûr, il ne s’arrête pas là. La question devient : Comment entretenir des relations qui ne soient pas coercitives dans un système qui ne l’encourage pas ? C’est très complexe. Je sais que mes élèves se rebellent contre leur propre expérience de l’oppression, mais j’en subis les conséquences. Et puis il y a des étudiants qui ont été tellement blessés par leurs parents, leurs enseignants, et d’autres figures d’autorité que tous mes efforts pour les atteindre sont vains. Que puis-je faire ? Un de mes élèves les plus malpolis, par exemple, a prononcé un excellent discours de fin d’année sur le thème de la violence psychologique à l’encontre des enfants et de la manière dont elle est ressentie. Je n’avais pas réussi à l’atteindre dans mes cours — il avait été impoli de bout en bout — et soudain, je comprenais pourquoi. Et j’en étais désolée. J’imagine que tout cela nous mène à trois questions : 1– La matière qui émane du patriarcat capitaliste et suprémaciste vaut-elle d’être enseignée ? 2– Je sais que la raison d’être d’une véritable éducation est de permettre aux gens d’en apprendre sur eux-mêmes et sur le monde, mais, alors, concrètement, qu’est-il essentiel d’apprendre ? Et 3– Comment cela peut-il fonctionner ? »</p> | |||
| <p>Je n’ai pas les réponses à ses questions. Voilà ce que je sais : je hais la civilisation industrielle, pour ce qu’elle fait à la planète, pour ce qu’elle fait aux communautés, pour ce qu’elle fait à tous les non humains (sauvages et domestiqués), et pour ce qu’elle fait à tous les humains (sauvages et domestiqués). Je hais l’économie salariale, parce qu’elle pousse — ou, plutôt, qu’elle oblige — les humains à vendre leur vie et à la perdre en faisant des choses qu’ils n’aiment pas faire, et parce qu’elle récompense le fait que nous nous faisions du mal entre nous, et que nous détruisions nos territoires. Je hais l’éducation industrielle parce qu’elle commet l’un des plus impardonnables péchés qui soient : elle pousse les êtres humains à ne pas être qui ils sont, elle en fait des travailleurs convaincus qu’il est dans leur meilleur intérêt d’être les esclaves les plus loyaux, de faire voguer la galère qu’est la civilisation industrielle aussi frénétiquement — ardemment, luxurieusement — que possible, vers l’enfer, en les contraignant d’entraîner avec eux tous ceux et tout ce qu’ils croisent. Et je participe à ce processus. J’aide à rendre l’école un peu plus acceptable, un peu plus amusante, tandis que les étudiants sont formés afin de prendre part à la destruction en cours de la planète, tandis qu’ils entrent dans la phase finale du renoncement à leur droit inaliénable d’être des humains libres et heureux et qu’ils endossent les rôles de rouages dans l’immense machinerie industrielle ou, pire, de gardiens du camp de travail/d’esclavage géant que nous percevions autrefois comme une planète vivante. Cela fait-il de moi un collaborateur ?</p> | |||
| <p>Robert Jay Lifton, probablement l’un des experts les plus réputés au monde en ce qui concerne la psychologie du génocide, exprime clairement, dans son excellent livre <em>Les médecins nazis</em>, que nombre des médecins qui travaillaient dans des camps de concentration tels qu’Auschwitz tentèrent de rendre la vie de leur détenus la plus confortable possible en faisant tout ce qui était en leur pouvoir pour améliorer leurs existences. Tout, sauf la chose la plus importante : remettre en question la réalité d’Auschwitz, c’est-à-dire la superstructure génératrice d’atrocités à laquelle ils obéissaient. Le fait que l’éducation industrielle détruise des âmes et non des corps n’allège pas ma culpabilité. Ma culpabilité découle non seulement de ma participation à ce processus de destruction ou de déformation de l’humanité des étudiants (un peu comme si je mettais des coussins sur les bancs des galères afin que les esclaves ne se fassent pas trop mal), mais aussi de ma participation au processus plus large qui forme les superviseurs : je peux bien prétendre lutter contre la civilisation, lorsque j’enseigne à l’université, je participe activement à l’éducation des futurs technocrates qui soutiendront la civilisation et qui, simplement en faisant leur travail aussi bien et peut-être plus joyeusement que je fais le mien, propageront l’écocide et détruiront ce qu’il restera du monde naturel.</p> | |||
| <p>Ainsi que Raul Hilberg le décrit si justement dans son monumental ouvrage <em>La destruction des Juifs d’Europe</em>, l’immense majorité des responsables de l’Holocauste ne tirèrent ni ne gazèrent leurs victimes : ils écrivaient des mémos, répondaient au téléphone, se rendaient à des réunions. Ils faisaient leur travail au sein d’une vaste bureaucratie qui n’avait pas pour fonction quelque chose d’aussi indélicat qu’un meurtre en masse, mais qui servait à maximiser la production et à minimiser les coûts pour les usines (on omettait : en ayant recours au travail forcé) ; à libérer des terres et d’autres nécessités pour le fonctionnement de l’économie (on omettait : en envahissant l’Europe de l’Est et l’Union soviétique) ; à protéger la sécurité nationale (on omettait : en emprisonnant ou en tuant ceux qu’elle considère comme des menaces, dont les Juifs, les Roms, les homosexuels, les dissidents, les « réfractaires au travail » [c’est-à-dire ceux qui ne voulaient pas travailler, ou, ainsi que le SS-Oberführer Greifelt l’exprima, « ceux qui ne voulaient pas participer à la vie ouvrière de la nation et qui vivotaient en réfractaires […] devaient être gérés par des moyens coercitifs et mis au travail », ce qui signifie qu’ils étaient envoyés à Buchenwald]), et ainsi de suite ; et à rassembler des vêtements, des lunettes, des chaussures et de l’or pour l’usage des bons Allemands (on omettait : la provenance de ces objets).</p> | |||
| <p>Pour être clair, et pour m’assurer que ni vous ni moi ne nous exemptions de toute responsabilité : la civilisation industrielle détruit la planète, et nous participons tous. Sans nos contributions, que nous soyons des ingénieurs géophysiciens explorant le désert de l’Utah à la recherche de gaz naturel, des publicitaires écrivant des rapports pour la multinationale Ford Motor Company, des hôtes(ses) de l’air proposant des cacahuètes lors de vols transcontinentaux, des médecins veillant à ce que les travailleurs et les dirigeants soient en plus ou moins bonne santé, des psychologues permettant aux consommateurs de continuer à plus ou moins fonctionner, des auteurs écrivant des livres pour que les gens se divertissent, ou des professeurs aidant des écrivains en devenir à ne jamais ennuyer le lecteur, elle ne le pourrait pas. Ce système mortifère repose sur nous tous.</p> | |||
| <p>Enseigner à la prison rend tout cela encore plus concret. À chaque fois que je passe les portes, je participe au fonctionnement du système carcéral le plus étendu au monde, et le plus raciste, puisqu’il incarcère proportionnellement plus de Noirs que le régime sud-africain durant l’apartheid. Mais en même temps, je sais que nombre de mes élèves m’ont dit explicitement et de nombreuses fois que nos cours sont la seule chose qu’ils attendent avec impatience de toute leur semaine, la seule chose qui leur permette de rester sains d’esprit.</p> | |||
| <p>Cela fait des années que je bloque sur cette question de réforme ou révolution, et peut-être qu’il est temps que je suive mon propre conseil et que je réalise que je pose une mauvaise question. Réforme contre révolution est une fausse dichotomie. La première réponse est que nous avons besoin des deux : sans une révolution, la planète est foutue, mais si nous nous contentons d’attendre la révolution, cela aura le même effet. Pendant des années, avec d’autres activistes de tout le pays, nous avons rempli ce qu’on appelle des recours contre des ventes de bois, dans une tentative (finalement infructueuse) de pousser le Service des forêts à cesser de proposer des ventes de bois illégales, fiscalement irresponsables et écologiquement destructrices, sur des terres publiques. Je suis contre toute forme de gestion forestière industrielle, et particulièrement contre la foresterie industrielle sur des terres publiques. En outre, je sais que les systèmes administratifs et judiciaires sont biaisés en faveur des corporations (pourquoi faire le timide : ils sont conçus pour détruire les communautés naturelles qui soutiennent la vie). Mais rien de tout cela ne m’a empêché d’avoir recours temporairement à cette tactique réformiste. Je ferai tout pour sauver les forêts. Ce qui m’amène à la seconde réponse, qui est que la moralité est toujours circonstancielle. Nous devrions faire ce qui est juste à l’endroit où nous sommes, et nous rendre aux endroits où nous pourrions faire ce qui est juste. Le tempérament et les compétences que nous avons nous aident aussi à déterminer ce que nous devrions faire.</p> | |||
| <p>J’entends déjà ces voix me murmurer, encore et encore : <em>pente glissante, pente glissante. Te souviens-tu des médecins d’Auschwitz ?</em> Mais toutes les pentes sont glissantes. Et alors ? Mon héritage naturel en tant qu’être moral et sensible me dispose à effectuer ce genre de jugements moraux. Il est de mon devoir et de ma joie de me confronter à ces démarches de discernement aussi honnêtement et lucidement que possible. Et plus encore. Le point clé de l’attitude méprisable des médecins nazis était leur échec à remettre en question la réalité d’Auschwitz. Très franchement, la majorité d’entre nous échouons tout aussi odieusement à remettre en question la civilisation industrielle, l’économie salariale et, pour en revenir au cœur de cette discussion, l’éducation industrielle. Inlassablement remettre en question notre contexte, qu’il s’agisse d’Auschwitz, de Disney, de la prison d’État de Pelican Bay, de la civilisation industrielle, de l’Université de l’Est de Washington, ou de la Glorieuse Révolution des Luddites, constitue le meilleur moyen que je connaisse pour se prémunir face à une pente glissante. Parce qu’il me semble que ces pentes sont plus dangereuses lorsqu’on ne les examine pas.</p> | |||
| <p><strong><strong><em></strong></p> | |||
| <p>À la quatrième semaine de chaque trimestre, environ, je me pose la même question : De quoi discuterions-nous si j’avais les mêmes élèves pendant deux trimestres d’affilée, voire pendant deux semestres ?</p> | |||
| <p>Et chaque trimestre, environ, la même réponse me vient. Si le premier trimestre portait sur la libération, le second porterait sur la responsabilité. Chacun de nous doit apprendre et faire l’expérience — incorporer, intégrer dans son corps — des deux. Elles sont indissociables. L’une sans l’autre devient une parodie, et mène aux comportements inappropriés, destructeurs et autodestructeurs qui caractérisent généralement les parodies inconscientes ou non intentionnelles. La responsabilité sans la liberté donne l’esclavage. Ainsi qu’on le constate. La liberté sans la responsabilité donne l’immaturité. Ainsi qu’on le constate également. Combinez ces deux-là et vous vous retrouvez avec une culture entièrement composée d’esclaves immatures. Ainsi qu’on le constate encore, malheureusement pour nous et pour tous ceux que nous croisons. Pour ceux qui s’intéressent à la croissance de l’économie, ces parodies peuvent être très intéressantes, mais pour ceux qui s’intéressent à la vie, elles sont effroyablement nuisibles.</p> | |||
| <p>Ces sujets des quêtes de la libération et de la responsabilité, je ne les aborde pas en prison, parce que les circonstances de vie de mes élèves y sont très différentes, ce qui implique que ce dont ils ont besoin et que ce qu’ils attendent de moi est très différent. Et ce que je suis autorisé à leur donner diffère également. Ces cours en prison, dont certains durent depuis plusieurs années, sont plus techniques. […] Mon travail y est plus circonscrit, un peu moins philosophique.</p> | |||
| <p>Cela dit, les différences sont superficielles et, comme toujours, contextuelles. Les bases, qui consistent à respecter, à aimer et à aider mes élèves à devenir qui ils sont, demeurent les mêmes pour l’université et pour la prison.</p> | |||
| <p><strong></em></strong></strong></p> | |||
| <p>C’est la huitième semaine à l’université, et il y a dans l’air comme une odeur de révolution. Nombre de mes élèves en ont après moi. L’un d’eux me dit : « Vous parlez de libération, de comment nous sommes les vrais dirigeants dans la classe, de comment vous voulez que nous prenions en charge notre propre éducation. Mais c’est du vent. Vous dirigez toujours. »</p> | |||
| <p>Un autre : « Vous dites que vous ne voulez pas nous noter, mais les notes de présence sont toujours de la coercition. »</p> | |||
| <p>Une autre : « Et si je ne veux rien écrire ?</p> | |||
| <p>— Alors j’imagine que tu vas devoir retaper.</p> | |||
| <p>— Je pensais que vous valiez mieux que les autres profs, mais vous êtes tous les mêmes. Simplement, vous souriez lorsqu’on vous provoque. Pire encore, vous nous poussez à sourire lorsque vous nous secouez. »</p> | |||
| <p>Je suis content. Ils comprennent. Tout, dans cette classe, devait mener à cet instant, à leur rejet de mon autorité. C’était le but. Je veux jeter les notes de présence et leur mettre à tous des 20. Je veux jeter les 20 et ne rien leur donner de plus que ce que je leur ai déjà donné, du temps et de l’acceptation. Mais je ne veux pas laisser voir que je suis content. J’objecte. Pas beaucoup, mais un peu. Puis j’admets qu’ils ont raison.</p> | |||
| <p>Celle qui pensait que je valais mieux que les autres professeurs me dit : « Je ne vous blâme pas. Je vous aime bien. Vous êtes excellent. Mais vous essayez de vous insérer — et d’insérer votre acceptation et tout cet enseignement qui vise à ce qu’on se soucie de nous-mêmes — dans cet autre système basé sur la coercition, et c’est juste ridicule. »</p> | |||
| <p>Un regard un peu peiné dissimule ma joie. Je lui demande : « Alors, que devrais-je faire ? Voulez-vous que je change de manière d’enseigner ? Voulez-vous que je me mette à noter comme les autres ?</p> | |||
| <p>— Non, répond-elle, horrifiée.</p> | |||
| <p>— Mais alors, quoi ?</p> | |||
| <p>— Faites changer cet autre système.</p> | |||
| <p>— Comment puis-je faire ça ? »</p> | |||
| <p>Elle pensa un moment, puis me répondit la meilleure chose possible : « Vous êtes malin. Vous trouverez. J’ai suffisamment de mal à gérer ma propre vie. »</p> | |||
| <p>J’adore ce travail.</p> | |||
| <p><strong>***</strong></p> | |||
| <p>Ce week-end, j’ai donné un cours lors d’une conférence d’écrivains. C’était amusant. Le seul problème, c’est qu’elle prenait place dans une école du secondaire. Cela faisait longtemps que je ne m’étais pas rendu dans ce genre d’endroit. Cela faisait longtemps que je n’avais pas été obligé de rentrer dans une de ces salles de classe. C’est pire que dans mes souvenirs. L’une des premières choses que j’ai remarquées en entrant dans la salle où mes ateliers devaient se tenir était un autocollant rouge collé devant le bureau du professeur, qui lisait : « Vous n’êtes pas à Burger King, et vous n’aurez pas ce que vous voulez. » Des panneaux (certains écrits à la main au marqueur, d’autres produits en série) étaient accrochés sur tous les murs — littéralement, sur tous les murs — qui suggèrent aux étudiants que s’ils se comportent mal, ils seront envoyés au bureau du principal. L’un deux, en majuscules, stipule que LES ÉTUDIANTS NE DOIVENT JAMAIS PARLER SANS LEVER LA MAIN ET SANS AUTORISATION DU PROFESSEUR.</p> | |||
| <p>Bien qu’il s’agissait d’une salle de mathématiques, il me semble clair que le but était, comme toujours, d’obtenir la soumission envers l’autorité. Je ne sais pas comment j’y ai survécu. Je ne sais pas comment aucun élève peut y survivre. J’imagine que d’une certaine manière, très concrète, ils n’y survivent pas. Et c’est précisément l’objectif.</p></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://partage-le.com/2018/08/lire-ecrire-et-la-revolution-par-derrick-jensen/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 39
- 0
cache/043a8a5bb6350dd5ddba7789a77df9b2/index.md
View File
| @@ -0,0 +1,39 @@ | |||
| title: Lire, écrire et la révolution (par Derrick Jensen) | |||
| url: http://partage-le.com/2018/08/lire-ecrire-et-la-revolution-par-derrick-jensen/ | |||
| hash_url: 043a8a5bb6350dd5ddba7789a77df9b2 | |||
| <p><span>Le texte qui suit est une traduction d’une partie du chapitre « Revolution » du livre de Derrick Jensen intitulé <em>Walking on Water: Reading, writing and Revolution</em> (non traduit, en français : « Marcher sur l’eau : lire, écrire et la révolution »).</span></p> | |||
| <hr/> | |||
| <p>La semaine dernière, une amie m’a envoyé deux e-mails détaillant sa vision de l’éducation. Le premier disait : « Ayant été préservée du système scolaire public jusqu’au CM1, dès le premier jour, je n’y ai pas adhéré. Ils ne m’ont pas eue assez tôt. Je me rappelle de ce premier jour, et de mon effroi lorsque j’ai réalisé que mes camarades venaient là jour après jour, depuis des années. Pourquoi ne m’avait-on pas prévenue qu’il s’agissait d’une prison diurne ? J’ai été d’autant plus horrifiée en réalisant que j’avais moi aussi été condamnée à cet enfer pour les huit prochaines années. Je crois encore fortement que le fait qu’on m’ait épargné les premières années d’endoctrinement a toujours constitué une de mes plus grandes forces. » Et le second : « Certains de mes professeurs ont fermé les yeux sur les approches créatives que je mettais en place pour supporter mes journées, ceux-là étaient des alliés qui nous permettaient d’endurer la misère à laquelle nous étions condamnés, mais aucun ne m’a suffisamment aimée pour me permettre de devenir qui j’étais. Ils étaient tous si dégradés par leur propre éducation institutionnelle débilitante que bien peu parvenaient ne serait-ce qu’à entrevoir ce que devrait être une véritable éducation. Ce système a trahi ma confiance à de si nombreuses reprises que j’ai été amenée à le détester. Cela dit, je suis évidemment contente de savoir que je le hais. J’ai toujours su qu’il était abominable parce que j’avais de quoi comparer, grâce à l’éducation que ma mère me fournissait de première main. J’adorais l’école à la maison. Aucun stress n’accompagnait cet apprentissage. C’était un jeu. Tous les enfants (et tous les humains, et même tous les non humains !) aiment apprendre. Il faut vraiment travailler dur pour réussir à leur retirer cela. Ce système y parvient très bien en à peine quelques années. Et je ne prétends jamais ne pas le haïr, pas plus que je ne crois qu’il puisse être réformé — cette autre idée doit également être anéantie. Je suis constamment stupéfaite et horrifiée de voir des parents qui semblent prometteurs et intelligents, qui font un travail formidable à la maison avec leurs enfants — qui prennent soin d’eux, qui surveillent leur régime et leur exposition aux médias —, les confier au système dès qu’ils atteignent cinq ans. Il s’agit d’une incohérence colossale, d’un angle mort terrible. Et leurs justifications sont tout aussi stupéfiantes. Cela me fait penser à ce phénomène, dont tu es familier, à coup sûr, de ces parents qui remettent leurs enfants directement entre les mains de leurs abuseurs. Ce matin, j’ai accompagné une amie qui emmenait son fils à l’école (au CP), et lorsque nous sommes reparties, elle m’a dit qu’elle avait vu beaucoup de mères pleurer la semaine dernière tandis qu’elles laissaient leurs enfants à l’école pour la première fois. Elle a esquissé une sorte de sourire, l’air de dire ‘toutes les mères connaissent ce genre de peine’. Je lui ai dit que je voulais bien le croire, et lui ai demandé pourquoi, selon elle, toutes ces mères pleuraient. Elle n’a pas répondu. Je pense qu’elle sait que c’est parce qu’elles vont à l’encontre de ce que leur suggère tout l’instinct qu’elles ont pour le bien-être de leurs enfants. »</p> | |||
| <p>Cela nous mène directement à la question que j’ai jusqu’ici pris soin d’éviter dans ce livre. Qui consiste à savoir si nous devrions tenter de faire au mieux dans le cadre de ce système vérolé, ou si nous ferions mieux d’essayer de le démanteler intégralement.</p> | |||
| <p>Il se trouve que j’ai reçu un autre e-mail aujourd’hui, également sur l’éducation, mais écrit par une autre amie. Elle écrit : « Il est important de se pencher sur l’éducation parce qu’elle constitue une relation que nous sommes tous contraints de connaître, ainsi qu’une métaphore ou un modèle pour toutes les autres relations de domination. J’ai beaucoup pensé à cela dernièrement, parce que ces deux dernières années je me suis trouvée dans deux positions, à la fois dans le rôle de victime (en tant que doctorante) et de coupable (en tant qu’enseignante), et j’ai réalisé que lorsque nous parlons d’éducation (ou de la culture dominante) nous parlons de défaire une relation de domination. Chaque jour, je lutte pour trouver des moyens d’éviter les mécanismes d’oppression (ce qui est véritablement impossible) et pour éviter d’y avoir recours (ce qui est assez difficile, je ne sais pas à quel point j’y arrive). Dans les cours que je donne, j’essaie de ne pas infliger de violence émotionnelle à mes élèves et d’éviter la coercition, ce qui m’a confrontée à de nombreuses reprises à la question : Quelle est la différence entre le fait de diriger et la coercition ? Il m’arrive de parvenir à pousser mes élèves vers plus de responsabilités, à s’émanciper davantage, et parfois non. Dans mes classes les plus restreintes, qui me permettent d’enseigner comme je le souhaite, cela m’est plus facile. Je peux rendre ces cours concrets, et les étudiants aiment en apprendre sur eux-mêmes. Mais je remarque que dans mes classes plus nombreuses, plusieurs de mes étudiants sont malpolis envers moi, sauf lorsque j’ai recours à une forme d’Autorité. Certains d’entre eux considèrent mon ouverture comme une faiblesse et ma gentillesse comme une vulnérabilité. Lorsque l’ouverture et la gentillesse inspirent le mépris et le ridicule, que pouvons-nous faire ? Ainsi beaucoup de mes élèves attendent de moi que je les “dirige” comme ils ont été dirigés auparavant, et s’arrangent pour m’y obliger. Cela me rappelle une relation que j’ai connue il y a longtemps, dans laquelle mon compagnon me poussait à bout de manière émotionnelle pendant plusieurs mois, puis me contraignait de manière physique. Je lui hurlais dessus en lui disant de me laisser, et je n’oublierai jamais son regard, cet air suffisant, satisfait et content, cette expression qui m’indiquait qu’il avait finalement réussi à me faire agir de la manière dont il voulait que j’agisse. J’ai mis un terme à cette relation. Ou, plutôt, devrais-je dire que je me suis extirpée de cette relation forcée. Ce genre de chose est très fréquent. La domination imprègne tous les aspects de nos relations, et certaines choses stimulent son emprise. Lorsqu’un tel système de relations envahit nos relations les plus sacrées, celles qui unissent le corps et le cœur, plus rien ne peut l’arrêter. Mais, bien sûr, il ne s’arrête pas là. La question devient : Comment entretenir des relations qui ne soient pas coercitives dans un système qui ne l’encourage pas ? C’est très complexe. Je sais que mes élèves se rebellent contre leur propre expérience de l’oppression, mais j’en subis les conséquences. Et puis il y a des étudiants qui ont été tellement blessés par leurs parents, leurs enseignants, et d’autres figures d’autorité que tous mes efforts pour les atteindre sont vains. Que puis-je faire ? Un de mes élèves les plus malpolis, par exemple, a prononcé un excellent discours de fin d’année sur le thème de la violence psychologique à l’encontre des enfants et de la manière dont elle est ressentie. Je n’avais pas réussi à l’atteindre dans mes cours — il avait été impoli de bout en bout — et soudain, je comprenais pourquoi. Et j’en étais désolée. J’imagine que tout cela nous mène à trois questions : 1– La matière qui émane du patriarcat capitaliste et suprémaciste vaut-elle d’être enseignée ? 2– Je sais que la raison d’être d’une véritable éducation est de permettre aux gens d’en apprendre sur eux-mêmes et sur le monde, mais, alors, concrètement, qu’est-il essentiel d’apprendre ? Et 3– Comment cela peut-il fonctionner ? »</p> | |||
| <p>Je n’ai pas les réponses à ses questions. Voilà ce que je sais : je hais la civilisation industrielle, pour ce qu’elle fait à la planète, pour ce qu’elle fait aux communautés, pour ce qu’elle fait à tous les non humains (sauvages et domestiqués), et pour ce qu’elle fait à tous les humains (sauvages et domestiqués). Je hais l’économie salariale, parce qu’elle pousse — ou, plutôt, qu’elle oblige — les humains à vendre leur vie et à la perdre en faisant des choses qu’ils n’aiment pas faire, et parce qu’elle récompense le fait que nous nous faisions du mal entre nous, et que nous détruisions nos territoires. Je hais l’éducation industrielle parce qu’elle commet l’un des plus impardonnables péchés qui soient : elle pousse les êtres humains à ne pas être qui ils sont, elle en fait des travailleurs convaincus qu’il est dans leur meilleur intérêt d’être les esclaves les plus loyaux, de faire voguer la galère qu’est la civilisation industrielle aussi frénétiquement — ardemment, luxurieusement — que possible, vers l’enfer, en les contraignant d’entraîner avec eux tous ceux et tout ce qu’ils croisent. Et je participe à ce processus. J’aide à rendre l’école un peu plus acceptable, un peu plus amusante, tandis que les étudiants sont formés afin de prendre part à la destruction en cours de la planète, tandis qu’ils entrent dans la phase finale du renoncement à leur droit inaliénable d’être des humains libres et heureux et qu’ils endossent les rôles de rouages dans l’immense machinerie industrielle ou, pire, de gardiens du camp de travail/d’esclavage géant que nous percevions autrefois comme une planète vivante. Cela fait-il de moi un collaborateur ?</p> | |||
| <p>Robert Jay Lifton, probablement l’un des experts les plus réputés au monde en ce qui concerne la psychologie du génocide, exprime clairement, dans son excellent livre <em>Les médecins nazis</em>, que nombre des médecins qui travaillaient dans des camps de concentration tels qu’Auschwitz tentèrent de rendre la vie de leur détenus la plus confortable possible en faisant tout ce qui était en leur pouvoir pour améliorer leurs existences. Tout, sauf la chose la plus importante : remettre en question la réalité d’Auschwitz, c’est-à-dire la superstructure génératrice d’atrocités à laquelle ils obéissaient. Le fait que l’éducation industrielle détruise des âmes et non des corps n’allège pas ma culpabilité. Ma culpabilité découle non seulement de ma participation à ce processus de destruction ou de déformation de l’humanité des étudiants (un peu comme si je mettais des coussins sur les bancs des galères afin que les esclaves ne se fassent pas trop mal), mais aussi de ma participation au processus plus large qui forme les superviseurs : je peux bien prétendre lutter contre la civilisation, lorsque j’enseigne à l’université, je participe activement à l’éducation des futurs technocrates qui soutiendront la civilisation et qui, simplement en faisant leur travail aussi bien et peut-être plus joyeusement que je fais le mien, propageront l’écocide et détruiront ce qu’il restera du monde naturel.</p> | |||
| <p>Ainsi que Raul Hilberg le décrit si justement dans son monumental ouvrage <em>La destruction des Juifs d’Europe</em>, l’immense majorité des responsables de l’Holocauste ne tirèrent ni ne gazèrent leurs victimes : ils écrivaient des mémos, répondaient au téléphone, se rendaient à des réunions. Ils faisaient leur travail au sein d’une vaste bureaucratie qui n’avait pas pour fonction quelque chose d’aussi indélicat qu’un meurtre en masse, mais qui servait à maximiser la production et à minimiser les coûts pour les usines (on omettait : en ayant recours au travail forcé) ; à libérer des terres et d’autres nécessités pour le fonctionnement de l’économie (on omettait : en envahissant l’Europe de l’Est et l’Union soviétique) ; à protéger la sécurité nationale (on omettait : en emprisonnant ou en tuant ceux qu’elle considère comme des menaces, dont les Juifs, les Roms, les homosexuels, les dissidents, les « réfractaires au travail » [c’est-à-dire ceux qui ne voulaient pas travailler, ou, ainsi que le SS-Oberführer Greifelt l’exprima, « ceux qui ne voulaient pas participer à la vie ouvrière de la nation et qui vivotaient en réfractaires […] devaient être gérés par des moyens coercitifs et mis au travail », ce qui signifie qu’ils étaient envoyés à Buchenwald]), et ainsi de suite ; et à rassembler des vêtements, des lunettes, des chaussures et de l’or pour l’usage des bons Allemands (on omettait : la provenance de ces objets).</p> | |||
| <p>Pour être clair, et pour m’assurer que ni vous ni moi ne nous exemptions de toute responsabilité : la civilisation industrielle détruit la planète, et nous participons tous. Sans nos contributions, que nous soyons des ingénieurs géophysiciens explorant le désert de l’Utah à la recherche de gaz naturel, des publicitaires écrivant des rapports pour la multinationale Ford Motor Company, des hôtes(ses) de l’air proposant des cacahuètes lors de vols transcontinentaux, des médecins veillant à ce que les travailleurs et les dirigeants soient en plus ou moins bonne santé, des psychologues permettant aux consommateurs de continuer à plus ou moins fonctionner, des auteurs écrivant des livres pour que les gens se divertissent, ou des professeurs aidant des écrivains en devenir à ne jamais ennuyer le lecteur, elle ne le pourrait pas. Ce système mortifère repose sur nous tous.</p> | |||
| <p>Enseigner à la prison rend tout cela encore plus concret. À chaque fois que je passe les portes, je participe au fonctionnement du système carcéral le plus étendu au monde, et le plus raciste, puisqu’il incarcère proportionnellement plus de Noirs que le régime sud-africain durant l’apartheid. Mais en même temps, je sais que nombre de mes élèves m’ont dit explicitement et de nombreuses fois que nos cours sont la seule chose qu’ils attendent avec impatience de toute leur semaine, la seule chose qui leur permette de rester sains d’esprit.</p> | |||
| <p>Cela fait des années que je bloque sur cette question de réforme ou révolution, et peut-être qu’il est temps que je suive mon propre conseil et que je réalise que je pose une mauvaise question. Réforme contre révolution est une fausse dichotomie. La première réponse est que nous avons besoin des deux : sans une révolution, la planète est foutue, mais si nous nous contentons d’attendre la révolution, cela aura le même effet. Pendant des années, avec d’autres activistes de tout le pays, nous avons rempli ce qu’on appelle des recours contre des ventes de bois, dans une tentative (finalement infructueuse) de pousser le Service des forêts à cesser de proposer des ventes de bois illégales, fiscalement irresponsables et écologiquement destructrices, sur des terres publiques. Je suis contre toute forme de gestion forestière industrielle, et particulièrement contre la foresterie industrielle sur des terres publiques. En outre, je sais que les systèmes administratifs et judiciaires sont biaisés en faveur des corporations (pourquoi faire le timide : ils sont conçus pour détruire les communautés naturelles qui soutiennent la vie). Mais rien de tout cela ne m’a empêché d’avoir recours temporairement à cette tactique réformiste. Je ferai tout pour sauver les forêts. Ce qui m’amène à la seconde réponse, qui est que la moralité est toujours circonstancielle. Nous devrions faire ce qui est juste à l’endroit où nous sommes, et nous rendre aux endroits où nous pourrions faire ce qui est juste. Le tempérament et les compétences que nous avons nous aident aussi à déterminer ce que nous devrions faire.</p> | |||
| <p>J’entends déjà ces voix me murmurer, encore et encore : <em>pente glissante, pente glissante. Te souviens-tu des médecins d’Auschwitz ?</em> Mais toutes les pentes sont glissantes. Et alors ? Mon héritage naturel en tant qu’être moral et sensible me dispose à effectuer ce genre de jugements moraux. Il est de mon devoir et de ma joie de me confronter à ces démarches de discernement aussi honnêtement et lucidement que possible. Et plus encore. Le point clé de l’attitude méprisable des médecins nazis était leur échec à remettre en question la réalité d’Auschwitz. Très franchement, la majorité d’entre nous échouons tout aussi odieusement à remettre en question la civilisation industrielle, l’économie salariale et, pour en revenir au cœur de cette discussion, l’éducation industrielle. Inlassablement remettre en question notre contexte, qu’il s’agisse d’Auschwitz, de Disney, de la prison d’État de Pelican Bay, de la civilisation industrielle, de l’Université de l’Est de Washington, ou de la Glorieuse Révolution des Luddites, constitue le meilleur moyen que je connaisse pour se prémunir face à une pente glissante. Parce qu’il me semble que ces pentes sont plus dangereuses lorsqu’on ne les examine pas.</p> | |||
| <p><strong>***</strong></p> | |||
| <p>À la quatrième semaine de chaque trimestre, environ, je me pose la même question : De quoi discuterions-nous si j’avais les mêmes élèves pendant deux trimestres d’affilée, voire pendant deux semestres ?</p> | |||
| <p>Et chaque trimestre, environ, la même réponse me vient. Si le premier trimestre portait sur la libération, le second porterait sur la responsabilité. Chacun de nous doit apprendre et faire l’expérience — incorporer, intégrer dans son corps — des deux. Elles sont indissociables. L’une sans l’autre devient une parodie, et mène aux comportements inappropriés, destructeurs et autodestructeurs qui caractérisent généralement les parodies inconscientes ou non intentionnelles. La responsabilité sans la liberté donne l’esclavage. Ainsi qu’on le constate. La liberté sans la responsabilité donne l’immaturité. Ainsi qu’on le constate également. Combinez ces deux-là et vous vous retrouvez avec une culture entièrement composée d’esclaves immatures. Ainsi qu’on le constate encore, malheureusement pour nous et pour tous ceux que nous croisons. Pour ceux qui s’intéressent à la croissance de l’économie, ces parodies peuvent être très intéressantes, mais pour ceux qui s’intéressent à la vie, elles sont effroyablement nuisibles.</p> | |||
| <p>Ces sujets des quêtes de la libération et de la responsabilité, je ne les aborde pas en prison, parce que les circonstances de vie de mes élèves y sont très différentes, ce qui implique que ce dont ils ont besoin et que ce qu’ils attendent de moi est très différent. Et ce que je suis autorisé à leur donner diffère également. Ces cours en prison, dont certains durent depuis plusieurs années, sont plus techniques. […] Mon travail y est plus circonscrit, un peu moins philosophique.</p> | |||
| <p>Cela dit, les différences sont superficielles et, comme toujours, contextuelles. Les bases, qui consistent à respecter, à aimer et à aider mes élèves à devenir qui ils sont, demeurent les mêmes pour l’université et pour la prison.</p> | |||
| <p><strong>***</strong></p> | |||
| <p>C’est la huitième semaine à l’université, et il y a dans l’air comme une odeur de révolution. Nombre de mes élèves en ont après moi. L’un d’eux me dit : « Vous parlez de libération, de comment nous sommes les vrais dirigeants dans la classe, de comment vous voulez que nous prenions en charge notre propre éducation. Mais c’est du vent. Vous dirigez toujours. »</p> | |||
| <p>Un autre : « Vous dites que vous ne voulez pas nous noter, mais les notes de présence sont toujours de la coercition. »</p> | |||
| <p>Une autre : « Et si je ne veux rien écrire ?</p> | |||
| <p>— Alors j’imagine que tu vas devoir retaper.</p> | |||
| <p>— Je pensais que vous valiez mieux que les autres profs, mais vous êtes tous les mêmes. Simplement, vous souriez lorsqu’on vous provoque. Pire encore, vous nous poussez à sourire lorsque vous nous secouez. »</p> | |||
| <p>Je suis content. Ils comprennent. Tout, dans cette classe, devait mener à cet instant, à leur rejet de mon autorité. C’était le but. Je veux jeter les notes de présence et leur mettre à tous des 20. Je veux jeter les 20 et ne rien leur donner de plus que ce que je leur ai déjà donné, du temps et de l’acceptation. Mais je ne veux pas laisser voir que je suis content. J’objecte. Pas beaucoup, mais un peu. Puis j’admets qu’ils ont raison.</p> | |||
| <p>Celle qui pensait que je valais mieux que les autres professeurs me dit : « Je ne vous blâme pas. Je vous aime bien. Vous êtes excellent. Mais vous essayez de vous insérer — et d’insérer votre acceptation et tout cet enseignement qui vise à ce qu’on se soucie de nous-mêmes — dans cet autre système basé sur la coercition, et c’est juste ridicule. »</p> | |||
| <p>Un regard un peu peiné dissimule ma joie. Je lui demande : « Alors, que devrais-je faire ? Voulez-vous que je change de manière d’enseigner ? Voulez-vous que je me mette à noter comme les autres ?</p> | |||
| <p>— Non, répond-elle, horrifiée.</p> | |||
| <p>— Mais alors, quoi ?</p> | |||
| <p>— Faites changer cet autre système.</p> | |||
| <p>— Comment puis-je faire ça ? »</p> | |||
| <p>Elle pensa un moment, puis me répondit la meilleure chose possible : « Vous êtes malin. Vous trouverez. J’ai suffisamment de mal à gérer ma propre vie. »</p> | |||
| <p>J’adore ce travail.</p> | |||
| <p><strong>***</strong></p> | |||
| <p>Ce week-end, j’ai donné un cours lors d’une conférence d’écrivains. C’était amusant. Le seul problème, c’est qu’elle prenait place dans une école du secondaire. Cela faisait longtemps que je ne m’étais pas rendu dans ce genre d’endroit. Cela faisait longtemps que je n’avais pas été obligé de rentrer dans une de ces salles de classe. C’est pire que dans mes souvenirs. L’une des premières choses que j’ai remarquées en entrant dans la salle où mes ateliers devaient se tenir était un autocollant rouge collé devant le bureau du professeur, qui lisait : « Vous n’êtes pas à Burger King, et vous n’aurez pas ce que vous voulez. » Des panneaux (certains écrits à la main au marqueur, d’autres produits en série) étaient accrochés sur tous les murs — littéralement, sur tous les murs — qui suggèrent aux étudiants que s’ils se comportent mal, ils seront envoyés au bureau du principal. L’un deux, en majuscules, stipule que LES ÉTUDIANTS NE DOIVENT JAMAIS PARLER SANS LEVER LA MAIN ET SANS AUTORISATION DU PROFESSEUR.</p> | |||
| <p>Bien qu’il s’agissait d’une salle de mathématiques, il me semble clair que le but était, comme toujours, d’obtenir la soumission envers l’autorité. Je ne sais pas comment j’y ai survécu. Je ne sais pas comment aucun élève peut y survivre. J’imagine que d’une certaine manière, très concrète, ils n’y survivent pas. Et c’est précisément l’objectif.</p> | |||
+ 561
- 0
cache/0476779bebae9ae41e06c41494a48bd0/index.html
View File
| @@ -0,0 +1,561 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Éditer à l’ère numérique (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://bbf.enssib.fr/consulter/bbf-2018-15-0046-006"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Éditer à l’ère numérique (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://bbf.enssib.fr/consulter/bbf-2018-15-0046-006">Source originale du contenu</a></h3> | |||
| <p><span class="first-letter">L</span>e <span class="texteital">BBF</span> s’entretient avec Hervé Le Crosnier, éditeur multimédia chez C&F éditions.</p> | |||
| <h2 class="inter1">BBF • Le numérique a bousculé les pratiques éditoriales, notamment les modes de production et de diffusion des contenus. Qu’est-ce qu’être éditeur à l’ère numérique ?</h2> | |||
| <p><span class="texteital">Hervé Le Crosnier</span> • Avant tout, il faut souligner ce qui a perduré au-delà du changement technique : éditer, c’est sélectionner des textes, aider les auteurs à travailler leur contenu pour atteindre un public le plus large possible en fonction de leur sujet ou genre littéraire. Dans ce schéma, il faut distinguer l’édition littéraire de l’édition des essais ; et l’édition à destination du grand public, celle vers le public globalement intéressé par un domaine, et l’édition spécialisée et scientifique. Ces formes d’éditions cohabitent : parfois, un même éditeur peut les juxtaposer ; souvent, ce sont des éditeurs différents qui occupent ces créneaux.</p> | |||
| <p>On a toujours l’image de l’auteur romantique, qui aurait écrit son œuvre et chercherait un éditeur. Mais la situation réelle est plus diverse. Avec l’internet, les blogs, les médias sociaux, chaque auteur dispose déjà d’un moyen de toucher un public, plus ou moins large, mais parfois plus important que le public qui ira acheter son livre. Ce qui intéresse alors l’auteur, dans le passage à l’édition, c’est d’offrir un nouveau statut aux textes publiés sur le web. Le livre, qu’il soit imprimé ou numérique, se doit d’être « complet ». Tout est entre deux couvertures, comme le dit joliment Michel Melot. <span class="texteital">A contrario</span>, le web est un jeu permanent de va-et-vient, de renvois vers d’autres sites ou d’autres articles. On y trouve le bouillonnement, l’énergie, l’actualité ; mais moins la stabilité, la clôture d’un travail. C’est pour arriver à la réalisation d’un tel objet intellectuel que l’éditeur devient un partenaire et pas seulement un propulseur.</p> | |||
| <p>L’éditeur se doit ainsi de fouiner dans le web pour trouver des textes et des personnes susceptibles de passer vers l’autre mode de production qu’est l’imprimé (ou le livre numérique autonome, car si cela change techniquement, le travail éditorial reste le même). Cela sera plus difficile pour une personne qui s’accroche à l’actualité que pour quelqu’un qui possède une pensée sur la longue distance. Nous le faisons dans les domaines que touche C&F éditions, qui sont ceux de la culture numérique, des communs de la connaissance, évidemment représentés par des auteurs publiant sur le web. Mais même des éditeurs de best-sellers ont aujourd’hui cette pratique de repérage. La plateforme d’écriture Wattpad a ainsi été la source de livres à succès comme <span class="texteital">After</span> d’Amanda Todd, ou <span class="texteital">Follow me back</span> de A. V. Geiger, tous deux chez Robert Laffont.</p> | |||
| <p>Une fois le livre réalisé, il faut le vendre. L’internet permet le développement de maisons d’édition qui peuvent s’auto-diffuser, soit pour une vente directe sur internet, soit parce que l’internet accélère la relation avec les libraires et rend donc plus efficace la commande du lecteur chez celui-ci. Et bien évidemment, nous rencontrons sur ce chemin les grandes plateformes, Amazon en tête. D’expérience, un livre qui n’est pas en vente chez Amazon est considéré de facto comme épuisé. La force de cette plateforme dans le milieu du livre est immense, et chacun sait combien cela pèse sur tous les métiers du livre. D’autant plus que cette plateforme veut elle-même devenir éditeur, pour l’instant en numérique pour son Kindle, et également libraire dans des boutiques affiliées qui ouvrent aux États-Unis.</p> | |||
| <p>Nous nous trouvons donc à une période charnière. Et pour celles et ceux qui pensent que le livre, comme forme spécifique d’inscription de la pensée, a encore quelque chose à dire et proposer, l’internet est devenu un allié essentiel… et en même temps un nouveau concurrent. Mais cela semble être la position de l’internet dans l’ensemble des champs de la société, n’est-ce pas ?</p> | |||
| <h2 class="inter1">BBF • Dans un contexte d’évolution continue des technologies et des usages, quels sont les grands enjeux concernant le domaine de l’édition ?</h2> | |||
| <p><span class="texteital">H. L. C.</span> • Commençons par ce qui me semble ne pas être un enjeu : il n’y a pas, pour un éditeur, de différence majeure entre l’imprimé et le numérique. Le travail de réalisation reste essentiellement le même. On peut choisir une chaîne complète utilisant de nouveaux formats (XML, par exemple comme la chaîne Métopes utilisée par les éditeurs scientifiques) pour produire les deux versions. On peut aussi conserver une réalisation plus traditionnelle avec des logiciels de PAO comme InDesign, puis exporter le tout pour obtenir le livre numérique. Dans les deux cas, il y a de nouveaux savoir-faire à acquérir. Mais cela a toujours été le cas depuis l’irruption des premières photocomposeuses dans les années cinquante. Pour notre part, nous considérons le livre numérique comme une « édition de poche », c’est-à-dire qui rend le contenu accessible aux personnes ayant moins de moyens financiers.</p> | |||
| <p>Maintenant, il y a évidemment le risque de voir le numérique étouffer l’imprimé sur le plan commercial. Mais on a déjà dit cela lors de l’apparition du livre de poche… qui a pourtant participé d’un boum de l’édition de livres, et surtout de l’accès au livre pour de nouveaux publics. Je pense qu’actuellement numérique et imprimé correspondent à deux publics et deux modes de lecture différents. Plus généralement, les visions catastrophiques associées à l’internet, du genre « si on pousse la logique jusqu’au bout… » n’ont jamais été vérifiées. Il faut donc rester pragmatique et s’adapter aux situations.</p> | |||
| <p>Le modèle économique du livre reste, quel que soit le support, celui de la délivrance d’une unité de culture pour un lecteur, qui peut ensuite le faire circuler autour de lui, soit comme institution (bibliothèque, école), soit comme lecteur individuel, souvent avide et passionné. C&F éditions vient de publier un ouvrage de sociologie de la lecture <span class="appeldenote"><a id="appelnote-1" name="appelnote-1"/> <a href="#note-1" title="Appel de note : cliquez pour visualiser la note correspondante en bas de page">1</a></span> sur cette logique de l’échange et de la circulation qui est intrinsèquement liée au livre et à la lecture. Je ne crois pas à l’enfermement dans un modèle de l’accès qui fait payer très cher la possibilité de lire toute une collection, certes immense, mais pour laquelle chaque lecteur ne fera que choisir quelques ouvrages. Les lecteurs ont toujours constitué des bibliothèques personnelles, il doit bien y avoir une raison psychologique profonde. Or les modèles d’accès, comme Amazon Prime pour les particuliers, ou les services aux bibliothèques en mode collectif, sont en fait des systèmes pour obliger à rester dans le giron de son prestataire : en partir signifie perdre toute sa collection. De même, n’ayons pas peur de laisser les livres numériques ouverts à l’échange entre particuliers. Cette circulation a toujours fait partie du plaisir de lire et de faire lire. C&F éditions utilise la licence « édition équitable » pour garantir ces droits aux lecteurs, tout en demandant la réciprocité : faire circuler entre amis sans inonder le monde entier. Dans notre cas, cela marche bien, notamment parce que le prix du livre numérique est de 40 % du prix de l’imprimé, ce qui assure un accès élargi, et en même temps une forme de fidélité des lecteurs pour le travail de l’éditeur.</p> | |||
| <h2 class="inter1">BBF • De plus en plus de bibliothèques mettent en œuvre des pratiques éditoriales dans le cadre de leurs missions, que ce soit pour le soutien à l’édition scientifique, la mise à disposition de corpus de recherche ou la valorisation de leurs collections patrimoniales. Comment percevez-vous le positionnement des bibliothèques dans cet écosystème éditorial ?</h2> | |||
| <p><span class="texteital">H. L. C.</span> • Revenons toujours au cœur de métier : celui de bibliothécaire est de constituer des collections, de les décrire pour les rendre exploitables par un lecteur qui va pouvoir y accéder en dehors des règles du marché. C’est le premier et le plus grand média mondial si l’on suit le raisonnement de Jean-Michel Salaün dans <span class="texteital">Vu, lu, su </span><span class="appeldenote"><a id="appelnote-2" name="appelnote-2"/> <a href="#note-2" title="Appel de note : cliquez pour visualiser la note correspondante en bas de page">2</a></span>. La médiation, l’accompagnement, la numérisation et la mise à disposition sont pleinement la force des bibliothèques. Doivent-elles pour autant devenir éditeurs, c’est-à-dire justement sélectionner par elles-mêmes dans la masse des documents dont elles ont la charge ? N’y a-t-il pas une contradiction entre la mission d’offrir l’accès à tout et à tous, le fameux mot d’ordre de l’accès universel aux publications qui a animé l’IFLA depuis les années soixante-dix, et la pratique d’une sélection éditoriale, qui a évidemment son charme, mais se situe sur un autre plan.</p> | |||
| <p>On peut comprendre le désir des bibliothécaires, qui côtoient quotidiennement des chefs-d’œuvre ignorés, de vouloir les offrir au plus grand nombre. Leurs connaissances, et leurs savoir-faire, s’y prêtent… mais autant le faire sur un mode large, reprenant la double pratique de tout décrire pour tout offrir, et la réalisation temporaire d’expositions, y compris numériques sur le web, pour mettre en avant des choix.</p> | |||
| <p>Enfin, quand les bibliothèques se veulent éditeurs, c’est souvent à partir d’œuvres du domaine public dont elles ont la charge et la responsabilité… mais qui ne leur appartiennent pas, qui restent un commun. Le travail, la mission des bibliothèques n’est pas de trouver un marché pour ces œuvres, mais de les porter à la connaissance du public. D’autres pourront alors sélectionner et publier. Les bibliothèques n’ont rien à perdre à cela, qui se situe en dehors de leurs objectifs et missions.</p> | |||
| <h2 class="inter1">BBF • De votre point de vue d’éditeur, quelle pourrait être la valeur ajoutée apportée par les bibliothèques à des projets éditoriaux ?</h2> | |||
| <p><span class="texteital">H. L. C.</span> • Contrairement à des discours que l’on entend de plus en plus, les bibliothèques forment un très grand marché, en particulier à l’échelle des éditions qui travaillent en dehors des succès de librairie, ce qu’on appelle aujourd’hui la bibliodiversité. La présence de livres dans les catalogues de bibliothèque est une forme de reconnaissance et de valorisation du travail de tel ou tel éditeur, et le public y est sensible. Les bibliothèques peuvent également attirer l’attention des chercheurs sur les ouvrages de leurs fonds, notamment au moment de leur éventuelle numérisation, pour assurer la promotion de documents par le biais de publications scientifiques. On voit également se développer de nouvelles formes artistiques, qui prennent et remixent des images du domaine public numérisées et rendues disponibles. Le laboratoire du Rijksmuseum <span class="appeldenote"><a id="appelnote-3" name="appelnote-3"/> <a href="#note-3" title="Appel de note : cliquez pour visualiser la note correspondante en bas de page">3</a></span> d’Amsterdam est en pointe en ce domaine. Prenons également exemple sur le site Public Domain Review <span class="appeldenote"><a id="appelnote-4" name="appelnote-4"/> <a href="#note-4" title="Appel de note : cliquez pour visualiser la note correspondante en bas de page">4</a></span>. Un équivalent français porté par une coopération de bibliothécaires constituerait vraiment une rupture, qui valoriserait des œuvres comme une revue scientifique collective de réhabilitation du domaine public.</p> | |||
| <p>Mais puisque nous parlons du numérique, je pense qu’il faut absolument que les ouvrages concernant ce sujet prennent une véritable place dans les bibliothèques. Les traités sur l’information, sa gestion, ses pièges, ne concernent plus seulement la profession elle-même, mais le public élargi. Les ouvrages qui portent un regard critique, au sens de prise de recul ; ceux qui racontent le numérique, son histoire, ses mythes comme ses réalisations… sont devenus des outils citoyens d’aujourd’hui, pour penser le monde dans lequel nous vivons. Ouvrir de tels rayons dans les bibliothèques, mais aussi dans les librairies, qui couvrent tous les aspects de la société numérique, participe de la mission culturelle de faire réfléchir dans un monde complexe et en mouvement très rapide.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://bbf.enssib.fr/consulter/bbf-2018-15-0046-006">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 5
- 0
cache/0476779bebae9ae41e06c41494a48bd0/index.md
File diff suppressed because it is too large
View File
+ 632
- 0
cache/0507da7e382a02e3c8b490913eb29e60/index.html
View File
| @@ -0,0 +1,632 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>0005 DNS (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://github.com/datprotocol/DEPs/blob/master/proposals/0005-dns.md"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| 0005 DNS (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://github.com/datprotocol/DEPs/blob/master/proposals/0005-dns.md">Source originale du contenu</a></h3> | |||
| <article class="markdown-body entry-content" itemprop="text"><p>Title: <strong>DEP-0005: DNS</strong></p> | |||
| <p>Short Name: <code>0005-dns</code></p> | |||
| <p>Type: Informative</p> | |||
| <p>Status: Draft (as of 2018-04-27)</p> | |||
| <p>Github PR: <a href="https://github.com/datprotocol/DEPs/pull/25">PR#25</a></p> | |||
| <p>Authors: Paul Frazee</p> | |||
| <h1><a id="user-content-summary" class="anchor" aria-hidden="true" href="#summary"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Summary</h1> | |||
| <p>Dat's data structures (HyperCore, HyperDB, and HyperDrive) are addressed using | |||
| cryptographic keys. In the context of Web browsers, a URL scheme is used which | |||
| is structured as <code>'dat://' {key} '/' {path...}</code>.</p> | |||
| <p>This DEP describes an additional protocol for addressing Dats using DNS short names.</p> | |||
| <h1><a id="user-content-motivation" class="anchor" aria-hidden="true" href="#motivation"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Motivation</h1> | |||
| <p>The cryptographic keys which address Dats are secure and global, but not human-readable. This creates a usability problem.</p> | |||
| <p>The goal of this DEP is to leverage DNS to provide human-readable shortnames which map to Dat's cryptographic addresses. The solution...</p> | |||
| <ul> | |||
| <li>Must provide a single canonical Dat URL for the domain. It should not be possible for a name to have multiple valid mappings. (No conflict.)</li> | |||
| <li>Must not be controllable by non-owners of the domain. It should not be possible for third parties to modify the mapping. (Secure.)</li> | |||
| <li>Should be accessible to as many users as possible. (Convenient.)</li> | |||
| </ul> | |||
| <p>An initial proposal (the <a href="https://web.archive.org/web/20171013151452/https://github.com/beakerbrowser/beaker/wiki/Authenticated-Dat-URLs-and-HTTPS-to-Dat-Discovery" rel="nofollow">".well-known solution"</a>) has had prior usage in the Beaker Browser and Dat CLI. A followup proposal (the <a href="https://web.archive.org/web/20180427202745/https://github.com/beakerbrowser/beaker/wiki/Dat-DNS-TXT-records-with-optional-DNS-over-HTTPS" rel="nofollow">"DNS TXT solution"</a>) was made recently, but has not yet been deployed. This DEP intends to unify these proposals formally.</p> | |||
| <h1><a id="user-content-usage-documentation" class="anchor" aria-hidden="true" href="#usage-documentation"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Usage Documentation</h1> | |||
| <p>Users may provide a Dat URL to clients with the following structure: <code>'dat://' {name} '/'</code>.</p> | |||
| <p>If the <code>name</code> is a 64-character hex string, it should be considered a "key" and no DNS-resolution should occur. If <code>name</code> matches the following RegExp, it is considered a "key":</p> | |||
| <pre><code>^[0-9a-f]{64}$ | |||
| </code></pre> | |||
| <p>If the <code>name</code> does not match this RegExp, it is a "domain name" and requires resolution. A Dat client should follow the <a href="#resolution-process">resolution process</a> to do this.</p> | |||
| <pre><code>domain: dat://beakerbrowser.com/ | |||
| key: dat://87ed2e3b160f261a032af03921a3bd09227d0a4cde73466c17114816cae43336/ | |||
| </code></pre> | |||
| <p>Users have multiple options for creating a domain-name mapping.</p> | |||
| <h2><a id="user-content-dns-txt-record" class="anchor" aria-hidden="true" href="#dns-txt-record"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>DNS TXT record</h2> | |||
| <p>The first option is to set a DNS TXT record at the domain which maps to a "key"-addressed Dat URL. The client will lookup this TXT record first and load the resulting Dat. That record should fit the following schema:</p> | |||
| <pre><code>datkey={key} | |||
| </code></pre> | |||
| <h2><a id="user-content-well-knowndat" class="anchor" aria-hidden="true" href="#well-knowndat"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>.well-known/dat</h2> | |||
| <p>The second option is to run an HTTPS server at the domain name which includes a <code>/.well-known/dat</code> resource. That resource should provide a text file with the following schema:</p> | |||
| <pre><code>dat://{key} | |||
| TTL={time in seconds} | |||
| </code></pre> | |||
| <p><code>TTL</code> is optional and will default to <code>3600</code> (one hour). If set to <code>0</code>, the entry is not cached.</p> | |||
| <h1><a id="user-content-resolution-process" class="anchor" aria-hidden="true" href="#resolution-process"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Resolution process</h1> | |||
| <p>Resolution of a Dat at <code>dat://{name}</code> should follow this process:</p> | |||
| <ul> | |||
| <li>Client checks its names cache. If a non-expired entry is found, return with the entry.</li> | |||
| <li>Client issues a DNS TXT request for <code>name</code>. This request should be issued via a secure transport (see <a href="#dns-over-https">"DNS-over-HTTPS"</a>).</li> | |||
| <li>Client iterates all TXT records given (skip if none). If a record's value matches the TXT record schema (see below): | |||
| <ul> | |||
| <li>If the record includes a non-zero TTL, store the record value in the names cache.</li> | |||
| <li>Return the record value.</li> | |||
| </ul> | |||
| </li> | |||
| <li>Client issues an HTTPS GET request to <code>https://{name}/.well-known/dat</code>. | |||
| <ul> | |||
| <li>If the server responds with a <code>404 Not Found</code> status, client stores a <code>null</code> entry in the names cache with a TTL of 3600 and returns a failed lookup.</li> | |||
| <li>If the server responds with anything other than a <code>200 OK</code> status, return a failed lookup.</li> | |||
| <li>If the server responds with a malformed file (see below), return a failed lookup.</li> | |||
| <li>If the server responds with a well-formed file, store the record value in the names cache (default TTL to <code>3600</code> if not provided) and return the record value.</li> | |||
| </ul> | |||
| </li> | |||
| </ul> | |||
| <p>The DNS TXT record must match this schema:</p> | |||
| <pre><code>'datkey=' [0-9a-f]{64} | |||
| </code></pre> | |||
| <p>The <code>/.well-known/dat</code> file must match this schema:</p> | |||
| <pre><code>'dat://' [0-9a-f]{64} '/'? | |||
| ( 'TTL=' [0-9]* )? | |||
| </code></pre> | |||
| <p>Note that DNS-record responses may not follow a pre-defined order. Therefore the results of a lookup may be undefined if multiple TXT records exist.</p> | |||
| <h1><a id="user-content-security-and-privacy" class="anchor" aria-hidden="true" href="#security-and-privacy"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Security and Privacy</h1> | |||
| <p>Two issues to consider:</p> | |||
| <ul> | |||
| <li><strong>Security</strong>: Can we trust the lookup results for a name?</li> | |||
| <li><strong>Privacy</strong>: Who sees the DNS lookups?</li> | |||
| </ul> | |||
| <p>Traditional DNS provides neither security or privacy. All looks occur over plaintext UDP. To provide security, a separate system must authenticate the record. (In the case of HTTPS records, the SSL Certificate provides authentication.)</p> | |||
| <p>Dat does not currently have a DNS authentication record (no equivalent to the SSL certificate). Therefore a lookup using UDP can not be secured.</p> | |||
| <p>To solve this, this DEP recommends using <a href="#dns-over-https">DNS-over-HTTPS</a>.</p> | |||
| <h2><a id="user-content-dns-over-https" class="anchor" aria-hidden="true" href="#dns-over-https"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>DNS-over-HTTPS</h2> | |||
| <p>Until PKI can authenticate the DNS lookups (ie via SSL certificates or equivalent) there is a risk that the DNS lookup will be intercepted by an adversary. To protect against this, the client should use DNS-over-HTTPS to lookup the DNS TXT records.</p> | |||
| <p>Current providers:</p> | |||
| <p>This solution improves on both the security and privacy of DNS lookup:</p> | |||
| <ul> | |||
| <li><strong>Security</strong>. Requests to the DNS provider are authenticated using the provider's SSL certificate.</li> | |||
| <li><strong>Privacy</strong>. DNS lookups are encrypted on the wire and only made visible to the DNS provider.</li> | |||
| </ul> | |||
| <p>DNS-over-HTTPS still requires trust in the provider to give correct responses, but this is an improvement to UDP DNS lookups, which can be trivially MITMed by malicious actors on the network.</p> | |||
| <p>Whereas traditional DNS leaks name lookups to everyone on the network, DNS-over-HTTPS only reveals them to the DNS provider. This still provides some opportunity for tracking, but the opportunity is reduced to the provider alone.</p> | |||
| <h1><a id="user-content-drawbacks" class="anchor" aria-hidden="true" href="#drawbacks"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Drawbacks</h1> | |||
| <ul> | |||
| <li>The use of the <code>.well-known/dat</code> resource over HTTPS creates a dependency on a service.</li> | |||
| <li>DNS-over-HTTPS exposes all lookups to the provider and relies on the provider to be honest. However, because this method offsets the risk of MITM attacks, this is a worthwhile trade. Future DEPs should find alternative ways to authenticate domain-name records.</li> | |||
| </ul> | |||
| <h1><a id="user-content-rationale-and-alternatives" class="anchor" aria-hidden="true" href="#rationale-and-alternatives"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Rationale and alternatives</h1> | |||
| <ul> | |||
| <li>User-defined names registries could be used instead of DNS, but they would likely suffer from name conflicts without a top-down control.</li> | |||
| <li>A blockchain (such as Namecoin) could be used instead of DNS, but blockchains currently have poor throughput and require users to sync large amounts of data.</li> | |||
| <li>DNSSEC could be used instead of DNS-over-HTTPS, but it does not have the same level of support among gTLDs that DNS-over-HTTPS has.</li> | |||
| </ul> | |||
| <h1><a id="user-content-changelog" class="anchor" aria-hidden="true" href="#changelog"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Changelog</h1> | |||
| <ul> | |||
| <li>2018-04-27: First complete draft submitted for review</li> | |||
| <li>2018-05-07: Add "Security and Privacy" section and rewrite DNS TXT record schema.</li> | |||
| <li>2018-05-16: Merged as Draft after WG approval.</li> | |||
| </ul> | |||
| </article> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://github.com/datprotocol/DEPs/blob/master/proposals/0005-dns.md">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 110
- 0
cache/0507da7e382a02e3c8b490913eb29e60/index.md
View File
| @@ -0,0 +1,110 @@ | |||
| title: 0005 DNS | |||
| url: https://github.com/datprotocol/DEPs/blob/master/proposals/0005-dns.md | |||
| hash_url: 0507da7e382a02e3c8b490913eb29e60 | |||
| <article class="markdown-body entry-content" itemprop="text"><p>Title: <strong>DEP-0005: DNS</strong></p> | |||
| <p>Short Name: <code>0005-dns</code></p> | |||
| <p>Type: Informative</p> | |||
| <p>Status: Draft (as of 2018-04-27)</p> | |||
| <p>Github PR: <a href="https://github.com/datprotocol/DEPs/pull/25">PR#25</a></p> | |||
| <p>Authors: Paul Frazee</p> | |||
| <h1><a id="user-content-summary" class="anchor" aria-hidden="true" href="#summary"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Summary</h1> | |||
| <p>Dat's data structures (HyperCore, HyperDB, and HyperDrive) are addressed using | |||
| cryptographic keys. In the context of Web browsers, a URL scheme is used which | |||
| is structured as <code>'dat://' {key} '/' {path...}</code>.</p> | |||
| <p>This DEP describes an additional protocol for addressing Dats using DNS short names.</p> | |||
| <h1><a id="user-content-motivation" class="anchor" aria-hidden="true" href="#motivation"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Motivation</h1> | |||
| <p>The cryptographic keys which address Dats are secure and global, but not human-readable. This creates a usability problem.</p> | |||
| <p>The goal of this DEP is to leverage DNS to provide human-readable shortnames which map to Dat's cryptographic addresses. The solution...</p> | |||
| <ul> | |||
| <li>Must provide a single canonical Dat URL for the domain. It should not be possible for a name to have multiple valid mappings. (No conflict.)</li> | |||
| <li>Must not be controllable by non-owners of the domain. It should not be possible for third parties to modify the mapping. (Secure.)</li> | |||
| <li>Should be accessible to as many users as possible. (Convenient.)</li> | |||
| </ul> | |||
| <p>An initial proposal (the <a href="https://web.archive.org/web/20171013151452/https://github.com/beakerbrowser/beaker/wiki/Authenticated-Dat-URLs-and-HTTPS-to-Dat-Discovery" rel="nofollow">".well-known solution"</a>) has had prior usage in the Beaker Browser and Dat CLI. A followup proposal (the <a href="https://web.archive.org/web/20180427202745/https://github.com/beakerbrowser/beaker/wiki/Dat-DNS-TXT-records-with-optional-DNS-over-HTTPS" rel="nofollow">"DNS TXT solution"</a>) was made recently, but has not yet been deployed. This DEP intends to unify these proposals formally.</p> | |||
| <h1><a id="user-content-usage-documentation" class="anchor" aria-hidden="true" href="#usage-documentation"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Usage Documentation</h1> | |||
| <p>Users may provide a Dat URL to clients with the following structure: <code>'dat://' {name} '/'</code>.</p> | |||
| <p>If the <code>name</code> is a 64-character hex string, it should be considered a "key" and no DNS-resolution should occur. If <code>name</code> matches the following RegExp, it is considered a "key":</p> | |||
| <pre><code>^[0-9a-f]{64}$ | |||
| </code></pre> | |||
| <p>If the <code>name</code> does not match this RegExp, it is a "domain name" and requires resolution. A Dat client should follow the <a href="#resolution-process">resolution process</a> to do this.</p> | |||
| <pre><code>domain: dat://beakerbrowser.com/ | |||
| key: dat://87ed2e3b160f261a032af03921a3bd09227d0a4cde73466c17114816cae43336/ | |||
| </code></pre> | |||
| <p>Users have multiple options for creating a domain-name mapping.</p> | |||
| <h2><a id="user-content-dns-txt-record" class="anchor" aria-hidden="true" href="#dns-txt-record"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>DNS TXT record</h2> | |||
| <p>The first option is to set a DNS TXT record at the domain which maps to a "key"-addressed Dat URL. The client will lookup this TXT record first and load the resulting Dat. That record should fit the following schema:</p> | |||
| <pre><code>datkey={key} | |||
| </code></pre> | |||
| <h2><a id="user-content-well-knowndat" class="anchor" aria-hidden="true" href="#well-knowndat"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>.well-known/dat</h2> | |||
| <p>The second option is to run an HTTPS server at the domain name which includes a <code>/.well-known/dat</code> resource. That resource should provide a text file with the following schema:</p> | |||
| <pre><code>dat://{key} | |||
| TTL={time in seconds} | |||
| </code></pre> | |||
| <p><code>TTL</code> is optional and will default to <code>3600</code> (one hour). If set to <code>0</code>, the entry is not cached.</p> | |||
| <h1><a id="user-content-resolution-process" class="anchor" aria-hidden="true" href="#resolution-process"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Resolution process</h1> | |||
| <p>Resolution of a Dat at <code>dat://{name}</code> should follow this process:</p> | |||
| <ul> | |||
| <li>Client checks its names cache. If a non-expired entry is found, return with the entry.</li> | |||
| <li>Client issues a DNS TXT request for <code>name</code>. This request should be issued via a secure transport (see <a href="#dns-over-https">"DNS-over-HTTPS"</a>).</li> | |||
| <li>Client iterates all TXT records given (skip if none). If a record's value matches the TXT record schema (see below): | |||
| <ul> | |||
| <li>If the record includes a non-zero TTL, store the record value in the names cache.</li> | |||
| <li>Return the record value.</li> | |||
| </ul> | |||
| </li> | |||
| <li>Client issues an HTTPS GET request to <code>https://{name}/.well-known/dat</code>. | |||
| <ul> | |||
| <li>If the server responds with a <code>404 Not Found</code> status, client stores a <code>null</code> entry in the names cache with a TTL of 3600 and returns a failed lookup.</li> | |||
| <li>If the server responds with anything other than a <code>200 OK</code> status, return a failed lookup.</li> | |||
| <li>If the server responds with a malformed file (see below), return a failed lookup.</li> | |||
| <li>If the server responds with a well-formed file, store the record value in the names cache (default TTL to <code>3600</code> if not provided) and return the record value.</li> | |||
| </ul> | |||
| </li> | |||
| </ul> | |||
| <p>The DNS TXT record must match this schema:</p> | |||
| <pre><code>'datkey=' [0-9a-f]{64} | |||
| </code></pre> | |||
| <p>The <code>/.well-known/dat</code> file must match this schema:</p> | |||
| <pre><code>'dat://' [0-9a-f]{64} '/'? | |||
| ( 'TTL=' [0-9]* )? | |||
| </code></pre> | |||
| <p>Note that DNS-record responses may not follow a pre-defined order. Therefore the results of a lookup may be undefined if multiple TXT records exist.</p> | |||
| <h1><a id="user-content-security-and-privacy" class="anchor" aria-hidden="true" href="#security-and-privacy"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Security and Privacy</h1> | |||
| <p>Two issues to consider:</p> | |||
| <ul> | |||
| <li><strong>Security</strong>: Can we trust the lookup results for a name?</li> | |||
| <li><strong>Privacy</strong>: Who sees the DNS lookups?</li> | |||
| </ul> | |||
| <p>Traditional DNS provides neither security or privacy. All looks occur over plaintext UDP. To provide security, a separate system must authenticate the record. (In the case of HTTPS records, the SSL Certificate provides authentication.)</p> | |||
| <p>Dat does not currently have a DNS authentication record (no equivalent to the SSL certificate). Therefore a lookup using UDP can not be secured.</p> | |||
| <p>To solve this, this DEP recommends using <a href="#dns-over-https">DNS-over-HTTPS</a>.</p> | |||
| <h2><a id="user-content-dns-over-https" class="anchor" aria-hidden="true" href="#dns-over-https"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>DNS-over-HTTPS</h2> | |||
| <p>Until PKI can authenticate the DNS lookups (ie via SSL certificates or equivalent) there is a risk that the DNS lookup will be intercepted by an adversary. To protect against this, the client should use DNS-over-HTTPS to lookup the DNS TXT records.</p> | |||
| <p>Current providers:</p> | |||
| <p>This solution improves on both the security and privacy of DNS lookup:</p> | |||
| <ul> | |||
| <li><strong>Security</strong>. Requests to the DNS provider are authenticated using the provider's SSL certificate.</li> | |||
| <li><strong>Privacy</strong>. DNS lookups are encrypted on the wire and only made visible to the DNS provider.</li> | |||
| </ul> | |||
| <p>DNS-over-HTTPS still requires trust in the provider to give correct responses, but this is an improvement to UDP DNS lookups, which can be trivially MITMed by malicious actors on the network.</p> | |||
| <p>Whereas traditional DNS leaks name lookups to everyone on the network, DNS-over-HTTPS only reveals them to the DNS provider. This still provides some opportunity for tracking, but the opportunity is reduced to the provider alone.</p> | |||
| <h1><a id="user-content-drawbacks" class="anchor" aria-hidden="true" href="#drawbacks"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Drawbacks</h1> | |||
| <ul> | |||
| <li>The use of the <code>.well-known/dat</code> resource over HTTPS creates a dependency on a service.</li> | |||
| <li>DNS-over-HTTPS exposes all lookups to the provider and relies on the provider to be honest. However, because this method offsets the risk of MITM attacks, this is a worthwhile trade. Future DEPs should find alternative ways to authenticate domain-name records.</li> | |||
| </ul> | |||
| <h1><a id="user-content-rationale-and-alternatives" class="anchor" aria-hidden="true" href="#rationale-and-alternatives"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Rationale and alternatives</h1> | |||
| <ul> | |||
| <li>User-defined names registries could be used instead of DNS, but they would likely suffer from name conflicts without a top-down control.</li> | |||
| <li>A blockchain (such as Namecoin) could be used instead of DNS, but blockchains currently have poor throughput and require users to sync large amounts of data.</li> | |||
| <li>DNSSEC could be used instead of DNS-over-HTTPS, but it does not have the same level of support among gTLDs that DNS-over-HTTPS has.</li> | |||
| </ul> | |||
| <h1><a id="user-content-changelog" class="anchor" aria-hidden="true" href="#changelog"><svg class="octicon octicon-link" viewbox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></a>Changelog</h1> | |||
| <ul> | |||
| <li>2018-04-27: First complete draft submitted for review</li> | |||
| <li>2018-05-07: Add "Security and Privacy" section and rewrite DNS TXT record schema.</li> | |||
| <li>2018-05-16: Merged as Draft after WG approval.</li> | |||
| </ul> | |||
| </article> | |||
+ 601
- 0
cache/05226eb5cd63369cd4bc11c5c8fd2194/index.html
View File
| @@ -0,0 +1,601 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Un manuel pour remettre l’histoire à l’endroit (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Un manuel pour remettre l’histoire à l’endroit (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783">Source originale du contenu</a></h3> | |||
| <p>Des torrents d’encre gonflent un fleuve d’ignorance : il y aura bientôt plus de publications consacrées à l’histoire qu’à l’automobile. Au seul mois de juin 2014, trois nouveaux magazines sont apparus dans les kiosques. <i>Les Clés de l’histoire,</i> dernier-né de Sophia Publications, qui édite également les mensuels <i>L’Histoire</i> et <i>Historia,</i> se veut un <i>«<small class="fine"> </small>produit populaire, joyeux et facile d’accès<small class="fine"> </small>»,</i> un <i>«<small class="fine"> </small>magazine sympa et intergénérationnel<small class="fine"> </small>»</i> destiné à <i>«<small class="fine"> </small>donner du bonheur à tous les lecteurs<small class="fine"> </small>».</i> Le bimestriel <i>Tout sur l’histoire</i> (Fleurus Presse) se positionne pour sa part <i>«<small class="fine"> </small>sur le créneau de l’histoire à grand spectacle<small class="fine"> </small>»</i> et <i>«<small class="fine"> </small>regarde vers les 18-25 ans, quand le reste du secteur se tourne vers les plus de 55 ans<small class="fine"> </small>».</i> Quant au troisième, <i>Secrets d’histoire</i> (Uni-éditions), il décline sur papier le concept de l’émission de Stéphane Bern sur France 2 (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb1" class="spip_note" rel="footnote" title="Les Clés de la presse, n° 750, Montrouge, 27 juin 2014." id="nh1">1</a>). S’y ajoutent <i>Guerres & Histoire, Ça m’intéresse Histoire, Le Figaro Histoire</i> et les multiples hors-séries qui peuplent les kiosques.</p> | |||
| <dl class="spip_document_13058 spip_documents spip_documents_left"> | |||
| <dt><a href="http://www.monde-diplomatique.fr/t/manuelh" title="JPEG - 67.8 ko"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L250xH343/contremanuel-79423.jpg" alt="JPEG - 67.8 ko"/></a></dt> | |||
| <dd class="crayon document-descriptif-13058 spip_doc_descriptif">En vente <a href="http://www.monde-diplomatique.fr/t/manuelh" class="">sur notre boutique en ligne</a>. | |||
| </dd> | |||
| </dl> | |||
| <p> La chose fut comprise avant même Hérodote : l’histoire est une arme au tranchant effilé<small class="fine"> </small>; qui la forge l’a pour soi, et malheur aux vaincus. Son récit habite les peuples, appelle la légende. Il divise ou rassemble. Se raconte et se transmet. Se déforme et se révise. Il passionne. Et les marchands en ont fait un marché. Un produit haut en couleur, mais sans relief ni profondeur. Un produit sans problème — mais pas sans profit.</p> | |||
| <p>Sur les ondes aussi, on raconte beaucoup d’histoires. La discipline a droit à des émissions sur Europe 1, France Inter, France Culture et, à la télévision, sur France 2 et sur la chaîne Histoire (propriété à 100<small class="fine"> </small>% de Bouygues et longtemps dirigée par M. Patrick Buisson, ancien directeur du journal d’extrême droite <i>Minute</i>) (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb2" class="spip_note" rel="footnote" title="« Au cœur de l’histoire » sur Europe 1, « La fabrique de l’histoire » sur France (...)" id="nh2">2</a>). Quant aux rayons des librairies, ils s’encombrent chaque année de dizaines de nouveaux ouvrages. Car tout personnage public peut désormais s’affirmer apprenti historien. Tandis que les dirigeants politiques affectionnent les biographies, de préférence d’un personnage illustre dont ils peuvent prétendre s’inspirer — Georges Mandel pour M. Nicolas Sarkozy, Napoléon Ier pour M. Lionel Jospin, Henri IV pour M. François Bayrou, etc. —, les journalistes affichent un plus grand éclectisme. En à peine quinze ans, parallèlement à ses fonctions de directeur du <i>Nouvel Observateur,</i> puis de <i>Libération,</i> puis du <i>Nouvel Observateur,</i> puis de <i>Libération,</i> etc., Laurent Joffrin a trouvé le temps d’écrire sur Mai 68, sur la Résistance, sur <i>Les Grandes Batailles navales, de Salamine à Midway</i> (Seuil) et sur les guerres napoléoniennes, sans oublier <i>La Grande Histoire des codes secrets</i> (Seuil).</p> | |||
| <p>On l’aura compris : les porte-voix de l’histoire «<small class="fine"> </small>popularisée<small class="fine"> </small>» ou «<small class="fine"> </small>vulgarisée<small class="fine"> </small>» sont rarement des spécialistes. Sur les cinquante meilleures ventes de l’année 2012 en France, seuls treize livres ont été écrits par des historiens de profession — dont sept par Max Gallo, qui a quitté le monde universitaire depuis plusieurs décennies. Les autres sont journalistes (Patrice Duhamel, Franck Ferrand, Bernard Benyamin), animateurs de télévision (Pierre Bellemarre, Bern), écrivains (Katherine Pancol, Amin Maalouf), chroniqueurs princiers (Gonzague Saint Bris) ou simples témoins (un prisonnier cambodgien, un résistant, une déportée). Dans bien des cas, le nom de l’auteur fonctionne comme un logo : s’il devenait invisible, le livre se vendrait beaucoup moins bien. Les maisons d’édition jouent d’ailleurs sur l’effet «<small class="fine"> </small>vu à la télé<small class="fine"> </small>» en ornant parfois la couverture de leurs ouvrages d’une photographie de l’auteur.</p> | |||
| <p>La recette pour rencontrer les faveurs du grand public est simple : <i>«<small class="fine"> </small>Il faut attirer avec des méthodes de divertissement</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb3" class="spip_note" rel="footnote" title="Entretien avec Stéphane Bern, TéléObs, Paris, 27 août 2013." id="nh3">3</a>)<i><small class="fine"> </small>»</i> (Bern, quatre ouvrages au Top 50 de <i>Livres Hebdo</i>), en choisissant <i>«<small class="fine"> </small>les épisodes les plus spectaculaires, les plus truculents</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb4" class="spip_note" rel="footnote" title="Conférence de Lorànt Deutsch à la Fnac de Paris-la Défense, 21 avril 2012. Cité (...)" id="nh4">4</a>)<i><small class="fine"> </small>»</i> (Lorànt Deutsch, deux millions de livres vendus (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb5" class="spip_note" rel="footnote" title="Le livre de Deutsch Métronome. L’histoire de France au rythme du métro (...)" id="nh5">5</a>)), en privilégiant ce qui est <i>«<small class="fine"> </small>atroce<small class="fine"> </small>», «<small class="fine"> </small>poignant<small class="fine"> </small>»</i> ou <i>«<small class="fine"> </small>inattendu<small class="fine"> </small>»</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb6" class="spip_note" rel="footnote" title="Entretien avec Franck Ferrand, Médias & Histoire, 11 juin (...)" id="nh6">6</a>) (Ferrand, six cent mille auditeurs quotidiens sur Europe 1). Bref, l’histoire séduit au-delà du cercle des initiés si elle parvient à éveiller des émotions, des sentiments, des impressions.</p> | |||
| <p>Pour aboutir à ce résultat, une excellente méthode consiste à la personnaliser, à l’incarner dans des personnages prompts à susciter l’émerveillement, la compassion, la colère, l’indignation, la pitié ou l’effroi. Dans <i>Femmes de dictateur</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb7" class="spip_note" rel="footnote" title="Diane Ducret, Femmes de dictateur, Perrin, Paris, 2011." id="nh7">7</a>), qui lui a permis de se hisser en tête des ventes de 2012, la journaliste Diane Ducret propose une plongée <i>«<small class="fine"> </small>dans l’intimité de Hitler, Mussolini, Mao, Lénine, Staline, Bokassa ou Ceaucescu<small class="fine"> </small>».</i> De même que <i>Rocky II</i> a succédé à <i>Rocky,</i> Ducret a publié <i>Femmes de dictateurs 2.</i> Au menu du nouveau millésime : l’«<small class="fine"> </small>intimité<small class="fine"> </small>» de M. Fidel Castro, mais aussi de Saddam Hussein, Oussama Ben Laden, Slobodan Milosevic et Kim Jong-il.</p> | |||
| <p>Les «<small class="fine"> </small>dictateurs<small class="fine"> </small>» n’étant pas seuls à faire vendre, beaucoup d’auteurs préfèrent se concentrer sur les «<small class="fine"> </small>grands hommes<small class="fine"> </small>». Ainsi, Bern a raconté les vies de Napoléon et de Louis XIV — lequel a également été étudié par Saint Bris, par ailleurs biographe d’Henri IV. Mais le maître en la matière demeure Gallo, qui a dressé le portrait de ces trois souverains, mais aussi de Jean Jaurès, Charles de Gaulle, Jules César, Giuseppe Garibaldi, Spartacus, Néron, Rosa Luxemburg, Jules Vallès ou Robespierre. A coups de dossiers et de hors-séries, la presse joue les passagers clandestins des succès d’édition. Pour surfer sur la vague Ducret, <i>Le Point</i> s’intéressait, le 19 décembre 2013, aux «<small class="fine"> </small>Favorites : maîtresses et concubines<small class="fine"> </small>». Le même mois, l’hebdomadaire <i>Valeurs actuelles</i> réhabilitait les <i>«<small class="fine"> </small>héros français piétinés par la gauche<small class="fine"> </small>»,</i> de Clovis à Charles Martel en passant par les inévitables Louis XIV et Napoléon (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb8" class="spip_note" rel="footnote" title="Valeurs actuelles, Paris, 5 décembre 2013." id="nh8">8</a>).</p> | |||
| <p>La biographie n’est en rien un sous-genre : elle peut aider à comprendre les subtilités de certains phénomènes sociaux, politiques ou culturels. Mais la version qu’en présentent en général les médias se résume trop souvent au panégyrique d’un grand homme, émaillé de scènes d’alcôve et de commérages, imposant au passé des problématiques contemporaines. Ainsi, selon <i>Valeurs actuelles,</i> Vercingétorix aurait été <i>«<small class="fine"> </small>un chef courageux, un combattant qui a fait le choix de l’action guerrière pour préserver sa culture<small class="fine"> </small>»,</i> et Charles Martel, qui <i>«<small class="fine"> </small>arrêta les Arabes à Poitiers<small class="fine"> </small>»,</i> un <i>«<small class="fine"> </small>résistant réprouvé<small class="fine"> </small>»...</i></p> | |||
| <p>Les auteurs les plus en vogue revendiquent cette «<small class="fine"> </small>héroïsation<small class="fine"> </small>». Le «<small class="fine"> </small>grand homme<small class="fine"> </small>» joue un rôle fédérateur : en magnifiant la France, il rassemble les citoyens autour du culte d’un passé glorieux. En d’autres termes, les «<small class="fine"> </small>héros<small class="fine"> </small>» favorisent l’amour de la patrie. Cette conception, tout droit héritée de la IIIe République, domine dans les médias, où pullulent les propos qui transforment la France en royaume des Bisounours : <i>«<small class="fine"> </small>L’histoire de France, c’est avant tout la plus belle des histoires<small class="fine"> </small>»</i> (Deutsch)<small class="fine"> </small>; <i>«<small class="fine"> </small>Mes ancêtres n’étaient pas gaulois, loin s’en faut, mais l’étude passionnée de l’histoire de France m’a permis d’aimer ce pays qui m’a vu naître<small class="fine"> </small>»</i> (Bern)<small class="fine"> </small>; <i>«<small class="fine"> </small>Il faut que la France se réapproprie sa propre histoire et réapprenne à s’aimer<small class="fine"> </small>»</i> (Eric Zemmour).</p> | |||
| <p><span class="spip_document_13057 spip_documents spip_documents_center"> | |||
| <a href="http://www.monde-diplomatique.fr/t/manuelh"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L510xH372/chapitre2-manuel-5f352.jpg" alt=""/></a></span></p> | |||
| <p>Pour tous ces auteurs, les problèmes de cohésion nationale viendraient donc de ce que l’histoire ne remplit plus sa mission : elle alimenterait le désamour des jeunes envers leur nation. L’idée n’est pas nouvelle. En 1979, déjà, à l’unisson du <i>Figaro,</i> du <i>Point</i> et de <i>Valeurs actuelles,</i> Alain Decaux critiquait les réformes scolaires, qui contribuaient selon lui à <i>«<small class="fine"> </small>couper</i> [les jeunes] <i>de leurs racines</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb9" class="spip_note" rel="footnote" title="Alain Decaux, « On n’enseigne plus l’histoire à vos enfants », Le Figaro (...)" id="nh9">9</a>)<i><small class="fine"> </small>».</i> Trente ans plus tard, l’annonce des nouveaux programmes de collège et de lycée par le ministre Luc Chatel a suscité une offensive conjointe de la presse (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb10" class="spip_note" rel="footnote" title="« Ce que nos enfants n’apprennent plus au collège », Le Figaro Magazine, 26 août (...)" id="nh10">10</a>) et de l’édition (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb11" class="spip_note" rel="footnote" title="Laurent Wetzel, Ils ont tué l’histoire-géo, François Bourin Editeur, Paris, (...)" id="nh11">11</a>), qui se disputent âprement le marché de l’anathème. Chaque ouvrage dénonçant la «<small class="fine"> </small>casse de l’histoire<small class="fine"> </small>» bénéficie d’une couverture médiatique généreuse. Le livre de Vincent Badré sur les manuels, qui ressasse des lamentations sur la disparition des grands personnages ou les méfaits de la repentance coloniale, a été recensé favorablement dans <i>Le Figaro Histoire, Le Figaro Magazine, Le Parisien</i> et <i>Valeurs actuelles</i><small class="fine"> </small>; son auteur a été interviewé, parfois à plusieurs reprises, par TF1, France 2, France 3, France Info, France Inter et RMC.</p> | |||
| <h3 class="h3 spip">La crise de Cuba avant le nazisme,<br class="manualbr"/>le régime de Vichy après le 11-Septembre...</h3> | |||
| <p>De tribunes en plateaux télévisés, trois reproches reviennent sans cesse : les nouveaux programmes n’enseigneraient plus les héros français<small class="fine"> </small>; ils auraient abandonné la chronologie au profit d’une approche thématique inefficace<small class="fine"> </small>; ils délaisseraient le passé national pour privilégier une histoire mondiale «<small class="fine"> </small>compassionnelle<small class="fine"> </small>».</p> | |||
| <p><i>«<small class="fine"> </small>Les adolescents ont besoin de repères chronologiques, biographiques,</i> explique Ferrand, sur Europe 1, le 8 septembre 2013. <i>Si l’on veut avoir une chance de les réconcilier avec leur passé, il faut que celui-ci leur apparaisse plus lisible et plus attrayant.<small class="fine"> </small>»</i> Dimitri Casali, historien en chef au <i>Figaro Magazine,</i> qui officie également à <i>L’Express</i> et sur le site Atlantico, considère que le <i>«<small class="fine"> </small>ministère de l’éducation altermondialiste<small class="fine"> </small>»</i> a remplacé <i>«<small class="fine"> </small>une histoire qui avait fait ses preuves depuis cent ans, basée sur le récit des grands personnages et la chronologie, par un ensemble de thématiques compassionnelles<small class="fine"> </small>».</i> Selon lui, l’école est sous l’emprise des <i>«<small class="fine"> </small>pédagogues<small class="fine"> </small>»,</i> des <i>«<small class="fine"> </small>anciens trotskistes<small class="fine"> </small>».</i> Elle contribuerait à diffuser un <i>«<small class="fine"> </small>roman noir de l’histoire de France<small class="fine"> </small>»,</i> une <i>«<small class="fine"> </small>vision binaire<small class="fine"> </small>»</i> opposant les <i>«<small class="fine"> </small>oppresseurs occidentaux<small class="fine"> </small>»</i> et les <i>«<small class="fine"> </small>oppressés</i> [sic], <i>c’est-à-dire le reste du monde<small class="fine"> </small>»</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb12" class="spip_note" rel="footnote" title="« Exit la chronologie : comment la refonte du programme transforme les cours (...)" id="nh12">12</a>).</p> | |||
| <p>La nouvelle architecture des programmes de lycée est assurément déroutante. Ainsi, en classe de première, la seconde guerre mondiale est traitée — avec Verdun, la crise de Cuba et le 11-Septembre — dans le «<small class="fine"> </small>thème 2<small class="fine"> </small>» consacré à «<small class="fine"> </small>la guerre au XXe siècle<small class="fine"> </small>», tandis que le nazisme apparaît dans le «<small class="fine"> </small>thème 3<small class="fine"> </small>» dédié au «<small class="fine"> </small>siècle des totalitarismes<small class="fine"> </small>», où il est mêlé au fascisme et au stalinisme. Quant au régime de Vichy et à la Résistance, ils surgissent dans la cinquième et dernière partie, sur «<small class="fine"> </small>Les Français et la République<small class="fine"> </small>»... Y voir une volonté de dissoudre l’histoire de la nation dans un ensemble de «<small class="fine"> </small>thématiques compassionnelles<small class="fine"> </small>» relève néanmoins du fantasme, sinon, parfois, de la paranoïa.</p> | |||
| <p>Pour le reste, les programmes restent très largement franco-centrés. L’étude des civilisations africaines, qui a cristallisé les critiques, occupe à peine 10<small class="fine"> </small>% du programme de cinquième. La bataille de Bouvines, dont Deutsch prétend qu’elle a disparu, figure toujours au menu, de même que les grands personnages, de Jeanne d’Arc à Napoléon (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb13" class="spip_note" rel="footnote" title="L’association et le site Internet Aggiornamento histoire-géographie proposent (...)" id="nh13">13</a>).</p> | |||
| <p>Quant aux manuels scolaires, ils demeurent d’importants vecteurs de la pensée dominante, mais pas nécessairement dans le sens évoqué par Badré ou Casali. Ils véhiculent avec ardeur nombre d’idées reçues : le mythe de l’«<small class="fine"> </small>union sacrée<small class="fine"> </small>» dans les tranchées de la première guerre mondiale, alors que les unités de soldats étaient souvent traversées par des divisions sociales<small class="fine"> </small>; le prétendu anti-impérialisme du président américain Woodrow Wilson, qui n’hésitait pourtant pas à multiplier les interventions militaires et les ingérences politiques en Amérique latine tout en prônant le «<small class="fine"> </small>droit à l’autodétermination des peuples<small class="fine"> </small>» à la conférence de Versailles<small class="fine"> </small>; le rôle prétendument décisif du débarquement allié dans la défaite de l’Allemagne<small class="fine"> </small>; la fable d’une Union européenne créée dans le seul but d’instaurer une paix durable sur le continent, etc. Tous ces clichés ne dénotent pas vraiment une «<small class="fine"> </small>éducation altermondialiste<small class="fine"> </small>»...</p> | |||
| <p>Cristallisant toutes les passions, les manuels scolaires représentent un enjeu dont chacun perçoit l’importance (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb14" class="spip_note" rel="footnote" title="Lire le dossier « Manuels scolaires, le soupçon », Le Monde diplomatique, (...)" id="nh14">14</a>). Soupçonnés à tort d’influencer les enseignants — lesquels élaborent en réalité eux-mêmes leurs cours, et n’utilisent le plus souvent les manuels que comme supports —, ils habitent, entre autres sources, l’imaginaire des élèves qui en parcourent les textes, les images, les figures.</p> | |||
| <h3 class="h3 spip">Dans les livres scolaires, <br class="manualbr"/>un ton consensuel et froid, <br class="manualbr"/>des chiffres qui défilent <br class="manualbr"/>comme des noms dans un annuaire</h3> | |||
| <p>Les ouvrages qui ont obtenu l’agrément du ministère frappent par leur ton consensuel et froid : des événements, des dates, des chiffres y défilent comme les noms dans un annuaire, mécaniquement, tout juste reliés par quelques conjonctions de coordination. <i>«<small class="fine"> </small>Depuis la crise des années 1970, les sociétés postindustrielles entrent dans une phase de croissance démographique et économique plus lente. Le chômage et la précarité renaissent : même s’ils sont amortis par l’Etat-providence, ils rendent plus difficile son financement<small class="fine"> </small>»,</i> dit par exemple un livre de Belin pour expliquer l’apparition du chômage de masse. Or la crise de l’«<small class="fine"> </small>Etat-providence<small class="fine"> </small>» n’est pas le produit d’une fatalité<small class="fine"> </small>; elle résulte de décisions politiques : la baisse des impôts et l’ouverture des frontières économiques, par exemple, décisions qui correspondent à une idéologie particulière et sont promues par certains groupes sociaux. Ecrire n’est pas simplement décrire.</p> | |||
| <p><span class="spip_document_13056 spip_documents spip_documents_center"> | |||
| <a href="http://www.monde-diplomatique.fr/t/manuelh"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L510xH372/chapitre-manuel-06ef6.jpg" alt=""/></a></span></p> | |||
| <p>Pour les manuels scolaires, les conséquences n’ont pas de causes, ni les victimes de bourreaux (sauf si ces derniers sont nazis ou communistes). Ils parlent de la pauvreté mais n’évoquent pas la richesse. Ils se veulent au-dessus de la mêlée et se bornent à rapporter des points de vue différents, même quand ceux-ci ne sont pas tout à fait équivalents. Par exemple, selon Magnard (première, 2012) le <i>«<small class="fine"> </small>bilan de la colonisation<small class="fine"> </small>»</i> est <i>«<small class="fine"> </small>ambigu<small class="fine"> </small>»</i> : <i>«<small class="fine"> </small>Le pouvoir se maintient par la force, mais il permet la scolarisation et l’émergence d’élites indigènes. La situation médicale des colonisés s’améliore, mais le travail forcé sur les grands chantiers maintient des rapports inégaux entre Blancs et colonisés.<small class="fine"> </small>»</i> Peut-on vraiment mettre sur le même plan la construction d’écoles ou de dispensaires et le massacre de centaines de milliers de Mau-Mau, de Hereros ou d’Algériens<small class="fine"> </small>?</p> | |||
| <p>Parce qu’ils attribuent les évolutions sociales et politiques à des entités non définies <i>(«<small class="fine"> </small>la France<small class="fine"> </small>», «<small class="fine"> </small>les Français<small class="fine"> </small>», «<small class="fine"> </small>la société<small class="fine"> </small>», «<small class="fine"> </small>l’opinion publique<small class="fine"> </small>»),</i> les manuels négligent les jeux d’influence, les résistances, les interactions qui font de l’histoire une science jubilatoire. Ils donnent raison à Deutsch quand il voit dans cette discipline telle qu’on l’enseigne <i>«<small class="fine"> </small>une matière froide, un objet de dissection<small class="fine"> </small>».</i></p> | |||
| <p>Est-on vraiment condamné à choisir entre l’histoire-spectacle, mise au service de l’amour de la France, et cette matière désincarnée que nous imposent l’école et la science universitaire<small class="fine"> </small>?</p> | |||
| <p>Dès les années 1930, aux Etats-Unis, Harold Rugg avait imaginé un manuel d’histoire progressiste, qui abordait de front le problème des inégalités sociales afin d’en dénoncer les causes. L’initiative se heurta à l’opposition d’organisations conservatrices — la Légion américaine, l’Association nationale des industriels, divers groupes patriotiques —, qui s’employèrent à la torpiller. Pour trois cent mille exemplaires de <i>Man and His Changing Society</i> vendus en 1938, il ne s’en écoulait plus que vingt mille six ans plus tard. <i>«<small class="fine"> </small>Un prolétariat éduqué est une source constante de désordre et de danger pour toute nation<small class="fine"> </small>»,</i> déclara à l’époque le président de l’université Columbia (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb15" class="spip_note" rel="footnote" title="Cité dans Michael Parenti, History as Mystery, City Lights Books, San (...)" id="nh15">15</a>), bien conscient de l’enjeu que représente la diffusion d’un savoir historique critique.</p> | |||
| <p>Avec une équipe d’universitaires, de journalistes et de professeurs d’histoire-géographie, <i>Le Monde diplomatique</i> s’est lancé dans la réalisation d’un ouvrage accessible et exigeant, qui revisite les programmes de première et de terminale, de la révolution industrielle à nos jours. Ce contre-manuel ne se contente pas d’énoncer des faits : il les explique, les compare, les met en perspective, et démonte au passage quelques idées reçues. Il traite l’histoire <i>«<small class="fine"> </small>à parts égales</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb16" class="spip_note" rel="footnote" title="Romain Bertrand, L’Histoire à parts égales. Récits d’une rencontre, (...)" id="nh16">16</a>)<i><small class="fine"> </small>»,</i> en accordant autant d’importance aux vaincus qu’aux vainqueurs, et donne toute sa place au Sud, souvent peu et mal traité. Loin des images officielles, son iconographie privilégie le travail des artistes, qu’il resitue dans les grands courants de leur époque.</p> | |||
| <p>Parce que l’histoire est une construction qui varie selon les pays et les configurations politiques, de nombreux extraits de manuels scolaires étrangers (chinois, syrien, algérien, israélien, allemand...) accompagnent ses soixante-quinze articles. Comment le pacte germano-soviétique est-il décrit dans les écoles en Russie<small class="fine"> </small>? Quelle présentation les manuels turcs donnent-ils du génocide arménien<small class="fine"> </small>? Qu’apprennent les élèves palestiniens au sujet de la création d’Israël<small class="fine"> </small>? Comment les Allemands parlent-ils de la guerre du Vietnam<small class="fine"> </small>? Et les Boliviens, de la mondialisation<small class="fine"> </small>?</p> | |||
| <p>Le manuel critique du <i>Monde diplomatique</i> ne cherche pas à obtenir un label ministériel, ni à «<small class="fine"> </small>faire aimer la France<small class="fine"> </small>» ou à «<small class="fine"> </small>réconcilier les citoyens avec leur passé<small class="fine"> </small>». Il ne vise pas davantage les 18-25 ans que les plus de 55 ans : il s’adresse aux étudiants, aux enseignants et, plus largement, à tous ceux qui considèrent l’histoire non comme le musée de l’ordre, mais comme une science du changement.</p> | |||
| <blockquote class="spip"> | |||
| <h3 class="h3 spip">A découvrir </h3> | |||
| <p><span class="spip_document_13055 spip_documents spip_documents_right"> | |||
| <a href="http://www.monde-diplomatique.fr/t/manuelh"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L255xH500/betisier250-a6025.jpg" alt=""/></a></span> Le <a href="http://www.monde-diplomatique.fr/t/manuelh" class=""><i>Manuel d’histoire critique</i></a> est découpé en dix chapitres couvrant la période comprise entre 1830 et... le monde qui vient. Chaque partie est introduite par l’énoncé — et la réfutation — d’une idée reçue : «<small class="fine"> </small>Les soldats de 1914-1918 étaient tous unis dans les tranchées<small class="fine"> </small>», «<small class="fine"> </small>La crise de 1929 a porté Adolf Hitler au pouvoir<small class="fine"> </small>», etc. En soixante-quinze textes et cent quatre-vingts pages, l’ouvrage traite l’intégralité du programme d’histoire des premières et des terminales.</p> | |||
| <p>L’ensemble s’accompagne de nombreuses cartes, mais aussi d’une iconographie en rupture avec les stéréotypes. Et d’un bêtisier constitué à partir de manuels d’histoire publiés sur les cinq continents.</p> | |||
| </blockquote> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 101
- 0
cache/05226eb5cd63369cd4bc11c5c8fd2194/index.md
View File
| @@ -0,0 +1,101 @@ | |||
| title: Un manuel pour remettre l’histoire à l’endroit | |||
| url: http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783 | |||
| hash_url: 05226eb5cd63369cd4bc11c5c8fd2194 | |||
| <p>Des torrents d’encre gonflent un fleuve d’ignorance : il y aura bientôt plus de publications consacrées à l’histoire qu’à l’automobile. Au seul mois de juin 2014, trois nouveaux magazines sont apparus dans les kiosques. <i>Les Clés de l’histoire,</i> dernier-né de Sophia Publications, qui édite également les mensuels <i>L’Histoire</i> et <i>Historia,</i> se veut un <i>«<small class="fine"> </small>produit populaire, joyeux et facile d’accès<small class="fine"> </small>»,</i> un <i>«<small class="fine"> </small>magazine sympa et intergénérationnel<small class="fine"> </small>»</i> destiné à <i>«<small class="fine"> </small>donner du bonheur à tous les lecteurs<small class="fine"> </small>».</i> Le bimestriel <i>Tout sur l’histoire</i> (Fleurus Presse) se positionne pour sa part <i>«<small class="fine"> </small>sur le créneau de l’histoire à grand spectacle<small class="fine"> </small>»</i> et <i>«<small class="fine"> </small>regarde vers les 18-25 ans, quand le reste du secteur se tourne vers les plus de 55 ans<small class="fine"> </small>».</i> Quant au troisième, <i>Secrets d’histoire</i> (Uni-éditions), il décline sur papier le concept de l’émission de Stéphane Bern sur France 2 (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb1" class="spip_note" rel="footnote" title="Les Clés de la presse, n° 750, Montrouge, 27 juin 2014." id="nh1">1</a>). S’y ajoutent <i>Guerres & Histoire, Ça m’intéresse Histoire, Le Figaro Histoire</i> et les multiples hors-séries qui peuplent les kiosques.</p> | |||
| <dl class="spip_document_13058 spip_documents spip_documents_left"> | |||
| <dt><a href="http://www.monde-diplomatique.fr/t/manuelh" title="JPEG - 67.8 ko"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L250xH343/contremanuel-79423.jpg" alt="JPEG - 67.8 ko"/></a></dt> | |||
| <dd class="crayon document-descriptif-13058 spip_doc_descriptif">En vente <a href="http://www.monde-diplomatique.fr/t/manuelh" class="">sur notre boutique en ligne</a>. | |||
| </dd> | |||
| </dl> | |||
| <p> La chose fut comprise avant même Hérodote : l’histoire est une arme au tranchant effilé<small class="fine"> </small>; qui la forge l’a pour soi, et malheur aux vaincus. Son récit habite les peuples, appelle la légende. Il divise ou rassemble. Se raconte et se transmet. Se déforme et se révise. Il passionne. Et les marchands en ont fait un marché. Un produit haut en couleur, mais sans relief ni profondeur. Un produit sans problème — mais pas sans profit.</p> | |||
| <p>Sur les ondes aussi, on raconte beaucoup d’histoires. La discipline a droit à des émissions sur Europe 1, France Inter, France Culture et, à la télévision, sur France 2 et sur la chaîne Histoire (propriété à 100<small class="fine"> </small>% de Bouygues et longtemps dirigée par M. Patrick Buisson, ancien directeur du journal d’extrême droite <i>Minute</i>) (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb2" class="spip_note" rel="footnote" title="« Au cœur de l’histoire » sur Europe 1, « La fabrique de l’histoire » sur France (...)" id="nh2">2</a>). Quant aux rayons des librairies, ils s’encombrent chaque année de dizaines de nouveaux ouvrages. Car tout personnage public peut désormais s’affirmer apprenti historien. Tandis que les dirigeants politiques affectionnent les biographies, de préférence d’un personnage illustre dont ils peuvent prétendre s’inspirer — Georges Mandel pour M. Nicolas Sarkozy, Napoléon Ier pour M. Lionel Jospin, Henri IV pour M. François Bayrou, etc. —, les journalistes affichent un plus grand éclectisme. En à peine quinze ans, parallèlement à ses fonctions de directeur du <i>Nouvel Observateur,</i> puis de <i>Libération,</i> puis du <i>Nouvel Observateur,</i> puis de <i>Libération,</i> etc., Laurent Joffrin a trouvé le temps d’écrire sur Mai 68, sur la Résistance, sur <i>Les Grandes Batailles navales, de Salamine à Midway</i> (Seuil) et sur les guerres napoléoniennes, sans oublier <i>La Grande Histoire des codes secrets</i> (Seuil).</p> | |||
| <p>On l’aura compris : les porte-voix de l’histoire «<small class="fine"> </small>popularisée<small class="fine"> </small>» ou «<small class="fine"> </small>vulgarisée<small class="fine"> </small>» sont rarement des spécialistes. Sur les cinquante meilleures ventes de l’année 2012 en France, seuls treize livres ont été écrits par des historiens de profession — dont sept par Max Gallo, qui a quitté le monde universitaire depuis plusieurs décennies. Les autres sont journalistes (Patrice Duhamel, Franck Ferrand, Bernard Benyamin), animateurs de télévision (Pierre Bellemarre, Bern), écrivains (Katherine Pancol, Amin Maalouf), chroniqueurs princiers (Gonzague Saint Bris) ou simples témoins (un prisonnier cambodgien, un résistant, une déportée). Dans bien des cas, le nom de l’auteur fonctionne comme un logo : s’il devenait invisible, le livre se vendrait beaucoup moins bien. Les maisons d’édition jouent d’ailleurs sur l’effet «<small class="fine"> </small>vu à la télé<small class="fine"> </small>» en ornant parfois la couverture de leurs ouvrages d’une photographie de l’auteur.</p> | |||
| <p>La recette pour rencontrer les faveurs du grand public est simple : <i>«<small class="fine"> </small>Il faut attirer avec des méthodes de divertissement</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb3" class="spip_note" rel="footnote" title="Entretien avec Stéphane Bern, TéléObs, Paris, 27 août 2013." id="nh3">3</a>)<i><small class="fine"> </small>»</i> (Bern, quatre ouvrages au Top 50 de <i>Livres Hebdo</i>), en choisissant <i>«<small class="fine"> </small>les épisodes les plus spectaculaires, les plus truculents</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb4" class="spip_note" rel="footnote" title="Conférence de Lorànt Deutsch à la Fnac de Paris-la Défense, 21 avril 2012. Cité (...)" id="nh4">4</a>)<i><small class="fine"> </small>»</i> (Lorànt Deutsch, deux millions de livres vendus (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb5" class="spip_note" rel="footnote" title="Le livre de Deutsch Métronome. L’histoire de France au rythme du métro (...)" id="nh5">5</a>)), en privilégiant ce qui est <i>«<small class="fine"> </small>atroce<small class="fine"> </small>», «<small class="fine"> </small>poignant<small class="fine"> </small>»</i> ou <i>«<small class="fine"> </small>inattendu<small class="fine"> </small>»</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb6" class="spip_note" rel="footnote" title="Entretien avec Franck Ferrand, Médias & Histoire, 11 juin (...)" id="nh6">6</a>) (Ferrand, six cent mille auditeurs quotidiens sur Europe 1). Bref, l’histoire séduit au-delà du cercle des initiés si elle parvient à éveiller des émotions, des sentiments, des impressions.</p> | |||
| <p>Pour aboutir à ce résultat, une excellente méthode consiste à la personnaliser, à l’incarner dans des personnages prompts à susciter l’émerveillement, la compassion, la colère, l’indignation, la pitié ou l’effroi. Dans <i>Femmes de dictateur</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb7" class="spip_note" rel="footnote" title="Diane Ducret, Femmes de dictateur, Perrin, Paris, 2011." id="nh7">7</a>), qui lui a permis de se hisser en tête des ventes de 2012, la journaliste Diane Ducret propose une plongée <i>«<small class="fine"> </small>dans l’intimité de Hitler, Mussolini, Mao, Lénine, Staline, Bokassa ou Ceaucescu<small class="fine"> </small>».</i> De même que <i>Rocky II</i> a succédé à <i>Rocky,</i> Ducret a publié <i>Femmes de dictateurs 2.</i> Au menu du nouveau millésime : l’«<small class="fine"> </small>intimité<small class="fine"> </small>» de M. Fidel Castro, mais aussi de Saddam Hussein, Oussama Ben Laden, Slobodan Milosevic et Kim Jong-il.</p> | |||
| <p>Les «<small class="fine"> </small>dictateurs<small class="fine"> </small>» n’étant pas seuls à faire vendre, beaucoup d’auteurs préfèrent se concentrer sur les «<small class="fine"> </small>grands hommes<small class="fine"> </small>». Ainsi, Bern a raconté les vies de Napoléon et de Louis XIV — lequel a également été étudié par Saint Bris, par ailleurs biographe d’Henri IV. Mais le maître en la matière demeure Gallo, qui a dressé le portrait de ces trois souverains, mais aussi de Jean Jaurès, Charles de Gaulle, Jules César, Giuseppe Garibaldi, Spartacus, Néron, Rosa Luxemburg, Jules Vallès ou Robespierre. A coups de dossiers et de hors-séries, la presse joue les passagers clandestins des succès d’édition. Pour surfer sur la vague Ducret, <i>Le Point</i> s’intéressait, le 19 décembre 2013, aux «<small class="fine"> </small>Favorites : maîtresses et concubines<small class="fine"> </small>». Le même mois, l’hebdomadaire <i>Valeurs actuelles</i> réhabilitait les <i>«<small class="fine"> </small>héros français piétinés par la gauche<small class="fine"> </small>»,</i> de Clovis à Charles Martel en passant par les inévitables Louis XIV et Napoléon (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb8" class="spip_note" rel="footnote" title="Valeurs actuelles, Paris, 5 décembre 2013." id="nh8">8</a>).</p> | |||
| <p>La biographie n’est en rien un sous-genre : elle peut aider à comprendre les subtilités de certains phénomènes sociaux, politiques ou culturels. Mais la version qu’en présentent en général les médias se résume trop souvent au panégyrique d’un grand homme, émaillé de scènes d’alcôve et de commérages, imposant au passé des problématiques contemporaines. Ainsi, selon <i>Valeurs actuelles,</i> Vercingétorix aurait été <i>«<small class="fine"> </small>un chef courageux, un combattant qui a fait le choix de l’action guerrière pour préserver sa culture<small class="fine"> </small>»,</i> et Charles Martel, qui <i>«<small class="fine"> </small>arrêta les Arabes à Poitiers<small class="fine"> </small>»,</i> un <i>«<small class="fine"> </small>résistant réprouvé<small class="fine"> </small>»...</i></p> | |||
| <p>Les auteurs les plus en vogue revendiquent cette «<small class="fine"> </small>héroïsation<small class="fine"> </small>». Le «<small class="fine"> </small>grand homme<small class="fine"> </small>» joue un rôle fédérateur : en magnifiant la France, il rassemble les citoyens autour du culte d’un passé glorieux. En d’autres termes, les «<small class="fine"> </small>héros<small class="fine"> </small>» favorisent l’amour de la patrie. Cette conception, tout droit héritée de la IIIe République, domine dans les médias, où pullulent les propos qui transforment la France en royaume des Bisounours : <i>«<small class="fine"> </small>L’histoire de France, c’est avant tout la plus belle des histoires<small class="fine"> </small>»</i> (Deutsch)<small class="fine"> </small>; <i>«<small class="fine"> </small>Mes ancêtres n’étaient pas gaulois, loin s’en faut, mais l’étude passionnée de l’histoire de France m’a permis d’aimer ce pays qui m’a vu naître<small class="fine"> </small>»</i> (Bern)<small class="fine"> </small>; <i>«<small class="fine"> </small>Il faut que la France se réapproprie sa propre histoire et réapprenne à s’aimer<small class="fine"> </small>»</i> (Eric Zemmour).</p> | |||
| <p><span class="spip_document_13057 spip_documents spip_documents_center"> | |||
| <a href="http://www.monde-diplomatique.fr/t/manuelh"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L510xH372/chapitre2-manuel-5f352.jpg" alt=""/></a></span></p> | |||
| <p>Pour tous ces auteurs, les problèmes de cohésion nationale viendraient donc de ce que l’histoire ne remplit plus sa mission : elle alimenterait le désamour des jeunes envers leur nation. L’idée n’est pas nouvelle. En 1979, déjà, à l’unisson du <i>Figaro,</i> du <i>Point</i> et de <i>Valeurs actuelles,</i> Alain Decaux critiquait les réformes scolaires, qui contribuaient selon lui à <i>«<small class="fine"> </small>couper</i> [les jeunes] <i>de leurs racines</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb9" class="spip_note" rel="footnote" title="Alain Decaux, « On n’enseigne plus l’histoire à vos enfants », Le Figaro (...)" id="nh9">9</a>)<i><small class="fine"> </small>».</i> Trente ans plus tard, l’annonce des nouveaux programmes de collège et de lycée par le ministre Luc Chatel a suscité une offensive conjointe de la presse (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb10" class="spip_note" rel="footnote" title="« Ce que nos enfants n’apprennent plus au collège », Le Figaro Magazine, 26 août (...)" id="nh10">10</a>) et de l’édition (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb11" class="spip_note" rel="footnote" title="Laurent Wetzel, Ils ont tué l’histoire-géo, François Bourin Editeur, Paris, (...)" id="nh11">11</a>), qui se disputent âprement le marché de l’anathème. Chaque ouvrage dénonçant la «<small class="fine"> </small>casse de l’histoire<small class="fine"> </small>» bénéficie d’une couverture médiatique généreuse. Le livre de Vincent Badré sur les manuels, qui ressasse des lamentations sur la disparition des grands personnages ou les méfaits de la repentance coloniale, a été recensé favorablement dans <i>Le Figaro Histoire, Le Figaro Magazine, Le Parisien</i> et <i>Valeurs actuelles</i><small class="fine"> </small>; son auteur a été interviewé, parfois à plusieurs reprises, par TF1, France 2, France 3, France Info, France Inter et RMC.</p> | |||
| <h3 class="h3 spip">La crise de Cuba avant le nazisme,<br class="manualbr"/>le régime de Vichy après le 11-Septembre...</h3> | |||
| <p>De tribunes en plateaux télévisés, trois reproches reviennent sans cesse : les nouveaux programmes n’enseigneraient plus les héros français<small class="fine"> </small>; ils auraient abandonné la chronologie au profit d’une approche thématique inefficace<small class="fine"> </small>; ils délaisseraient le passé national pour privilégier une histoire mondiale «<small class="fine"> </small>compassionnelle<small class="fine"> </small>».</p> | |||
| <p><i>«<small class="fine"> </small>Les adolescents ont besoin de repères chronologiques, biographiques,</i> explique Ferrand, sur Europe 1, le 8 septembre 2013. <i>Si l’on veut avoir une chance de les réconcilier avec leur passé, il faut que celui-ci leur apparaisse plus lisible et plus attrayant.<small class="fine"> </small>»</i> Dimitri Casali, historien en chef au <i>Figaro Magazine,</i> qui officie également à <i>L’Express</i> et sur le site Atlantico, considère que le <i>«<small class="fine"> </small>ministère de l’éducation altermondialiste<small class="fine"> </small>»</i> a remplacé <i>«<small class="fine"> </small>une histoire qui avait fait ses preuves depuis cent ans, basée sur le récit des grands personnages et la chronologie, par un ensemble de thématiques compassionnelles<small class="fine"> </small>».</i> Selon lui, l’école est sous l’emprise des <i>«<small class="fine"> </small>pédagogues<small class="fine"> </small>»,</i> des <i>«<small class="fine"> </small>anciens trotskistes<small class="fine"> </small>».</i> Elle contribuerait à diffuser un <i>«<small class="fine"> </small>roman noir de l’histoire de France<small class="fine"> </small>»,</i> une <i>«<small class="fine"> </small>vision binaire<small class="fine"> </small>»</i> opposant les <i>«<small class="fine"> </small>oppresseurs occidentaux<small class="fine"> </small>»</i> et les <i>«<small class="fine"> </small>oppressés</i> [sic], <i>c’est-à-dire le reste du monde<small class="fine"> </small>»</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb12" class="spip_note" rel="footnote" title="« Exit la chronologie : comment la refonte du programme transforme les cours (...)" id="nh12">12</a>).</p> | |||
| <p>La nouvelle architecture des programmes de lycée est assurément déroutante. Ainsi, en classe de première, la seconde guerre mondiale est traitée — avec Verdun, la crise de Cuba et le 11-Septembre — dans le «<small class="fine"> </small>thème 2<small class="fine"> </small>» consacré à «<small class="fine"> </small>la guerre au XXe siècle<small class="fine"> </small>», tandis que le nazisme apparaît dans le «<small class="fine"> </small>thème 3<small class="fine"> </small>» dédié au «<small class="fine"> </small>siècle des totalitarismes<small class="fine"> </small>», où il est mêlé au fascisme et au stalinisme. Quant au régime de Vichy et à la Résistance, ils surgissent dans la cinquième et dernière partie, sur «<small class="fine"> </small>Les Français et la République<small class="fine"> </small>»... Y voir une volonté de dissoudre l’histoire de la nation dans un ensemble de «<small class="fine"> </small>thématiques compassionnelles<small class="fine"> </small>» relève néanmoins du fantasme, sinon, parfois, de la paranoïa.</p> | |||
| <p>Pour le reste, les programmes restent très largement franco-centrés. L’étude des civilisations africaines, qui a cristallisé les critiques, occupe à peine 10<small class="fine"> </small>% du programme de cinquième. La bataille de Bouvines, dont Deutsch prétend qu’elle a disparu, figure toujours au menu, de même que les grands personnages, de Jeanne d’Arc à Napoléon (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb13" class="spip_note" rel="footnote" title="L’association et le site Internet Aggiornamento histoire-géographie proposent (...)" id="nh13">13</a>).</p> | |||
| <p>Quant aux manuels scolaires, ils demeurent d’importants vecteurs de la pensée dominante, mais pas nécessairement dans le sens évoqué par Badré ou Casali. Ils véhiculent avec ardeur nombre d’idées reçues : le mythe de l’«<small class="fine"> </small>union sacrée<small class="fine"> </small>» dans les tranchées de la première guerre mondiale, alors que les unités de soldats étaient souvent traversées par des divisions sociales<small class="fine"> </small>; le prétendu anti-impérialisme du président américain Woodrow Wilson, qui n’hésitait pourtant pas à multiplier les interventions militaires et les ingérences politiques en Amérique latine tout en prônant le «<small class="fine"> </small>droit à l’autodétermination des peuples<small class="fine"> </small>» à la conférence de Versailles<small class="fine"> </small>; le rôle prétendument décisif du débarquement allié dans la défaite de l’Allemagne<small class="fine"> </small>; la fable d’une Union européenne créée dans le seul but d’instaurer une paix durable sur le continent, etc. Tous ces clichés ne dénotent pas vraiment une «<small class="fine"> </small>éducation altermondialiste<small class="fine"> </small>»...</p> | |||
| <p>Cristallisant toutes les passions, les manuels scolaires représentent un enjeu dont chacun perçoit l’importance (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb14" class="spip_note" rel="footnote" title="Lire le dossier « Manuels scolaires, le soupçon », Le Monde diplomatique, (...)" id="nh14">14</a>). Soupçonnés à tort d’influencer les enseignants — lesquels élaborent en réalité eux-mêmes leurs cours, et n’utilisent le plus souvent les manuels que comme supports —, ils habitent, entre autres sources, l’imaginaire des élèves qui en parcourent les textes, les images, les figures.</p> | |||
| <h3 class="h3 spip">Dans les livres scolaires, <br class="manualbr"/>un ton consensuel et froid, <br class="manualbr"/>des chiffres qui défilent <br class="manualbr"/>comme des noms dans un annuaire</h3> | |||
| <p>Les ouvrages qui ont obtenu l’agrément du ministère frappent par leur ton consensuel et froid : des événements, des dates, des chiffres y défilent comme les noms dans un annuaire, mécaniquement, tout juste reliés par quelques conjonctions de coordination. <i>«<small class="fine"> </small>Depuis la crise des années 1970, les sociétés postindustrielles entrent dans une phase de croissance démographique et économique plus lente. Le chômage et la précarité renaissent : même s’ils sont amortis par l’Etat-providence, ils rendent plus difficile son financement<small class="fine"> </small>»,</i> dit par exemple un livre de Belin pour expliquer l’apparition du chômage de masse. Or la crise de l’«<small class="fine"> </small>Etat-providence<small class="fine"> </small>» n’est pas le produit d’une fatalité<small class="fine"> </small>; elle résulte de décisions politiques : la baisse des impôts et l’ouverture des frontières économiques, par exemple, décisions qui correspondent à une idéologie particulière et sont promues par certains groupes sociaux. Ecrire n’est pas simplement décrire.</p> | |||
| <p><span class="spip_document_13056 spip_documents spip_documents_center"> | |||
| <a href="http://www.monde-diplomatique.fr/t/manuelh"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L510xH372/chapitre-manuel-06ef6.jpg" alt=""/></a></span></p> | |||
| <p>Pour les manuels scolaires, les conséquences n’ont pas de causes, ni les victimes de bourreaux (sauf si ces derniers sont nazis ou communistes). Ils parlent de la pauvreté mais n’évoquent pas la richesse. Ils se veulent au-dessus de la mêlée et se bornent à rapporter des points de vue différents, même quand ceux-ci ne sont pas tout à fait équivalents. Par exemple, selon Magnard (première, 2012) le <i>«<small class="fine"> </small>bilan de la colonisation<small class="fine"> </small>»</i> est <i>«<small class="fine"> </small>ambigu<small class="fine"> </small>»</i> : <i>«<small class="fine"> </small>Le pouvoir se maintient par la force, mais il permet la scolarisation et l’émergence d’élites indigènes. La situation médicale des colonisés s’améliore, mais le travail forcé sur les grands chantiers maintient des rapports inégaux entre Blancs et colonisés.<small class="fine"> </small>»</i> Peut-on vraiment mettre sur le même plan la construction d’écoles ou de dispensaires et le massacre de centaines de milliers de Mau-Mau, de Hereros ou d’Algériens<small class="fine"> </small>?</p> | |||
| <p>Parce qu’ils attribuent les évolutions sociales et politiques à des entités non définies <i>(«<small class="fine"> </small>la France<small class="fine"> </small>», «<small class="fine"> </small>les Français<small class="fine"> </small>», «<small class="fine"> </small>la société<small class="fine"> </small>», «<small class="fine"> </small>l’opinion publique<small class="fine"> </small>»),</i> les manuels négligent les jeux d’influence, les résistances, les interactions qui font de l’histoire une science jubilatoire. Ils donnent raison à Deutsch quand il voit dans cette discipline telle qu’on l’enseigne <i>«<small class="fine"> </small>une matière froide, un objet de dissection<small class="fine"> </small>».</i></p> | |||
| <p>Est-on vraiment condamné à choisir entre l’histoire-spectacle, mise au service de l’amour de la France, et cette matière désincarnée que nous imposent l’école et la science universitaire<small class="fine"> </small>?</p> | |||
| <p>Dès les années 1930, aux Etats-Unis, Harold Rugg avait imaginé un manuel d’histoire progressiste, qui abordait de front le problème des inégalités sociales afin d’en dénoncer les causes. L’initiative se heurta à l’opposition d’organisations conservatrices — la Légion américaine, l’Association nationale des industriels, divers groupes patriotiques —, qui s’employèrent à la torpiller. Pour trois cent mille exemplaires de <i>Man and His Changing Society</i> vendus en 1938, il ne s’en écoulait plus que vingt mille six ans plus tard. <i>«<small class="fine"> </small>Un prolétariat éduqué est une source constante de désordre et de danger pour toute nation<small class="fine"> </small>»,</i> déclara à l’époque le président de l’université Columbia (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb15" class="spip_note" rel="footnote" title="Cité dans Michael Parenti, History as Mystery, City Lights Books, San (...)" id="nh15">15</a>), bien conscient de l’enjeu que représente la diffusion d’un savoir historique critique.</p> | |||
| <p>Avec une équipe d’universitaires, de journalistes et de professeurs d’histoire-géographie, <i>Le Monde diplomatique</i> s’est lancé dans la réalisation d’un ouvrage accessible et exigeant, qui revisite les programmes de première et de terminale, de la révolution industrielle à nos jours. Ce contre-manuel ne se contente pas d’énoncer des faits : il les explique, les compare, les met en perspective, et démonte au passage quelques idées reçues. Il traite l’histoire <i>«<small class="fine"> </small>à parts égales</i> (<a href="http://www.monde-diplomatique.fr/2014/09/BREVILLE/50783#nb16" class="spip_note" rel="footnote" title="Romain Bertrand, L’Histoire à parts égales. Récits d’une rencontre, (...)" id="nh16">16</a>)<i><small class="fine"> </small>»,</i> en accordant autant d’importance aux vaincus qu’aux vainqueurs, et donne toute sa place au Sud, souvent peu et mal traité. Loin des images officielles, son iconographie privilégie le travail des artistes, qu’il resitue dans les grands courants de leur époque.</p> | |||
| <p>Parce que l’histoire est une construction qui varie selon les pays et les configurations politiques, de nombreux extraits de manuels scolaires étrangers (chinois, syrien, algérien, israélien, allemand...) accompagnent ses soixante-quinze articles. Comment le pacte germano-soviétique est-il décrit dans les écoles en Russie<small class="fine"> </small>? Quelle présentation les manuels turcs donnent-ils du génocide arménien<small class="fine"> </small>? Qu’apprennent les élèves palestiniens au sujet de la création d’Israël<small class="fine"> </small>? Comment les Allemands parlent-ils de la guerre du Vietnam<small class="fine"> </small>? Et les Boliviens, de la mondialisation<small class="fine"> </small>?</p> | |||
| <p>Le manuel critique du <i>Monde diplomatique</i> ne cherche pas à obtenir un label ministériel, ni à «<small class="fine"> </small>faire aimer la France<small class="fine"> </small>» ou à «<small class="fine"> </small>réconcilier les citoyens avec leur passé<small class="fine"> </small>». Il ne vise pas davantage les 18-25 ans que les plus de 55 ans : il s’adresse aux étudiants, aux enseignants et, plus largement, à tous ceux qui considèrent l’histoire non comme le musée de l’ordre, mais comme une science du changement.</p> | |||
| <blockquote class="spip"> | |||
| <h3 class="h3 spip">A découvrir </h3> | |||
| <p><span class="spip_document_13055 spip_documents spip_documents_right"> | |||
| <a href="http://www.monde-diplomatique.fr/t/manuelh"><img src="http://www.monde-diplomatique.fr/local/cache-vignettes/L255xH500/betisier250-a6025.jpg" alt=""/></a></span> Le <a href="http://www.monde-diplomatique.fr/t/manuelh" class=""><i>Manuel d’histoire critique</i></a> est découpé en dix chapitres couvrant la période comprise entre 1830 et... le monde qui vient. Chaque partie est introduite par l’énoncé — et la réfutation — d’une idée reçue : «<small class="fine"> </small>Les soldats de 1914-1918 étaient tous unis dans les tranchées<small class="fine"> </small>», «<small class="fine"> </small>La crise de 1929 a porté Adolf Hitler au pouvoir<small class="fine"> </small>», etc. En soixante-quinze textes et cent quatre-vingts pages, l’ouvrage traite l’intégralité du programme d’histoire des premières et des terminales.</p> | |||
| <p>L’ensemble s’accompagne de nombreuses cartes, mais aussi d’une iconographie en rupture avec les stéréotypes. Et d’un bêtisier constitué à partir de manuels d’histoire publiés sur les cinq continents.</p> | |||
| </blockquote> | |||
+ 527
- 0
cache/0538edd174779fac8efd235af4617d06/index.html
File diff suppressed because it is too large
View File
+ 5
- 0
cache/0538edd174779fac8efd235af4617d06/index.md
File diff suppressed because it is too large
View File
+ 552
- 0
cache/053cc2e6338158d83f898d2d0f5912a8/index.html
View File
| @@ -0,0 +1,552 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Readme Driven Development (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://tom.preston-werner.com/2010/08/23/readme-driven-development.html"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Readme Driven Development (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://tom.preston-werner.com/2010/08/23/readme-driven-development.html">Source originale du contenu</a></h3> | |||
| <p>I hear a lot of talk these days about TDD and BDD and Extreme Programming and SCRUM and stand up meetings and all kinds of methodologies and techniques for developing better software, but it's all irrelevant unless the software we're building meets the needs of those that are using it. Let me put that another way. A perfect implementation of the wrong specification is worthless. By the same principle a beautifully crafted library with no documentation is also damn near worthless. If your software solves the wrong problem or nobody can figure out how to use it, there's something very bad going on.</p> | |||
| <p>Fine. So how do we solve this problem? It's easier than you think, and it's important enough to warrant its very own paragraph.</p> | |||
| <p>Write your Readme first.</p> | |||
| <p>First. As in, before you write any code or tests or behaviors or stories or ANYTHING. I know, I know, we're programmers, dammit, not tech writers! But that's where you're wrong. Writing a Readme is absolutely essential to writing good software. Until you've written about your software, you have no idea what you'll be coding. Between The Great Backlash Against Waterfall Design and The Supreme Acceptance of Agile Development, something was lost. Don't get me wrong, waterfall design takes things way too far. Huge systems specified in minute detail end up being the WRONG systems specified in minute detail. We were right to strike it down. But what took its place is too far in the other direction. Now we have projects with short, badly written, or entirely missing documentation. Some projects don't even have a Readme!</p> | |||
| <p>This is not acceptable. There must be some middle ground between reams of technical specifications and no specifications at all. And in fact there is. That middle ground is the humble Readme.</p> | |||
| <p>It's important to distinguish Readme Driven Development from Documentation Driven Development. RDD could be considered a subset or limited version of DDD. By restricting your design documentation to a single file that is intended to be read as an introduction to your software, RDD keeps you safe from DDD-turned-waterfall syndrome by punishing you for lengthy or overprecise specification. At the same time, it rewards you for keeping libraries small and modularized. These simple reinforcements go a long way towards driving your project in the right direction without a lot of process to ensure you do the right thing.</p> | |||
| <p>By writing your Readme first you give yourself some pretty significant advantages:</p> | |||
| <ul> | |||
| <li><p>Most importantly, you're giving yourself a chance to think through the project without the overhead of having to change code every time you change your mind about how something should be organized or what should be included in the Public API. Remember that feeling when you first started writing automated code tests and realized that you caught all kinds of errors that would have otherwise snuck into your codebase? That's the exact same feeling you'll have if you write the Readme for your project before you write the actual code.</p></li> | |||
| <li><p>As a byproduct of writing a Readme in order to know what you need to implement, you'll have a very nice piece of documentation sitting in front of you. You'll also find that it's much easier to write this document at the beginning of the project when your excitement and motivation are at their highest. Retroactively writing a Readme is an absolute drag, and you're sure to miss all kinds of important details when you do so.</p></li> | |||
| <li><p>If you're working with a team of developers you get even more mileage out of your Readme. If everyone else on the team has access to this information before you've completed the project, then they can confidently start work on other projects that will interface with your code. Without any sort of defined interface, you have to code in serial or face reimplementing large portions of code.</p></li> | |||
| <li><p>It's a lot simpler to have a discussion based on something written down. It's easy to talk endlessly and in circles about a problem if nothing is ever put to text. The simple act of writing down a proposed solution means everyone has a concrete idea that can be argued about and iterated upon.</p></li> | |||
| </ul> | |||
| <p>Consider the process of writing the Readme for your project as the true act of creation. This is where all your brilliant ideas should be expressed. This document should stand on its own as a testament to your creativity and expressiveness. The Readme should be the single most important document in your codebase; writing it first is the proper thing to do.</p> | |||
| <p>--</p> | |||
| <p><a href="http://news.ycombinator.com/item?id=1627246">Discuss this post on Hacker News</a></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://tom.preston-werner.com/2010/08/23/readme-driven-development.html">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 31
- 0
cache/053cc2e6338158d83f898d2d0f5912a8/index.md
View File
| @@ -0,0 +1,31 @@ | |||
| title: Readme Driven Development | |||
| url: http://tom.preston-werner.com/2010/08/23/readme-driven-development.html | |||
| hash_url: 053cc2e6338158d83f898d2d0f5912a8 | |||
| <p>I hear a lot of talk these days about TDD and BDD and Extreme Programming and SCRUM and stand up meetings and all kinds of methodologies and techniques for developing better software, but it's all irrelevant unless the software we're building meets the needs of those that are using it. Let me put that another way. A perfect implementation of the wrong specification is worthless. By the same principle a beautifully crafted library with no documentation is also damn near worthless. If your software solves the wrong problem or nobody can figure out how to use it, there's something very bad going on.</p> | |||
| <p>Fine. So how do we solve this problem? It's easier than you think, and it's important enough to warrant its very own paragraph.</p> | |||
| <p>Write your Readme first.</p> | |||
| <p>First. As in, before you write any code or tests or behaviors or stories or ANYTHING. I know, I know, we're programmers, dammit, not tech writers! But that's where you're wrong. Writing a Readme is absolutely essential to writing good software. Until you've written about your software, you have no idea what you'll be coding. Between The Great Backlash Against Waterfall Design and The Supreme Acceptance of Agile Development, something was lost. Don't get me wrong, waterfall design takes things way too far. Huge systems specified in minute detail end up being the WRONG systems specified in minute detail. We were right to strike it down. But what took its place is too far in the other direction. Now we have projects with short, badly written, or entirely missing documentation. Some projects don't even have a Readme!</p> | |||
| <p>This is not acceptable. There must be some middle ground between reams of technical specifications and no specifications at all. And in fact there is. That middle ground is the humble Readme.</p> | |||
| <p>It's important to distinguish Readme Driven Development from Documentation Driven Development. RDD could be considered a subset or limited version of DDD. By restricting your design documentation to a single file that is intended to be read as an introduction to your software, RDD keeps you safe from DDD-turned-waterfall syndrome by punishing you for lengthy or overprecise specification. At the same time, it rewards you for keeping libraries small and modularized. These simple reinforcements go a long way towards driving your project in the right direction without a lot of process to ensure you do the right thing.</p> | |||
| <p>By writing your Readme first you give yourself some pretty significant advantages:</p> | |||
| <ul> | |||
| <li><p>Most importantly, you're giving yourself a chance to think through the project without the overhead of having to change code every time you change your mind about how something should be organized or what should be included in the Public API. Remember that feeling when you first started writing automated code tests and realized that you caught all kinds of errors that would have otherwise snuck into your codebase? That's the exact same feeling you'll have if you write the Readme for your project before you write the actual code.</p></li> | |||
| <li><p>As a byproduct of writing a Readme in order to know what you need to implement, you'll have a very nice piece of documentation sitting in front of you. You'll also find that it's much easier to write this document at the beginning of the project when your excitement and motivation are at their highest. Retroactively writing a Readme is an absolute drag, and you're sure to miss all kinds of important details when you do so.</p></li> | |||
| <li><p>If you're working with a team of developers you get even more mileage out of your Readme. If everyone else on the team has access to this information before you've completed the project, then they can confidently start work on other projects that will interface with your code. Without any sort of defined interface, you have to code in serial or face reimplementing large portions of code.</p></li> | |||
| <li><p>It's a lot simpler to have a discussion based on something written down. It's easy to talk endlessly and in circles about a problem if nothing is ever put to text. The simple act of writing down a proposed solution means everyone has a concrete idea that can be argued about and iterated upon.</p></li> | |||
| </ul> | |||
| <p>Consider the process of writing the Readme for your project as the true act of creation. This is where all your brilliant ideas should be expressed. This document should stand on its own as a testament to your creativity and expressiveness. The Readme should be the single most important document in your codebase; writing it first is the proper thing to do.</p> | |||
| <p>--</p> | |||
| <p><a href="http://news.ycombinator.com/item?id=1627246">Discuss this post on Hacker News</a></p> | |||
+ 609
- 0
cache/0548a88df19dc344db338424a87a652a/index.html
View File
| @@ -0,0 +1,609 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>La Send génération : Pecha Kucha remix (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://blog.tcrouzet.com/2013/11/24/la-send-generation-pecha-kucha-remix/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| La Send génération : Pecha Kucha remix (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://blog.tcrouzet.com/2013/11/24/la-send-generation-pecha-kucha-remix/">Source originale du contenu</a></h3> | |||
| <p>Dans son journal de Tarkovski ne cesse de se demander ce que peut dire le cinéma que les autres arts ne peuvent pas. Alors que peut dire l’écriture numérique que les écritures plus anciennes ne pouvaient pas ? Qu’est-ce qui se joue de neuf ? Qu’est-ce qui dans notre pratique nous pousse sur de nouvelles routes ? Tentative de réponse dans <a href="http://blog.tcrouzet.com/2013/11/21/faut-il-encore-se-faire-editer/">ce second ebook</a> mis <a href="http://www.youtube.com/watch?v=iyoCsJzrKI0&feature=youtu.be">en abîme dans un Pecha Kucha</a>.<span id="more-33746"/></p> | |||
| <p><a href="https://app.box.com/s/ybvddylvwul2yp9t8ol5">ePub gratuit</a>, <a href="http://www.amazon.fr/dp/B00GTYRV1C">Kindle</a>, <a href="https://itunes.apple.com/fr/book/id762790919">Apple</a>, <a href="http://store.kobobooks.com/fr-fr/Search?Query=9782919358410">Kobo</a>…</p> | |||
| <h3>1</h3> | |||
| <p>Je lis le rouleau original de Kerouac, la grande route déroulée sur trente-six mètres cinquante, une pure giclée de bonheur que les éditeurs au début des années 1950 ont pourtant refusée, forçant Kerouac à réécrire et censurer sa prose cataclysmique parce qu’ils ne comprenaient pas le <em>Beat</em>.</p> | |||
| <h3>2</h3> | |||
| <p>Pourtant la route première surpasse la route éditée. L’énergie la déborde dans ses phrases cassées, interrompues par la folie de la pensée trop rapide pour être canalisée. L’immédiateté change tout pour l’auteur comme pour le lecteur. Il faut être insensible pour ne pas le remarquer, le tracer dans la musique, la rugosité de la stance mitraillée devant la conscience surprise.</p> | |||
| <h3>3</h3> | |||
| <p>Par le miracle de la touche <em>Send</em> adossée à nos logiciels, téléphones, tablettes… nous sommes potentiellement tous des Kerouac, attachés à un rouleau sans fin, qui nous laisse déverser des mots, des images et des sons sans limites entre nous et les spectateurs. Tout ce que nous lâchons devient définitif, accessible, risible comme beauté fragile d’imperfection.</p> | |||
| <h3>4</h3> | |||
| <p>Cette touche <em>Send</em> est tout aussi révolutionnaire que pour le peintre le passage de l’huile à l’aquarelle, de l’aquarelle à l’acrylique. Passage dont les curieux se saisirent pour nous éblouir de productions neuves, par nécessité, parce qu’elles ne pouvaient exister au préalable. Et Picasso qui regardait jusque dans les produits destinés au bâtiment. Le Ripolin et je ne sais quoi.</p> | |||
| <h3>5</h3> | |||
| <p>Refuser d’expérimenter, c’est refuser de créer. Refuser le Net, c’est s’enfermer dans des formes moulées par d’autres devenus depuis longtemps marchands de tapis. Refuser le <em>Send</em>, c’est refuser le <em>Speed</em> de notre époque, son <em>Beat</em>, son <em>Rock</em>. Dans cette dynamique il se produit quelque chose qui n’aurait jamais pu advenir par le passé.</p> | |||
| <h3>6</h3> | |||
| <p>Je peux tout écrire, je peux tout publier, ça change tout jusque dans les textes que je rêve. Les échafaudages s’écroulent, de la nécessité de plaire à celle de respecter le roman, l’essai, la poésie… J’ai droit à tout, à tout mêler, fusionner, dans un fatras infâme pour les rayonnages des librairies. J’ai droit d’être une flamme, un être entier en train de m’enivrer à l’oxygène.</p> | |||
| <h3>7</h3> | |||
| <p>Au même endroit je peux parler de mon outil de travail, de philosophie, de politique, raconter une histoire, les paysages que je traverse et que j’habite, je peux de tout cela faire une œuvre sans chercher à redonner aux différentes lignes qui s’entrecroisent un semblant d’autonomie. Le <em>Send</em> lie le dissemblable, il fait entrer en résonnance des mélodies étrangères.</p> | |||
| <h3>8</h3> | |||
| <p>Le <em>Send</em> nous chatouille. Il s’est greffé dans nos cerveaux. Il a brisé nos barrages mentaux. Il est là, disponible, tentant, un peu effrayant, une drogue à laquelle on s’accoutume et qui exige des doses toujours accentuées. C’est une lame au-dessus de nos cous. Nous écrivons avec le feu, quitte à oublier des mots, à en faire l’élision systématique pour grappiller des secondes.</p> | |||
| <h3>9</h3> | |||
| <p>Je peux arrêter ce texte, le propulser vers tous les horizons à travers l’espace et le temps, ou bien le continuer encore, mais pas indéfiniment, le <em>Send</em> me travaille, il me tend vers les lecteurs, <em>urgentise</em> chacune de mes phrases par sa simple possibilité. Il m’offre de les clôturer, définitivement, quitte à me ridiculiser.</p> | |||
| <h3>10</h3> | |||
| <p>Un <em>Send</em> n’est pas réversible, le Net mémorise, interdit l’oubli, tant chaque chose est aspirée, archivée au-delà de toute possibilité d’effacement, à moins d’un cataclysme. Pas de repenti, ou si peu, foncer en avant vers le texte suivant. Assumer son imperfection, jouir de l’éjection de bits vers les papilles sursensibilisées des récepteurs étrangers.</p> | |||
| <h3>11</h3> | |||
| <p>Tarkovski faisait du temps l’essence du cinéma. Il ne se trompait qu’à moitié : le temps est notre matière, que nous cherchions à l’arrêter ou à le chevaucher à pleine vitesse. Le <em>Send</em> fait de nous des êtres-temps. Le <em>Send</em> nous propulse dans notre siècle. Le <em>Send</em> est notre moteur, notre métaphysique, notre trait d’union. Nous appartenons à <em>la Send génération</em>.</p> | |||
| <h3>12</h3> | |||
| <p>Les créateurs n’ont jamais vécu rien de semblable. Ceux qui se moquent n’ont jamais goûté avec intensité au <em>Send</em>. Ils ont avec cette touche soit de l’aversion, soit un rapport encore trop classique. Prisonniers du qu’en-dira-t-on ou d’infinies boucles récursives qui les approchent de la paralysie, ils tournent et retournent leur art jusqu’à lui donner l’aspect d’un savon trop gras.</p> | |||
| <h3>13</h3> | |||
| <p>Construire durant des mois un texte et le publier en ligne ne fait pas de nous des auteurs numériques. Publier des livres papier ne fait pas de nous des auteurs traditionnels. Le <em>Send</em> se joue sur le Net, puis se moque du support. Il est action writing. Le <em>Send</em> est propre au Net comme le Slam est propre à la scène. Ils participent tous deux de la même urgence.</p> | |||
| <h3>14</h3> | |||
| <p>Nombre des auteurs du Net n’écrivent pas autre chose que les auteurs du papier. Notre différence n’est pas dans le support mais dans le <em>Send</em>. Nous ne créons pas pour les étagères des musées mais pour le réseau au sens le plus sanguin du mot. Nous voulons provoquer des secousses sismiques chez les autres en même temps que chez nous, au cours d’une union joyeuse.</p> | |||
| <h3>15</h3> | |||
| <p>Avant, on pouvait pratiquer le <em>Send</em> en privé. Lâcher une lettre sans brouillon préparatoire. Ailleurs, quelques auteurs à succès criaient leurs coups de gueule dans la presse, mais jamais selon leur propre agenda. Le <em>Send</em> nous libère de toutes les contingences sinon celles que nous nous imposons nous-mêmes. Le <em>Send</em> est un acte de publication immédiat.</p> | |||
| <h3>16</h3> | |||
| <p>On a intégré la présence constante du lecteur, la possibilité de tout lui dire, sans que personne ne s’impose entre lui et nous. Le <em>Send</em> augmente nos capacités cognitives par l’apport des commentaires et la mise en devoir de répondre par de nouvelles passes d’armes littéraires. Le <em>Send</em> nous offre les autres. Il nous plonge en eux.</p> | |||
| <h3>17</h3> | |||
| <p>« Vous écrivez mal ! » crient les caciques de l’édition. On croit toujours que Kerouac a éructé <em>Sur la route</em> en trois semaines insomnieuses. La préface à l’édition du tapuscrit original est explicite : depuis des années il notait, esquissait, recommençait… Cette longue préparation s’est soudain cristallisée quand le « je » s’est imposé comme forme narrative.</p> | |||
| <h3>18</h3> | |||
| <p>Le <em>Send</em> n’est praticable que sous-tendu par le temps long. Entraînement patient, souci attaché à chaque mot, à chaque tournure, à chaque idée, à chaque thème, longtemps malaxés avant qu’un <em>Send</em> ne les libère dans un afflux de style non réflexif. Alors retour à l’atelier, un œil rivé sur le <em>Send</em> qui pulse dans l’ombre avec de plus en plus d’insistance.</p> | |||
| <h3>19</h3> | |||
| <p>Le <em>Send</em> est une attitude. Une reconnaissance de l’impermanence et de la fugitivité. Une acceptation des imperfections, des coquilles, des défauts. Une manière de ne pas protéger ses arrières. De prêter le flanc à des flagellations glaciales. Le <em>Send</em>, c’est vivre aujourd’hui. C’est se montrer tel qu’on est. Sans déguisement, sans afféterie. Le <em>Send</em> est une forme.</p> | |||
| <h3>20</h3> | |||
| <p>Un fil rouge unit les adeptes du <em>Send</em>. Ils cherchent un moyen d’accélérer l’écriture, de la libérer, de lui offrir des territoires vierges. Benzédrine, amphétamine, LSD… toute une collection de neuro-boosters (le <em>Beat</em>), plus tard remplacés ou vitaminés par les stridences des guitares électriques (le <em>Rock</em>), laissent place à la stimulation sociale (le <em>Send</em>).</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://blog.tcrouzet.com/2013/11/24/la-send-generation-pecha-kucha-remix/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 46
- 0
cache/0548a88df19dc344db338424a87a652a/index.md
View File
| @@ -0,0 +1,46 @@ | |||
| title: La Send génération : Pecha Kucha remix | |||
| url: http://blog.tcrouzet.com/2013/11/24/la-send-generation-pecha-kucha-remix/ | |||
| hash_url: 0548a88df19dc344db338424a87a652a | |||
| <p>Dans son journal de Tarkovski ne cesse de se demander ce que peut dire le cinéma que les autres arts ne peuvent pas. Alors que peut dire l’écriture numérique que les écritures plus anciennes ne pouvaient pas ? Qu’est-ce qui se joue de neuf ? Qu’est-ce qui dans notre pratique nous pousse sur de nouvelles routes ? Tentative de réponse dans <a href="http://blog.tcrouzet.com/2013/11/21/faut-il-encore-se-faire-editer/">ce second ebook</a> mis <a href="http://www.youtube.com/watch?v=iyoCsJzrKI0&feature=youtu.be">en abîme dans un Pecha Kucha</a>.<span id="more-33746"/></p> | |||
| <p><a href="https://app.box.com/s/ybvddylvwul2yp9t8ol5">ePub gratuit</a>, <a href="http://www.amazon.fr/dp/B00GTYRV1C">Kindle</a>, <a href="https://itunes.apple.com/fr/book/id762790919">Apple</a>, <a href="http://store.kobobooks.com/fr-fr/Search?Query=9782919358410">Kobo</a>…</p> | |||
| <h3>1</h3> | |||
| <p>Je lis le rouleau original de Kerouac, la grande route déroulée sur trente-six mètres cinquante, une pure giclée de bonheur que les éditeurs au début des années 1950 ont pourtant refusée, forçant Kerouac à réécrire et censurer sa prose cataclysmique parce qu’ils ne comprenaient pas le <em>Beat</em>.</p> | |||
| <h3>2</h3> | |||
| <p>Pourtant la route première surpasse la route éditée. L’énergie la déborde dans ses phrases cassées, interrompues par la folie de la pensée trop rapide pour être canalisée. L’immédiateté change tout pour l’auteur comme pour le lecteur. Il faut être insensible pour ne pas le remarquer, le tracer dans la musique, la rugosité de la stance mitraillée devant la conscience surprise.</p> | |||
| <h3>3</h3> | |||
| <p>Par le miracle de la touche <em>Send</em> adossée à nos logiciels, téléphones, tablettes… nous sommes potentiellement tous des Kerouac, attachés à un rouleau sans fin, qui nous laisse déverser des mots, des images et des sons sans limites entre nous et les spectateurs. Tout ce que nous lâchons devient définitif, accessible, risible comme beauté fragile d’imperfection.</p> | |||
| <h3>4</h3> | |||
| <p>Cette touche <em>Send</em> est tout aussi révolutionnaire que pour le peintre le passage de l’huile à l’aquarelle, de l’aquarelle à l’acrylique. Passage dont les curieux se saisirent pour nous éblouir de productions neuves, par nécessité, parce qu’elles ne pouvaient exister au préalable. Et Picasso qui regardait jusque dans les produits destinés au bâtiment. Le Ripolin et je ne sais quoi.</p> | |||
| <h3>5</h3> | |||
| <p>Refuser d’expérimenter, c’est refuser de créer. Refuser le Net, c’est s’enfermer dans des formes moulées par d’autres devenus depuis longtemps marchands de tapis. Refuser le <em>Send</em>, c’est refuser le <em>Speed</em> de notre époque, son <em>Beat</em>, son <em>Rock</em>. Dans cette dynamique il se produit quelque chose qui n’aurait jamais pu advenir par le passé.</p> | |||
| <h3>6</h3> | |||
| <p>Je peux tout écrire, je peux tout publier, ça change tout jusque dans les textes que je rêve. Les échafaudages s’écroulent, de la nécessité de plaire à celle de respecter le roman, l’essai, la poésie… J’ai droit à tout, à tout mêler, fusionner, dans un fatras infâme pour les rayonnages des librairies. J’ai droit d’être une flamme, un être entier en train de m’enivrer à l’oxygène.</p> | |||
| <h3>7</h3> | |||
| <p>Au même endroit je peux parler de mon outil de travail, de philosophie, de politique, raconter une histoire, les paysages que je traverse et que j’habite, je peux de tout cela faire une œuvre sans chercher à redonner aux différentes lignes qui s’entrecroisent un semblant d’autonomie. Le <em>Send</em> lie le dissemblable, il fait entrer en résonnance des mélodies étrangères.</p> | |||
| <h3>8</h3> | |||
| <p>Le <em>Send</em> nous chatouille. Il s’est greffé dans nos cerveaux. Il a brisé nos barrages mentaux. Il est là, disponible, tentant, un peu effrayant, une drogue à laquelle on s’accoutume et qui exige des doses toujours accentuées. C’est une lame au-dessus de nos cous. Nous écrivons avec le feu, quitte à oublier des mots, à en faire l’élision systématique pour grappiller des secondes.</p> | |||
| <h3>9</h3> | |||
| <p>Je peux arrêter ce texte, le propulser vers tous les horizons à travers l’espace et le temps, ou bien le continuer encore, mais pas indéfiniment, le <em>Send</em> me travaille, il me tend vers les lecteurs, <em>urgentise</em> chacune de mes phrases par sa simple possibilité. Il m’offre de les clôturer, définitivement, quitte à me ridiculiser.</p> | |||
| <h3>10</h3> | |||
| <p>Un <em>Send</em> n’est pas réversible, le Net mémorise, interdit l’oubli, tant chaque chose est aspirée, archivée au-delà de toute possibilité d’effacement, à moins d’un cataclysme. Pas de repenti, ou si peu, foncer en avant vers le texte suivant. Assumer son imperfection, jouir de l’éjection de bits vers les papilles sursensibilisées des récepteurs étrangers.</p> | |||
| <h3>11</h3> | |||
| <p>Tarkovski faisait du temps l’essence du cinéma. Il ne se trompait qu’à moitié : le temps est notre matière, que nous cherchions à l’arrêter ou à le chevaucher à pleine vitesse. Le <em>Send</em> fait de nous des êtres-temps. Le <em>Send</em> nous propulse dans notre siècle. Le <em>Send</em> est notre moteur, notre métaphysique, notre trait d’union. Nous appartenons à <em>la Send génération</em>.</p> | |||
| <h3>12</h3> | |||
| <p>Les créateurs n’ont jamais vécu rien de semblable. Ceux qui se moquent n’ont jamais goûté avec intensité au <em>Send</em>. Ils ont avec cette touche soit de l’aversion, soit un rapport encore trop classique. Prisonniers du qu’en-dira-t-on ou d’infinies boucles récursives qui les approchent de la paralysie, ils tournent et retournent leur art jusqu’à lui donner l’aspect d’un savon trop gras.</p> | |||
| <h3>13</h3> | |||
| <p>Construire durant des mois un texte et le publier en ligne ne fait pas de nous des auteurs numériques. Publier des livres papier ne fait pas de nous des auteurs traditionnels. Le <em>Send</em> se joue sur le Net, puis se moque du support. Il est action writing. Le <em>Send</em> est propre au Net comme le Slam est propre à la scène. Ils participent tous deux de la même urgence.</p> | |||
| <h3>14</h3> | |||
| <p>Nombre des auteurs du Net n’écrivent pas autre chose que les auteurs du papier. Notre différence n’est pas dans le support mais dans le <em>Send</em>. Nous ne créons pas pour les étagères des musées mais pour le réseau au sens le plus sanguin du mot. Nous voulons provoquer des secousses sismiques chez les autres en même temps que chez nous, au cours d’une union joyeuse.</p> | |||
| <h3>15</h3> | |||
| <p>Avant, on pouvait pratiquer le <em>Send</em> en privé. Lâcher une lettre sans brouillon préparatoire. Ailleurs, quelques auteurs à succès criaient leurs coups de gueule dans la presse, mais jamais selon leur propre agenda. Le <em>Send</em> nous libère de toutes les contingences sinon celles que nous nous imposons nous-mêmes. Le <em>Send</em> est un acte de publication immédiat.</p> | |||
| <h3>16</h3> | |||
| <p>On a intégré la présence constante du lecteur, la possibilité de tout lui dire, sans que personne ne s’impose entre lui et nous. Le <em>Send</em> augmente nos capacités cognitives par l’apport des commentaires et la mise en devoir de répondre par de nouvelles passes d’armes littéraires. Le <em>Send</em> nous offre les autres. Il nous plonge en eux.</p> | |||
| <h3>17</h3> | |||
| <p>« Vous écrivez mal ! » crient les caciques de l’édition. On croit toujours que Kerouac a éructé <em>Sur la route</em> en trois semaines insomnieuses. La préface à l’édition du tapuscrit original est explicite : depuis des années il notait, esquissait, recommençait… Cette longue préparation s’est soudain cristallisée quand le « je » s’est imposé comme forme narrative.</p> | |||
| <h3>18</h3> | |||
| <p>Le <em>Send</em> n’est praticable que sous-tendu par le temps long. Entraînement patient, souci attaché à chaque mot, à chaque tournure, à chaque idée, à chaque thème, longtemps malaxés avant qu’un <em>Send</em> ne les libère dans un afflux de style non réflexif. Alors retour à l’atelier, un œil rivé sur le <em>Send</em> qui pulse dans l’ombre avec de plus en plus d’insistance.</p> | |||
| <h3>19</h3> | |||
| <p>Le <em>Send</em> est une attitude. Une reconnaissance de l’impermanence et de la fugitivité. Une acceptation des imperfections, des coquilles, des défauts. Une manière de ne pas protéger ses arrières. De prêter le flanc à des flagellations glaciales. Le <em>Send</em>, c’est vivre aujourd’hui. C’est se montrer tel qu’on est. Sans déguisement, sans afféterie. Le <em>Send</em> est une forme.</p> | |||
| <h3>20</h3> | |||
| <p>Un fil rouge unit les adeptes du <em>Send</em>. Ils cherchent un moyen d’accélérer l’écriture, de la libérer, de lui offrir des territoires vierges. Benzédrine, amphétamine, LSD… toute une collection de neuro-boosters (le <em>Beat</em>), plus tard remplacés ou vitaminés par les stridences des guitares électriques (le <em>Rock</em>), laissent place à la stimulation sociale (le <em>Send</em>).</p> | |||
+ 573
- 0
cache/056743b20b1506244d175af71a69e994/index.html
View File
| @@ -0,0 +1,573 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The Biggest Crowdfunding Project Ever-the DAO-Is Kind of a Mess (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.wired.com/2016/06/biggest-crowdfunding-project-ever-dao-mess/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The Biggest Crowdfunding Project Ever-the DAO-Is Kind of a Mess (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.wired.com/2016/06/biggest-crowdfunding-project-ever-dao-mess/">Source originale du contenu</a></h3> | |||
| <p>The Decentralized Autonomous Organization is a venture capital firm, like Andreessen Horowitz or Kleiner Perkins. It chooses new ideas and businesses to invest in. But the DAO isn’t run by rich white Silicon Valley dudes. It’s run by a network of machines that operate according to the same basic principles that drive the <a href="http://www.wired.com/tag/bitcoin" target="_blank">bitcoin</a> digital currency. If you put money into the DAO, these machines let you vote on which new ideas it should invest in. The more money you put in, the more votes you get.</p> | |||
| <p>By the time the deadline for investing in the DAO arrived late last month, about 10,000 people had anonymously poured more than $168 million into this new online creation. That makes it the largest crowdfunded project ever. Now, it’s time for the DAO to start accepting pitches for all those anonymous people to vote on, bringing a new kind of democracy to the iconic flavor of capitalism that delivers so much modern technology.</p> | |||
| <p>Just one problem: So far, all the pitches are suggestions for changing the DAO.</p> | |||
| <p>A few hours before the investing deadline, a group of computer scientists <a href="http://hackingdistributed.com/2016/05/27/dao-call-for-moratorium/?version=meter+at+2&module=meter-Links&pgtype=article&contentId=&mediaId=&referrer=https%3A%2F%2Fwww.google.com%2F&priority=true&action=click&contentCollection=meter-links-click" target="_blank">described</a> what they believe are fundamental flaws in the DAO, both security holes and flaws that discourage participants from voting honestly. The group called for a moratorium on pitches, and now, the DAO is effectively on hold as the community decides whether these flaws exist and how to fix them. </p> | |||
| <p>For sure, even some of the DAO’s biggest critics say it’s a wonderful idea—a way of eliminating the kind of good ol’ boy network that often drives not only VC firms but so many other kinds of corporations. But like so many projects that have sprung from the ingenious, decentralized creation that is bitcoin, the DAO is still very much a work in progress, a technology run by an insular community that’s still a long way from changing the world. “The DAO represents a promise and a dream,” says Emin Gün Sirer, a Cornell researcher in self-organizing systems like cryptocurrencies and the “smart contracts” that underpin the DAO. He’s also a co-author of the paper that laid out the flaws. “The question is: Will it be up to snuff? Will it uphold that dream?”</p> | |||
| <p>Trying to build companies in an entirely new way doesn’t come without risk. But no one expected the DAO to raise $168 million. That’s risk on an enormous scale. “This was very sloppily done and hastily done,” says Patrick Murck, a lawyer and fellow at the Berkman Center for Internet & Society at Harvard University. “That’s unfortunate, because there is definitely something to the idea.”</p> | |||
| <h3>Anatomy of The DAO</h3> | |||
| <p>Yes, this is an insular community. The DAO is based on <a href="http://www.wired.com/2014/09/ethereum-backers-raise-15-million/" target="_blank">Ethereum</a>, an online system billed as an improved version of bitcoin, and many of the prominent figures in the Ethereum community are also working on the DAO, including some of the “curators” who decide which pitches get sent to the community. What’s more, the project was created by European company, Slock.it, that hopes to use it to fund a separate project involving Ethereum and “the Internet of Things.” When the first real pitch comes in on the DAO, it will be from Slock.it. </p> | |||
| <p>But first, the community has to fix it. Sirer says the DAO’s biggest problem is that it doesn’t encourage honest voting on new pitches. When a pitch comes in—asking for a certain amount of funds for a particular project and promising a certain return for each community member—anyone in the community can vote yes or no, or abstain. If you’ve invested more money, your votes carry more weight. The trouble, Sirer and his co-authors argue, is that voting on a project also freezes funds you’ve put into the DAO—even if you vote no. You can’t withdraw funds while a vote is in progress, and if voters approve a project, that’s where your funds go, regardless of how you voted. So if you don’t believe in a project, you’re better off abstaining than voting no.</p> | |||
| <p data-js="fader" class="pullquote carve fader"> | |||
| In theory, software developers could build any kind company in this decentralized way. <span class="attribution"/> | |||
| </p> | |||
| <p>As a result, all projects are more likely to gain approval—people just won’t have the incentive to vote no. “It’s biased toward funding,” Sirer says. “That makes the DAO a very dangerous vehicle.” </p> | |||
| <p>Now Vlad Zamfir, one of Sirer’s co-authors and a prominent member of the Ethereum community, is helping pump the brakes on the DAO. Zamfir is one of the system’s curators, chosen by Slock.it engineers to “whitelist” pitches before they go before the broader community. Zamfir is calling on all curators to refrain from whitelisting until the DAO’s makers solve any fundamental flaws. But fixing the DAO would have to be every bit as democratic as investing with it. And democracy is messy.</p> | |||
| <h3>Democratic Disarray</h3> | |||
| <p>Like bitcoin, the DAO is open source. The code runs across a network of independent machines, and anyone can change the code, provided the community agrees to the changes. A majority of the DAO’s “voting power” must vote to approve a particular change, with voting power determined by how much money a voter has invested. That is part of the power of the system. “I appreciate so many people looking at this—because so much money was raised,” says Christoph Jentzsch, the CEO of Slock.it and one of the original authors of the code. </p> | |||
| <p data-js="fader" class="pullquote carve fader"> | |||
| About half of the $168 million came from about 70 addresses. <span class="attribution"/> | |||
| </p> | |||
| <p>But that kind of collectivism can also be a real hindrance. The bitcoin project itself has <a href="http://www.wired.com/2016/02/the-schism-over-bitcoin-is-how-bitcoin-is-supposed-to-work/" target="_blank">experienced enormous tumult</a>—with one prominent community member calling it “<a href="http://www.nytimes.com/2016/01/17/business/dealbook/the-bitcoin-believer-who-gave-up.html" target="_blank">a failure</a>“—because contributors to the code couldn’t agree on the project’s direction. </p> | |||
| <p>Jentzsch says that changes to the DAO could happen fairly quickly—that the community just needs to agree on what should happen. But Sirer believes months or even years could go by. Predicting the outcome is difficult, since no one really knows who has poured so much money into the DAO or what their motivations are. Investments arrived from about 22,500 different Internet addresses, but the same people could be using multiple address. Jentzsch guesses about 10,000 individual investors in all have contributed to the project. A few individuals seem to have an especially great interest in the project: About half of the $168 million came from around 70 addresses.</p> | |||
| <h3>The DAO’s Insecurities</h3> | |||
| <p>But even if the DAO overcomes flaws in its structure and code, it still has other problems. Like, it might be illegal. Murck, the Harvard lawyer, says that the DAO is trading in securities and that it hasn’t received proper approval from regulatory bodies like the Securities and Exchange Administration. “There is clearly a concern when it comes to securities law,” he says. “I don’t think the SEC would have trouble attaching liability to someone involved.” That liability might not be limited to Jentzsch and the other creators of the DAO, but also extend to curators and even investors.</p> | |||
| <p>That doesn’t bother Jentzsch. While acknowledging that he’s not a lawyer, he argues that shares in the DAO are not securities. And it doesn’t bother Paolo Anziano, who has invested the equivalent of $7,000 in the project. “This is technology that will change the shape of the financial process,” he says.</p> | |||
| <p>But like the other apparent flaws in the DAO, legal uncertainty could keep this big idea from spreading. Like a lot of other self-organizing systems, the DAO just isn’t that well-organized. At least, not yet.</p> | |||
| <p><em>Correction: This story orginally said that DAO token holders could not simultaneously vote on multiple projecys. They can.</em></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.wired.com/2016/06/biggest-crowdfunding-project-ever-dao-mess/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 35
- 0
cache/056743b20b1506244d175af71a69e994/index.md
View File
| @@ -0,0 +1,35 @@ | |||
| title: The Biggest Crowdfunding Project Ever-the DAO-Is Kind of a Mess | |||
| url: http://www.wired.com/2016/06/biggest-crowdfunding-project-ever-dao-mess/ | |||
| hash_url: 056743b20b1506244d175af71a69e994 | |||
| <p>The Decentralized Autonomous Organization is a venture capital firm, like Andreessen Horowitz or Kleiner Perkins. It chooses new ideas and businesses to invest in. But the DAO isn’t run by rich white Silicon Valley dudes. It’s run by a network of machines that operate according to the same basic principles that drive the <a href="http://www.wired.com/tag/bitcoin" target="_blank">bitcoin</a> digital currency. If you put money into the DAO, these machines let you vote on which new ideas it should invest in. The more money you put in, the more votes you get.</p> | |||
| <p>By the time the deadline for investing in the DAO arrived late last month, about 10,000 people had anonymously poured more than $168 million into this new online creation. That makes it the largest crowdfunded project ever. Now, it’s time for the DAO to start accepting pitches for all those anonymous people to vote on, bringing a new kind of democracy to the iconic flavor of capitalism that delivers so much modern technology.</p> | |||
| <p>Just one problem: So far, all the pitches are suggestions for changing the DAO.</p> | |||
| <p>A few hours before the investing deadline, a group of computer scientists <a href="http://hackingdistributed.com/2016/05/27/dao-call-for-moratorium/?version=meter+at+2&module=meter-Links&pgtype=article&contentId=&mediaId=&referrer=https%3A%2F%2Fwww.google.com%2F&priority=true&action=click&contentCollection=meter-links-click" target="_blank">described</a> what they believe are fundamental flaws in the DAO, both security holes and flaws that discourage participants from voting honestly. The group called for a moratorium on pitches, and now, the DAO is effectively on hold as the community decides whether these flaws exist and how to fix them. </p> | |||
| <p>For sure, even some of the DAO’s biggest critics say it’s a wonderful idea—a way of eliminating the kind of good ol’ boy network that often drives not only VC firms but so many other kinds of corporations. But like so many projects that have sprung from the ingenious, decentralized creation that is bitcoin, the DAO is still very much a work in progress, a technology run by an insular community that’s still a long way from changing the world. “The DAO represents a promise and a dream,” says Emin Gün Sirer, a Cornell researcher in self-organizing systems like cryptocurrencies and the “smart contracts” that underpin the DAO. He’s also a co-author of the paper that laid out the flaws. “The question is: Will it be up to snuff? Will it uphold that dream?”</p> | |||
| <p>Trying to build companies in an entirely new way doesn’t come without risk. But no one expected the DAO to raise $168 million. That’s risk on an enormous scale. “This was very sloppily done and hastily done,” says Patrick Murck, a lawyer and fellow at the Berkman Center for Internet & Society at Harvard University. “That’s unfortunate, because there is definitely something to the idea.”</p> | |||
| <h3>Anatomy of The DAO</h3> | |||
| <p>Yes, this is an insular community. The DAO is based on <a href="http://www.wired.com/2014/09/ethereum-backers-raise-15-million/" target="_blank">Ethereum</a>, an online system billed as an improved version of bitcoin, and many of the prominent figures in the Ethereum community are also working on the DAO, including some of the “curators” who decide which pitches get sent to the community. What’s more, the project was created by European company, Slock.it, that hopes to use it to fund a separate project involving Ethereum and “the Internet of Things.” When the first real pitch comes in on the DAO, it will be from Slock.it. </p> | |||
| <p>But first, the community has to fix it. Sirer says the DAO’s biggest problem is that it doesn’t encourage honest voting on new pitches. When a pitch comes in—asking for a certain amount of funds for a particular project and promising a certain return for each community member—anyone in the community can vote yes or no, or abstain. If you’ve invested more money, your votes carry more weight. The trouble, Sirer and his co-authors argue, is that voting on a project also freezes funds you’ve put into the DAO—even if you vote no. You can’t withdraw funds while a vote is in progress, and if voters approve a project, that’s where your funds go, regardless of how you voted. So if you don’t believe in a project, you’re better off abstaining than voting no.</p> | |||
| <p data-js="fader" class="pullquote carve fader"> | |||
| In theory, software developers could build any kind company in this decentralized way. <span class="attribution"/> | |||
| </p> | |||
| <p>As a result, all projects are more likely to gain approval—people just won’t have the incentive to vote no. “It’s biased toward funding,” Sirer says. “That makes the DAO a very dangerous vehicle.” </p> | |||
| <p>Now Vlad Zamfir, one of Sirer’s co-authors and a prominent member of the Ethereum community, is helping pump the brakes on the DAO. Zamfir is one of the system’s curators, chosen by Slock.it engineers to “whitelist” pitches before they go before the broader community. Zamfir is calling on all curators to refrain from whitelisting until the DAO’s makers solve any fundamental flaws. But fixing the DAO would have to be every bit as democratic as investing with it. And democracy is messy.</p> | |||
| <h3>Democratic Disarray</h3> | |||
| <p>Like bitcoin, the DAO is open source. The code runs across a network of independent machines, and anyone can change the code, provided the community agrees to the changes. A majority of the DAO’s “voting power” must vote to approve a particular change, with voting power determined by how much money a voter has invested. That is part of the power of the system. “I appreciate so many people looking at this—because so much money was raised,” says Christoph Jentzsch, the CEO of Slock.it and one of the original authors of the code. </p> | |||
| <p data-js="fader" class="pullquote carve fader"> | |||
| About half of the $168 million came from about 70 addresses. <span class="attribution"/> | |||
| </p> | |||
| <p>But that kind of collectivism can also be a real hindrance. The bitcoin project itself has <a href="http://www.wired.com/2016/02/the-schism-over-bitcoin-is-how-bitcoin-is-supposed-to-work/" target="_blank">experienced enormous tumult</a>—with one prominent community member calling it “<a href="http://www.nytimes.com/2016/01/17/business/dealbook/the-bitcoin-believer-who-gave-up.html" target="_blank">a failure</a>“—because contributors to the code couldn’t agree on the project’s direction. </p> | |||
| <p>Jentzsch says that changes to the DAO could happen fairly quickly—that the community just needs to agree on what should happen. But Sirer believes months or even years could go by. Predicting the outcome is difficult, since no one really knows who has poured so much money into the DAO or what their motivations are. Investments arrived from about 22,500 different Internet addresses, but the same people could be using multiple address. Jentzsch guesses about 10,000 individual investors in all have contributed to the project. A few individuals seem to have an especially great interest in the project: About half of the $168 million came from around 70 addresses.</p> | |||
| <h3>The DAO’s Insecurities</h3> | |||
| <p>But even if the DAO overcomes flaws in its structure and code, it still has other problems. Like, it might be illegal. Murck, the Harvard lawyer, says that the DAO is trading in securities and that it hasn’t received proper approval from regulatory bodies like the Securities and Exchange Administration. “There is clearly a concern when it comes to securities law,” he says. “I don’t think the SEC would have trouble attaching liability to someone involved.” That liability might not be limited to Jentzsch and the other creators of the DAO, but also extend to curators and even investors.</p> | |||
| <p>That doesn’t bother Jentzsch. While acknowledging that he’s not a lawyer, he argues that shares in the DAO are not securities. And it doesn’t bother Paolo Anziano, who has invested the equivalent of $7,000 in the project. “This is technology that will change the shape of the financial process,” he says.</p> | |||
| <p>But like the other apparent flaws in the DAO, legal uncertainty could keep this big idea from spreading. Like a lot of other self-organizing systems, the DAO just isn’t that well-organized. At least, not yet.</p> | |||
| <p><em>Correction: This story orginally said that DAO token holders could not simultaneously vote on multiple projecys. They can.</em></p> | |||
+ 569
- 0
cache/05736d9775fba3be938ebd24c978ac6c/index.html
View File
| @@ -0,0 +1,569 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Re: Proposed Statement on "HTTPS everywhere for the IETF" (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.ietf.org/mail-archive/web/ietf/current/msg93416.html"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Re: Proposed Statement on "HTTPS everywhere for the IETF" (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.ietf.org/mail-archive/web/ietf/current/msg93416.html">Source originale du contenu</a></h3> | |||
| <blockquote> | |||
| <p>On Jun 4, 2015, at 9:53 AM, Joe Hildebrand wrote:</p> | |||
| <blockquote> | |||
| <p>On 4 Jun 2015, at 9:37, Tony Hain wrote:</p> | |||
| <p>My overall concern here is that statements like this undermine the integrity of the organization. I understand people wanting to improve overall privacy, but this step does not do that in any meaningful way.</p> | |||
| </blockquote> | |||
| <p>Encrypting the channel does provide some small amount of privacy for the <em>request</em>, which is not public information. Browser capabilities, cookies, etc. benefit from not being easily-correlated with other information.</p> | |||
| </blockquote> | |||
| <p>That is message confidentiality, not privacy. Almost all of the privacy bits (as in, which | |||
| person is doing what and where) are revealed outside of the message.</p> | |||
| <blockquote> | |||
| <p>It would be interesting to define an HTTP header of "Padding" into which the client would put some random noise to pad the request to a well-known size, in order to make traffic analysis of the request slightly more difficult. This is the sort of thing that comes up when we talk about doing more encryption for the IETF's data, which shows the IESG's suggested approach to be completely rational.</p> | |||
| </blockquote> | |||
| <p>Browsers don't send singular messages containing anonymous information. They send a complex | |||
| sequence of messages to multiple parties with an interaction pattern and communication state. | |||
| The more complex and encrypted the communication, the more uncommon state and direct | |||
| communication is required, which makes it easier to track a person across multiple requests | |||
| until the user's identity is revealed. Furthermore, with TLS in place, it becomes easy and | |||
| commonplace to send stored authentication credentials in those requests, without visibility, | |||
| and without the ability to easily reset those credentials (unlike in-the-clear cookies).</p> | |||
| <p>Padding has very little effect. It isn't just the message sizes that change -- it is all | |||
| of the behavior that changes, and all of the references to that behavior in subsequent | |||
| requests, and the effects of those changes on both the server and the client.</p> | |||
| <p>TLS does not provide privacy. What it does is disable anonymous access to ensure authority. | |||
| It changes access patterns away from decentralized caching to more centralized authority control. | |||
| That is the opposite of privacy. TLS is desirable for access to account-based services wherein | |||
| anonymity is not a concern (and usually not even allowed). TLS is NOT desirable for access to | |||
| public information, except in that it provides an ephemeral form of message integrity that is | |||
| a weak replacement for content integrity.</p> | |||
| <p>If the IETF wants to improve privacy, it should work on protocols that provide anonymous | |||
| access to signed artifacts (authentication of the content, not the connection) that is | |||
| independent of the user's access mechanism.</p> | |||
| <p>I have no objection to the IESG proposal to provide information <em>also</em> via https. It would | |||
| be better to provide content signatures and encourage mirroring, just to be a good example, | |||
| but I don't expect eggs to show up before chickens. However, I agree with Tony's assessment: | |||
| most of the text is nothing more than a pompous political statement, much like the sham of | |||
| "consensus" that was contrived at the Vancouver IETF.</p> | |||
| <p>TLS everywhere is great for large companies with a financial stake in Internet centralization. | |||
| It is even better for those providing identity services and TLS-outsourcing via CDNs. | |||
| It's a shame that the IETF has been abused in this way to promote a campaign that will | |||
| effectively end anonymous access, under the guise of promoting privacy.</p> | |||
| <p>....Roy</p> | |||
| </pre> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.ietf.org/mail-archive/web/ietf/current/msg93416.html">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 54
- 0
cache/05736d9775fba3be938ebd24c978ac6c/index.md
View File
| @@ -0,0 +1,54 @@ | |||
| title: Re: Proposed Statement on "HTTPS everywhere for the IETF" | |||
| url: http://www.ietf.org/mail-archive/web/ietf/current/msg93416.html | |||
| hash_url: 05736d9775fba3be938ebd24c978ac6c | |||
| > On Jun 4, 2015, at 9:53 AM, Joe Hildebrand wrote: | |||
| > | |||
| >> On 4 Jun 2015, at 9:37, Tony Hain wrote: | |||
| >> | |||
| >> My overall concern here is that statements like this undermine the integrity of the organization. I understand people wanting to improve overall privacy, but this step does not do that in any meaningful way. | |||
| > | |||
| > Encrypting the channel does provide some small amount of privacy for the *request*, which is not public information. Browser capabilities, cookies, etc. benefit from not being easily-correlated with other information. | |||
| That is message confidentiality, not privacy. Almost all of the privacy bits (as in, which | |||
| person is doing what and where) are revealed outside of the message. | |||
| > It would be interesting to define an HTTP header of "Padding" into which the client would put some random noise to pad the request to a well-known size, in order to make traffic analysis of the request slightly more difficult. This is the sort of thing that comes up when we talk about doing more encryption for the IETF's data, which shows the IESG's suggested approach to be completely rational. | |||
| Browsers don't send singular messages containing anonymous information. They send a complex | |||
| sequence of messages to multiple parties with an interaction pattern and communication state. | |||
| The more complex and encrypted the communication, the more uncommon state and direct | |||
| communication is required, which makes it easier to track a person across multiple requests | |||
| until the user's identity is revealed. Furthermore, with TLS in place, it becomes easy and | |||
| commonplace to send stored authentication credentials in those requests, without visibility, | |||
| and without the ability to easily reset those credentials (unlike in-the-clear cookies). | |||
| Padding has very little effect. It isn't just the message sizes that change -- it is all | |||
| of the behavior that changes, and all of the references to that behavior in subsequent | |||
| requests, and the effects of those changes on both the server and the client. | |||
| TLS does not provide privacy. What it does is disable anonymous access to ensure authority. | |||
| It changes access patterns away from decentralized caching to more centralized authority control. | |||
| That is the opposite of privacy. TLS is desirable for access to account-based services wherein | |||
| anonymity is not a concern (and usually not even allowed). TLS is NOT desirable for access to | |||
| public information, except in that it provides an ephemeral form of message integrity that is | |||
| a weak replacement for content integrity. | |||
| If the IETF wants to improve privacy, it should work on protocols that provide anonymous | |||
| access to signed artifacts (authentication of the content, not the connection) that is | |||
| independent of the user's access mechanism. | |||
| I have no objection to the IESG proposal to provide information *also* via https. It would | |||
| be better to provide content signatures and encourage mirroring, just to be a good example, | |||
| but I don't expect eggs to show up before chickens. However, I agree with Tony's assessment: | |||
| most of the text is nothing more than a pompous political statement, much like the sham of | |||
| "consensus" that was contrived at the Vancouver IETF. | |||
| TLS everywhere is great for large companies with a financial stake in Internet centralization. | |||
| It is even better for those providing identity services and TLS-outsourcing via CDNs. | |||
| It's a shame that the IETF has been abused in this way to promote a campaign that will | |||
| effectively end anonymous access, under the guise of promoting privacy. | |||
| ....Roy | |||
| </pre> | |||
+ 583
- 0
cache/058619b034b096224d8c0f21ff4eee75/index.html
View File
| @@ -0,0 +1,583 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>The next billion users : une immersion dans l’internet des pauvres (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://digital-society-forum.orange.com/fr/les-actus/1218-the-next-billion-users-une-immersion-dans-linternet-des-pauvres"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| The next billion users : une immersion dans l’internet des pauvres (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://digital-society-forum.orange.com/fr/les-actus/1218-the-next-billion-users-une-immersion-dans-linternet-des-pauvres">Source originale du contenu</a></h3> | |||
| <p><span class="chapo">A quoi ressemble l'Internet des pauvres ? Pas à l'image romantique forgée par la philanthropie occidentale, explique l'anthropologue Payal Arora. Pourtant, cette conception paternaliste de la pauvreté informe toujours nombre d'initiatives de développement par la technologie, qui s'apparentent à une nouvelle forme de solutionnisme.</span></p> | |||
| <p><i>The Next Billion Users, Digital Life Beyond the West</i>, de Payal Arora (<a href="https://twitter.com/3lmantra?lang=fr" class="externe" target="_blank">@3Lmantra <span class="flaticon-external1"/></a>), va vite devenir un « must-read » pour quiconque s’intéresse aux usages numériques dans le monde. L’anthropologue, professeure à l’université de Rotterdam, a étudié comment les populations asiatiques, africaines et sud-américaines les moins aisées s’approprient des technologies pensées ailleurs et pour d’autres qu'elles. Ce décentrement est doublement vertueux : d’un côté, il nous informe des détournements technologiques à l'œuvre, et des enjeux socio-politiques produits par les nouvelles technologies dans ces régions. De l’autre, il interroge en profondeur notre perception de la pauvreté, encore très moraliste. | |||
| <br/> | |||
| <br/></p> | |||
| <h2>Ce que nous croyons savoir des pauvres | |||
| <br/></h2> | |||
| <p>Le prochain milliard d’utilisateurs vit au Brésil, en Inde, sur le continent africain. Il est mobile, dispose de faibles revenus et nous demeure inconnu. Vus d’ici, ces pauvres bientôt connectés sont avides de savoir, globalement vertueux et désirent améliorer leur condition pour grimper un peu plus haut </p> | |||
| <p><a href="https://fr.wikipedia.org/wiki/Pyramide_des_besoins" class="externe" target="_blank">dans la pyramide de Maslow <span class="flaticon-external1"/></a><p>. Ils convoiteraient nos plaisirs bien occidentaux et seraient prêts à travailler dur pour les atteindre. C’est en tout cas l’image romantisée que l’on se fait d’eux. Lors de sa conférence </p><a href="https://www.youtube.com/watch?v=kiQa78tgbMk" class="externe" target="_blank">TedX en 2017 <span class="flaticon-external1"/></a><p>, Arora démontait déjà ce mythe : non, être pauvre n’empêche pas d’accéder à des catégories de pensée abstraites, ni de prendre du plaisir et encore moins d’exprimer des opinions sur des sujets d’ordre politique.</p> | |||
| </p> | |||
| <p>Quant à Maslow et sa hiérarchie des besoins, il est grand temps de l’enterrer définitivement. De même, pauvreté n’est pas synonyme de bonne moralité. Il n’existe pas plus de « bon pauvre » que de « bon nègre ». En début d’ouvrage, Payal Arora rapporte qu’un jeune Indien vivant dans un bidonville peut très bien décider de dépenser son argent durement gagné pour acheter du crédit mobile afin de pouvoir chatter avec une fille. Tout comme une famille rurale en Ethiopie peut vouloir dépenser une somme importante pour habiller son compte Facebook d’une photo prise par un professionnel. Au Paraguay, des enfants utilisent les ordinateurs confiés par le gouvernement pour regarder des films pornographiques. Au passage, ils suppriment leurs devoirs pour récupérer de l’espace disque et stocker leurs musiques préférées. | |||
| </p> | |||
| <p><span class="bold">Scoop : les pauvres sont, en fait, comme tout le monde. </span><p>Ils fonctionnent au plaisir, cherchent à établir des relations sociales, aiment jouer aux jeux vidéos. En matière numérique pourtant, agences et gouvernement n’ont eu de cesse de tout miser sur des outils en partant du principe que les « bonnes pratiques » (se former, rechercher un emploi) allaient suivre naturellement. Cette croyance hante encore l’Occident : la pauvreté serait une question de déficit d’information. Par conséquent, libérer son accès devrait suffire à endiguer le phénomène. La technologie serait quant à elle le chemin vers la mobilité sociale, et donc la pierre angulaire des politiques publiques de réduction de la pauvreté. Le progrès enfin : une irrésistible ascension vers le mode de vie occidental justifiant à elle seule l’utilisation des technologies à des fins uniquement productives. </p><span class="bold">Rien n’y fait : équipés d’Internet, les pauvres ne font pas du tout ce qu’on attend d’eux, à savoir se sortir de la pauvreté. </span><p>Les cabines numériques disposées dans les villages indiens deviennent des bornes d’arcade et, surprise, les cent millions d’ordinateurs de l’opération </p><a href="https://www.theverge.com/2018/4/16/17233946/olpcs-100-laptop-education-where-is-it-now" class="externe" target="_blank">« One laptop per child » <span class="flaticon-external1"/></a><p> (financée par des entreprises, notamment AMD, Brightstar Corporation, eBay, Google, Marvell, etc.) n’ont pas réduit le fossé éducatif, sans doute parce qu’ils avaient été distribués à des enfants ne sachant parfois ni lire ni écrire. Des absurdités de ce type, l’autrice en dresse une longue liste, comme ces smartphones que l’on distribue à de jeunes femmes n’ayant le droit de s’en servir que pour passer des appels d’urgence. A New Delhi, d’autres jeunes femmes (les « computer girls ») deviennent des craques de l’informatique, mais restent assignées à leur statut traditionnel, système de castes oblige. Le constat est sans ambiguïté : </p><span class="bold">non seulement la technologie tombe du ciel sans être intégrée dans une quelconque stratégie sociale, mais toute tentative de réappropriation est méprisée et découragée.</span></p> | |||
| <h2>Des pratiques déviantes à l’esbroufe de l’innovation frugale | |||
| <br/></h2> | |||
| <p>L’exemple des cybercafés, censés garantir l’accès à l’information et aux progrès sociaux qui s’ensuivrait, est parlant. Payal Arora raconte ainsi s’être rendue au Brésil où les </p> | |||
| <p><a href="http://publius.cc/lan_houses_new_wave_digital_inclusion_brazil/091509" class="externe" target="_blank">« Lan Houses » <span class="flaticon-external1"/></a><p>, des salles de réseau informelles, ont permis un accès bon marché à internet. Jusqu’à 60% de la population pouvait s’y rendre, on parlait alors de « Lan House Revolution ». Ce ne fut malheureusement pas le genre de révolution que le gouvernement avait en tête. Dans certains de ces cybercafés, on mis au jour quelques trafics de films pédopornographiques, ce qui occasionna la fermeture ou la mise en conformité de l’ensemble de ces établissements. Conséquence, les prix montèrent, ce qui empêcha de fait la plupart des personnes à faibles revenus de s’y rendre. A contrario, le gouvernement fait la chasse aux vendeurs de DVD à la sauvette, dont les prix permettaient pourtant un accès à la culture autrement prohibitif… Histoire similaire en Chine, où l’on craignait que les cybercafés populaires ne favorisent les activités anti-régime. Ils furent rapidement interdits aux mineurs et on y généralisa le tracking, une pratique désormais monnaie courante dans l’Empire du Milieu. D’exemple en exemple, Payal Arora démontre que les décisions prises par les pouvoirs en place n’ont eu de cesse de réduire l’accès à Internet et à la culture aux personnes les moins dotées, sous prétexte que l’usage qui en serait fait n’entrerait pas dans les bons standards de moralité. Comme souvent, les pauvres font l’objet de politiques paternalistes : on leur demande d’être vertueux et le moindre faux pas les condamne.</p> | |||
| <p></p><p>A l’inverse, la débrouille des quartiers défavorisés est érigée en exemple à suivre. La mode de l’innovation frugale (ou </p><a href="https://www.lemonde.fr/economie/article/2013/04/15/l-innovation-jugaad-redevenons-ingenieux-editions-diateino_3159891_3234.html" class="externe" target="_blank">« Jugaad innovation » <span class="flaticon-external1"/></a><p>) qui consiste à innover avec des ressources limitées, en témoigne. En Inde par exemple, la customisation des véhicules afin de transporter plus de passagers est souvent mise en avant. Cependant, elle augmente sensiblement le nombre d’accidents : « la frugalité a un coût, celui de la sécurité », écrit Arora. Les </p><a href="https://fr.wikipedia.org/wiki/Tata_Nano" class="externe" target="_blank">Nano cars <span class="flaticon-external1"/></a><p> de Tata – des petites voitures accessibles au plus grand nombre – quant à elles, sont certes pratiques mais occasionnent de lourds dégâts environnementaux : rien ne dit aujourd’hui que ces innovations améliorent réellement la vie des pauvres, affirme la chercheuse. Plus grave encore, il y a fort à parier qu’elles freinent les solutions de plus long terme comme par exemple le développement de transports publics accessibles à tous. Côté mobile, une application comme </p><a href="https://ieeexplore.ieee.org/document/8239306" class="externe" target="_blank">AquaSift <span class="flaticon-external1"/></a><p> permet de détecter la toxicité de l’eau mais ne résout en rien le fait que dans beaucoup de communautés pauvres, y accéder reste difficile. On ne change pas le gouvernement avec une application. </p><span class="bold">Si l’innovation frugale rencontre un succès fulgurant en Occident, ce n’est que parce que nous en avons totalement romantisé l’image.</span><p> La réalité est toute autre, « le Jugaad est un euphémisme qui exprime le quotidien de ceux qui essaient de s’en sortir », écrit la chercheuse. Certes, la débrouille a ses quelques vertus : on répare plus facilement un iPhone en Inde qu’en France, le « do-it-yourself » y est plutôt la règle. Mais c’est plus une nécessité qu’un choix, et surtout pas un absolu. </p><span class="bold">En somme, la frugalité (Jugaad en Inde, « Shan-zaï » en Chine, « Gambiarra », « Bacalhau » ou « Jeitinho » au Brésil) est aussi une forme de solutionnisme technologique qui repose, une fois encore, sur la confortable conviction que les pauvres ont toutes les ressources en eux pour s’en sortir, pourvu qu’ils articulent habilement leurs problèmes aux dernières technologies disponibles.</span></p> | |||
| <h2>Les pauvres sont les rats de laboratoire de la « tech » | |||
| <br/></h2> | |||
| <p>La pensée solutionniste ne se limite pas au transport ou aux réparations frugales. Elle a aussi déferlé sur le monde de l’éducation. Arora rapporte l’histoire du très charismatique Sugata Mitra, qui lors de sa </p> | |||
| <p><a href="https://www.ted.com/talks/sugata_mitra_build_a_school_in_the_cloud?language=fr" class="externe" target="_blank">conférence TedX en 2013 <span class="flaticon-external1"/></a><p>, vantait l’efficacité de son « computer in the wall », un dispositif permettant, selon lui, aux enfants défavorisés des milieux ruraux de se scolariser en toute autonomie grâce à un simple ordinateur en accès libre.</p> | |||
| </p> | |||
| <p>En guise de preuve, il raconte comment des enfants ont pu se familiariser en quelques mois seulement avec des notions complexes, notamment en sciences du vivant. Le gourou, </p> | |||
| <p><a href="https://www.zdnet.com/article/how-semi-literate-children-in-a-remote-indian-village-taught-themselves-molecular-biology/" class="externe" target="_blank">désigné par Zdnet <span class="flaticon-external1"/></a><p> comme un « prophète d’un changement radical des modes d’éducation », appelle à rien de moins qu’au remplacement progressif des professeurs par ces machines révolutionnaires. Le modèle nécessiterait l’accompagnement des enfants par des mamies bienveillantes, principalement depuis les pays riches. Payal Arora n’a pas de mots assez durs pour dénoncer la vaste supercherie du système. Non seulement aucune relation de causalité n’a prouvé son efficacité, mais en plus, il structure l’éducation dans un sens qui pose une multitude de questions d’ordre éthiques et politiques. Ainsi, ces appareils et les programmes soi-disant éducatifs avec lesquels ils fonctionnent restent des boîtes noires, indisponibles à tout audit sérieux. L’expérimentation, qui dure 75 jours, nécessite la présence d’un ou plusieurs adultes dont on ne connaît pas la rémunération et le protocole de suivi des enfants est tout sauf rigoureux scientifiquement. Des études plus sérieuses ont rapporté que la plupart des machines ne fonctionnaient pas, faute de connexion Internet. Et quand elles marchaient, elles étaient souvent monopolisés par de jeunes garçons devant des jeux vidéos. Enfin, les contenus pédagogiques, souvent en anglais, présentent un danger pour la pérennité des langues traditionnelles. Pour le professeur Mark Warschauer (University of California), cité par Arora, ces dispositifs sont un échec total. Pourtant, Mitra a bien récolté un million d’euros grâce au Ted Prize pour cette « école dans le cloud » résolument inefficace… Pour Arora, cette triste histoire trouve ses racines dans la foi encore trop peu contestée dans le </p><a href="https://fr.wikipedia.org/wiki/Constructivisme_(psychologie)" class="externe" target="_blank">constructivisme <span class="flaticon-external1"/></a><p>, une théorie qui stipule que l’enfant peut apprendre seul et sans professeur.</p> | |||
| <p></p><p>En prenant un peu de hauteur, la chercheuse critique plus largement une certaine forme de philanthropie très à la mode dans les milieux technologiques. Elle l’accuse ouvertement d’être contre-productive et de servir les intérêts de grandes corporations plus que des populations pauvres : </p><span class="bold">« la technologie est devenue une institution en soi, la pauvreté une opportunité. La croyance néolibérale en l’efficacité absolue du marché transforme n’importe quelle inégalité en actif pour l’innovation. »</span><p> Pour Arora, cette idéologie vient justifier la nécessité de tester sur les moins aisés de nouvelles solutions qu’un riche Occidental n’imaginerait même pas pour ses propres enfants. Les pauvres n’ont pas besoin de plus d’innovation, mais de moins d’innovation, affirme-telle : « Si l’innovation est une courroie de transmission pour des projets pilote, alors les pauvres seront mieux sans. Ils ne devraient pas servir de rats de laboratoires pour les nouvelles technologies. Le simple fait qu’une technologie est nouvelle ne devrait pas justifier en soi qu’on l’expérimente sur des pauvres ». Sa dénonciation englobe aussi le projet « AltSchool » largement financé par Mark Zuckerberg et Priscilla Chan, une sorte de « classe Ikea », où les enfants terminent seuls devant des écrans, pour un prix conséquent et sans que son efficacité réelle soit démontrée. Le plus grand problème selon elle, reste que le marché pardonne plus facilement les défaillances technologiques qu’humaines : la Silicon Valley peut réinjecter des millions de dollars pour trouver une nouvelle solution technique à un problème ancien, mais elle refuse de réfléchir aux problèmes de fond, comme le manque de professeurs ou l’état désastreux des écoles dans certains quartiers.</p> | |||
| <p></p><h2>Des confidentialités diverses</p> | |||
| <p><br/></h2></p> | |||
| <p>En dernière partie d’ouvrage, Payal Arora attaque les questions liant surveillance et vie privée. On le savait déjà, les pauvres en ont toujours été surveillés. Le « social credit system » chinois et son cousin indien « Unique Digital Number » (UID) sont ainsi connus pour conforter les hiérarchies sociales en place et agir par contagion : en Chine, fréquenter une personne dont le score est bas revient à prendre le risque de voir baisser son propre score. On en déduirait un peu rapidement que dans les pays pauvres, et plus généralement en dehors de l’Occident, la vie privée aurait moins de valeur aux yeux des individus. A y regarder de près, cela semble un peu plus compliqué. En interrogeant plus largement les usages quotidiens des réseaux sociaux dans les favelas et autres bidonvilles, Arora montre qu’ici comme là-bas, la vie privée n’est pas sans valeur ni abstraite, mais un concept avant tout lié à des particularités culturelles. Au Brésil par exemple, une jeune femme déclare ne pas en vouloir à sa mère de la « stalker » en ligne (c’est-à-dire à suivre ces déplacements, fouiller ses messages et autres réseaux d’amis). Un phénomène qui tient aussi au jeune âge des mères, qui continuent leur jeunesse alors que leurs enfants sont grands. En Inde, Facebook est pour de nombreux jeunes l’occasion de parler au sexe opposé, chose difficile dans la vie réelle. Le Chat est à ce titre tout à fait adapté à la romance, à travers des poèmes et autres conversations romantiques. Cependant, à l’échelle mondiale, un tiers de ces échanges se font anonymement, avant tout pour protéger les données personnelles et par souci de réputation, notamment en Asie. | |||
| </p> | |||
| <p>Arora en profite pour démonter les profonds préjugés qui tendent nous à faire croire que parce que l’on est pauvre, parce que l’on vit dans une communauté étroitement liée, parfois à plusieurs dans une même pièce, on ne valoriserait pas la vie privée. En réalité, les pauvres, dans les pays étudiés par Arora, ne sont pas moins attachés à la confidentialité que les Occidentaux, même si celle-ci prend différentes significations en fonction des pays, des cultures et des genres. Dans un village en Jordanie, la confidentialité sert avant tout à protéger la vertu féminine et l’honneur masculin (préserver son image dans la communauté, ne pas s’exposer publiquement pour les femmes). Dans une famille aisée du Royaume-Uni, elle préserve l’innocence des jeunes (notamment à travers le filtrage des contenus). Plus encore qu’en Occident, préserver sa confidentialité dans les pays pauvres relève de la lutte car le succès immense des réseaux amène aussi son lot de danger : « revenge porn » et harcèlement peuvent ruiner la réputation d’un individu, conduire à l’exil et même au suicide. Facebook par exemple, n’est pas techniquement un espace genré, mais sa simple utilisation peut aller à l’encontre de valeurs traditionnelles qui interdisent aux femmes de s’exposer dans l’espace public. Le réseau social est à ce titre un outil réellement ambivalent, ayant permis à des populations à bas-revenus de se dégager des normes sociales qui les contraignaient, tout en représentant aujourd’hui un certain nombre de risques réels. Pour Arora, </p> | |||
| <p><span class="bold">il n’y a pas de meilleures façons de les décrire que de se plonger dans la richesse de leurs usages quotidiens qui ressemblent à s’y méprendre aux nôtres. </span></p> | |||
| <p><i>The Next Billion Users, Digital Life Beyond the West </i><p>est, en résumé, une étude inestimable, formidablement documentée et regorgeant d’illustrations plus pertinentes les unes que els autres. Loin des théories globalisantes qui tendent à mettre dans un même sac « Les Chinois », « Les Indiens », quitte à les opposer à l’Occident dans une lutte pour la puissance technologique, cette enquête de terrain vient au contraire contredire nos préjugés sur ce monde que nous jugeons bien souvent à l’emporte-pièce et sans nous embarrasser de détails. A travers son étude et notamment ses entretiens et anecdotes, </p><span class="bold">la chercheuse met en lumière les relents colonialistes qui ponctuent les relations Nord-Sud, notamment en matière numérique. </span><p>Arora brise notre propension à romantiser la pauvreté, à ne l’envisager qu’à travers nos lunettes postcoloniales, comme une tribu de bons sauvages qu’il faudrait éduquer à notre mode de vie. Enfin, elle réduit en poussière le fantasme du pauvre débrouillard, entrepreneur par nature, auto-organisé et vertueux. Cette vision, biaisée, n’a pour objet que d’asseoir les projets technocratiques de l’Occident, qui ne regarde que ses intérêts propres et surtout pas ceux des populations « à civiliser ». | |||
| </p></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://digital-society-forum.orange.com/fr/les-actus/1218-the-next-billion-users-une-immersion-dans-linternet-des-pauvres">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 74
- 0
cache/058619b034b096224d8c0f21ff4eee75/index.md
View File
| @@ -0,0 +1,74 @@ | |||
| title: The next billion users : une immersion dans l’internet des pauvres | |||
| url: https://digital-society-forum.orange.com/fr/les-actus/1218-the-next-billion-users-une-immersion-dans-linternet-des-pauvres | |||
| hash_url: 058619b034b096224d8c0f21ff4eee75 | |||
| <span class="chapo">A quoi ressemble l'Internet des pauvres ? Pas à l'image romantique forgée par la philanthropie occidentale, explique l'anthropologue Payal Arora. Pourtant, cette conception paternaliste de la pauvreté informe toujours nombre d'initiatives de développement par la technologie, qui s'apparentent à une nouvelle forme de solutionnisme.</span> | |||
| <p><i>The Next Billion Users, Digital Life Beyond the West</i>, de Payal Arora (<a href="https://twitter.com/3lmantra?lang=fr" class="externe" target="_blank">@3Lmantra <span class="flaticon-external1"/></a>), va vite devenir un « must-read » pour quiconque s’intéresse aux usages numériques dans le monde. L’anthropologue, professeure à l’université de Rotterdam, a étudié comment les populations asiatiques, africaines et sud-américaines les moins aisées s’approprient des technologies pensées ailleurs et pour d’autres qu'elles. Ce décentrement est doublement vertueux : d’un côté, il nous informe des détournements technologiques à l'œuvre, et des enjeux socio-politiques produits par les nouvelles technologies dans ces régions. De l’autre, il interroge en profondeur notre perception de la pauvreté, encore très moraliste. | |||
| <br/> | |||
| <br/></p><h2>Ce que nous croyons savoir des pauvres | |||
| <br/></h2> | |||
| <p>Le prochain milliard d’utilisateurs vit au Brésil, en Inde, sur le continent africain. Il est mobile, dispose de faibles revenus et nous demeure inconnu. Vus d’ici, ces pauvres bientôt connectés sont avides de savoir, globalement vertueux et désirent améliorer leur condition pour grimper un peu plus haut </p><a href="https://fr.wikipedia.org/wiki/Pyramide_des_besoins" class="externe" target="_blank">dans la pyramide de Maslow <span class="flaticon-external1"/></a><p>. Ils convoiteraient nos plaisirs bien occidentaux et seraient prêts à travailler dur pour les atteindre. C’est en tout cas l’image romantisée que l’on se fait d’eux. Lors de sa conférence </p><a href="https://www.youtube.com/watch?v=kiQa78tgbMk" class="externe" target="_blank">TedX en 2017 <span class="flaticon-external1"/></a><p>, Arora démontait déjà ce mythe : non, être pauvre n’empêche pas d’accéder à des catégories de pensée abstraites, ni de prendre du plaisir et encore moins d’exprimer des opinions sur des sujets d’ordre politique. | |||
| </p> | |||
| <p>Quant à Maslow et sa hiérarchie des besoins, il est grand temps de l’enterrer définitivement. De même, pauvreté n’est pas synonyme de bonne moralité. Il n’existe pas plus de « bon pauvre » que de « bon nègre ». En début d’ouvrage, Payal Arora rapporte qu’un jeune Indien vivant dans un bidonville peut très bien décider de dépenser son argent durement gagné pour acheter du crédit mobile afin de pouvoir chatter avec une fille. Tout comme une famille rurale en Ethiopie peut vouloir dépenser une somme importante pour habiller son compte Facebook d’une photo prise par un professionnel. Au Paraguay, des enfants utilisent les ordinateurs confiés par le gouvernement pour regarder des films pornographiques. Au passage, ils suppriment leurs devoirs pour récupérer de l’espace disque et stocker leurs musiques préférées. | |||
| </p><span class="bold">Scoop : les pauvres sont, en fait, comme tout le monde. </span><p>Ils fonctionnent au plaisir, cherchent à établir des relations sociales, aiment jouer aux jeux vidéos. En matière numérique pourtant, agences et gouvernement n’ont eu de cesse de tout miser sur des outils en partant du principe que les « bonnes pratiques » (se former, rechercher un emploi) allaient suivre naturellement. Cette croyance hante encore l’Occident : la pauvreté serait une question de déficit d’information. Par conséquent, libérer son accès devrait suffire à endiguer le phénomène. La technologie serait quant à elle le chemin vers la mobilité sociale, et donc la pierre angulaire des politiques publiques de réduction de la pauvreté. Le progrès enfin : une irrésistible ascension vers le mode de vie occidental justifiant à elle seule l’utilisation des technologies à des fins uniquement productives. </p><span class="bold">Rien n’y fait : équipés d’Internet, les pauvres ne font pas du tout ce qu’on attend d’eux, à savoir se sortir de la pauvreté. </span><p>Les cabines numériques disposées dans les villages indiens deviennent des bornes d’arcade et, surprise, les cent millions d’ordinateurs de l’opération </p><a href="https://www.theverge.com/2018/4/16/17233946/olpcs-100-laptop-education-where-is-it-now" class="externe" target="_blank">« One laptop per child » <span class="flaticon-external1"/></a><p> (financée par des entreprises, notamment AMD, Brightstar Corporation, eBay, Google, Marvell, etc.) n’ont pas réduit le fossé éducatif, sans doute parce qu’ils avaient été distribués à des enfants ne sachant parfois ni lire ni écrire. Des absurdités de ce type, l’autrice en dresse une longue liste, comme ces smartphones que l’on distribue à de jeunes femmes n’ayant le droit de s’en servir que pour passer des appels d’urgence. A New Delhi, d’autres jeunes femmes (les « computer girls ») deviennent des craques de l’informatique, mais restent assignées à leur statut traditionnel, système de castes oblige. Le constat est sans ambiguïté : </p><span class="bold">non seulement la technologie tombe du ciel sans être intégrée dans une quelconque stratégie sociale, mais toute tentative de réappropriation est méprisée et découragée.</span> | |||
| <h2>Des pratiques déviantes à l’esbroufe de l’innovation frugale | |||
| <br/></h2> | |||
| <p>L’exemple des cybercafés, censés garantir l’accès à l’information et aux progrès sociaux qui s’ensuivrait, est parlant. Payal Arora raconte ainsi s’être rendue au Brésil où les </p><a href="http://publius.cc/lan_houses_new_wave_digital_inclusion_brazil/091509" class="externe" target="_blank">« Lan Houses » <span class="flaticon-external1"/></a><p>, des salles de réseau informelles, ont permis un accès bon marché à internet. Jusqu’à 60% de la population pouvait s’y rendre, on parlait alors de « Lan House Revolution ». Ce ne fut malheureusement pas le genre de révolution que le gouvernement avait en tête. Dans certains de ces cybercafés, on mis au jour quelques trafics de films pédopornographiques, ce qui occasionna la fermeture ou la mise en conformité de l’ensemble de ces établissements. Conséquence, les prix montèrent, ce qui empêcha de fait la plupart des personnes à faibles revenus de s’y rendre. A contrario, le gouvernement fait la chasse aux vendeurs de DVD à la sauvette, dont les prix permettaient pourtant un accès à la culture autrement prohibitif… Histoire similaire en Chine, où l’on craignait que les cybercafés populaires ne favorisent les activités anti-régime. Ils furent rapidement interdits aux mineurs et on y généralisa le tracking, une pratique désormais monnaie courante dans l’Empire du Milieu. D’exemple en exemple, Payal Arora démontre que les décisions prises par les pouvoirs en place n’ont eu de cesse de réduire l’accès à Internet et à la culture aux personnes les moins dotées, sous prétexte que l’usage qui en serait fait n’entrerait pas dans les bons standards de moralité. Comme souvent, les pauvres font l’objet de politiques paternalistes : on leur demande d’être vertueux et le moindre faux pas les condamne. | |||
| </p><p>A l’inverse, la débrouille des quartiers défavorisés est érigée en exemple à suivre. La mode de l’innovation frugale (ou </p><a href="https://www.lemonde.fr/economie/article/2013/04/15/l-innovation-jugaad-redevenons-ingenieux-editions-diateino_3159891_3234.html" class="externe" target="_blank">« Jugaad innovation » <span class="flaticon-external1"/></a><p>) qui consiste à innover avec des ressources limitées, en témoigne. En Inde par exemple, la customisation des véhicules afin de transporter plus de passagers est souvent mise en avant. Cependant, elle augmente sensiblement le nombre d’accidents : « la frugalité a un coût, celui de la sécurité », écrit Arora. Les </p><a href="https://fr.wikipedia.org/wiki/Tata_Nano" class="externe" target="_blank">Nano cars <span class="flaticon-external1"/></a><p> de Tata – des petites voitures accessibles au plus grand nombre – quant à elles, sont certes pratiques mais occasionnent de lourds dégâts environnementaux : rien ne dit aujourd’hui que ces innovations améliorent réellement la vie des pauvres, affirme la chercheuse. Plus grave encore, il y a fort à parier qu’elles freinent les solutions de plus long terme comme par exemple le développement de transports publics accessibles à tous. Côté mobile, une application comme </p><a href="https://ieeexplore.ieee.org/document/8239306" class="externe" target="_blank">AquaSift <span class="flaticon-external1"/></a><p> permet de détecter la toxicité de l’eau mais ne résout en rien le fait que dans beaucoup de communautés pauvres, y accéder reste difficile. On ne change pas le gouvernement avec une application. </p><span class="bold">Si l’innovation frugale rencontre un succès fulgurant en Occident, ce n’est que parce que nous en avons totalement romantisé l’image.</span><p> La réalité est toute autre, « le Jugaad est un euphémisme qui exprime le quotidien de ceux qui essaient de s’en sortir », écrit la chercheuse. Certes, la débrouille a ses quelques vertus : on répare plus facilement un iPhone en Inde qu’en France, le « do-it-yourself » y est plutôt la règle. Mais c’est plus une nécessité qu’un choix, et surtout pas un absolu. </p><span class="bold">En somme, la frugalité (Jugaad en Inde, « Shan-zaï » en Chine, « Gambiarra », « Bacalhau » ou « Jeitinho » au Brésil) est aussi une forme de solutionnisme technologique qui repose, une fois encore, sur la confortable conviction que les pauvres ont toutes les ressources en eux pour s’en sortir, pourvu qu’ils articulent habilement leurs problèmes aux dernières technologies disponibles.</span> | |||
| <h2>Les pauvres sont les rats de laboratoire de la « tech » | |||
| <br/></h2> | |||
| <p>La pensée solutionniste ne se limite pas au transport ou aux réparations frugales. Elle a aussi déferlé sur le monde de l’éducation. Arora rapporte l’histoire du très charismatique Sugata Mitra, qui lors de sa </p><a href="https://www.ted.com/talks/sugata_mitra_build_a_school_in_the_cloud?language=fr" class="externe" target="_blank">conférence TedX en 2013 <span class="flaticon-external1"/></a><p>, vantait l’efficacité de son « computer in the wall », un dispositif permettant, selon lui, aux enfants défavorisés des milieux ruraux de se scolariser en toute autonomie grâce à un simple ordinateur en accès libre. | |||
| </p> | |||
| <p>En guise de preuve, il raconte comment des enfants ont pu se familiariser en quelques mois seulement avec des notions complexes, notamment en sciences du vivant. Le gourou, </p><a href="https://www.zdnet.com/article/how-semi-literate-children-in-a-remote-indian-village-taught-themselves-molecular-biology/" class="externe" target="_blank">désigné par Zdnet <span class="flaticon-external1"/></a><p> comme un « prophète d’un changement radical des modes d’éducation », appelle à rien de moins qu’au remplacement progressif des professeurs par ces machines révolutionnaires. Le modèle nécessiterait l’accompagnement des enfants par des mamies bienveillantes, principalement depuis les pays riches. Payal Arora n’a pas de mots assez durs pour dénoncer la vaste supercherie du système. Non seulement aucune relation de causalité n’a prouvé son efficacité, mais en plus, il structure l’éducation dans un sens qui pose une multitude de questions d’ordre éthiques et politiques. Ainsi, ces appareils et les programmes soi-disant éducatifs avec lesquels ils fonctionnent restent des boîtes noires, indisponibles à tout audit sérieux. L’expérimentation, qui dure 75 jours, nécessite la présence d’un ou plusieurs adultes dont on ne connaît pas la rémunération et le protocole de suivi des enfants est tout sauf rigoureux scientifiquement. Des études plus sérieuses ont rapporté que la plupart des machines ne fonctionnaient pas, faute de connexion Internet. Et quand elles marchaient, elles étaient souvent monopolisés par de jeunes garçons devant des jeux vidéos. Enfin, les contenus pédagogiques, souvent en anglais, présentent un danger pour la pérennité des langues traditionnelles. Pour le professeur Mark Warschauer (University of California), cité par Arora, ces dispositifs sont un échec total. Pourtant, Mitra a bien récolté un million d’euros grâce au Ted Prize pour cette « école dans le cloud » résolument inefficace… Pour Arora, cette triste histoire trouve ses racines dans la foi encore trop peu contestée dans le </p><a href="https://fr.wikipedia.org/wiki/Constructivisme_(psychologie)" class="externe" target="_blank">constructivisme <span class="flaticon-external1"/></a><p>, une théorie qui stipule que l’enfant peut apprendre seul et sans professeur. | |||
| </p><p>En prenant un peu de hauteur, la chercheuse critique plus largement une certaine forme de philanthropie très à la mode dans les milieux technologiques. Elle l’accuse ouvertement d’être contre-productive et de servir les intérêts de grandes corporations plus que des populations pauvres : </p><span class="bold">« la technologie est devenue une institution en soi, la pauvreté une opportunité. La croyance néolibérale en l’efficacité absolue du marché transforme n’importe quelle inégalité en actif pour l’innovation. »</span><p> Pour Arora, cette idéologie vient justifier la nécessité de tester sur les moins aisés de nouvelles solutions qu’un riche Occidental n’imaginerait même pas pour ses propres enfants. Les pauvres n’ont pas besoin de plus d’innovation, mais de moins d’innovation, affirme-telle : « Si l’innovation est une courroie de transmission pour des projets pilote, alors les pauvres seront mieux sans. Ils ne devraient pas servir de rats de laboratoires pour les nouvelles technologies. Le simple fait qu’une technologie est nouvelle ne devrait pas justifier en soi qu’on l’expérimente sur des pauvres ». Sa dénonciation englobe aussi le projet « AltSchool » largement financé par Mark Zuckerberg et Priscilla Chan, une sorte de « classe Ikea », où les enfants terminent seuls devant des écrans, pour un prix conséquent et sans que son efficacité réelle soit démontrée. Le plus grand problème selon elle, reste que le marché pardonne plus facilement les défaillances technologiques qu’humaines : la Silicon Valley peut réinjecter des millions de dollars pour trouver une nouvelle solution technique à un problème ancien, mais elle refuse de réfléchir aux problèmes de fond, comme le manque de professeurs ou l’état désastreux des écoles dans certains quartiers. | |||
| </p><h2>Des confidentialités diverses | |||
| <br/></h2> | |||
| <p>En dernière partie d’ouvrage, Payal Arora attaque les questions liant surveillance et vie privée. On le savait déjà, les pauvres en ont toujours été surveillés. Le « social credit system » chinois et son cousin indien « Unique Digital Number » (UID) sont ainsi connus pour conforter les hiérarchies sociales en place et agir par contagion : en Chine, fréquenter une personne dont le score est bas revient à prendre le risque de voir baisser son propre score. On en déduirait un peu rapidement que dans les pays pauvres, et plus généralement en dehors de l’Occident, la vie privée aurait moins de valeur aux yeux des individus. A y regarder de près, cela semble un peu plus compliqué. En interrogeant plus largement les usages quotidiens des réseaux sociaux dans les favelas et autres bidonvilles, Arora montre qu’ici comme là-bas, la vie privée n’est pas sans valeur ni abstraite, mais un concept avant tout lié à des particularités culturelles. Au Brésil par exemple, une jeune femme déclare ne pas en vouloir à sa mère de la « stalker » en ligne (c’est-à-dire à suivre ces déplacements, fouiller ses messages et autres réseaux d’amis). Un phénomène qui tient aussi au jeune âge des mères, qui continuent leur jeunesse alors que leurs enfants sont grands. En Inde, Facebook est pour de nombreux jeunes l’occasion de parler au sexe opposé, chose difficile dans la vie réelle. Le Chat est à ce titre tout à fait adapté à la romance, à travers des poèmes et autres conversations romantiques. Cependant, à l’échelle mondiale, un tiers de ces échanges se font anonymement, avant tout pour protéger les données personnelles et par souci de réputation, notamment en Asie. | |||
| </p><p>Arora en profite pour démonter les profonds préjugés qui tendent nous à faire croire que parce que l’on est pauvre, parce que l’on vit dans une communauté étroitement liée, parfois à plusieurs dans une même pièce, on ne valoriserait pas la vie privée. En réalité, les pauvres, dans les pays étudiés par Arora, ne sont pas moins attachés à la confidentialité que les Occidentaux, même si celle-ci prend différentes significations en fonction des pays, des cultures et des genres. Dans un village en Jordanie, la confidentialité sert avant tout à protéger la vertu féminine et l’honneur masculin (préserver son image dans la communauté, ne pas s’exposer publiquement pour les femmes). Dans une famille aisée du Royaume-Uni, elle préserve l’innocence des jeunes (notamment à travers le filtrage des contenus). Plus encore qu’en Occident, préserver sa confidentialité dans les pays pauvres relève de la lutte car le succès immense des réseaux amène aussi son lot de danger : « revenge porn » et harcèlement peuvent ruiner la réputation d’un individu, conduire à l’exil et même au suicide. Facebook par exemple, n’est pas techniquement un espace genré, mais sa simple utilisation peut aller à l’encontre de valeurs traditionnelles qui interdisent aux femmes de s’exposer dans l’espace public. Le réseau social est à ce titre un outil réellement ambivalent, ayant permis à des populations à bas-revenus de se dégager des normes sociales qui les contraignaient, tout en représentant aujourd’hui un certain nombre de risques réels. Pour Arora, </p><span class="bold">il n’y a pas de meilleures façons de les décrire que de se plonger dans la richesse de leurs usages quotidiens qui ressemblent à s’y méprendre aux nôtres. </span> | |||
| <i>The Next Billion Users, Digital Life Beyond the West </i><p>est, en résumé, une étude inestimable, formidablement documentée et regorgeant d’illustrations plus pertinentes les unes que els autres. Loin des théories globalisantes qui tendent à mettre dans un même sac « Les Chinois », « Les Indiens », quitte à les opposer à l’Occident dans une lutte pour la puissance technologique, cette enquête de terrain vient au contraire contredire nos préjugés sur ce monde que nous jugeons bien souvent à l’emporte-pièce et sans nous embarrasser de détails. A travers son étude et notamment ses entretiens et anecdotes, </p><span class="bold">la chercheuse met en lumière les relents colonialistes qui ponctuent les relations Nord-Sud, notamment en matière numérique. </span><p>Arora brise notre propension à romantiser la pauvreté, à ne l’envisager qu’à travers nos lunettes postcoloniales, comme une tribu de bons sauvages qu’il faudrait éduquer à notre mode de vie. Enfin, elle réduit en poussière le fantasme du pauvre débrouillard, entrepreneur par nature, auto-organisé et vertueux. Cette vision, biaisée, n’a pour objet que d’asseoir les projets technocratiques de l’Occident, qui ne regarde que ses intérêts propres et surtout pas ceux des populations « à civiliser ». | |||
| </p> | |||
+ 565
- 0
cache/05f3e49cab61896e937db4730ec21787/index.html
View File
| @@ -0,0 +1,565 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>GitHub Knows (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://blog.humphd.org/github-knows/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| GitHub Knows (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://blog.humphd.org/github-knows/">Source originale du contenu</a></h3> | |||
| <p>I was <a href="https://twitter.com/humphd/status/951184397893586944">reflecting the other day</a> how useful it would be if GitHub, in addition to the lists it has now like <a href="https://github.com/trending">Trending</a> and <a href="https://github.com/explore">Explore</a>, could also provide me a better view into which projects a) need help; and more, b) can accept that help when it arrives. Lots of people responded, and I don't think I'm alone in wanting better ways to find things in GitHub.</p> | |||
| <p>Lots of GitHub users might not care about this, since you work on what you work on already, and finding even <em>more</em> work to do is the last thing on your mind. For me, my interest stems from the fact that I constantly need to find good projects, bugs, and communities for undergrads wanting to learn how to do open source, since this is what I teach. Doing it well is an unsolved problem, since what works for one set of students automatically disqualifies the next set: you can't repeat your success, since closed bugs (hopefully!) don't re-open.</p> | |||
| <p>And because I write about this stuff, I hear from lots of students that I don't teach, students from all over the world who, like my own, are struggling to find a way in, a foothold, a path to get started. It's a hard problem, made harder by the size of the group we're discussing. <a href="https://octoverse.github.com/">GitHub's published numbers from 2017</a> indicate that there are over <strong>500K students</strong> using its services, and those are just the ones who have self-identified as such--I'm sure it's much higher.</p> | |||
| <p>The usual response I get from people is to use existing queries for labels with some variation of <em>"good first bug"</em>. This can work, especially if you get in quickly when a project, or group of projects, does a triage through their issues. For example, this fall I was able to leverage the <a href="https://hacktoberfest.digitalocean.com/">Hacktoberfest</a> efforts, since many projects took the time to go and label bugs they felt were a good fit for new people (side note: students love this, and I had quite a few get shirts and a sense that they'd become part of the community).</p> | |||
| <p>But static labeling of issues doesn't work over time. For example, I could show you thousands of "good first bugs" sitting patiently in projects that have long ago stopped being relevant, developed, or cared about by the developers. It's like finding a "Sale!" sign on goods in an abandoned store, and more of a historical curiosity than a signal to customers. Unless these labels auto-expire, or are mercilessly triaged by the dev team, <a href="http://blog.humphd.org/why-good-first-bugs-often-arent/">I don't think they solve the problem</a>.</p> | |||
| <p>So what could we do instead? Well, one thing we could do is make better use of the fact that we <em>all</em> now work in a monorepo called github.com. Everyone's favourite distributed version control system has evolved to (hilariously) become the most centralized system we've ever had. As such, GitHub knows about you, your team, and your code and could help us navigate through everything it contains. What I'm going to describe is already starting to happen. For example, if you have any node.js projects on GitHub, you've probably <a href="https://help.github.com/articles/about-security-alerts-for-vulnerable-dependencies/">received emails</a> about npm packages being out of date and vulnerable to security issues:</p> | |||
| <blockquote> | |||
| <p>We found a potential security vulnerability in a repository which you have been granted security alert access. Known high severity security vulnerability detected in package-name < X.Y.Z defined in package-lock.json. package-lock.json update suggested: package-name ~> X.Y.Z</p> | |||
| </blockquote> | |||
| <p>Now imagine we take this further. What sorts of things could we do?</p> | |||
| <ul> | |||
| <li>GitHub knows how likely your project is to accept work from new contributors, based on that fact that it knows whether any given user has commits in your repo. If a project doesn't accept contributions from new people, that would be great to know. Even better, show me which ones routinely take commits from new people.</li> | |||
| <li>GitHub knows that your project has died, that no one is making new commits, or that the rapidity of updates has slowed. It therefore knows that your "good first bugs" (probably) aren't any more, that they've expired. It would be great if they could be de-priortized in some search I might do.</li> | |||
| <li>GitHub knows how busy a project's developers are. I might be contributing to a dozen different repos across GitHub, and this might be a particularly busy time for me. I might also be the person who usually interacts with new people in issues. However, right now, I'm pushing branches, doing reviews, etc. and am less likely to be able to help people, even if I usually will. It would be great if there was some signal to help passers-by to know whether there are rooms available if they decide to stay.</li> | |||
| </ul> | |||
| <p>This kind of signalling could also help all GitHub users, not just new contributors to a project. For example, I bet GitHub knows when you're approaching burnout. In sport we see coaches and team physios/physicians making data-driven decisions about injury potential for athletes: it's imperative to periodize training and balance volume and recovery so that you don't push beyond what an individual can effectively manage. Why don't we do this with tech? It's easy with programming to "lose yourself" in a problem or piece of code. I've had lots of periods where I'm pushing myself really hard in order to find a solution to some problem. I've also had lots of periods where I'm mentally dead and can't bring myself to write anything. I often don't have good insight into when I'm veering into one or the other of these two extremes.</p> | |||
| <p>But GitHub does. If I'm committing code day after day, I'm working day after day. If I'm writing novellas in issues, filing bugs, reviewing code, or even just scrolling my mouse without clicking on this website, I'm working. I don't know what the threshold is for burnout, but I'm sure there are psychologists or other behavioral scientist who do, and could give some guidelines that could be used to offer a signal.</p> | |||
| <p>What if, in addition to "critical" security warnings for our code modules, we also got helpful info about the state of our project and practices. GitHub could let people know when it sees them cross some threshold of work, to give them some idea how much they've been doing, to help them realize they need some rest. Same thing for a project overall: when your top few developers are going all out for long stretches, the project as a whole is going to collapse eventually. If everyone is @ mentioning a person in bugs across a bunch of repos, asking for reviews, asking for help, looking for feedback, eventually that person is not going to be able to keep up. What if GitHub showed me a bit of info when I requested a review or @ mentioned you: </p> | |||
| <blockquote> | |||
| <p>"This person is totally swamped right now. Is there someone else that could help?"</p> | |||
| </blockquote> | |||
| <p>Actually, GitHub probably knows that too, since it knows the other devs who commit to the same repos/files on a regular basis. Why not suggest some alternatives to balance the load?</p> | |||
| <p>Eventually this could go even further. I can't tell you how many times the solution to a bug I have is sitting quietly over in another repo, unknown to me or the rest of my team. Wouldn't it be nice if GitHub could point me at bugs that are like the one I'm looking at now? Doing this perfectly would be hard, I realize. But imagine if GitHub could signal the presence of other similar bugs, code, or people. GitHub knows.</p> | |||
| <p>GitHub knows and now it needs to tell us. None of the above can be done immediately, but we need to get there. We are moving into a period of data, machine learning, artificial intelligence, and automation. In 2018 we need our systems to move beyond hosting our data, and our data needs to start working for us.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://blog.humphd.org/github-knows/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 43
- 0
cache/05f3e49cab61896e937db4730ec21787/index.md
View File
| @@ -0,0 +1,43 @@ | |||
| title: GitHub Knows | |||
| url: http://blog.humphd.org/github-knows/ | |||
| hash_url: 05f3e49cab61896e937db4730ec21787 | |||
| <p>I was <a href="https://twitter.com/humphd/status/951184397893586944">reflecting the other day</a> how useful it would be if GitHub, in addition to the lists it has now like <a href="https://github.com/trending">Trending</a> and <a href="https://github.com/explore">Explore</a>, could also provide me a better view into which projects a) need help; and more, b) can accept that help when it arrives. Lots of people responded, and I don't think I'm alone in wanting better ways to find things in GitHub.</p> | |||
| <p>Lots of GitHub users might not care about this, since you work on what you work on already, and finding even <em>more</em> work to do is the last thing on your mind. For me, my interest stems from the fact that I constantly need to find good projects, bugs, and communities for undergrads wanting to learn how to do open source, since this is what I teach. Doing it well is an unsolved problem, since what works for one set of students automatically disqualifies the next set: you can't repeat your success, since closed bugs (hopefully!) don't re-open.</p> | |||
| <p>And because I write about this stuff, I hear from lots of students that I don't teach, students from all over the world who, like my own, are struggling to find a way in, a foothold, a path to get started. It's a hard problem, made harder by the size of the group we're discussing. <a href="https://octoverse.github.com/">GitHub's published numbers from 2017</a> indicate that there are over <strong>500K students</strong> using its services, and those are just the ones who have self-identified as such--I'm sure it's much higher.</p> | |||
| <p>The usual response I get from people is to use existing queries for labels with some variation of <em>"good first bug"</em>. This can work, especially if you get in quickly when a project, or group of projects, does a triage through their issues. For example, this fall I was able to leverage the <a href="https://hacktoberfest.digitalocean.com/">Hacktoberfest</a> efforts, since many projects took the time to go and label bugs they felt were a good fit for new people (side note: students love this, and I had quite a few get shirts and a sense that they'd become part of the community).</p> | |||
| <p>But static labeling of issues doesn't work over time. For example, I could show you thousands of "good first bugs" sitting patiently in projects that have long ago stopped being relevant, developed, or cared about by the developers. It's like finding a "Sale!" sign on goods in an abandoned store, and more of a historical curiosity than a signal to customers. Unless these labels auto-expire, or are mercilessly triaged by the dev team, <a href="http://blog.humphd.org/why-good-first-bugs-often-arent/">I don't think they solve the problem</a>.</p> | |||
| <p>So what could we do instead? Well, one thing we could do is make better use of the fact that we <em>all</em> now work in a monorepo called github.com. Everyone's favourite distributed version control system has evolved to (hilariously) become the most centralized system we've ever had. As such, GitHub knows about you, your team, and your code and could help us navigate through everything it contains. What I'm going to describe is already starting to happen. For example, if you have any node.js projects on GitHub, you've probably <a href="https://help.github.com/articles/about-security-alerts-for-vulnerable-dependencies/">received emails</a> about npm packages being out of date and vulnerable to security issues:</p> | |||
| <blockquote> | |||
| <p>We found a potential security vulnerability in a repository which you have been granted security alert access. Known high severity security vulnerability detected in package-name < X.Y.Z defined in package-lock.json. package-lock.json update suggested: package-name ~> X.Y.Z</p> | |||
| </blockquote> | |||
| <p>Now imagine we take this further. What sorts of things could we do?</p> | |||
| <ul> | |||
| <li>GitHub knows how likely your project is to accept work from new contributors, based on that fact that it knows whether any given user has commits in your repo. If a project doesn't accept contributions from new people, that would be great to know. Even better, show me which ones routinely take commits from new people.</li> | |||
| <li>GitHub knows that your project has died, that no one is making new commits, or that the rapidity of updates has slowed. It therefore knows that your "good first bugs" (probably) aren't any more, that they've expired. It would be great if they could be de-priortized in some search I might do.</li> | |||
| <li>GitHub knows how busy a project's developers are. I might be contributing to a dozen different repos across GitHub, and this might be a particularly busy time for me. I might also be the person who usually interacts with new people in issues. However, right now, I'm pushing branches, doing reviews, etc. and am less likely to be able to help people, even if I usually will. It would be great if there was some signal to help passers-by to know whether there are rooms available if they decide to stay.</li> | |||
| </ul> | |||
| <p>This kind of signalling could also help all GitHub users, not just new contributors to a project. For example, I bet GitHub knows when you're approaching burnout. In sport we see coaches and team physios/physicians making data-driven decisions about injury potential for athletes: it's imperative to periodize training and balance volume and recovery so that you don't push beyond what an individual can effectively manage. Why don't we do this with tech? It's easy with programming to "lose yourself" in a problem or piece of code. I've had lots of periods where I'm pushing myself really hard in order to find a solution to some problem. I've also had lots of periods where I'm mentally dead and can't bring myself to write anything. I often don't have good insight into when I'm veering into one or the other of these two extremes.</p> | |||
| <p>But GitHub does. If I'm committing code day after day, I'm working day after day. If I'm writing novellas in issues, filing bugs, reviewing code, or even just scrolling my mouse without clicking on this website, I'm working. I don't know what the threshold is for burnout, but I'm sure there are psychologists or other behavioral scientist who do, and could give some guidelines that could be used to offer a signal.</p> | |||
| <p>What if, in addition to "critical" security warnings for our code modules, we also got helpful info about the state of our project and practices. GitHub could let people know when it sees them cross some threshold of work, to give them some idea how much they've been doing, to help them realize they need some rest. Same thing for a project overall: when your top few developers are going all out for long stretches, the project as a whole is going to collapse eventually. If everyone is @ mentioning a person in bugs across a bunch of repos, asking for reviews, asking for help, looking for feedback, eventually that person is not going to be able to keep up. What if GitHub showed me a bit of info when I requested a review or @ mentioned you: </p> | |||
| <blockquote> | |||
| <p>"This person is totally swamped right now. Is there someone else that could help?"</p> | |||
| </blockquote> | |||
| <p>Actually, GitHub probably knows that too, since it knows the other devs who commit to the same repos/files on a regular basis. Why not suggest some alternatives to balance the load?</p> | |||
| <p>Eventually this could go even further. I can't tell you how many times the solution to a bug I have is sitting quietly over in another repo, unknown to me or the rest of my team. Wouldn't it be nice if GitHub could point me at bugs that are like the one I'm looking at now? Doing this perfectly would be hard, I realize. But imagine if GitHub could signal the presence of other similar bugs, code, or people. GitHub knows.</p> | |||
| <p>GitHub knows and now it needs to tell us. None of the above can be done immediately, but we need to get there. We are moving into a period of data, machine learning, artificial intelligence, and automation. In 2018 we need our systems to move beyond hosting our data, and our data needs to start working for us.</p> | |||
+ 549
- 0
cache/05f8a8f7e12626b46b8a66f6f0d99e95/index.html
View File
| @@ -0,0 +1,549 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Versions et révisions (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://nrkn.fr/blog/2018/10/28/versions-et-revisions/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Versions et révisions (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://nrkn.fr/blog/2018/10/28/versions-et-revisions/">Source originale du contenu</a></h3> | |||
| <p>Quelque part dans le courant de l’année, ma relation à l’écriture a évolué. De légers changements. Dans la forme, dans le temps que j’y consacre, dans la manière de l’aborder et de l’importance que j’accorde à cette activité. La finalité, elle, est restée la même. Seule la conscience que j’en ai désormais s’est précisée. D’un besoin inexpliqué, d’une nécessité ressentie, j’accepte maintenant qu’il ne s’agit que d’une envie, d’un outil et d’un moyen. Un médium pour relâcher la pression, extraire de la tête les tourbillons réguliers d’idées, de sensations et de questions qui vireraient facilement à l’ouragan s’ils ne finissaient pas sur papier (ou écran) pour devenir alors une matière à modeler, à informer, à produire du sens. Écrire devient l’opportunité de prendre du recul, de projeter une part de moi qui se matérialise alors sous mes yeux et s’expose de la sorte à une observation plus attentive, plus distanciée et, ainsi, propice à l’autocritique - aussi biaisée que cette dernière puisse subsister -.</p> | |||
| <p>Depuis que j’ai retrouvé le chemin du clavier pour tenir ce blog, j’ai appris à lâcher prise. Je ne cherche pas une régularité stricte de publication, je n’ai aucune règle particulière concernant la forme ou les sujets abordés. Les seules contraintes auxquelles j’ai décidé de m’astreindre tiennent en deux points : écrire ici au moins une fois par mois et toujours être honnête dans les mots que j’aligne. Le premier n’est qu’une histoire d’habitude et de discipline. Cette obligation mensuelle est loin d’être pesante, d’autant que je ne m’impose aucun nombre minimal de mots par billet non plus. Me délester d’une dizaine de mots quand bien même je n’aurais pas écrit depuis des semaines ne me suscite aucune culpabilité. Le second point, lui, est moins évident qu’il ne le paraît. Sur ces deux années de retour assumé au blog, j’ai eu l’occasion - et surtout pris le temps - de le constater : il n’est pas si aisé d’écrire pour soi et/ou sur soi, sachant que d’autres pourront lire.</p> | |||
| <blockquote><p>Il est vrai que la notion de relativité des jugements conduit à l'angoisse. Il est plus simple d'avoir à sa disposition un règlement de manœuvre, un mode d'emploi, pour agir. Nos sociétés qui prônent si souvent, en paroles du moins, la responsabilité, s'efforcent de n'en laisser aucune à l'individu, de peur qu'il n'agisse de façon non conforme à la structure hiérarchique de dominance. Et l'enfant pour fuir cette angoisse, pour se sécuriser, cherche lui-même l'autorité des règles imposées par les parents. À l'âge adulte il fera de même avec celle imposée par la socio-culture dans laquelle il s'inscrit. Il se raccrochera aux jugements de valeur d'un groupe social, comme un naufragé s'accroche désespérément à sa bouée de sauvetage.</p><p>Henri Laborit - « Éloge de la fuite »</p></blockquote> | |||
| <p>Ce blog tient plus du carnet personnel, au sens premier et intime, que du magazine, du partage de connaissances ou du journalisme citoyen. J’y exprime assez peu d’opinions personnelles et, lorsque cela m’arrive, j’évite de les transformer en revendications ou en discours de ralliements. Essayer de préserver cette forme de neutralité n’est pas destiné à paraître lisse mais s’inscrit intrinsèquement dans ma démarche de réflexion. J’estime qu’un engagement quelconque n’en est pas plus faible sans proclamation et que pancartes et banderoles sont plus encombrantes qu’utiles. Il n’est pas question d’une réserve mais d’une mesure préventive face à l’auto-persuasion, qui guette, tapie dans l’ombre. Je considère ma pratique comme une forme d’écriture de soi, bien plus orientée vers la construction de mon individualité que vers la quête narcissique de reconnaissance ou de notoriété publiques - que je tends à fuir, quitte à envisager de m’effacer - ou encore vers la flatterie de l’ego. En dernier lieu, je réfute également le recours à la notion d’extimité, trop fluctuante et sujette à interprétations variées, à mon goût.</p> | |||
| <p>Cette extériorisation d’une construction personnelle risque dès lors de se confronter à des soucis habituellement liés à la (re)présentation de soi. Puisque je prône l’honnêteté - peut-être devrais-je utiliser le terme d’intégrité -, je me dois de reconnaître qu’écrivant pour moi je ne m’en sais pas moins observé puisque je publierai ces mots. Nous touchons alors presque du doigt le paradoxe de l’observateur cher à Labov. C’est là que la difficulté de l’exercice prend corps : deviner quelles sont les parts consciente et inconsciente d’altération de mon expression liées à cette observation extérieure, et savoir si je suis en mesure de les minimiser à défaut de m’en extraire. Puis-je, dans ces conditions, être authentique - mais ce qualificatif a-t-il encore lieu d’être tant il a été galvaudé - ou ne suis-je pas déjà dans le paraître malgré moi ? Est-ce que je transpose toujours bien ce type voûté et un peu avachi, ou ne suis-je pas en train de me tenir plus droit qu’à l’accoutumée tout en veillant à rentrer ma bedaine ? Ce doute est plus important qu’il n’en a l’air : n’oublions pas que je parlais d’écrire en guise de production de matière pour la construction de mon édifice personnel. Qu’advient-il alors de ce résultat du moment que la matière première risque d’être corrompue ?</p> | |||
| <p>Cela tient de l’estime de soi - qu’on tente de préserver - et de la part palpable de la présentation de soi - en cherchant à plaire. Plaire ou intéresser, ne soyons pas chiches. Quitte à me tromper, et de bonne foi, j’affirme m’être tenu hors de cette ornière ma vie durant, quoi que puissent en laisser présager mes actuelles tendances égotistes. Le risque d’embellir, de romancer ou d’idéaliser les traits de mon individualité m’est connu. En cela, il est le moins dangereux puisque évident. Je suis plutôt d’un caractère introverti : me faire remarquer m’est particulièrement inconfortable. Je suis donc, d’une certaine façon, immunisé contre ce besoin répandu de plaire, tendance qui pourrait m’amener à vouloir me présenter sous un jour plus avantageux que je ne le fais habituellement. Mon problème peut néanmoins se situer de l’autre côté de ce spectre : on ne risque pas de sortir du lot que par le haut, mais aussi par le bas. Je dois alors confesser une longue angoisse de déplaire. Cette graine-là a sans doute été plantée aux premières heures de mon éducation sociale. Être sage, poli, obéissant, éviter les conflits et ne pas faire de vagues sont autant de préceptes qui m’ont été assenés de l’enfance à l’adolescence. Des grandes lignes contre lesquelles je ne me suis jamais véritablement rebellé, non plus.</p> | |||
| <blockquote><p>Une éducation relativiste ne chercherait pas à éluder la socio-culture, mais la remettrait à sa juste place : celle d'un moyen imparfait, temporaire, de vivre en société. Elle laisserait à l'imagination la possibilité d'en trouver d'autres et dans la combinatoire conceptuelle qui pourrait en résulter, l'évolution des structures sociales pourrait peut-être alors s'accélérer, comme par la combinatoire génétique l'évolution d'une espèce est rendue possible. Mais cette évolution sociale est justement la terreur du conservatisme, car elle est le ferment capable de remettre en cause les avantages acquis. Mieux vaut alors fournir à l'enfant une « bonne » éducation, capable avant tout de lui permettre de trouver un « débouché » professionnel honorable. On lui apprend à « servir », autrement dit on lui apprend la servitude à l’égard des structures hiérarchiques de dominance. On lui fait croire qu’il agit pour le bien commun, alors que la communauté est hiérarchiquement institutionnalisée, qu'elle le récompense de tout effort accompli dans le sens de cette servitude à l’institution. Cette servitude devient alors gratification. L’individu reste persuadé de son dévouement, de son altruisme, cependant qu'il n'a jamais agi que pour sa propre satisfaction, mais satisfaction déformée par l'apprentissage de la socio-culture.</p><p>Henri Laborit - « Éloge de la fuite »</p></blockquote> | |||
| <p>Car si je trouvais ces règles un peu exagérées ou trop contraignantes, je n’en étais pas moins convaincu de leur bien-fondé. Ce n’est que bien plus tard, au cours de ma vie d’adulte, que j’ai commencé à les remettre en question. J’éprouvais la sensation d’être trop à l’étroit, d’étouffer et, parfois, d’amasser trop de colère ou de frustration dans un volume aussi restreint que celui de mon crâne. Les coutures du costume social et normé qu’on m’avait fait endosser ont fini par m’irriter et me blesser. Il m’aura fallu un duo de décennies pour finalement trouver mes aises, mon habit social ample et douillet, guère clinquant ou sexy, mais suffisamment passe-partout pour éviter d’attirer l’attention d’autrui. J’ai conscience de toujours porter en moi ces premiers germes. Je doute même que nous puissions totalement nous extraire de notre conditionnement éducatif et familial. Quel rapport avec l’écriture sur un blog ? J’ai évoqué ce besoin de raisonner à voix haute, de manière neutre et objective, qu’écrire ici comblait. Il représente la plus grande faille de ma précieuse carapace d’individu en devenir. Par ce biais, je me rends vulnérable à une forme pernicieuse d’autocensure. Cette dernière peut intercéder aussi bien dans le choix des sujets que je suis apte à traiter que dans celui des mots auxquels j’aurai recours pour les développer. Partant de cette conclusion, j’ai donc ajusté ma méthode d’écriture dans le but de me prémunir contre ce risque.</p> | |||
| <p>Depuis quelques années, je suis devenu un adepte de la pratique de l’écriture libre (ou automatique). Dès la mise en ligne du présent carnet, je l’ai régulièrement pratiquée en amont de l’écriture, bien plus filtrée et apprivoisée, des billets destinés à être publiés. Longtemps cantonnée dans un rôle de source abondante d’un matériau brut, je lui ai progressivement accordé une place bien plus centrale. Depuis plus de 6 mois maintenant, elle est la mécanique dominante de l’écriture du moindre billet qui atterrit ici. Les sujets proviennent de réactions - ou d’envies de réagir - à un élément d’actualité, à des questions apparues lors d’une lecture ou d’une conversation, à des petites bizarreries du quotidien et de mon environnement proche, ou encore à la (re)découverte d’un comportement ou d’un travers personnel. L’écriture libre n’en est désormais plus le déclencheur, elle en est devenue l’outil de production. Dorénavant, j’arrive au clavier avec l’idée générale en tête. Mon éditeur utilisant le titre de la feuille en guise de base pour le nom du fichier stocké, chaque billet commence son existence sous le titre « <i>(Draft) Nawak <span class="caps">YYYY</span>-<span class="caps">MM</span>-<span class="caps">DD</span></i> ». De la sorte, je m’abstiens de cette courte réflexion du choix d’un titre qui peut vite soit se transformer en blocage, soit orienter à elle seule tout le déroulement qui va suivre. Ensuite…</p> | |||
| <p>Je laisse filer, couler, déborder, dévier, s’emmêler, s’étouffer, s’emballer ou caracoler les mots, les phrases et les idées. Je ne travaille plus qu’au paragraphe. Histoire d’avoir un rythme régulier, de respirer et de laisser respirer. Histoire aussi de m’assurer, une fois la fin de l’ensemble décrétée, une relecture plus aisée et de me garder suffisamment à l’abri de toute velléité de réédition majeure. La progression en pointillé que représentent les paragraphes offre d’autres avantages tels qu’un élagage simplifié ou l’ordonnancement des blocs lors de la phase finale d’édition avant mise en ligne. Travaillant sans plan, sans notes préalables dans la majorité des cas, il arrive - fort logiquement - que je me prenne les pieds dans le tapis. Ou que l’idée initiale se tarisse sans que j’aie pour autant su la traiter convenablement ou la mener à son terme. Ou que je me retrouve à manquer de temps, pris au piège de son développement non prémédité quand il n’est pas tout simplement inattendu. Cela a d’ailleurs été le cas avec le présent billet. Entamé il y a une dizaine de jours, il est retourné plusieurs fois prendre la poussière dans l’une des étagères de ma mémoire avant de recevoir l’ensemble des paragraphes le constituant, de recevoir - si besoin - ses extraits de lecture en guise de citations et d’être agrémenté d’un titre le promouvant alors au titre de billet bon pour la publication.</p> | |||
| <p>Si le risque est grand que le résultat final paraisse décousu, tortueux, voire poussif (pas trop souvent, j’espère !), cette méthode a le mérite de me maintenir à l’écart de la tentation du « paraître différent », mêlant instinct, spontanéité et réflexion sans que la moindre énergie ne soit consacrée à tenter un quelconque savant dosage de ces composantes. De l’argile mentale et émotionnelle extraite de la sorte, je m’accorde alors l’opportunité de modeler, d’assembler cet autre que je connais si peu et me tiraille tant. Ce moi que je soupçonne depuis toujours, que je trompe régulièrement et que parfois je préfère ignorer. Cet individu enfoui sous les gravats d’une éducation qu’il n’a pas choisie, d’une société qui lui échappe et d’une vie qui lui semble si vide de sens, mais qui, malgré tout, ne cherche qu’à faire surface. Pour respirer. Pour hurler au grand jour, comme un nouveau-né à son premier, « Je suis là. J’existe. Vois moi enfin ! ».</p> | |||
| <blockquote><p>Avec le recul des années, avec ce que j'ai appris de la vie, avec l’expérience des êtres et des choses, mais surtout grâce à mon métier qui m’a ouvert à l’essentiel de ce que nous savons, aujourd'hui de la biologie des comportements, je suis effrayé par les automatismes qu'il est possible de créer à son insu dans le système nerveux d'un enfant. Il lui faudra dans sa vie d'adulte une chance exceptionnelle pour s'évader de cette prison, s'il y parvient jamais… Et si ses jugements par la suite lui font rejeter parfois avec violence ces automatismes, c'est bien souvent parce qu'un autre discours logique répond mieux à ses pulsions et fournit un cadre plus favorable à sa gratification. Ses jugements resteront, bien qu'antagonistes de ceux qui lui ont été inculqués primitivement, la conséquence directe de ceux-ci. Ce seront encore des jugements de valeur.</p><p>Henri Laborit - « Éloge de la fuite »</p></blockquote> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://nrkn.fr/blog/2018/10/28/versions-et-revisions/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 5
- 0
cache/05f8a8f7e12626b46b8a66f6f0d99e95/index.md
File diff suppressed because it is too large
View File
+ 615
- 0
cache/062df59908e9101831be29fd1235e170/index.html
View File
| @@ -0,0 +1,615 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Product Fail (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.svpg.com/product-fail"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Product Fail (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.svpg.com/product-fail">Source originale du contenu</a></h3> | |||
| <p class="p1"><span class="s1">NOTE: This article is a narrative version of a talk I’ve given for developers at the <em><a href="http://www.craft-conf.com">Craft Conference</a></em> and for product managers and designers at <em><a href="http://www.mtpcon.com">Mind The Product</a>. </em></span></p> | |||
| <p class="p1"><span class="s1"><em/></span>In this article I’d like to discuss the root causes of so many product failures. </p> | |||
| <p class="p1">I see the same basic way of working at the majority of companies, and I can’t help but notice that this is not close to how the best companies actually work.</p> | |||
| <p class="p1"><span class="s1">Let me warn you that this discussion can be a little depressing, especially if it hits too close to home, so if that’s the case, I’ll ask you to hang in there.</span></p> | |||
| <p class="p1"><span class="s1">Let’s start by walking through the process that the vast majority of companies still use to create products. I’ll try not to editorialize yet; let me first just describe the process:</span></p> | |||
| <p class="p1"><span class="s1">Everything starts with <em>ideas</em>. In most companies, they’re coming from execs or key stakeholders or business owners, or big customers (or prospective customers), but in any case there are always a whole bunch of things that different parts of the business need us to do.</span></p> | |||
| <p class="p2">Now most companies want to prioritize those ideas into a <em>roadmap</em>, and they do this for two main reasons. First, they want us to work on the most valuable things first, and second, they want to be able to predict when things will be ready.</p> | |||
| <p class="p1"><span class="s1">In order to do this, there is almost always some form of <em>quarterly or annual planning session</em> where the leaders consider the ideas and negotiate a product roadmap. But in order to prioritize, they first need some form of a <em>business case</em> for each item. </span></p> | |||
| <p class="p2">Some companies do formal business cases, and some are informal, but either way it boils down to the need to know two things about each idea: 1) how much money will it make? and 2) how much money or time will it cost? This info is then used to come up with the roadmap, usually for the next quarter but sometimes as much as a year out.</p> | |||
| <p class="p1"><span class="s1">At this point the product and technology organization has its marching orders, and they typically work the items from the highest priority on down.</span></p> | |||
| <p class="p1"><span class="s1">Once an idea makes it to the top of the list, the first thing that’s done is for a product manager to talk to the stakeholders and flesh the idea out and come up with a set of “<em>requirements</em>.” </span></p> | |||
| <p class="p1"><span class="s1">These might be user stories or they might be more like some form of a functional spec but it’s purpose is to communicate with the designers and engineers what needs to be built.</span></p> | |||
| <p class="p1"><span class="s1">Once the requirements are gathered up, the <em>user experience design</em> team (assuming the company has such a team), is asked to provide the interaction design, the visual design, and in cases of physical devices, the industrial design.</span></p> | |||
| <p class="p1"><span class="s1">Finally the requirements and design specs make it to <em>engineers</em>. This is usually where Agile finally enters the picture. </span></p> | |||
| <p class="p1"><span class="s1">Anyway, the engineers will typically break up the work into a set of <em>iterations</em> - called “sprints” in the Scrum process. So maybe it takes 1-3 sprints to build out the idea. </span></p> | |||
| <p class="p1"><span class="s1">Hopefully the <em>QA testing</em> is part of those sprints, but if not, the QA team will follow this up with some testing to make sure the new idea works as advertised, and also doesn’t introduce other problems (known as <em>regressions</em>)</span></p> | |||
| <p class="p1"><span class="s1">Once we get the green light from QA, the new idea is finally <em>deployed</em> to actual customers.</span></p> | |||
| <p class="p1"><span class="s1">In the vast majority of companies that I first meet, large and small, this is essentially how they work, and have worked, for many years. Yet these same companies consistently complain about the<em> lack of innovation</em> and the <em>very long time </em>it takes to make it from idea to customer’s hands.</span></p> | |||
| <p class="p1"><span class="s1">You might recognize that while I mentioned Agile, and while almost everyone today claims to be Agile, what I’ve just described is very much a <em>Waterfall</em> process. In fairness to the engineers, they’re typically doing about as much Agile as they can given the broader Waterfall context. </span></p> | |||
| <p class="p1"><span class="s1">OK, so that may be what most teams do, but why is that necessarily the reason for so many problems?</span></p> | |||
| <p class="p1"><span class="s1">What I want to do now is to connect the dots for you to show you why this very common way of working is actually responsible for most failed product efforts.</span></p> | |||
| <p class="p1"><span class="s1">Now I could literally talk all day long about the problems with this process, but what I’m going to do here is share what I think are the “top 10” most serious problems with this way of working. To be clear, I’m arguing that all ten of these are <em>very serious issues</em>, any one of which could derail a team, but many companies actually have most or even all of these problems.</span></p> | |||
| <p class="p1"><span class="s1">1. Let’s start at the top – the <em>source of ideas</em>. This model leads to sales-driven specials, and stakeholder-driven products. Lots more to come on this key topic, but for now let me just say that this is not the source of our best product ideas. Another consequence of this approach is the lack of empowerment of the teams - in this model they’re just there to implement. Mercenaries.</span></p> | |||
| <p class="p1"><span class="s1">2. Next let’s talk about the fatal flaw in these <em>business cases</em>. Now to be clear, I’m actually in favor of doing business cases, at least for ideas that need a larger investment. But the way most companies do them, at this stage, in order to come up with a prioritized roadmap, is truly ridiculous. Here’s why. Remember those two key inputs to every business case? How much money you’ll make, and how much it will cost? Well, the cold truth is that at this stage, we have no clue on either of these, and we can’t know.</span></p> | |||
| <p class="p1"><span class="s1">We can’t know how much money we’ll make because that depends hugely on how good the solution turns out to be. If the team does an excellent job, this could be wildly successful and literally change the course of the company. On the other hand, the truth is that many product ideas end up making absolutely nothing. And that’s not an exaggeration for effect. Literally nothing. In any case, one of the most critical lessons in product is <em>knowing what we can’t know</em>, and we just can’t know at this stage how much money we’ll make.</span></p> | |||
| <p class="p1"><span class="s1">Likewise, we have no idea what it will cost to build. Without knowing the actual solution, this is extremely hard for engineering to predict. Most experienced engineers will refuse to even give an estimate at this stage, but some are pressured into the old “t-shirt sizing” compromise - just let us know if this is “Small, Medium, Large and Extra Large.”</span></p> | |||
| <p class="p1"><span class="s1">But company’s really want those prioritized roadmaps, and in order to get one they need some kind of system to rate the ideas, so people play the business case game.</span></p> | |||
| <p class="p1"><span class="s1">3. An even bigger issue comes next. Companies get very excited about their <em>roadmaps</em>. I’ve seen countless roadmaps and the vast majority of them are essentially prioritized lists of features. Marketing needs this feature for a campaign. Sales needs this feature for a new customer. Someone wants a PayPal integration. You get the idea.</span></p> | |||
| <p class="p2">But here’s the problem, and it’s maybe the biggest problem of all. I call this the “<em>two inconvenient truths about product</em><strong>.</strong>” </p> | |||
| <p class="p2">The first truth is that at least <em>half of our ideas are just not going to work</em>. There are many reasons for an idea to not work out. The most common is that the customers just aren't as excited about this idea as we are. So they choose not to use it. Sometimes they want to use it, but they try it out and it's so complicated that it's simply more trouble than it's worth, which ends up as the same result – the users don't choose to use it. Sometimes the issue is that the customers would love it but it turns out to be much more involved to build than we thought, and we decide we simply can't afford the time and money to actually deliver.</p> | |||
| <p class="p1"><span class="s1">So I promise you that at least half the ideas on your roadmap are not going to deliver what you hope. By the way, the really good teams assume that at least three quarters of the ideas won’t perform like we hope.</span></p> | |||
| <p class="p1"><span class="s1">If that's not bad enough, the second inconvenient truth is that even with the ideas that do prove to have potential, it typically takes <em>several iterations</em> to get the implementation of this idea to the point where it actually delivers the necessary business value. We call that “time to money.”</span></p> | |||
| <p class="p1"><span class="s1">One of the most important things about product that I’ve learned is that there is simply no escaping these truths, no matter how smart you might be. And I've had the good fortune to work with many truly exceptional product teams. The real difference is how you deal with these truths.</span></p> | |||
| <p class="p1"><span class="s1">4. Next let’s talk about the <em>role of product</em> in this model. In fact, we wouldn’t even really call this role product at all. It’s really a form of project management. In this model it’s more about <em>gathering requirements and documenting them</em> for engineers. At this point let me just say that this is 180 degrees away from modern product management.</span></p> | |||
| <p class="p1"><span class="s1">5. It’s a similar story with the <em>role of design</em>. It’s way too late in the game to get the real value of design, and mostly what’s being done is what we call the “lipstick on the pig” model. The damage has already been done, and now we’re just trying to put a coat of paint on the mess. The UX designers know this is not good, but they try to make it look as nice and consistent as they can.</span></p> | |||
| <p class="p1"><span class="s1">6. Maybe the biggest missed opportunity in this model, is the fact that <em>engineering gets brought in way too late</em><strong>. </strong>We say if you’re just using your engineers to code, you’re only getting about half their value. The little secret in product is that <em>engineers are typically the best single source of innovation</em>, yet they are not even invited to the party in this process.</span></p> | |||
| <p class="p1"><span class="s1">7. Not only is engineering brought in way too late, but the principles and key benefits of <em>Agile</em> enter the picture far too late. Teams using Agile in this way are getting maybe 20% of the actual value and potential of Agile methods. What you’re really seeing is Agile for delivery but the rest of the organization and context is anything but agile.</span></p> | |||
| <p class="p1"><span class="s1">8. This entire process is very <em>project-centric</em>. The company usually funds projects, staffs projects, and pushes these projects through the organization and finally launches projects. Unfortunately, <em>projects are output and product is all about outcome</em><strong>. </strong>This process predictably leads to orphaned projects. Yes, something was finally released but it doesn’t meet its objectives so what really was the point? In any case, it’s a serious problem and not close to how we need to build products.</span></p> | |||
| <p class="p1"><span class="s1">9. The biggest flaw of the old Waterfall process has always been, and remains, that all the risk is at the end. This means that <em>customer validation happens way too late</em><strong>. </strong></span></p> | |||
| <p class="p1"><span class="s1">You’ve hopefully heard of Lean Startup methods, which are very much at the heart of the alternative. The key principle is to reduce waste, and one of the biggest forms of waste is to design, build, test and deploy a feature or product only to find out it is not what was needed. The irony is that many teams <em>believe</em> they’re applying lean principles, yet they follow this basic process I’ve just described. And then I point out to them that they are actually trying out ideas in one of the the most expensive, slowest ways we know.</span></p> | |||
| <p class="p1"><span class="s1">10. Finally, while we’re busy doing this process and wasting our time and money, the biggest loss of all usually turns out to be the <em>opportunity cost</em> of what the organization <em>could have and should have</em> been doing instead. We can’t get that time or money back.</span></p> | |||
| <p class="p2">To me it’s no surprise that so many companies spend so much time and money and get so little in return. I warned you this could be depressing.</p> | |||
| <p class="p2">The good news is that I promise you that the best teams operate nothing like what I’ve just described.</p> | |||
| <p class="p2">I have written many articles about the various aspects of how the best teams work. Product Discovery is how we come up with winning solutions to the problems we are attacking. Discovery is an active and ongoing collaboration between product, user experience design, and engineering. Continuous Discovery and Continuous Delivery happen in parallel. Features on roadmaps (output) are replaced by business problems to be solved (outcome). The goal is product/market fit.</p> | |||
| <p class="p1"><span class="s1">If your company is still running this old and long-obsolete process, then hopefully you can shine a light on this and start the transition to the future. And hopefully you’ll do this before you find yourself disrupted by a startup or competitor that is able to move much faster and more effectively than you can.</span></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.svpg.com/product-fail">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 49
- 0
cache/062df59908e9101831be29fd1235e170/index.md
View File
| @@ -0,0 +1,49 @@ | |||
| title: Product Fail | |||
| url: http://www.svpg.com/product-fail | |||
| hash_url: 062df59908e9101831be29fd1235e170 | |||
| <p class="p1"><span class="s1">NOTE: This article is a narrative version of a talk I’ve given for developers at the <em><a href="http://www.craft-conf.com">Craft Conference</a></em> and for product managers and designers at <em><a href="http://www.mtpcon.com">Mind The Product</a>. </em></span></p> | |||
| <p class="p1"><span class="s1"><em/></span>In this article I’d like to discuss the root causes of so many product failures. </p> | |||
| <p class="p1">I see the same basic way of working at the majority of companies, and I can’t help but notice that this is not close to how the best companies actually work.</p> | |||
| <p class="p1"><span class="s1">Let me warn you that this discussion can be a little depressing, especially if it hits too close to home, so if that’s the case, I’ll ask you to hang in there.</span></p> | |||
| <p class="p1"><span class="s1">Let’s start by walking through the process that the vast majority of companies still use to create products. I’ll try not to editorialize yet; let me first just describe the process:</span></p> | |||
| <p class="p1"><span class="s1">Everything starts with <em>ideas</em>. In most companies, they’re coming from execs or key stakeholders or business owners, or big customers (or prospective customers), but in any case there are always a whole bunch of things that different parts of the business need us to do.</span></p> | |||
| <p class="p2">Now most companies want to prioritize those ideas into a <em>roadmap</em>, and they do this for two main reasons. First, they want us to work on the most valuable things first, and second, they want to be able to predict when things will be ready.</p> | |||
| <p class="p1"><span class="s1">In order to do this, there is almost always some form of <em>quarterly or annual planning session</em> where the leaders consider the ideas and negotiate a product roadmap. But in order to prioritize, they first need some form of a <em>business case</em> for each item. </span></p> | |||
| <p class="p2">Some companies do formal business cases, and some are informal, but either way it boils down to the need to know two things about each idea: 1) how much money will it make? and 2) how much money or time will it cost? This info is then used to come up with the roadmap, usually for the next quarter but sometimes as much as a year out.</p> | |||
| <p class="p1"><span class="s1">At this point the product and technology organization has its marching orders, and they typically work the items from the highest priority on down.</span></p> | |||
| <p class="p1"><span class="s1">Once an idea makes it to the top of the list, the first thing that’s done is for a product manager to talk to the stakeholders and flesh the idea out and come up with a set of “<em>requirements</em>.” </span></p> | |||
| <p class="p1"><span class="s1">These might be user stories or they might be more like some form of a functional spec but it’s purpose is to communicate with the designers and engineers what needs to be built.</span></p> | |||
| <p class="p1"><span class="s1">Once the requirements are gathered up, the <em>user experience design</em> team (assuming the company has such a team), is asked to provide the interaction design, the visual design, and in cases of physical devices, the industrial design.</span></p> | |||
| <p class="p1"><span class="s1">Finally the requirements and design specs make it to <em>engineers</em>. This is usually where Agile finally enters the picture. </span></p> | |||
| <p class="p1"><span class="s1">Anyway, the engineers will typically break up the work into a set of <em>iterations</em> - called “sprints” in the Scrum process. So maybe it takes 1-3 sprints to build out the idea. </span></p> | |||
| <p class="p1"><span class="s1">Hopefully the <em>QA testing</em> is part of those sprints, but if not, the QA team will follow this up with some testing to make sure the new idea works as advertised, and also doesn’t introduce other problems (known as <em>regressions</em>)</span></p> | |||
| <p class="p1"><span class="s1">Once we get the green light from QA, the new idea is finally <em>deployed</em> to actual customers.</span></p> | |||
| <p class="p1"><span class="s1">In the vast majority of companies that I first meet, large and small, this is essentially how they work, and have worked, for many years. Yet these same companies consistently complain about the<em> lack of innovation</em> and the <em>very long time </em>it takes to make it from idea to customer’s hands.</span></p> | |||
| <p class="p1"><span class="s1">You might recognize that while I mentioned Agile, and while almost everyone today claims to be Agile, what I’ve just described is very much a <em>Waterfall</em> process. In fairness to the engineers, they’re typically doing about as much Agile as they can given the broader Waterfall context. </span></p> | |||
| <p class="p1"><span class="s1">OK, so that may be what most teams do, but why is that necessarily the reason for so many problems?</span></p> | |||
| <p class="p1"><span class="s1">What I want to do now is to connect the dots for you to show you why this very common way of working is actually responsible for most failed product efforts.</span></p> | |||
| <p class="p1"><span class="s1">Now I could literally talk all day long about the problems with this process, but what I’m going to do here is share what I think are the “top 10” most serious problems with this way of working. To be clear, I’m arguing that all ten of these are <em>very serious issues</em>, any one of which could derail a team, but many companies actually have most or even all of these problems.</span></p> | |||
| <p class="p1"><span class="s1">1. Let’s start at the top – the <em>source of ideas</em>. This model leads to sales-driven specials, and stakeholder-driven products. Lots more to come on this key topic, but for now let me just say that this is not the source of our best product ideas. Another consequence of this approach is the lack of empowerment of the teams - in this model they’re just there to implement. Mercenaries.</span></p> | |||
| <p class="p1"><span class="s1">2. Next let’s talk about the fatal flaw in these <em>business cases</em>. Now to be clear, I’m actually in favor of doing business cases, at least for ideas that need a larger investment. But the way most companies do them, at this stage, in order to come up with a prioritized roadmap, is truly ridiculous. Here’s why. Remember those two key inputs to every business case? How much money you’ll make, and how much it will cost? Well, the cold truth is that at this stage, we have no clue on either of these, and we can’t know.</span></p> | |||
| <p class="p1"><span class="s1">We can’t know how much money we’ll make because that depends hugely on how good the solution turns out to be. If the team does an excellent job, this could be wildly successful and literally change the course of the company. On the other hand, the truth is that many product ideas end up making absolutely nothing. And that’s not an exaggeration for effect. Literally nothing. In any case, one of the most critical lessons in product is <em>knowing what we can’t know</em>, and we just can’t know at this stage how much money we’ll make.</span></p> | |||
| <p class="p1"><span class="s1">Likewise, we have no idea what it will cost to build. Without knowing the actual solution, this is extremely hard for engineering to predict. Most experienced engineers will refuse to even give an estimate at this stage, but some are pressured into the old “t-shirt sizing” compromise - just let us know if this is “Small, Medium, Large and Extra Large.”</span></p> | |||
| <p class="p1"><span class="s1">But company’s really want those prioritized roadmaps, and in order to get one they need some kind of system to rate the ideas, so people play the business case game.</span></p> | |||
| <p class="p1"><span class="s1">3. An even bigger issue comes next. Companies get very excited about their <em>roadmaps</em>. I’ve seen countless roadmaps and the vast majority of them are essentially prioritized lists of features. Marketing needs this feature for a campaign. Sales needs this feature for a new customer. Someone wants a PayPal integration. You get the idea.</span></p> | |||
| <p class="p2">But here’s the problem, and it’s maybe the biggest problem of all. I call this the “<em>two inconvenient truths about product</em><strong>.</strong>” </p> | |||
| <p class="p2">The first truth is that at least <em>half of our ideas are just not going to work</em>. There are many reasons for an idea to not work out. The most common is that the customers just aren't as excited about this idea as we are. So they choose not to use it. Sometimes they want to use it, but they try it out and it's so complicated that it's simply more trouble than it's worth, which ends up as the same result – the users don't choose to use it. Sometimes the issue is that the customers would love it but it turns out to be much more involved to build than we thought, and we decide we simply can't afford the time and money to actually deliver.</p> | |||
| <p class="p1"><span class="s1">So I promise you that at least half the ideas on your roadmap are not going to deliver what you hope. By the way, the really good teams assume that at least three quarters of the ideas won’t perform like we hope.</span></p> | |||
| <p class="p1"><span class="s1">If that's not bad enough, the second inconvenient truth is that even with the ideas that do prove to have potential, it typically takes <em>several iterations</em> to get the implementation of this idea to the point where it actually delivers the necessary business value. We call that “time to money.”</span></p> | |||
| <p class="p1"><span class="s1">One of the most important things about product that I’ve learned is that there is simply no escaping these truths, no matter how smart you might be. And I've had the good fortune to work with many truly exceptional product teams. The real difference is how you deal with these truths.</span></p> | |||
| <p class="p1"><span class="s1">4. Next let’s talk about the <em>role of product</em> in this model. In fact, we wouldn’t even really call this role product at all. It’s really a form of project management. In this model it’s more about <em>gathering requirements and documenting them</em> for engineers. At this point let me just say that this is 180 degrees away from modern product management.</span></p> | |||
| <p class="p1"><span class="s1">5. It’s a similar story with the <em>role of design</em>. It’s way too late in the game to get the real value of design, and mostly what’s being done is what we call the “lipstick on the pig” model. The damage has already been done, and now we’re just trying to put a coat of paint on the mess. The UX designers know this is not good, but they try to make it look as nice and consistent as they can.</span></p> | |||
| <p class="p1"><span class="s1">6. Maybe the biggest missed opportunity in this model, is the fact that <em>engineering gets brought in way too late</em><strong>. </strong>We say if you’re just using your engineers to code, you’re only getting about half their value. The little secret in product is that <em>engineers are typically the best single source of innovation</em>, yet they are not even invited to the party in this process.</span></p> | |||
| <p class="p1"><span class="s1">7. Not only is engineering brought in way too late, but the principles and key benefits of <em>Agile</em> enter the picture far too late. Teams using Agile in this way are getting maybe 20% of the actual value and potential of Agile methods. What you’re really seeing is Agile for delivery but the rest of the organization and context is anything but agile.</span></p> | |||
| <p class="p1"><span class="s1">8. This entire process is very <em>project-centric</em>. The company usually funds projects, staffs projects, and pushes these projects through the organization and finally launches projects. Unfortunately, <em>projects are output and product is all about outcome</em><strong>. </strong>This process predictably leads to orphaned projects. Yes, something was finally released but it doesn’t meet its objectives so what really was the point? In any case, it’s a serious problem and not close to how we need to build products.</span></p> | |||
| <p class="p1"><span class="s1">9. The biggest flaw of the old Waterfall process has always been, and remains, that all the risk is at the end. This means that <em>customer validation happens way too late</em><strong>. </strong></span></p> | |||
| <p class="p1"><span class="s1">You’ve hopefully heard of Lean Startup methods, which are very much at the heart of the alternative. The key principle is to reduce waste, and one of the biggest forms of waste is to design, build, test and deploy a feature or product only to find out it is not what was needed. The irony is that many teams <em>believe</em> they’re applying lean principles, yet they follow this basic process I’ve just described. And then I point out to them that they are actually trying out ideas in one of the the most expensive, slowest ways we know.</span></p> | |||
| <p class="p1"><span class="s1">10. Finally, while we’re busy doing this process and wasting our time and money, the biggest loss of all usually turns out to be the <em>opportunity cost</em> of what the organization <em>could have and should have</em> been doing instead. We can’t get that time or money back.</span></p> | |||
| <p class="p2">To me it’s no surprise that so many companies spend so much time and money and get so little in return. I warned you this could be depressing.</p> | |||
| <p class="p2">The good news is that I promise you that the best teams operate nothing like what I’ve just described.</p> | |||
| <p class="p2">I have written many articles about the various aspects of how the best teams work. Product Discovery is how we come up with winning solutions to the problems we are attacking. Discovery is an active and ongoing collaboration between product, user experience design, and engineering. Continuous Discovery and Continuous Delivery happen in parallel. Features on roadmaps (output) are replaced by business problems to be solved (outcome). The goal is product/market fit.</p> | |||
| <p class="p1"><span class="s1">If your company is still running this old and long-obsolete process, then hopefully you can shine a light on this and start the transition to the future. And hopefully you’ll do this before you find yourself disrupted by a startup or competitor that is able to move much faster and more effectively than you can.</span></p> | |||
+ 658
- 0
cache/066bf62d8c62ec44745481121144a4a9/index.html
View File
| @@ -0,0 +1,658 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Thoughts On Workshop Design (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Thoughts On Workshop Design (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design">Source originale du contenu</a></h3> | |||
| <p>Yesterday I got to participate in a workshop called <strong>Distributed Web of Care</strong>, hosted by <a href="http://rhizome.org/">Rhizome</a> that took place at the <a href="https://www.newmuseum.org/">New Museum of Contemporary Art</a> in New York City. I am sharing about it because it was an interesting hybrid of a workshop/talk and I learned a lot from its facilitation and my experience of it, both in the lead-up and on the day itself.</p> | |||
| <h2 id="distributed-web-of-care">Distributed Web of Care</h2> | |||
| <p>The subject was ostensibly the Distributed Web, and we looked at two organizations active in that space: <a href="https://ipfs.io/">IPFS</a> and <a href="https://datproject.org/">The Dat Project</a>. The deeper focus of the day, however, was how can we look at a distributed communication structure/protocol as an opportunity to rethink the current Internet in which centralized corporations/governments/states control our data (and our pathways to and through that data).</p> | |||
| <p>By examining the way that the distributed web works, and contrasting <a href="https://github.com/ipfs/specs/tree/master/merkledag#thin-waist-of-data-structures">its protocols</a> with our <a href="https://www.youtube.com/watch?v=uXumm52oBMo">current ones</a>, are we able to imagine networks and interactions where people care for one another and are able to care for our own data? At the very least, by visualizing current centralized protocols, and “grounding <em>The Cloud</em>” in its infrastructural and facebook-amazon-google-centered reality, it gives participants a way of understanding, at a high level, what’s going on when we use our apps.</p> | |||
| <p>While caring for each other through a network might sound naïve—<em>of course there will be bad actors, and simply humans being humans!</em>—thinking about technology protocols in the context of what kind of interactions they enable, and what kinds of mitigations would need to be in place for their particular weaknesses is a valuable exercise. It highlights the values you want to bring to a space and in doing so affords a level of imaginative agency that we often don’t apply to the technologies that shape us.</p> | |||
| <h2 id="pre-workshop">Pre-workshop</h2> | |||
| <p>The workshop was led and organized by <a href="http://taeyoonchoi.com/">Taeyoon Choi</a>, who is one of my teachers and the co-founder of the <a href="http://sfpc.io">School of Poetic Computation</a>. Taeyoon organized the workshop, wrote the majority of content, and stood up the structural frame of the presentation. He did the organizing in a very collaborative and open fashion, and I’m going to discuss those effects here.</p> | |||
| <p>He invited a group of students and collaborators to participate in a series of discussions both in-person and in an email thread and shared online document. He asked each participant what their vision was for the future of the Internet, as well as how they would like to contribute on Saturday.</p> | |||
| <p>When I didn’t have a specific idea for my contribution, Taeyoon asked me to elaborate on a story I’m working on which frames the technological underpinnings of <a href="https://en.wikipedia.org/wiki/Blockchain">the blockchain</a> as a letter to a non-technical girlfriend of mine, with a specific focus on how <a href="https://en.wikipedia.org/wiki/Merkle_tree">Merkle</a> works. This was welcome because it gave me guidance for how to participate in a space that I hadn’t designed and conceptualized. Other students had discussions they wanted to initiate, or were also asked to take a technical aspect of the current or distributed web architecture and elaborate upon it.</p> | |||
| <p>The discussions were interesting because Taeyoon had gathered people into a group who didn’t previously all know one another. I got to meet some folks who are working on <a href="https://newcomputers.group/">The New Computers Group</a> and <a href="https://nycmesh.net/">NYC Mesh</a>, both of which were new to me, and also hear about issues that are top-of-mind for my fellow students, including:</p> | |||
| <ul> | |||
| <li>How/will a diversity of networks emerge over time such that they’re not all routed through the U.S.?</li> | |||
| <li>How/will trust be established in distributed environments?</li> | |||
| <li>What happens with fake identities when cloning your online presence becomes so easy?</li> | |||
| </ul> | |||
| <p>There was a casual feel in the collaboration: rather than creating a space of <em>Productivity Stress</em>, the planning and preparation had an emergent feel. This was notably different from recent preparations for talks that I’ve done, which have felt high-pressure, time-intensive and isolating. For the workshop presentation, I contributed three slides on Merkle, which I will share in a separate post.</p> | |||
| <p>Takeaway: Collaboration is more instructive, thought-provoking, and time-wise easier than working alone!</p> | |||
| <h2 id="day-of">Day-Of</h2> | |||
| <p>I arrived at the New Museum at 9:30 AM. It was a beautiful blue-sky sunny day and I got to walk across the Lower East Side. We were led into a beautiful auditorium in the museum with a helpful staff.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/empty-room.jpg" alt="Empty Room" title="Empty Auditorium"/> <img src="http://blog.fabled.net/assets/img/sfpc/week5/stage.jpg" alt="Presentation Stage" title="Presentation Stage"/></p> | |||
| <p>Taeyoon had brought string and stickers for the interactive portion of the workshop in which people would physically model the Internet in various forms (centralized, de-centralized, distributed).</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/supplies.jpg" alt="Supplies for the distributed web" title="Supplies for the distributed web"/></p> | |||
| <p>A few of us wondered if the different color strings and dots were intended to represent different concepts (e.g. “Use a blue string for a distributed connection, a pink one if you’re a host, etc”) but he wanted to keep it informal. This was a smart decision because later when people were participating, focus could be on the interaction and not strain around remembering a rule-set.</p> | |||
| <p>We started by “activating” one of the walls by putting a network up. Look how beautiful the simple colorful strings and dots look on the white wall.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/wall-network.jpg" alt="Wall Network" title="Wall Network"/></p> | |||
| <p>And then we practiced an interaction where three of us played out the data-flow of a centralized, and a distributed network.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/network-practice.png" alt="Practice" title="Practice"/></p> | |||
| <h2 id="workshop">Workshop</h2> | |||
| <p>When the workshop started, Taeyoon took to the stage and began the presentation. The first part was more lecture-style, the second part was an interactive exercise with the audience. He started by presenting the Code of Conduct for the workshop and then reading it out loud. My first thought was, “this is a lot to read for a 90 minute workshop”: it took up a few slides and was a lot of text.</p> | |||
| <p>When he was done, he acknowledged that while that might be a lot to read, in the context of the idea of setting up distributed networks <strong>of Care</strong>, it is important to start with centering the community guidelines <strong>around the practices of Care</strong>. I hadn’t thought of this and was moved by how this act of reading, as well as the act of taking the time to let it be heard, dovetailed with the purpose of the workshop. Given that a Code of Conduct is a document that is often left for an individual to find for themselves if they want to (or more often, if they <em>need to</em>), rather than centered equally for everyone, I found the reading to be a powerful act.</p> | |||
| <p>In addition to reading the Code of Conduct for our workshop, he linked to a set of community guidlines put out by the <a href="http://yellowjacketscollective.com/">Yellow Jackets Collective</a>. I am sharing them here for contemptation, as I myself like the bluntness of the language and ideas (e.g. <em>No White Nonsense</em>) and the clarity of some definitions (specifically that of <em>Toxic Masculinity</em>):</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/yjc-1.png" alt="YJC Community Conduct Part 1" title="YJC Community Conduct 1"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/yjc-2.png" alt="YJC Community Conduct Part 2" title="YJC Community Conduct 2"/></p> | |||
| <p>During the presentation, Taeyoon presented ideas and then had individuals come up on stage to speak about the parts of work they had prepared. Below are <a href="https://celltowertrees-sfpc.tumblr.com/">Kelly</a>, Callil, <a href="https://medium.com/@jsteinbrechr/">Hans</a> and <a href="http://nabilhassein.github.io/about/">Nabil</a>:</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/kelly.jpg" alt="Kelly" title="Kelly"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/callil.jpg" alt="Callil" title="Kelly"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/hans.jpg" alt="Hans" title="Kelly"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/nabil.jpg" alt="Nabil" title="Nabil"/></p> | |||
| <p>This presentation style shared the stage and broke up the singularity of the presentation with different voices and discussions. As one of my classmates <a href="https://medium.com/@apyrchla">Agnes</a> pointed out afterwards, a stage can be problematic in establishing a singular authority, and this was a nice way to maintain a coherent workshop structure without going overboard on the “one singular authority” aspect of the experience. In addition, it differed from a panel in that it was a short series of facilitated conversations.</p> | |||
| <h2 id="the-interactive-portion">The Interactive Portion</h2> | |||
| <p>After the speaking part of the presentation was done, a few of us did a small demonstration on stage with strings and stickers, enacting the data-flow of a shared google doc through Google itself. I got to play the part of Google (and made the character choice to have Google be only 5’2”, in order to humanize it):</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/playing-google.png" alt="Us playing Google" title="Playing Google"/></p> | |||
| <p>We touched on issues including:</p> | |||
| <ul> | |||
| <li>Ownership, e.g. the application provider storing copies of your data</li> | |||
| <li>How/are people severed from their data if the application provider goes offline?</li> | |||
| <li>The redundancies of all information-flow going through a central provider</li> | |||
| </ul> | |||
| <p>We then “cut” some of those connections, with a scissors, and re-formed as a distributed network, identifying behaviors such as:</p> | |||
| <ul> | |||
| <li>The fact that each node would have a complete copy of the data</li> | |||
| <li>The central hub is not always the shortest connection point between nodes</li> | |||
| <li>What does it mean for data survival/archival when data is distributed?</li> | |||
| </ul> | |||
| <p>Visualizing these data flows, even when clumsily enacted, puts shapes to concepts that may have been to this point either abstractions or not thought of: It’s very different seeing a ‘dot’ of data being passed down long paths to arrive at its destination than to think about something more poetic-sounding but ethereal, e.g. <em>data traveling in the cloud</em>.</p> | |||
| <p>Next, the audience was invited into the floor area and assembled themselves into networks of different configurations.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/taeyoon-group.jpg" alt="Taeyoon with Group" title="Small Group"/></p> | |||
| <p>This was a fun session, and made easier by the informality and low-tech aspect of the tools. Once people assembled, configurations changed, people tried things like sending a <em>Like</em> or a <em>Smiley</em> across the network.</p> | |||
| <p>The first portion of this was network-assembly and data-transfer, the second portion was to have three pre-determined actors—Facebook, The State, and The Government—intervene in the existing networks and reconfigure them for their own interests. So, after a few minutes of self-organizing, the larger actors entered. The picture on the right, below, represents Facebook as a central data collection point. On the left, the groups kneeled, to show the subordinate agency of their networks when under the control of a government.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/facebook.jpg" alt="Facebook Group" title="Facebook"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/kneeling-group-2.jpg" alt="Kneeling Group" title="Kneeling Group"/></p> | |||
| <h2 id="workshop-thoughts">Workshop Thoughts</h2> | |||
| <p>I enjoyed all aspects of this workshop, and it was notable because a lot of the times, events that appear fun and well-put-together in public are a result of high-stress behind-the-scenes work. (Perhaps Tayoon was very stressed, though if so it was not apparent, but I think for the rest of us the work was a healthy size). Because of this, I gave a lot of thought to what in the design of the workshop made it successful as a participant and, I believe, for the audience.</p> | |||
| <p>Some of the questions I’m taking away for future organizing include:</p> | |||
| <ul> | |||
| <li>How can you support the workshop topic in the design of the workshop itself? For example, this workshop shared the stage, established guidelines of a safe community, and created loose networks of expertise. This fit with its joint topics of caring for others, and distributing information.</li> | |||
| <li>For technical demonstrations for a less-technical audience, leaving out some of of the technically granularity can paint a clearer picture, but talking about what specifics to enact/leave-out beforehand will clarify the interactions/intents for the performers.</li> | |||
| <li>Low-tech tools for play are valuable because the interactions are emphasized over the correctness of the interactions.</li> | |||
| <li>“Activating” the space in advance in whatever way fits the workshop makes it an interesting space when people enter (in our case, decorating the wall with a network of strings and dots).</li> | |||
| <li>Building a workshop out of a diverse group of voices is stronger than coming from only one voice, or perspective</li> | |||
| <li>Human-scale helps when talking about technology.</li> | |||
| <li>Collaborate when putting together a workshop: rely on other voices to provide expertise or elaboration you don’t have. This will be more informative and less stress to build.</li> | |||
| </ul> | |||
| <h2 id="connect-the-dots">Connect The Dots</h2> | |||
| <p>I took a few pictures of folks at the end, with all the different “dots” on their shirts that represented the “data” they’d collected as well as whether or not they were a node. I think it’s an interesting artifact of our usually “invisible” dabbling in <em>The Cloud</em>.</p> | |||
| <p>Enjoy!</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/ailladi-dots.jpg" alt="Ailladi Dots" title="Dots"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/callil-dots.jpg" alt="Callil Dots" title="Dots"/></p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/person-1.jpg" alt="Person 1 Dots" title="Dots"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/person-2.jpg" alt="Person 2 Dots" title="Dots"/></p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 129
- 0
cache/066bf62d8c62ec44745481121144a4a9/index.md
View File
| @@ -0,0 +1,129 @@ | |||
| title: Thoughts On Workshop Design | |||
| url: http://blog.fabled.net/sfpc,learning,workshop/thoughts-on-workshop-design | |||
| hash_url: 066bf62d8c62ec44745481121144a4a9 | |||
| <p>Yesterday I got to participate in a workshop called <strong>Distributed Web of Care</strong>, hosted by <a href="http://rhizome.org/">Rhizome</a> that took place at the <a href="https://www.newmuseum.org/">New Museum of Contemporary Art</a> in New York City. I am sharing about it because it was an interesting hybrid of a workshop/talk and I learned a lot from its facilitation and my experience of it, both in the lead-up and on the day itself.</p> | |||
| <h2 id="distributed-web-of-care">Distributed Web of Care</h2> | |||
| <p>The subject was ostensibly the Distributed Web, and we looked at two organizations active in that space: <a href="https://ipfs.io/">IPFS</a> and <a href="https://datproject.org/">The Dat Project</a>. The deeper focus of the day, however, was how can we look at a distributed communication structure/protocol as an opportunity to rethink the current Internet in which centralized corporations/governments/states control our data (and our pathways to and through that data).</p> | |||
| <p>By examining the way that the distributed web works, and contrasting <a href="https://github.com/ipfs/specs/tree/master/merkledag#thin-waist-of-data-structures">its protocols</a> with our <a href="https://www.youtube.com/watch?v=uXumm52oBMo">current ones</a>, are we able to imagine networks and interactions where people care for one another and are able to care for our own data? At the very least, by visualizing current centralized protocols, and “grounding <em>The Cloud</em>” in its infrastructural and facebook-amazon-google-centered reality, it gives participants a way of understanding, at a high level, what’s going on when we use our apps.</p> | |||
| <p>While caring for each other through a network might sound naïve—<em>of course there will be bad actors, and simply humans being humans!</em>—thinking about technology protocols in the context of what kind of interactions they enable, and what kinds of mitigations would need to be in place for their particular weaknesses is a valuable exercise. It highlights the values you want to bring to a space and in doing so affords a level of imaginative agency that we often don’t apply to the technologies that shape us.</p> | |||
| <h2 id="pre-workshop">Pre-workshop</h2> | |||
| <p>The workshop was led and organized by <a href="http://taeyoonchoi.com/">Taeyoon Choi</a>, who is one of my teachers and the co-founder of the <a href="http://sfpc.io">School of Poetic Computation</a>. Taeyoon organized the workshop, wrote the majority of content, and stood up the structural frame of the presentation. He did the organizing in a very collaborative and open fashion, and I’m going to discuss those effects here.</p> | |||
| <p>He invited a group of students and collaborators to participate in a series of discussions both in-person and in an email thread and shared online document. He asked each participant what their vision was for the future of the Internet, as well as how they would like to contribute on Saturday.</p> | |||
| <p>When I didn’t have a specific idea for my contribution, Taeyoon asked me to elaborate on a story I’m working on which frames the technological underpinnings of <a href="https://en.wikipedia.org/wiki/Blockchain">the blockchain</a> as a letter to a non-technical girlfriend of mine, with a specific focus on how <a href="https://en.wikipedia.org/wiki/Merkle_tree">Merkle</a> works. This was welcome because it gave me guidance for how to participate in a space that I hadn’t designed and conceptualized. Other students had discussions they wanted to initiate, or were also asked to take a technical aspect of the current or distributed web architecture and elaborate upon it.</p> | |||
| <p>The discussions were interesting because Taeyoon had gathered people into a group who didn’t previously all know one another. I got to meet some folks who are working on <a href="https://newcomputers.group/">The New Computers Group</a> and <a href="https://nycmesh.net/">NYC Mesh</a>, both of which were new to me, and also hear about issues that are top-of-mind for my fellow students, including:</p> | |||
| <ul> | |||
| <li>How/will a diversity of networks emerge over time such that they’re not all routed through the U.S.?</li> | |||
| <li>How/will trust be established in distributed environments?</li> | |||
| <li>What happens with fake identities when cloning your online presence becomes so easy?</li> | |||
| </ul> | |||
| <p>There was a casual feel in the collaboration: rather than creating a space of <em>Productivity Stress</em>, the planning and preparation had an emergent feel. This was notably different from recent preparations for talks that I’ve done, which have felt high-pressure, time-intensive and isolating. For the workshop presentation, I contributed three slides on Merkle, which I will share in a separate post.</p> | |||
| <p>Takeaway: Collaboration is more instructive, thought-provoking, and time-wise easier than working alone!</p> | |||
| <h2 id="day-of">Day-Of</h2> | |||
| <p>I arrived at the New Museum at 9:30 AM. It was a beautiful blue-sky sunny day and I got to walk across the Lower East Side. We were led into a beautiful auditorium in the museum with a helpful staff.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/empty-room.jpg" alt="Empty Room" title="Empty Auditorium"/> <img src="http://blog.fabled.net/assets/img/sfpc/week5/stage.jpg" alt="Presentation Stage" title="Presentation Stage"/></p> | |||
| <p>Taeyoon had brought string and stickers for the interactive portion of the workshop in which people would physically model the Internet in various forms (centralized, de-centralized, distributed).</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/supplies.jpg" alt="Supplies for the distributed web" title="Supplies for the distributed web"/></p> | |||
| <p>A few of us wondered if the different color strings and dots were intended to represent different concepts (e.g. “Use a blue string for a distributed connection, a pink one if you’re a host, etc”) but he wanted to keep it informal. This was a smart decision because later when people were participating, focus could be on the interaction and not strain around remembering a rule-set.</p> | |||
| <p>We started by “activating” one of the walls by putting a network up. Look how beautiful the simple colorful strings and dots look on the white wall.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/wall-network.jpg" alt="Wall Network" title="Wall Network"/></p> | |||
| <p>And then we practiced an interaction where three of us played out the data-flow of a centralized, and a distributed network.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/network-practice.png" alt="Practice" title="Practice"/></p> | |||
| <h2 id="workshop">Workshop</h2> | |||
| <p>When the workshop started, Taeyoon took to the stage and began the presentation. The first part was more lecture-style, the second part was an interactive exercise with the audience. He started by presenting the Code of Conduct for the workshop and then reading it out loud. My first thought was, “this is a lot to read for a 90 minute workshop”: it took up a few slides and was a lot of text.</p> | |||
| <p>When he was done, he acknowledged that while that might be a lot to read, in the context of the idea of setting up distributed networks <strong>of Care</strong>, it is important to start with centering the community guidelines <strong>around the practices of Care</strong>. I hadn’t thought of this and was moved by how this act of reading, as well as the act of taking the time to let it be heard, dovetailed with the purpose of the workshop. Given that a Code of Conduct is a document that is often left for an individual to find for themselves if they want to (or more often, if they <em>need to</em>), rather than centered equally for everyone, I found the reading to be a powerful act.</p> | |||
| <p>In addition to reading the Code of Conduct for our workshop, he linked to a set of community guidlines put out by the <a href="http://yellowjacketscollective.com/">Yellow Jackets Collective</a>. I am sharing them here for contemptation, as I myself like the bluntness of the language and ideas (e.g. <em>No White Nonsense</em>) and the clarity of some definitions (specifically that of <em>Toxic Masculinity</em>):</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/yjc-1.png" alt="YJC Community Conduct Part 1" title="YJC Community Conduct 1"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/yjc-2.png" alt="YJC Community Conduct Part 2" title="YJC Community Conduct 2"/></p> | |||
| <p>During the presentation, Taeyoon presented ideas and then had individuals come up on stage to speak about the parts of work they had prepared. Below are <a href="https://celltowertrees-sfpc.tumblr.com/">Kelly</a>, Callil, <a href="https://medium.com/@jsteinbrechr/">Hans</a> and <a href="http://nabilhassein.github.io/about/">Nabil</a>:</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/kelly.jpg" alt="Kelly" title="Kelly"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/callil.jpg" alt="Callil" title="Kelly"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/hans.jpg" alt="Hans" title="Kelly"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/nabil.jpg" alt="Nabil" title="Nabil"/></p> | |||
| <p>This presentation style shared the stage and broke up the singularity of the presentation with different voices and discussions. As one of my classmates <a href="https://medium.com/@apyrchla">Agnes</a> pointed out afterwards, a stage can be problematic in establishing a singular authority, and this was a nice way to maintain a coherent workshop structure without going overboard on the “one singular authority” aspect of the experience. In addition, it differed from a panel in that it was a short series of facilitated conversations.</p> | |||
| <h2 id="the-interactive-portion">The Interactive Portion</h2> | |||
| <p>After the speaking part of the presentation was done, a few of us did a small demonstration on stage with strings and stickers, enacting the data-flow of a shared google doc through Google itself. I got to play the part of Google (and made the character choice to have Google be only 5’2”, in order to humanize it):</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/playing-google.png" alt="Us playing Google" title="Playing Google"/></p> | |||
| <p>We touched on issues including:</p> | |||
| <ul> | |||
| <li>Ownership, e.g. the application provider storing copies of your data</li> | |||
| <li>How/are people severed from their data if the application provider goes offline?</li> | |||
| <li>The redundancies of all information-flow going through a central provider</li> | |||
| </ul> | |||
| <p>We then “cut” some of those connections, with a scissors, and re-formed as a distributed network, identifying behaviors such as:</p> | |||
| <ul> | |||
| <li>The fact that each node would have a complete copy of the data</li> | |||
| <li>The central hub is not always the shortest connection point between nodes</li> | |||
| <li>What does it mean for data survival/archival when data is distributed?</li> | |||
| </ul> | |||
| <p>Visualizing these data flows, even when clumsily enacted, puts shapes to concepts that may have been to this point either abstractions or not thought of: It’s very different seeing a ‘dot’ of data being passed down long paths to arrive at its destination than to think about something more poetic-sounding but ethereal, e.g. <em>data traveling in the cloud</em>.</p> | |||
| <p>Next, the audience was invited into the floor area and assembled themselves into networks of different configurations.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/taeyoon-group.jpg" alt="Taeyoon with Group" title="Small Group"/></p> | |||
| <p>This was a fun session, and made easier by the informality and low-tech aspect of the tools. Once people assembled, configurations changed, people tried things like sending a <em>Like</em> or a <em>Smiley</em> across the network.</p> | |||
| <p>The first portion of this was network-assembly and data-transfer, the second portion was to have three pre-determined actors—Facebook, The State, and The Government—intervene in the existing networks and reconfigure them for their own interests. So, after a few minutes of self-organizing, the larger actors entered. The picture on the right, below, represents Facebook as a central data collection point. On the left, the groups kneeled, to show the subordinate agency of their networks when under the control of a government.</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/facebook.jpg" alt="Facebook Group" title="Facebook"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/kneeling-group-2.jpg" alt="Kneeling Group" title="Kneeling Group"/></p> | |||
| <h2 id="workshop-thoughts">Workshop Thoughts</h2> | |||
| <p>I enjoyed all aspects of this workshop, and it was notable because a lot of the times, events that appear fun and well-put-together in public are a result of high-stress behind-the-scenes work. (Perhaps Tayoon was very stressed, though if so it was not apparent, but I think for the rest of us the work was a healthy size). Because of this, I gave a lot of thought to what in the design of the workshop made it successful as a participant and, I believe, for the audience.</p> | |||
| <p>Some of the questions I’m taking away for future organizing include:</p> | |||
| <ul> | |||
| <li>How can you support the workshop topic in the design of the workshop itself? For example, this workshop shared the stage, established guidelines of a safe community, and created loose networks of expertise. This fit with its joint topics of caring for others, and distributing information.</li> | |||
| <li>For technical demonstrations for a less-technical audience, leaving out some of of the technically granularity can paint a clearer picture, but talking about what specifics to enact/leave-out beforehand will clarify the interactions/intents for the performers.</li> | |||
| <li>Low-tech tools for play are valuable because the interactions are emphasized over the correctness of the interactions.</li> | |||
| <li>“Activating” the space in advance in whatever way fits the workshop makes it an interesting space when people enter (in our case, decorating the wall with a network of strings and dots).</li> | |||
| <li>Building a workshop out of a diverse group of voices is stronger than coming from only one voice, or perspective</li> | |||
| <li>Human-scale helps when talking about technology.</li> | |||
| <li>Collaborate when putting together a workshop: rely on other voices to provide expertise or elaboration you don’t have. This will be more informative and less stress to build.</li> | |||
| </ul> | |||
| <h2 id="connect-the-dots">Connect The Dots</h2> | |||
| <p>I took a few pictures of folks at the end, with all the different “dots” on their shirts that represented the “data” they’d collected as well as whether or not they were a node. I think it’s an interesting artifact of our usually “invisible” dabbling in <em>The Cloud</em>.</p> | |||
| <p>Enjoy!</p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/ailladi-dots.jpg" alt="Ailladi Dots" title="Dots"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/callil-dots.jpg" alt="Callil Dots" title="Dots"/></p> | |||
| <p><img src="http://blog.fabled.net/assets/img/sfpc/week5/person-1.jpg" alt="Person 1 Dots" title="Dots"/> | |||
| <img src="http://blog.fabled.net/assets/img/sfpc/week5/person-2.jpg" alt="Person 2 Dots" title="Dots"/></p> | |||
+ 551
- 0
cache/070ea3ee2d8e0320a83576036b8274db/index.html
View File
| @@ -0,0 +1,551 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>#CivicTech Primer: What is “civic tech”? (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://medium.com/@grodeska/civictech-primer-what-is-civic-tech-7ea788e766d3"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| #CivicTech Primer: What is “civic tech”? (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://medium.com/@grodeska/civictech-primer-what-is-civic-tech-7ea788e766d3">Source originale du contenu</a></h3> | |||
| <p name="7020" id="7020" class="graf--p graf-after--figure">Here in the Second Great Internet Bubble, we’ve come to accept Marc Andreessen’s maxim that “<em class="markup--em markup--p-em">software is eating the world</em>.” The evidence is outstanding for sectors like retail, social, finance and entertainment. And as you read this, software is quickly devouring many more sectors and systems, from transportation to health to energy. But our civic sphere — <a href="https://en.wikipedia.org/wiki/Public_sphere#Definitions_of_the_public_sphere" data-href="https://en.wikipedia.org/wiki/Public_sphere#Definitions_of_the_public_sphere" class="markup--anchor markup--p-anchor" rel="nofollow">the relationships in the public world that gather us together</a> into communities, cities, states and nations — stubbornly resists the advances of software.</p> | |||
| <p name="d097" id="d097" class="graf--p graf-after--p">Enter civic tech, a movement that aims to revitalize and transform some of our most fundamental societal institutions. A movement which also happens to account for <a href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" data-href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" class="markup--anchor markup--p-anchor" rel="nofollow">$6.4 billion to be spent in 2015 to connect citizens to services, and to one another</a>.</p> | |||
| <h4 name="6f8d" id="6f8d" class="graf--h4 graf-after--p">So What is “Civic Tech”?</h4> | |||
| <p name="2767" id="2767" class="graf--p graf-after--h4">For all the recent attention, civic tech remains an amorphous term. <a href="http://techcrunch.com/2015/04/29/civic-tech-is-ready-for-investment/" data-href="http://techcrunch.com/2015/04/29/civic-tech-is-ready-for-investment/" class="markup--anchor markup--p-anchor" rel="nofollow">TechCrunch recently offered a narrow interpretation of civic tech</a> as that used to “<em class="markup--em markup--p-em">empower citizens or help make government more accessible, efficient and effective</em>.” However, <a href="http://www.slideshare.net/knightfoundation/knight-civictech" data-href="http://www.slideshare.net/knightfoundation/knight-civictech" class="markup--anchor markup--p-anchor" rel="nofollow">the Knight Foundation painted a broader picture in their 2013 report on the rise of civic tech</a>, going beyond government to include “<em class="markup--em markup--p-em">residents engaging in their communities, including sharing their time, information and resources</em>.” Yet some draw a wider circle still. Beat reporter <a href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" data-href="http://www.techrepublic.com/article/civic-tech-in-2015-6-9-billion-to-connect-citizens-to-services-and-to-one-another/" class="markup--anchor markup--p-anchor" rel="nofollow">Alex Howard thinks of civic tech</a> “as any tool or process that people as individuals or groups may use to affect the public arena.” And <a href="https://twitter.com/jedmiller/status/606450379253882881" data-href="https://twitter.com/jedmiller/status/606450379253882881" class="markup--anchor markup--p-anchor" rel="nofollow">Micah Sifry of Personal Democracy Media adds that civic technology “cannot be neutral,”</a> and only technology that is “<em class="markup--em markup--p-em">used for public good and betters the lives of the many, not just the few</em>” can be considered civic.</p> | |||
| <p name="cf58" id="cf58" class="graf--p graf-after--p">A brief history lesson may offer some clarity. Civic tech has its roots in government technology, a movement jump started by <a href="http://www.forbes.com/2009/08/10/government-internet-software-technology-breakthroughs-oreilly.html" data-href="http://www.forbes.com/2009/08/10/government-internet-software-technology-breakthroughs-oreilly.html" class="markup--anchor markup--p-anchor" rel="nofollow">Tim O’Reilly’s formative Government 2.0 call to action in 2009</a>. Decrying the “<em class="markup--em markup--p-em">vending machine</em>” model for government in which citizens put in our taxes and get services in return, he argued that we instead need an interoperable, extensible platform for government upon which anyone can build services that increase transparency, efficiency and participation.</p> | |||
| <p name="c512" id="c512" class="graf--p graf-after--p">Since that clarion call, a host of organizations like <a href="http://codeforamerica.org/" data-href="http://codeforamerica.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Code for America</a>, a “<em class="markup--em markup--p-em">Peace Corps for Geeks</em>,” have carried the conversation forward, out of government and into the tech sector. Viable business models have developed, like that of <a href="http://change.org/" data-href="http://change.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Change.org</a> and <a href="http://www2.seamlessdocs.com/" data-href="http://www2.seamlessdocs.com/" class="markup--anchor markup--p-anchor" rel="nofollow">SeamlessDocs</a>, and funders like <a href="https://www.omidyar.com/" data-href="https://www.omidyar.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Omidyar Network</a>, <a href="http://www.tumml.org/" data-href="http://www.tumml.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Tumml</a>, and <a href="http://govtechfund.com/" data-href="http://govtechfund.com/" class="markup--anchor markup--p-anchor" rel="nofollow">GovTech Fund</a> are starting to add civic tech to their portfolios. Tech inroads to government are being paved with the adoption of Chief Innovation Officers and open data portals at the local level and ground-breaking outfits like <a href="https://18f.gsa.gov/" data-href="https://18f.gsa.gov/" class="markup--anchor markup--p-anchor" rel="nofollow">18F</a> and the <a href="https://www.whitehouse.gov/digital/united-states-digital-service" data-href="https://www.whitehouse.gov/digital/united-states-digital-service" class="markup--anchor markup--p-anchor" rel="nofollow">U.S. Digital Service</a> at the Federal. This maturation and expansion has led <a href="http://www.knightfoundation.org/blogs/knightblog/2013/12/9/knight-foundations-civic-tech-report-why-it-matters/" data-href="http://www.knightfoundation.org/blogs/knightblog/2013/12/9/knight-foundations-civic-tech-report-why-it-matters/" class="markup--anchor markup--p-anchor" rel="nofollow">Tom Steinberg, founder of longstanding civic technology lab mySociety,</a> to observe that, as a brand name, <a href="http://www.google.com/trends/explore#q=civic%20tech%2C%20edemocracy%2C%20egovernment%2C%20digital%20government%2C%20gov%202.0&geo=US&cmpt=q&tz=Etc%2FGMT%2B7" data-href="http://www.google.com/trends/explore#q=civic%20tech%2C%20edemocracy%2C%20egovernment%2C%20digital%20government%2C%20gov%202.0&geo=US&cmpt=q&tz=Etc%2FGMT%2B7" class="markup--anchor markup--p-anchor" rel="nofollow"><em class="markup--em markup--p-em">“civic tech” has won out</em></a><em class="markup--em markup--p-em"> over past alternatives like “eGovernment” and “Gov 2.0</em>.”</p> | |||
| <h4 name="ddf9" id="ddf9" class="graf--h4 graf-after--p">Civic Tech is a Big Tent for Democracy</h4> | |||
| <p name="34f9" id="34f9" class="graf--p graf-after--h4">Which leads us to the present. I view civic tech as a new “big tent” movement for democracy that encapsulates many smaller segments, such as gov tech, online campaigning, digital advocacy, and voting tech. I am also a firm believer that “civic” is the operative word, meaning “us” and “we.” That is, people and communities, along with our hopes, dreams and needs, and the decisions that we make together to realize them. <em class="markup--em markup--p-em">With software continually devouring so much of our lives, I see civic tech as an opportunity to embed “we” at the center of our technology</em>. In civic tech, technology is always the means to an end, not the end itself.</p> | |||
| <p name="7575" id="7575" class="graf--p graf-after--p">As you can imagine, this perspective presents a civic tech space as wonderfully varied as the communities it aims to serve. Some will continue to be caught up on definitions. Is Facebook civic tech? What about SnapChat? Certainly, these tools can be used for both positive outcomes, like organizing a rally, or negative outcomes, like bullying or illegal surveillance. The dividing line comes back to intention. <em class="markup--em markup--p-em">Was this technology designed to improve the public good and better the lives of the many?</em></p> | |||
| <p name="b943" id="b943" class="graf--p graf-after--p">Let’s take a look at some of my favorite civic tech tools to illustrate this criteria in action:</p> | |||
| <ul class="postList"><li name="58b4" id="58b4" class="graf--li graf-after--p"><a href="https://neighborland.com/" data-href="https://neighborland.com/" class="markup--anchor markup--li-anchor" rel="nofollow">Neighborland</a>, a public input toolkit that “empowers civic leaders to collaborate with residents in an accessible, participatory, and enjoyable way.”</li><li name="e04f" id="e04f" class="graf--li graf-after--li"><a href="https://www.loomio.org/" data-href="https://www.loomio.org/" class="markup--anchor markup--li-anchor" rel="nofollow">Loomio</a>, a collective decision-making service that helps groups discuss topics, build proposals and make decisions together.</li><li name="66c3" id="66c3" class="graf--li graf-after--li"><a href="http://en.seeclickfix.com/" data-href="http://en.seeclickfix.com/" class="markup--anchor markup--li-anchor" rel="nofollow">SeeClickFix</a>, a communications platform for citizens to report and governments to manage non-emergency issues to foster “transparency, collaboration, and cooperation.</li><li name="7939" id="7939" class="graf--li graf-after--li"><a href="https://handup.org/" data-href="https://handup.org/" class="markup--anchor markup--li-anchor" rel="nofollow">Handup</a>, a charitable giving platform that facilitates direct donations to homeless neighbors in need.</li></ul> | |||
| <p name="5f19" id="5f19" class="graf--p graf-after--li">These and many other inspiring projects give me hope that the civic tech movement, and the passionate community behind it, will transform our communities, our workplaces and institutions to be more equitable, resilient, and even more fun. There are obstacles, of course. Some powerful people and institutions would rather not see communities empowered to make self-directed decisions. But I believe that the civic tech movement is putting people at the center of software development so that software doesn’t eat us, too. That’s why I founded <a href="http://civicmakers.org/" data-href="http://civicmakers.org/" class="markup--anchor markup--p-anchor" rel="nofollow">CivicMakers</a>, to highlight the growing array of civic tech solutions helping more people make better decisions together.</p> | |||
| <p name="a7e8" id="a7e8" class="graf--p graf-after--p graf--last">This is my first of four posts introducing civic tech to those new to the sector. I hope you follow along. And if you have a tool or project you’d like to share, or just want to know more about civic tech, I’d love to hear from you.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://medium.com/@grodeska/civictech-primer-what-is-civic-tech-7ea788e766d3">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 5
- 0
cache/070ea3ee2d8e0320a83576036b8274db/index.md
File diff suppressed because it is too large
View File
+ 626
- 0
cache/071269cdcaaf3e7bc70a4780b64662e6/index.html
View File
| @@ -0,0 +1,626 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Atomic Design (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://bradfrost.com/blog/post/atomic-web-design/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Atomic Design (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://bradfrost.com/blog/post/atomic-web-design/">Source originale du contenu</a></h3> | |||
| <blockquote><p>We’re not designing pages, we’re designing systems of components.—<a href="http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/">Stephen Hay</a></p></blockquote> | |||
| <p>As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.</p> | |||
| <p>A lot has been said about creating <a title="http://24ways.org/2012/design-systems/" href="http://24ways.org/2012/design-systems/">design systems</a>, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.</p> | |||
| <p>In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.</p> | |||
| <p>Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.</p> | |||
| <h2>What is Atomic Design</h2> | |||
| <p>Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:</p> | |||
| <ol> | |||
| <li><a href="#atoms">Atoms</a></li> | |||
| <li><a href="#molecules">Molecules</a></li> | |||
| <li><a href="#organisms">Organisms</a></li> | |||
| <li><a href="#templates">Templates </a></li> | |||
| <li><a href="#pages">Pages </a></li> | |||
| </ol> | |||
| <p><img class="alignnone size-large wp-image-7254" src="http://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png" alt="The progression of atomic design: atoms to molecules to organiams to templates to pages"/></p> | |||
| <p>Let’s explore each stage in more detail.</p> | |||
| <h3 id="atoms">Atoms</h3> | |||
| <p>Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.</p> | |||
| <p><img class="aligncenter size-full wp-image-5992" src="http://bradfrost.com/wp-content/uploads/2013/06/atoms.jpg" alt="Atoms"/></p> | |||
| <p>Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.</p> | |||
| <p>Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.</p> | |||
| <h3 id="molecules">Molecules</h3> | |||
| <p>Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.</p> | |||
| <p>For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.</p> | |||
| <p><img class="aligncenter size-full wp-image-5993" src="http://bradfrost.com/wp-content/uploads/2013/06/molecule.jpg" alt="molecule"/></p> | |||
| <p>Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.</p> | |||
| <h3 id="organisms">Organisms</h3> | |||
| <p>Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.</p> | |||
| <p><img class="aligncenter size-large wp-image-6002" src="http://bradfrost.com/wp-content/uploads/2013/06/organism2.jpg" alt="organism"/></p> | |||
| <p><img class="aligncenter size-large wp-image-6001" src="http://bradfrost.com/wp-content/uploads/2013/06/organism-examples.jpg" alt="organism-examples"/></p> | |||
| <p>We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I’m working with on several projects) uses <a title="http://danielmall.com/articles/rif-element-collages/" href="http://danielmall.com/articles/rif-element-collages/">element collages</a>, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).</p> | |||
| <p>Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.</p> | |||
| <p>Building up from molecules to organisms encourages creating standalone, portable, reusable components.</p> | |||
| <h3 id="templates">Templates</h3> | |||
| <p>At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.</p> | |||
| <p><img class="aligncenter size-large wp-image-6000" src="http://bradfrost.com/wp-content/uploads/2013/06/template1.jpg" alt="template"/></p> | |||
| <p>Templates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place. In my experience working with this methodology, templates begin their life as HTML wireframes, but over time increase fidelity to ultimately become the final deliverable. Bearded Studio in Pittsburgh follow <a title="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups" href="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups">a similar process</a>, where designs start <a title="http://aafh-css.heroku.com/wireframes-no-mq" href="http://aafh-css.heroku.com/wireframes-no-mq">grayscale and layout-less</a> but <a title="http://aafh-css.heroku.com/wireframes" href="http://aafh-css.heroku.com/wireframes">slowly</a> <a title="http://aafh-css.heroku.com/v1" href="http://aafh-css.heroku.com/v1">increase</a> <a title="http://aafh-css.heroku.com/v2" href="http://aafh-css.heroku.com/v2">fidelity</a> until the <a title="http://aafh-css.heroku.com/v5" href="http://aafh-css.heroku.com/v5">final design</a> is in place.</p> | |||
| <h3 id="pages">Pages</h3> | |||
| <p>Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.</p> | |||
| <p><img class="aligncenter size-large wp-image-5999" src="http://bradfrost.com/wp-content/uploads/2013/06/page1.jpg" alt="page"/></p> | |||
| <p>Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.</p> | |||
| <p>The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.</p> | |||
| <p>Pages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.</p> | |||
| <h2>Why Atomic Design</h2> | |||
| <p>In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.</p> | |||
| <p>Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.</p> | |||
| <p>Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.</p> | |||
| <h2>Pattern Lab</h2> | |||
| <p>In order to apply this methodology in my work, I (along with the help of the great <a title="http://dmolsen.com/" href="http://dmolsen.com/">Dave Olsen</a>) created a tool called <a title="http://patternlab.bradfrostweb.com" href="http://patternlab.bradfrostweb.com">Pattern Lab</a> to actually create these atomic design systems. I’ll cover Pattern Lab in detail later, but feel free to <a title="https://github.com/bradfrost/patternlab" href="https://github.com/bradfrost/patternlab">check it out on Github</a>.</p> | |||
| <h2>Further Reading</h2> | |||
| <ul> | |||
| <li>So Andy Clarke has been setting the stage for these types of conversations for a long while now. In fact, he wrote a chapter for <em><a title="https://shop.smashingmagazine.com/smashing-book-3.html" href="https://shop.smashingmagazine.com/smashing-book-3.html">Smashing Book 3</a></em> called “Becoming Fabulously Flexible: Designing Atoms and Elements.” I had no idea that existed, so how about that! I highly encourage you to check that out. I also highly encourage you to take a look at his tool called <a title="http://malarkey.github.io/Rock-Hammer/" href="http://malarkey.github.io/Rock-Hammer/">Rock Hammer</a>, which is a great way to <a title="http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library" href="http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library">construct a pattern library</a> utilizing many of these principles.</li> | |||
| <li><a title="http://www.youtube.com/watch?v=fqULJBBEVQE" href="http://www.youtube.com/watch?v=fqULJBBEVQE">Web Components: A Tectonic Shift for Web Development</a> – Web Components seem to dovetail really nicely into the concept of atomic design, and watching this video will show why web components</li> | |||
| <li><a title="W3C Modularity" href="http://www.w3.org/DesignIssues/Modularity.html">Modularity</a> Tim Berners-Lee discusses how modularity as an important design principle for the Web.</li> | |||
| <li><a title="http://daverupert.com/2013/04/responsive-deliverables/" href="http://daverupert.com/2013/04/responsive-deliverables/">Responsive Deliverables</a> by Dave Rupert talks about the idea of constructing “Tiny Bootstraps, for Every Client”</li> | |||
| </ul> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://bradfrost.com/blog/post/atomic-web-design/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 61
- 0
cache/071269cdcaaf3e7bc70a4780b64662e6/index.md
View File
| @@ -0,0 +1,61 @@ | |||
| title: Atomic Design | |||
| url: http://bradfrost.com/blog/post/atomic-web-design/ | |||
| hash_url: 071269cdcaaf3e7bc70a4780b64662e6 | |||
| <blockquote><p>We’re not designing pages, we’re designing systems of components.—<a href="http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/">Stephen Hay</a></p></blockquote> | |||
| <p>As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.</p> | |||
| <p>A lot has been said about creating <a title="http://24ways.org/2012/design-systems/" href="http://24ways.org/2012/design-systems/">design systems</a>, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.</p> | |||
| <p>In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.</p> | |||
| <p>Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.</p> | |||
| <h2>What is Atomic Design</h2> | |||
| <p>Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:</p> | |||
| <ol> | |||
| <li><a href="#atoms">Atoms</a></li> | |||
| <li><a href="#molecules">Molecules</a></li> | |||
| <li><a href="#organisms">Organisms</a></li> | |||
| <li><a href="#templates">Templates </a></li> | |||
| <li><a href="#pages">Pages </a></li> | |||
| </ol> | |||
| <p><img class="alignnone size-large wp-image-7254" src="http://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png" alt="The progression of atomic design: atoms to molecules to organiams to templates to pages"/></p> | |||
| <p>Let’s explore each stage in more detail.</p> | |||
| <h3 id="atoms">Atoms</h3> | |||
| <p>Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.</p> | |||
| <p><img class="aligncenter size-full wp-image-5992" src="http://bradfrost.com/wp-content/uploads/2013/06/atoms.jpg" alt="Atoms"/></p> | |||
| <p>Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.</p> | |||
| <p>Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.</p> | |||
| <h3 id="molecules">Molecules</h3> | |||
| <p>Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.</p> | |||
| <p>For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.</p> | |||
| <p><img class="aligncenter size-full wp-image-5993" src="http://bradfrost.com/wp-content/uploads/2013/06/molecule.jpg" alt="molecule"/></p> | |||
| <p>Building up to molecules from atoms encourages a “do one thing and do it well” mentality. While molecules can be complex, as a rule of thumb they are relatively simple combinations of atoms built for reuse.</p> | |||
| <h3 id="organisms">Organisms</h3> | |||
| <p>Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.</p> | |||
| <p><img class="aligncenter size-large wp-image-6002" src="http://bradfrost.com/wp-content/uploads/2013/06/organism2.jpg" alt="organism"/></p> | |||
| <p><img class="aligncenter size-large wp-image-6001" src="http://bradfrost.com/wp-content/uploads/2013/06/organism-examples.jpg" alt="organism-examples"/></p> | |||
| <p>We’re starting to get increasingly concrete. A client might not be terribly interested in the molecules of a design system, but with organisms we can see the final interface beginning to take shape. Dan Mall (who I’m working with on several projects) uses <a title="http://danielmall.com/articles/rif-element-collages/" href="http://danielmall.com/articles/rif-element-collages/">element collages</a>, which articulate ideas for a few key organisms to facilitate client conversations and shape the visual direction (all without having to construct full comps).</p> | |||
| <p>Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.</p> | |||
| <p>Building up from molecules to organisms encourages creating standalone, portable, reusable components.</p> | |||
| <h3 id="templates">Templates</h3> | |||
| <p>At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.</p> | |||
| <p><img class="aligncenter size-large wp-image-6000" src="http://bradfrost.com/wp-content/uploads/2013/06/template1.jpg" alt="template"/></p> | |||
| <p>Templates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place. In my experience working with this methodology, templates begin their life as HTML wireframes, but over time increase fidelity to ultimately become the final deliverable. Bearded Studio in Pittsburgh follow <a title="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups" href="http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups">a similar process</a>, where designs start <a title="http://aafh-css.heroku.com/wireframes-no-mq" href="http://aafh-css.heroku.com/wireframes-no-mq">grayscale and layout-less</a> but <a title="http://aafh-css.heroku.com/wireframes" href="http://aafh-css.heroku.com/wireframes">slowly</a> <a title="http://aafh-css.heroku.com/v1" href="http://aafh-css.heroku.com/v1">increase</a> <a title="http://aafh-css.heroku.com/v2" href="http://aafh-css.heroku.com/v2">fidelity</a> until the <a title="http://aafh-css.heroku.com/v5" href="http://aafh-css.heroku.com/v5">final design</a> is in place.</p> | |||
| <h3 id="pages">Pages</h3> | |||
| <p>Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.</p> | |||
| <p><img class="aligncenter size-large wp-image-5999" src="http://bradfrost.com/wp-content/uploads/2013/06/page1.jpg" alt="page"/></p> | |||
| <p>Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.</p> | |||
| <p>The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.</p> | |||
| <p>Pages are also the place to test variations in templates. For example, you might want to articulate what a headline containing 40 characters looks like, but also demonstrate what 340 characters looks like. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? Again, these specific instances influence how we loop back through and construct our system.</p> | |||
| <h2>Why Atomic Design</h2> | |||
| <p>In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way.</p> | |||
| <p>Atomic design provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.</p> | |||
| <p>Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.</p> | |||
| <h2>Pattern Lab</h2> | |||
| <p>In order to apply this methodology in my work, I (along with the help of the great <a title="http://dmolsen.com/" href="http://dmolsen.com/">Dave Olsen</a>) created a tool called <a title="http://patternlab.bradfrostweb.com" href="http://patternlab.bradfrostweb.com">Pattern Lab</a> to actually create these atomic design systems. I’ll cover Pattern Lab in detail later, but feel free to <a title="https://github.com/bradfrost/patternlab" href="https://github.com/bradfrost/patternlab">check it out on Github</a>.</p> | |||
| <h2>Further Reading</h2> | |||
| <ul> | |||
| <li>So Andy Clarke has been setting the stage for these types of conversations for a long while now. In fact, he wrote a chapter for <em><a title="https://shop.smashingmagazine.com/smashing-book-3.html" href="https://shop.smashingmagazine.com/smashing-book-3.html">Smashing Book 3</a></em> called “Becoming Fabulously Flexible: Designing Atoms and Elements.” I had no idea that existed, so how about that! I highly encourage you to check that out. I also highly encourage you to take a look at his tool called <a title="http://malarkey.github.io/Rock-Hammer/" href="http://malarkey.github.io/Rock-Hammer/">Rock Hammer</a>, which is a great way to <a title="http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library" href="http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library">construct a pattern library</a> utilizing many of these principles.</li> | |||
| <li><a title="http://www.youtube.com/watch?v=fqULJBBEVQE" href="http://www.youtube.com/watch?v=fqULJBBEVQE">Web Components: A Tectonic Shift for Web Development</a> – Web Components seem to dovetail really nicely into the concept of atomic design, and watching this video will show why web components</li> | |||
| <li><a title="W3C Modularity" href="http://www.w3.org/DesignIssues/Modularity.html">Modularity</a> Tim Berners-Lee discusses how modularity as an important design principle for the Web.</li> | |||
| <li><a title="http://daverupert.com/2013/04/responsive-deliverables/" href="http://daverupert.com/2013/04/responsive-deliverables/">Responsive Deliverables</a> by Dave Rupert talks about the idea of constructing “Tiny Bootstraps, for Every Client”</li> | |||
| </ul> | |||
+ 634
- 0
cache/0760b37d78f70268cdd102701f1fd14f/index.html
View File
| @@ -0,0 +1,634 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Communication : Les lois de Wiio (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://doubleboucle.fr/communication-les-lois-de-wiio/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Communication : Les lois de Wiio (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://doubleboucle.fr/communication-les-lois-de-wiio/">Source originale du contenu</a></h3> | |||
| <p>En 1978, le professeur Osmo Antero Wiio énonce ses 7 lois sur la communication. Les lois de Wiio présentent sous forme humoristique une des grandes fatalités de la communication : « La Communication échoue habituellement, sauf en cas d’accident. » Même si il est tentant de les rapprocher des « lois de Murphy », l’esprit dans lequel elles ont été rédigé témoigne moins d’une conscience de l’inévitabilité de l’échec que d’un constat objectif sur la complexité des processus de communication.</p> | |||
| <p><a title="Yupi666 at en.wikipedia [GFDL (http://www.gnu.org/copyleft/fdl.html), CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/) or CC BY 2.5 (http://creativecommons.org/licenses/by/2.5)], from Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ACommunication_emisor.jpg"><img src="//upload.wikimedia.org/wikipedia/commons/b/b0/Communication_emisor.jpg" alt="Communication emisor" width="256"/></a></p> | |||
| <p>Cet article est librement traduit et adapté par mes soins sur la base de l’<a href="https://www.cs.tut.fi/~jkorpela/wiio.html">article original</a>.</p> | |||
| <h2>Les lois de Wiio</h2> | |||
| <h3>La plupart des communications sont vouées à l’échec, sauf accident</h3> | |||
| <p>Cette loi est le constat sur la base duquel s’établissent les autres lois de Wiio qui en sont une spécialisation ou un dérivé.</p> | |||
| <blockquote><p>Malgré leur caractère humoristique, ces lois constituent des observations valides sur toutes les communications humaines. Pour avoir une approche constructive de la communication, il est nécessaire d’admettre leur vérité et de se baser sur elles, plutôt que d’exercer confortablement une communication illusoire.</p></blockquote> | |||
| <p>Peut être n’est ce pas tout à fait ce que le professeur Wiio voulait dire (voir plus loin). Toujours est il que de nombreuses personnes ayant lu ces lois ne les ont considérées que comme une expression de sarcasme.</p> | |||
| <p>Ce qui différencie la communication humaine de celle des machines par exemple est la faiblesse avec laquelle nous définissons les symboles que nous utilisons pour échanger. De par leur nature subjective même, ces symboles (ou mots) prêtent à confusion.</p> | |||
| <p>Le même mot pourra être associé à des expériences radicalement différentes pour deux personnes, même si pour chacune d’elle le sens en paraitra limpide et indiscutablement objectif. De même lorsque nous utilisons un mot, nous le faisons dans un contexte précis, avec une signification définie par convention. Si le destinataire n’a pas la même perception du contexte ou une convention différente, nous n’avons pas de moyen de savoir cela.</p> | |||
| <p>Un mot pourra être compris également suivant plusieurs niveaux d’abstraction. Lorsque nous parlons d’un ogre, parlons-nous d’une créature de légende, d’une personne réelle qui ressemble physiquement à un ogre ou d’une personne qui a un appétit dévorant, possiblement pour autre chose que de la nourriture ? L’utilisation de métaphores et d’un langage imagé multiplie les possibilités de comprendre des choses différentes.</p> | |||
| <p>Les différences de langues et de niveaux de maitrise des différentes langues peuvent être un frein au partage suffisant du référentiel nécessaire pour se comprendre. Le fait que certaines activités fassent intervenir des termes anglo-saxons que ce soit dans l’appellation d’une chose ou dans le détail de sa définition sont de nature à aboutir à des interprétations divergentes.</p> | |||
| <p>Les différences culturelles entre individus entrainent également des incompréhensions, basées cette fois-ci sur ce qu’il est par exemple normal d’attendre de telle ou telle personne ou de telle ou telle attitude ou comportement. Plus une audience est diversifiée, plus le risque d’obtenir des réactions différentes de celle que vous attendiez est élevé. La même information objective pourra être perçue par exemple comme une opinion politique détestable, un horrible blasphème ou une adorable poésie.</p> | |||
| <p>Si l’on considère tous ces éléments et que pour qu’une communication réussisse il faut qu’elle ne tombe dans aucun de ces pièges, la probabilité de l’échec est bien plus élevée que celle du succès. Si on identifie 20 possibilités d’échouer avec une probabilité d’échec de 10% pour chacune, la probabilité de succès n’est alors que de 12%.</p> | |||
| <p>Et le modèle que nous considérons jusqu’ici n’est qu’un modèle simplifié. Les choses sont bien pires si l’on considère en plus les efforts de transcription nécessaire. Pour transmettre une connaissance à quelqu’un d’autre, il nous faut transcrire cette connaissance interne en une forme transmissible, transférer cette forme au destinataire, si possible sans détérioration, et laisser le destinataire en faire la transcription inverse pour se l’approprier en tant que connaissance. Si une traduction est nécessaire (comme ici, où je traduis et adapte de l’anglais une traduction du finnois pour le texte de Wiio), les risques sont encore plus grands de commettre des erreurs.</p> | |||
| <p>La corruption d’un message ne dépend donc pas uniquement de sa composition mais aussi de toutes les étapes nécessaires à sa transmission entre les différents participants. Si l’on voulait être parfaitement compréhensible en toutes occasions, il faudrait ajouter au contenu du message initial toutes les informations nécessaires pour reconstituer celui-ci si une détérioration devait avoir lieu. Cependant, le temps dont nous disposons pour concevoir et transmettre un message ne nous permet déjà pas d’y inclure qu’une partie des informations nécessaires à sa compréhension. Un message trop long nuirait à la clarté du propos et serait difficile à exploiter dans un échange (et je m’en rends bien compte en relisant la plupart de mes écrits).</p> | |||
| <p>Et il y a au moins un autre problème qui peut entrer en ligne de compte. Le message que l’on cherche à transmettre est en général une réponse à un autre message, la demande. Si la demande est vague ou imprécise, les bonnes intentions du répondant vont probablement le pousser à fournir une réponse couvrant un maximum de terrain pour pouvoir être utile, souvent en tapant à côté.</p> | |||
| <blockquote><p>– Ahhhh! ça marche pas !!!</p> | |||
| <p>– Avez-vous essayé d’éteindre et de rallumer votre appareil ?</p></blockquote> | |||
| <p>La probabilité de répondre juste à une question est d’autant plus élevée que la question est la bonne, avec les bonnes informations et le bon niveau de détail.</p> | |||
| <h4>Si la communication peut échouer, elle échouera</h4> | |||
| <p>A ce point, il ne fait aucun doute que les obstacles à surmonter sont suffisamment nombreux pour que les chances de succès soient quasi inexistantes. Les statistiques et les probabilités sont contre nous.</p> | |||
| <h4>Si la communication ne peut pas échouer, elle échouera très probablement aussi</h4> | |||
| <p>Malgré tous les efforts que nous pouvons déployer pour s’assurer que la communication est réussie, il restera toujours suffisamment d’éléments hors de notre contrôle ou de notre conscience pour que les chances de succès soient encore très faibles.</p> | |||
| <h4>Si la communication semble avoir été faite avec succès, il y a eu méprise</h4> | |||
| <p>S’il nous semble que la communication s’est produite avec aisance et succès, il est probable qu’il y a eu méprise. Le destinataire a compris le message à <em>sa</em> façon, généralement celle qui l’arrange et qui ne suscite pas de résistance particulière. Rien n’assure qu’il s’agisse de la signification que vous souhaitiez y mettre. Dommage.</p> | |||
| <p>Dans la culture de l’Internet, il y a un adage qui dit qu’à chaque question complexe, il existe une réponse simple, compréhensible, plaisante et tout simplement fausse. Il est souvent plus agréable de recevoir une réponse simple, aussi fausse soit-elle, que de devoir intégrer une réponse complexe. De plus, la plupart des réponses fausses tardent à apparaitre comme telles, et elles ont une fâcheuse tendance pour certaines à sembler fonctionner pendant un temps assez long.</p> | |||
| <h4>Si vous êtes satisfait de votre message, la communication a certainement échoué</h4> | |||
| <p>Si la formulation de votre message vous plait, vous pouvez être sur que vous l’avez formulé à destination de vous-même et pas de vos destinataires. Vous pouvez essayer de reprendre la formulation pour prendre en compte les particularités de votre auditoire.</p> | |||
| <h3>Si un message peut être interprété de plusieurs façons, il le sera de façon à maximiser les dommages causés</h3> | |||
| <p>A ce niveau, nous sommes plus proche d’une loi de Murphy, mais elle n’en demeure pas moins valable. En ce qui concerne la gravité, il ne s’agit généralement pas de la pire option que vous aviez envisagé mais d’une encore pire encore que vous n’aviez pas envisagé. Désolé.</p> | |||
| <h3>Il y a toujours quelqu’un qui sait mieux que vous ce que vous avez voulu dire</h3> | |||
| <p>Alors qu’il est facile de reconnaitre les gens qui n’ont clairement pas compris ce que vous avez dit, reconnaitre ceux qui pensent avoir compris, abondent dans votre sens et commencent à diffuser leur idée erronée de votre avis est une toute autre paire de manche. Rester attentif aux personnes qui semblent vous avoir compris me parait donc une bonne idée.</p> | |||
| <h3>Plus nous communiquons, plus la communication empire</h3> | |||
| <p>D’ordinaire, on considère que plus on communique, plus la communication s’améliore. En réalité, plus la quantité d’informations augmente, plus le risque de se tromper augmente aussi. D’ailleurs, j’ai décidé il y a quelques temps déjà d’arrêter de reformuler sans arrêt spontanément mes propos et questionner les gens sur leur compréhension. Vous avez le droit de me rappeler cette résolution aussi souvent que nécessaire en commentaire ou sur les réseaux sociaux.</p> | |||
| <p>Ce qui fait fonctionner correctement la communication, ce n’est pas le volume d’informations mais la qualité de la donnée contenue dans cette information. Une mesure de son efficacité est dans l’analyse du rapport signal sur bruit.</p> | |||
| <h4>Plus nous communiquons, plus vite les méprises se propagent</h4> | |||
| <p>La répétition renforce les idées fausses. Répéter une information erronée ne fait qu’augmenter notre propension à la croire vraie, et nous nous retrouvons rapidement à la véhiculer à notre tour. Pour exemple, considérez les annonces de décès de personnalités sur les réseaux sociaux. Si nous voyons l’information une fois, l’erreur nous parait possible. Si nous la voyons plusieurs fois, la probabilité d’en devenir soi-même le relai augmente rapidement. Je salue au passage <a href="http://www.lemonde.fr/actualite-medias/article/2015/03/05/double-demission-a-l-afp-apres-l-annonce-erronee-de-la-mort-de-martin-bouygues_4588314_3236.html">Martin Bouygues et les gens de l’AFP</a>.</p> | |||
| <h3>Dans la communication de masse, ce qui importe n’est pas ce qui est mais ce qui semble être</h3> | |||
| <p>La communication de masse crée un monde à part. La multiplication des analyses sur les événements et les informations y crée une matière propice à la recherche d’intentions ou de messages cachés, voire de théories du complot. Au final, le phénomène généré par l’information initiale occupe souvent bien plus de place que celle-ci et évolue bien plus rapidement. On assiste sur la toile à des guerres ouvertes qui se règlent le temps de changer de fuseau horaire.</p> | |||
| <h3>L’importance d’une nouvelle est inversement proportionnelle au carré de la distance</h3> | |||
| <p>Lorsqu’un événement se produit, son importance dépend directement de la distance (physique, communautaire ou affective) que nous percevons avec cet événement. Le décès de quelques passagers français dans un avion privé en Afrique nous parait plus important que le massacre de centaines de personnes dans les mêmes régions ou le décès de centaines de passagers allemands dans les Alpes françaises.</p> | |||
| <p>Ce que l’on peut retenir de ces observations c’est que la communication est là aussi fortement impactée par le référentiel propre à chaque personne, et qu’il est donc nécessaire d’en tenir compte.</p> | |||
| <h3>Plus la situation est importante, plus vous êtes susceptible d’oublier une chose essentielle dont vous aviez conscience jusque là</h3> | |||
| <p>Cette situation se produit à la fois pour l’émetteur et le destinataire du message. Elle s’applique notamment à toutes les informations qui nous paraissent indispensables pour comprendre le sujet dont il est question et que nous considérons malgré nous comme des pré-requis déjà intégrés ou inférés sur la base du contexte présent. Un émetteur à qui une demande de clarification a été adressée arrive généralement à fournir une reformulation satisfaisante et compréhensible par le destinataire, mais bien après que la présente situation se soit terminée.</p> | |||
| <h2>Corollaires de Korpella</h2> | |||
| <h3>Si personne ne vous agresse, c’est que votre message n’est pas passé</h3> | |||
| <p>Le manque de feedback négatif est généralement considéré comme un signe que la communication a été couronnée de succès. Le fait qu’aucun retour négatif n’ait été fait ne peut en aucun cas être considéré comme un témoignage d’adhésion, il peut aussi témoigner d’un désintérêt ou d’une absence d’implication sur le sujet. La demande de clarification ou le feedback négatif, parfois agressif, qu’un émetteur peut recevoir est un signe que son message a atteint sa cible et été au moins partiellement compris, ce qui est un résultat pas si mauvais que ça.</p> | |||
| <p>La communication entre humains fonctionne par le dialogue. Les rares fois où une communication uni-directionnelle semble fonctionner (comme une page web ou un livre), c’est en général parce que l’auteur a été impliqué auparavant dans de nombreux dialogues sur le même sujet. Il a pu enrichir son point de vue de celui des autres personnes qui ont pris une part active dans ces dialogues et lui permettre de formuler un message efficace et porteur de sens pour les personnes composant son audience.</p> | |||
| <p><a href="http://doubleboucle.fr/feedback/">Le feedback n’est pas juste une façon de donner son avis sur un effort ou le produit de cet effort</a> pour témoigner son appréciation, mais c’est aussi une bonne façon de savoir quel message nous avons pu transmettre.</p> | |||
| <blockquote><p>Je ne sais ce que j’ai dit que lorsque l’on m’a répondu.</p></blockquote> | |||
| <p>La valeur du feedback n’est plus à démontrer, même le feedback formulé de façon agressive. Les chances sont mêmes élevées qu’un contenu de qualité suscite un feedback plus agressif que les autres, par envie ou autre.</p> | |||
| <p>Si vous n’avez aucun feedback, c’est que votre message n’a intéressé personne ou presque.</p> | |||
| <h3/> | |||
| <h1>Conclusion</h1> | |||
| <p>Loin de donner une vision pessimiste de la communication et des difficultés inhérentes au processus, ces lois et corollaires nous permettent d’envisager les choses sous un nouveau jour. Si nous ne pouvons communiquer avec succès, nous pouvons néanmoins travailler à augmenter la probabilité d’un succès accidentel en prêtant une attention toute particulière aux problèmes discutés ici.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://doubleboucle.fr/communication-les-lois-de-wiio/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 60
- 0
cache/0760b37d78f70268cdd102701f1fd14f/index.md
View File
| @@ -0,0 +1,60 @@ | |||
| title: Communication : Les lois de Wiio | |||
| url: http://doubleboucle.fr/communication-les-lois-de-wiio/ | |||
| hash_url: 0760b37d78f70268cdd102701f1fd14f | |||
| <p>En 1978, le professeur Osmo Antero Wiio énonce ses 7 lois sur la communication. Les lois de Wiio présentent sous forme humoristique une des grandes fatalités de la communication : « La Communication échoue habituellement, sauf en cas d’accident. » Même si il est tentant de les rapprocher des « lois de Murphy », l’esprit dans lequel elles ont été rédigé témoigne moins d’une conscience de l’inévitabilité de l’échec que d’un constat objectif sur la complexité des processus de communication.</p> | |||
| <p><a title="Yupi666 at en.wikipedia [GFDL (http://www.gnu.org/copyleft/fdl.html), CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/) or CC BY 2.5 (http://creativecommons.org/licenses/by/2.5)], from Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ACommunication_emisor.jpg"><img src="//upload.wikimedia.org/wikipedia/commons/b/b0/Communication_emisor.jpg" alt="Communication emisor" width="256"/></a></p> | |||
| <p>Cet article est librement traduit et adapté par mes soins sur la base de l’<a href="https://www.cs.tut.fi/~jkorpela/wiio.html">article original</a>.</p> | |||
| <h2>Les lois de Wiio</h2> | |||
| <h3>La plupart des communications sont vouées à l’échec, sauf accident</h3> | |||
| <p>Cette loi est le constat sur la base duquel s’établissent les autres lois de Wiio qui en sont une spécialisation ou un dérivé.</p> | |||
| <blockquote><p>Malgré leur caractère humoristique, ces lois constituent des observations valides sur toutes les communications humaines. Pour avoir une approche constructive de la communication, il est nécessaire d’admettre leur vérité et de se baser sur elles, plutôt que d’exercer confortablement une communication illusoire.</p></blockquote> | |||
| <p>Peut être n’est ce pas tout à fait ce que le professeur Wiio voulait dire (voir plus loin). Toujours est il que de nombreuses personnes ayant lu ces lois ne les ont considérées que comme une expression de sarcasme.</p> | |||
| <p>Ce qui différencie la communication humaine de celle des machines par exemple est la faiblesse avec laquelle nous définissons les symboles que nous utilisons pour échanger. De par leur nature subjective même, ces symboles (ou mots) prêtent à confusion.</p> | |||
| <p>Le même mot pourra être associé à des expériences radicalement différentes pour deux personnes, même si pour chacune d’elle le sens en paraitra limpide et indiscutablement objectif. De même lorsque nous utilisons un mot, nous le faisons dans un contexte précis, avec une signification définie par convention. Si le destinataire n’a pas la même perception du contexte ou une convention différente, nous n’avons pas de moyen de savoir cela.</p> | |||
| <p>Un mot pourra être compris également suivant plusieurs niveaux d’abstraction. Lorsque nous parlons d’un ogre, parlons-nous d’une créature de légende, d’une personne réelle qui ressemble physiquement à un ogre ou d’une personne qui a un appétit dévorant, possiblement pour autre chose que de la nourriture ? L’utilisation de métaphores et d’un langage imagé multiplie les possibilités de comprendre des choses différentes.</p> | |||
| <p>Les différences de langues et de niveaux de maitrise des différentes langues peuvent être un frein au partage suffisant du référentiel nécessaire pour se comprendre. Le fait que certaines activités fassent intervenir des termes anglo-saxons que ce soit dans l’appellation d’une chose ou dans le détail de sa définition sont de nature à aboutir à des interprétations divergentes.</p> | |||
| <p>Les différences culturelles entre individus entrainent également des incompréhensions, basées cette fois-ci sur ce qu’il est par exemple normal d’attendre de telle ou telle personne ou de telle ou telle attitude ou comportement. Plus une audience est diversifiée, plus le risque d’obtenir des réactions différentes de celle que vous attendiez est élevé. La même information objective pourra être perçue par exemple comme une opinion politique détestable, un horrible blasphème ou une adorable poésie.</p> | |||
| <p>Si l’on considère tous ces éléments et que pour qu’une communication réussisse il faut qu’elle ne tombe dans aucun de ces pièges, la probabilité de l’échec est bien plus élevée que celle du succès. Si on identifie 20 possibilités d’échouer avec une probabilité d’échec de 10% pour chacune, la probabilité de succès n’est alors que de 12%.</p> | |||
| <p>Et le modèle que nous considérons jusqu’ici n’est qu’un modèle simplifié. Les choses sont bien pires si l’on considère en plus les efforts de transcription nécessaire. Pour transmettre une connaissance à quelqu’un d’autre, il nous faut transcrire cette connaissance interne en une forme transmissible, transférer cette forme au destinataire, si possible sans détérioration, et laisser le destinataire en faire la transcription inverse pour se l’approprier en tant que connaissance. Si une traduction est nécessaire (comme ici, où je traduis et adapte de l’anglais une traduction du finnois pour le texte de Wiio), les risques sont encore plus grands de commettre des erreurs.</p> | |||
| <p>La corruption d’un message ne dépend donc pas uniquement de sa composition mais aussi de toutes les étapes nécessaires à sa transmission entre les différents participants. Si l’on voulait être parfaitement compréhensible en toutes occasions, il faudrait ajouter au contenu du message initial toutes les informations nécessaires pour reconstituer celui-ci si une détérioration devait avoir lieu. Cependant, le temps dont nous disposons pour concevoir et transmettre un message ne nous permet déjà pas d’y inclure qu’une partie des informations nécessaires à sa compréhension. Un message trop long nuirait à la clarté du propos et serait difficile à exploiter dans un échange (et je m’en rends bien compte en relisant la plupart de mes écrits).</p> | |||
| <p>Et il y a au moins un autre problème qui peut entrer en ligne de compte. Le message que l’on cherche à transmettre est en général une réponse à un autre message, la demande. Si la demande est vague ou imprécise, les bonnes intentions du répondant vont probablement le pousser à fournir une réponse couvrant un maximum de terrain pour pouvoir être utile, souvent en tapant à côté.</p> | |||
| <blockquote><p>– Ahhhh! ça marche pas !!!</p> | |||
| <p>– Avez-vous essayé d’éteindre et de rallumer votre appareil ?</p></blockquote> | |||
| <p>La probabilité de répondre juste à une question est d’autant plus élevée que la question est la bonne, avec les bonnes informations et le bon niveau de détail.</p> | |||
| <h4>Si la communication peut échouer, elle échouera</h4> | |||
| <p>A ce point, il ne fait aucun doute que les obstacles à surmonter sont suffisamment nombreux pour que les chances de succès soient quasi inexistantes. Les statistiques et les probabilités sont contre nous.</p> | |||
| <h4>Si la communication ne peut pas échouer, elle échouera très probablement aussi</h4> | |||
| <p>Malgré tous les efforts que nous pouvons déployer pour s’assurer que la communication est réussie, il restera toujours suffisamment d’éléments hors de notre contrôle ou de notre conscience pour que les chances de succès soient encore très faibles.</p> | |||
| <h4>Si la communication semble avoir été faite avec succès, il y a eu méprise</h4> | |||
| <p>S’il nous semble que la communication s’est produite avec aisance et succès, il est probable qu’il y a eu méprise. Le destinataire a compris le message à <em>sa</em> façon, généralement celle qui l’arrange et qui ne suscite pas de résistance particulière. Rien n’assure qu’il s’agisse de la signification que vous souhaitiez y mettre. Dommage.</p> | |||
| <p>Dans la culture de l’Internet, il y a un adage qui dit qu’à chaque question complexe, il existe une réponse simple, compréhensible, plaisante et tout simplement fausse. Il est souvent plus agréable de recevoir une réponse simple, aussi fausse soit-elle, que de devoir intégrer une réponse complexe. De plus, la plupart des réponses fausses tardent à apparaitre comme telles, et elles ont une fâcheuse tendance pour certaines à sembler fonctionner pendant un temps assez long.</p> | |||
| <h4>Si vous êtes satisfait de votre message, la communication a certainement échoué</h4> | |||
| <p>Si la formulation de votre message vous plait, vous pouvez être sur que vous l’avez formulé à destination de vous-même et pas de vos destinataires. Vous pouvez essayer de reprendre la formulation pour prendre en compte les particularités de votre auditoire.</p> | |||
| <h3>Si un message peut être interprété de plusieurs façons, il le sera de façon à maximiser les dommages causés</h3> | |||
| <p>A ce niveau, nous sommes plus proche d’une loi de Murphy, mais elle n’en demeure pas moins valable. En ce qui concerne la gravité, il ne s’agit généralement pas de la pire option que vous aviez envisagé mais d’une encore pire encore que vous n’aviez pas envisagé. Désolé.</p> | |||
| <h3>Il y a toujours quelqu’un qui sait mieux que vous ce que vous avez voulu dire</h3> | |||
| <p>Alors qu’il est facile de reconnaitre les gens qui n’ont clairement pas compris ce que vous avez dit, reconnaitre ceux qui pensent avoir compris, abondent dans votre sens et commencent à diffuser leur idée erronée de votre avis est une toute autre paire de manche. Rester attentif aux personnes qui semblent vous avoir compris me parait donc une bonne idée.</p> | |||
| <h3>Plus nous communiquons, plus la communication empire</h3> | |||
| <p>D’ordinaire, on considère que plus on communique, plus la communication s’améliore. En réalité, plus la quantité d’informations augmente, plus le risque de se tromper augmente aussi. D’ailleurs, j’ai décidé il y a quelques temps déjà d’arrêter de reformuler sans arrêt spontanément mes propos et questionner les gens sur leur compréhension. Vous avez le droit de me rappeler cette résolution aussi souvent que nécessaire en commentaire ou sur les réseaux sociaux.</p> | |||
| <p>Ce qui fait fonctionner correctement la communication, ce n’est pas le volume d’informations mais la qualité de la donnée contenue dans cette information. Une mesure de son efficacité est dans l’analyse du rapport signal sur bruit.</p> | |||
| <h4>Plus nous communiquons, plus vite les méprises se propagent</h4> | |||
| <p>La répétition renforce les idées fausses. Répéter une information erronée ne fait qu’augmenter notre propension à la croire vraie, et nous nous retrouvons rapidement à la véhiculer à notre tour. Pour exemple, considérez les annonces de décès de personnalités sur les réseaux sociaux. Si nous voyons l’information une fois, l’erreur nous parait possible. Si nous la voyons plusieurs fois, la probabilité d’en devenir soi-même le relai augmente rapidement. Je salue au passage <a href="http://www.lemonde.fr/actualite-medias/article/2015/03/05/double-demission-a-l-afp-apres-l-annonce-erronee-de-la-mort-de-martin-bouygues_4588314_3236.html">Martin Bouygues et les gens de l’AFP</a>.</p> | |||
| <h3>Dans la communication de masse, ce qui importe n’est pas ce qui est mais ce qui semble être</h3> | |||
| <p>La communication de masse crée un monde à part. La multiplication des analyses sur les événements et les informations y crée une matière propice à la recherche d’intentions ou de messages cachés, voire de théories du complot. Au final, le phénomène généré par l’information initiale occupe souvent bien plus de place que celle-ci et évolue bien plus rapidement. On assiste sur la toile à des guerres ouvertes qui se règlent le temps de changer de fuseau horaire.</p> | |||
| <h3>L’importance d’une nouvelle est inversement proportionnelle au carré de la distance</h3> | |||
| <p>Lorsqu’un événement se produit, son importance dépend directement de la distance (physique, communautaire ou affective) que nous percevons avec cet événement. Le décès de quelques passagers français dans un avion privé en Afrique nous parait plus important que le massacre de centaines de personnes dans les mêmes régions ou le décès de centaines de passagers allemands dans les Alpes françaises.</p> | |||
| <p>Ce que l’on peut retenir de ces observations c’est que la communication est là aussi fortement impactée par le référentiel propre à chaque personne, et qu’il est donc nécessaire d’en tenir compte.</p> | |||
| <h3>Plus la situation est importante, plus vous êtes susceptible d’oublier une chose essentielle dont vous aviez conscience jusque là</h3> | |||
| <p>Cette situation se produit à la fois pour l’émetteur et le destinataire du message. Elle s’applique notamment à toutes les informations qui nous paraissent indispensables pour comprendre le sujet dont il est question et que nous considérons malgré nous comme des pré-requis déjà intégrés ou inférés sur la base du contexte présent. Un émetteur à qui une demande de clarification a été adressée arrive généralement à fournir une reformulation satisfaisante et compréhensible par le destinataire, mais bien après que la présente situation se soit terminée.</p> | |||
| <h2>Corollaires de Korpella</h2> | |||
| <h3>Si personne ne vous agresse, c’est que votre message n’est pas passé</h3> | |||
| <p>Le manque de feedback négatif est généralement considéré comme un signe que la communication a été couronnée de succès. Le fait qu’aucun retour négatif n’ait été fait ne peut en aucun cas être considéré comme un témoignage d’adhésion, il peut aussi témoigner d’un désintérêt ou d’une absence d’implication sur le sujet. La demande de clarification ou le feedback négatif, parfois agressif, qu’un émetteur peut recevoir est un signe que son message a atteint sa cible et été au moins partiellement compris, ce qui est un résultat pas si mauvais que ça.</p> | |||
| <p>La communication entre humains fonctionne par le dialogue. Les rares fois où une communication uni-directionnelle semble fonctionner (comme une page web ou un livre), c’est en général parce que l’auteur a été impliqué auparavant dans de nombreux dialogues sur le même sujet. Il a pu enrichir son point de vue de celui des autres personnes qui ont pris une part active dans ces dialogues et lui permettre de formuler un message efficace et porteur de sens pour les personnes composant son audience.</p> | |||
| <p><a href="http://doubleboucle.fr/feedback/">Le feedback n’est pas juste une façon de donner son avis sur un effort ou le produit de cet effort</a> pour témoigner son appréciation, mais c’est aussi une bonne façon de savoir quel message nous avons pu transmettre.</p> | |||
| <blockquote><p>Je ne sais ce que j’ai dit que lorsque l’on m’a répondu.</p></blockquote> | |||
| <p>La valeur du feedback n’est plus à démontrer, même le feedback formulé de façon agressive. Les chances sont mêmes élevées qu’un contenu de qualité suscite un feedback plus agressif que les autres, par envie ou autre.</p> | |||
| <p>Si vous n’avez aucun feedback, c’est que votre message n’a intéressé personne ou presque.</p> | |||
| <h3/> | |||
| <h1>Conclusion</h1> | |||
| <p>Loin de donner une vision pessimiste de la communication et des difficultés inhérentes au processus, ces lois et corollaires nous permettent d’envisager les choses sous un nouveau jour. Si nous ne pouvons communiquer avec succès, nous pouvons néanmoins travailler à augmenter la probabilité d’un succès accidentel en prêtant une attention toute particulière aux problèmes discutés ici.</p> | |||
+ 606
- 0
cache/078355f2f86d04b9814badaa1087b91a/index.html
View File
| @@ -0,0 +1,606 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Successfully Countering Russian Electoral Interference (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.csis.org/analysis/successfully-countering-russian-electoral-interference"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Successfully Countering Russian Electoral Interference (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://www.csis.org/analysis/successfully-countering-russian-electoral-interference">Source originale du contenu</a></h3> | |||
| <h3><strong>The Issue</strong></h3> | |||
| <p><em>The 2017 French presidential election remains the clearest failed attempt by a foreign entity to influence an electoral process in recent years. Taking aim at presidential candidate Emmanuel Macron, Russian interference succeeded neither in interfering with the election nor in antagonizing French society. This Brief examines how France successfully withstood the disinformation and interference; how this failed attempt can be explained; and, looking to the future, what lessons can be learned from this experience? </em></p> | |||
| <div> | |||
| <h3><strong>Introduction</strong></h3> | |||
| <p>On Friday, May 5, 2017—just two days before the second and final round of the French presidential elections—gigabytes of data hacked from Emmanuel Macron’s presidential campaign team were released online. Months earlier an orchestrated disinformation campaign against the Macron presidential campaign had already begun. The so-called Macron Leaks—a combination of real emails and forgeries—could have been yet another example of a long list of attempts by Russia to interfere in a high-stakes transatlantic election. But the 2017 French presidential election may be the exception that proves the rule: it is the most clearly <em>failed</em> attempt. The Kremlin neither succeeded in interfering with the presidential election nor in dividing French society.</p> | |||
| <p>As the United States prepares to hold nationwide elections on November 6, 2018, the director of national intelligence, Dan Coats, has already warned in February of this year that “We expect Russia to continue using propaganda, social media, false-flag personas, sympathetic spokespeople and other means of influence to try to exacerbate social and political fissures in the United States.” Calling Russian influence “pervasive,” Director Coats further noted that “The Russians have a strategy that goes well beyond what is happening in the United States,” he said. “While they have historically tried to do these types of things, clearly in 2016 they upped their game. They took advantage, a sophisticated advantage of social media. They are doing that not only in the United States but . . . throughout Europe and perhaps elsewhere.” Because the United States is not well prepared for future elections, it is necessary to study the past.</p> | |||
| <p>This is why the 2017 French presidential election is a particularly important election to study and why we highlight French scholar Jean-Baptiste Jeangène Vilmer’s groundbreaking report on the Macron Leaks.<sup>1</sup> Drawing in part upon the work of CSIS visiting fellow Boris Toucas,<sup>2</sup> Vilmer’s forthcoming report will examine what happened during the French presidential election; who orchestrated the affair; how it was successfully countered; and what lessons can be learned. This Brief, which is part of the forthcoming CSIS comprehensive report, sums up the main lessons learned.</p> | |||
| <p>Myriad structural factors, luck, as well as effective anticipation and reaction by the Macron campaign staff, government and civil society, and especially the mainstream media, combined to successfully resist Russian malign influence.</p> | |||
| <p align="right">- <a href="/people/heather-conley"><strong>Heather A. Conley</strong></a>, CSIS</p> | |||
| </div> | |||
| <h3><strong>Structural Factors</strong></h3> | |||
| <p>Compared to the United States or United Kingdom, France presents a less vulnerable political and media environment for a number of structural reasons. Unlike in the United States, the election of the French president is direct (e.g., there is no electoral college): attempts at interference or influence are more obvious, as they involve targeting candidates rather than constituencies. But most importantly, the French election has two rounds, which creates an additional difficulty for a malign actor to determine which two candidates will make it to the second round. The second round of voting also permits the population to dramatically shift their support to another candidate to block an unexpected result after the first round. The French media environment consists mainly of mainstream and critical media sources and is largely free of tabloid-style outlets and “alternative” websites that are common in the United States and United Kingdom. Culturally, critical thinking and a healthy skepticism are also deeply ingrained into French society at an early stage and throughout one’s professional life.</p> | |||
| <h3><strong>Luck</strong></h3> | |||
| <p>The Macron team was fortunate that those who hacked into their emails were sloppy and made a number of mistakes. Clearly, these individuals were overconfident and overestimated their ability to attract public attention and mobilize online communities. They also underestimated the resistance by French media and did not anticipate the Macron campaign staff reaction. Perhaps because the leaks revealed so little, there was an assumption that creating confusion would be sufficient. But the thousands of emails and other data appeared to have overwhelmed the public, enhancing their disinterest.</p> | |||
| <blockquote>The Macron team was fortunate that those who hacked into their emails were sloppy and made a number of mistakes.</blockquote> | |||
| <p>Releasing Macron’s staff emails just hours before the electoral silence period was a risk. While the hackers did not want Macron to be able to defend himself, the limited time was also insufficient to spread the information. Moreover, the timing also rendered the entire revelation highly suspicious, the disinformation suffered from cultural clumsiness, and some of the fake documents were so absurd that the whole episode seemed amateurish. Interestingly, the accounts and bots that spread the misinformation were mostly in English because the leaks were first spread by the American alt-right community. Not only is this a completely ineffective means to reach a French-speaking audience, it also likely alienated French nationalist voters who are not inclined to support anything American. France was lucky in the sense that this disinformation attack seemed hastily and clumsily formed. A more interesting question would be why was this organized so poorly? A last-minute decision due to the second-round vote? Other Russian agencies attempting to engage in similarly successful tactics but without the skills to pull it off?</p> | |||
| <p>Good fortune or not, France successfully anticipated, reacted, and coordinated its response between the Macron campaign staff, the government, and civil society. These are the lessons we learned from this experience:</p> | |||
| <h3><strong>Anticipation</strong></h3> | |||
| <p><strong>Lesson 1: Learn from Others.</strong> France had an advantage in that it was targeted after cyberattacks and disinformation campaigns were launched in the Netherlands, the United Kingdom, and the United States. All these precedents raised government and public awareness, but the 2016 U.S. presidential campaign was a game-changer. Prior to the U.S. election, awareness of Russian disinformation and malign influence was mostly limited to the Baltic and Central European states. Since then, large Western European states have learned that they too are vulnerable to disinformation. Paris benefited from the errors made by the United States: an overconfidence that disinformation campaigns would not work in the United States; reluctance to address the hacking of the Democratic National Committee; and a very delayed and muted response by the government.</p> | |||
| <p><strong>Lesson 2: Use Trusted and Independent Administrative Actors.</strong> The Obama administration did not intervene in the U.S. electoral process even when the process was under siege because it did not wish to give the impression of advantaging the Democratic candidate. However, the French precedent shows that a state can intervene and take measures effectively provided that these measures are carried out by <em>administrative, independent, and nonpolitical authorities</em>. In France, these authorities provided technical and politically neutral expertise to ensure the integrity of the electoral process from start to finish. Two bodies played a particularly crucial role in France: the National Commission for the Control of the Electoral Campaign for the Presidential Election (CNCCEP), a special body set up in the months preceding every French presidential election to serve as a campaign watchdog; and the National Cybersecurity Agency (ANSSI), whose mission is to ensure the integrity of electoral results and to maintain public confidence in the electoral process.</p> | |||
| <blockquote>Paris benefited from the errors made by the United States.</blockquote> | |||
| <p><strong>Lesson 3: Raise Awareness.</strong> ANSSI and CNCCEP frequently alerted the media, political parties, and the public to the risk of cyberattacks and disinformation during the presidential campaign. ANSSI was particularly proactive, offering to meet with and educate all campaign staffs at very early stages of the election. In October 2016, ANSSI organized an open workshop on cybersecurity. All but one party participated (Marine Le Pen’s <em>Front National</em> party rejected the offer). During the campaign, in early February 2017, ANSSI paid a visit to the Macron campaign headquarters to warn them about a potential attack. They were told that they were being watched, there was a risk of being hacked, and to be particularly careful using the Telegram app, which is Russian designed.<sup>3</sup> After this briefing, the Macron team switched from Telegram to WhatsApp, an end-to-end encrypted service owned by Facebook.<sup>4</sup></p> | |||
| <p><strong>Lesson 4: Show Resolve and Determination.</strong> From the start of the presidential campaign, the French government signaled—both publicly and through confidential diplomatic channels—its determination to prevent, detect, and, if necessary, respond to foreign interference. In an important speech on cyber defense in December 2016, the minister of defense announced the creation of a cyber command composed of 2,600 “cyber fighters.” A few weeks later, the minister publicly remarked that “by targeting the electoral process of a country, one undermines its democratic foundations, its sovereignty” and that “France reserves the right to retaliate by any means it deems appropriate . . . through our cyber arsenal but also by conventional armed means.”<sup>5</sup> One month later, when Macron’s political movement <em>En Marche!</em> announced that it was the target of an orchestrated attack, the minister of foreign affairs told the French Parliament that “France will not tolerate any interference in its electoral process, no more from Russia than from any other state”.<sup>6</sup> A similar message was conveyed privately by the minister to his Russian counterpart and by President Hollande to President Putin.</p> | |||
| <p><strong>Lesson 5: Take (Technical) Precautions.</strong> ANSSI heightened security at every step of the electoral process in order to ensure the integrity of the vote. The head of ANSSI stated before Parliament that he was “personally” opposed to voting machines and electronic voting.<sup>7</sup> Despite the unpopularity of the measure, the Ministry of Foreign Affairs followed his recommendation and, by March 2017, the government announced the end of electronic voting for citizens abroad because of the high risk of cyberattacks.</p> | |||
| <p><strong>Lesson 6: Put Pressure on Digital Platforms.</strong> Ten days before the vote, Facebook announced that it “[had taken] action against over 30,000 fake accounts” in France. It was later revealed that the actual number of suspended French Facebook accounts was actually 70,000.<sup>8</sup> Facebook had never taken such a drastic measure before but it responded to growing pressure by both states and the public to take decisive steps as digital platforms are the principal medium for the spread of disinformation.</p> | |||
| <p><a href="https://csis-prod.s3.amazonaws.com/s3fs-public/180620_french_election_voting.jpg?aEjosN.q1G8B6CAYCzE8LHYLI_PhBUgB"><img alt="" src="https://csis-prod.s3.amazonaws.com/s3fs-public/180620_french_election_voting.jpg?aEjosN.q1G8B6CAYCzE8LHYLI_PhBUgB" typeof="foaf:Image"/></a></p> | |||
| <p><center><font size="3">Polling station during the second round of the French presidential election. - Photo: Jean-Francois Monier/AFP/Getty Images</font></center></p> | |||
| <p> </p> | |||
| <h3><strong>Reaction</strong></h3> | |||
| <p><strong>Lesson 7: Transparency and Timeliness Are Essential: Make All Hacking Attempts Public.</strong> Throughout the campaign, the <em>En Marche!</em> team communicated openly and extensively about its susceptibility to hacking and, soon after, about the hacking itself. They made public all hacking attempts against them, which generated awareness among the population and the authorities. When the Macron Leaks occurred<em>,</em> the <em>En Marche!</em> campaign reacted in a matter of hours. At 11:56 pm on Friday, May 5, only hours after the documents were released online and 4 minutes before the electoral silence—the French legally mandated period of 48 hours of reflection prior to an election where the media and campaigns are silent—went into effect, the Macron campaign issued a press release stating that “The movement has been the victim of a massive and coordinated hacking operation.”<sup>9</sup></p> | |||
| <p><strong>Lesson 8: Beat Hackers at Their Own Game.</strong> The Macron Leaks were a combination of real emails and forgeries. But many of fake emails were so obviously fake—for example, the e-mails confessed to detailed accounts of untoward sexual practices or buying cocaine—that they actually helped the Macron team. Real emails in the hacked cache that could have damaged the Macron campaign, such as one that argued that “it is necessary that we lay off as many employees as we can after May 5,”<sup>10</sup> could not immediately be assumed authentic, so the controversy did not take root. In a risky move, the campaign staff went a step further. Knowing that they would be hacked, the campaign forged emails and fake documents themselves to confuse the hackers with irrelevant and even deliberately ludicrous information. By placing false flags, the campaign wished to inundate, confuse, and impede the work of the hackers with false information and slow them down. The campaign’s strategy of “counter-retaliation for phishing attempts”<sup>11</sup> is known as cyber or digital blurring. It worked by turning the burden-of-proof tables on the hackers. The Macron campaign staff did not have to explain potentially compromising information contained in the Macron Leaks; rather, the hackers had to justify why they stole and leaked information that seemed, at best, useless and, at worst, false or misleading. The whole thing made the population doubt the authenticity of any of the leaked material.</p> | |||
| <p><strong>Lesson 9: Strike Back on Social Media.</strong> The forceful presence of the Macron campaign staff on social media enabled them to respond quickly to the spread of disinformation. They tried to respond to as many posts or comments as possible that mentioned the “Macron Leaks,” so as not allow trolls to have the last word.</p> | |||
| <p><strong>Lesson 10: Use Humor When Possible: Readership Improves.</strong> In certain instances, the Macron campaign’s injection of humor and irony <strong> </strong>into their responses increased the visibility and popularity of those responses across different platforms with undertones of mocking the amateurish attempts to influence the election.</p> | |||
| <p><strong>Lesson 11: Law Enforcement Must Engage Immediately.</strong> Within a few hours of the initial email release, the public prosecutor’s office in Paris opened an investigation, which was entrusted to the Information Technology Fraud Investigation Brigade of the Paris Police.</p> | |||
| <p><strong>Lesson 12: Undermine Propaganda Outlets.</strong> On April 27, RT and Sputnik were denied accreditation by the Macron team to cover the remainder (until May 7) of its campaign. The reason cited was their “systematic desire to issue fake news and false information” as well as their “spreading [of] lies methodically and systematically.”<sup>12</sup> Even after the election, both outlets have been occasionally banned from the Élysée’s Presidential Palace and Foreign Ministry press conferences.</p> | |||
| <p>This has been a controversial decision that fueled the Kremlin’s narrative that France is doing exactly what it criticizes Russia for doing, allowing Russian President Putin an opportunity to lecture France on freedom of the press. However, the decision to ban RT and Sputnik from covering certain events was justified on the basis that these are propaganda entities and not media outlets as President Macron publicly stated following his meeting with Putin at Versailles only weeks after his election. This is also the position the European Parliament adopted as early as November 2016.<sup>13</sup> Moreover, attendance at these press conferences is by invitation only so there is no requirement that all outlets participate and RT and Sputnik are still permitted to operate in France.</p> | |||
| <p><strong>Lesson 13: Trivialize the Leaked Content.</strong> The <em>En Marche!</em> press release said that the leaked documents “reveal the normal operation of a presidential campaign.” Nothing illegal, let alone interesting, was found among the documents. Fortunately for the Macron campaign (which was not necessarily true with U.S. election disclosures), the fact that nothing compromising was found in the emails improved Macron’s positive image as an authentic and “clean” candidate, compared to earlier scandals involving another presidential candidate.</p> | |||
| <blockquote>There was a disinformation campaign, data hacking, and large-scale leaking but there was no whitewashing or mainstreaming. The sequence was disrupted.</blockquote> | |||
| <p><strong>Lesson 14: Compartmentalize.</strong> There was nothing scandalous in the leaked emails because Macron’s campaign staff was aware from the beginning that it was likely to be vulnerable to hacking. Understanding that everything staff wrote could one day be hacked and leaked, the Macron campaign developed “three levels of communication: the trivial and logistical by email, the confidential on the [encrypted] apps, and the sensitive, only face-to-face.”<sup>14</sup></p> | |||
| <p><strong>Lesson 15: Impress Upon the Media the Liabilities of Irresponsible Behavior.</strong> The night of the release of the emails, Macron’s team referred the case to the CNCCEP, which issued a press release the following day, asking “the media not to report on the content of this data, especially on their websites, reminding the media that the dissemination of false information is a breach of law, above all criminal law.” The majority of traditional media sources complied, and some even drew their readers’ attention to the timing of the leaks, asking them to exercise caution before responding to what might be a disinformation and destabilization operation directed against the French democratic process.</p> | |||
| <h3><strong>Conclusion</strong></h3> | |||
| <p>Using the 2016 U.S. presidential election as “a reference case,” Finnish researcher Mika Aaltola has identified five stages of election meddling: “(1) using disinformation to amplify suspicions and divisions; (2) stealing sensitive and leakable data; (3) leaking the stolen data via supposed ‘hacktivists;’ (4) whitewashing the leaked data through the professional media; and (5) secret colluding [between a candidate and a foreign state] in order to synchronize election efforts.”<sup>15</sup> According to this scale, the Macron Leaks reached stage three: there was a disinformation campaign, data hacking, and large-scale leaking but there was no whitewashing or mainstreaming. The sequence was disrupted between stages three and four. What was successfully prevented was “information laundering,” the process by which the initial traces of foreign disruption are “washed” from the information, stories, and narrative.<sup>16</sup> This was prevented due to the aforementioned countermeasures and the resilience of the French media environment.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://www.csis.org/analysis/successfully-countering-russian-electoral-interference">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 86
- 0
cache/078355f2f86d04b9814badaa1087b91a/index.md
View File
| @@ -0,0 +1,86 @@ | |||
| title: Successfully Countering Russian Electoral Interference | |||
| url: https://www.csis.org/analysis/successfully-countering-russian-electoral-interference | |||
| hash_url: 078355f2f86d04b9814badaa1087b91a | |||
| <h3><strong>The Issue</strong></h3> | |||
| <p><em>The 2017 French presidential election remains the clearest failed attempt by a foreign entity to influence an electoral process in recent years. Taking aim at presidential candidate Emmanuel Macron, Russian interference succeeded neither in interfering with the election nor in antagonizing French society. This Brief examines how France successfully withstood the disinformation and interference; how this failed attempt can be explained; and, looking to the future, what lessons can be learned from this experience? </em></p> | |||
| <div> | |||
| <h3><strong>Introduction</strong></h3> | |||
| <p>On Friday, May 5, 2017—just two days before the second and final round of the French presidential elections—gigabytes of data hacked from Emmanuel Macron’s presidential campaign team were released online. Months earlier an orchestrated disinformation campaign against the Macron presidential campaign had already begun. The so-called Macron Leaks—a combination of real emails and forgeries—could have been yet another example of a long list of attempts by Russia to interfere in a high-stakes transatlantic election. But the 2017 French presidential election may be the exception that proves the rule: it is the most clearly <em>failed</em> attempt. The Kremlin neither succeeded in interfering with the presidential election nor in dividing French society.</p> | |||
| <p>As the United States prepares to hold nationwide elections on November 6, 2018, the director of national intelligence, Dan Coats, has already warned in February of this year that “We expect Russia to continue using propaganda, social media, false-flag personas, sympathetic spokespeople and other means of influence to try to exacerbate social and political fissures in the United States.” Calling Russian influence “pervasive,” Director Coats further noted that “The Russians have a strategy that goes well beyond what is happening in the United States,” he said. “While they have historically tried to do these types of things, clearly in 2016 they upped their game. They took advantage, a sophisticated advantage of social media. They are doing that not only in the United States but . . . throughout Europe and perhaps elsewhere.” Because the United States is not well prepared for future elections, it is necessary to study the past.</p> | |||
| <p>This is why the 2017 French presidential election is a particularly important election to study and why we highlight French scholar Jean-Baptiste Jeangène Vilmer’s groundbreaking report on the Macron Leaks.<sup>1</sup> Drawing in part upon the work of CSIS visiting fellow Boris Toucas,<sup>2</sup> Vilmer’s forthcoming report will examine what happened during the French presidential election; who orchestrated the affair; how it was successfully countered; and what lessons can be learned. This Brief, which is part of the forthcoming CSIS comprehensive report, sums up the main lessons learned.</p> | |||
| <p>Myriad structural factors, luck, as well as effective anticipation and reaction by the Macron campaign staff, government and civil society, and especially the mainstream media, combined to successfully resist Russian malign influence.</p> | |||
| <p align="right">- <a href="/people/heather-conley"><strong>Heather A. Conley</strong></a>, CSIS</p> | |||
| </div> | |||
| <h3><strong>Structural Factors</strong></h3> | |||
| <p>Compared to the United States or United Kingdom, France presents a less vulnerable political and media environment for a number of structural reasons. Unlike in the United States, the election of the French president is direct (e.g., there is no electoral college): attempts at interference or influence are more obvious, as they involve targeting candidates rather than constituencies. But most importantly, the French election has two rounds, which creates an additional difficulty for a malign actor to determine which two candidates will make it to the second round. The second round of voting also permits the population to dramatically shift their support to another candidate to block an unexpected result after the first round. The French media environment consists mainly of mainstream and critical media sources and is largely free of tabloid-style outlets and “alternative” websites that are common in the United States and United Kingdom. Culturally, critical thinking and a healthy skepticism are also deeply ingrained into French society at an early stage and throughout one’s professional life.</p> | |||
| <h3><strong>Luck</strong></h3> | |||
| <p>The Macron team was fortunate that those who hacked into their emails were sloppy and made a number of mistakes. Clearly, these individuals were overconfident and overestimated their ability to attract public attention and mobilize online communities. They also underestimated the resistance by French media and did not anticipate the Macron campaign staff reaction. Perhaps because the leaks revealed so little, there was an assumption that creating confusion would be sufficient. But the thousands of emails and other data appeared to have overwhelmed the public, enhancing their disinterest.</p> | |||
| <blockquote>The Macron team was fortunate that those who hacked into their emails were sloppy and made a number of mistakes.</blockquote> | |||
| <p>Releasing Macron’s staff emails just hours before the electoral silence period was a risk. While the hackers did not want Macron to be able to defend himself, the limited time was also insufficient to spread the information. Moreover, the timing also rendered the entire revelation highly suspicious, the disinformation suffered from cultural clumsiness, and some of the fake documents were so absurd that the whole episode seemed amateurish. Interestingly, the accounts and bots that spread the misinformation were mostly in English because the leaks were first spread by the American alt-right community. Not only is this a completely ineffective means to reach a French-speaking audience, it also likely alienated French nationalist voters who are not inclined to support anything American. France was lucky in the sense that this disinformation attack seemed hastily and clumsily formed. A more interesting question would be why was this organized so poorly? A last-minute decision due to the second-round vote? Other Russian agencies attempting to engage in similarly successful tactics but without the skills to pull it off?</p> | |||
| <p>Good fortune or not, France successfully anticipated, reacted, and coordinated its response between the Macron campaign staff, the government, and civil society. These are the lessons we learned from this experience:</p> | |||
| <h3><strong>Anticipation</strong></h3> | |||
| <p><strong>Lesson 1: Learn from Others.</strong> France had an advantage in that it was targeted after cyberattacks and disinformation campaigns were launched in the Netherlands, the United Kingdom, and the United States. All these precedents raised government and public awareness, but the 2016 U.S. presidential campaign was a game-changer. Prior to the U.S. election, awareness of Russian disinformation and malign influence was mostly limited to the Baltic and Central European states. Since then, large Western European states have learned that they too are vulnerable to disinformation. Paris benefited from the errors made by the United States: an overconfidence that disinformation campaigns would not work in the United States; reluctance to address the hacking of the Democratic National Committee; and a very delayed and muted response by the government.</p> | |||
| <p><strong>Lesson 2: Use Trusted and Independent Administrative Actors.</strong> The Obama administration did not intervene in the U.S. electoral process even when the process was under siege because it did not wish to give the impression of advantaging the Democratic candidate. However, the French precedent shows that a state can intervene and take measures effectively provided that these measures are carried out by <em>administrative, independent, and nonpolitical authorities</em>. In France, these authorities provided technical and politically neutral expertise to ensure the integrity of the electoral process from start to finish. Two bodies played a particularly crucial role in France: the National Commission for the Control of the Electoral Campaign for the Presidential Election (CNCCEP), a special body set up in the months preceding every French presidential election to serve as a campaign watchdog; and the National Cybersecurity Agency (ANSSI), whose mission is to ensure the integrity of electoral results and to maintain public confidence in the electoral process.</p> | |||
| <blockquote>Paris benefited from the errors made by the United States.</blockquote> | |||
| <p><strong>Lesson 3: Raise Awareness.</strong> ANSSI and CNCCEP frequently alerted the media, political parties, and the public to the risk of cyberattacks and disinformation during the presidential campaign. ANSSI was particularly proactive, offering to meet with and educate all campaign staffs at very early stages of the election. In October 2016, ANSSI organized an open workshop on cybersecurity. All but one party participated (Marine Le Pen’s <em>Front National</em> party rejected the offer). During the campaign, in early February 2017, ANSSI paid a visit to the Macron campaign headquarters to warn them about a potential attack. They were told that they were being watched, there was a risk of being hacked, and to be particularly careful using the Telegram app, which is Russian designed.<sup>3</sup> After this briefing, the Macron team switched from Telegram to WhatsApp, an end-to-end encrypted service owned by Facebook.<sup>4</sup></p> | |||
| <p><strong>Lesson 4: Show Resolve and Determination.</strong> From the start of the presidential campaign, the French government signaled—both publicly and through confidential diplomatic channels—its determination to prevent, detect, and, if necessary, respond to foreign interference. In an important speech on cyber defense in December 2016, the minister of defense announced the creation of a cyber command composed of 2,600 “cyber fighters.” A few weeks later, the minister publicly remarked that “by targeting the electoral process of a country, one undermines its democratic foundations, its sovereignty” and that “France reserves the right to retaliate by any means it deems appropriate . . . through our cyber arsenal but also by conventional armed means.”<sup>5</sup> One month later, when Macron’s political movement <em>En Marche!</em> announced that it was the target of an orchestrated attack, the minister of foreign affairs told the French Parliament that “France will not tolerate any interference in its electoral process, no more from Russia than from any other state”.<sup>6</sup> A similar message was conveyed privately by the minister to his Russian counterpart and by President Hollande to President Putin.</p> | |||
| <p><strong>Lesson 5: Take (Technical) Precautions.</strong> ANSSI heightened security at every step of the electoral process in order to ensure the integrity of the vote. The head of ANSSI stated before Parliament that he was “personally” opposed to voting machines and electronic voting.<sup>7</sup> Despite the unpopularity of the measure, the Ministry of Foreign Affairs followed his recommendation and, by March 2017, the government announced the end of electronic voting for citizens abroad because of the high risk of cyberattacks.</p> | |||
| <p><strong>Lesson 6: Put Pressure on Digital Platforms.</strong> Ten days before the vote, Facebook announced that it “[had taken] action against over 30,000 fake accounts” in France. It was later revealed that the actual number of suspended French Facebook accounts was actually 70,000.<sup>8</sup> Facebook had never taken such a drastic measure before but it responded to growing pressure by both states and the public to take decisive steps as digital platforms are the principal medium for the spread of disinformation.</p> | |||
| <p><a href="https://csis-prod.s3.amazonaws.com/s3fs-public/180620_french_election_voting.jpg?aEjosN.q1G8B6CAYCzE8LHYLI_PhBUgB"><img alt="" src="https://csis-prod.s3.amazonaws.com/s3fs-public/180620_french_election_voting.jpg?aEjosN.q1G8B6CAYCzE8LHYLI_PhBUgB" typeof="foaf:Image"/></a></p> | |||
| <center><font size="3">Polling station during the second round of the French presidential election. - Photo: Jean-Francois Monier/AFP/Getty Images</font></center> | |||
| <p> </p> | |||
| <h3><strong>Reaction</strong></h3> | |||
| <p><strong>Lesson 7: Transparency and Timeliness Are Essential: Make All Hacking Attempts Public.</strong> Throughout the campaign, the <em>En Marche!</em> team communicated openly and extensively about its susceptibility to hacking and, soon after, about the hacking itself. They made public all hacking attempts against them, which generated awareness among the population and the authorities. When the Macron Leaks occurred<em>,</em> the <em>En Marche!</em> campaign reacted in a matter of hours. At 11:56 pm on Friday, May 5, only hours after the documents were released online and 4 minutes before the electoral silence—the French legally mandated period of 48 hours of reflection prior to an election where the media and campaigns are silent—went into effect, the Macron campaign issued a press release stating that “The movement has been the victim of a massive and coordinated hacking operation.”<sup>9</sup></p> | |||
| <p><strong>Lesson 8: Beat Hackers at Their Own Game.</strong> The Macron Leaks were a combination of real emails and forgeries. But many of fake emails were so obviously fake—for example, the e-mails confessed to detailed accounts of untoward sexual practices or buying cocaine—that they actually helped the Macron team. Real emails in the hacked cache that could have damaged the Macron campaign, such as one that argued that “it is necessary that we lay off as many employees as we can after May 5,”<sup>10</sup> could not immediately be assumed authentic, so the controversy did not take root. In a risky move, the campaign staff went a step further. Knowing that they would be hacked, the campaign forged emails and fake documents themselves to confuse the hackers with irrelevant and even deliberately ludicrous information. By placing false flags, the campaign wished to inundate, confuse, and impede the work of the hackers with false information and slow them down. The campaign’s strategy of “counter-retaliation for phishing attempts”<sup>11</sup> is known as cyber or digital blurring. It worked by turning the burden-of-proof tables on the hackers. The Macron campaign staff did not have to explain potentially compromising information contained in the Macron Leaks; rather, the hackers had to justify why they stole and leaked information that seemed, at best, useless and, at worst, false or misleading. The whole thing made the population doubt the authenticity of any of the leaked material.</p> | |||
| <p><strong>Lesson 9: Strike Back on Social Media.</strong> The forceful presence of the Macron campaign staff on social media enabled them to respond quickly to the spread of disinformation. They tried to respond to as many posts or comments as possible that mentioned the “Macron Leaks,” so as not allow trolls to have the last word.</p> | |||
| <p><strong>Lesson 10: Use Humor When Possible: Readership Improves.</strong> In certain instances, the Macron campaign’s injection of humor and irony <strong> </strong>into their responses increased the visibility and popularity of those responses across different platforms with undertones of mocking the amateurish attempts to influence the election.</p> | |||
| <p><strong>Lesson 11: Law Enforcement Must Engage Immediately.</strong> Within a few hours of the initial email release, the public prosecutor’s office in Paris opened an investigation, which was entrusted to the Information Technology Fraud Investigation Brigade of the Paris Police.</p> | |||
| <p><strong>Lesson 12: Undermine Propaganda Outlets.</strong> On April 27, RT and Sputnik were denied accreditation by the Macron team to cover the remainder (until May 7) of its campaign. The reason cited was their “systematic desire to issue fake news and false information” as well as their “spreading [of] lies methodically and systematically.”<sup>12</sup> Even after the election, both outlets have been occasionally banned from the Élysée’s Presidential Palace and Foreign Ministry press conferences.</p> | |||
| <p>This has been a controversial decision that fueled the Kremlin’s narrative that France is doing exactly what it criticizes Russia for doing, allowing Russian President Putin an opportunity to lecture France on freedom of the press. However, the decision to ban RT and Sputnik from covering certain events was justified on the basis that these are propaganda entities and not media outlets as President Macron publicly stated following his meeting with Putin at Versailles only weeks after his election. This is also the position the European Parliament adopted as early as November 2016.<sup>13</sup> Moreover, attendance at these press conferences is by invitation only so there is no requirement that all outlets participate and RT and Sputnik are still permitted to operate in France.</p> | |||
| <p><strong>Lesson 13: Trivialize the Leaked Content.</strong> The <em>En Marche!</em> press release said that the leaked documents “reveal the normal operation of a presidential campaign.” Nothing illegal, let alone interesting, was found among the documents. Fortunately for the Macron campaign (which was not necessarily true with U.S. election disclosures), the fact that nothing compromising was found in the emails improved Macron’s positive image as an authentic and “clean” candidate, compared to earlier scandals involving another presidential candidate.</p> | |||
| <blockquote>There was a disinformation campaign, data hacking, and large-scale leaking but there was no whitewashing or mainstreaming. The sequence was disrupted.</blockquote> | |||
| <p><strong>Lesson 14: Compartmentalize.</strong> There was nothing scandalous in the leaked emails because Macron’s campaign staff was aware from the beginning that it was likely to be vulnerable to hacking. Understanding that everything staff wrote could one day be hacked and leaked, the Macron campaign developed “three levels of communication: the trivial and logistical by email, the confidential on the [encrypted] apps, and the sensitive, only face-to-face.”<sup>14</sup></p> | |||
| <p><strong>Lesson 15: Impress Upon the Media the Liabilities of Irresponsible Behavior.</strong> The night of the release of the emails, Macron’s team referred the case to the CNCCEP, which issued a press release the following day, asking “the media not to report on the content of this data, especially on their websites, reminding the media that the dissemination of false information is a breach of law, above all criminal law.” The majority of traditional media sources complied, and some even drew their readers’ attention to the timing of the leaks, asking them to exercise caution before responding to what might be a disinformation and destabilization operation directed against the French democratic process.</p> | |||
| <h3><strong>Conclusion</strong></h3> | |||
| <p>Using the 2016 U.S. presidential election as “a reference case,” Finnish researcher Mika Aaltola has identified five stages of election meddling: “(1) using disinformation to amplify suspicions and divisions; (2) stealing sensitive and leakable data; (3) leaking the stolen data via supposed ‘hacktivists;’ (4) whitewashing the leaked data through the professional media; and (5) secret colluding [between a candidate and a foreign state] in order to synchronize election efforts.”<sup>15</sup> According to this scale, the Macron Leaks reached stage three: there was a disinformation campaign, data hacking, and large-scale leaking but there was no whitewashing or mainstreaming. The sequence was disrupted between stages three and four. What was successfully prevented was “information laundering,” the process by which the initial traces of foreign disruption are “washed” from the information, stories, and narrative.<sup>16</sup> This was prevented due to the aforementioned countermeasures and the resilience of the French media environment.</p> | |||
+ 529
- 0
cache/07e6ba2425870233ffb2af9a31eb43d9/index.html
File diff suppressed because it is too large
View File
+ 5
- 0
cache/07e6ba2425870233ffb2af9a31eb43d9/index.md
File diff suppressed because it is too large
View File
+ 639
- 0
cache/07f1fb28b17eb86cd509fa82a3885f22/index.html
View File
| @@ -0,0 +1,639 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>L’ensauvagement du web (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://theconversation.com/lensauvagement-du-web-95190"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| L’ensauvagement du web (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="https://theconversation.com/lensauvagement-du-web-95190">Source originale du contenu</a></h3> | |||
| <p>Qu’il est loin le temps du <a href="https://www.persee.fr/doc/colan_0336-1500_1999_num_119_1_2914">discours utopique sur l’Internet</a> ! Loin le temps où des esprits enthousiastes pensaient que la technologie du <em>world wide web</em> avait vocation à servir les idéaux démocratiques, participatifs et autogestionnaires. On a vu, durant la décennie écoulée, combien les logiques mercantiles s’en étaient emparées ; combien certains opérateurs agissaient en prédateurs pour s’assurer un monopole ; combien les groupuscules extrémistes l’utilisaient pour répandre leur haine ; combien les terroristes l’instrumentalisaient pour attirer à eux de nouveaux adeptes ; combien les États avaient eux aussi appris à s’en servir pour en faire un support d’influence ou de déstabilisation ; combien des enfants pouvaient en faire un moyen de <a href="http://www.enseignement.be/upload/circulaires/000000000002/FWB--Circulaire5714(5945_20160512_142520).pdf">cyberharcèlement</a>.</p> | |||
| <p>Et si des usages démocratiques et participatifs ont pu éclore çà ou là, force est de constater que le côté obscur de la force est bien représenté dans le cyberespace. Dans l’appropriation sociale d’outils d’expression que sont les réseaux socionumériques comme Facebook, Twitter, Instagram ou 4Chan et Reddit, on constate que les coups portés au <a href="https://prezi.com/kshufaazca7q/le-processus-de-civilisation-selon-norbert-elias/">processus de civilisation</a> cher au sociologue Norbert Elias (un procès de domestication des mœurs et de contrôle de nos pulsions) sont lourds et constants.</p> | |||
| <h2>Un processus de décivilisation ?</h2> | |||
| <p>L’autocontrainte sociale que les États modernes ont réussi à imposer à leurs assujettis se délite peu à peu sous nos yeux. Le vernis de civilisation apposé sur nos mœurs et nos pulsions craque çà et là. Entre <a href="https://www.cairn.info/revue-vingtieme-siecle-revue-d-histoire-2010-2-p-161.htm">« informalisation »</a> (selon le sociologue Cas Wouters), <a href="https://www.erudit.org/fr/revues/ps/2000-v19-n1-ps2496/040213ar.pdf">« désinstitutionalisation »</a> (selon les sociologues François Dubet et Danilo Martucelli) ou encore <a href="http://www.journaldumauss.net/?Le-present-liquide">« liquéfaction »</a> (selon le sociologue Zygmunt Baumann), le même constat affleure : une crise de la société entendue comme système d’encadrement collectif, comme dispositif de contrôle des mœurs, comme outil de socialisation pour faire adhérer chacun à un pacte social posé comme protecteur et bénéfique. L’historien des idées François Cusset, dans un ouvrage récent, parle quant à lui de <a href="http://www.editionsladecouverte.fr/catalogue/index-Le_d_cha_nement_du_monde-9782707198150.html">« déchaînement du monde »</a>, en proie à un mouvement de « décivilisation ».</p> | |||
| <p>Ce qui se dit et s’échange, ce qui est produit et qui circule sur les plateformes de réseaux sociaux sont, à nos yeux, le reflet (parfois grossissant et grimaçant) de cette situation. Le voile de la politesse, du respect d’autrui, de l’écoute réciproque se déchire, laissant apparaître l’hydre du sarcasme, de l’égotisme, de l’injure et de la haine de l’autre. Il faut donc analyser l’ensauvagement du web, cet usage transgressif et agressif des dispositifs numériques d’expression qui rompt avec les règles de civilité ordinaires fondatrices du pacte social.</p> | |||
| <p>Mais foin du déterminisme technologique par trop simpliste ! Les plateformes de réseaux sociaux ne sont pas porteuses de tous les péchés contemporains. Il n’y a aucune causalité impérative entre l’expression sur Twitter ou Facebook et la montée des discours haineux. L’usage courtois (comme l’amour, du reste) se peut encore trouver. Il n’en reste pas moins que ces dispositifs technologiques et les mécanismes psychosociaux qu’ils induisent, peuvent favoriser, hélas, les usages malveillants et transgressifs.</p> | |||
| <h2>L’anonymat dissociatif</h2> | |||
| <p>Sans induire une hiérarchisation, on peut énumérer une série de dispositifs technologiques appareillés à des mécanismes psychologiques qui expliquent la fréquence de ces comportements transgressifs et agressifs sur les réseaux numériques.</p> | |||
| <p>La possibilité offerte de s’inventer des identités en ligne par un pseudonyme est un facteur explicatif important. Car sous couvert de l’anonymat, les couards de toutes obédiences peuvent s’en donner à cœur joie, lâcher leurs mots comme on lâche ses coups, en se sentant intouchables. Et parmi les facteurs favorisant l’<a href="https://s3.amazonaws.com/academia.edu.documents/30420106/suler.pdf">effet de désinhibition en ligne</a>, analysé dès 2004 par le psychologue John Suler, ce dernier distingue bien « l’anonymat dissociatif » qui fait que « le moi en ligne devient un moi compartimenté », la séparation de son action en ligne de sa vie réelle développant un sentiment d’impunité.</p> | |||
| <figure class="align-center "> | |||
| <img alt="" src="https://images.theconversation.com/files/215306/original/file-20180417-163991-7flrjt.png?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip"/> | |||
| <figcaption> | |||
| <span class="caption">Troll masqué.</span> | |||
| <span class="attribution"><a class="source" href="https://commons.wikimedia.org/wiki/File:Aaa_le_vengeur_inconnu.JPG">Wikimedia</a></span> | |||
| </figcaption> | |||
| </figure> | |||
| <p>C’est le cas du cyber harceleur, ou juste parfois de la figure plus anodine du « troll », « moyen de cracher son fiel sans le filtre du convenable et de la bien-pensance » écrivent dans leur <a href="https://www.bourin-editeur.fr/fr/books/monstres-20">récent ouvrage</a> sur les « monstres 2.0 » Pauline Escande-Gauquié et Bertrand Naivin.</p> | |||
| <h2>L’impunité communautaire</h2> | |||
| <p>L’agressivité peut aussi résulter des phénomènes communautaires que ces plateformes aspirent justement à créer. Un sentiment de toute-puissance peut émerger chez certains internautes isolés mais confortés par le groupe d’échange auquel ils s’identifient. Les affinités communautaires qui se créent ainsi permettent à des individus de chasser en meute, de harceler une victime expiatrice en se sentant invulnérables grâce au poids du nombre ou confortés grâce au plaisir du partage viral.</p> | |||
| <p>« Les insultes, diffusions de rumeurs ou de photos (voire les trois) prennent rapidement des proportions importantes, produisant un effet d’emballement dû à la viralité : envoi initial, puis renvoi par une personne, repartages, captures d’écrans et diffusion sur d’autres réseaux sociaux, commentaires, etc. » écrivent les auteurs du <a href="https://www.centre-hubertine-auclert.fr/sites/default/files/fichiers/synthese-etude-cybersexisme-cha-web_0.pdf">rapport sur le cybersexisme</a> chez les 12-15 ans.</p> | |||
| <h2>L’effacement du visage d’autrui</h2> | |||
| <p>Le procès de décivilisation peut aussi être le produit de la situation singulière d’échange discursif où la médiation technologique efface le visage d’autrui de notre champ de vision. Or le visage de l’autre est un frein éthique car pour le philosophe Emmanuel Levinas « le visage est signification » dit-il dans <a href="https://www.franceculture.fr/emissions/les-nuits-de-france-culture/emmanuel-levinas-je-ne-minteresse-pas-lethique-mais-ce-qui"><em>Éthique et infini</em></a>. Le visage d’autrui est moins vu qu’il n’est d’abord une vision, un regard qui nous voit.</p> | |||
| <blockquote> | |||
| <p>« La relation au visage est d’emblée éthique. Le visage est ce qu’on ne peut tuer, ou du moins ce dont le sens consiste à dire : “tu ne tueras point”. »</p> | |||
| </blockquote> | |||
| <p>Et il poursuit son raisonnement ainsi :</p> | |||
| <blockquote> | |||
| <p>« Dès lors qu’autrui me regarde, j’en suis responsable sans même avoir à prendre de responsabilités, sa responsabilité m’incombe. »</p> | |||
| </blockquote> | |||
| <p>L’absence d’interaction visuelle directe libère donc l’internaute de freins éthiques à l’agressivité verbale envers autrui. Ce mécanisme psychologique est proche de ce que John Suler nomme « l’invisibilité » qui fait que les internautes « n’ont pas à s’inquiéter de quoi les autres ont l’air ou comment ils réagissent en réponse à ce qu’ils disent. »</p> | |||
| <h2>Autrui reconstruit par notre imaginaire</h2> | |||
| <p>Dans son analyse de « l’effet de désinhibition en ligne », John Suler évoque le mécanisme de « l’introjection solipsiste » qui correspond au fait que « consciemment ou inconsciemment, une personne peut assigner une image visuelle à ce qu’elle pense être ce à quoi l’internaute ressemble ou comment il se comporte. Ce compagnon en ligne devient alors un personnage dans son monde intrapsychique. »</p> | |||
| <p>On ne dialogue alors plus avec une personne réelle de l’autre côté du clavier et de l’écran, mais avec un personnage introjecté qui court dans son imaginaire. Or le fait qu’il devienne le fruit de notre construction psychique favorise la désinhibition voire l’agressivité, puisqu’il n’est plus que le fantasme négatif qu’on s’en est construit, méritant l’injure voire notre haine.</p> | |||
| <h2>« La levée du refoulement sur la haine »</h2> | |||
| <p>Cette interprétation rejoint celle de la philosophe et psychanalyste Hélène L’Heuillet qui analyse dans <a href="http://www.albin-michel.fr/ouvrages/tu-hairas-ton-prochain-comme-toi-meme-9782226397157"><em>Tu haïras ton prochain comme toi-même</em>,</a> « la levée du refoulement sur la haine ». Elle en voit une des manifestations dans les théories du complot (qui justement pullulent sur Internet).</p> | |||
| <blockquote> | |||
| <p>(Ces théories), en postulant une manipulation cachée et généralisée capable d’expliquer l’ordre du monde et le surgissement d’événements, ont une action libératoire sur la haine. Elles aident à la levée du refoulement de la haine. Le complot a partie liée au ressentiment et à l’envie : ce sont des puissants qui nous manipulent. Elles sont issues de la haine et permettent de se livrer à des actes violents sans être embarrassé par l’affect.</p> | |||
| </blockquote> | |||
| <h2>La logique du coup d’éclat permanent</h2> | |||
| <p>Les métriques associées à nos profils et à nos messages sont aussi un dispositif qui peut induire un relâchement de l’autocontrainte, dans un esprit de compétition. Ces métriques nous placent sous le regard évaluateur de chacun, faisant de chaque message un potentiel test de notre popularité et soumettant à la tentation ceux qui constatent qu’un propos transgressif, qui sort des conventions, y compris jusqu’à l’agressivité, obtient souvent plus de visibilité et de partages qu’un message sobre et pacifique.</p> | |||
| <p>La logique du coup d’éclat permanent, avec indicateur de succès immédiat, peut donc pousser à la transgression des règles de l’autocontrainte respectueuses d’autrui.</p> | |||
| <h2>Le côté obscur de la « culture LOL »</h2> | |||
| <p>Cela va de pair avec une des facettes de la « culture LOL », qui s’est développée sur ces réseaux. L’affichage d’une posture humoristique ou ironique, distanciée vis-à-vis des faits évoqués et de soi-même est omniprésent dans les messages. L’acronyme LOL (pour « Laughing out loud »), dont l’équivalent francophone serait mort de rire (acronyme : « mdr »), « ponctue les conversations sur le Net ou via les SMS, et annonce l’intention de déclencher un rire. Marqueur de la galaxie numérique, il exprime une tournure d’esprit espiègle qui consiste à ne rien prendre au sérieux et souvent à tourner en dérision les institutions et les personnes de la vie publique », écrit la sociologue <a href="http://www.pressesdesciencespo.fr/fr/livre/?GCOI=27246100385210">Monique Dagnaud</a>.</p> | |||
| <p>Tout se passe comme s’il ne fallait pas trop se prendre au sérieux, que la norme de la culture Internet était de jouer le jeu du détachement, de la complicité par le rire, du clin d’œil. Mais cela autorise certains à rejouer à l’envi la course au bon mot, même le plus vachard et humiliant, en aspirant à mettre les rieurs de son côté, en faisant rire non tout le monde, mais seulement certains au détriment d’autres. D’aucuns trouvent amusant de créer en ligne un « insultron.fr » au graphique suggestif, machine à générer automatiquement une injure aussitôt diffusable par un simple clic sur les boutons de partage des réseaux socionumériques.</p> | |||
| <figure class="align-center "> | |||
| <img alt="" src="https://images.theconversation.com/files/215304/original/file-20180417-163998-1j9z4zs.png?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip"/> | |||
| <figcaption> | |||
| <span class="caption">L’insultron.</span> | |||
| <span class="attribution"><span class="source">insultron.fr</span></span> | |||
| </figcaption> | |||
| </figure> | |||
| <h2>Le bannissement de la subtilité et du temps du raisonnement</h2> | |||
| <p>Le tempo des usages et la culture de la concision argumentative sont aussi un facteur explicatif. Les habitudes prises de publier des messages courts (quand ce n’est pas le dispositif qui l’impose) bannissent la subtilité du raisonnement au profit d’affirmations péremptoires et souvent offensives.</p> | |||
| <p>Il peut en résulter aussi un relâchement lexical que la culture du texto et du mail ont introduit, gommant peu à peu les formules de politesse, les phrases rituelles d’entrée en interaction et de clôture, héritées de l’échange épistolaire, au profit d’un propos direct et épuré, allant droit à l’essentiel (logique d’efficacité face au flux des messages à gérer) mais rentrant aussi plus dans le vif du sujet, en considérant encombrant l’enrobage, superflu l’euphémisation, superfétatoire les marques de respect et de préservation de la face d’autrui.</p> | |||
| <p>De même, le tempo effréné de ces plateformes nous soumet à la terrible tentation de l’hyperréactivité, de la réaction à chaud et émotionnelle au lieu de prendre le temps du recul et de la réponse à froid et mesurée. Et si cela est vrai des éructations d’énervement, cela est vrai aussi de l’injonction constante sur la toile à « être cool ». Cela implique un relâchement assumé et accepté des émotions, une spontanéité affective, valorisés comme gage de sincérité, mais qui ne poussent pas à l’autocontrôle.</p> | |||
| <p>On touche ici du doigt les perversions du « capitalisme pulsionnel » cher à la <a href="https://archivesic.ccsd.cnrs.fr/sic_01468798/file/SeminaireGRCDI_2008_A.Serres_Stiegleretcultureinfo.pdf">pensée</a> du philosophe <a href="https://fr.wikipedia.org/wiki/Bernard_Stiegler">Bernard Stiegler</a> dont Facebook est devenu le meilleur symbole. L’appel à publier, à commenter, à « liker » en appuyant sur un simple bouton (et même à exprimer d’autres sentiments en choisissant entre <a href="https://www.huffingtonpost.fr/2015/10/08/facebook-va-tester-un-nouveau-bouton-jaime_n_8263936.html">six emojis</a> apparues fin 2015, appelées des « réactions »), sont des appels à libérer son énergie libidinale au profit de réactions spontanées et affectives, tout en les partageant avec autrui.</p> | |||
| <figure class="align-center "> | |||
| <img alt="" src="https://images.theconversation.com/files/215305/original/file-20180417-163995-zae0ge.png?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip"/> | |||
| <figcaption> | |||
| <span class="caption">Les six emojis de réaction Facebook.</span> | |||
| <span class="attribution"><span class="source">Facebook</span></span> | |||
| </figcaption> | |||
| </figure> | |||
| <p>En échange de quoi nous offrons les données concernant nos goûts et dégoûts, nos amis, afin de recevoir la publicité et les contenus les mieux ciblés, ceux les plus proches de nos désirs…</p> | |||
| <h2>Une somme explosive de ressentiments</h2> | |||
| <p>Pour conclure, cédons la parole à <a href="http://www.editionsladecouverte.fr/catalogue/index-Le_d_cha_nement_du_monde-9782707198150.html">François Cusset</a> (p. 149-150), remettant le « déchaînement du monde » en lien avec le (triste) sort du « sujet moderne » :</p> | |||
| <blockquote> | |||
| <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> | |||
| <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> | |||
| </blockquote> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="https://theconversation.com/lensauvagement-du-web-95190">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 117
- 0
cache/07f1fb28b17eb86cd509fa82a3885f22/index.md
View File
| @@ -0,0 +1,117 @@ | |||
| title: L’ensauvagement du web | |||
| url: https://theconversation.com/lensauvagement-du-web-95190 | |||
| hash_url: 07f1fb28b17eb86cd509fa82a3885f22 | |||
| <p>Qu’il est loin le temps du <a href="https://www.persee.fr/doc/colan_0336-1500_1999_num_119_1_2914">discours utopique sur l’Internet</a> ! Loin le temps où des esprits enthousiastes pensaient que la technologie du <em>world wide web</em> avait vocation à servir les idéaux démocratiques, participatifs et autogestionnaires. On a vu, durant la décennie écoulée, combien les logiques mercantiles s’en étaient emparées ; combien certains opérateurs agissaient en prédateurs pour s’assurer un monopole ; combien les groupuscules extrémistes l’utilisaient pour répandre leur haine ; combien les terroristes l’instrumentalisaient pour attirer à eux de nouveaux adeptes ; combien les États avaient eux aussi appris à s’en servir pour en faire un support d’influence ou de déstabilisation ; combien des enfants pouvaient en faire un moyen de <a href="http://www.enseignement.be/upload/circulaires/000000000002/FWB--Circulaire5714(5945_20160512_142520).pdf">cyberharcèlement</a>.</p> | |||
| <p>Et si des usages démocratiques et participatifs ont pu éclore çà ou là, force est de constater que le côté obscur de la force est bien représenté dans le cyberespace. Dans l’appropriation sociale d’outils d’expression que sont les réseaux socionumériques comme Facebook, Twitter, Instagram ou 4Chan et Reddit, on constate que les coups portés au <a href="https://prezi.com/kshufaazca7q/le-processus-de-civilisation-selon-norbert-elias/">processus de civilisation</a> cher au sociologue Norbert Elias (un procès de domestication des mœurs et de contrôle de nos pulsions) sont lourds et constants.</p> | |||
| <h2>Un processus de décivilisation ?</h2> | |||
| <p>L’autocontrainte sociale que les États modernes ont réussi à imposer à leurs assujettis se délite peu à peu sous nos yeux. Le vernis de civilisation apposé sur nos mœurs et nos pulsions craque çà et là. Entre <a href="https://www.cairn.info/revue-vingtieme-siecle-revue-d-histoire-2010-2-p-161.htm">« informalisation »</a> (selon le sociologue Cas Wouters), <a href="https://www.erudit.org/fr/revues/ps/2000-v19-n1-ps2496/040213ar.pdf">« désinstitutionalisation »</a> (selon les sociologues François Dubet et Danilo Martucelli) ou encore <a href="http://www.journaldumauss.net/?Le-present-liquide">« liquéfaction »</a> (selon le sociologue Zygmunt Baumann), le même constat affleure : une crise de la société entendue comme système d’encadrement collectif, comme dispositif de contrôle des mœurs, comme outil de socialisation pour faire adhérer chacun à un pacte social posé comme protecteur et bénéfique. L’historien des idées François Cusset, dans un ouvrage récent, parle quant à lui de <a href="http://www.editionsladecouverte.fr/catalogue/index-Le_d_cha_nement_du_monde-9782707198150.html">« déchaînement du monde »</a>, en proie à un mouvement de « décivilisation ».</p> | |||
| <p>Ce qui se dit et s’échange, ce qui est produit et qui circule sur les plateformes de réseaux sociaux sont, à nos yeux, le reflet (parfois grossissant et grimaçant) de cette situation. Le voile de la politesse, du respect d’autrui, de l’écoute réciproque se déchire, laissant apparaître l’hydre du sarcasme, de l’égotisme, de l’injure et de la haine de l’autre. Il faut donc analyser l’ensauvagement du web, cet usage transgressif et agressif des dispositifs numériques d’expression qui rompt avec les règles de civilité ordinaires fondatrices du pacte social.</p> | |||
| <p>Mais foin du déterminisme technologique par trop simpliste ! Les plateformes de réseaux sociaux ne sont pas porteuses de tous les péchés contemporains. Il n’y a aucune causalité impérative entre l’expression sur Twitter ou Facebook et la montée des discours haineux. L’usage courtois (comme l’amour, du reste) se peut encore trouver. Il n’en reste pas moins que ces dispositifs technologiques et les mécanismes psychosociaux qu’ils induisent, peuvent favoriser, hélas, les usages malveillants et transgressifs.</p> | |||
| <h2>L’anonymat dissociatif</h2> | |||
| <p>Sans induire une hiérarchisation, on peut énumérer une série de dispositifs technologiques appareillés à des mécanismes psychologiques qui expliquent la fréquence de ces comportements transgressifs et agressifs sur les réseaux numériques.</p> | |||
| <p>La possibilité offerte de s’inventer des identités en ligne par un pseudonyme est un facteur explicatif important. Car sous couvert de l’anonymat, les couards de toutes obédiences peuvent s’en donner à cœur joie, lâcher leurs mots comme on lâche ses coups, en se sentant intouchables. Et parmi les facteurs favorisant l’<a href="https://s3.amazonaws.com/academia.edu.documents/30420106/suler.pdf">effet de désinhibition en ligne</a>, analysé dès 2004 par le psychologue John Suler, ce dernier distingue bien « l’anonymat dissociatif » qui fait que « le moi en ligne devient un moi compartimenté », la séparation de son action en ligne de sa vie réelle développant un sentiment d’impunité.</p> | |||
| <figure class="align-center "> | |||
| <img alt="" src="https://images.theconversation.com/files/215306/original/file-20180417-163991-7flrjt.png?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip"/> | |||
| <figcaption> | |||
| <span class="caption">Troll masqué.</span> | |||
| <span class="attribution"><a class="source" href="https://commons.wikimedia.org/wiki/File:Aaa_le_vengeur_inconnu.JPG">Wikimedia</a></span> | |||
| </figcaption> | |||
| </figure> | |||
| <p>C’est le cas du cyber harceleur, ou juste parfois de la figure plus anodine du « troll », « moyen de cracher son fiel sans le filtre du convenable et de la bien-pensance » écrivent dans leur <a href="https://www.bourin-editeur.fr/fr/books/monstres-20">récent ouvrage</a> sur les « monstres 2.0 » Pauline Escande-Gauquié et Bertrand Naivin.</p> | |||
| <h2>L’impunité communautaire</h2> | |||
| <p>L’agressivité peut aussi résulter des phénomènes communautaires que ces plateformes aspirent justement à créer. Un sentiment de toute-puissance peut émerger chez certains internautes isolés mais confortés par le groupe d’échange auquel ils s’identifient. Les affinités communautaires qui se créent ainsi permettent à des individus de chasser en meute, de harceler une victime expiatrice en se sentant invulnérables grâce au poids du nombre ou confortés grâce au plaisir du partage viral.</p> | |||
| <p>« Les insultes, diffusions de rumeurs ou de photos (voire les trois) prennent rapidement des proportions importantes, produisant un effet d’emballement dû à la viralité : envoi initial, puis renvoi par une personne, repartages, captures d’écrans et diffusion sur d’autres réseaux sociaux, commentaires, etc. » écrivent les auteurs du <a href="https://www.centre-hubertine-auclert.fr/sites/default/files/fichiers/synthese-etude-cybersexisme-cha-web_0.pdf">rapport sur le cybersexisme</a> chez les 12-15 ans.</p> | |||
| <h2>L’effacement du visage d’autrui</h2> | |||
| <p>Le procès de décivilisation peut aussi être le produit de la situation singulière d’échange discursif où la médiation technologique efface le visage d’autrui de notre champ de vision. Or le visage de l’autre est un frein éthique car pour le philosophe Emmanuel Levinas « le visage est signification » dit-il dans <a href="https://www.franceculture.fr/emissions/les-nuits-de-france-culture/emmanuel-levinas-je-ne-minteresse-pas-lethique-mais-ce-qui"><em>Éthique et infini</em></a>. Le visage d’autrui est moins vu qu’il n’est d’abord une vision, un regard qui nous voit.</p> | |||
| <blockquote> | |||
| <p>« La relation au visage est d’emblée éthique. Le visage est ce qu’on ne peut tuer, ou du moins ce dont le sens consiste à dire : “tu ne tueras point”. »</p> | |||
| </blockquote> | |||
| <p>Et il poursuit son raisonnement ainsi :</p> | |||
| <blockquote> | |||
| <p>« Dès lors qu’autrui me regarde, j’en suis responsable sans même avoir à prendre de responsabilités, sa responsabilité m’incombe. »</p> | |||
| </blockquote> | |||
| <p>L’absence d’interaction visuelle directe libère donc l’internaute de freins éthiques à l’agressivité verbale envers autrui. Ce mécanisme psychologique est proche de ce que John Suler nomme « l’invisibilité » qui fait que les internautes « n’ont pas à s’inquiéter de quoi les autres ont l’air ou comment ils réagissent en réponse à ce qu’ils disent. »</p> | |||
| <h2>Autrui reconstruit par notre imaginaire</h2> | |||
| <p>Dans son analyse de « l’effet de désinhibition en ligne », John Suler évoque le mécanisme de « l’introjection solipsiste » qui correspond au fait que « consciemment ou inconsciemment, une personne peut assigner une image visuelle à ce qu’elle pense être ce à quoi l’internaute ressemble ou comment il se comporte. Ce compagnon en ligne devient alors un personnage dans son monde intrapsychique. »</p> | |||
| <p>On ne dialogue alors plus avec une personne réelle de l’autre côté du clavier et de l’écran, mais avec un personnage introjecté qui court dans son imaginaire. Or le fait qu’il devienne le fruit de notre construction psychique favorise la désinhibition voire l’agressivité, puisqu’il n’est plus que le fantasme négatif qu’on s’en est construit, méritant l’injure voire notre haine.</p> | |||
| <h2>« La levée du refoulement sur la haine »</h2> | |||
| <p>Cette interprétation rejoint celle de la philosophe et psychanalyste Hélène L’Heuillet qui analyse dans <a href="http://www.albin-michel.fr/ouvrages/tu-hairas-ton-prochain-comme-toi-meme-9782226397157"><em>Tu haïras ton prochain comme toi-même</em>,</a> « la levée du refoulement sur la haine ». Elle en voit une des manifestations dans les théories du complot (qui justement pullulent sur Internet).</p> | |||
| <blockquote> | |||
| <p>(Ces théories), en postulant une manipulation cachée et généralisée capable d’expliquer l’ordre du monde et le surgissement d’événements, ont une action libératoire sur la haine. Elles aident à la levée du refoulement de la haine. Le complot a partie liée au ressentiment et à l’envie : ce sont des puissants qui nous manipulent. Elles sont issues de la haine et permettent de se livrer à des actes violents sans être embarrassé par l’affect.</p> | |||
| </blockquote> | |||
| <h2>La logique du coup d’éclat permanent</h2> | |||
| <p>Les métriques associées à nos profils et à nos messages sont aussi un dispositif qui peut induire un relâchement de l’autocontrainte, dans un esprit de compétition. Ces métriques nous placent sous le regard évaluateur de chacun, faisant de chaque message un potentiel test de notre popularité et soumettant à la tentation ceux qui constatent qu’un propos transgressif, qui sort des conventions, y compris jusqu’à l’agressivité, obtient souvent plus de visibilité et de partages qu’un message sobre et pacifique.</p> | |||
| <p>La logique du coup d’éclat permanent, avec indicateur de succès immédiat, peut donc pousser à la transgression des règles de l’autocontrainte respectueuses d’autrui.</p> | |||
| <h2>Le côté obscur de la « culture LOL »</h2> | |||
| <p>Cela va de pair avec une des facettes de la « culture LOL », qui s’est développée sur ces réseaux. L’affichage d’une posture humoristique ou ironique, distanciée vis-à-vis des faits évoqués et de soi-même est omniprésent dans les messages. L’acronyme LOL (pour « Laughing out loud »), dont l’équivalent francophone serait mort de rire (acronyme : « mdr »), « ponctue les conversations sur le Net ou via les SMS, et annonce l’intention de déclencher un rire. Marqueur de la galaxie numérique, il exprime une tournure d’esprit espiègle qui consiste à ne rien prendre au sérieux et souvent à tourner en dérision les institutions et les personnes de la vie publique », écrit la sociologue <a href="http://www.pressesdesciencespo.fr/fr/livre/?GCOI=27246100385210">Monique Dagnaud</a>.</p> | |||
| <p>Tout se passe comme s’il ne fallait pas trop se prendre au sérieux, que la norme de la culture Internet était de jouer le jeu du détachement, de la complicité par le rire, du clin d’œil. Mais cela autorise certains à rejouer à l’envi la course au bon mot, même le plus vachard et humiliant, en aspirant à mettre les rieurs de son côté, en faisant rire non tout le monde, mais seulement certains au détriment d’autres. D’aucuns trouvent amusant de créer en ligne un « insultron.fr » au graphique suggestif, machine à générer automatiquement une injure aussitôt diffusable par un simple clic sur les boutons de partage des réseaux socionumériques.</p> | |||
| <figure class="align-center "> | |||
| <img alt="" src="https://images.theconversation.com/files/215304/original/file-20180417-163998-1j9z4zs.png?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip"/> | |||
| <figcaption> | |||
| <span class="caption">L’insultron.</span> | |||
| <span class="attribution"><span class="source">insultron.fr</span></span> | |||
| </figcaption> | |||
| </figure> | |||
| <h2>Le bannissement de la subtilité et du temps du raisonnement</h2> | |||
| <p>Le tempo des usages et la culture de la concision argumentative sont aussi un facteur explicatif. Les habitudes prises de publier des messages courts (quand ce n’est pas le dispositif qui l’impose) bannissent la subtilité du raisonnement au profit d’affirmations péremptoires et souvent offensives.</p> | |||
| <p>Il peut en résulter aussi un relâchement lexical que la culture du texto et du mail ont introduit, gommant peu à peu les formules de politesse, les phrases rituelles d’entrée en interaction et de clôture, héritées de l’échange épistolaire, au profit d’un propos direct et épuré, allant droit à l’essentiel (logique d’efficacité face au flux des messages à gérer) mais rentrant aussi plus dans le vif du sujet, en considérant encombrant l’enrobage, superflu l’euphémisation, superfétatoire les marques de respect et de préservation de la face d’autrui.</p> | |||
| <p>De même, le tempo effréné de ces plateformes nous soumet à la terrible tentation de l’hyperréactivité, de la réaction à chaud et émotionnelle au lieu de prendre le temps du recul et de la réponse à froid et mesurée. Et si cela est vrai des éructations d’énervement, cela est vrai aussi de l’injonction constante sur la toile à « être cool ». Cela implique un relâchement assumé et accepté des émotions, une spontanéité affective, valorisés comme gage de sincérité, mais qui ne poussent pas à l’autocontrôle.</p> | |||
| <p>On touche ici du doigt les perversions du « capitalisme pulsionnel » cher à la <a href="https://archivesic.ccsd.cnrs.fr/sic_01468798/file/SeminaireGRCDI_2008_A.Serres_Stiegleretcultureinfo.pdf">pensée</a> du philosophe <a href="https://fr.wikipedia.org/wiki/Bernard_Stiegler">Bernard Stiegler</a> dont Facebook est devenu le meilleur symbole. L’appel à publier, à commenter, à « liker » en appuyant sur un simple bouton (et même à exprimer d’autres sentiments en choisissant entre <a href="https://www.huffingtonpost.fr/2015/10/08/facebook-va-tester-un-nouveau-bouton-jaime_n_8263936.html">six emojis</a> apparues fin 2015, appelées des « réactions »), sont des appels à libérer son énergie libidinale au profit de réactions spontanées et affectives, tout en les partageant avec autrui.</p> | |||
| <figure class="align-center "> | |||
| <img alt="" src="https://images.theconversation.com/files/215305/original/file-20180417-163995-zae0ge.png?ixlib=rb-1.1.0&q=45&auto=format&w=754&fit=clip"/> | |||
| <figcaption> | |||
| <span class="caption">Les six emojis de réaction Facebook.</span> | |||
| <span class="attribution"><span class="source">Facebook</span></span> | |||
| </figcaption> | |||
| </figure> | |||
| <p>En échange de quoi nous offrons les données concernant nos goûts et dégoûts, nos amis, afin de recevoir la publicité et les contenus les mieux ciblés, ceux les plus proches de nos désirs…</p> | |||
| <h2>Une somme explosive de ressentiments</h2> | |||
| <p>Pour conclure, cédons la parole à <a href="http://www.editionsladecouverte.fr/catalogue/index-Le_d_cha_nement_du_monde-9782707198150.html">François Cusset</a> (p. 149-150), remettant le « déchaînement du monde » en lien avec le (triste) sort du « sujet moderne » :</p> | |||
| <blockquote> | |||
| <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> | |||
| <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> | |||
| </blockquote> | |||
+ 537
- 0
cache/084758a6079aaeddd903bab6c4e5ff10/index.html
View File
| @@ -0,0 +1,537 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Pour penser la "disruption" numérique, il faut y plonger (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://authueil.org/?2016/07/11/2333-pour-penser-la-disruption-numerique-il-faut-y-plonger"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Pour penser la "disruption" numérique, il faut y plonger (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://authueil.org/?2016/07/11/2333-pour-penser-la-disruption-numerique-il-faut-y-plonger">Source originale du contenu</a></h3> | |||
| <p>Le philosophe Bernard Stiegler, dans un <a href="http://www.liberation.fr/debats/2016/07/01/bernard-stiegler-l-acceleration-de-l-innovation-court-circuite-tout-ce-qui-contribue-a-l-elaboration_1463430">entretien</a> à Libération, s'inquiète des conséquences de la "disruption" numérique. Il considère que l'évolution technologique va trop vite, et ne laisse plus assez de temps aux "penseurs" pour accompagner le mouvement. Cela détruirait le "lien social" et il compare cela à une "barbarie" un peu comme un romain cultivé de la fin de l'Empire s'inquiète de voir les barbares déferler et détruire la civilisation latine.</p> | |||
| <p>Je ne remets pas en cause le fait que Bernard Stiegler est un de nos "intellectuels" qui connait le mieux le numérique. Rien à voir avec les Finkielkraut et autres BHL. Pourtant, même lui est à la ramasse et n'arrive pas à lire et à comprendre la transformation numérique. Il se plaint, dans sa tribune, que les évolutions technologiques vont trop vite et "court-circuitent ce qui contribue à l'élaboration de la civilisation". Pour lui, les espaces délibératifs où doit se construire la décision collective ne peuvent plus suivre. En prime, nous avons un dérapage, avec un lien malheureux, entre le slogan marketing de The Family "les barbares attaquent" et Daesh. La dissolution des repères provoqués par ces "barbares numériques" amènerait au nihilisme et aux départs de jeunes en Syrie. Un parallèle qui discrédite un peu un propos, par ailleurs assez abscons...</p> | |||
| <p>Ce qui ressort à mes yeux, de cette interview, est que Bernard Stiegler est en retard d'une guerre, et cherche à comprendre le monde issu de la "disruption numérique" avec des outils intellectuels obsolètes. Il déplore que "nous n'arrivons plus à élaborer des savoirs" et que cela aboutit à une "folie collective". Quand on sait où regarder, on se rend compte qu'il n'en est rien. Les jeunes générations s'adaptent parfaitement au monde numérique, à la fois en se pliant aux demandes des grandes entreprises quand cela ne les dérangent pas mais aussi en se protégeant quand ils estiment les demandes abusives. Ils savent très bien utiliser les services, notamment les réseaux sociaux, en étant conscient collectivement de ce que cela implique. Si Snapchat a un tel succès, c'est peut-être par la promesse de l'éphémère et donc d'un "droit à l'oubli" par défaut. On met souvent en lumière les cas où des jeunes se font piéger par un mauvais usage du numérique, ce qui occulte le fait que l'immense majorité est loin d'être dupe et sait se protéger. Faites donc une enquête "de terrain" auprès des ados de votre entourage, sur leur utilisation du numérique, vous pourriez être surpris...</p> | |||
| <p>La "construction de savoirs" que Stiegler appelle de ses vœux est en cours, mais elle ne se fait plus avec les mêmes outils intellectuels et dans les mêmes lieux, ceux que Stiegler continue à scruter, en désespérant qu'il s'y passe des choses. Quand je vois ce qui se passe dans le secteur de l'économie collaborative, des communs, du libre, j'y vois un bouillonnement intellectuel. Celui-ci ne se fait pas avec les outils conceptuels de la génération précédente. On a bien vu, à Nuit debout, le choc de culture et l'incompréhension entre les "révolutionnaires" nourris au marxisme, qui parlaient de convergence des luttes, et une autre frange, qui refusait radicalement toute récupération politique et cherchait à s'organiser différemment, avec comme principe de base la recherche de la collaboration horizontale, et la bienveillance. L'argument d'autorité n'y fait pas recette.</p> | |||
| <p>Le lien social existe toujours, voire même davantage avec l'arrivée du numérique, qui permet des rencontres inattendues. Les algorithmes font des suggestions, qui peuvent être pertinentes et intéressantes, mais que l'on n'est pas obligé de suivre. Il n'y a aucune obligation à être sur Facebook, et encore moins à en faire sa principale porte d'entrée sur le web (je le déconseille même fortement). La construction de la pensée ne s'y fait pas, même si c'est un canal de diffusion non négligeable. Pour comprendre Wikipédia, il faut se plonger dans les centaines de pages de discussions, parfois interminables. On voit alors une communauté auto-organisée (et bordélique) avec des modes de fonctionnement qui n'auraient pas pu exister sans cette infrastructure. Il en va de même pour la communauté du logiciel libre, qui a développé, depuis longtemps, une véritable idéologie et une culture politique qui s'est diffusée au delà du groupe des geeks et des hackers.</p> | |||
| <p>Oui, le numérique est une véritable rupture, qui va vite. Pour la comprendre, il faut s'y plonger, pas seulement se contenter d'en être un observateur, même averti. La pensée de l'action se fait en parallèle à l'action, dans un mélange parfois difficile à saisir. Le grand public exprime son rejet ou son acceptation de certaines pratiques en votant avec ses pieds. Les débats se sont font sur les forums, mais aussi entre pairs, loin des radars des observateurs, qui souvent ne font que constater les évolutions, sans avoir accès aux échanges et délibérations qui les ont amenés.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://authueil.org/?2016/07/11/2333-pour-penser-la-disruption-numerique-il-faut-y-plonger">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 15
- 0
cache/084758a6079aaeddd903bab6c4e5ff10/index.md
View File
| @@ -0,0 +1,15 @@ | |||
| title: Pour penser la "disruption" numérique, il faut y plonger | |||
| url: http://authueil.org/?2016/07/11/2333-pour-penser-la-disruption-numerique-il-faut-y-plonger | |||
| hash_url: 084758a6079aaeddd903bab6c4e5ff10 | |||
| <p>Le philosophe Bernard Stiegler, dans un <a href="http://www.liberation.fr/debats/2016/07/01/bernard-stiegler-l-acceleration-de-l-innovation-court-circuite-tout-ce-qui-contribue-a-l-elaboration_1463430">entretien</a> à Libération, s'inquiète des conséquences de la "disruption" numérique. Il considère que l'évolution technologique va trop vite, et ne laisse plus assez de temps aux "penseurs" pour accompagner le mouvement. Cela détruirait le "lien social" et il compare cela à une "barbarie" un peu comme un romain cultivé de la fin de l'Empire s'inquiète de voir les barbares déferler et détruire la civilisation latine.</p> | |||
| <p>Je ne remets pas en cause le fait que Bernard Stiegler est un de nos "intellectuels" qui connait le mieux le numérique. Rien à voir avec les Finkielkraut et autres BHL. Pourtant, même lui est à la ramasse et n'arrive pas à lire et à comprendre la transformation numérique. Il se plaint, dans sa tribune, que les évolutions technologiques vont trop vite et "court-circuitent ce qui contribue à l'élaboration de la civilisation". Pour lui, les espaces délibératifs où doit se construire la décision collective ne peuvent plus suivre. En prime, nous avons un dérapage, avec un lien malheureux, entre le slogan marketing de The Family "les barbares attaquent" et Daesh. La dissolution des repères provoqués par ces "barbares numériques" amènerait au nihilisme et aux départs de jeunes en Syrie. Un parallèle qui discrédite un peu un propos, par ailleurs assez abscons...</p> | |||
| <p>Ce qui ressort à mes yeux, de cette interview, est que Bernard Stiegler est en retard d'une guerre, et cherche à comprendre le monde issu de la "disruption numérique" avec des outils intellectuels obsolètes. Il déplore que "nous n'arrivons plus à élaborer des savoirs" et que cela aboutit à une "folie collective". Quand on sait où regarder, on se rend compte qu'il n'en est rien. Les jeunes générations s'adaptent parfaitement au monde numérique, à la fois en se pliant aux demandes des grandes entreprises quand cela ne les dérangent pas mais aussi en se protégeant quand ils estiment les demandes abusives. Ils savent très bien utiliser les services, notamment les réseaux sociaux, en étant conscient collectivement de ce que cela implique. Si Snapchat a un tel succès, c'est peut-être par la promesse de l'éphémère et donc d'un "droit à l'oubli" par défaut. On met souvent en lumière les cas où des jeunes se font piéger par un mauvais usage du numérique, ce qui occulte le fait que l'immense majorité est loin d'être dupe et sait se protéger. Faites donc une enquête "de terrain" auprès des ados de votre entourage, sur leur utilisation du numérique, vous pourriez être surpris...</p> | |||
| <p>La "construction de savoirs" que Stiegler appelle de ses vœux est en cours, mais elle ne se fait plus avec les mêmes outils intellectuels et dans les mêmes lieux, ceux que Stiegler continue à scruter, en désespérant qu'il s'y passe des choses. Quand je vois ce qui se passe dans le secteur de l'économie collaborative, des communs, du libre, j'y vois un bouillonnement intellectuel. Celui-ci ne se fait pas avec les outils conceptuels de la génération précédente. On a bien vu, à Nuit debout, le choc de culture et l'incompréhension entre les "révolutionnaires" nourris au marxisme, qui parlaient de convergence des luttes, et une autre frange, qui refusait radicalement toute récupération politique et cherchait à s'organiser différemment, avec comme principe de base la recherche de la collaboration horizontale, et la bienveillance. L'argument d'autorité n'y fait pas recette.</p> | |||
| <p>Le lien social existe toujours, voire même davantage avec l'arrivée du numérique, qui permet des rencontres inattendues. Les algorithmes font des suggestions, qui peuvent être pertinentes et intéressantes, mais que l'on n'est pas obligé de suivre. Il n'y a aucune obligation à être sur Facebook, et encore moins à en faire sa principale porte d'entrée sur le web (je le déconseille même fortement). La construction de la pensée ne s'y fait pas, même si c'est un canal de diffusion non négligeable. Pour comprendre Wikipédia, il faut se plonger dans les centaines de pages de discussions, parfois interminables. On voit alors une communauté auto-organisée (et bordélique) avec des modes de fonctionnement qui n'auraient pas pu exister sans cette infrastructure. Il en va de même pour la communauté du logiciel libre, qui a développé, depuis longtemps, une véritable idéologie et une culture politique qui s'est diffusée au delà du groupe des geeks et des hackers.</p> | |||
| <p>Oui, le numérique est une véritable rupture, qui va vite. Pour la comprendre, il faut s'y plonger, pas seulement se contenter d'en être un observateur, même averti. La pensée de l'action se fait en parallèle à l'action, dans un mélange parfois difficile à saisir. Le grand public exprime son rejet ou son acceptation de certaines pratiques en votant avec ses pieds. Les débats se sont font sur les forums, mais aussi entre pairs, loin des radars des observateurs, qui souvent ne font que constater les évolutions, sans avoir accès aux échanges et délibérations qui les ont amenés.</p> | |||
+ 629
- 0
cache/086193d1458ccf36105040c2f0c3a53e/index.html
View File
| @@ -0,0 +1,629 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Transcript: @Chamath At StrictlyVC’s Insider Series (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://haystack.vc/2015/09/17/transcript-chamath-at-strictlyvcs-insider-series/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Transcript: @Chamath At StrictlyVC’s Insider Series (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://haystack.vc/2015/09/17/transcript-chamath-at-strictlyvcs-insider-series/">Source originale du contenu</a></h3> | |||
| <p>(<em>This is the transcript from last night’s chat at <a href="http://www.twitter.com/cookie">Connie’s</a> <strong>StrictlyVC Insider Series</strong> with Chamath from Social+Capital. I wasn’t on Twitter today but checked in the afternoon and saw that tons of people were talking about it. It must have <a href="http://techcrunch.com/2015/09/17/chamath-palihapitaya-on-insane-burn-rates-ipos-and-raising-a-new-real-estate-fund/">struck a chord</a>, so I talked to Connie and got someone to transcribe the Periscope. It is definitely worth a read. Chamath not only candidly says what most others would be too nervous to say publicly, he does so in a way that demonstrates he is a truly big thinker and pushing forward the model and conception of what a technology investor can and should be.</em>)</p> | |||
| <p><b>@SEMIL Intro</b>: Thanks everyone for coming. Connie organizes these events, they’re something I really look forward to, and in particular this one. A lot of you here mentioned me on email that you were looking forward to this event with <a href="http://www.twitter.com/chamath">Chamath</a>, you probably follow him on Twitter, listen to what he says, maybe you don’t agree with everything, but what I find really unique about Chamath, is that when he says something you know he’s thought about it and you know he means what he says. To be fair to Chamath I emailed him twice before the event and I said, “what do you want to talk, plug, you tell me.. and he says just adlib, make it interesting. So, we’re going to rely on Chamath to make it interesting.</p> | |||
| <p><strong>Which Becomes A Trillion-Dollar Company First: Facebook or Uber?</strong></p> | |||
| <p><b>@CHAMATH</b>: Facebook. And it really comes down to a very simple thing, which is, the principle of N of 1 vs. 1 of N. This is something I think about a lot, which is, when you look at a company, they become these foundational layers in society, to me what’s interesting is they always start where they’re a set of many, they’re 1 of N companies, and somewhere along the way what happens is a bunch of them fall off. There’s these periods of real, either misunderstanding, or discontent, or frustration, and then they develop something discontinuous. When you put those things together, that allows a company to separate themselves from the pack, and eventually, everything falls away, and they’re an N of 1 company. Then they scale and are effectively a monopoly.</p> | |||
| <p>If you think of companies that multi-generationally have done that well, Microsoft did that, I think Google did that, Apple will become a trillion dollar company, even though they didn’t start off as an N of 1 path, and Facebook has done that.</p> | |||
| <p>But when you compare that to Uber, it’s interesting, people want to value the company as if it’s an N of 1, but it’s fundamentally a 1 of N. And I think that doesn’t.. it basically limits the rate at which it can grow, and the violent market effects it can have, and I think what you see is probably business features sprawl in order to generate revenue to justify valuation.</p> | |||
| <p>So you know, at Facebook, for five years, all we talked about was user growth. Like there’s only one thing that matters: user growth, user growth, user growth. Why? Because at a certain point, it basically becomes this canonical definitional service in the world, by language which they will not use, but is like, you are the de facto standard, and that’s how you become worth a trillion dollars, because you have market effects, pricing effects, the ability to attract talent, that is just completely unique and differentiated.</p> | |||
| <p>But if you’re an N of 1 company, you’re competing with different folks, and that’s the problem with Uber is that it has to compete with a bunch of folks here, both private and public, capitalized and not. In china it has a completely different set of competitors, in India, it has a completely different set of competitors, each of them are funded to billions and billions of dollars, so what happens with market dynamics, is basically driving things to commodification, driving things to basically price discovery where you don’t have pricing power, you don’t have the effects that make you monopolistic, and the problem is markets will not deny you that at massive multiples.</p> | |||
| <p>The way that they value things that are fundamentally unique and not easily recreatable.. So, that turn of capital, those 3 or 4 multiples of P/E that makes something a 40 X vs. a 12 X is a difference between grossing $150B and a trillion dollars, and it’s beyond a shadow of a doubt that Facebook will be a trillion dollar company, it’s just you’re talking about the delta: T which is probably sub-15 years. In my opinion. Uber’s not there. Great company. But not anywhere near the path of being an N of 1 company.</p> | |||
| <p><b>Semil</b>: One follow up on that, do you see any similarities from your time at Facebook with Facebook platform and connect, and how Uber may supercharge their platform.</p> | |||
| <p><b>Chamath</b>: Neither of them are platforms. They’re both kind of like these comical endeavors that do you as an Nth priority. I was in charge of Facebook platform. We trumpeted it out like it was some hot shit big deal. And I remember when we raised money from Bill Gates, 3 or 4 months after.. like our funding history was $5M, $83 M, $500M, and then $15B. When that 15B happened around literally a few months after Facebook platform and Gates said something along the lines of, “That’s a crock of shit. This isn’t a platform. A platform is when the economic value of everybody that uses it, exceeds the value of the company that creates it. Then it’s a platform.”</p> | |||
| <p>If you apply that simple methodology to any company that says they’re a platform, there are only 3 platforms in the world! You know? Windows is a quasi-platform, decaying, but still, iOS is platform, and Android is platform, but that’s easy because the denominator is 0. So, I think, that these aren’t “platforms”, these are APIs, these are developer tools, which is good, and it’s a bridge to something, but it’s not a platform, so let’s stop calling it a platform, let’s call it what it is, which is a bunch of endpoints.</p> | |||
| <p><b>Discuss The State Of Professional Sports In The Bay Area</b></p> | |||
| <p><b>Chamath</b>: I think the Warriors are an example of basically applying traditional management to sports, which is like a really unique kind of thing, which hasn’t been done before. Take a step back.. we teach our kids basically, don’t listen to anybody. We just don’t want them to be programmed.. (<i>this is when Chamath’s son, who was sitting in the front row, just left the talk and walked out</i>), so if he he can take an Uber home I guess.</p> | |||
| <p>I think the Giants are pretty well run, I think there’s a really interesting opportunity to do something around the Raiders. I’ll leave it at that.</p> | |||
| <p><b>Assessing The Health Of The SF Bay Area Tech Startup Ecosystem</b></p> | |||
| <p><b>Chamath</b>: These are all really interconnected, but if you think about it, there’s way too much money, in the system, ultimately still chasing few really great companies. The problem with that is that you have a bunch of imposter companies that get funded for a lot longer than traditional cycles.</p> | |||
| <p>So if you had 1/10 the capital, the mortality rates would be higher, faster, the curves are sharp, and instead of what happens is the decay is longer, and in the long decay, what essentially happens is that you are feeding capital to companies that should really not exist anymore, and those companies then use that capital to take up space. They use that capital to hire other employees, and all these other people spend a lot more time wasting their time. And that’s problematic, and if you don’t get that churn, then the few that have the ability to really get to escape velocity, are forced to figure out for themselves, how to get that sooner?</p> | |||
| <p>So what do they do? They start to pay people more, they start to spend more on these things that think will attract all these people, and that has this negative byproduct, which is everything goes up, the cost of everything starts to rise, and you have this really vicious cycle where at some point then that N + first young engineer, can’t afford to come here in the first place, because he can’t even afford a 1 bedroom out of 5 bedrooms because it’s $2000, and all of a sudden a first year engineer is making $170K, and it’s like this violent vicious cycle that helps nobody.</p> | |||
| <p><b>Semil</b>: So a lot of people think the solution to that is just more housing, more affordable housing, sounds like what you’re saying, even if they do that, it still wouldn’t stop the core problem.</p> | |||
| <p><b>Chamath</b>: I mean you need to do a couple of things. If we’re really going to bet on SF, and if we’re really going to bet on startups. In Silicon Valley, you have to do a bunch of stuff privately and you have to do a bunch of stuff publically.</p> | |||
| <p>So at the public level, you have to invest in what the city is doing, and I think you could debate on some level, how much work the city should be doing around transportation, around housing, you have to basically get rid of the nimbyism and you have to decide to build up. You need to quadruple the amount of housing, quintuple amount of housing. You need to tell every young engineer from University of Michigan that they can afford to live here on $80K a year. All the other ancillary surfaces you need to be able to do that, as an example, we look at our startups and we’re like, the minute that they start to spend 15% of their burn, money that we give them, good money, on rent?? Huge red flag goes up. It’s like, there’s all of these other simple signals, when you, on a per headcount basis, are spending so much, and we start to look at like, the productivity of the technical team, and it’s like good but not great and they’re spending the same amount of money as a team in Redwood city, we start to ask ourselves, are you so convinced that success is going to happen in this city at 1.5X of cost.</p> | |||
| <p>For every dollar that someone in Redwood City or Mountain View is raising, you have to raise 1.5 times or 2 times that. Just to get to the same point in time. So you’re cutting you half-life in half. To prove what?? That you can take an Uber from some shitty bar to another shitty bar? I don’t understand. These are like the things that I start to think about, these constraints that need to get fixed.</p> | |||
| <p>So, at the public level, you need to have an approach that kind of creates the attractive incentives, for people to come and be able to survive on a living wage. Then at a private level we need to hold our companies to a higher standards where they’re not just burning money on useless stuff that is window dressing. That’s fundamentally getting in the way of building something useful.</p> | |||
| <p><b>Semil</b>: When you mentioned the rate of churn, is slower, as that churn slows, what’s the effect of that? Is it clogging up resources? Are people sticking in at roles where companies are going nowhere..</p> | |||
| <p><b>Chamath</b>: I actually think it’s more insidious than that, it’s like telling somebody.. startups are this really delicate compact that an employer has with a bunch of employees, these employees are a highly productive, extremely well intentioned, people who want to do something really productive, they’re willing to make huge sacrifices, in order to do something that changes the world, that to use a slightly overused phrase.</p> | |||
| <p>But when you suck them in, and now you don’t pay off that contract, yet they’ve been working 20 hrs/day for months and months, what are you doing to that person’s psyche/ what you’re really doing is you betray that compact that they made with you. Now it’s fine to fail, and in fact it’s great to fail, but if you fail because you didn’t have the courage to move to Oakland, and instead you burn 30% of your cash on Kind bars in the office and exposed brick walls? You’re a fucking moron. Do you know what I’m saying?</p> | |||
| <p><b>On Companies Staying Private Versus Going Public</b></p> | |||
| <p><b>Chamath</b>: I don’t understand why public is a bad thing. I think it’s the most rationalizing thing in the word. Because you cannot hide behind bravado and nonsense. You are forced to show that you have articulated a strategy, and a gameplan, and a set of metrics, and narrative, and you have to explain that to people who may not necessarily care emotionally. That’s not a bad thing. That is like an act of discipline. So as an example, you look at a company like Amazon, they barely generated a dollar of profit, but Bezos has created a envelop of trust in the public markets, which are extremely fickle, which are extremely judgmental, we claim them to be extremely short-sighted. Yet they’ve taken a 20-year multi-decade bet on this guy.</p> | |||
| <p>So I think that line of reasoning is just wad. It’s an excuse that prevents you from being held accountable in ways that make you fundamentally uncomfortable, cause you’re afraid of what it means to build a real business. Build a real business. Be around for decades. You have a compact with employees, financial source of capital, and you have an opportunity to have market leverage, if you’re good, give you a currency that you can use, so that you can get to N of 1. So why wouldn’t you do it?!</p> | |||
| <p>The people that don’t do it, is the people that can’t do it. And the people that can’t do it, will, say all this stuff about waiting, waiting, cause the markets don’t understand.. is just a false trade off, it’s just an immature understanding of your own business. And what it tells me, is that you don’t know your business. Jeff Bezos knows his business. Indisputable. He never grew it 100%. But he grew it 20% per year for 15 straight years. Bang, bang, bang, etc… That guy knows his business.</p> | |||
| <p><b>Trump As A Media Sensation</b></p> | |||
| <p><b>Chamath</b>: I think he’s, whether you agree with him or not, he is his authentic self. I think that people are starved for average, approachable people, that are themselves. And some of us like it because it’s like watching a train wreck, other people like it because it represents their beliefs and values, it doesn’t matter if there’s authenticity there, and I think the problem is, if you’re part of a system and your entire life has been created by getting these small signals that system matters, you’ll always live by the rules of the system and eventually you become part of the system, you become co-opted, you know you’re not yourself anymore. That’s basically all politicians.</p> | |||
| <p>Then every now and then you have this window into the humanity of a person, and it’s really intoxicating. All the people that for once in their life were like, Biden’s the best were simply because of a handful of questions that he answered on Colbert, where he was actually honest and authentic, so I just think authenticity is just the thing that’s truly missing, and I think that’s what people are attracted to.</p> | |||
| <p><b>Audience Q1: Getting Sucked Into A Bigger Money Round Frenzy</b></p> | |||
| <p><b>Chamath</b>: We were doing some work, and I think the data point that saw was that the largest series A of a very successful public company, if you go back and look at every company that’s ever gone public, and you look at the largest market caps all the way to the smallest, and you look at your series A, and how much they raised, the largest was Google. $25M raise. So this idea that you need all this money is a false trade off. Ben just talked about Fitbit. It’s an amazing example of what a company can do on what people thought was probably, “Oh my god, they must of raised billions of dollars” and it turns out that they didn’t, they were just really good at what they did. So, again, I think that if you looked at a company and how they’re spending money today, we probably would be shocked, relative to historic levels, how much of it’s going into Kind bars and exposed brick and how much is going to the per individual basis, which is great for that person, but again it’s emblematic if that person then takes all that money that they’re making..</p> | |||
| <p>Like when I came here, my first job, I made $55K. In 2000. I was a product manager. How do you go from $55K to $175K in fifteen years? So it’s great, but if I were taking that $175K and still having less than that $55K of net effective income, because 2/3 of that goes to rent, and another 1/3 goes to transportation, am I really that better off? I have a higher W2, but I don’t feel richer.</p> | |||
| <p>So who’s making the money? Cushman & Wakefield, who owns this building makes the money? That makes no sense to me. So the way we react to this is, we’re like, we try to see who’s willing to do the hard work of business building, and who’s acting. And there are very simple ways. We just ask, let me see how you’re spending your cash. The actors just jump off the page. The company builders are just cheap, they’re just grimy, and just, shitty office space, and they’ve got to keep it under 8 or 9% of their total burn, and they find people who really really believe in the thing they’re making, and they decide to just live in Oakland and pay for Lyft, and it’s still cheaper.. They do all kinds of creative things that deserve capital so they can build. So it forces us to ask those questions, “How are you really company building?” And that’s how we get the truth on who’s going to stand the test of time.</p> | |||
| <p><b>Audience Q2: Cite Examples Of Public And Private Initiatives The Region Needs</b></p> | |||
| <p><b>Chamath</b>: I can answer this question in the context of Social Capital. So we made a really big transition in the last month, where we decided we’re going to build an organization that looks different than a venture firm. That organization is going to be this hybrid, bastard-stepchild of Berkshire Hathaway and Blackstone and Blackrock.</p> | |||
| <p>What I mean by this is, we want to have a large permanent capital base and we want to basically take really long discontinuous bets on companies and sectors and trends. One of the things we said we needed to do as part of that is we need to start really thinking through, having almost like a real estate fund. The reason we said that to ourselves was we owe it to our companies to alleviate some of these problems where nobody else is going to.. If we went and built one million square feet somewhere of mixed-use work and live, and we completely conceptualized what it means to have a modular living environment for a millennial cohort of like, folks who want to work at companies who don’t necessarily have kids, etc. We can do that in a way, and give that back to our CEOs, as a benefit of working with us.</p> | |||
| <p>You can probably make all the economics work, because frankly we only really care about the employee of the company anyways, and the equity in the long-term appreciation of real estate will take care of itself, if you take the 30-year view. So, we’re at that point now where we’re like, “Wow! We should probably just go raise a couple billion dollars and actually go get into the real estate business and solve this problem systematically for our companies.”</p> | |||
| <p>Maybe in that, it becomes a blueprint for how others should do it. So that’s an example of a private solution to what would otherwise be a public solution that’s probably not going to happen. So, we’re just basically going to act as our own little city-state, and decide how to do it ourselves. In order to do that, companies will have to have the courage to be in San Mateo or San Carlos, and oh, by the way, every major $100M company has never been created north of Palo Alto, in case you’re curious.</p> | |||
| <p><b>Quick Thoughts On Today’s Seed Environment</b></p> | |||
| <p><b>Chamath</b>: I think it’s really amazing that there’s so many people that.. I feel I have the same version of what all these other people feel, which is we all feel somewhere along the way we were a bit of an accidental tourist, we got lucky, there’s degrees of how lucky we all got, but we’re all then willing to pay it forward, and I see a lot of people, e.g. there’s a bunch of Facebook groups of ex-Facebook employees and the number of these people who are writing these really big checks into companies, and it’s not the amount of money that matters, it’s just that they’re willing to pay it forward.</p> | |||
| <p>So, whether they’re doing it with the profit motive or not, I think seed stage right now is very healthy. It’s robust. I think the institutionalized efforts around it, people are a little frustrated because they used to have so much proprietary deal flow and now all of a sudden, you can raise $2 million dollars from 10-15 folks who worked at WhatsApp or Facebook, or whatever.</p> | |||
| <p>I think that’s fantastic. I hope there’s more of it. Frankly, as some number of us continue to feel out and be in this ecosystem, and be fortunate enough, you have a responsibility to plow back. Somewhere along the way, it’s our responsibilities as institutions, to actually do a better job at enforcing discipline so that these guys can actually get a chance to get to this stage, and I think that that’s probably another thing where we’re not doing a great job. There’s a lot of sheepish, “follow me” mentality.</p> | |||
| <p><b>Series A & B Investors Need To Enforce Discipline</b></p> | |||
| <p><b>Chamath</b>: The problem right now, is that venture is completely undifferentiated. Everybody’s the same. Everybody’s the same. Everybody has a set of services that every other person has. So, when everybody’s theoretically different but the same, nobody has a backbone. There’s fundamentally no authenticity in the marketplace. So as a result, nobody will ask these kinds of questions. Nobody will be disciplined. In a company that’s not working, what they’re not thinking to themselves, is “Wow, maybe if we actually return $2M back, and actually capitalize these three other people with a different idea, or fund that young woman who I kicked out the door because I didn’t understand what she was saying.”</p> | |||
| <p>So the discipline is important. Why? Because we have a responsibility to get the best ideas to market. We have the responsibility where we should be taking good capital risk. If at the end of this cycle, whenever this ends, we look at who made all the money, and it’s not Benchmark or Sequoia, or Social Capital or Andreesen, but it’s Pushman & Wakefield, WeWork, and ZeroCater, something’s wrong! Honestly guys, something’s wrong.</p> | |||
| <p>So, that’s what I think about.. we have to start.. you don’t have to prognosticate doom and gloom and RIP good times, you don’t need to do that, but you do need to go in and say, let’s just dissect how we’re spending money, and none of this idiotic window-dressing nonsense. And see how they react, because if the people don’t have the courage to make hard decisions, you’re probably wasting your money.</p> | |||
| <p>Now, not only are you doing a disservice to yourself and your and your own case, you’re really doing a disservice to all the employees who believe that CEO has the courage and the balls to make it happen, when really what they’re fucking doing is acting. They’re really just a walking failure just waiting for the last shoe to drop. And that’s a disservice to them. So you confront that person, give them a chance to change, and if they can’t change, then you better do something. That’s the hard work of building great companies. Not enough people are willing to do that.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://haystack.vc/2015/09/17/transcript-chamath-at-strictlyvcs-insider-series/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 56
- 0
cache/086193d1458ccf36105040c2f0c3a53e/index.md
View File
| @@ -0,0 +1,56 @@ | |||
| title: Transcript: @Chamath At StrictlyVC’s Insider Series | |||
| url: http://haystack.vc/2015/09/17/transcript-chamath-at-strictlyvcs-insider-series/ | |||
| hash_url: 086193d1458ccf36105040c2f0c3a53e | |||
| <p>(<em>This is the transcript from last night’s chat at <a href="http://www.twitter.com/cookie">Connie’s</a> <strong>StrictlyVC Insider Series</strong> with Chamath from Social+Capital. I wasn’t on Twitter today but checked in the afternoon and saw that tons of people were talking about it. It must have <a href="http://techcrunch.com/2015/09/17/chamath-palihapitaya-on-insane-burn-rates-ipos-and-raising-a-new-real-estate-fund/">struck a chord</a>, so I talked to Connie and got someone to transcribe the Periscope. It is definitely worth a read. Chamath not only candidly says what most others would be too nervous to say publicly, he does so in a way that demonstrates he is a truly big thinker and pushing forward the model and conception of what a technology investor can and should be.</em>)</p> | |||
| <p><b>@SEMIL Intro</b>: Thanks everyone for coming. Connie organizes these events, they’re something I really look forward to, and in particular this one. A lot of you here mentioned me on email that you were looking forward to this event with <a href="http://www.twitter.com/chamath">Chamath</a>, you probably follow him on Twitter, listen to what he says, maybe you don’t agree with everything, but what I find really unique about Chamath, is that when he says something you know he’s thought about it and you know he means what he says. To be fair to Chamath I emailed him twice before the event and I said, “what do you want to talk, plug, you tell me.. and he says just adlib, make it interesting. So, we’re going to rely on Chamath to make it interesting.</p> | |||
| <p><strong>Which Becomes A Trillion-Dollar Company First: Facebook or Uber?</strong></p> | |||
| <p><b>@CHAMATH</b>: Facebook. And it really comes down to a very simple thing, which is, the principle of N of 1 vs. 1 of N. This is something I think about a lot, which is, when you look at a company, they become these foundational layers in society, to me what’s interesting is they always start where they’re a set of many, they’re 1 of N companies, and somewhere along the way what happens is a bunch of them fall off. There’s these periods of real, either misunderstanding, or discontent, or frustration, and then they develop something discontinuous. When you put those things together, that allows a company to separate themselves from the pack, and eventually, everything falls away, and they’re an N of 1 company. Then they scale and are effectively a monopoly.</p> | |||
| <p>If you think of companies that multi-generationally have done that well, Microsoft did that, I think Google did that, Apple will become a trillion dollar company, even though they didn’t start off as an N of 1 path, and Facebook has done that.</p> | |||
| <p>But when you compare that to Uber, it’s interesting, people want to value the company as if it’s an N of 1, but it’s fundamentally a 1 of N. And I think that doesn’t.. it basically limits the rate at which it can grow, and the violent market effects it can have, and I think what you see is probably business features sprawl in order to generate revenue to justify valuation.</p> | |||
| <p>So you know, at Facebook, for five years, all we talked about was user growth. Like there’s only one thing that matters: user growth, user growth, user growth. Why? Because at a certain point, it basically becomes this canonical definitional service in the world, by language which they will not use, but is like, you are the de facto standard, and that’s how you become worth a trillion dollars, because you have market effects, pricing effects, the ability to attract talent, that is just completely unique and differentiated.</p> | |||
| <p>But if you’re an N of 1 company, you’re competing with different folks, and that’s the problem with Uber is that it has to compete with a bunch of folks here, both private and public, capitalized and not. In china it has a completely different set of competitors, in India, it has a completely different set of competitors, each of them are funded to billions and billions of dollars, so what happens with market dynamics, is basically driving things to commodification, driving things to basically price discovery where you don’t have pricing power, you don’t have the effects that make you monopolistic, and the problem is markets will not deny you that at massive multiples.</p> | |||
| <p>The way that they value things that are fundamentally unique and not easily recreatable.. So, that turn of capital, those 3 or 4 multiples of P/E that makes something a 40 X vs. a 12 X is a difference between grossing $150B and a trillion dollars, and it’s beyond a shadow of a doubt that Facebook will be a trillion dollar company, it’s just you’re talking about the delta: T which is probably sub-15 years. In my opinion. Uber’s not there. Great company. But not anywhere near the path of being an N of 1 company.</p> | |||
| <p><b>Semil</b>: One follow up on that, do you see any similarities from your time at Facebook with Facebook platform and connect, and how Uber may supercharge their platform.</p> | |||
| <p><b>Chamath</b>: Neither of them are platforms. They’re both kind of like these comical endeavors that do you as an Nth priority. I was in charge of Facebook platform. We trumpeted it out like it was some hot shit big deal. And I remember when we raised money from Bill Gates, 3 or 4 months after.. like our funding history was $5M, $83 M, $500M, and then $15B. When that 15B happened around literally a few months after Facebook platform and Gates said something along the lines of, “That’s a crock of shit. This isn’t a platform. A platform is when the economic value of everybody that uses it, exceeds the value of the company that creates it. Then it’s a platform.”</p> | |||
| <p>If you apply that simple methodology to any company that says they’re a platform, there are only 3 platforms in the world! You know? Windows is a quasi-platform, decaying, but still, iOS is platform, and Android is platform, but that’s easy because the denominator is 0. So, I think, that these aren’t “platforms”, these are APIs, these are developer tools, which is good, and it’s a bridge to something, but it’s not a platform, so let’s stop calling it a platform, let’s call it what it is, which is a bunch of endpoints.</p> | |||
| <p><b>Discuss The State Of Professional Sports In The Bay Area</b></p> | |||
| <p><b>Chamath</b>: I think the Warriors are an example of basically applying traditional management to sports, which is like a really unique kind of thing, which hasn’t been done before. Take a step back.. we teach our kids basically, don’t listen to anybody. We just don’t want them to be programmed.. (<i>this is when Chamath’s son, who was sitting in the front row, just left the talk and walked out</i>), so if he he can take an Uber home I guess.</p> | |||
| <p>I think the Giants are pretty well run, I think there’s a really interesting opportunity to do something around the Raiders. I’ll leave it at that.</p> | |||
| <p><b>Assessing The Health Of The SF Bay Area Tech Startup Ecosystem</b></p> | |||
| <p><b>Chamath</b>: These are all really interconnected, but if you think about it, there’s way too much money, in the system, ultimately still chasing few really great companies. The problem with that is that you have a bunch of imposter companies that get funded for a lot longer than traditional cycles.</p> | |||
| <p>So if you had 1/10 the capital, the mortality rates would be higher, faster, the curves are sharp, and instead of what happens is the decay is longer, and in the long decay, what essentially happens is that you are feeding capital to companies that should really not exist anymore, and those companies then use that capital to take up space. They use that capital to hire other employees, and all these other people spend a lot more time wasting their time. And that’s problematic, and if you don’t get that churn, then the few that have the ability to really get to escape velocity, are forced to figure out for themselves, how to get that sooner?</p> | |||
| <p>So what do they do? They start to pay people more, they start to spend more on these things that think will attract all these people, and that has this negative byproduct, which is everything goes up, the cost of everything starts to rise, and you have this really vicious cycle where at some point then that N + first young engineer, can’t afford to come here in the first place, because he can’t even afford a 1 bedroom out of 5 bedrooms because it’s $2000, and all of a sudden a first year engineer is making $170K, and it’s like this violent vicious cycle that helps nobody.</p> | |||
| <p><b>Semil</b>: So a lot of people think the solution to that is just more housing, more affordable housing, sounds like what you’re saying, even if they do that, it still wouldn’t stop the core problem.</p> | |||
| <p><b>Chamath</b>: I mean you need to do a couple of things. If we’re really going to bet on SF, and if we’re really going to bet on startups. In Silicon Valley, you have to do a bunch of stuff privately and you have to do a bunch of stuff publically.</p> | |||
| <p>So at the public level, you have to invest in what the city is doing, and I think you could debate on some level, how much work the city should be doing around transportation, around housing, you have to basically get rid of the nimbyism and you have to decide to build up. You need to quadruple the amount of housing, quintuple amount of housing. You need to tell every young engineer from University of Michigan that they can afford to live here on $80K a year. All the other ancillary surfaces you need to be able to do that, as an example, we look at our startups and we’re like, the minute that they start to spend 15% of their burn, money that we give them, good money, on rent?? Huge red flag goes up. It’s like, there’s all of these other simple signals, when you, on a per headcount basis, are spending so much, and we start to look at like, the productivity of the technical team, and it’s like good but not great and they’re spending the same amount of money as a team in Redwood city, we start to ask ourselves, are you so convinced that success is going to happen in this city at 1.5X of cost.</p> | |||
| <p>For every dollar that someone in Redwood City or Mountain View is raising, you have to raise 1.5 times or 2 times that. Just to get to the same point in time. So you’re cutting you half-life in half. To prove what?? That you can take an Uber from some shitty bar to another shitty bar? I don’t understand. These are like the things that I start to think about, these constraints that need to get fixed.</p> | |||
| <p>So, at the public level, you need to have an approach that kind of creates the attractive incentives, for people to come and be able to survive on a living wage. Then at a private level we need to hold our companies to a higher standards where they’re not just burning money on useless stuff that is window dressing. That’s fundamentally getting in the way of building something useful.</p> | |||
| <p><b>Semil</b>: When you mentioned the rate of churn, is slower, as that churn slows, what’s the effect of that? Is it clogging up resources? Are people sticking in at roles where companies are going nowhere..</p> | |||
| <p><b>Chamath</b>: I actually think it’s more insidious than that, it’s like telling somebody.. startups are this really delicate compact that an employer has with a bunch of employees, these employees are a highly productive, extremely well intentioned, people who want to do something really productive, they’re willing to make huge sacrifices, in order to do something that changes the world, that to use a slightly overused phrase.</p> | |||
| <p>But when you suck them in, and now you don’t pay off that contract, yet they’ve been working 20 hrs/day for months and months, what are you doing to that person’s psyche/ what you’re really doing is you betray that compact that they made with you. Now it’s fine to fail, and in fact it’s great to fail, but if you fail because you didn’t have the courage to move to Oakland, and instead you burn 30% of your cash on Kind bars in the office and exposed brick walls? You’re a fucking moron. Do you know what I’m saying?</p> | |||
| <p><b>On Companies Staying Private Versus Going Public</b></p> | |||
| <p><b>Chamath</b>: I don’t understand why public is a bad thing. I think it’s the most rationalizing thing in the word. Because you cannot hide behind bravado and nonsense. You are forced to show that you have articulated a strategy, and a gameplan, and a set of metrics, and narrative, and you have to explain that to people who may not necessarily care emotionally. That’s not a bad thing. That is like an act of discipline. So as an example, you look at a company like Amazon, they barely generated a dollar of profit, but Bezos has created a envelop of trust in the public markets, which are extremely fickle, which are extremely judgmental, we claim them to be extremely short-sighted. Yet they’ve taken a 20-year multi-decade bet on this guy.</p> | |||
| <p>So I think that line of reasoning is just wad. It’s an excuse that prevents you from being held accountable in ways that make you fundamentally uncomfortable, cause you’re afraid of what it means to build a real business. Build a real business. Be around for decades. You have a compact with employees, financial source of capital, and you have an opportunity to have market leverage, if you’re good, give you a currency that you can use, so that you can get to N of 1. So why wouldn’t you do it?!</p> | |||
| <p>The people that don’t do it, is the people that can’t do it. And the people that can’t do it, will, say all this stuff about waiting, waiting, cause the markets don’t understand.. is just a false trade off, it’s just an immature understanding of your own business. And what it tells me, is that you don’t know your business. Jeff Bezos knows his business. Indisputable. He never grew it 100%. But he grew it 20% per year for 15 straight years. Bang, bang, bang, etc… That guy knows his business.</p> | |||
| <p><b>Trump As A Media Sensation</b></p> | |||
| <p><b>Chamath</b>: I think he’s, whether you agree with him or not, he is his authentic self. I think that people are starved for average, approachable people, that are themselves. And some of us like it because it’s like watching a train wreck, other people like it because it represents their beliefs and values, it doesn’t matter if there’s authenticity there, and I think the problem is, if you’re part of a system and your entire life has been created by getting these small signals that system matters, you’ll always live by the rules of the system and eventually you become part of the system, you become co-opted, you know you’re not yourself anymore. That’s basically all politicians.</p> | |||
| <p>Then every now and then you have this window into the humanity of a person, and it’s really intoxicating. All the people that for once in their life were like, Biden’s the best were simply because of a handful of questions that he answered on Colbert, where he was actually honest and authentic, so I just think authenticity is just the thing that’s truly missing, and I think that’s what people are attracted to.</p> | |||
| <p><b>Audience Q1: Getting Sucked Into A Bigger Money Round Frenzy</b></p> | |||
| <p><b>Chamath</b>: We were doing some work, and I think the data point that saw was that the largest series A of a very successful public company, if you go back and look at every company that’s ever gone public, and you look at the largest market caps all the way to the smallest, and you look at your series A, and how much they raised, the largest was Google. $25M raise. So this idea that you need all this money is a false trade off. Ben just talked about Fitbit. It’s an amazing example of what a company can do on what people thought was probably, “Oh my god, they must of raised billions of dollars” and it turns out that they didn’t, they were just really good at what they did. So, again, I think that if you looked at a company and how they’re spending money today, we probably would be shocked, relative to historic levels, how much of it’s going into Kind bars and exposed brick and how much is going to the per individual basis, which is great for that person, but again it’s emblematic if that person then takes all that money that they’re making..</p> | |||
| <p>Like when I came here, my first job, I made $55K. In 2000. I was a product manager. How do you go from $55K to $175K in fifteen years? So it’s great, but if I were taking that $175K and still having less than that $55K of net effective income, because 2/3 of that goes to rent, and another 1/3 goes to transportation, am I really that better off? I have a higher W2, but I don’t feel richer.</p> | |||
| <p>So who’s making the money? Cushman & Wakefield, who owns this building makes the money? That makes no sense to me. So the way we react to this is, we’re like, we try to see who’s willing to do the hard work of business building, and who’s acting. And there are very simple ways. We just ask, let me see how you’re spending your cash. The actors just jump off the page. The company builders are just cheap, they’re just grimy, and just, shitty office space, and they’ve got to keep it under 8 or 9% of their total burn, and they find people who really really believe in the thing they’re making, and they decide to just live in Oakland and pay for Lyft, and it’s still cheaper.. They do all kinds of creative things that deserve capital so they can build. So it forces us to ask those questions, “How are you really company building?” And that’s how we get the truth on who’s going to stand the test of time.</p> | |||
| <p><b>Audience Q2: Cite Examples Of Public And Private Initiatives The Region Needs</b></p> | |||
| <p><b>Chamath</b>: I can answer this question in the context of Social Capital. So we made a really big transition in the last month, where we decided we’re going to build an organization that looks different than a venture firm. That organization is going to be this hybrid, bastard-stepchild of Berkshire Hathaway and Blackstone and Blackrock.</p> | |||
| <p>What I mean by this is, we want to have a large permanent capital base and we want to basically take really long discontinuous bets on companies and sectors and trends. One of the things we said we needed to do as part of that is we need to start really thinking through, having almost like a real estate fund. The reason we said that to ourselves was we owe it to our companies to alleviate some of these problems where nobody else is going to.. If we went and built one million square feet somewhere of mixed-use work and live, and we completely conceptualized what it means to have a modular living environment for a millennial cohort of like, folks who want to work at companies who don’t necessarily have kids, etc. We can do that in a way, and give that back to our CEOs, as a benefit of working with us.</p> | |||
| <p>You can probably make all the economics work, because frankly we only really care about the employee of the company anyways, and the equity in the long-term appreciation of real estate will take care of itself, if you take the 30-year view. So, we’re at that point now where we’re like, “Wow! We should probably just go raise a couple billion dollars and actually go get into the real estate business and solve this problem systematically for our companies.”</p> | |||
| <p>Maybe in that, it becomes a blueprint for how others should do it. So that’s an example of a private solution to what would otherwise be a public solution that’s probably not going to happen. So, we’re just basically going to act as our own little city-state, and decide how to do it ourselves. In order to do that, companies will have to have the courage to be in San Mateo or San Carlos, and oh, by the way, every major $100M company has never been created north of Palo Alto, in case you’re curious.</p> | |||
| <p><b>Quick Thoughts On Today’s Seed Environment</b></p> | |||
| <p><b>Chamath</b>: I think it’s really amazing that there’s so many people that.. I feel I have the same version of what all these other people feel, which is we all feel somewhere along the way we were a bit of an accidental tourist, we got lucky, there’s degrees of how lucky we all got, but we’re all then willing to pay it forward, and I see a lot of people, e.g. there’s a bunch of Facebook groups of ex-Facebook employees and the number of these people who are writing these really big checks into companies, and it’s not the amount of money that matters, it’s just that they’re willing to pay it forward.</p> | |||
| <p>So, whether they’re doing it with the profit motive or not, I think seed stage right now is very healthy. It’s robust. I think the institutionalized efforts around it, people are a little frustrated because they used to have so much proprietary deal flow and now all of a sudden, you can raise $2 million dollars from 10-15 folks who worked at WhatsApp or Facebook, or whatever.</p> | |||
| <p>I think that’s fantastic. I hope there’s more of it. Frankly, as some number of us continue to feel out and be in this ecosystem, and be fortunate enough, you have a responsibility to plow back. Somewhere along the way, it’s our responsibilities as institutions, to actually do a better job at enforcing discipline so that these guys can actually get a chance to get to this stage, and I think that that’s probably another thing where we’re not doing a great job. There’s a lot of sheepish, “follow me” mentality.</p> | |||
| <p><b>Series A & B Investors Need To Enforce Discipline</b></p> | |||
| <p><b>Chamath</b>: The problem right now, is that venture is completely undifferentiated. Everybody’s the same. Everybody’s the same. Everybody has a set of services that every other person has. So, when everybody’s theoretically different but the same, nobody has a backbone. There’s fundamentally no authenticity in the marketplace. So as a result, nobody will ask these kinds of questions. Nobody will be disciplined. In a company that’s not working, what they’re not thinking to themselves, is “Wow, maybe if we actually return $2M back, and actually capitalize these three other people with a different idea, or fund that young woman who I kicked out the door because I didn’t understand what she was saying.”</p> | |||
| <p>So the discipline is important. Why? Because we have a responsibility to get the best ideas to market. We have the responsibility where we should be taking good capital risk. If at the end of this cycle, whenever this ends, we look at who made all the money, and it’s not Benchmark or Sequoia, or Social Capital or Andreesen, but it’s Pushman & Wakefield, WeWork, and ZeroCater, something’s wrong! Honestly guys, something’s wrong.</p> | |||
| <p>So, that’s what I think about.. we have to start.. you don’t have to prognosticate doom and gloom and RIP good times, you don’t need to do that, but you do need to go in and say, let’s just dissect how we’re spending money, and none of this idiotic window-dressing nonsense. And see how they react, because if the people don’t have the courage to make hard decisions, you’re probably wasting your money.</p> | |||
| <p>Now, not only are you doing a disservice to yourself and your and your own case, you’re really doing a disservice to all the employees who believe that CEO has the courage and the balls to make it happen, when really what they’re fucking doing is acting. They’re really just a walking failure just waiting for the last shoe to drop. And that’s a disservice to them. So you confront that person, give them a chance to change, and if they can’t change, then you better do something. That’s the hard work of building great companies. Not enough people are willing to do that.</p> | |||
+ 622
- 0
cache/087c11f6da0d22f3aff6a36e1fb1f7f0/index.html
View File
| @@ -0,0 +1,622 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Technologie : l’âge sombre (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.internetactu.net/2018/09/10/technologie-lage-sombre/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Technologie : l’âge sombre (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.internetactu.net/2018/09/10/technologie-lage-sombre/">Source originale du contenu</a></h3> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4-166x300.jpg" alt="" class="alignright size-medium wp-image-32553" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4-166x300.jpg 166w, http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4-567x1024.jpg 567w, http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4.jpg 581w" sizes="(max-width: 166px) 100vw, 166px"/>L’artiste et essayiste <a href="https://jamesbridle.com/">James Bridle</a> (<a href="https://twitter.com/jamesbridle">@jamesbridle</a>) s’intéresse depuis longtemps aux dysfonctionnements de notre monde moderne. Il observe ce qui ne fonctionne pas : les bugs, <a href="https://fr.wikipedia.org/wiki/Glitch">les glitchs</a>, <a href="http://www.internetactu.net/2013/10/08/surveiller-les-algorithmes/">les ratés de notre développement technologique</a>… Longtemps, il a regardé les espaces de friction entre technologie et société comme le lieu d’expression et de production de nouvelles formes culturelles. C’était ce qu’il appelait <a href="http://new-aesthetic.tumblr.com/">« la nouvelle esthétique »</a>, celle produite au croisement de la technologie et de la réalité, ces <a href="http://www.liberation.fr/ecrans/2012/04/16/l-esthetique-online-passe-hors-ligne_951659?page=article">« irruptions visuelles du monde numérique dans le monde physique »</a>. Il en a joué plus que tout autre, en produisant <a href="http://www.internetactu.net/2012/03/08/lift12-ecrire-avec-les-machines/">des dispositifs pour interroger la manière même dont nous produisons notre monde moderne</a>. L’un des exemples les plus célèbres – <a href="http://www.internetactu.net/a-lire-ailleurs/120508768448/">parmi d’autres</a> – étant certainement <a href="http://www.slate.fr/story/141215/video-piege-voiture-autonome">le piège à voiture autonome qu’il imagina</a>, comme une mise en abîme des limites de la soi-disant intelligence artificielle qu’on pouvait prendre au piège comme un enfant… <a href="http://www.internetactu.net/a-lire-ailleurs/les-lanceurs-dalerte-sont-ils-une-reponse-aux-problemes-de-la-technologie/">On avait évoqué rapidement, au printemps</a>, la sortie de son dernier livre <em><a href="https://amzn.to/2wH3VJr">Le nouvel âge sombre : la technologie et la fin du futur</a></em> (Verso Books, 2018, en anglais)… Il est temps d’y revenir.</p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001.jpg" alt="" class="aligncenter size-full wp-image-32554" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001.jpg 800w, http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001-300x169.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001-768x432.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"/></p> | |||
| <h2>Les bugs ne sont pas amenés à être corrigés !</h2> | |||
| <p>Ce <em>New Dark Age</em> porte un titre prophétique et apocalyptique. Un peu trop peut-être. C’est effectivement un livre très critique sur notre rapport à la technologie, très éloigné du rapport souvent curieux et amusé que Bridle portait aux technologies avec la nouvelle esthétique. En une dizaine de chapitres, Bridle explore les glitchs qui sont désormais devenus des schismes, des scissions, des ruptures… comme s’ils n’étaient plus aussi distrayants. Dans son livre, il montre combien les bugs se cristallisent en caractéristiques. Combien la complexité technique que nous avons construite s’entremêle pour produire des effets en réseau, complexes, profonds, intriqués que nous ne parvenons plus vraiment à démêler. Son constat principal consiste à dire que ces dysfonctionnements ne sont pas amenés à être corrigés. Ils sont au contraire intrinsèques à la nature même des technologies qui se déploient aujourd’hui. Contrairement à ce que nous annonçaient les pionniers et les prophètes des technologies, pour Bridle, la technologie n’annonce pas de nouvelles Lumières ou une Renaissance, mais, comme Jules Michelet parlait du Moyen Âge, un âge sombre, une ère d’obscurité pour ne pas dire d’obscurantisme. Ni les réseaux sociaux, ni l’intelligence artificielle, ni les systèmes techniques ne vont nous aider à faire monde commun. Au contraire. </p> | |||
| <p>Le constat de Bridle est définitif. <em>« L’accélération technologique a transformé notre planète, nos sociétés et nous-mêmes, mais elle n’a pas réussi à transformer notre compréhension de la technologie »</em>. Nous n’arrivons plus à penser en dehors ou sans technologie. Pire, la technologie s’est fait la complice de tous les défis auxquels nous sommes confrontés : à la fois d’un système économique hors de contrôle qui ne cesse d’élargir les inégalités, la polarisation politique comme le réchauffement climatique. Pour Bridle, la technologie n’est pas la solution à ces défis, elle est devenue le problème. Il nous faut la comprendre plus que jamais, dans sa complexité, ses interconnexions et ses interactions : mais cette compréhension fonctionnelle ne suffit pas, il faut en saisir le contexte, les conséquences, les limites, le langage et le métalangage. </p> | |||
| <p>Trop souvent, on nous propose de résoudre ce manque de compréhension de la technologie par un peu plus d’éducation ou son corollaire, par la formation d’un peu plus de programmeurs. Mais ces deux solutions se limitent bien souvent en une compréhension procédurale des systèmes. Et cette compréhension procédurale vise surtout à renforcer la <em>« pensée computationnelle »</em>, c’est-à-dire la pensée des ingénieurs et des informaticiens qui n’est rien d’autre que le métalangage du solutionnisme technologique : <em>« la croyance que tout problème donné peut-être résolu par l’application de solutions de calcul »</em>. Or la pensée des ingénieurs, la pensée informatique, intègre plus que toute autre le solutionnisme : elle ne parvient pas à voir le monde autrement qu’en terme computationnel. Dans ce mode de pensée, le monde est un système qu’il faut décoder… Et c’est là notre erreur de perspective principale, estime James Bridle. </p> | |||
| <h2>L’écueil de la pensée computationnelle</h2> | |||
| <p>Les systèmes techniques sont devenus de plus en plus complexes. Trop critiques et interconnectés pour être compris, pensés ou conçus. Leur compréhension n’est disponible plus que pour quelques-uns et le problème est que ces quelques-uns sont les mêmes que ceux qui sont au sommet des structures de pouvoir. Pour James Bridle, il y a une relation causale entre la complexité des systèmes, leur opacité, et les violences et inégalités qu’ils propagent. <em>« Trop souvent, les nouvelles technologies sont présentées comme étant naturellement émancipatrices. »</em>, Mais c’est là typiquement un exemple de pensée computationnelle estime Bridle. Les primo-utilisateurs qui en ont vanté les mérites, si naïvement, ont bénéficié des opportunités de la technique, sans saisir ce que leur déploiement à large échelle pouvait transformer ni voir que le fait qu’ils en bénéficient ne signifiait pas qu’elle allait bénéficier à tous. Dans notre monde en réseau, l’individualisme l’a emporté sur la solidarité. </p> | |||
| <p>Le cloud (l’informatique en nuage) n’est plus une métaphore du réseau, c’est l’incarnation de ce système global et surpuissant qu’aucun d’entre nous ne peut désormais attraper. Ce nuage est pourtant une bien mauvaise métaphore. Rien de ce qu’il recèle n’y est sans poids, rien n’y est amorphe ou invisible. Le cloud cache une infrastructure physique complexe faite de lignes téléphoniques, de fibre optique, de satellite, de vastes entrepôts d’ordinateurs, qui consomment d’énormes quantités d’énergie et qui influent sur de multiples juridictions. Le cloud est l’incarnation d’une nouvelle industrie. </p> | |||
| <p>L’absence de compréhension dans laquelle nous sommes maintenus est délibérée, estime Bridle. De la sécurité nationale aux secrets industriels, il y a beaucoup de raisons à obscurcir ce que recouvre ce nuage. Mais ce qui s’en évapore est assurément notre propriété (dans les nuages, tout appartient à d’autres) et notre agentivité, c’est-à-dire notre capacité à faire. Le nuage est une métaphore qui obscurcit la réalité opérationnelle de la technologie : un moyen de cacher ce qu’elle accomplit, sa propre agentivité, via des codes opaques et insondables, via une distance physique réelle entre l’utilisateur et les matériels qu’il active et une construction juridique qui fonctionne selon le principe d’extraterritorialité. La technologie est une opération de puissance qui utilise ses outils pour se cacher de nous. </p> | |||
| <h2>Le réseau est-il l’accomplissement du progrès ?</h2> | |||
| <p>Ce réseau technologique de systèmes entremêlés qui s’est construit petit à petit est caractérisé par son absence d’intention apparente, claire ou unique. Personne n’a décidé de créer le réseau tel qu’il s’est développé… Il s’est bâti peu à peu, dans le temps, système contre système, culture contre culture, comme une agrégation de technologies se liant ensemble via des programmes publics et des investissements privés, via des relations personnelles et des protocoles techniques… Le réseau donne l’impression d’être à la fois l’idéal de progrès le plus abouti et l’idéal de base de notre culture tout en paraissant avoir émergé inconsciemment, poursuivant son but d’interconnexion sans fin pour lui-même et par lui-même… <em>« Nous présumons que l’interconnexion est inhérente et inévitable. Le réseau semble être devenu le résultat du progrès, son accomplissement ultime »</em>, à l’image de machines qui accompliraient ainsi leurs propres désirs. Internet semble avoir accompli l’idéal des Lumières, l’idéal du progrès : celui que plus de connaissance et plus d’information conduit toujours à prendre de meilleures décisions. </p> | |||
| <p>Mais n’est-ce pas plutôt le contraire auquel nous assistons ? <em>« Ce qui était censé éclairer le monde l’a obscurci. L’abondance d’information et la pluralité d’opinion accessible à tous n’ont pas produit un consensus cohérent, mais au contraire a déchiré la réalité en narrations simplistes, en théories fumeuses et en politique d’opinion. Contrairement au Moyen Âge, où l’âge sombre était lié à une perte de connaissance antique, l’âge sombre moderne est lié à une abondance de connaissance dont nous ne savons plus démêler collectivement l’apport. »</em> Et Bridle de faire référence à l’obscurité qu’annonçait Lovecraft dès les premières lignes de <em>l’Appel de Cthulhu</em> : </p> | |||
| <blockquote><p>« la chose la plus miséricordieuse en ce monde, je crois, c’est l’inaptitude de l’esprit humain à corréler tout ce dont il est témoin. Nous vivons sur une placide île d’ignorance au milieu de noires mers d’infini, et cela ne veut pas dire que nous puissions voyager loin. Les sciences, chacune attelée à sa propre direction, nous ont jusqu’ici peu fait de tort ; mais rassembler nos connaissances dissociées nous ouvrira de si terrifiants horizons de réalité, et la considération de notre effrayante position ici-bas, que soit nous deviendrons fous de la révélation, soit nous en fuirons la lumière mortelle dans la paix et la sécurité d’une nouvelle ère d’obscurité. »</p></blockquote> | |||
| <p>L’obscurité dont parle Bridle c’est notre incapacité à voir clairement ce qui est devant nous, avec capacité et justice. Pour Bridle pourtant, ce constat ne doit pas être lu comme une condamnation de la technologie. Au contraire. Pour relever l’âge sombre qui s’annonce, il nous faut nous engager plus avant dans la technologie, avec elle, mais avec une compréhension radicalement différente de ce qu’il est possible d’en faire, en retrouver un sens que la seule recherche d’efficacité nous a fait perdre. Tout comme le changement climatique, les effets de la technologie s’étendent sur le globe et affectent tous les aspects de nos vies. Mais comme le changement climatique, ses effets sont potentiellement catastrophiques et résultent de notre incapacité à comprendre les conséquences de nos propres inventions. Nous devons changer de manière de voir et penser le monde, nous invite Bridle, un peu facilement ou naïvement. L’âge sombre n’est pas qu’un lieu de danger, c’est aussi un moment de possibilité et de liberté. Mais cet optimisme semble un peu de façade, tant la description qu’il fait de notre utilisation des technologies est sombre et glaçante. Les glitchs qu’il s’amusait à recenser comme une expression étrange des transformations culturelles nées de notre capacité à l’interconnexion semblent être devenus des sortes de monstres que personne ne maîtrise. Les effets de bords de nos créations sont devenus des créatures qui nous dévorent en retour. Nous perdons pied dans ce que nous avons créé. </p> | |||
| <p/><h2>Peut-on s’extraire de la pensée computationnelle ?</h2> | |||
| <p>Dans son livre, Bridle étrille longuement la pensée computationnelle, ce mode de pensée à travers les machines, né du calcul, et qui estime que tout problème est soluble par essence. Il rappelle l’histoire de l’informatique, intimement liée à la question de la modélisation des essais nucléaires, des tirs balistiques et de la prédiction à l’image des travaux du mathématicien <a href="https://fr.wikipedia.org/wiki/Lewis_Fry_Richardson">Lewis Fry Richardson</a> qui va réaliser – des années 1910 à 1922, bien avant l’apparition des ordinateurs donc – des mesures climatiques pour produire le premier modèle de prédiction météorologique. Il faudra attendre les premiers ordinateurs pour être enfin capables de traiter d’imposants volumes de données pour que la prédiction météorologique se développe et se réalise. Le développement de capteurs (satellites, capteurs météo…) a mis peu à peu le globe sous calcul, sans que nous nous en rendions vraiment compte. </p> | |||
| <p>Pour James Bridle, l’histoire de la prédiction repose sur une série d’échecs – des échecs à distinguer la réalité de sa simulation, même si ce n’est peut-être pas le cas dans tous les domaines, notamment la météo justement – et qui promet sans cesse de s’améliorer sans voir que son principal écueil demeure de croire en sa surpuissance. <em>« Nous avons été conditionnés pour croire que les ordinateurs rendaient le monde plus limpide et plus efficace, qu’ils allaient réduire la complexité et facilité de meilleures solutions aux problèmes qui nous assiègent, qu’ils allaient étendre notre capacité à adresser de plus larges domaines d’expertise. Mais cette histoire ne s’est pas révélée exacte du tout. Une meilleure lecture de l’histoire de l’informatique souligne une opacité croissante alliée à une concentration croissante du pouvoir et un pouvoir qui se retranche derrière des domaines d’expertise toujours plus étroits. »</em> Effectivement, l’informatique n’a pas simplifié le monde. </p> | |||
| <p>En construisant des architectures complexes, qui ne peuvent plus être questionnées, on bloque et on transforme les problèmes en abstraction, en dilemmes définitivement rebelles à toute solution autre que mathématique. Tout problème devient une question mathématique plutôt qu’une question démocratique ou égalitaire. <em>« En rapprochant la simulation de l’approximation, les grands prêtres de la pensée computationnelle pensent remplacer le monde par des modèles biaisés de lui-même ; et en le faisant, les modeleurs s’assurent du contrôle du monde. »</em> James Bridle s’inscrit dans la continuité des constats de l’historien des sciences <a href="https://fr.wikipedia.org/wiki/David_F._Noble">David Noble</a> qui, dans <em><a href="https://amzn.to/2Q4Sa7A">Le progrès sans le peuple</a></em> notamment, soulignait combien la pensée des ingénieurs avait contribué à donner du pouvoir aux puissants plutôt que favoriser l’équité ou la démocratie ; comme dans celle de <a href="https://www.linkedin.com/in/richardsclove/">Richard Sclove</a> du <a href="http://www.loka.org/">Loka Institute</a>, qui dans <em><a href="https://amzn.to/2NMqrXy">Choix technologiques, choix de société</a></em>, <a href="http://maisouvaleweb.fr/technologie-nest-democratique-devenir/">soulignait combien les enjeux démocratiques restaient le parent pauvre de la question technologique</a>. </p> | |||
| <p>Aujourd’hui, nous pouvons avoir l’impression que le monde nous est disponible, instantanément, explique Bridle, à l’image du site <a href="https://www.flightradar24.com">FlightRadar</a>, un site qui permet de voir tous les avions en vol en temps réel… depuis <a href="https://fr.wikipedia.org/wiki/Automatic_dependent_surveillance-broadcast">le signal ADS-B</a> qu’ils émettent. Enfin, pas tous. Seulement les vols commerciaux, ce qui escamote les manoeuvres militaires comme les vols des jets privés… Le GPS est devenu un autre de ces signaux invisibles qui surveille toute activité sur la planète, une horloge géographique qui régule les déplacements et le temps, la logistique, les infrastructures électriques comme les marchés financiers. Mais notre dépendance de plus en plus grande dans de tels systèmes masque combien ils sont manipulables, alors que nous avons tendance à penser qu’ils ne le sont pas.</p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/flightradar.jpg" alt="" class="aligncenter size-full wp-image-32555" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/flightradar.jpg 620w, http://www.internetactu.net/wp-content/uploads/2018/09/flightradar-300x158.jpg 300w" sizes="(max-width: 620px) 100vw, 620px"/></p> | |||
| <h2>La connectivité est devenue notre réalité</h2> | |||
| <p>Notre rapport à l’espace et au code ne s’exprime pas uniquement dans les systèmes informatiques, rappelle Bridle. Des géographes comme Rob Kitchin et Martin Dodge, on posé le concept de <em><a href="https://amzn.to/2Q2L5UY">code/space</a></em> pour décrire l’imbrication du calcul avec nos environnements, à l’image des aéroports, conçus comme des systèmes et qui ne peuvent fonctionner sans informatique. C’est le cas de plus en plus de nos environnements les plus immédiats, gérés par des systèmes informatiques. Nos outils de travail les plus quotidiens comme nos véhicules exigent désormais des mises à jour quotidiennes et des échanges de données pour fonctionner. La connectivité et les algorithmes rythment jusqu’à nos vies sociales. Nos objets quotidiens sont tous devenus des code/space. Toutes nos activités sont <em>« de plus en plus gouvernées par une logique algorithmique et policées par des processus informatiques opaques et cachés »</em>. Cette emphase de production physique et culturelle du monde par l’informatique masque les inégalités de pouvoir qu’elles induisent, reproduisent et amplifient. </p> | |||
| <p>La pensée computationnelle s’infiltre partout : elle devient notre culture. Elle nous conditionne à la fois parce qu’elle nous est illisible et à la fois parce que nous la percevons comme neutre émotionnellement et politiquement. Les réponses automatisées nous semblent plus dignes de confiance que celles qui ne le sont pas. Dans la pensée computationnelle, nous sommes victimes du biais d’automatisation : <em>« nous avons plus confiance dans l’information automatisée que dans notre propre expérience, même si elle est en conflit avec ce qu’on observe »</em>. Les conducteurs de voitures comme les pilotes d’avion ont plus tendance à croire leurs instruments que leur expérience, même si celle-ci n’est pas alignée. Ceux qui suivent les systèmes automatisés prennent leurs décisions plus rapidement avec moins de questions : comme si l’action qui leur était suggérée prévenait toute question ou toute introspection relatives au problème. Dans le stress, nous préférons choisir l’option la plus simple, la plus immédiate. Nous préférons les stratégies faciles à suivre et à justifier. Nous préférons ce que nous dit la machine à ce que nous dit notre intuition qu’il faudrait corroborer en faisant un effort cognitif supplémentaire. </p> | |||
| <p>Pour Bridle, l’informatique, en ce sens, est un piratage de notre capacité cognitive, de notre capacité attentionnelle, qui renvoie toute responsabilité sur la machine. <em>« À mesure que la vie s’accélère, les machines ne cessent de prendre en main de plus en plus de tâches cognitives, renforçant par là leur autorité – sans regarder les conséquences »</em>. <em>« Nous nous accommodons de mieux en mieux et de plus en plus aux confortables raccourcis cognitifs que nous proposent nos machines. L’informatique remplace la pensée consciente. Nous pensons de plus en plus comme des machines, ou plutôt nous ne pensons plus du tout ! »</em>. </p> | |||
| <h2>Nous vivons désormais dans la computation</h2> | |||
| <p>Nous vivons désormais dans la computation. Elle n’est plus seulement l’architecture de notre monde : elle est devenue le fondement même de notre manière de penser. Elle est devenue si pervasive, si séductrice, que nous l’utilisons pour tout : elle remplace le mécanique, le physique, le social, le cognitif… <em>« À mesure que l’informatique nous encercle, que nous lui assignons la puissance et la capacité à générer la vérité, et que nous lui confions de plus en plus de tâches cognitives, la réalité prend l’apparence d’un ordinateur et nos modes de pensées également. »</em> La pensée computationnelle ne gouverne pas seulement nos actions présentes, mais modèle le futur pour qu’il s’adapte à ses paramètres. <em>« Ce qui est difficile à modéliser, à calculer, à quantifier, ce qui est incertain ou ambigu, est désormais exclu du futur possible. »</em> L’informatique projette un futur qui ressemble au passé (<em>« Les algorithmes ne prédisent pas le futur, ils codifient le passé »</em>, <a href="https://www.mediapart.fr/journal/culture-idees/010918/face-aux-algorithmes-defendre-les-mediocres-et-ceux-qui-sont-dans-la-moyenne?utm">disait déjà Cathy O’Neil</a>). La pensée computationnelle est paresseuse. Elle propose finalement des réponses faciles. Elle nous fait croire qu’il y a toujours des réponses. </p> | |||
| <p><em>« La pensée computationnelle a triomphé parce qu’elle nous a d’abord séduits par sa puissance, puis elle nous a embrouillée par sa complexité, et finalement elle s’est imposée dans nos cortex comme une évidence. »</em> Elle n’en demeure pas moins le produit d’une sursimplification, de données biaisées, d’obfuscation délibérée… qui nous montrent chaque jour leurs limites, à l’image des révélations quotidiennes qu’on peut lire sur les défaillances technologiques de notre monde. <em>« Plus nous sommes obsédés <a href="http://www.internetactu.net/2018/04/19/peut-on-modeliser-la-societe/">à modéliser le monde</a>, plus il apparaît inconnaissablement complexe »</em>, comme si notre tentative à le réduire était par nature impossible à mesure qu’on semble croire y parvenir. </p> | |||
| <h2>Avons-nous atteint un pic de la connaissance ?</h2> | |||
| <p>James Bridle nous rappelle que, comme le climat, les infrastructures en réseau sont fragiles. Un rapport britannique (<a href="http://webarchive.nationalarchives.gov.uk/+/http:/www.cst.gov.uk/reports/files/national-infrastructure-report.pdf"><em>A National infrastructure for the 21st Century</em> (.pdf)</a>, 2009), qui évoquait autant l’internet que les réseaux d’adduction d’eau, d’approvisionnement d’électricité ou de gaz, l’avait très bien souligné : les réseaux souffrent d’une gouvernance fragmentée, sans responsabilités claires, peu cartographiés et sous-financés ; des infrastructures en silos ; des investissements privés comme publics insuffisants et plus encore un manque de compréhension de la complexité de leur fonctionnement… expliquent leur fragilité intrinsèque et <a href="http://www.internetactu.net/2016/04/11/contre-linnovation-de-linvisible-importance-de-la-maintenance/">la difficulté de leur maintenance</a>. Ajoutez à cela <a href="https://www.gov.uk/government/publications/adapting-the-ict-sector-to-the-impacts-of-climate-change">les impacts du changement climatique sur leur maintenance et leur évolution</a> et vous comprendrez que les réseaux ne sont pas dimensionnés pour faire face au futur. Bref, non seulement l’informatique contribue largement au réchauffement climatique, mais elle risque d’en être l’une des principales victimes. </p> | |||
| <p>Pour autant, peu de gens s’inquiètent vraiment de cette responsabilité quant aux usages mêmes que l’on fait du réseau. Les rares solutions esquissées qui peuvent aller de la taxation, <a href="http://www.internetactu.net/2015/12/01/avons-nous-besoin-dune-vitesse-limitee-sur-linternet/">à des régressions techniques</a>, semblent impensables à projeter à l’échelle des réseaux. À mesure que la culture numérique devient toujours plus rapide et plus gourmande en données, elle devient aussi plus coûteuse et nécessite de plus en plus d’énergie. </p> | |||
| <p>Le problème du changement climatique c’est qu’il dégrade notre capacité à prédire le futur. Pour James Bridle, alors que la prédiction est au coeur du futur, celui-ci est de moins en moins clair, de moins en moins prévisible. Les modèles et cycles de la nature que nous avons établis depuis des siècles (comme la pollinisation, les migrations animales, etc.) sont en train de changer : les connaissances que nous avons accumulées sont en train de devenir fausses. Or, notre civilisation repose pour beaucoup sur ce type de prédiction, comme de savoir quelle graine planter à quel moment de l’année, comme d’être capable de prédire les sécheresses ou les feux de forêt… Nos enfants pourraient demain en savoir bien moins sur le monde que nous ! </p> | |||
| <p>Le spécialiste du climat William Gail, fondateur du <a href="http://globalweathercorp.com">Global Weather Corporation</a>, <a href="https://www.nytimes.com/2016/04/19/opinion/a-new-dark-age-looms.html">dans le <em>New York Times</em></a>, estimait que nous avons peut-être passé un <em>« pic de connaissance »</em> ! Pour le philosophe Timothy Morton (<a href="https://twitter.com/the_eco_thought">@the_eco_thought</a>) <a href="http://ecologywithoutnature.blogspot.com">blog</a>), le réchauffement climatique est un <em><a href="https://en.wikipedia.org/wiki/Timothy_Morton#Hyperobjects">« hyperobjet »</a></em>, comme il l’explique <a href="https://amzn.to/2ChDWNT">dans son livre éponyme</a> : quelque chose qui nous entoure, nous enveloppe, mais qui est trop énorme pour qu’on puisse le voir ou le comprendre entièrement. On perçoit les hyperobjets par l’influence qu’ils ont sur certains éléments, comme la fonte des glaciers ou le développement des turbulences en avion… Ils défient nos capacités à les décrire rationnellement. Le réseau, comme le changement climatique, est une représentation de notre réalité précisément parce qu’il est très difficile à penser, estime Bridle. On a beau transporter ce réseau dans nos poches, le stocker dans des centres de données… Il n’est pas réductible à ces unités concrètes. Il est non-local et par nature contradictoire. On ne peut pas le connaître ! </p> | |||
| <h2>Où est passé le progrès ?</h2> | |||
| <p>Dans le monde de la SF, on parle par exemple du <a href="https://kk.org/thetechnium/steam-engine-ti/">temps du moteur à vapeur</a>, explique l’auteur de science-fiction <a href="https://fr.wikipedia.org/wiki/William_Gibson">William Gibson</a>. Le temps de la machine à vapeur est un concept qui désigne le moment où ce moteur est advenu sans que personne ne sache vraiment pourquoi il est apparu à tel moment plutôt qu’à un autre. En fait, <a href="https://fr.wikipedia.org/wiki/Claude_Ptol%C3%A9m%C3%A9e">Ptolémée</a> avait largement expliqué le principe du moteur à vapeur et rien n’aurait pu empêcher les Romains par exemple d’en construire. Mais ce n’est pas ce qu’il s’est passé. Les moteurs à vapeur sont apparus quand c’était leur temps. L’histoire des sciences nous montre que la plupart des inventions sont simultanées et ont plusieurs auteurs. Elles apparaissent souvent à plusieurs endroits simultanément. Cela implique une certaine manière de raconter l’histoire des sciences. La recherche, la science, la technologie convergent en une invention qui semble toujours le résultat d’un passé qui y conduit directement. L’histoire semble servir à créer une justification a posteriori, <a href="http://www.internetactu.net/2017/06/14/technologie-peut-on-se-defaire-des-promesses-et-des-mythes/">tout comme la fameuse loi de Moore</a>. Mais c’est là à la fois une projection et une extrapolation qui reposent plutôt sur nos préférences pour les histoires héroïques qu’autre chose, avance Bridle. Nous avons un biais qui nous fait préférer la marche inévitable du progrès plutôt que ses hoquets, qui nous fait préférer voir le progrès et ses prolongements vers le futur. Pourtant, <em>« la loi de Moore n’est ni technique, ni économique : elle est libidinale ! »</em>, clame Bridle. Le développement des circuits intégrés dès les années 60 par quelques entreprises a transformé le secteur au profit de quelques très grosses entreprises. Cette industrie a transformé le matériel et l’a distingué du logiciel. Elle a aussi mis fin à l’artisanat, à la réparation et à l’efficacité logicielle… Alors que les premiers développeurs logiciels avaient le souci d’économiser les ressources en optimisant leur code, les programmeurs ont pu s’en passer, sachant qu’ils devaient attendre quelques mois pour disposer de deux fois plus de puissance. L’héritage de la loi de Moore c’est que le logiciel est devenu le centre de nos sociétés. La courbe de puissance dessinée par la loi de Moore est devenue l’image du progrès elle-même : un futur d’abondance, où le présent n’avait plus besoin de s’accommoder de quoi que ce soit. <em>« La loi de l’informatique est devenue une loi économique et une loi morale »</em>. La conséquence est qu’on a l’impression de vivre dans un âge d’informatique ubiquitaire, disponible partout et tout le temps, dans des nuages à la puissance de calcul infinis… <a href="http://www.internetactu.net/2008/09/09/est-ce-que-le-deluge-de-donnees-va-rendre-la-methode-scientifique-obsolete/">En 2008, Chris Anderson, proclamait la fin de la théorie</a>, c’est-à-dire que nous n’aurons plus besoin de construire des modèles du monde. L’informatique massive allait produire la vérité depuis des volumes sans précédent de données, le Big Data. Pour Bridle, <em>« la fausse promesse du Big Data est le résultat logique du réductionnisme scientifique : la croyance que des systèmes complexes peuvent être compris en en démantelant les composants et en étudiants ces pièces isolément. »</em></p> | |||
| <p>Mais les grands volumes de données ne produisent pas de la connaissance automatiquement. Dans la recherche pharmacologique par exemple, les dépenses et investissements n’ont jamais été aussi forts alors que les découvertes, elles, n’ont jamais produit aussi peu de nouveaux traitements. On appelle cela la <a href="https://en.wikipedia.org/wiki/Eroom%27s_law">loi d’Eroom</a> : l’exact inverse de la loi de Moore. Le nombre de résultats de recherche chute et ces résultats sont de moins en moins dignes de confiance. Si les publications scientifiques n’ont jamais été aussi volumineuses (au détriment de leur qualité), les rétractions ont augmenté et le nombre de recherches ayant un impact significatif, elles, ont diminué proportionnellement. La science connaît une crise de réplicabilité majeure. Le p-hacking (la tromperie sur les probabilités – la signification statistique que réprésente <a href="https://fr.wikipedia.org/wiki/Valeur_p">la valeur p</a> -, c’est-à-dire le fait de considérer un résultat expérimental comme statistiquement signifiant alors qu’il ne l’est pas) se porte bien. Le séquençage ADN est devenu très rapide. Les bases de données de protéines ont explosé en volume en 25 ans. Le coût pour les utiliser a chuté, les recherches ont explosé… Mais le nombre de nouveaux médicaments lui a périclité. </p> | |||
| <p>Plusieurs facteurs expliquent ce revirement de la loi du progrès. La première est que les choses les plus évidentes à découvrir ont été exploitées. La régulation est également devenue plus exigeante et la société moins tolérante aux risques. Mais le problème principal relève certainement des méthodes désormais employées. Historiquement, la découverte de médicament était le fait de petites équipes de chercheurs qui se concentrait intensément sur de petits groupes de molécules. Mais depuis 20 ans, ces processus ont été largement automatisés, sous la forme de ce qu’on appelle le HTS (<em>High-throughput screening</em> pour <a href="https://fr.wikipedia.org/wiki/Criblage_%C3%A0_haut_d%C3%A9bit">criblage à haut débit</a>) qui consiste en des recherches automatisées de réactions potentielles via de vastes bibliothèques de composants. Le HTS a priorisé le volume sur la profondeur. Ce qui a marché dans d’autres industries a colonisé la recherche pharmaceutique : automatisation, systématisation et mesures… Certains commencent à douter de l’efficacité de ces méthodes et voudraient revenir à l’empirisme humain, au hasard, au bordel, au jeu… À nouveau, <em>« la façon dont nous pensons le monde est façonnée par les outils à notre disposition »</em>. Nos instruments déterminent ce qui peut être fait et donc, ce qui peut être pensé. À mesure que la science est de plus en plus technologisée, tous les domaines de la pensée humaine le sont à leur tour. Les vastes quantités de données ne nous aident qu’à voir les problèmes des vastes quantités de données. </p> | |||
| <h2>Pris au piège de l’interconnexion</h2> | |||
| <p>Les bourses et places de marchés d’antan ont été remplacées par des entrepôts, des data centers, anonymes, dans des banlieues d’affaires impersonnelles. La dérégulation et la numérisation ont transformé en profondeur les marchés financiers. La vitesse des échanges s’est accélérée avec la technologie. Les <a href="https://fr.wikipedia.org/wiki/Transactions_%C3%A0_haute_fr%C3%A9quence">transactions à haute fréquence</a> (HFT, <em>High-frequency trading</em>) reposent sur <a href="https://fr.wikipedia.org/wiki/Latence_(informatique)">la latence</a> et la visibilité. La latence, c’est-à-dire la rapidité d’échange où des millions peuvent s’échanger en quelques millisecondes et la visibilité (sauf pour les non-initiés), c’est-à-dire le fait que les échanges sont visibles de tous les participants, instantanément. Les échanges reposent sur des algorithmes capables de calculer des variations éclair et de masquer les mouvements de fonds. Les échanges sont plus opaques que jamais : ils s’imposent sur des forums privés, les <a href="https://fr.wikipedia.org/wiki/Dark_pool">« dark pools »</a> (en 2015, la <a href="https://fr.wikipedia.org/wiki/Securities_and_Exchange_Commission">SEC</a>, l’organisme américain de réglementation et de contrôle des marchés financiers, estimait que les échanges privés représentaient 1/5e du total des échanges)… Les échanges financiers ont été rendus obscurs et plus inégaux que jamais, rappelle Bridle. Dans son livre, <a href="https://amzn.to/2NaYOur"><em>Flash Boy</em></a>, l’ancien investisseur Michael Lewis décrivait combien ces marchés étaient devenus un système de classe, un terrain de jeu accessible seulement à ceux qui ont les ressources pour y accéder. Le marché, qui était par nature public et démocratique, est devenu fermé et privé. Les constats de l’économiste Thomas Piketty dans <em><a href="https://amzn.to/2wEcrrN">Le Capital au XXIe siècle</a></em> sur la montée des inégalités… montrent à leur tour combien l’idée de progrès s’est renversée. Les économistes ont longtemps défendu l’idée que la croissance réduisait les inégalités. Mais cela ne se fait pas automatiquement, tant s’en faut. Au contraire. Pour James Bridle, <em>« La technologie est devenue un moteur des inégalités »</em>. </p> | |||
| <p>L’automatisation rend les compétences humaines obsolètes et même ceux qui programment les machines ne sont pas épargnés. À mesure que les capacités des machines s’améliorent et s’élargissent, de plus en plus de professions sont assiégées. L’internet et les effets de réseaux renforcent encore ces effets en favorisant des places de marché où le plus fort l’emporte. Pour Bridle, l’une des clefs qui expliquent que les inégalités se renforcent avec la technologie est intrinsèquement liée à l’opacité des systèmes. Comme les robots des entrepôts d’Amazon et ses employés commandés par des commandes vocales émanant de robots, nous sommes en train d’arranger le monde pour rendre les machines toujours plus efficaces, quitte à ce que le monde devienne incompréhensible et inadapté aux humains. Les travailleurs deviennent le carburant des algorithmes, utiles seulement pour leurs capacités à se déplacer et à suivre des ordres. Pour Bridle, les startups et les Gafam signent le retour des <a href="https://fr.wikipedia.org/wiki/Barons_voleurs">barons voleurs</a>, ces tyrans industriels du XIXe siècle. La technologie est venue couvrir d’un voile d’opacité la prédation : l’avidité s’est habillée de la logique inhumaine des machines. Amazon ou Uber cachent derrière des pixels lumineux un système d’exploitation sans faille. Leurs applications sont des télécommandes qui agissent sur des gens, dans le monde réel, avec des effets quasi impossibles à voir pour celui qui appuie sur le bouton. La technologie est mise au service des entreprises et du profit au détriment de tout autre intérêt, comme l’a montré le dieselgate. <em>« L’histoire de l’automatisation n’est pas qu’une histoire de machines qui prennent le travail de travailleurs humains, c’est aussi et avant tout l’histoire d’une concentration du pouvoir en de moins en moins de mains, et une concentration de la compréhension du monde en de moins en moins de têtes. »</em></p> | |||
| <p>La complexité a ajouté un voile d’opacité supplémentaire. Désormais, les programmes de HFT scannent également l’information. En 2013, à 1:07 pm, le compte twitter officiel d’Associated press a été piraté par l’Armée électronique syrienne. Un tweet annonçant deux explosions à la maison blanche et le président Obama blessé a été envoyé à 2 millions d’abonnés. À 1:08 pm le Dow Jones a connu un flash crash : l’index a perdu 150 points avant même que la plupart des abonnés humains au compte d’AP n’aient vu le tweet. </p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/Keep-Calm-and-Hit-Her-T-s-010-300x180.jpg" alt="" class="alignleft size-medium wp-image-32556" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/Keep-Calm-and-Hit-Her-T-s-010-300x180.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/09/Keep-Calm-and-Hit-Her-T-s-010.jpg 460w" sizes="(max-width: 300px) 100vw, 300px"/>L’interconnexion algorithmique du monde n’en est qu’à ses débuts, estime Bridle. Et les marchés ne sont pas le seul endroit où ces étranges cascades algorithmiques se déroulent. Sur des places de marchés de produits personnalisables, <a href="https://www.theverge.com/tldr/2017/7/10/15946296/amazon-bot-smartphone-cases">des algorithmes créent des milliers de produits automatiquement</a>… <a href="https://www.theguardian.com/technology/2013/mar/02/amazon-withdraws-rape-slogan-shirt">à l’image de slogans pour tee-shirts insultants</a>. Ces produits n’ont bien souvent jamais trouvé d’acheteurs. Ils n’existaient que virtuellement. Reste que ces programmes interreliés ne seront pas demain confinés aux marchés financiers et aux supermarchés en ligne, prédit Bridle. Ils vont entrer dans tous les pans de nos vies quotidiennes. Et générer de nombreux problèmes, <a href="https://www.theregister.co.uk/2017/08/11/lockstate_bricks_smart_locks_with_dumb_firmware_upgrade/">à l’image de ceux relevés autour des serrures de portes électroniques</a> ou des objets connectés. </p> | |||
| <p>À quoi va ressembler demain ? <a href="http://www.epagogix.com/">Epagogix</a> est une startup qui analyse les scénarios de films pour prédire leur succès (selon des critères émotionnels et lucratifs, bien sûr). Ils extraient des données de Netflix, Hulu ou YouTube notamment et produisent des propositions pour alimenter <a href="https://fr.wikipedia.org/wiki/Binge-watching">les binge-watchers</a>… alimentant leur propre paranoïa de blockbusters toujours plus semblables… Au risque de produire un sens toujours plus étroit, un monde toujours plus uniforme à mesure que la puissance computationnelle s’interrelie. </p> | |||
| <p>Pour la sociologue <a href="http://geography.utoronto.ca/profiles/deborah-cowen/">Deborah Cowen</a> (<a href="https://twitter.com/debcowen">@debcowen</a>), nous sommes entrés dans la tyrannie de la <em>techne</em> explique-t-elle dans <em><a href="https://amzn.to/2Q3Xh7V">The Deadly Life of Logistics</a></em> (2014) : l’efficacité est devenu primordiale sur tous les autres objectifs, sur toutes les autres valeurs… </p> | |||
| <h2>L’étrangeté va-t-elle devenir ce qui ressemble le plus à l’intelligence ?</h2> | |||
| <p>Comment une machine apprend-elle avec l’apprentissage automatisé ? Bridle rapporte une histoire pour en montrer les limites. Pour faire fonctionner un système de machine learning, il suffit de fournir à une machine des images. Sur certaines, on distingue un char d’assaut qu’elle doit apprendre à reconnaître. Sur d’autres, il n’y en a pas, et elle doit apprendre qu’il n’y en a pas en comparant ces images aux précédentes. La machine évalue les images selon de multiples couches, comme des angles de compréhension, mais sans avoir aucune compréhension de ce qu’elle analyse. Jusqu’à distinguer les images où il y a char de celles où il n’y en a pas. Vous contrôlez ensuite qu’elle a bien compris en lui fournissant des images sur lesquelles on trouve parfois des chars. Tout se passe bien, elle les reconnaît parfaitement ! Puis vous lui en fournissez encore d’autres, et là, la reconnaissance s’effondre d’un coup ! Que s’est-il passé ? En fait, la machine n’a pas appris à reconnaître les chars d’assaut. Elle a appris à reconnaître un autre élément qui était présent sur les images originelles et les suivantes, comme la présence du soleil du matin, c’est-à-dire le moment où la photo a été prise. </p> | |||
| <p>Pour Bridle, cette histoire est emblématique d’un problème majeur de l’Intelligence artificielle : le fait qu’elle soit fondamentalement différente et insondable. <em>« Nous ne pouvons pas vraiment comprendre ce qu’elle produit, nous pouvons juste ajuster ses résultats »</em>. À l’origine, rappelle-t-il, les premiers travaux sur les réseaux de neurones ont été développés avec le Perceptron mis au point par le laboratoire de recherche de la Navy américaine, conçu par le psychologue Frank Rosenblatt. L’idée originelle du Perceptron reposait sur le connectionnisme : la croyance que l’intelligence était une propriété émergente de la connexion entre les neurones. Cette vision a été attaquée par d’autres chercheurs qui pensaient plutôt que l’intelligence était le produit de la manipulation des symboles, nécessitant des connaissances du monde pour raisonner. Ce débat, entre ces deux courants de l’IA, n’a pas tant porté sur ce que signifiait être intelligent, mais sur ce qui était intelligible de l’intelligence. Il rappelle que l’un des avocats du connectionnisme était <a href="https://fr.wikipedia.org/wiki/Friedrich_Hayek">Friedrich Hayek</a>, le père du néolibéralisme. Pour Bridle, le parallèle entre l’ordre néolibéral du monde (où un marché impartial règne en maître sur les passions humaines) et cette vision du fonctionnement du cerveau qui sépare le monde sensible de sa réalité est signifiant. Pour Hayek, la connaissance est dispersée et distribuée dans le cortex cérébral tout comme elle est distribuée sur le marché entre les individus. Aujourd’hui, le modèle connectionniste règne sur l’IA. Un ordre naturel du monde peut donc émerger spontanément quand les biais humains sont retirés de la production de connaissance. Mais ces affirmations ne sont pas sans poser problème… </p> | |||
| <p>La reconnaissance d’image ou de texte s’est imposé comme le premier terrain de jeu de l’IA, jusqu’à l’excès, à l’image <a href="https://www.wired.com/2016/11/put-away-your-machine-learning-hammer-criminality-is-not-a-nail/">des recherches</a> menées par 2 chercheurs de Shanghai, Xiaolin Wu et Xi Zhang, qui ont entraîné un système pour inférer la criminalité depuis les traits du visage. Cette horrible phrénologie, qui marche dans les pas de Francis Galton et Cesare Lombroso, rappelle combien l’analyse de données est parfois assez proche des pires pseudosciences, <a href="http://www.internetactu.net/a-lire-ailleurs/112768514361/">comme le dénonçait Cathy O’Neil</a> … Autre exemple avec <a href="https://www.how-old.net/">How-Old.net</a> un outil de reconnaissance faciale qui tente de prédire l’âge d’une personne, et qui a été utilisée pour deviner l’âge de migrants arrivants au Royaume-Uni. <a href="https://www.theguardian.com/uk-news/2016/oct/19/how-oldnet-no-real-indicator-of-age-says-microsoft-amid-child-refugee-row">Microsoft, qui a développé cette application, s’est défendu</a> et a dénoncé cette utilisation… comme les 2 chercheurs chinois. <a href="https://arxiv.org/abs/1611.04135">Ceux-ci expliquaient néanmoins dans leur défense</a> que leur système était « sans préjugé » (sic). Comme souvent, on nous explique que la technologie, et plus encore l’apprentissage automatisé, est neutre. Mais <em>« la technologie n’émerge pas de nulle part. Elle est toujours la réification de croyances et de désirs, notamment de ses créateurs. Leurs biais sont encodés dans les machines et les bases de données ou les images que nous prenons du monde. »</em> </p> | |||
| <p>Bridle nous rappelle <a href="http://content.time.com/time/business/article/0,8599,1954643,00.html">l’histoire de Joz Wang</a>, qui s’était rendu compte que son nouvel appareil photo ne reconnaissait pas ceux qui n’étaient pas blancs ou celle de la caméra d’un ordinateur HP qui ne faisait pas le point sur les visages noirs. Mais cela n’est pas propre aux développements les plus récents. <a href="https://www.wallpaper.com/art/the-dark-side-of-photography-broomberg-chanarin-uncover-uncomfortable-truths">Les artistes Adam Broomberg et Oliver Chanarin</a> ont rappelé que des années 50 aux années 80, les pellicules argentiques de Kodak avaient déjà un problème avec les peaux sombres. Les créateurs de ces technologies n’ont pas créé volontairement des machines racistes, bien sûr, mais ces machines ont révélé les inégalités présentes dans notre société. Elles ont révélé que le préjudice racial était profondément encodé dans notre culture. Et tout ce qui en relève le révèle. <em>« Nous ne résoudrons pas les problèmes du présent avec des outils du passé »</em>, conclut Bridle de ces exemples. </p> | |||
| <p>Pour l’artiste <a href="http://www.paglen.com/">Trevor Paglen</a> (<a href="https://twitter.com/trevorpaglen">@trevorpaglen</a>), la montée de l’IA amplifie ces erreurs, car nous utilisons des données du passé pour l’entraîner. Bridle revient également <a href="http://www.internetactu.net/2017/07/26/ou-en-est-la-police-predictive/">sur l’origine des systèmes de police prédictive et leur liaison avec l’étude des tremblements de terre</a>, qui tente de croire que la contagion du crime est semblable aux répliques sismiques. </p> | |||
| <p>Pour lui, le risque est que ces nouveaux modèles produits par les machines, leurs modalités de décision et les conséquences de ces décisions, nous restent incompréhensibles, car produites par des processus cognitifs trop différents des nôtres. Google Translate par exemple, de 2006 jusqu’en 2016 utilisait une technique d’inférence statistique du langage. Plutôt que d’essayer de comprendre comment les langues fonctionnent, le système fonctionnait depuis un vaste corpus de traductions existantes (provenant de traduction de réunions des Nations Unies et du Parlement européen notamment). Son rôle était d’enlever la compréhension de l’équation pour la remplacer par des corrélations basées sur des données. Comme le disait le spécialiste de ces questions chez IBM, Frederick Jelinek : <em>« chaque fois que je vire un linguiste, la performance de mon système de reconnaissance du langage s’améliore ! »</em>. En 2016, Google a commencé à déployer des réseaux de neurones pour faire fonctionner Google Translate, et la qualité des traductions a réellement progressé. Google Translate a développé sa propre carte de connexion entre les mots où les mots sont encodés par leur distance aux autres mots dans une grille de sens qui n’est compréhensible que par l’ordinateur. Cette carte multidimensionnelle suit tant de pistes différentes qu’un esprit humain ne pourrait pas la comprendre. L’apprentissage automatisé tire du sens d’un espace qui nous est invisible et intangible. Est-ce à dire que l’étrangeté est en passe de devenir ce qui nous semble le plus ressembler à l’intelligence ? </p> | |||
| <p>À l’époque de Deep Blue, c’est la force brute de l’ordinateur qui a permis de vaincre Kasparov : la capacité de la machine à évaluer des milliers de combinaisons provenant de millions de parties… Quand AlphaGo a vaincu Lee Sedol, la machine a été capable de faire des mouvements qui ont stupéfié l’assistance, car ils n’avaient jamais été faits. AlphaGo avait été également nourri de millions de parties jouées par des experts du Go, mais la machine avait également joué contre elle-même des millions de parties… Désormais les images de nos appareils photo sont capables de composer depuis des photos, des images qui n’existent pas en les recombinant. <em>« Les algorithmes inventent une mémoire et des images qui n’ont jamais existé »</em>. Les processus d’enregistrements que nous avons mis au point produisent des artefacts qui ne proviennent plus de l’expérience du monde, mais que nous ne pouvons plus distinguer de la réalité. Pour Bridle, le problème n’est pas tant que les machines puissent réécrire la réalité, mais que la réalité, le passé comme le futur, ne puissent plus être correctement racontés. <a href="https://deepdreamgenerator.com/">DeepDream</a> de Google illustre parfaitement cela. L’enjeu n’est pas pour nous de comprendre ce qu’est l’image, mais de nous demander ce que le réseau de neurones veut y voir ? </p> | |||
| <p>Pour Bridle, nous devrions ajouter une 4e loi aux <a href="https://fr.wikipedia.org/wiki/Trois_lois_de_la_robotique">trois lois de la robotique</a> d’Asimov. Les machines intelligentes devraient être capables de s’expliquer aux humains. Ce devrait être une loi première, car éthique. Mais le fait que ce garde-fou ait déjà été brisé laisse peu d’espoir quant au fait que les autres règles le soient à leur tour. <em>« Nous allons devoir affronter un monde où nous ne comprendrons plus nos propres créations et le résultat d’une telle opacité sera toujours et inévitablement violent »</em>. </p> | |||
| <p>Pour Bridle, l’alliance entre l’humain et la machine peut encore fonctionner, comme l’a montré <a href="http://www.internetactu.net/2010/04/06/pdlt-quel-sorte-de-cyborg-voulez-vous-etre/">Garry Kasparov avec les échecs avancés</a>, consistant à ce qu’une IA et qu’un humain jouent ensemble plutôt qu’ils ne s’affrontent. C’est dans la perspective d’associer les talents des humains et des machines, d’associer leurs différences d’une manière coopérative plutôt que compétitive que nous parviendrons à réduire l’opacité computationnelle. La perspective que l’intelligence des machines nous dépasse dans nombre de disciplines est une perspective destructrice. Nous devons trouver la voie d’une éthique de la coopération avec les machines, plutôt qu’un affrontement. </p> | |||
| <h2>Surveillance : nous sommes devenus plus paranoïaques</h2> | |||
| <p>Bridle s’en prend également longuement à la surveillance et notamment à la surveillance d’Etat pour souligner combien elle nous est masquée et continue à l’être, malgré les révélations d’Edward Snowden. Vous pouvez lire n’importe quel e-mail dans le monde d’une personne dont vous avez l’adresse. Vous pouvez regarder le trafic de tout site web. Vous pouvez suivre les mouvements de tout ordinateur portable à travers le monde. Pour Bridle, cela nous a montré qu’il n’y a pas de restriction possible à la capacité de surveillance du réseau. L’échelle et la taille de la surveillance a excédé ce que nous pensions comme étant techniquement possible. Les révélations sur la surveillance ont dépassé notre capacité à vouloir les ignorer. Pourtant, nous n’avons pas réagi. Nous sommes seulement devenus un peu plus paranoïaques. <em>« Tout comme le changement climatique, la surveillance de masse était trop vaste et trop déstabilisatrice pour que la société jette sa tête dedans »</em>. Si les gouvernements ont toujours espionné leur population comme leurs ennemis, leur capacité de surveillance a été radicalement transformée par la puissance de la technologie. <a href="http://www.internetactu.net/2018/06/01/videosurveillance-ou-avons-nous-failli/">La possibilité technique a nourri la nécessité politique</a>. <em>« La surveillance s’est développée parce qu’elle pouvait l’être, pas parce qu’elle est efficace et comme toute autre implémentation de système automatique, parce qu’elle altère la frontière de la responsabilité et permet de faire reposer les reproches sur la machine. »</em> En 2016, le lanceur d’alerte <a href="https://fr.wikipedia.org/wiki/William_Binney">William Binney</a> témoignant devant une commission d’enquête du parlement britannique expliquait que les données collectées par les agences de renseignement étaient à 99 % inutiles. Le volume de données a depuis longtemps débordé l’analyse, rendant impossible le fait de trouver les données pertinentes pour résoudre les menaces spécifiques. Cet avertissement a souvent été répété, sans que ses implications ne soient suivies d’effets. Comme le disait le président Obama : trop d’intelligence est le problème. Notre problème n’est pas tant l’échec de la collecte de l’intelligence que l’échec à intégrer et comprendre l’intelligence que nous avons déjà. Plus d’information ne signifie pas plus de compréhension. Les caméras de surveillance comme la surveillance globale ne font que renforcer la paranoïa sans proposer de solutions pour la résoudre. Les deux sont rétroactives et vengeresses. Au mieux, elles ne servent à arrêter qu’une fois le crime commis, qu’une fois que l’événement est passé et n’aide pas à en comprendre les causes. La lumière permet aux gens de sentir en sécurité, mais ne les rend pas plus en sécurité. Pour Bridle, si la surveillance échoue, c’est aussi parce qu’elle repose et dépend d’images plus que de compréhension et qu’elle repose sur la croyance qu’il suffit d’une justification pour s’imposer. </p> | |||
| <p>En opposition au secret, nous demandons de la transparence, mais elle n’est peut-être pas le bon levier. La NSA et Wikileaks partagent la même vision du monde avec des finalités différentes, rappelle Bridle. Les deux pensent qu’il y a des secrets au coeur du monde qui, s’ils étaient connus, pourraient rendre le monde meilleur. Wikileaks veut la transparence pour tous. La NSA veut la transparence pour elle. Les deux fonctionnent sur une même vision du monde. Wikileaks ne voulait pas devenir le miroir de la NSA, mais voulait briser la machine de surveillance. En 2006, Assange a écrit <a href="https://cryptome.org/0002/ja-conspiracies.pdf">« Conspiracy as Governance » (.pdf)</a>. Pour lui, tout système autoritaire repose sur des conspirations, car leur pouvoir repose sur le secret. <a href="http://www.internetactu.net/2018/03/16/la-transparence-nouvelle-arme-du-capitalisme-de-linformation/">Les leaks minent leur pouvoir</a>, pas par ce qui fuite, mais parce que la peur et la paranoïa dégradent la capacité du système autoritaire à conspirer. Mais les fuites de données ne suffisent pas à remettre en cause ou à abattre l’autorité. Les révélations ne font pas bouger l’opinion, sinon, nous aurions réagi bien avant les révélations de Snowden. Tant que les organisations de surveillance ne changent pas de l’intérieur, ceux qui sont en dehors de ces organisations, comme les lanceurs d’alertes, n’ont pas de capacité d’action. Ils attendent que des fonctionnaires ou que la justice confirment ce qu’ils avancent. Tout comme la disponibilité de vaste capacité de calcul conduit au développement de la surveillance globale, cette logique induit et limite notre manière d’y répondre. La plus petite part d’incertitude l’emporte. La dépendance à la logique du calcul pour saisir la vérité du monde nous laisse dans une position fondamentalement et paradoxalement précaire. La connaissance requiert la surveillance. Mais toute connaissance est réduite alors à qui est connaissable par le calcul. Toute connaissance repose alors sur des formes de surveillance. La logique computationnelle nous refuse toute capacité à penser la situation et à agir rationnellement en absence de certitude. Elle ne permet qu’une action réactive, qui n’est possible seulement après qu’une quantité suffisante d’évidences ait été accumulée et empêche toute action présente, quand on en a le plus besoin. La surveillance et notre complicité sont l’une des caractéristiques les plus fondamentales du nouvel âge sombre, car elle repose sur une vision aveugle : tout est éclairé, mais rien n’est vu ! <em>« Nous sommes désormais convaincu que jeter la lumière sur un sujet est la même chose que le penser et que d’avoir des moyens d’action sur lui »</em>. Mais la lumière du calcul nous dépossède de pouvoir, car elle nous fait crouler sous l’information et nous donne un faux sens de la sécurité. C’est là encore une conséquence de la pensée computationnelle. <em>« Notre vision est devenue universelle, mais notre capacité d’action, elle, s’est réduite plus que jamais. »</em> A l’image du réchauffement climatique, à nouveau, <em>« nous savons de plus en plus de choses sur le monde, mais nous sommes de moins en moins capable d’agir sur lui »</em>. Au final, nous nous sentons plus démunis que jamais. Plutôt que de reconsidérer nos hypothèses, nous nous enfonçons dans la paranoïa et la désintégration sociale. </p> | |||
| <h2>De l’incompréhension entre les hommes quand les machines régulent leurs relations</h2> | |||
| <p>Le monde est devenu trop complexe pour des histoires simples. En fait, <em>« la démultiplication de l’information ne produit pas plus de clarté, mais plus de confusion »</em>. L’un des symptômes de la paranoïa consiste à croire que quelqu’un vous surveille. Mais cette croyance est désormais devenue raisonnable, s’amuse Bridle en évoquant la surveillance d’Etat comme la surveillance des services numériques. Nous sommes entièrement sous contrôle, tant et si bien qu’on peut se demander qui est paranoïaque désormais ? Bridle évoque <a href="https://fr.wikipedia.org/wiki/Th%C3%A9orie_conspirationniste_des_chemtrails">les chemtrails</a>, cette croyance, très populaire sur le net, qui pense que les avions sont utilisés pour contrôler l’atmosphère ou les esprits via des diffuseurs chimiques. Dans notre monde hyperconnecté, des schismes émergent de nos modes de perception de masse. <em>« Nous regardons tous les mêmes cieux, mais nous y voyons des choses différentes »</em>. Et certains y voient une conspiration globale pour contrôler les cerveaux ou pour transformer le climat à des fins néfastes. Si les chemtrails peuvent paraître être un folklore du réseau, force est de constater qu’il s’est répandu. Des questions à ce sujet sont adressées aux Parlements, aux organisations scientifiques, aux médias… Ceux qui adhèrent à ces théories sont multiples et celles-ci ne sont d’ailleurs pas uniques, mais plutôt fractales, multifacettes. Les chemtrails sont même devenus le vortex de bien d’autres théories conspirationnistes. Le journaliste Carey Dunne <a href="https://www.theguardian.com/environment/2017/may/22/california-conspiracy-theorist-farmers-chemtrails">en a même fait le récit</a>. À nouveau, Bridle détaille l’entremêlement entre la vérité et la désinformation. Il souligne qu’en 2017 par exemple, la dernière édition de l’Atlas des nuages international publié par l’organisation météorologique mondiale a ajouté une nouvelle classification à sa liste officielle de nuages : <a href="https://cloudatlas.wmo.int/homogenitus.html">l’homogenitus</a>, plusieurs formes de nuages qui se forment et se développent à la suite de l’activité humaine. Des nuages anthropocéniques en quelque sorte. Effectivement, rappelle-t-il, la combustion du kérosène dans les moteurs d’avions produit de la vapeur d’eau et du dioxyde de carbone. La vapeur d’eau se transforme en petite goutte d’eau et en cristaux de glace. À haute altitude, avec les impuretés du kérosène, des nuages se forment sur le passage des avions. Ce sont les Cirrus Homogenitus, <a href="https://fr.wikipedia.org/wiki/Tra%C3%AEn%C3%A9e_de_condensation">les « Contrails »</a>, les traînées de condensation, qui sont effectivement les résultats de l’action humaine. Ils sont le signe visible de ce que rejettent les moteurs d’avions d’une manière invisible. On estime d’ailleurs qu’ils peuvent affecter le climat, notamment quand ils persistent, pas tant par leur composition chimique que par l’opacité nuageuse qui affecte l’atmosphère… </p> | |||
| <p>Avant on lisait l’avenir dans les haruspices et le vol des oiseaux. Désormais, on les traque en ligne, cherchant des traces de modification du monde dans ce qu’on enregistre dans l’informatique en nuage. Nombre de théories conspirationnistes reposent sur des formes de connaissance folkloriques, produites par des gens qui ne savent pas articuler les formes scientifiques qu’ils peuvent recouvrir de manière acceptable. Les Inuits ont depuis longtemps une connaissance du changement climatique qu’ils décrivent par des changements d’alignement d’étoiles, par des changements dans les vents, par les modifications des parcours des animaux… ou de luminosité de la neige… et par un ensemble de connaissance qui n’ont pas eu de reconnaissance scientifique directe avant que d’autres indices, plus scientifiques, ne les éclaire. </p> | |||
| <p><em>« Les théories conspirationnistes sont le dernier ressort des sans pouvoirs, imaginant ce que serait que d’être puissant »</em>, avance Bridle. Pour le spécialiste de la postmodernité, <a href="https://fr.wikipedia.org/wiki/Fredric_Jameson">Frederic Jameson</a>, les théories conspirationnistes sont <em>« la cartographie cognitive des plus démunis dans un âge postmoderne »</em>. C’est la figure dégradée de la logique par ceux qui ont le moins de capital culturel, une tentative désespérée de se représenter un système qu’ils ne comprennent pas. Encerclé par l’évidence de la complexité, l’individu a recours à un récit simpliste pour tenter de regagner un peu de contrôle sur la situation. À mesure que la technologie augmente et accélère le monde, celui-ci devient plus complexe. Les théories conspirationnistes deviennent alors des réponses, étranges, intriquées et violentes, pour s’en accommoder. </p> | |||
| <p>Avec la désinformation et les fakes news, la paranoïa de notre monde est devenue mainstream. Les nuages faits par l’homme n’ont plus besoin d’être plantés dans l’atmosphère : ils sont insérés comme du code dans les réseaux d’information et transforment notre perception du monde. Pour Bridle, les réseaux ont changé la manière dont nous formons notre culture. </p> | |||
| <p>Bridle rappelle que le premier cas documenté de schizophrénie paranoïaque a été celui de <a href="https://fr.wikipedia.org/wiki/James_Tilly_Matthews">James Tilly Matthews</a> en 1796 qui accusait le parlement britannique de l’avoir soumis à une machine faite de pompe hydraulique et de systèmes magnétiques pour contrôler son esprit. Or rappelle Bridle, à la même époque Lavoisier et Priestley, avaient créés une nouvelle compréhension du monde physique en expliquant les éléments. Les disputes scientifiques étaient très relayées dans les débats. James Matthews semble en avoir tiré sa propre interprétation pour en produire une conspiration. Il en est souvent ainsi. La complexité technique produit ses propres interprétations. Le nombre de gens qui consultent des forums sur la prise de contrôle de l’esprit est plus nombreux que ceux qui reçoivent un traitement pour se guérir de cette paranoïa. Entre le délire et la sous-culture, il y a une différence parfois imperceptible. Toute opposition à ces croyances peut être rejetée comme un moyen de dissimuler la vérité que ces gens expriment ou ressentent. Les microcommunautés conspirationnistes se cooptent, créent leur dynamique, qui se supportent mutuellement et se soutiennent. Ils créent des espaces où leur vision, leur compréhension du monde, leur croyance sont validées et mises en valeur. Ces groupes qui autorenforcent leurs croyances semblent être une caractéristique de la nouvelle obscurité. Notre capacité à décrire le monde résulte des outils que nous avons à notre disposition, et nous avons construit des outils qui renforcent encore ces effets : <em>« un populisme automatisé »</em>, qui donne aux gens ce qu’ils veulent dès qu’ils le souhaitent. </p> | |||
| <p>Ainsi, si vous cherchez de l’information sur les vaccins, vous tomberez invariablement sur de l’information contre les vaccins. Si vous cherchez de l’information sur la rotondité de la terre, vous tomberez inexorablement sur ceux qui pensent qu’elle est plate. Ces opinions divergentes semblent devenir la majorité tant elles sont exprimées et répétées avec force. <em>« Ce qui se passe quand vous désirez en savoir de plus en plus sur le monde entre en collision avec un système qui va continuer à assortir ses réponses à n’importe quelle question, sans résolution »</em>. Vous trouverez toujours quelqu’un pour rejoindre vos points de vue. Et toujours un flux pour les valider. Voici l’âge de la radicalisation algorithmique (<a href="https://www.nytimes.com/2018/03/10/opinion/sunday/youtube-politics-radical.html">à l’image de ce que disait Zeynep Tufekci de YouTube</a>). Les théories conspirationnistes sont devenues la narration dominante. Elles expliquent tout. Dans la zone grise des connaissances, tout prend un sens. Les multiples explications que notre cognition limitée utilise fonctionnent comme un masque sur les demi-vérités du monde. La zone grise permet toutes les approximations et nous empêche, assez confortablement, d’agir avec sens dans le présent. </p> | |||
| <h2>Coincés dans la boucle algorithmique</h2> | |||
| <p>Les vidéos de déballage de paquets cadeaux connaissent un énorme succès sur l’internet. Sur YouTube, vous pouvez passer des heures à en visionner. Certaines ont déjà été vues par des millions de personnes. <a href="https://www.youtube.com/channel/UChGJGhZ9SOOHvBB0Y4DOO_w">Ryan’s Toy Review</a>, spécialisé dans l’ouverture de jouets, est l’une des 6 chaînes les plus populaires de YouTube ! On peut se perdre à regarder ces gens surpris : notre désir à les regarder peut-être alimenté en boucle et sans fin par les systèmes de recommandation algorithmique. Dans son livre, Bridle revient sur la dénonciation des vidéos automatisés pour enfants que l’on trouve sur YouTube et <a href="https://www.nouvelobs.com/rue89/notre-epoque/20171108.OBS7106/peppa-pig-et-le-dentiste-aladdin-decapite-le-flippant-youtube-des-enfants.html">contre lesquels il s’était élevé il y a quelques mois</a> (<a href="https://medium.com/@jamesbridle/something-is-wrong-on-the-internet-c39c471271d2">voir l’article originel</a>). Sur YouTube, ni les algorithmes ni l’audience ne se préoccupent du sens. Tout l’enjeu de la recommandation est de vous montrer le plus de vidéos possibles et de préférence celles qui devraient le plus vous plaire – <a href="http://www.internetactu.net/a-lire-ailleurs/comment-youtube-sest-transforme/">parce qu’elles ont plu au plus grand nombre</a>. </p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-1024x485.png" alt="" class="aligncenter size-large wp-image-32557" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-1024x485.png 1024w, http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-300x142.png 300w, http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-768x364.png 768w, http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle.png 1298w" sizes="(max-width: 1024px) 100vw, 1024px"/></p> | |||
| <p>Le problème de cette recommandation automatisée est de fonctionner sur des rapprochements sans signification. Les contenus de confiance, comme ceux produits par des marques ou chaînes officielles, conduisent, via les recommandations automatiques, à des contenus similaires, mais qui ne leur ressemble en rien. C’est le même processus qui est à l’oeuvre sur FB ou Google : le contenu est rapproché de contenus similaires ou proches, mais cette proximité n’est pas de sens, mais est faite de mots clés, d’audiences… Les contenus inappropriés se mêlent ainsi à tous les autres. Peppa Pig, la reine des neiges ou Bob l’éponge mènent à tous les contenus qui en parlent… D’une information médicale sur l’apport de la vaccination vous glissez vers une information contre la vaccination. Les contenus sont agencés en flux sans fin et sans sens par l’automatisation algorithmique et sémantique. Des vidéos sont créés automatiquement par des logiciels pour bénéficier de l’audience des contenus les plus vus. Des bots exploitent les systèmes d’apprentissage automatisés de YouTube en en faisant bénéficier YouTube, permettant de générer plus d’exposition publicitaire et plus de revenus. La complicité de YouTube aux failles de son exploitation est totale, pointe Bridle. Le problème, c’est que des enfants voient les vidéos totalement absurdes générées par des programmes automatisés pour bénéficier des mouvements d’audience de la plateforme, à l’image de chaînes comme <a href="https://www.youtube.com/channel/UC56cowXhoqRWHeqfSJkIQaA">Bounce Patrol</a> ou <a href="https://www.youtube.com/user/videogyan/videos">Video Gyan</a>. C’est une conséquence logique de l’automatisation, comme les caméras racistes ou les produits insultants vendus sur Amazon. Ces produits algorithmiques sont parfaitement adaptés aux algorithmes et à la boucle de revenus qui leur profite autant à eux qu’aux plateformes qui les accueillent. </p> | |||
| <p>Bridle souligne que ce n’est pas que des trolls qui tentent de profiter d’un système ou qu’une conséquence de l’automatisation… <em>« C’est une vaste – et complètement cachée – matrice d’interactions entre des désirs et des récompenses, des technologies et leurs audiences, des <a href="https://fr.wikipedia.org/wiki/Trope">tropes</a> et des masques »</em>. Des technologies peu maîtrisées sont mises au service d’une production industrialisée cauchemardesque. Les failles des algorithmes sont les dernières failles du capitalisme où certains s’infiltrent non pas pour le renverser, mais pour tenter de gratter un peu d’argent que les plus gros systèmes s’accaparent. Au final, des vidéos automatisées finissent par être vues par des enfants. Leurs personnages préférés y font n’importe quoi, parfois suggèrent des scènes de meurtre ou de viols. Ces effets de réseaux causent des problèmes réels. Les algorithmes de YouTube ont besoin d’exploitation pour produire leurs revenus. Derrière leurs aspects séduisants, ils encodent les pires aspects du marché, notamment l’avidité. <em>« La capacité à exploiter l’autre est encodée dans les systèmes que nous construisons »</em>, pointe très justement James Bridle, puisque leur efficacité repose sur leur capacité à extraire de l’argent de nos comportements. Contrairement à ce qu’on croyait, à l’avenir, les IA et les robots ne vont pas tant dominer les usines et nos lieux de travail, mais vont dominer et exploiter nos salles de jeux, nos salons, nos maisons… À défaut d’une solution, <a href="https://www.buzzfeednews.com/article/alexkantrowitz/youtube-kids-is-going-to-release-a-whitelisted-non#.onXOK6ADdx">Google annonçait en avril que l’application YouTube Kids allait devenir « non-algorithmique »</a>… À croire, <a href="http://affordance.typepad.com/mon_weblog/2018/07/desalgorithmisation-du-monde.html">comme le pointait très justement le chercheur Olivier Ertzscheid</a>, que l’algorithimsation n’est pas une solution sans limites. </p> | |||
| <p>Pour Bridle, les humains sont dégradés des deux côtés de l’équation : à la fois dans l’exploitation qui est faite de leur attention et à la fois dans l’exploitation de leur travail. Ces nouvelles formes de violence sont inhérentes aux systèmes numériques et à leur motivation capitaliste. Le système favorise l’abus et ceux qui le produisent sont complices, accuse-t-il. L’architecture qu’ils ont construite pour extraire le maximum de revenus des vidéos en ligne a été hackée par d’autres systèmes pour abuser d’enfants à une échelle massive. Les propriétaires de ces plateformes ont une responsabilité forte dans l’exploitation qu’ils ont mise en place. <em>« C’est profondément un âge sombre quand les structures qu’on a construites pour étendre la sphère de communications sont utilisées contre nous d’une manière systématique et automatique. »</em> </p> | |||
| <p>La crise de cette production de vidéo automatisé que YouTube ne parvient pas à endiguer, comme la crise des effets de l’automatisation que l’on croise de partout, de Google à FB, reflète bien sûr une crise cognitive plus large qui est la conséquence même de nos rapports à ces systèmes automatisés. <em>« Sur les réseaux sociaux, toutes les sources ont l’air d’être les mêmes, les titres qui nous poussent à cliquer combinées avec nos biais cognitifs agissent de la même façon que les algorithmes de YouTube. »</em> Pour Bridle, les fausses nouvelles ne sont pas le produit de l’internet. Elles sont le produit de la cupidité et de la démocratisation de la propagande où tout a chacun peut devenir un propagandiste. Elles sont un amplificateur de la division qui existe déjà dans la société, comme les sites conspirationnistes amplifient la schizophrénie. La confusion est l’ami des charlatans. Le bruit leur accessoire. Selon un rapport britannique réalisé un an après le Breixit, plus de 13 000 comptes automatisés ont été identifiés. S’ils tweetaient pour et contre le Brexit, ils étaient 8 fois plus nombreux à soutenir le départ du Royaume-Uni que le contraire. Sur ces 13 000 comptes effacés par Twitter après le référendum, l’origine de la plupart est restée inconnue. 1/5 e des débats en ligne autour de l’élection américaine de 2016 était automatisée. Pour Bridle, quelque chose ne va plus quand ceux qui participent du débat démocratique n’ont pas à répondre de ce qu’ils font, restent intraçables… Leurs motivations et leur origine demeurent complètement opaques, quand bien même leurs effets sont réels. </p> | |||
| <p>Et les bots se démultiplient… Nous discutons désormais avec des logiciels. On nous invite à nous socialiser avec des systèmes où il devient de plus en plus impossible de socialiser. Bridle souligne que quand il a publié ses recherches sur les vidéos pour enfants automatisés, il a reçu des milliers de messages de gens qui semblaient savoir d’où provenaient ces vidéos. Les spéculations et explications partaient dans tous les sens. Mais ce qu’il y a de commun avec le Brexit, les élections américaines ou les profondeurs de YouTube, c’est que malgré tous les soupçons, il reste impossible de savoir qui fait ça, qu’elles sont leurs motivations, leurs intentions. On peut regarder sans fin ces flux vidéos, on peut parcourir sans fin les murs de mises à jour de statuts ou de tweets… cela ne permet pas de discerner clairement ce qui est généré algorithmiquement ou ce qui est construit délibérément et soigneusement pour générer des revenus publicitaires. On ne peut pas discerner clairement la fiction paranoïaque, l’action d’États, la propagande du spam… Ces confusions servent les manipulateurs quels qu’ils soient bien sûr, mais cela les dépasse aussi. C’est la manière dont le monde est. Personne ne semble réellement décider de son évolution… <em>« Personne ne veut d’un âge sombre, mais nous le construisons quand même et nous allons devoir y vivre. »</em></p> | |||
| <h2>De la violence</h2> | |||
| <p>Pour Eric Schmidt, ancien CEO de Google, rendre les choses visibles les rend meilleurs et la technologie est l’outil qui permet de rendre les choses visibles. Ce point de vue désormais domine, mais il est non seulement faux, il est activement dangereux, estime Bridle. Pour Smith, si chaque habitant du Rwanda avait eu un Smartphone en 1994, le massacre aurait été impossible. Pourtant, Bridle rappelle que nous étions alertés bien avant ce génocide des risques qui pesaient sur la région. Comme on l’a vu, la surveillance ne permet pas d’agir rétroactivement, pas plus que d’agir au moment présent, elle permet seulement de constater ce qu’il s’est passé. <em>« Le problème n’est pas ce que l’on sait, mais ce que l’on fait »</em>. Pire, pour les chercheurs Jan Pierskalla et Florian Hollenbach, en Afrique en tout cas, <a href="https://www.jstor.org/stable/43654011">l’accroissement de la couverture téléphonique est plutôt lié à de plus hauts niveaux de violence</a>. Ni les images satellites ni les smartphones ne créent de la violence bien sûr. Mais le fait de croire que la technologie est neutre nous maintient dans l’erreur. <em>« L’information est complètement et inextricablement liée à la violence, et l’armement de l’information est accéléré par les technologies qui prétendent renforcer le contrôle sur le monde »</em>. </p> | |||
| <p>Si <em>« les données sont le nouvel or noir »</em> (comme l’estimait Clive Humby, un mathématicien britannique en 2006, architecte du programme de fidélité de Tesco), cette comparaison pourrait être acceptable parce que la donnée ne peut pas être utilisée sans être raffinée. Le pétrole doit être transformé pour créer de la valeur, tout comme la donnée doit être analysée. Mais l’analogie de l’exploitation est devenue celle de la spéculation. La donnée est devenue l’or noir sur laquelle tout le monde spécule. Notre soif de données comme notre soit de pétrole est et demeure impérialiste et colonialiste et profondément imbriquée dans l’exploitation capitaliste. La donnée est utilisée pour classer les sujets de l’intention impérialiste, tout comme les sujets des empires étaient forcés à suivre les règles de leurs maîtres. Les Empires d’antan ont transformé leur territoire pour continuer leurs opérations à un niveau infrastructurel. Ils maintiennent leur pouvoir dans les réseaux. Les régimes conduits par les données répètent les politiques racistes, sexistes et oppressives de leurs prédécesseurs parce que leurs biais ont été encodés à leurs racines. L’extraction et le raffinage du pétrole polluent l’air et le sol, tout comme l’extraction et le traitement des données polluent et empoisonnent nos relations sociales. Ils imposent la pensée computationnelle entre nous, renforcent la division de la société du fait de classification bâtarde, du populisme et accélèrent les inégalités. Les données soutiennent et nourrissent des relations de pouvoirs inégalitaires : dans la plupart de nos interactions, la donnée est quelque chose qui semble librement donné, mais qui est en fait extraite sous la contrainte, sans notre consentement explicite. L’extraction est opérée par certains au détriment du plus grand nombre. Et l’exploitation des données risque de continuer indéfiniment, quels que soient les dommages qu’elle cause. </p> | |||
| <p>Exploiter plus de données pour construire de meilleurs systèmes est une erreur. Cette méthode ne parviendra pas à prendre en compte la complexité humaine ni à la résoudre. Le développement de l’information n’a pas conduit à une meilleure compréhension du monde, mais au développement de points de vue alternatifs et concurrents. Nous devons changer nos façons de penser comme nous y invitait Lovecraft. Nous ne survivrons pas plus à l’information brute qu’à la bombe atomique. Le nouvel âge sombre est un lieu où le futur devient radicalement incertain et où le passé devient irrévocablement contesté. Mais c’est le présent dans lequel nous devons vivre et penser. Nous ne sommes pas sans pouvoir ni capacités. Mais pour cela nous devons nous défaire des promesses illusoires de la pensée computationnelle. Penser le monde autre, c’est ce à quoi nous invite James Bridle dans le nouvel âge sombre. </p> | |||
| <p/><center>*</center><p> | |||
| Ce compte-rendu de lecture excessif, exhaustif, (trop) complet… se veut le reflet de l’importance qu’il me semble devoir apporter à ce livre. James Bridle ne simplifie rien. Il malaxe une pensée complexe, retors. On ne peut pas la réduire à une technocritique facile, peu instruite ou peu informée, comme c’est souvent le cas de gens qui ne sont pas très spécialistes de ces sujets, qui font des raccourcis rapides pour rejeter toute faute sur l’internet ou sur le monde contemporain. Au contraire même. Brille déroule une pensée complexe. Il appuie bien souvent exactement là où la société augmentée du numérique irrite. | |||
| </p><p>Reste à savoir si cet âge sombre des technologies est vraiment notre avenir. <a href="https://fr.wikipedia.org/wiki/%C3%82ge_sombre">L’âge sombre du Moyen Âge n’a jamais vraiment existé ailleurs que dans les lacunes des historiens</a>. On peut douter également de cette nouvelle obscurité ou regretter le titre faussement prophétique. Reste que la complexité et l’intrication du monde que décrit James Bridle, montrent combien il nous faut, plus que jamais, nous défaire justement d’une vision simple et manichéenne de la technologie. </p> | |||
| <p>On voudrait que les points que soulève Bridle ne soient pas aussi convaincants. On voudrait qu’il se trompe. On voudrait croire que contrairement à ce qu’il avance, les biais de nos systèmes soient réparables. Qu’on puisse y faire quelque chose. Mais pour cela, il a au moins raison quelque part. Il va nous falloir abandonner notre foi dans la technologie. La limiter. Décider de là où elle est nécessaire ou utile pour agir et de là où nous devons nous en passer. De la limiter. De l’utiliser autrement. Nous risquons bien d’y être contraints par le déchainement du monde et l’épuisement des ressources. Et pour cela, nous devons certainement apprendre à découpler la technologie des intérêts qu’elle sert. </p> | |||
| <p>Hubert Guillaud</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.internetactu.net/2018/09/10/technologie-lage-sombre/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 85
- 0
cache/087c11f6da0d22f3aff6a36e1fb1f7f0/index.md
View File
| @@ -0,0 +1,85 @@ | |||
| title: Technologie : l’âge sombre | |||
| url: http://www.internetactu.net/2018/09/10/technologie-lage-sombre/ | |||
| hash_url: 087c11f6da0d22f3aff6a36e1fb1f7f0 | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4-166x300.jpg" alt="" class="alignright size-medium wp-image-32553" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4-166x300.jpg 166w, http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4-567x1024.jpg 567w, http://www.internetactu.net/wp-content/uploads/2018/09/New-Dark-Age-1050-5927870a2b206657f6b87133d3f776c4.jpg 581w" sizes="(max-width: 166px) 100vw, 166px"/>L’artiste et essayiste <a href="https://jamesbridle.com/">James Bridle</a> (<a href="https://twitter.com/jamesbridle">@jamesbridle</a>) s’intéresse depuis longtemps aux dysfonctionnements de notre monde moderne. Il observe ce qui ne fonctionne pas : les bugs, <a href="https://fr.wikipedia.org/wiki/Glitch">les glitchs</a>, <a href="http://www.internetactu.net/2013/10/08/surveiller-les-algorithmes/">les ratés de notre développement technologique</a>… Longtemps, il a regardé les espaces de friction entre technologie et société comme le lieu d’expression et de production de nouvelles formes culturelles. C’était ce qu’il appelait <a href="http://new-aesthetic.tumblr.com/">« la nouvelle esthétique »</a>, celle produite au croisement de la technologie et de la réalité, ces <a href="http://www.liberation.fr/ecrans/2012/04/16/l-esthetique-online-passe-hors-ligne_951659?page=article">« irruptions visuelles du monde numérique dans le monde physique »</a>. Il en a joué plus que tout autre, en produisant <a href="http://www.internetactu.net/2012/03/08/lift12-ecrire-avec-les-machines/">des dispositifs pour interroger la manière même dont nous produisons notre monde moderne</a>. L’un des exemples les plus célèbres – <a href="http://www.internetactu.net/a-lire-ailleurs/120508768448/">parmi d’autres</a> – étant certainement <a href="http://www.slate.fr/story/141215/video-piege-voiture-autonome">le piège à voiture autonome qu’il imagina</a>, comme une mise en abîme des limites de la soi-disant intelligence artificielle qu’on pouvait prendre au piège comme un enfant… <a href="http://www.internetactu.net/a-lire-ailleurs/les-lanceurs-dalerte-sont-ils-une-reponse-aux-problemes-de-la-technologie/">On avait évoqué rapidement, au printemps</a>, la sortie de son dernier livre <em><a href="https://amzn.to/2wH3VJr">Le nouvel âge sombre : la technologie et la fin du futur</a></em> (Verso Books, 2018, en anglais)… Il est temps d’y revenir.</p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001.jpg" alt="" class="aligncenter size-full wp-image-32554" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001.jpg 800w, http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001-300x169.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/09/autonomoustrap001-768x432.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"/></p> | |||
| <h2>Les bugs ne sont pas amenés à être corrigés !</h2> | |||
| <p>Ce <em>New Dark Age</em> porte un titre prophétique et apocalyptique. Un peu trop peut-être. C’est effectivement un livre très critique sur notre rapport à la technologie, très éloigné du rapport souvent curieux et amusé que Bridle portait aux technologies avec la nouvelle esthétique. En une dizaine de chapitres, Bridle explore les glitchs qui sont désormais devenus des schismes, des scissions, des ruptures… comme s’ils n’étaient plus aussi distrayants. Dans son livre, il montre combien les bugs se cristallisent en caractéristiques. Combien la complexité technique que nous avons construite s’entremêle pour produire des effets en réseau, complexes, profonds, intriqués que nous ne parvenons plus vraiment à démêler. Son constat principal consiste à dire que ces dysfonctionnements ne sont pas amenés à être corrigés. Ils sont au contraire intrinsèques à la nature même des technologies qui se déploient aujourd’hui. Contrairement à ce que nous annonçaient les pionniers et les prophètes des technologies, pour Bridle, la technologie n’annonce pas de nouvelles Lumières ou une Renaissance, mais, comme Jules Michelet parlait du Moyen Âge, un âge sombre, une ère d’obscurité pour ne pas dire d’obscurantisme. Ni les réseaux sociaux, ni l’intelligence artificielle, ni les systèmes techniques ne vont nous aider à faire monde commun. Au contraire. </p> | |||
| <p>Le constat de Bridle est définitif. <em>« L’accélération technologique a transformé notre planète, nos sociétés et nous-mêmes, mais elle n’a pas réussi à transformer notre compréhension de la technologie »</em>. Nous n’arrivons plus à penser en dehors ou sans technologie. Pire, la technologie s’est fait la complice de tous les défis auxquels nous sommes confrontés : à la fois d’un système économique hors de contrôle qui ne cesse d’élargir les inégalités, la polarisation politique comme le réchauffement climatique. Pour Bridle, la technologie n’est pas la solution à ces défis, elle est devenue le problème. Il nous faut la comprendre plus que jamais, dans sa complexité, ses interconnexions et ses interactions : mais cette compréhension fonctionnelle ne suffit pas, il faut en saisir le contexte, les conséquences, les limites, le langage et le métalangage. </p> | |||
| <p>Trop souvent, on nous propose de résoudre ce manque de compréhension de la technologie par un peu plus d’éducation ou son corollaire, par la formation d’un peu plus de programmeurs. Mais ces deux solutions se limitent bien souvent en une compréhension procédurale des systèmes. Et cette compréhension procédurale vise surtout à renforcer la <em>« pensée computationnelle »</em>, c’est-à-dire la pensée des ingénieurs et des informaticiens qui n’est rien d’autre que le métalangage du solutionnisme technologique : <em>« la croyance que tout problème donné peut-être résolu par l’application de solutions de calcul »</em>. Or la pensée des ingénieurs, la pensée informatique, intègre plus que toute autre le solutionnisme : elle ne parvient pas à voir le monde autrement qu’en terme computationnel. Dans ce mode de pensée, le monde est un système qu’il faut décoder… Et c’est là notre erreur de perspective principale, estime James Bridle. </p> | |||
| <h2>L’écueil de la pensée computationnelle</h2> | |||
| <p>Les systèmes techniques sont devenus de plus en plus complexes. Trop critiques et interconnectés pour être compris, pensés ou conçus. Leur compréhension n’est disponible plus que pour quelques-uns et le problème est que ces quelques-uns sont les mêmes que ceux qui sont au sommet des structures de pouvoir. Pour James Bridle, il y a une relation causale entre la complexité des systèmes, leur opacité, et les violences et inégalités qu’ils propagent. <em>« Trop souvent, les nouvelles technologies sont présentées comme étant naturellement émancipatrices. »</em>, Mais c’est là typiquement un exemple de pensée computationnelle estime Bridle. Les primo-utilisateurs qui en ont vanté les mérites, si naïvement, ont bénéficié des opportunités de la technique, sans saisir ce que leur déploiement à large échelle pouvait transformer ni voir que le fait qu’ils en bénéficient ne signifiait pas qu’elle allait bénéficier à tous. Dans notre monde en réseau, l’individualisme l’a emporté sur la solidarité. </p> | |||
| <p>Le cloud (l’informatique en nuage) n’est plus une métaphore du réseau, c’est l’incarnation de ce système global et surpuissant qu’aucun d’entre nous ne peut désormais attraper. Ce nuage est pourtant une bien mauvaise métaphore. Rien de ce qu’il recèle n’y est sans poids, rien n’y est amorphe ou invisible. Le cloud cache une infrastructure physique complexe faite de lignes téléphoniques, de fibre optique, de satellite, de vastes entrepôts d’ordinateurs, qui consomment d’énormes quantités d’énergie et qui influent sur de multiples juridictions. Le cloud est l’incarnation d’une nouvelle industrie. </p> | |||
| <p>L’absence de compréhension dans laquelle nous sommes maintenus est délibérée, estime Bridle. De la sécurité nationale aux secrets industriels, il y a beaucoup de raisons à obscurcir ce que recouvre ce nuage. Mais ce qui s’en évapore est assurément notre propriété (dans les nuages, tout appartient à d’autres) et notre agentivité, c’est-à-dire notre capacité à faire. Le nuage est une métaphore qui obscurcit la réalité opérationnelle de la technologie : un moyen de cacher ce qu’elle accomplit, sa propre agentivité, via des codes opaques et insondables, via une distance physique réelle entre l’utilisateur et les matériels qu’il active et une construction juridique qui fonctionne selon le principe d’extraterritorialité. La technologie est une opération de puissance qui utilise ses outils pour se cacher de nous. </p> | |||
| <h2>Le réseau est-il l’accomplissement du progrès ?</h2> | |||
| <p>Ce réseau technologique de systèmes entremêlés qui s’est construit petit à petit est caractérisé par son absence d’intention apparente, claire ou unique. Personne n’a décidé de créer le réseau tel qu’il s’est développé… Il s’est bâti peu à peu, dans le temps, système contre système, culture contre culture, comme une agrégation de technologies se liant ensemble via des programmes publics et des investissements privés, via des relations personnelles et des protocoles techniques… Le réseau donne l’impression d’être à la fois l’idéal de progrès le plus abouti et l’idéal de base de notre culture tout en paraissant avoir émergé inconsciemment, poursuivant son but d’interconnexion sans fin pour lui-même et par lui-même… <em>« Nous présumons que l’interconnexion est inhérente et inévitable. Le réseau semble être devenu le résultat du progrès, son accomplissement ultime »</em>, à l’image de machines qui accompliraient ainsi leurs propres désirs. Internet semble avoir accompli l’idéal des Lumières, l’idéal du progrès : celui que plus de connaissance et plus d’information conduit toujours à prendre de meilleures décisions. </p> | |||
| <p>Mais n’est-ce pas plutôt le contraire auquel nous assistons ? <em>« Ce qui était censé éclairer le monde l’a obscurci. L’abondance d’information et la pluralité d’opinion accessible à tous n’ont pas produit un consensus cohérent, mais au contraire a déchiré la réalité en narrations simplistes, en théories fumeuses et en politique d’opinion. Contrairement au Moyen Âge, où l’âge sombre était lié à une perte de connaissance antique, l’âge sombre moderne est lié à une abondance de connaissance dont nous ne savons plus démêler collectivement l’apport. »</em> Et Bridle de faire référence à l’obscurité qu’annonçait Lovecraft dès les premières lignes de <em>l’Appel de Cthulhu</em> : </p> | |||
| <blockquote><p>« la chose la plus miséricordieuse en ce monde, je crois, c’est l’inaptitude de l’esprit humain à corréler tout ce dont il est témoin. Nous vivons sur une placide île d’ignorance au milieu de noires mers d’infini, et cela ne veut pas dire que nous puissions voyager loin. Les sciences, chacune attelée à sa propre direction, nous ont jusqu’ici peu fait de tort ; mais rassembler nos connaissances dissociées nous ouvrira de si terrifiants horizons de réalité, et la considération de notre effrayante position ici-bas, que soit nous deviendrons fous de la révélation, soit nous en fuirons la lumière mortelle dans la paix et la sécurité d’une nouvelle ère d’obscurité. »</p></blockquote> | |||
| <p>L’obscurité dont parle Bridle c’est notre incapacité à voir clairement ce qui est devant nous, avec capacité et justice. Pour Bridle pourtant, ce constat ne doit pas être lu comme une condamnation de la technologie. Au contraire. Pour relever l’âge sombre qui s’annonce, il nous faut nous engager plus avant dans la technologie, avec elle, mais avec une compréhension radicalement différente de ce qu’il est possible d’en faire, en retrouver un sens que la seule recherche d’efficacité nous a fait perdre. Tout comme le changement climatique, les effets de la technologie s’étendent sur le globe et affectent tous les aspects de nos vies. Mais comme le changement climatique, ses effets sont potentiellement catastrophiques et résultent de notre incapacité à comprendre les conséquences de nos propres inventions. Nous devons changer de manière de voir et penser le monde, nous invite Bridle, un peu facilement ou naïvement. L’âge sombre n’est pas qu’un lieu de danger, c’est aussi un moment de possibilité et de liberté. Mais cet optimisme semble un peu de façade, tant la description qu’il fait de notre utilisation des technologies est sombre et glaçante. Les glitchs qu’il s’amusait à recenser comme une expression étrange des transformations culturelles nées de notre capacité à l’interconnexion semblent être devenus des sortes de monstres que personne ne maîtrise. Les effets de bords de nos créations sont devenus des créatures qui nous dévorent en retour. Nous perdons pied dans ce que nous avons créé. </p> | |||
| <p/><h2>Peut-on s’extraire de la pensée computationnelle ?</h2> | |||
| <p>Dans son livre, Bridle étrille longuement la pensée computationnelle, ce mode de pensée à travers les machines, né du calcul, et qui estime que tout problème est soluble par essence. Il rappelle l’histoire de l’informatique, intimement liée à la question de la modélisation des essais nucléaires, des tirs balistiques et de la prédiction à l’image des travaux du mathématicien <a href="https://fr.wikipedia.org/wiki/Lewis_Fry_Richardson">Lewis Fry Richardson</a> qui va réaliser – des années 1910 à 1922, bien avant l’apparition des ordinateurs donc – des mesures climatiques pour produire le premier modèle de prédiction météorologique. Il faudra attendre les premiers ordinateurs pour être enfin capables de traiter d’imposants volumes de données pour que la prédiction météorologique se développe et se réalise. Le développement de capteurs (satellites, capteurs météo…) a mis peu à peu le globe sous calcul, sans que nous nous en rendions vraiment compte. </p> | |||
| <p>Pour James Bridle, l’histoire de la prédiction repose sur une série d’échecs – des échecs à distinguer la réalité de sa simulation, même si ce n’est peut-être pas le cas dans tous les domaines, notamment la météo justement – et qui promet sans cesse de s’améliorer sans voir que son principal écueil demeure de croire en sa surpuissance. <em>« Nous avons été conditionnés pour croire que les ordinateurs rendaient le monde plus limpide et plus efficace, qu’ils allaient réduire la complexité et facilité de meilleures solutions aux problèmes qui nous assiègent, qu’ils allaient étendre notre capacité à adresser de plus larges domaines d’expertise. Mais cette histoire ne s’est pas révélée exacte du tout. Une meilleure lecture de l’histoire de l’informatique souligne une opacité croissante alliée à une concentration croissante du pouvoir et un pouvoir qui se retranche derrière des domaines d’expertise toujours plus étroits. »</em> Effectivement, l’informatique n’a pas simplifié le monde. </p> | |||
| <p>En construisant des architectures complexes, qui ne peuvent plus être questionnées, on bloque et on transforme les problèmes en abstraction, en dilemmes définitivement rebelles à toute solution autre que mathématique. Tout problème devient une question mathématique plutôt qu’une question démocratique ou égalitaire. <em>« En rapprochant la simulation de l’approximation, les grands prêtres de la pensée computationnelle pensent remplacer le monde par des modèles biaisés de lui-même ; et en le faisant, les modeleurs s’assurent du contrôle du monde. »</em> James Bridle s’inscrit dans la continuité des constats de l’historien des sciences <a href="https://fr.wikipedia.org/wiki/David_F._Noble">David Noble</a> qui, dans <em><a href="https://amzn.to/2Q4Sa7A">Le progrès sans le peuple</a></em> notamment, soulignait combien la pensée des ingénieurs avait contribué à donner du pouvoir aux puissants plutôt que favoriser l’équité ou la démocratie ; comme dans celle de <a href="https://www.linkedin.com/in/richardsclove/">Richard Sclove</a> du <a href="http://www.loka.org/">Loka Institute</a>, qui dans <em><a href="https://amzn.to/2NMqrXy">Choix technologiques, choix de société</a></em>, <a href="http://maisouvaleweb.fr/technologie-nest-democratique-devenir/">soulignait combien les enjeux démocratiques restaient le parent pauvre de la question technologique</a>. </p> | |||
| <p>Aujourd’hui, nous pouvons avoir l’impression que le monde nous est disponible, instantanément, explique Bridle, à l’image du site <a href="https://www.flightradar24.com">FlightRadar</a>, un site qui permet de voir tous les avions en vol en temps réel… depuis <a href="https://fr.wikipedia.org/wiki/Automatic_dependent_surveillance-broadcast">le signal ADS-B</a> qu’ils émettent. Enfin, pas tous. Seulement les vols commerciaux, ce qui escamote les manoeuvres militaires comme les vols des jets privés… Le GPS est devenu un autre de ces signaux invisibles qui surveille toute activité sur la planète, une horloge géographique qui régule les déplacements et le temps, la logistique, les infrastructures électriques comme les marchés financiers. Mais notre dépendance de plus en plus grande dans de tels systèmes masque combien ils sont manipulables, alors que nous avons tendance à penser qu’ils ne le sont pas.</p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/flightradar.jpg" alt="" class="aligncenter size-full wp-image-32555" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/flightradar.jpg 620w, http://www.internetactu.net/wp-content/uploads/2018/09/flightradar-300x158.jpg 300w" sizes="(max-width: 620px) 100vw, 620px"/></p> | |||
| <h2>La connectivité est devenue notre réalité</h2> | |||
| <p>Notre rapport à l’espace et au code ne s’exprime pas uniquement dans les systèmes informatiques, rappelle Bridle. Des géographes comme Rob Kitchin et Martin Dodge, on posé le concept de <em><a href="https://amzn.to/2Q2L5UY">code/space</a></em> pour décrire l’imbrication du calcul avec nos environnements, à l’image des aéroports, conçus comme des systèmes et qui ne peuvent fonctionner sans informatique. C’est le cas de plus en plus de nos environnements les plus immédiats, gérés par des systèmes informatiques. Nos outils de travail les plus quotidiens comme nos véhicules exigent désormais des mises à jour quotidiennes et des échanges de données pour fonctionner. La connectivité et les algorithmes rythment jusqu’à nos vies sociales. Nos objets quotidiens sont tous devenus des code/space. Toutes nos activités sont <em>« de plus en plus gouvernées par une logique algorithmique et policées par des processus informatiques opaques et cachés »</em>. Cette emphase de production physique et culturelle du monde par l’informatique masque les inégalités de pouvoir qu’elles induisent, reproduisent et amplifient. </p> | |||
| <p>La pensée computationnelle s’infiltre partout : elle devient notre culture. Elle nous conditionne à la fois parce qu’elle nous est illisible et à la fois parce que nous la percevons comme neutre émotionnellement et politiquement. Les réponses automatisées nous semblent plus dignes de confiance que celles qui ne le sont pas. Dans la pensée computationnelle, nous sommes victimes du biais d’automatisation : <em>« nous avons plus confiance dans l’information automatisée que dans notre propre expérience, même si elle est en conflit avec ce qu’on observe »</em>. Les conducteurs de voitures comme les pilotes d’avion ont plus tendance à croire leurs instruments que leur expérience, même si celle-ci n’est pas alignée. Ceux qui suivent les systèmes automatisés prennent leurs décisions plus rapidement avec moins de questions : comme si l’action qui leur était suggérée prévenait toute question ou toute introspection relatives au problème. Dans le stress, nous préférons choisir l’option la plus simple, la plus immédiate. Nous préférons les stratégies faciles à suivre et à justifier. Nous préférons ce que nous dit la machine à ce que nous dit notre intuition qu’il faudrait corroborer en faisant un effort cognitif supplémentaire. </p> | |||
| <p>Pour Bridle, l’informatique, en ce sens, est un piratage de notre capacité cognitive, de notre capacité attentionnelle, qui renvoie toute responsabilité sur la machine. <em>« À mesure que la vie s’accélère, les machines ne cessent de prendre en main de plus en plus de tâches cognitives, renforçant par là leur autorité – sans regarder les conséquences »</em>. <em>« Nous nous accommodons de mieux en mieux et de plus en plus aux confortables raccourcis cognitifs que nous proposent nos machines. L’informatique remplace la pensée consciente. Nous pensons de plus en plus comme des machines, ou plutôt nous ne pensons plus du tout ! »</em>. </p> | |||
| <h2>Nous vivons désormais dans la computation</h2> | |||
| <p>Nous vivons désormais dans la computation. Elle n’est plus seulement l’architecture de notre monde : elle est devenue le fondement même de notre manière de penser. Elle est devenue si pervasive, si séductrice, que nous l’utilisons pour tout : elle remplace le mécanique, le physique, le social, le cognitif… <em>« À mesure que l’informatique nous encercle, que nous lui assignons la puissance et la capacité à générer la vérité, et que nous lui confions de plus en plus de tâches cognitives, la réalité prend l’apparence d’un ordinateur et nos modes de pensées également. »</em> La pensée computationnelle ne gouverne pas seulement nos actions présentes, mais modèle le futur pour qu’il s’adapte à ses paramètres. <em>« Ce qui est difficile à modéliser, à calculer, à quantifier, ce qui est incertain ou ambigu, est désormais exclu du futur possible. »</em> L’informatique projette un futur qui ressemble au passé (<em>« Les algorithmes ne prédisent pas le futur, ils codifient le passé »</em>, <a href="https://www.mediapart.fr/journal/culture-idees/010918/face-aux-algorithmes-defendre-les-mediocres-et-ceux-qui-sont-dans-la-moyenne?utm">disait déjà Cathy O’Neil</a>). La pensée computationnelle est paresseuse. Elle propose finalement des réponses faciles. Elle nous fait croire qu’il y a toujours des réponses. </p> | |||
| <p><em>« La pensée computationnelle a triomphé parce qu’elle nous a d’abord séduits par sa puissance, puis elle nous a embrouillée par sa complexité, et finalement elle s’est imposée dans nos cortex comme une évidence. »</em> Elle n’en demeure pas moins le produit d’une sursimplification, de données biaisées, d’obfuscation délibérée… qui nous montrent chaque jour leurs limites, à l’image des révélations quotidiennes qu’on peut lire sur les défaillances technologiques de notre monde. <em>« Plus nous sommes obsédés <a href="http://www.internetactu.net/2018/04/19/peut-on-modeliser-la-societe/">à modéliser le monde</a>, plus il apparaît inconnaissablement complexe »</em>, comme si notre tentative à le réduire était par nature impossible à mesure qu’on semble croire y parvenir. </p> | |||
| <h2>Avons-nous atteint un pic de la connaissance ?</h2> | |||
| <p>James Bridle nous rappelle que, comme le climat, les infrastructures en réseau sont fragiles. Un rapport britannique (<a href="http://webarchive.nationalarchives.gov.uk/+/http:/www.cst.gov.uk/reports/files/national-infrastructure-report.pdf"><em>A National infrastructure for the 21st Century</em> (.pdf)</a>, 2009), qui évoquait autant l’internet que les réseaux d’adduction d’eau, d’approvisionnement d’électricité ou de gaz, l’avait très bien souligné : les réseaux souffrent d’une gouvernance fragmentée, sans responsabilités claires, peu cartographiés et sous-financés ; des infrastructures en silos ; des investissements privés comme publics insuffisants et plus encore un manque de compréhension de la complexité de leur fonctionnement… expliquent leur fragilité intrinsèque et <a href="http://www.internetactu.net/2016/04/11/contre-linnovation-de-linvisible-importance-de-la-maintenance/">la difficulté de leur maintenance</a>. Ajoutez à cela <a href="https://www.gov.uk/government/publications/adapting-the-ict-sector-to-the-impacts-of-climate-change">les impacts du changement climatique sur leur maintenance et leur évolution</a> et vous comprendrez que les réseaux ne sont pas dimensionnés pour faire face au futur. Bref, non seulement l’informatique contribue largement au réchauffement climatique, mais elle risque d’en être l’une des principales victimes. </p> | |||
| <p>Pour autant, peu de gens s’inquiètent vraiment de cette responsabilité quant aux usages mêmes que l’on fait du réseau. Les rares solutions esquissées qui peuvent aller de la taxation, <a href="http://www.internetactu.net/2015/12/01/avons-nous-besoin-dune-vitesse-limitee-sur-linternet/">à des régressions techniques</a>, semblent impensables à projeter à l’échelle des réseaux. À mesure que la culture numérique devient toujours plus rapide et plus gourmande en données, elle devient aussi plus coûteuse et nécessite de plus en plus d’énergie. </p> | |||
| <p>Le problème du changement climatique c’est qu’il dégrade notre capacité à prédire le futur. Pour James Bridle, alors que la prédiction est au coeur du futur, celui-ci est de moins en moins clair, de moins en moins prévisible. Les modèles et cycles de la nature que nous avons établis depuis des siècles (comme la pollinisation, les migrations animales, etc.) sont en train de changer : les connaissances que nous avons accumulées sont en train de devenir fausses. Or, notre civilisation repose pour beaucoup sur ce type de prédiction, comme de savoir quelle graine planter à quel moment de l’année, comme d’être capable de prédire les sécheresses ou les feux de forêt… Nos enfants pourraient demain en savoir bien moins sur le monde que nous ! </p> | |||
| <p>Le spécialiste du climat William Gail, fondateur du <a href="http://globalweathercorp.com">Global Weather Corporation</a>, <a href="https://www.nytimes.com/2016/04/19/opinion/a-new-dark-age-looms.html">dans le <em>New York Times</em></a>, estimait que nous avons peut-être passé un <em>« pic de connaissance »</em> ! Pour le philosophe Timothy Morton (<a href="https://twitter.com/the_eco_thought">@the_eco_thought</a>) <a href="http://ecologywithoutnature.blogspot.com">blog</a>), le réchauffement climatique est un <em><a href="https://en.wikipedia.org/wiki/Timothy_Morton#Hyperobjects">« hyperobjet »</a></em>, comme il l’explique <a href="https://amzn.to/2ChDWNT">dans son livre éponyme</a> : quelque chose qui nous entoure, nous enveloppe, mais qui est trop énorme pour qu’on puisse le voir ou le comprendre entièrement. On perçoit les hyperobjets par l’influence qu’ils ont sur certains éléments, comme la fonte des glaciers ou le développement des turbulences en avion… Ils défient nos capacités à les décrire rationnellement. Le réseau, comme le changement climatique, est une représentation de notre réalité précisément parce qu’il est très difficile à penser, estime Bridle. On a beau transporter ce réseau dans nos poches, le stocker dans des centres de données… Il n’est pas réductible à ces unités concrètes. Il est non-local et par nature contradictoire. On ne peut pas le connaître ! </p> | |||
| <h2>Où est passé le progrès ?</h2> | |||
| <p>Dans le monde de la SF, on parle par exemple du <a href="https://kk.org/thetechnium/steam-engine-ti/">temps du moteur à vapeur</a>, explique l’auteur de science-fiction <a href="https://fr.wikipedia.org/wiki/William_Gibson">William Gibson</a>. Le temps de la machine à vapeur est un concept qui désigne le moment où ce moteur est advenu sans que personne ne sache vraiment pourquoi il est apparu à tel moment plutôt qu’à un autre. En fait, <a href="https://fr.wikipedia.org/wiki/Claude_Ptol%C3%A9m%C3%A9e">Ptolémée</a> avait largement expliqué le principe du moteur à vapeur et rien n’aurait pu empêcher les Romains par exemple d’en construire. Mais ce n’est pas ce qu’il s’est passé. Les moteurs à vapeur sont apparus quand c’était leur temps. L’histoire des sciences nous montre que la plupart des inventions sont simultanées et ont plusieurs auteurs. Elles apparaissent souvent à plusieurs endroits simultanément. Cela implique une certaine manière de raconter l’histoire des sciences. La recherche, la science, la technologie convergent en une invention qui semble toujours le résultat d’un passé qui y conduit directement. L’histoire semble servir à créer une justification a posteriori, <a href="http://www.internetactu.net/2017/06/14/technologie-peut-on-se-defaire-des-promesses-et-des-mythes/">tout comme la fameuse loi de Moore</a>. Mais c’est là à la fois une projection et une extrapolation qui reposent plutôt sur nos préférences pour les histoires héroïques qu’autre chose, avance Bridle. Nous avons un biais qui nous fait préférer la marche inévitable du progrès plutôt que ses hoquets, qui nous fait préférer voir le progrès et ses prolongements vers le futur. Pourtant, <em>« la loi de Moore n’est ni technique, ni économique : elle est libidinale ! »</em>, clame Bridle. Le développement des circuits intégrés dès les années 60 par quelques entreprises a transformé le secteur au profit de quelques très grosses entreprises. Cette industrie a transformé le matériel et l’a distingué du logiciel. Elle a aussi mis fin à l’artisanat, à la réparation et à l’efficacité logicielle… Alors que les premiers développeurs logiciels avaient le souci d’économiser les ressources en optimisant leur code, les programmeurs ont pu s’en passer, sachant qu’ils devaient attendre quelques mois pour disposer de deux fois plus de puissance. L’héritage de la loi de Moore c’est que le logiciel est devenu le centre de nos sociétés. La courbe de puissance dessinée par la loi de Moore est devenue l’image du progrès elle-même : un futur d’abondance, où le présent n’avait plus besoin de s’accommoder de quoi que ce soit. <em>« La loi de l’informatique est devenue une loi économique et une loi morale »</em>. La conséquence est qu’on a l’impression de vivre dans un âge d’informatique ubiquitaire, disponible partout et tout le temps, dans des nuages à la puissance de calcul infinis… <a href="http://www.internetactu.net/2008/09/09/est-ce-que-le-deluge-de-donnees-va-rendre-la-methode-scientifique-obsolete/">En 2008, Chris Anderson, proclamait la fin de la théorie</a>, c’est-à-dire que nous n’aurons plus besoin de construire des modèles du monde. L’informatique massive allait produire la vérité depuis des volumes sans précédent de données, le Big Data. Pour Bridle, <em>« la fausse promesse du Big Data est le résultat logique du réductionnisme scientifique : la croyance que des systèmes complexes peuvent être compris en en démantelant les composants et en étudiants ces pièces isolément. »</em></p> | |||
| <p>Mais les grands volumes de données ne produisent pas de la connaissance automatiquement. Dans la recherche pharmacologique par exemple, les dépenses et investissements n’ont jamais été aussi forts alors que les découvertes, elles, n’ont jamais produit aussi peu de nouveaux traitements. On appelle cela la <a href="https://en.wikipedia.org/wiki/Eroom%27s_law">loi d’Eroom</a> : l’exact inverse de la loi de Moore. Le nombre de résultats de recherche chute et ces résultats sont de moins en moins dignes de confiance. Si les publications scientifiques n’ont jamais été aussi volumineuses (au détriment de leur qualité), les rétractions ont augmenté et le nombre de recherches ayant un impact significatif, elles, ont diminué proportionnellement. La science connaît une crise de réplicabilité majeure. Le p-hacking (la tromperie sur les probabilités – la signification statistique que réprésente <a href="https://fr.wikipedia.org/wiki/Valeur_p">la valeur p</a> -, c’est-à-dire le fait de considérer un résultat expérimental comme statistiquement signifiant alors qu’il ne l’est pas) se porte bien. Le séquençage ADN est devenu très rapide. Les bases de données de protéines ont explosé en volume en 25 ans. Le coût pour les utiliser a chuté, les recherches ont explosé… Mais le nombre de nouveaux médicaments lui a périclité. </p> | |||
| <p>Plusieurs facteurs expliquent ce revirement de la loi du progrès. La première est que les choses les plus évidentes à découvrir ont été exploitées. La régulation est également devenue plus exigeante et la société moins tolérante aux risques. Mais le problème principal relève certainement des méthodes désormais employées. Historiquement, la découverte de médicament était le fait de petites équipes de chercheurs qui se concentrait intensément sur de petits groupes de molécules. Mais depuis 20 ans, ces processus ont été largement automatisés, sous la forme de ce qu’on appelle le HTS (<em>High-throughput screening</em> pour <a href="https://fr.wikipedia.org/wiki/Criblage_%C3%A0_haut_d%C3%A9bit">criblage à haut débit</a>) qui consiste en des recherches automatisées de réactions potentielles via de vastes bibliothèques de composants. Le HTS a priorisé le volume sur la profondeur. Ce qui a marché dans d’autres industries a colonisé la recherche pharmaceutique : automatisation, systématisation et mesures… Certains commencent à douter de l’efficacité de ces méthodes et voudraient revenir à l’empirisme humain, au hasard, au bordel, au jeu… À nouveau, <em>« la façon dont nous pensons le monde est façonnée par les outils à notre disposition »</em>. Nos instruments déterminent ce qui peut être fait et donc, ce qui peut être pensé. À mesure que la science est de plus en plus technologisée, tous les domaines de la pensée humaine le sont à leur tour. Les vastes quantités de données ne nous aident qu’à voir les problèmes des vastes quantités de données. </p> | |||
| <h2>Pris au piège de l’interconnexion</h2> | |||
| <p>Les bourses et places de marchés d’antan ont été remplacées par des entrepôts, des data centers, anonymes, dans des banlieues d’affaires impersonnelles. La dérégulation et la numérisation ont transformé en profondeur les marchés financiers. La vitesse des échanges s’est accélérée avec la technologie. Les <a href="https://fr.wikipedia.org/wiki/Transactions_%C3%A0_haute_fr%C3%A9quence">transactions à haute fréquence</a> (HFT, <em>High-frequency trading</em>) reposent sur <a href="https://fr.wikipedia.org/wiki/Latence_(informatique)">la latence</a> et la visibilité. La latence, c’est-à-dire la rapidité d’échange où des millions peuvent s’échanger en quelques millisecondes et la visibilité (sauf pour les non-initiés), c’est-à-dire le fait que les échanges sont visibles de tous les participants, instantanément. Les échanges reposent sur des algorithmes capables de calculer des variations éclair et de masquer les mouvements de fonds. Les échanges sont plus opaques que jamais : ils s’imposent sur des forums privés, les <a href="https://fr.wikipedia.org/wiki/Dark_pool">« dark pools »</a> (en 2015, la <a href="https://fr.wikipedia.org/wiki/Securities_and_Exchange_Commission">SEC</a>, l’organisme américain de réglementation et de contrôle des marchés financiers, estimait que les échanges privés représentaient 1/5e du total des échanges)… Les échanges financiers ont été rendus obscurs et plus inégaux que jamais, rappelle Bridle. Dans son livre, <a href="https://amzn.to/2NaYOur"><em>Flash Boy</em></a>, l’ancien investisseur Michael Lewis décrivait combien ces marchés étaient devenus un système de classe, un terrain de jeu accessible seulement à ceux qui ont les ressources pour y accéder. Le marché, qui était par nature public et démocratique, est devenu fermé et privé. Les constats de l’économiste Thomas Piketty dans <em><a href="https://amzn.to/2wEcrrN">Le Capital au XXIe siècle</a></em> sur la montée des inégalités… montrent à leur tour combien l’idée de progrès s’est renversée. Les économistes ont longtemps défendu l’idée que la croissance réduisait les inégalités. Mais cela ne se fait pas automatiquement, tant s’en faut. Au contraire. Pour James Bridle, <em>« La technologie est devenue un moteur des inégalités »</em>. </p> | |||
| <p>L’automatisation rend les compétences humaines obsolètes et même ceux qui programment les machines ne sont pas épargnés. À mesure que les capacités des machines s’améliorent et s’élargissent, de plus en plus de professions sont assiégées. L’internet et les effets de réseaux renforcent encore ces effets en favorisant des places de marché où le plus fort l’emporte. Pour Bridle, l’une des clefs qui expliquent que les inégalités se renforcent avec la technologie est intrinsèquement liée à l’opacité des systèmes. Comme les robots des entrepôts d’Amazon et ses employés commandés par des commandes vocales émanant de robots, nous sommes en train d’arranger le monde pour rendre les machines toujours plus efficaces, quitte à ce que le monde devienne incompréhensible et inadapté aux humains. Les travailleurs deviennent le carburant des algorithmes, utiles seulement pour leurs capacités à se déplacer et à suivre des ordres. Pour Bridle, les startups et les Gafam signent le retour des <a href="https://fr.wikipedia.org/wiki/Barons_voleurs">barons voleurs</a>, ces tyrans industriels du XIXe siècle. La technologie est venue couvrir d’un voile d’opacité la prédation : l’avidité s’est habillée de la logique inhumaine des machines. Amazon ou Uber cachent derrière des pixels lumineux un système d’exploitation sans faille. Leurs applications sont des télécommandes qui agissent sur des gens, dans le monde réel, avec des effets quasi impossibles à voir pour celui qui appuie sur le bouton. La technologie est mise au service des entreprises et du profit au détriment de tout autre intérêt, comme l’a montré le dieselgate. <em>« L’histoire de l’automatisation n’est pas qu’une histoire de machines qui prennent le travail de travailleurs humains, c’est aussi et avant tout l’histoire d’une concentration du pouvoir en de moins en moins de mains, et une concentration de la compréhension du monde en de moins en moins de têtes. »</em></p> | |||
| <p>La complexité a ajouté un voile d’opacité supplémentaire. Désormais, les programmes de HFT scannent également l’information. En 2013, à 1:07 pm, le compte twitter officiel d’Associated press a été piraté par l’Armée électronique syrienne. Un tweet annonçant deux explosions à la maison blanche et le président Obama blessé a été envoyé à 2 millions d’abonnés. À 1:08 pm le Dow Jones a connu un flash crash : l’index a perdu 150 points avant même que la plupart des abonnés humains au compte d’AP n’aient vu le tweet. </p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/Keep-Calm-and-Hit-Her-T-s-010-300x180.jpg" alt="" class="alignleft size-medium wp-image-32556" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/Keep-Calm-and-Hit-Her-T-s-010-300x180.jpg 300w, http://www.internetactu.net/wp-content/uploads/2018/09/Keep-Calm-and-Hit-Her-T-s-010.jpg 460w" sizes="(max-width: 300px) 100vw, 300px"/>L’interconnexion algorithmique du monde n’en est qu’à ses débuts, estime Bridle. Et les marchés ne sont pas le seul endroit où ces étranges cascades algorithmiques se déroulent. Sur des places de marchés de produits personnalisables, <a href="https://www.theverge.com/tldr/2017/7/10/15946296/amazon-bot-smartphone-cases">des algorithmes créent des milliers de produits automatiquement</a>… <a href="https://www.theguardian.com/technology/2013/mar/02/amazon-withdraws-rape-slogan-shirt">à l’image de slogans pour tee-shirts insultants</a>. Ces produits n’ont bien souvent jamais trouvé d’acheteurs. Ils n’existaient que virtuellement. Reste que ces programmes interreliés ne seront pas demain confinés aux marchés financiers et aux supermarchés en ligne, prédit Bridle. Ils vont entrer dans tous les pans de nos vies quotidiennes. Et générer de nombreux problèmes, <a href="https://www.theregister.co.uk/2017/08/11/lockstate_bricks_smart_locks_with_dumb_firmware_upgrade/">à l’image de ceux relevés autour des serrures de portes électroniques</a> ou des objets connectés. </p> | |||
| <p>À quoi va ressembler demain ? <a href="http://www.epagogix.com/">Epagogix</a> est une startup qui analyse les scénarios de films pour prédire leur succès (selon des critères émotionnels et lucratifs, bien sûr). Ils extraient des données de Netflix, Hulu ou YouTube notamment et produisent des propositions pour alimenter <a href="https://fr.wikipedia.org/wiki/Binge-watching">les binge-watchers</a>… alimentant leur propre paranoïa de blockbusters toujours plus semblables… Au risque de produire un sens toujours plus étroit, un monde toujours plus uniforme à mesure que la puissance computationnelle s’interrelie. </p> | |||
| <p>Pour la sociologue <a href="http://geography.utoronto.ca/profiles/deborah-cowen/">Deborah Cowen</a> (<a href="https://twitter.com/debcowen">@debcowen</a>), nous sommes entrés dans la tyrannie de la <em>techne</em> explique-t-elle dans <em><a href="https://amzn.to/2Q3Xh7V">The Deadly Life of Logistics</a></em> (2014) : l’efficacité est devenu primordiale sur tous les autres objectifs, sur toutes les autres valeurs… </p> | |||
| <h2>L’étrangeté va-t-elle devenir ce qui ressemble le plus à l’intelligence ?</h2> | |||
| <p>Comment une machine apprend-elle avec l’apprentissage automatisé ? Bridle rapporte une histoire pour en montrer les limites. Pour faire fonctionner un système de machine learning, il suffit de fournir à une machine des images. Sur certaines, on distingue un char d’assaut qu’elle doit apprendre à reconnaître. Sur d’autres, il n’y en a pas, et elle doit apprendre qu’il n’y en a pas en comparant ces images aux précédentes. La machine évalue les images selon de multiples couches, comme des angles de compréhension, mais sans avoir aucune compréhension de ce qu’elle analyse. Jusqu’à distinguer les images où il y a char de celles où il n’y en a pas. Vous contrôlez ensuite qu’elle a bien compris en lui fournissant des images sur lesquelles on trouve parfois des chars. Tout se passe bien, elle les reconnaît parfaitement ! Puis vous lui en fournissez encore d’autres, et là, la reconnaissance s’effondre d’un coup ! Que s’est-il passé ? En fait, la machine n’a pas appris à reconnaître les chars d’assaut. Elle a appris à reconnaître un autre élément qui était présent sur les images originelles et les suivantes, comme la présence du soleil du matin, c’est-à-dire le moment où la photo a été prise. </p> | |||
| <p>Pour Bridle, cette histoire est emblématique d’un problème majeur de l’Intelligence artificielle : le fait qu’elle soit fondamentalement différente et insondable. <em>« Nous ne pouvons pas vraiment comprendre ce qu’elle produit, nous pouvons juste ajuster ses résultats »</em>. À l’origine, rappelle-t-il, les premiers travaux sur les réseaux de neurones ont été développés avec le Perceptron mis au point par le laboratoire de recherche de la Navy américaine, conçu par le psychologue Frank Rosenblatt. L’idée originelle du Perceptron reposait sur le connectionnisme : la croyance que l’intelligence était une propriété émergente de la connexion entre les neurones. Cette vision a été attaquée par d’autres chercheurs qui pensaient plutôt que l’intelligence était le produit de la manipulation des symboles, nécessitant des connaissances du monde pour raisonner. Ce débat, entre ces deux courants de l’IA, n’a pas tant porté sur ce que signifiait être intelligent, mais sur ce qui était intelligible de l’intelligence. Il rappelle que l’un des avocats du connectionnisme était <a href="https://fr.wikipedia.org/wiki/Friedrich_Hayek">Friedrich Hayek</a>, le père du néolibéralisme. Pour Bridle, le parallèle entre l’ordre néolibéral du monde (où un marché impartial règne en maître sur les passions humaines) et cette vision du fonctionnement du cerveau qui sépare le monde sensible de sa réalité est signifiant. Pour Hayek, la connaissance est dispersée et distribuée dans le cortex cérébral tout comme elle est distribuée sur le marché entre les individus. Aujourd’hui, le modèle connectionniste règne sur l’IA. Un ordre naturel du monde peut donc émerger spontanément quand les biais humains sont retirés de la production de connaissance. Mais ces affirmations ne sont pas sans poser problème… </p> | |||
| <p>La reconnaissance d’image ou de texte s’est imposé comme le premier terrain de jeu de l’IA, jusqu’à l’excès, à l’image <a href="https://www.wired.com/2016/11/put-away-your-machine-learning-hammer-criminality-is-not-a-nail/">des recherches</a> menées par 2 chercheurs de Shanghai, Xiaolin Wu et Xi Zhang, qui ont entraîné un système pour inférer la criminalité depuis les traits du visage. Cette horrible phrénologie, qui marche dans les pas de Francis Galton et Cesare Lombroso, rappelle combien l’analyse de données est parfois assez proche des pires pseudosciences, <a href="http://www.internetactu.net/a-lire-ailleurs/112768514361/">comme le dénonçait Cathy O’Neil</a> … Autre exemple avec <a href="https://www.how-old.net/">How-Old.net</a> un outil de reconnaissance faciale qui tente de prédire l’âge d’une personne, et qui a été utilisée pour deviner l’âge de migrants arrivants au Royaume-Uni. <a href="https://www.theguardian.com/uk-news/2016/oct/19/how-oldnet-no-real-indicator-of-age-says-microsoft-amid-child-refugee-row">Microsoft, qui a développé cette application, s’est défendu</a> et a dénoncé cette utilisation… comme les 2 chercheurs chinois. <a href="https://arxiv.org/abs/1611.04135">Ceux-ci expliquaient néanmoins dans leur défense</a> que leur système était « sans préjugé » (sic). Comme souvent, on nous explique que la technologie, et plus encore l’apprentissage automatisé, est neutre. Mais <em>« la technologie n’émerge pas de nulle part. Elle est toujours la réification de croyances et de désirs, notamment de ses créateurs. Leurs biais sont encodés dans les machines et les bases de données ou les images que nous prenons du monde. »</em> </p> | |||
| <p>Bridle nous rappelle <a href="http://content.time.com/time/business/article/0,8599,1954643,00.html">l’histoire de Joz Wang</a>, qui s’était rendu compte que son nouvel appareil photo ne reconnaissait pas ceux qui n’étaient pas blancs ou celle de la caméra d’un ordinateur HP qui ne faisait pas le point sur les visages noirs. Mais cela n’est pas propre aux développements les plus récents. <a href="https://www.wallpaper.com/art/the-dark-side-of-photography-broomberg-chanarin-uncover-uncomfortable-truths">Les artistes Adam Broomberg et Oliver Chanarin</a> ont rappelé que des années 50 aux années 80, les pellicules argentiques de Kodak avaient déjà un problème avec les peaux sombres. Les créateurs de ces technologies n’ont pas créé volontairement des machines racistes, bien sûr, mais ces machines ont révélé les inégalités présentes dans notre société. Elles ont révélé que le préjudice racial était profondément encodé dans notre culture. Et tout ce qui en relève le révèle. <em>« Nous ne résoudrons pas les problèmes du présent avec des outils du passé »</em>, conclut Bridle de ces exemples. </p> | |||
| <p>Pour l’artiste <a href="http://www.paglen.com/">Trevor Paglen</a> (<a href="https://twitter.com/trevorpaglen">@trevorpaglen</a>), la montée de l’IA amplifie ces erreurs, car nous utilisons des données du passé pour l’entraîner. Bridle revient également <a href="http://www.internetactu.net/2017/07/26/ou-en-est-la-police-predictive/">sur l’origine des systèmes de police prédictive et leur liaison avec l’étude des tremblements de terre</a>, qui tente de croire que la contagion du crime est semblable aux répliques sismiques. </p> | |||
| <p>Pour lui, le risque est que ces nouveaux modèles produits par les machines, leurs modalités de décision et les conséquences de ces décisions, nous restent incompréhensibles, car produites par des processus cognitifs trop différents des nôtres. Google Translate par exemple, de 2006 jusqu’en 2016 utilisait une technique d’inférence statistique du langage. Plutôt que d’essayer de comprendre comment les langues fonctionnent, le système fonctionnait depuis un vaste corpus de traductions existantes (provenant de traduction de réunions des Nations Unies et du Parlement européen notamment). Son rôle était d’enlever la compréhension de l’équation pour la remplacer par des corrélations basées sur des données. Comme le disait le spécialiste de ces questions chez IBM, Frederick Jelinek : <em>« chaque fois que je vire un linguiste, la performance de mon système de reconnaissance du langage s’améliore ! »</em>. En 2016, Google a commencé à déployer des réseaux de neurones pour faire fonctionner Google Translate, et la qualité des traductions a réellement progressé. Google Translate a développé sa propre carte de connexion entre les mots où les mots sont encodés par leur distance aux autres mots dans une grille de sens qui n’est compréhensible que par l’ordinateur. Cette carte multidimensionnelle suit tant de pistes différentes qu’un esprit humain ne pourrait pas la comprendre. L’apprentissage automatisé tire du sens d’un espace qui nous est invisible et intangible. Est-ce à dire que l’étrangeté est en passe de devenir ce qui nous semble le plus ressembler à l’intelligence ? </p> | |||
| <p>À l’époque de Deep Blue, c’est la force brute de l’ordinateur qui a permis de vaincre Kasparov : la capacité de la machine à évaluer des milliers de combinaisons provenant de millions de parties… Quand AlphaGo a vaincu Lee Sedol, la machine a été capable de faire des mouvements qui ont stupéfié l’assistance, car ils n’avaient jamais été faits. AlphaGo avait été également nourri de millions de parties jouées par des experts du Go, mais la machine avait également joué contre elle-même des millions de parties… Désormais les images de nos appareils photo sont capables de composer depuis des photos, des images qui n’existent pas en les recombinant. <em>« Les algorithmes inventent une mémoire et des images qui n’ont jamais existé »</em>. Les processus d’enregistrements que nous avons mis au point produisent des artefacts qui ne proviennent plus de l’expérience du monde, mais que nous ne pouvons plus distinguer de la réalité. Pour Bridle, le problème n’est pas tant que les machines puissent réécrire la réalité, mais que la réalité, le passé comme le futur, ne puissent plus être correctement racontés. <a href="https://deepdreamgenerator.com/">DeepDream</a> de Google illustre parfaitement cela. L’enjeu n’est pas pour nous de comprendre ce qu’est l’image, mais de nous demander ce que le réseau de neurones veut y voir ? </p> | |||
| <p>Pour Bridle, nous devrions ajouter une 4e loi aux <a href="https://fr.wikipedia.org/wiki/Trois_lois_de_la_robotique">trois lois de la robotique</a> d’Asimov. Les machines intelligentes devraient être capables de s’expliquer aux humains. Ce devrait être une loi première, car éthique. Mais le fait que ce garde-fou ait déjà été brisé laisse peu d’espoir quant au fait que les autres règles le soient à leur tour. <em>« Nous allons devoir affronter un monde où nous ne comprendrons plus nos propres créations et le résultat d’une telle opacité sera toujours et inévitablement violent »</em>. </p> | |||
| <p>Pour Bridle, l’alliance entre l’humain et la machine peut encore fonctionner, comme l’a montré <a href="http://www.internetactu.net/2010/04/06/pdlt-quel-sorte-de-cyborg-voulez-vous-etre/">Garry Kasparov avec les échecs avancés</a>, consistant à ce qu’une IA et qu’un humain jouent ensemble plutôt qu’ils ne s’affrontent. C’est dans la perspective d’associer les talents des humains et des machines, d’associer leurs différences d’une manière coopérative plutôt que compétitive que nous parviendrons à réduire l’opacité computationnelle. La perspective que l’intelligence des machines nous dépasse dans nombre de disciplines est une perspective destructrice. Nous devons trouver la voie d’une éthique de la coopération avec les machines, plutôt qu’un affrontement. </p> | |||
| <h2>Surveillance : nous sommes devenus plus paranoïaques</h2> | |||
| <p>Bridle s’en prend également longuement à la surveillance et notamment à la surveillance d’Etat pour souligner combien elle nous est masquée et continue à l’être, malgré les révélations d’Edward Snowden. Vous pouvez lire n’importe quel e-mail dans le monde d’une personne dont vous avez l’adresse. Vous pouvez regarder le trafic de tout site web. Vous pouvez suivre les mouvements de tout ordinateur portable à travers le monde. Pour Bridle, cela nous a montré qu’il n’y a pas de restriction possible à la capacité de surveillance du réseau. L’échelle et la taille de la surveillance a excédé ce que nous pensions comme étant techniquement possible. Les révélations sur la surveillance ont dépassé notre capacité à vouloir les ignorer. Pourtant, nous n’avons pas réagi. Nous sommes seulement devenus un peu plus paranoïaques. <em>« Tout comme le changement climatique, la surveillance de masse était trop vaste et trop déstabilisatrice pour que la société jette sa tête dedans »</em>. Si les gouvernements ont toujours espionné leur population comme leurs ennemis, leur capacité de surveillance a été radicalement transformée par la puissance de la technologie. <a href="http://www.internetactu.net/2018/06/01/videosurveillance-ou-avons-nous-failli/">La possibilité technique a nourri la nécessité politique</a>. <em>« La surveillance s’est développée parce qu’elle pouvait l’être, pas parce qu’elle est efficace et comme toute autre implémentation de système automatique, parce qu’elle altère la frontière de la responsabilité et permet de faire reposer les reproches sur la machine. »</em> En 2016, le lanceur d’alerte <a href="https://fr.wikipedia.org/wiki/William_Binney">William Binney</a> témoignant devant une commission d’enquête du parlement britannique expliquait que les données collectées par les agences de renseignement étaient à 99 % inutiles. Le volume de données a depuis longtemps débordé l’analyse, rendant impossible le fait de trouver les données pertinentes pour résoudre les menaces spécifiques. Cet avertissement a souvent été répété, sans que ses implications ne soient suivies d’effets. Comme le disait le président Obama : trop d’intelligence est le problème. Notre problème n’est pas tant l’échec de la collecte de l’intelligence que l’échec à intégrer et comprendre l’intelligence que nous avons déjà. Plus d’information ne signifie pas plus de compréhension. Les caméras de surveillance comme la surveillance globale ne font que renforcer la paranoïa sans proposer de solutions pour la résoudre. Les deux sont rétroactives et vengeresses. Au mieux, elles ne servent à arrêter qu’une fois le crime commis, qu’une fois que l’événement est passé et n’aide pas à en comprendre les causes. La lumière permet aux gens de sentir en sécurité, mais ne les rend pas plus en sécurité. Pour Bridle, si la surveillance échoue, c’est aussi parce qu’elle repose et dépend d’images plus que de compréhension et qu’elle repose sur la croyance qu’il suffit d’une justification pour s’imposer. </p> | |||
| <p>En opposition au secret, nous demandons de la transparence, mais elle n’est peut-être pas le bon levier. La NSA et Wikileaks partagent la même vision du monde avec des finalités différentes, rappelle Bridle. Les deux pensent qu’il y a des secrets au coeur du monde qui, s’ils étaient connus, pourraient rendre le monde meilleur. Wikileaks veut la transparence pour tous. La NSA veut la transparence pour elle. Les deux fonctionnent sur une même vision du monde. Wikileaks ne voulait pas devenir le miroir de la NSA, mais voulait briser la machine de surveillance. En 2006, Assange a écrit <a href="https://cryptome.org/0002/ja-conspiracies.pdf">« Conspiracy as Governance » (.pdf)</a>. Pour lui, tout système autoritaire repose sur des conspirations, car leur pouvoir repose sur le secret. <a href="http://www.internetactu.net/2018/03/16/la-transparence-nouvelle-arme-du-capitalisme-de-linformation/">Les leaks minent leur pouvoir</a>, pas par ce qui fuite, mais parce que la peur et la paranoïa dégradent la capacité du système autoritaire à conspirer. Mais les fuites de données ne suffisent pas à remettre en cause ou à abattre l’autorité. Les révélations ne font pas bouger l’opinion, sinon, nous aurions réagi bien avant les révélations de Snowden. Tant que les organisations de surveillance ne changent pas de l’intérieur, ceux qui sont en dehors de ces organisations, comme les lanceurs d’alertes, n’ont pas de capacité d’action. Ils attendent que des fonctionnaires ou que la justice confirment ce qu’ils avancent. Tout comme la disponibilité de vaste capacité de calcul conduit au développement de la surveillance globale, cette logique induit et limite notre manière d’y répondre. La plus petite part d’incertitude l’emporte. La dépendance à la logique du calcul pour saisir la vérité du monde nous laisse dans une position fondamentalement et paradoxalement précaire. La connaissance requiert la surveillance. Mais toute connaissance est réduite alors à qui est connaissable par le calcul. Toute connaissance repose alors sur des formes de surveillance. La logique computationnelle nous refuse toute capacité à penser la situation et à agir rationnellement en absence de certitude. Elle ne permet qu’une action réactive, qui n’est possible seulement après qu’une quantité suffisante d’évidences ait été accumulée et empêche toute action présente, quand on en a le plus besoin. La surveillance et notre complicité sont l’une des caractéristiques les plus fondamentales du nouvel âge sombre, car elle repose sur une vision aveugle : tout est éclairé, mais rien n’est vu ! <em>« Nous sommes désormais convaincu que jeter la lumière sur un sujet est la même chose que le penser et que d’avoir des moyens d’action sur lui »</em>. Mais la lumière du calcul nous dépossède de pouvoir, car elle nous fait crouler sous l’information et nous donne un faux sens de la sécurité. C’est là encore une conséquence de la pensée computationnelle. <em>« Notre vision est devenue universelle, mais notre capacité d’action, elle, s’est réduite plus que jamais. »</em> A l’image du réchauffement climatique, à nouveau, <em>« nous savons de plus en plus de choses sur le monde, mais nous sommes de moins en moins capable d’agir sur lui »</em>. Au final, nous nous sentons plus démunis que jamais. Plutôt que de reconsidérer nos hypothèses, nous nous enfonçons dans la paranoïa et la désintégration sociale. </p> | |||
| <h2>De l’incompréhension entre les hommes quand les machines régulent leurs relations</h2> | |||
| <p>Le monde est devenu trop complexe pour des histoires simples. En fait, <em>« la démultiplication de l’information ne produit pas plus de clarté, mais plus de confusion »</em>. L’un des symptômes de la paranoïa consiste à croire que quelqu’un vous surveille. Mais cette croyance est désormais devenue raisonnable, s’amuse Bridle en évoquant la surveillance d’Etat comme la surveillance des services numériques. Nous sommes entièrement sous contrôle, tant et si bien qu’on peut se demander qui est paranoïaque désormais ? Bridle évoque <a href="https://fr.wikipedia.org/wiki/Th%C3%A9orie_conspirationniste_des_chemtrails">les chemtrails</a>, cette croyance, très populaire sur le net, qui pense que les avions sont utilisés pour contrôler l’atmosphère ou les esprits via des diffuseurs chimiques. Dans notre monde hyperconnecté, des schismes émergent de nos modes de perception de masse. <em>« Nous regardons tous les mêmes cieux, mais nous y voyons des choses différentes »</em>. Et certains y voient une conspiration globale pour contrôler les cerveaux ou pour transformer le climat à des fins néfastes. Si les chemtrails peuvent paraître être un folklore du réseau, force est de constater qu’il s’est répandu. Des questions à ce sujet sont adressées aux Parlements, aux organisations scientifiques, aux médias… Ceux qui adhèrent à ces théories sont multiples et celles-ci ne sont d’ailleurs pas uniques, mais plutôt fractales, multifacettes. Les chemtrails sont même devenus le vortex de bien d’autres théories conspirationnistes. Le journaliste Carey Dunne <a href="https://www.theguardian.com/environment/2017/may/22/california-conspiracy-theorist-farmers-chemtrails">en a même fait le récit</a>. À nouveau, Bridle détaille l’entremêlement entre la vérité et la désinformation. Il souligne qu’en 2017 par exemple, la dernière édition de l’Atlas des nuages international publié par l’organisation météorologique mondiale a ajouté une nouvelle classification à sa liste officielle de nuages : <a href="https://cloudatlas.wmo.int/homogenitus.html">l’homogenitus</a>, plusieurs formes de nuages qui se forment et se développent à la suite de l’activité humaine. Des nuages anthropocéniques en quelque sorte. Effectivement, rappelle-t-il, la combustion du kérosène dans les moteurs d’avions produit de la vapeur d’eau et du dioxyde de carbone. La vapeur d’eau se transforme en petite goutte d’eau et en cristaux de glace. À haute altitude, avec les impuretés du kérosène, des nuages se forment sur le passage des avions. Ce sont les Cirrus Homogenitus, <a href="https://fr.wikipedia.org/wiki/Tra%C3%AEn%C3%A9e_de_condensation">les « Contrails »</a>, les traînées de condensation, qui sont effectivement les résultats de l’action humaine. Ils sont le signe visible de ce que rejettent les moteurs d’avions d’une manière invisible. On estime d’ailleurs qu’ils peuvent affecter le climat, notamment quand ils persistent, pas tant par leur composition chimique que par l’opacité nuageuse qui affecte l’atmosphère… </p> | |||
| <p>Avant on lisait l’avenir dans les haruspices et le vol des oiseaux. Désormais, on les traque en ligne, cherchant des traces de modification du monde dans ce qu’on enregistre dans l’informatique en nuage. Nombre de théories conspirationnistes reposent sur des formes de connaissance folkloriques, produites par des gens qui ne savent pas articuler les formes scientifiques qu’ils peuvent recouvrir de manière acceptable. Les Inuits ont depuis longtemps une connaissance du changement climatique qu’ils décrivent par des changements d’alignement d’étoiles, par des changements dans les vents, par les modifications des parcours des animaux… ou de luminosité de la neige… et par un ensemble de connaissance qui n’ont pas eu de reconnaissance scientifique directe avant que d’autres indices, plus scientifiques, ne les éclaire. </p> | |||
| <p><em>« Les théories conspirationnistes sont le dernier ressort des sans pouvoirs, imaginant ce que serait que d’être puissant »</em>, avance Bridle. Pour le spécialiste de la postmodernité, <a href="https://fr.wikipedia.org/wiki/Fredric_Jameson">Frederic Jameson</a>, les théories conspirationnistes sont <em>« la cartographie cognitive des plus démunis dans un âge postmoderne »</em>. C’est la figure dégradée de la logique par ceux qui ont le moins de capital culturel, une tentative désespérée de se représenter un système qu’ils ne comprennent pas. Encerclé par l’évidence de la complexité, l’individu a recours à un récit simpliste pour tenter de regagner un peu de contrôle sur la situation. À mesure que la technologie augmente et accélère le monde, celui-ci devient plus complexe. Les théories conspirationnistes deviennent alors des réponses, étranges, intriquées et violentes, pour s’en accommoder. </p> | |||
| <p>Avec la désinformation et les fakes news, la paranoïa de notre monde est devenue mainstream. Les nuages faits par l’homme n’ont plus besoin d’être plantés dans l’atmosphère : ils sont insérés comme du code dans les réseaux d’information et transforment notre perception du monde. Pour Bridle, les réseaux ont changé la manière dont nous formons notre culture. </p> | |||
| <p>Bridle rappelle que le premier cas documenté de schizophrénie paranoïaque a été celui de <a href="https://fr.wikipedia.org/wiki/James_Tilly_Matthews">James Tilly Matthews</a> en 1796 qui accusait le parlement britannique de l’avoir soumis à une machine faite de pompe hydraulique et de systèmes magnétiques pour contrôler son esprit. Or rappelle Bridle, à la même époque Lavoisier et Priestley, avaient créés une nouvelle compréhension du monde physique en expliquant les éléments. Les disputes scientifiques étaient très relayées dans les débats. James Matthews semble en avoir tiré sa propre interprétation pour en produire une conspiration. Il en est souvent ainsi. La complexité technique produit ses propres interprétations. Le nombre de gens qui consultent des forums sur la prise de contrôle de l’esprit est plus nombreux que ceux qui reçoivent un traitement pour se guérir de cette paranoïa. Entre le délire et la sous-culture, il y a une différence parfois imperceptible. Toute opposition à ces croyances peut être rejetée comme un moyen de dissimuler la vérité que ces gens expriment ou ressentent. Les microcommunautés conspirationnistes se cooptent, créent leur dynamique, qui se supportent mutuellement et se soutiennent. Ils créent des espaces où leur vision, leur compréhension du monde, leur croyance sont validées et mises en valeur. Ces groupes qui autorenforcent leurs croyances semblent être une caractéristique de la nouvelle obscurité. Notre capacité à décrire le monde résulte des outils que nous avons à notre disposition, et nous avons construit des outils qui renforcent encore ces effets : <em>« un populisme automatisé »</em>, qui donne aux gens ce qu’ils veulent dès qu’ils le souhaitent. </p> | |||
| <p>Ainsi, si vous cherchez de l’information sur les vaccins, vous tomberez invariablement sur de l’information contre les vaccins. Si vous cherchez de l’information sur la rotondité de la terre, vous tomberez inexorablement sur ceux qui pensent qu’elle est plate. Ces opinions divergentes semblent devenir la majorité tant elles sont exprimées et répétées avec force. <em>« Ce qui se passe quand vous désirez en savoir de plus en plus sur le monde entre en collision avec un système qui va continuer à assortir ses réponses à n’importe quelle question, sans résolution »</em>. Vous trouverez toujours quelqu’un pour rejoindre vos points de vue. Et toujours un flux pour les valider. Voici l’âge de la radicalisation algorithmique (<a href="https://www.nytimes.com/2018/03/10/opinion/sunday/youtube-politics-radical.html">à l’image de ce que disait Zeynep Tufekci de YouTube</a>). Les théories conspirationnistes sont devenues la narration dominante. Elles expliquent tout. Dans la zone grise des connaissances, tout prend un sens. Les multiples explications que notre cognition limitée utilise fonctionnent comme un masque sur les demi-vérités du monde. La zone grise permet toutes les approximations et nous empêche, assez confortablement, d’agir avec sens dans le présent. </p> | |||
| <h2>Coincés dans la boucle algorithmique</h2> | |||
| <p>Les vidéos de déballage de paquets cadeaux connaissent un énorme succès sur l’internet. Sur YouTube, vous pouvez passer des heures à en visionner. Certaines ont déjà été vues par des millions de personnes. <a href="https://www.youtube.com/channel/UChGJGhZ9SOOHvBB0Y4DOO_w">Ryan’s Toy Review</a>, spécialisé dans l’ouverture de jouets, est l’une des 6 chaînes les plus populaires de YouTube ! On peut se perdre à regarder ces gens surpris : notre désir à les regarder peut-être alimenté en boucle et sans fin par les systèmes de recommandation algorithmique. Dans son livre, Bridle revient sur la dénonciation des vidéos automatisés pour enfants que l’on trouve sur YouTube et <a href="https://www.nouvelobs.com/rue89/notre-epoque/20171108.OBS7106/peppa-pig-et-le-dentiste-aladdin-decapite-le-flippant-youtube-des-enfants.html">contre lesquels il s’était élevé il y a quelques mois</a> (<a href="https://medium.com/@jamesbridle/something-is-wrong-on-the-internet-c39c471271d2">voir l’article originel</a>). Sur YouTube, ni les algorithmes ni l’audience ne se préoccupent du sens. Tout l’enjeu de la recommandation est de vous montrer le plus de vidéos possibles et de préférence celles qui devraient le plus vous plaire – <a href="http://www.internetactu.net/a-lire-ailleurs/comment-youtube-sest-transforme/">parce qu’elles ont plu au plus grand nombre</a>. </p> | |||
| <p><img src="http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-1024x485.png" alt="" class="aligncenter size-large wp-image-32557" srcset="http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-1024x485.png 1024w, http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-300x142.png 300w, http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle-768x364.png 768w, http://www.internetactu.net/wp-content/uploads/2018/09/youtubebridle.png 1298w" sizes="(max-width: 1024px) 100vw, 1024px"/></p> | |||
| <p>Le problème de cette recommandation automatisée est de fonctionner sur des rapprochements sans signification. Les contenus de confiance, comme ceux produits par des marques ou chaînes officielles, conduisent, via les recommandations automatiques, à des contenus similaires, mais qui ne leur ressemble en rien. C’est le même processus qui est à l’oeuvre sur FB ou Google : le contenu est rapproché de contenus similaires ou proches, mais cette proximité n’est pas de sens, mais est faite de mots clés, d’audiences… Les contenus inappropriés se mêlent ainsi à tous les autres. Peppa Pig, la reine des neiges ou Bob l’éponge mènent à tous les contenus qui en parlent… D’une information médicale sur l’apport de la vaccination vous glissez vers une information contre la vaccination. Les contenus sont agencés en flux sans fin et sans sens par l’automatisation algorithmique et sémantique. Des vidéos sont créés automatiquement par des logiciels pour bénéficier de l’audience des contenus les plus vus. Des bots exploitent les systèmes d’apprentissage automatisés de YouTube en en faisant bénéficier YouTube, permettant de générer plus d’exposition publicitaire et plus de revenus. La complicité de YouTube aux failles de son exploitation est totale, pointe Bridle. Le problème, c’est que des enfants voient les vidéos totalement absurdes générées par des programmes automatisés pour bénéficier des mouvements d’audience de la plateforme, à l’image de chaînes comme <a href="https://www.youtube.com/channel/UC56cowXhoqRWHeqfSJkIQaA">Bounce Patrol</a> ou <a href="https://www.youtube.com/user/videogyan/videos">Video Gyan</a>. C’est une conséquence logique de l’automatisation, comme les caméras racistes ou les produits insultants vendus sur Amazon. Ces produits algorithmiques sont parfaitement adaptés aux algorithmes et à la boucle de revenus qui leur profite autant à eux qu’aux plateformes qui les accueillent. </p> | |||
| <p>Bridle souligne que ce n’est pas que des trolls qui tentent de profiter d’un système ou qu’une conséquence de l’automatisation… <em>« C’est une vaste – et complètement cachée – matrice d’interactions entre des désirs et des récompenses, des technologies et leurs audiences, des <a href="https://fr.wikipedia.org/wiki/Trope">tropes</a> et des masques »</em>. Des technologies peu maîtrisées sont mises au service d’une production industrialisée cauchemardesque. Les failles des algorithmes sont les dernières failles du capitalisme où certains s’infiltrent non pas pour le renverser, mais pour tenter de gratter un peu d’argent que les plus gros systèmes s’accaparent. Au final, des vidéos automatisées finissent par être vues par des enfants. Leurs personnages préférés y font n’importe quoi, parfois suggèrent des scènes de meurtre ou de viols. Ces effets de réseaux causent des problèmes réels. Les algorithmes de YouTube ont besoin d’exploitation pour produire leurs revenus. Derrière leurs aspects séduisants, ils encodent les pires aspects du marché, notamment l’avidité. <em>« La capacité à exploiter l’autre est encodée dans les systèmes que nous construisons »</em>, pointe très justement James Bridle, puisque leur efficacité repose sur leur capacité à extraire de l’argent de nos comportements. Contrairement à ce qu’on croyait, à l’avenir, les IA et les robots ne vont pas tant dominer les usines et nos lieux de travail, mais vont dominer et exploiter nos salles de jeux, nos salons, nos maisons… À défaut d’une solution, <a href="https://www.buzzfeednews.com/article/alexkantrowitz/youtube-kids-is-going-to-release-a-whitelisted-non#.onXOK6ADdx">Google annonçait en avril que l’application YouTube Kids allait devenir « non-algorithmique »</a>… À croire, <a href="http://affordance.typepad.com/mon_weblog/2018/07/desalgorithmisation-du-monde.html">comme le pointait très justement le chercheur Olivier Ertzscheid</a>, que l’algorithimsation n’est pas une solution sans limites. </p> | |||
| <p>Pour Bridle, les humains sont dégradés des deux côtés de l’équation : à la fois dans l’exploitation qui est faite de leur attention et à la fois dans l’exploitation de leur travail. Ces nouvelles formes de violence sont inhérentes aux systèmes numériques et à leur motivation capitaliste. Le système favorise l’abus et ceux qui le produisent sont complices, accuse-t-il. L’architecture qu’ils ont construite pour extraire le maximum de revenus des vidéos en ligne a été hackée par d’autres systèmes pour abuser d’enfants à une échelle massive. Les propriétaires de ces plateformes ont une responsabilité forte dans l’exploitation qu’ils ont mise en place. <em>« C’est profondément un âge sombre quand les structures qu’on a construites pour étendre la sphère de communications sont utilisées contre nous d’une manière systématique et automatique. »</em> </p> | |||
| <p>La crise de cette production de vidéo automatisé que YouTube ne parvient pas à endiguer, comme la crise des effets de l’automatisation que l’on croise de partout, de Google à FB, reflète bien sûr une crise cognitive plus large qui est la conséquence même de nos rapports à ces systèmes automatisés. <em>« Sur les réseaux sociaux, toutes les sources ont l’air d’être les mêmes, les titres qui nous poussent à cliquer combinées avec nos biais cognitifs agissent de la même façon que les algorithmes de YouTube. »</em> Pour Bridle, les fausses nouvelles ne sont pas le produit de l’internet. Elles sont le produit de la cupidité et de la démocratisation de la propagande où tout a chacun peut devenir un propagandiste. Elles sont un amplificateur de la division qui existe déjà dans la société, comme les sites conspirationnistes amplifient la schizophrénie. La confusion est l’ami des charlatans. Le bruit leur accessoire. Selon un rapport britannique réalisé un an après le Breixit, plus de 13 000 comptes automatisés ont été identifiés. S’ils tweetaient pour et contre le Brexit, ils étaient 8 fois plus nombreux à soutenir le départ du Royaume-Uni que le contraire. Sur ces 13 000 comptes effacés par Twitter après le référendum, l’origine de la plupart est restée inconnue. 1/5 e des débats en ligne autour de l’élection américaine de 2016 était automatisée. Pour Bridle, quelque chose ne va plus quand ceux qui participent du débat démocratique n’ont pas à répondre de ce qu’ils font, restent intraçables… Leurs motivations et leur origine demeurent complètement opaques, quand bien même leurs effets sont réels. </p> | |||
| <p>Et les bots se démultiplient… Nous discutons désormais avec des logiciels. On nous invite à nous socialiser avec des systèmes où il devient de plus en plus impossible de socialiser. Bridle souligne que quand il a publié ses recherches sur les vidéos pour enfants automatisés, il a reçu des milliers de messages de gens qui semblaient savoir d’où provenaient ces vidéos. Les spéculations et explications partaient dans tous les sens. Mais ce qu’il y a de commun avec le Brexit, les élections américaines ou les profondeurs de YouTube, c’est que malgré tous les soupçons, il reste impossible de savoir qui fait ça, qu’elles sont leurs motivations, leurs intentions. On peut regarder sans fin ces flux vidéos, on peut parcourir sans fin les murs de mises à jour de statuts ou de tweets… cela ne permet pas de discerner clairement ce qui est généré algorithmiquement ou ce qui est construit délibérément et soigneusement pour générer des revenus publicitaires. On ne peut pas discerner clairement la fiction paranoïaque, l’action d’États, la propagande du spam… Ces confusions servent les manipulateurs quels qu’ils soient bien sûr, mais cela les dépasse aussi. C’est la manière dont le monde est. Personne ne semble réellement décider de son évolution… <em>« Personne ne veut d’un âge sombre, mais nous le construisons quand même et nous allons devoir y vivre. »</em></p> | |||
| <h2>De la violence</h2> | |||
| <p>Pour Eric Schmidt, ancien CEO de Google, rendre les choses visibles les rend meilleurs et la technologie est l’outil qui permet de rendre les choses visibles. Ce point de vue désormais domine, mais il est non seulement faux, il est activement dangereux, estime Bridle. Pour Smith, si chaque habitant du Rwanda avait eu un Smartphone en 1994, le massacre aurait été impossible. Pourtant, Bridle rappelle que nous étions alertés bien avant ce génocide des risques qui pesaient sur la région. Comme on l’a vu, la surveillance ne permet pas d’agir rétroactivement, pas plus que d’agir au moment présent, elle permet seulement de constater ce qu’il s’est passé. <em>« Le problème n’est pas ce que l’on sait, mais ce que l’on fait »</em>. Pire, pour les chercheurs Jan Pierskalla et Florian Hollenbach, en Afrique en tout cas, <a href="https://www.jstor.org/stable/43654011">l’accroissement de la couverture téléphonique est plutôt lié à de plus hauts niveaux de violence</a>. Ni les images satellites ni les smartphones ne créent de la violence bien sûr. Mais le fait de croire que la technologie est neutre nous maintient dans l’erreur. <em>« L’information est complètement et inextricablement liée à la violence, et l’armement de l’information est accéléré par les technologies qui prétendent renforcer le contrôle sur le monde »</em>. </p> | |||
| <p>Si <em>« les données sont le nouvel or noir »</em> (comme l’estimait Clive Humby, un mathématicien britannique en 2006, architecte du programme de fidélité de Tesco), cette comparaison pourrait être acceptable parce que la donnée ne peut pas être utilisée sans être raffinée. Le pétrole doit être transformé pour créer de la valeur, tout comme la donnée doit être analysée. Mais l’analogie de l’exploitation est devenue celle de la spéculation. La donnée est devenue l’or noir sur laquelle tout le monde spécule. Notre soif de données comme notre soit de pétrole est et demeure impérialiste et colonialiste et profondément imbriquée dans l’exploitation capitaliste. La donnée est utilisée pour classer les sujets de l’intention impérialiste, tout comme les sujets des empires étaient forcés à suivre les règles de leurs maîtres. Les Empires d’antan ont transformé leur territoire pour continuer leurs opérations à un niveau infrastructurel. Ils maintiennent leur pouvoir dans les réseaux. Les régimes conduits par les données répètent les politiques racistes, sexistes et oppressives de leurs prédécesseurs parce que leurs biais ont été encodés à leurs racines. L’extraction et le raffinage du pétrole polluent l’air et le sol, tout comme l’extraction et le traitement des données polluent et empoisonnent nos relations sociales. Ils imposent la pensée computationnelle entre nous, renforcent la division de la société du fait de classification bâtarde, du populisme et accélèrent les inégalités. Les données soutiennent et nourrissent des relations de pouvoirs inégalitaires : dans la plupart de nos interactions, la donnée est quelque chose qui semble librement donné, mais qui est en fait extraite sous la contrainte, sans notre consentement explicite. L’extraction est opérée par certains au détriment du plus grand nombre. Et l’exploitation des données risque de continuer indéfiniment, quels que soient les dommages qu’elle cause. </p> | |||
| <p>Exploiter plus de données pour construire de meilleurs systèmes est une erreur. Cette méthode ne parviendra pas à prendre en compte la complexité humaine ni à la résoudre. Le développement de l’information n’a pas conduit à une meilleure compréhension du monde, mais au développement de points de vue alternatifs et concurrents. Nous devons changer nos façons de penser comme nous y invitait Lovecraft. Nous ne survivrons pas plus à l’information brute qu’à la bombe atomique. Le nouvel âge sombre est un lieu où le futur devient radicalement incertain et où le passé devient irrévocablement contesté. Mais c’est le présent dans lequel nous devons vivre et penser. Nous ne sommes pas sans pouvoir ni capacités. Mais pour cela nous devons nous défaire des promesses illusoires de la pensée computationnelle. Penser le monde autre, c’est ce à quoi nous invite James Bridle dans le nouvel âge sombre. </p> | |||
| <p/><center>*</center><p> | |||
| Ce compte-rendu de lecture excessif, exhaustif, (trop) complet… se veut le reflet de l’importance qu’il me semble devoir apporter à ce livre. James Bridle ne simplifie rien. Il malaxe une pensée complexe, retors. On ne peut pas la réduire à une technocritique facile, peu instruite ou peu informée, comme c’est souvent le cas de gens qui ne sont pas très spécialistes de ces sujets, qui font des raccourcis rapides pour rejeter toute faute sur l’internet ou sur le monde contemporain. Au contraire même. Brille déroule une pensée complexe. Il appuie bien souvent exactement là où la société augmentée du numérique irrite. | |||
| </p><p>Reste à savoir si cet âge sombre des technologies est vraiment notre avenir. <a href="https://fr.wikipedia.org/wiki/%C3%82ge_sombre">L’âge sombre du Moyen Âge n’a jamais vraiment existé ailleurs que dans les lacunes des historiens</a>. On peut douter également de cette nouvelle obscurité ou regretter le titre faussement prophétique. Reste que la complexité et l’intrication du monde que décrit James Bridle, montrent combien il nous faut, plus que jamais, nous défaire justement d’une vision simple et manichéenne de la technologie. </p> | |||
| <p>On voudrait que les points que soulève Bridle ne soient pas aussi convaincants. On voudrait qu’il se trompe. On voudrait croire que contrairement à ce qu’il avance, les biais de nos systèmes soient réparables. Qu’on puisse y faire quelque chose. Mais pour cela, il a au moins raison quelque part. Il va nous falloir abandonner notre foi dans la technologie. La limiter. Décider de là où elle est nécessaire ou utile pour agir et de là où nous devons nous en passer. De la limiter. De l’utiliser autrement. Nous risquons bien d’y être contraints par le déchainement du monde et l’épuisement des ressources. Et pour cela, nous devons certainement apprendre à découpler la technologie des intérêts qu’elle sert. </p> | |||
| <p>Hubert Guillaud</p> | |||
+ 535
- 0
cache/0889a4c1768f1b7aad118ac532db4ee0/index.html
View File
| @@ -0,0 +1,535 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Manuel de (Sur)vie en milieu naturel (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://blog.davidmanise.com/manuel-de-survie-en-milieu-naturel/"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Manuel de (Sur)vie en milieu naturel (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://blog.davidmanise.com/manuel-de-survie-en-milieu-naturel/">Source originale du contenu</a></h3> | |||
| <p>Enfin, il est sorti :)</p> | |||
| <p><a href="http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin.jpg"><img class="alignleft size-full wp-image-689" src="http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin.jpg" alt="CouvBouquin" srcset="http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin.jpg 1000w, http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin-300x202.jpg 300w, http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin-768x518.jpg 768w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"/></a></p> | |||
| <p> </p> | |||
| <p>Manuel de (sur)vie en milieu naturel…<br/> Editions Amphora<br/> 224 pages<br/> 22,50</p> | |||
| <p>Disponible en librairies, grandes surfaces spécialisées, etc.</p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://blog.davidmanise.com/manuel-de-survie-en-milieu-naturel/">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 5
- 0
cache/0889a4c1768f1b7aad118ac532db4ee0/index.md
View File
| @@ -0,0 +1,5 @@ | |||
| title: Manuel de (Sur)vie en milieu naturel | |||
| url: http://blog.davidmanise.com/manuel-de-survie-en-milieu-naturel/ | |||
| hash_url: 0889a4c1768f1b7aad118ac532db4ee0 | |||
| <p>Enfin, il est sorti :)</p><p><a href="http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin.jpg"><img class="alignleft size-full wp-image-689" src="http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin.jpg" alt="CouvBouquin" srcset="http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin.jpg 1000w, http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin-300x202.jpg 300w, http://blog.davidmanise.com/wp-content/uploads/2016/05/CouvBouquin-768x518.jpg 768w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"/></a></p><p> </p><p>Manuel de (sur)vie en milieu naturel…<br/> Editions Amphora<br/> 224 pages<br/> 22,50</p><p>Disponible en librairies, grandes surfaces spécialisées, etc.</p> | |||
+ 529
- 0
cache/08d853afa3c1d23a19b5bdde8373fe54/index.html
File diff suppressed because it is too large
View File
+ 5
- 0
cache/08d853afa3c1d23a19b5bdde8373fe54/index.md
File diff suppressed because it is too large
View File
+ 572
- 0
cache/08fa7334a584aeaab8ffedfa9c4e7d73/index.html
View File
| @@ -0,0 +1,572 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang=fr> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset=utf-8> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Trying to follow what is going on in Syria and why? This comic will get you there in 5 minutes. (archive) — David Larlet</title> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png"> | |||
| <link rel="manifest" href="/manifest.json"> | |||
| <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5"> | |||
| <link rel="shortcut icon" href="/static/david/icons/favicon.ico"> | |||
| <meta name="apple-mobile-web-app-title" content="David Larlet"> | |||
| <meta name="application-name" content="David Larlet"> | |||
| <meta name="msapplication-TileColor" content="#da532c"> | |||
| <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- That good ol' feed, subscribe :p. --> | |||
| <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/"> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="http://www.upworthy.com/trying-to-follow-what-is-going-on-in-syria-and-why-this-comic-will-get-you-there-in-5-minutes"> | |||
| <style> | |||
| /* http://meyerweb.com/eric/tools/css/reset/ */ | |||
| html, body, div, span, | |||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |||
| a, abbr, address, big, cite, code, | |||
| del, dfn, em, img, ins, | |||
| small, strike, strong, tt, var, | |||
| dl, dt, dd, ol, ul, li, | |||
| fieldset, form, label, legend, | |||
| table, caption, tbody, tfoot, thead, tr, th, td, | |||
| article, aside, canvas, details, embed, | |||
| figure, figcaption, footer, header, hgroup, | |||
| menu, nav, output, ruby, section, summary, | |||
| time, mark, audio, video { | |||
| margin: 0; | |||
| padding: 0; | |||
| border: 0; | |||
| font-size: 100%; | |||
| font: inherit; | |||
| vertical-align: baseline; | |||
| } | |||
| /* HTML5 display-role reset for older browsers */ | |||
| article, aside, details, figcaption, figure, | |||
| footer, header, hgroup, menu, nav, section { display: block; } | |||
| body { line-height: 1; } | |||
| blockquote, q { quotes: none; } | |||
| blockquote:before, blockquote:after, | |||
| q:before, q:after { | |||
| content: ''; | |||
| content: none; | |||
| } | |||
| table { | |||
| border-collapse: collapse; | |||
| border-spacing: 0; | |||
| } | |||
| /* http://practicaltypography.com/equity.html */ | |||
| /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */ | |||
| /* https://www.filamentgroup.com/lab/js-web-fonts.html */ | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: italic; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'EquityTextB'; | |||
| src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff'); | |||
| font-weight: 700; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| @font-face { | |||
| font-family: 'ConcourseT3'; | |||
| src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'), | |||
| url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff'); | |||
| font-weight: 300; | |||
| font-style: normal; | |||
| font-display: swap; | |||
| } | |||
| /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */ | |||
| body { | |||
| /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */ | |||
| font-family: "EquityTextB", Palatino, serif; | |||
| background-color: #f0f0ea; | |||
| color: #07486c; | |||
| font-kerning: normal; | |||
| -moz-osx-font-smoothing: grayscale; | |||
| -webkit-font-smoothing: subpixel-antialiased; | |||
| text-rendering: optimizeLegibility; | |||
| font-variant-ligatures: common-ligatures contextual; | |||
| font-feature-settings: "kern", "liga", "clig", "calt"; | |||
| } | |||
| pre, code, kbd, samp, var, tt { | |||
| font-family: 'TriplicateT4c', monospace; | |||
| } | |||
| em { | |||
| font-style: italic; | |||
| color: #323a45; | |||
| } | |||
| strong { | |||
| font-weight: bold; | |||
| color: black; | |||
| } | |||
| nav { | |||
| background-color: #323a45; | |||
| color: #f0f0ea; | |||
| display: flex; | |||
| justify-content: space-around; | |||
| padding: 1rem .5rem; | |||
| } | |||
| nav:last-child { | |||
| border-bottom: 1vh solid #2d7474; | |||
| } | |||
| nav a { | |||
| color: #f0f0ea; | |||
| } | |||
| nav abbr { | |||
| border-bottom: 1px dotted white; | |||
| } | |||
| h1 { | |||
| border-top: 1vh solid #2d7474; | |||
| border-bottom: .2vh dotted #2d7474; | |||
| background-color: #e3e1e1; | |||
| color: #323a45; | |||
| text-align: center; | |||
| padding: 5rem 0 4rem 0; | |||
| width: 100%; | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| } | |||
| h1.single { | |||
| padding-bottom: 10rem; | |||
| } | |||
| h1 span { | |||
| position: absolute; | |||
| top: 1vh; | |||
| left: 20%; | |||
| line-height: 0; | |||
| } | |||
| h1 span a { | |||
| line-height: 1.7; | |||
| padding: 1rem 1.2rem .6rem 1.2rem; | |||
| border-radius: 0 0 6% 6%; | |||
| background: #2d7474; | |||
| font-size: 1.3rem; | |||
| color: white; | |||
| text-decoration: none; | |||
| } | |||
| h2 { | |||
| margin: 4rem 0 1rem; | |||
| border-top: .2vh solid #2d7474; | |||
| padding-top: 1vh; | |||
| } | |||
| h3 { | |||
| text-align: center; | |||
| margin: 3rem 0 .75em; | |||
| } | |||
| hr { | |||
| height: .4rem; | |||
| width: .4rem; | |||
| border-radius: .4rem; | |||
| background: #07486c; | |||
| margin: 2.5rem auto; | |||
| } | |||
| time { | |||
| display: bloc; | |||
| margin-left: 0 !important; | |||
| } | |||
| ul, ol { | |||
| margin: 2rem; | |||
| } | |||
| ul { | |||
| list-style-type: square; | |||
| } | |||
| a { | |||
| text-decoration-skip-ink: auto; | |||
| text-decoration-thickness: 0.05em; | |||
| text-underline-offset: 0.09em; | |||
| } | |||
| article { | |||
| max-width: 50rem; | |||
| display: flex; | |||
| flex-direction: column; | |||
| margin: 2rem auto; | |||
| } | |||
| article.single { | |||
| border-top: .2vh dotted #2d7474; | |||
| margin: -6rem auto 1rem auto; | |||
| background: #f0f0ea; | |||
| padding: 2rem; | |||
| } | |||
| article p:last-child { | |||
| margin-bottom: 1rem; | |||
| } | |||
| p { | |||
| padding: 0 .5rem; | |||
| margin-left: 3rem; | |||
| } | |||
| p + p, | |||
| figure + p { | |||
| margin-top: 2rem; | |||
| } | |||
| blockquote { | |||
| background-color: #e3e1e1; | |||
| border-left: .5vw solid #2d7474; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| padding: 1rem; | |||
| margin: 1.5rem; | |||
| } | |||
| blockquote cite { | |||
| font-style: italic; | |||
| } | |||
| blockquote p { | |||
| margin-left: 0; | |||
| } | |||
| figure { | |||
| border-top: .2vh solid #2d7474; | |||
| background-color: #e3e1e1; | |||
| text-align: center; | |||
| padding: 1.5rem 0; | |||
| margin: 1rem 0 0; | |||
| font-size: 1.5rem; | |||
| width: 100%; | |||
| } | |||
| figure img { | |||
| max-width: 250px; | |||
| max-height: 250px; | |||
| border: .5vw solid #323a45; | |||
| padding: 1px; | |||
| } | |||
| figcaption { | |||
| padding: 1rem; | |||
| line-height: 1.4; | |||
| } | |||
| aside { | |||
| display: flex; | |||
| flex-direction: column; | |||
| background-color: #e3e1e1; | |||
| padding: 1rem 0; | |||
| border-bottom: .2vh solid #07486c; | |||
| } | |||
| aside p { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| /* https://fvsch.com/code/css-locks/ */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: 1rem; | |||
| line-height: calc( 1.5em + 0.2 * 1rem ); | |||
| } | |||
| h1 { | |||
| font-size: 1.9rem; | |||
| line-height: calc( 1.2em + 0.2 * 1rem ); | |||
| } | |||
| h2 { | |||
| font-size: 1.6rem; | |||
| line-height: calc( 1.3em + 0.2 * 1rem ); | |||
| } | |||
| h3 { | |||
| font-size: 1.35rem; | |||
| line-height: calc( 1.4em + 0.2 * 1rem ); | |||
| } | |||
| @media (min-width: 20em) { | |||
| /* The (100vw - 20rem) / (50 - 20) part | |||
| resolves to 0-1rem, depending on the | |||
| viewport width (between 20em and 50em). */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| margin-left: 0; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) ); | |||
| line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) ); | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| /* The right part of the addition *must* be a | |||
| rem value. In this example we *could* change | |||
| the whole declaration to font-size:2.5rem, | |||
| but if our baseline value was not expressed | |||
| in rem we would have to use calc. */ | |||
| p, li, pre, code, kbd, samp, var, tt, time, details, figcaption { | |||
| font-size: calc( 1rem + .6 * 1rem ); | |||
| line-height: 1.5em; | |||
| } | |||
| p, li, pre, details { | |||
| margin-left: 3rem; | |||
| } | |||
| h1 { | |||
| font-size: calc( 1.9rem + 1.5 * 1rem ); | |||
| line-height: 1.2em; | |||
| } | |||
| h2 { | |||
| font-size: calc( 1.5rem + 1.5 * 1rem ); | |||
| line-height: 1.3em; | |||
| } | |||
| h3 { | |||
| font-size: calc( 1.35rem + 1.5 * 1rem ); | |||
| line-height: 1.4em; | |||
| } | |||
| figure img { | |||
| max-width: 500px; | |||
| max-height: 500px; | |||
| } | |||
| } | |||
| figure.unsquared { | |||
| margin-bottom: 1.5rem; | |||
| } | |||
| figure.unsquared img { | |||
| height: inherit; | |||
| } | |||
| @media print { | |||
| body { font-size: 100%; } | |||
| a:after { content: " (" attr(href) ")"; } | |||
| a, a:link, a:visited, a:after { | |||
| text-decoration: underline; | |||
| text-shadow: none !important; | |||
| background-image: none !important; | |||
| background: white; | |||
| color: black; | |||
| } | |||
| abbr[title] { border-bottom: 0; } | |||
| abbr[title]:after { content: " (" attr(title) ")"; } | |||
| img { page-break-inside: avoid; } | |||
| @page { margin: 2cm .5cm; } | |||
| h1, h2, h3 { page-break-after: avoid; } | |||
| p3 { orphans: 3; widows: 3; } | |||
| img { | |||
| max-width: 250px !important; | |||
| max-height: 250px !important; | |||
| } | |||
| nav, aside { display: none; } | |||
| } | |||
| ul.with_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_columns { | |||
| column-count: 3; | |||
| } | |||
| } | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| @media (min-width: 20em) { | |||
| ul.with_two_columns { | |||
| column-count: 1; | |||
| } | |||
| } | |||
| @media (min-width: 50em) { | |||
| ul.with_two_columns { | |||
| column-count: 2; | |||
| } | |||
| } | |||
| .gallery { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: space-around; | |||
| } | |||
| .gallery figure img { | |||
| margin-left: 1rem; | |||
| margin-right: 1rem; | |||
| } | |||
| .gallery figure figcaption { | |||
| font-family: 'ConcourseT3' | |||
| } | |||
| footer { | |||
| font-family: 'ConcourseT3'; | |||
| display: flex; | |||
| flex-direction: column; | |||
| border-top: 3px solid white; | |||
| padding: 4rem 0; | |||
| background-color: #07486c; | |||
| color: white; | |||
| } | |||
| footer > * { | |||
| max-width: 50rem; | |||
| margin: 0 auto; | |||
| } | |||
| footer a { | |||
| color: #f1c40f; | |||
| } | |||
| footer .avatar { | |||
| width: 200px; | |||
| height: 200px; | |||
| border-radius: 50%; | |||
| float: left; | |||
| -webkit-shape-outside: circle(); | |||
| shape-outside: circle(); | |||
| margin-right: 2rem; | |||
| padding: 2px 5px 5px 2px; | |||
| background: white; | |||
| border-left: 1px solid #f1c40f; | |||
| border-top: 1px solid #f1c40f; | |||
| border-right: 5px solid #f1c40f; | |||
| border-bottom: 5px solid #f1c40f; | |||
| } | |||
| </style> | |||
| <h1> | |||
| <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span> | |||
| Trying to follow what is going on in Syria and why? This comic will get you there in 5 minutes. (archive) | |||
| <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time> | |||
| </h1> | |||
| <section> | |||
| <article> | |||
| <h3><a href="http://www.upworthy.com/trying-to-follow-what-is-going-on-in-syria-and-why-this-comic-will-get-you-there-in-5-minutes">Source originale du contenu</a></h3> | |||
| <p> | |||
| <img src="https://upw-prod-images.global.ssl.fastly.net/nugget/5397386a7e590b491e000044/attachments/1280-867cf2ed607de89e93f50baf283e60f1.gif?ixlib=rb-0.3.5&fm=png&s=d196af392289cb5cb1cfcd537cd871b5" class="imgix-gif-load" data-src="https://upw-prod-images.global.ssl.fastly.net/nugget/5397386a7e590b491e000044/attachments/1280-867cf2ed607de89e93f50baf283e60f1.gif?ixlib=rb-0.3.5&fit=max&s=192f6b2948fdb77ef10aada28318c1ba"/> | |||
| </p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/5397388d7e590b449b000051/attachments/1280-18d8a111e5dc93dd887b6750397f5bf2.jpg"/></p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/539738b5b1a132c5e9000045/attachments/1280-ffe11c006f5e6ca23a26a5decbd441c1.jpg"/></p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/539738d9b1a132c60e000055/attachments/1280-0bdaac4cffed799550e82bb46d065224.jpg"/></p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/539739977e590b66c4000048/attachments/1280-100bdb98986fb2cb34952dfe35113c87.jpg"/></p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/539739b97e590b449b000052/attachments/1280-694f2c4c8aa1026a4d091ef0dbcb6505.jpg"/></p> | |||
| <p> | |||
| <img src="https://upw-prod-images.global.ssl.fastly.net/nugget/539739e6b1a13254ea000032/attachments/1280-954d98e0cfcb16d9881353850e299e53.gif?ixlib=rb-0.3.5&fm=png&s=03674bffd2f465105a0b93c32aa123a3" class="imgix-gif-load" data-src="https://upw-prod-images.global.ssl.fastly.net/nugget/539739e6b1a13254ea000032/attachments/1280-954d98e0cfcb16d9881353850e299e53.gif?ixlib=rb-0.3.5&fit=max&s=726d7c094b411e962d5038d8fbc65b22"/> | |||
| </p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/53973a0a7e590b05ea000049/attachments/1280-a36e8e1f7841d9e24121518b53fc52d1.jpg"/></p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/53973a1eb1a13267dc000037/attachments/1280-89662fc6259513ab36d1d41b8107ca15.jpg"/></p> | |||
| <p> | |||
| <img src="//upw-prod-images.global.ssl.fastly.net/nugget/53973a3fb1a13254ea000033/attachments/1280-8968d9fbe2d5888559219e0848abc8b0.jpg"/></p> | |||
| <p><img src="//upw-prod-images.global.ssl.fastly.net/nugget/53973a82b1a132c60e000056/attachments/1280-3de033fa77fdef29daf2b9bfb0f4ca98.jpg"/></p> | |||
| <p><img src="//upw-prod-images.global.ssl.fastly.net/nugget/53973abdb1a132f7d0000033/attachments/1280-0d188766652fbe0a859296a51c87bfbc.jpg"/></p> | |||
| <p> <img src="https://upw-prod-images.global.ssl.fastly.net/nugget/53973afc7e590b491e000049/attachments/1280-22dc7e9fd4466f195d752a040f5620bd.gif?ixlib=rb-0.3.5&fm=png&s=db8a481d34b6ce4ec69447c253aae1f6" class="imgix-gif-load" data-src="https://upw-prod-images.global.ssl.fastly.net/nugget/53973afc7e590b491e000049/attachments/1280-22dc7e9fd4466f195d752a040f5620bd.gif?ixlib=rb-0.3.5&fit=max&s=a87c83856b40159217c5b96a8c7f2b5d"/> | |||
| </p> | |||
| <p>That warning has become a global alert. Since the uprising against Assad in March 2011, <a href="http://www.bbc.com/news/world-middle-east-34140403" target="_blank">over 240,000 people</a> have been killed, 4 million Syrians have fled their country, and over 7 million have been displaced. </p> | |||
| <p>The headlines are full of the <a href="https://www.washingtonpost.com/news/worldviews/wp/2015/09/02/a-dead-baby-becomes-the-most-tragic-symbol-yet-of-the-mediterranean-refugee-crisis/" target="_blank">heartbreaking stories</a> of these refugees — including young children — who have died trying to reach safety in other countries. The story of these refugees is deeply tied to the effects of climate change. </p> | |||
| <p>"<span class="s2">We are experiencing a surprising uptick in global insecurity ... partially due to our inability to manage climate stress." That's how Columbia University professor Marc Levy (who also does studies for the U.S. government) <a href="http://www.reuters.com/article/2015/08/26/us-climatechange-security-aid-idUSKCN0QV0ER20150826" target="_blank">summed it up</a>. </span></p> | |||
| <p>What's happening in Syria and across Europe is part of a larger story that affects us all. </p> | |||
| </article> | |||
| </section> | |||
| <nav id="jumpto"> | |||
| <p> | |||
| <a href="/david/blog/">Accueil du blog</a> | | |||
| <a href="http://www.upworthy.com/trying-to-follow-what-is-going-on-in-syria-and-why-this-comic-will-get-you-there-in-5-minutes">Source originale</a> | | |||
| <a href="/david/stream/2019/">Accueil du flux</a> | |||
| </p> | |||
| </nav> | |||
| <footer> | |||
| <div> | |||
| <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200"> | |||
| <p> | |||
| Bonjour/Hi! | |||
| Je suis <a href="/david/" title="Profil public">David Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br> | |||
| 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>). | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Voici quelques articles choisis : | |||
| <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>, | |||
| <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>, | |||
| <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>, | |||
| <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>, | |||
| <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>, | |||
| <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>, | |||
| <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>, | |||
| <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>, | |||
| <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>, | |||
| <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>, | |||
| <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>, | |||
| <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>, | |||
| <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>, | |||
| <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>, | |||
| <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>, | |||
| et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a> | |||
| </p> | |||
| <p> | |||
| 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>. | |||
| </p> | |||
| <p> | |||
| Je ne traque pas ta navigation mais mon | |||
| <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr> | |||
| conserve des logs d’accès. | |||
| </p> | |||
| </div> | |||
| </footer> | |||
| <script type="text/javascript"> | |||
| ;(_ => { | |||
| const jumper = document.getElementById('jumper') | |||
| jumper.addEventListener('click', e => { | |||
| e.preventDefault() | |||
| const anchor = e.target.getAttribute('href') | |||
| const targetEl = document.getElementById(anchor.substring(1)) | |||
| targetEl.scrollIntoView({behavior: 'smooth'}) | |||
| }) | |||
| })() | |||
| </script> | |||
+ 0
- 0
cache/08fa7334a584aeaab8ffedfa9c4e7d73/index.md
View File
Some files were not shown because too many files changed in this diff
Loading…