A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 33KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Take the Power Back (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://ia.net/topics/take-the-power-back/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Take the Power Back (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://ia.net/topics/take-the-power-back/">Source originale du contenu</a></h3>
  445. <figure class="text__image-full-width"><img src="http://ia.net/wp-content/uploads/2018/02/semeuse_autographe_o.roty_smaller.png" alt="La Semeuse"/></figure>
  446. <p><strong>You may have heard that the best way to deal with the “information overload” is to switch off your devices. To take a break from the Internet. Go for a run. Roll out the Yoga mat. Read a book. Talk to your friends. Switching off is good advice. But eventually, you’ll be back. How about changing? Changing from passive, to active. From scroll to search, from react to rethink, from like and retweet to write and link.</strong></p>
  447. <p>One of the first lessons you learn as a young traveler is when you go to a faraway country: avoid the people that call you on the street. “Massage?” “Hungry?” “Need a guide?” Only noobs follow the hustlers. You find a quiet spot and research where to go. Then you go there and then go further. Same thing when you travel on the Web. Don’t get lured in. Find a quiet spot and research and then go there. And then go further.</p>
  448. <p>Relevant things are not pushed at us. They are not new or breaking and easily forgotten. Meaningful insights are found, and they are remembered. They can be years old but they’re never yesterday’s new, they are why-didn’t-I-know-that-already kind of insights. And they are worth re-reading. Things pushed in our stream through an algorithm tailored to our weakness are the digital equivalent of the calls that try to lure you in when you walking down a street in Bangkok. Want a Medium Massage?</p>
  449. <h2>What happened to blogging?</h2>
  450. <p>Blogging was always a bit uncool. Lots of people claim that they invented it and everyone has their indisputable definition. The common one is that blog comes from weB-LOG. The first time I heard of blogs I remember that they were explained as “b-log”, meaning “browsing log”—a list of sites we browsed. After listing the browsed sites, b-loggers commented on what they had read and uploaded that list to their personal site. The logs and comments were again browsed and logged and commented on by others. Like Chinese Whispers. Or like Twitter. Or like a Virus. Or like human communication translated to the screen.</p>
  451. <p>As these meta-comments grew in their meta potency, blogs became more than the sum of their comments. Blogs slowly turned into everyone’s personal interactive newsfeed. With the help of RSS, everybody could put together their own news, composed of their favorite independent writers… by 2005, everything you published on a site was called blogging.</p>
  452. <p>Self-publishing was perceived as a radical concept at the time. Corporations were worried. “We can’t control market communication.” PR companies were confused. “How can we use this to shape the narrative.” Politicians were scared. “So much public opinion!” Journalists felt safe but wondered what would happen “if everyone can just write what they think.” Bloggers thought that they were oiling the hinge of a turning point in human history. No one could have foreseen that in a couple of years this cosm of private sites would implode into five commercial black holes and turn the Web into the opposite of what it promised to be.</p>
  453. <p>With the help of Facebook, Google, trolls, AI, bot farms, click farms, persona software, blind hate, cold propaganda, hot ideology and good old greed the tables have been turned. Philosophically speaking, Social Media is a mental prison where Facebook exists to make us believe that Google is still <em>open</em>. (<a href="http://ampletter.org">It</a> <a href="https://ethanmarcotte.com/wrote/ampersand/">is</a> <a href="https://adactio.com/journal/12011">not</a>.)</p>
  454. <blockquote><p>
  455. Disneyland is there to conceal the fact that it is the “real” country, all of “real” America, which is Disneyland (just as prisons are there to conceal the fact that it is the social in its entirety, in its banal omnipresence, which is carceral). Disneyland is presented as imaginary in order to make us believe that the rest is real, when in fact all of Los Angeles and the America surrounding it are no longer real, but of the order of the hyperreal and of simulation. It is no longer a question of a false representation of reality (ideology), but of concealing the fact that the real is no longer real, and thus of saving the reality principle. –Jean Baudrillard, <a href="https://web.stanford.edu/class/history34q/readings/Baudrillard/Baudrillard_Simulacra.html">Simulacrum and Simulacra</a>
  456. </p></blockquote>
  457. <p>In a bit more than ten years, open became closed, blog became PR, hoodie became suit and Ping Pong turned into golf. That’s how revolutions work. Re-volutions tend to lead back to where they started. The French revolution started with the head of the King rolling and ended with a new Caesar tearing the crown out of the Popes own hands. The Industrial Revolution, supposedly making our lives easier, lead into one of the most exploitative centuries of human History before catalyzing an apocalyptic War machine in the 20th and boiling the planet in the 21st century. The Russian revolution started with the hope of giving power to the people and installed to one of the bloodiest Czars they could imagine. The Chinese revolution was supposed to end the age of Empires and opened the palace doors one of the most tyrannical Emperors in Human history. To top it all, capitalists start praising communist <a href="https://www.cnbc.com/2018/01/18/sequoia-vc-mike-moritz-praises-china-tech-work-ethic-joins-sam-altman.html">China as a role-model for the West</a>.</p>
  458. <p>At first, the word “blog” didn’t sound like much of a revolution. It sounded cheap, dumb and weak. Blog, blob, flop… It still sounds a bit self-made, though the World’s top ten consulting companies now all run their own blogs. When you hear “blog” these days, it has the charm of a digital hobby radio operator. It sounds more like “computer”, “website”, or “FTP”. It sounds a bit old, it has a touch of steampunk.</p>
  459. <h2>URLS</h2>
  460. <p>Messengers are the new blog. To kids living in Musical.ly, blogs are one step away from photocopiers. They don’t have a clear concept of a URL. Here is a conversation my friend C had with his 11-year-old D:</p>
  461. <p>D: “What is this strange stuff on the Milk package?”<br/>
  462. C: “This strange stuff is a URL.”<br/>
  463. D: “What does it say?”<br/>
  464. C: “It’s an Internet address.”<br/>
  465. D: “Address of what?”<br/>
  466. C: “Of a Website. It’s used in the browser—in the address field.”<br/>
  467. D: “What is a browser?“</p>
  468. <p>The browser now is just another app. A peculiar one. It sometimes pops up. In the cellphone of an 11-year-old, the browser is not, as you might think, “the Internet”. He doesn’t know exactly what a browser is and how to use it. Apps bring him <em>there</em> sometimes. To a chatting teen, the address bar is a cousin of the terminal. It gives us control, but if you haven’t learned how to use it, it’s just <em>bad UX</em>. Here is what happened:</p>
  469. <blockquote><p>
  470. “Facebook has created a centrally designed internet. It’s a lamer, shittier looking internet. It’s just not as cool as an internet that is a big, chaotic space filled with tons of independently operating websites who are able to make a living because they make something cool that people want to see.” <a href="http://splitsider.com/2018/02/how-facebook-is-killing-comedy/">How Facebook Is Killing Comedy</a>
  471. </p></blockquote>
  472. <p>Things change. The shattering change since 2004 is that in practice, the Internet is as far from a distributed, diverse network of independent publishers as Radio and in its main streams, as far from intelligent communication as TV. It is possible to do your thing, but it requires muscle. It is possible to find a thinking audience, but it will be small. The Internet has imploded into Facebook, Amazon, Google, some local players and a mirror Web of twin players dominating the Chinese Market. For new stars to be born we need to get ourselves out of these black holes. How? Why? And do we have a chance?</p>
  473. <h2>Stop whining!</h2>
  474. <p>Isn’t the Internet just fine? Wikipedia, Google search? And aren’t the blogging tools way better than they used to be? What’s with all the whining? Why not just continue texting? Or shut down computers and write for yourself with pen and paper?</p>
  475. <p>Again, taking a break is generally good advice. And yes, there is Wikipedia, and Wikipedia is great. Alphabet sounds like a James Bond Villan and it is not harmless, but Google Search is powerful. And no, you can’t escape digital culture as long as you live in a society that lives on digital fuel. If you block email you’ll have trouble holding onto most jobs. If you have no cellphone people just won’t get in touch with you anymore. Who calls landlines these days? However long your digital Sabbatical, you will inevitably get sucked back in. And so will your kids.</p>
  476. <blockquote><p>
  477. “The largest supercomputers in the world are inside of two companies — Google and Facebook — and where are we pointing them?” Mr. Harris said. “We’re pointing them at people’s brains, at children.” –<a href="https://www.nytimes.com/2018/02/04/technology/early-facebook-google-employees-fight-tech.html">Tristan Harris</a>
  478. </p></blockquote>
  479. <p>But instead of protecting them from the evil Internet, teach them to read, write, draw, paint, ask and think. Teach them researching, blogging, FTP. The challenge when you are <em>in</em> is to not become passive. To change from consumer to maker, following to self-thinking, quoter to commentator, liker to publisher, but mostly, from getting angry about headlines of articles you haven’t read to reading precisely, asking questions, researching, fact-checking, thinking clearly and writing carefully.</p>
  480. <h2>How to write</h2>
  481. <p>Texting is fun, writing for yourself can be a rewarding form of meditation. Yet, writing to find clarity leads to a different place, a different text than writing to be read. Writing for an audience should be done in the spirit of writing for your friend, but chatting with your friend is not the same thing as putting your thoughts in the wild.</p>
  482. <p>Writing for friends and yourself can clear your thoughts, help you plan and invite the discovery of new ideas. Writing with the intention to put your thoughts <em>out there</em> leads to real writing. Writing gets real when it is read. Before that, it is a dream in letters. Writing to get read makes you careful, responsible, and considerate. It forces you to think as simply, clearly and understandably as possible. It forces you to think about how what you say may look and feel from the outside. Writing to be read may not be desirable for everybody. But if you feel that you have something to say, write to be read. Don’t search for something to write because you want to be famous or rich. If you want fame jump from a cliff into a butter bucket on YouTube. If you want to be rich, get into finance.</p>
  483. <p>Blogging is so out of fashion that it is almost fashionable again. You may have heard about the so-called return to blogging from a couple of your tech friends. It’s like talking about a Zeppelin revival as Madonna is storming the charts with “Pappa don’t preach”. It’s like walking in trumpet pants in the nineties, like growing a stache in the naughties, like organic food, long bears, tattoos and penny farthing when Obama got elected. And it’s writing as opposed to liking, thinking as opposed to reacting, owning your traffic as opposed to building up your Facebook followers that one day a Zuckerberg will take away from you when it suits his needs.</p>
  484. <h2>Blogging works, but it’s not the same</h2>
  485. <p>Since getting back on the old blogging track at the beginning of the year 2018, our traffic tripled. We sold 25% more apps. We closed our Kickstarter campaign. Look:</p>
  486. <p><img src="http://ia.net/wp-content/uploads/2018/02/Traffic-iA.net-December2017-January-2018-1.png" alt="Traffic iA.net December2017 - January 2018. Traffic starts growing as we started blogging again."/></p>
  487. <p>Blogging works but it doesn’t work exactly like it used to. Gone are the days with a sudden surge of 100’000 uniques users that want to know about typography in Web design. The spikes flattened, the long tail grew. Getting people to read what you have to say takes more than writing well. It takes a lot more, now.</p>
  488. <p>What has changed? The traffic used to flow through the invisible net between the different blogs. We all read and responded to each other. Blog networks were organic and constantly buzzing. Some bloggers used more, some used fewer words, some mostly syndicated other people’s writing, curating and quoting, others created their own content. RSS and newsletters kept us up to date on our favorite channels. Discussions helped us improve and learn and made everyone come back. Compared to social media accounts, blogs were fewer but comparatively diverse in interests, comparatively active, fearless and wild.</p>
  489. <p>The more people joined in, the more the blogging became powerful until it turned into a commercial game. This always happens. And it happens in ever faster cycles. IOT? Old news. VR? Old news. Artificial Intelligence? Old news. Blockchain? Nah… There are hardly more than a handful really solid Blockchain projects out there, yet every bank, every blue chip and every business consultant now claims proficiency, expertise and a portfolio of patented innovations in a field that is supposed to be experimenting not expertizing. If there is money to be made, people will try to game it. How many time have I heard on the bus that “you should invest in Ether.” And when financial institutions start mixing the cards, you have no chance. They run the Casino.</p>
  490. <p>Comments were the first core function that got gamed. For trolls, PR companies using persona software, SEO blackhats, spammers, and dogs pretending to be humans the comments section was free sex. Commenting costs nothing. Managing comments sections is so expensive that even big media organizations can no longer afford them.</p>
  491. <p>Technorati got gamed. Google killed both the RSS reader and Feedburner, both core components of the blog ecosystem.</p>
  492. <p>Real Simple Syndication was never really simple. It was key though. Our RSS feed was sporting over 25,000 subscribers. Now it’s, maybe, plus minus 5,000 active ones. Once we forgot about it in a redesign and lost tens of thousands of geeks. Maybe one of the biggest blunders in the history of iA.</p>
  493. <p>Will RSS get a hipster comeback, too? Hardly. But we need something spidery that connects blogs. Can Social Media put on this hat maybe? Without our Twitter accounts, it’s difficult to get people to come over. Is the invisible Web spidering between different private chat applications we all use now? Newsletters are still alive and kicking, growing in importance even. Email is not the answer even though more and more start realizing that Slack might have a less ironic name than we thought.</p>
  494. <h2>Find your way</h2>
  495. <p>The answer to the passive consumption of trash is the active formulation of questions, the active search for answers and the active work of putting complex knowledge and diffuse feelings into clear words. Unlike <em>getting</em> fed from those <em>feeds</em>, searching, researching, reflecting, and concise writing has the power to clear the mind. We need to write on our own domains. Don’t post thoughts on Facebook. Use it to get traffic. Drop Medium for blogging. Own your writing. Use Twitter carefully. And on your domain, send people to other domains you like, outside the usual black holes, if possible. And link:</p>
  496. <blockquote><p>
  497. “First, linking out would be great. It would at least get people back to normal websites. Remember when your fingers just remembered different URLs, and you would go to The New York Times, and The Onion, and Funny or Die? Now it’s less so. You type in Facebook or Twitter or Reddit and then you just sit there and passively take in this feed of what’s selected for you.” <a href="http://splitsider.com/2018/02/how-facebook-is-killing-comedy/">How Facebook Is Killing Comedy</a>
  498. </p></blockquote>
  499. <p>Here is the good news: As a matter of fact, the tools at our disposal are way more powerful than they used to be. We can use our Social Media channels to send readers out to better places. And the timing to take control is right, too. A lot of old, new and potential bloggers now understand that and why Facebook is a trap. We don’t need to go on the barricades. We need to switch mode from passive to active, from consuming to creating. Start sowing seeds.</p>
  500. <figure class="text__image-full-width"><img src="http://ia.net/wp-content/uploads/2018/02/Semeuse-vs-French-Revolution.png" alt="Barricades vs Quiet Revolution"/></figure>
  501. </article>
  502. </section>
  503. <nav id="jumpto">
  504. <p>
  505. <a href="/david/blog/">Accueil du blog</a> |
  506. <a href="https://ia.net/topics/take-the-power-back/">Source originale</a> |
  507. <a href="/david/stream/2019/">Accueil du flux</a>
  508. </p>
  509. </nav>
  510. <footer>
  511. <div>
  512. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  513. <p>
  514. Bonjour/Hi!
  515. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  516. 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>).
  517. </p>
  518. <p>
  519. 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>.
  520. </p>
  521. <p>
  522. Voici quelques articles choisis :
  523. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  524. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  525. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  526. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  527. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  528. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  529. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  530. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  531. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  532. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  533. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  534. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  535. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  536. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  537. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  538. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  539. </p>
  540. <p>
  541. 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>.
  542. </p>
  543. <p>
  544. Je ne traque pas ta navigation mais mon
  545. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  546. conserve des logs d’accès.
  547. </p>
  548. </div>
  549. </footer>
  550. <script type="text/javascript">
  551. ;(_ => {
  552. const jumper = document.getElementById('jumper')
  553. jumper.addEventListener('click', e => {
  554. e.preventDefault()
  555. const anchor = e.target.getAttribute('href')
  556. const targetEl = document.getElementById(anchor.substring(1))
  557. targetEl.scrollIntoView({behavior: 'smooth'})
  558. })
  559. })()
  560. </script>