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 30KB

4 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585
  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>Finding the Exhaust Ports (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://jon.gold/2018/02/exhaust-ports/">
  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. Finding the Exhaust Ports (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://jon.gold/2018/02/exhaust-ports/">Source originale du contenu</a></h3>
  445. <p>The internet I love is hidden behind layers of the internet that I detest. Often I doubt if the internet I love still exists at all — I think &amp; hope it does, but it’s becoming rarer to see it.</p>
  446. <p>The internet used to be cute and home-brewed. I wrote my first websites in elementary school in Notepad, and gave them to my friends on floppy disks because we didn’t have the internet at home and my limited time in internet cafes wasn’t quite long enough to learn how to use FTP. The internet was weird and great. And then the internet became wildly dynamic, and we created online communities where we posted blink-182 lyrics and self-portraits of ourselves taken from cameras held high above our heads.</p>
  447. <p>In time, it became easier for small groups of humans (or even individual humans) to create applications on the internet; to string together a few lines of Ruby and manifest a nice, friendly little slice of the internet in which to welcome our friends for whatever niche social dynamic we wanted to foster.</p>
  448. <p>This went a little bit pear-shaped when the people who read Ayn Rand with a straight face realized that these things should probably make unreasonable amounts of money and that rather than charging people to use services they loved, it would be much better to figure out ways to get them <em>hooked</em> on services and then sell their attention to advertisers. Why pay with the United States dollar when you could pay with your life?</p>
  449. <p>I’d love to say <em>they</em>, but the pronouns blend together; <em>they</em> and <em>we</em> are often inseparable as we pick apart the mistakes the tech industry made over the past decade. We studied casinos—<em>casinos!</em>—for their tricks and started dusting design reviews with words like <em>variable rewards</em> and <em>triggers</em>. We wrote books and gave conference talks about how best to create products that people came back to against their best intentions. As each hot new app radiated out from its San Francisco co-working space, we rushed to congratulate those who created it for their ingenuity in capturing our attention.</p>
  450. <p>We glorified the theft of the ability to be present from anyone who happened to have an internet connection.</p>
  451. <p>Many things ruined the internet: sometimes malice, sometimes stupidity; often good intentions that became problematic when compounded. Lots of the familiar user interface patterns we use today were great in isolation, ten years ago. When the creator of the <em>pull to refresh</em> pattern <a href="https://www.theguardian.com/technology/2017/oct/05/smartphone-addiction-silicon-valley-dystopia">says</a> that it was a “cute and clever” fix that he now regrets, I believe him with my whole heart.</p>
  452. <p>We didn’t notice these behaviors compounding until it was too late because we were all drunk on the punch spiked by the hype and hubris of the tech industry. The conferences and the pitches and the hyperbolic articles announcing new features or irresponsible financing rounds each kept our heads conveniently in the sand. Late-capitalism offers a very limited definition of <em>success</em>, and we were content playing the game rather than challenging if we should change the system. We disrupted everything but the economic model that ruined the internet.</p>
  453. <p>Those services which didn’t embrace the attention economy often found themselves writing blog posts containing words like <em>sunset</em> and <em>incredible journey</em>.</p>
  454. <p>In these dialectics it can be tempting to paint every employee of an Attention Economy company as some super-villain intent on destroying our brains. In my (biased &amp; limited) dataset of knowing a lot of people, I don’t think that’s the case — I’ve met precious few genuine assholes over a decade working with startups in London and Silicon Valley. The system was rigged to favor certain patterns, and we were each played by the system. Whatever the intentions of the past, from this point forward we must work to reverse the damage that has been wrought.</p>
  455. <p>Doctors smoked <em>Camels</em>. Doctors presumably didn’t want to give anyone cancer.</p>
  456. <p>In 2018 the <em>internet</em> is conflated—by us as technologists, but especially by the rest of the world—as a few very behemoth properties who happen to be waging war over each second of our lives. Corporations who don’t have our best interests at heart and corporations for whom <em>time well spent</em> is equal to time anxiously refreshing one of their newsfeeds, rather than smiling at people on the streets or writing poetry or falling in love. Corporations who view their notifications—<em>Zuck just started live streaming!</em>—as a gift rather than a plague.</p>
  457. <p>These corporations don’t see our humanity. Instead, we’re <em>users</em>—faceless data-points on an overzealous Product Manager’s dashboard of metrics to be optimized: <em>cohort</em> is a wonderful way to dehumanize thousands of people at once.</p>
  458. <p>To course-correct the ills of consumerism and materialism and capitalism, we must, as a species, move from <em>scarcity</em> into <em>abundance</em>. Scarcity is the what causes us to harass, to fear our neighbors, to hate, and to wage war. Instead we must freely love and share resources and greet everyone we meet with kindness. There is, unfortunately, one exception: time.</p>
  459. <p>Time is the only thing that is scarce, and those greedy corporations know it, because they’re each striving to own every second of our lives. And somehow, we don’t see the compromise we’ve been tricked into making. Each of us has twenty four hours in a day, and only a finite number of days in our lives. And we check our phone tens or hundreds of times per day. Every thought, hope, dream, punctuated by pings. Every moment genuinely <em>well spent</em> is interrupted by our nagging anxiety to see what’s happening somewhere else.</p>
  460. <p>This would be frustrating if banal if such corporations were benevolently preying on our time and repaying us with joy and harmony. Of course they’re not — time spent on Facebook and Twitter induces anxiety and depression. They bring out the worst traits in each of us — making us bitchy and argumentative. Every photo we view on Instagram mines our insecurities that we’re not living life as fully as our neighbors; each photo we post is a fresh coat of white paint on the picket fences surrounding the houses of our lives. Of course, our lawns are artificial and our houses crumbling on the inside, but the appearance is what matters. The Joneses know this because they play the same game.</p>
  461. <p>The bluesman Robert Johnson was said to have sold his soul to the devil in exchange for his guitar playing prowess: at least he got a good deal out of it. We sold years of our lives to billionaire tech entrepreneurs, and in return we got depression.</p>
  462. <p>Tomorrow, it will be worse. Those same corporations who have tricked us into thinking we enjoy the manufactured anxiety and attention deficit and depression that they feed us have ambitions on virtual reality. This is not a coincidence — Mark Zuckerberg is not an altruistic technologist who thinks VR is a cool toy! Addictive sadness, direct to our eyeballs. That’s what they’re optimizing for. Why go outside and smell the eucalyptus trees when you could lay in bed all day, fully encased in a nightmarish false reality of pings and zips and buzzes in three dimensions? Presumably, it will be the worst consciousness we have yet experienced.</p>
  463. <p><hr/>
  464. <p>There’s an opportunity cost associated with the smartest people working on these technologies and the financial bubble that has risen in concert with them. The world is full of pressing issues that we desperately need to allocate resources to, and each thing that someone builds or funds that harms us is a waste of energy that could be used to fix non-trivial issues. To take a random, non-weighted sample of examples I’ve been thinking about this week: there are 7000 people sleeping on the streets of San Francisco, and 45 million Americans living below the poverty line. <a href="http://jon.gold/2018/01/waste-society/">5 trillion pieces of plastic</a> are floating in the Pacific, and by 2050 perhaps 200 million or 1 billion people will be displaced by climate change. At the time of writing, Flint, Michigan hasn’t had clean drinking water for 1391 days.</p>
  465. <p>Silicon Valley is obsessed with building nonsense: quick dopamine fixes and Uber-for-X’s and new ways to experience insecurity. Not exclusively—there are some wonderful, world-changing companies (still) here—but Twitter and Facebook are undoubtedly still held in high regard as some of the ones who “got it right”. Impressionable Product Managers at early-stage startups have a shared playbook entry — <em>Just copy what Facebook &amp; Twitter did</em>. Tack on a newsfeed. Add some badges. Gamify it. Make it sticky. And whatever Silicon Valley does, so too do startups in every regional Silicon <em>Suffix</em> across the world. It’s imperative that we remove these companies from the pedestal we’ve placed them on. They’re not to be aspired to.</p>
  466. <p>Every second of Facebook &amp; Twitter being a <em>thing</em> validates the attention economy to founders and venture capitalists. Common feedback to my criticism of Twitter &amp; Facebook is that they are just businesses responding to what the market is currently rewarding. I agree, and the market is rotten. We need to dismantle the whole thing: tricking users into thinking they <em>need</em> whatever nonsense you’re pushing; tracking time-spent as an organizational <em>goal</em> rather than embarrassment; the presumable moneymaker of selling personal data or showing adverts; funding it all with obscene amounts of money that could be used to really save the world.</p>
  467. <p>“But Jon, it’s not just social media, it’s TV and advertising and everything else too” — I agree. Advertising is equally repulsive. We’re destroying the planet, and advertising is an accelerant, and the list of exceptions to this are vanishingly small.</p>
  468. <p>The attention economy presents clear dangers on the consumption side too — if the attention-anxiety-depression machine precludes us from being able to calmly organize &amp; respond, we’re positioning ourselves to lose these larger humanitarian battles over the coming decades: the climate change and the automation and everything else.</p>
  469. <p>Rethinking the way we use screens might feel trivial, but it’s a necessary preparation for the coming century.</p>
  470. <hr/>
  471. <p><em>Charles liked your snarky tweet about someone else’s work. Send Ada a selfie to keep your streak—and by streak we mean friendship—alive.</em></p>
  472. <p>Lamenting about the tech industry’s ills when self-identifying as a technologist is a precarious construction. I care so deeply about using the personal computer for liberation &amp; augmentation. I’m so, so burned out by 95% of the work happening in the tech industry. Silicon Valley mythologizes newness, without stopping to ask <em>“why?”</em>. I’m still in love with technology, but increasingly with nuance into that which is for us, and that which productizes us.</p>
  473. <p>Perhaps when Bush prophesied lightning-quick knowledge retrieval, he didn’t intend for that knowledge to be footnoted with <em>Outbrain</em> adverts. Licklider’s man-computer symbiosis would have been frustrated had it been crop-dusted with notifications. Ted Nelson imagined many wonderfully weird futures for the personal computer, but I don’t think gamifying meditation apps was one of them.</p>
  474. <p>John Perry Barlow embodied the technologists that each of us should strive to be, and I’m heartbroken that he’s not with us anymore. So eloquently put by the Electronic Frontier Foundation:</p>
  475. <blockquote>
  476. <p>Barlow knew that new technology could create and empower evil as much as it could create and empower good. He made a conscious decision to focus on the latter: “I knew it’s also true that a good way to invent the future is to predict it. So I predicted Utopia, hoping to give Liberty a running start before the laws of Moore and Metcalfe delivered up what Ed Snowden now correctly calls ‘turn-key totalitarianism.‘”</p>
  477. </blockquote>
  478. <p>Barlow viewed his life’s work as being a <em>good ancestor</em> — one who consistently did the right things, and whose contributions we can look back on with fondness.</p>
  479. <p>Fixing the tech industry doesn’t necessitate a rejection of all that technology could be, just most of what it is right now. We can be optimists for the possibilities whilst cynics of the present. Artificial Intelligence and Virtual Reality will either liberate us or enslave us, and we must fight for the future that we want. Each genie is already out of the bottle — if we don’t do the work then evil has a guaranteed victory. If we do the work, we have a chance of making a better future.</p>
  480. <hr/>
  481. <blockquote>
  482. <p>“Technology is destructive only in the hands of people who do not realize that they are one and the same process as the universe” — Alan Watts</p>
  483. </blockquote>
  484. <p>This sounds gloomy—and it is—but we made this mess so we can fix it. It’s time for an industrial rejection of casino techniques and newsfeeds and variable rewards and notifications and manufactured depression.</p>
  485. <p>The Death Star had a thermal exhaust port, leading straight to the reactor system. We better start hunting for the plans to our own Death Stars, to be those good ancestors.</p></p>
  486. </article>
  487. </section>
  488. <nav id="jumpto">
  489. <p>
  490. <a href="/david/blog/">Accueil du blog</a> |
  491. <a href="https://jon.gold/2018/02/exhaust-ports/">Source originale</a> |
  492. <a href="/david/stream/2019/">Accueil du flux</a>
  493. </p>
  494. </nav>
  495. <footer>
  496. <div>
  497. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  498. <p>
  499. Bonjour/Hi!
  500. 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>
  501. 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>).
  502. </p>
  503. <p>
  504. 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>.
  505. </p>
  506. <p>
  507. Voici quelques articles choisis :
  508. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  509. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  510. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  511. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  512. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  513. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  514. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  515. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  516. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  517. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  518. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  519. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  520. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  521. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  522. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  523. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  524. </p>
  525. <p>
  526. 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>.
  527. </p>
  528. <p>
  529. Je ne traque pas ta navigation mais mon
  530. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  531. conserve des logs d’accès.
  532. </p>
  533. </div>
  534. </footer>
  535. <script type="text/javascript">
  536. ;(_ => {
  537. const jumper = document.getElementById('jumper')
  538. jumper.addEventListener('click', e => {
  539. e.preventDefault()
  540. const anchor = e.target.getAttribute('href')
  541. const targetEl = document.getElementById(anchor.substring(1))
  542. targetEl.scrollIntoView({behavior: 'smooth'})
  543. })
  544. })()
  545. </script>