davidbgk
/
larlet-fr-david-cache
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Vydání 0 Aktivita
A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
25 Revize
1 Větev
Strom: 94d40c07a3
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „94d40c07a3“
${ noResults }
larlet-fr-david-cache/cache/1c0838399842b2c1996dc673cdd.../index.html

index.html 26KB
Surový Blame Historie

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621 
  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>Consume less, create more (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://tjcx.me/posts/consumption-distraction/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Consume less, create more (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://tjcx.me/posts/consumption-distraction/">Source originale du contenu</a></h3>

  463.     <p><span class="dropcap">L</span>ike most people, I like to sit on the bus, stare out at the zombies drooling over their phones, and feel smugly superior. I see their bored, lifeless eyes and pity these sheeple whose lives have been ruined in service of Big Tech profits.</p>

  464. 

  465. <p>This lasts for about thirty seconds before I get bored. The guy next to me chuckles at something on Kanye’s Twitter feed. <em>Wait Kanye? I thought he was off Twitter!</em> In seconds my own phone is out, and I’m furiously scrolling through Reddit, looking for fresh memes.</p>

  466. 

  467. <p>And so goes the common trope: we all hate our phones, social media, and Netlfix—but we also love them.</p>

  468. 

  469. <p>Eventually tiring of plain-vanilla bus-ride superiority, I brought a book with me on the bus. Not a Kindle, or an iPad, but a bona fide bound book.</p>

  470. 

  471. <p>After every sentence or two I would gaze incredulously around the bus with a sneaky grin. <em>These dumb cows,</em> I thought, <em>look at them melt their brains with their stupid social feeds. They can’t focus like I can.</em> I was about to turn back to <em>Sapiens</em> when I noticed a woman in the back of the bus who <em>wasn’t</em> staring at her phone. Nor was she reading a book. She wasn’t even listening to a monotonous NPR podcast.</p>

  472. 

  473. <p>This psychopath was <strong>sketching</strong>. She had a charcoal pencil and was sketching a human figure. She didn’t look <em>happy</em> exactly. But she looked engaged. She looked intent. And all of a sudden my smugness fled. I realized that reading a book was really just like reading Reddit—both were <strong>consumptive</strong> activitives.</p>

  474. 

  475. <p>Were previous generations really better off because they merely watched TV, or listened to radio, or read books? All of these activities are passive. All of these activities involve letting external thoughts temporarily replace your own. Today’s smartphones differ from medieval books only in degree—all media is created to be consumed.</p>

  476. 

  477. <p>I had to start creating.</p>

  478. 

  479. <hr/>

  480. 

  481. <p><span class="dropcap">C</span>orín Tellado was a Spanish author who wrote <a href="https://en.wikipedia.org/wiki/Cor%C3%ADn_Tellado">over 5,000 books</a> in her 81-year lifespan. That’s over sixty books a year, assuming she came out of the womb fully literate. She claimed she could write a book in two days, and I’m inclined to believe her.</p>

  482. 

  483. <p>I can’t write a tweet in two days. Nevertheless, I was inspired by Tellado to stop consuming and start creating. If we categorize all our waking moments as either consumptive or creative, I was probably at a 10:1 ratio, and that’s only if I label “copy/pasting stock images into Keynote presentations” as “creative.” Tellado was probably closer to 1:1. How could I get closer to that?</p>

  484. 

  485. <p>On my next bus ride I pulled out my phone and opened the iOS notes app. I created a new note titled <code>Essay</code>.</p>

  486. 

  487. <p>I stared at that off-white screen for several long minutes without typing anything. <em>I don’t have anything to write about,</em> I thought. <em>Also, I’m not even a good writer…maybe I should look online for some tips…</em></p>

  488. 

  489. <p>But that was a bad idea and I knew it. So I swallowed my pride and just started writing:</p>

  490. 

  491. <blockquote>

  492. <p>Why I think creating stuff is a good thing.</p>

  493. 

  494. <p>An essay by Tom C.</p>

  495. </blockquote>

  496. 

  497. <p>This was going to be rough.</p>

  498. 

  499. <blockquote>

  500. <p>I think people consume too much, and don’t create enough. This is bad I think.</p>

  501. </blockquote>

  502. 

  503. <p>Like, really rough.</p>

  504. 

  505. <p>But I kept typing; pouring inane, kindergarten-level drivel into my phone.</p>

  506. 

  507. <p>The average person can type about <a href="https://www.quora.com/What-is-the-average-smartphone-users-typing-speed">20 words per minute</a> on a phone. My commute is about 30 minutes each way, so that’s a maximum of 1,200 words a day. Realistically I’m going to have to spend some time thinking about what to write, so let’s be conservative and shoot for 500 words a day.</p>

  508. 

  509. <p>I read <a href="https://www.wesfed.com/blog/ideal-blog-post-length-seo/">somewhere</a> that a good blog post is 1,600 words…so if I work fast I could pump one out every three days, right?</p>

  510. 

  511. <p>The first day I wrote 100 horrible words. Really super bad. No one will ever see these words.</p>

  512. 

  513. <p>Day two I wrote 80 words. I think I psyched myself out over how bad the previous day went.</p>

  514. 

  515. <p>The third day I only kept writing out of stubbornness. I knew this project was doomed, but I felt like <em>really</em> dooming it.</p>

  516. 

  517. <p>By then end of the first week I had 500 words in the bank. I didn’t feel good about it, but it felt slightly better than scrolling through 47 <a href="https://twitter.com/search?q=%23AndThatsWhyYouAreMyEx">#AndThatsWhyYouAreMyEx</a> tweets.</p>

  518. 

  519. <p>My essay was garbage. But it was <em>my</em> garbage.</p>

  520. 

  521. <p>So I kept at it, day after day. I once again started feeling smugly superior to my fellow bus riders. <em>Look at me <strong>creating</strong></em>, I thought. <em>Look at me contributing to the world, while these reptiles just distract themselves with their phones until they die.</em></p>

  522. 

  523. <p>This arrogance lasts for a few seconds until I re-read the stream-of-consciousness dogshit I’m typing into my phone.</p>

  524. 

  525. <p>I’ve never done sales, but I know a little bit about the “sales funnel.” You hire college grads to make 500 cold calls in a week. Of those 500 calls, maybe 5% agree to watch a demo of the product. Then some slightly-more-senior sales people do this demo, and perhaps 20% of those demos end up in contract negotiation. And 60% of those end up as actual sales. That means you need 500 cold calls to make <strong>three</strong> sales.</p>

  526. 

  527. <p>I think that’s what creating is like. You need to write 500 words to get three good ones. Or 500 sketches, business ideas, or recipes. If you’re really really good, you can increase your overall conversion rate from 0.6% to 1%—but the most reliable way to get better results is to just produce more crap.</p>

  528. 

  529. <p>So I kept at it. week after week. Sometime in the middle of the fourth week I had 3,000 words in my Notes app. That’s when I started editing.</p>

  530. 

  531. <p>Editing is hard because you realize how bad you are. But editing is easy because we’re all better at criticizing than we are at creating.</p>

  532. 

  533. <p>The good thing about forcing yourself to produce a bunch of garbage is that you don’t feel bad deleting it. You’re not married to any of your work, because you wrote it half-awake on the <code>1BX</code> while some crazy dude negotiated his fare with the driver. I gleefully deleted hundreds of words, trying not to think about the neanderthal who must’ve written them.</p>

  534. 

  535. <p>It was exactly a month after I started this creative project that I finished this first essay. I read it over for the bazillionth time and thought <em>this only a <strong>small</strong> tire fire</em>.</p>

  536. 

  537. <p>In it’s final form, the essay was almost exactly 1,600 words. I called it <em>Consume less, create more</em>.</p>

  538. 

  539. <hr/>

  540. 

  541. <p><span class="dropcap">Y</span>ou are, in fact, reading that essay right now. It may not look like it, but this is the product of an <strong>entire month</strong> of bus rides. If you live in San Francisco and saw someone on the <code>1BX</code> smashing the face of his phone like he was angry at it, you probably saw me writing this essay.</p>

  542. 

  543. <p>Perhaps three people will read this essay, including my parents. Despite that, I feel an immense sense of accomplishment. I’ve been sitting on buses for years, but I have more to show for my last month of bus rides than the rest of that time combined.</p>

  544. 

  545. <p>Smartphones, I’ve decided, are not evil. This entire essay was composed on an iPhone. What’s evil is passive consumption, in all its forms.</p>

  546. 

  547. <p>Twitter, Facebook, Instagram—we can all agree that these are serious timewasters. But what about <em>The Economist</em> or <em>War and Peace</em>? How much can you really remember from all of those <em>New York Times</em> op-eds you’ve read? Could you summarize the major themes of <em>Grapes of Wrath</em>?</p>

  548. 

  549. <p>Most knowledge worth having comes from <strong>practice</strong>. It comes from <strong>doing</strong>. It comes from <strong>creating</strong>. Reading about the trade war with China doesn’t make you smarter—it gives you something to say at dinner parties. It gives you the illusion that you have the vaguest idea what is happening in our enormously complex world.</p>

  550. 

  551. <p>A lot of ink has been spilled about the perils of modern technology. How it distracts us, how it promotes unhealthy comparisons with others, how it makes us fat, how it limits social interaction, how it spies on us. And all of these things are probably true, to some extent.</p>

  552. 

  553. <p>But the real tragedy of modern technology is that it’s turned us into <strong>consumers</strong>. Our voracious consumption of media parallels our consumption of fossil fuels, corn syrup, and plastic straws. And although we’re starting to worry about our consumption of those physical goods, we seem less concerned about our consumption of information.</p>

  554. 

  555. <p>We treat information as necessarily good, and comfort ourselves with the feeling that whatever article or newsletter we waste our time with is actually <em>good</em> for us. We equate <em>reading</em> with <em>self improvement</em>, even though we forget most of what we’ve read, and what we remember isn’t useful.</p>

  556. 

  557. <p>So stop reading and start <strong>creating</strong>. Paint, draw, compose, code, or plan. It will be hard. It will be slow. It will be frustrating. But I promise it will be worth it.</p>

  558.   </article>

  559. </section>

  560. 

  561. 

  562. <nav id="jumpto">

  563.   <p>

  564.     <a href="/david/blog/">Accueil du blog</a> |

  565.     <a href="https://tjcx.me/posts/consumption-distraction/">Source originale</a> |

  566.     <a href="/david/stream/2019/">Accueil du flux</a>

  567.   </p>

  568. </nav>

  569. 

  570. <footer>

  571.   <div>

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

  573.     <p>

  574.       Bonjour/Hi!

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

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

  577.     </p>

  578.     <p>

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

  580.     </p>

  581.     

  582.     <p>

  583.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  600.     </p>

  601.     <p>

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

  603.     </p>

  604.     <p>

  605.       Je ne traque pas ta navigation mais mon

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

  607.       conserve des logs d’accès.

  608.     </p>

  609.   </div>

  610. </footer>

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

  612.   ;(_ => {

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

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

  615.       e.preventDefault()

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

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

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

  619.     })

  620.   })()

  621. </script>