davidbgk
/
larlet-fr-david-cache
Следить 1
В избранное 0
Форкнуть 0
Код Релизы 0 Активность
A place to cache linked articles (think custom and personal wayback machine)
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
314 коммитов
1 ветка
Дерево: e9ef5f47dd
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'e9ef5f47dd'
${ noResults }
larlet-fr-david-cache/cache/0e61c22644fe5ee4dd27f44be4d.../index.html

index.html 53KB
Исходник Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802 
  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>Fast Software, Paid Newsletters, Novels (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://craigmod.com/roden/028/">

  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.   Fast Software, Paid Newsletters, Novels (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://craigmod.com/roden/028/">Source originale du contenu</a></h3>

  463.     <p><a href="https://craigmod.com/membership/" style="border: none;"><img src="https://craigmod.com/roden/img/028/mountainworks.jpg" alt="Kamakura Fireworks as seen from Zushi Highland" style="width: 100%; height: auto;" class="fullbleed" /></a></p>

  464. 

  465. <p>Beautiful Rodendendrons —</p>

  466. 

  467. <p><a href="https://craigmod.com/roden/014/">Summer in Japan</a> = fireworks. An abundance of fireworks. Weekly fireworks. Fireworks at every lake, every beach, every river. Fireworks in fields. Fireworks in tiny parks. I climbed a little mountain to watch a few last week. Fireworks of a cove, you could say. The air was crisp, a little chilly even, and, unlike last year, the winds were in our favor. Clear views all the way through to the end.</p>

  468. 

  469. <hr />

  470. 

  471. <p>This <em>Roden</em> was supposed to go out two weeks ago. I was holding off on sending because I wanted to announce a little talk I’ll be giving in NYC. Planning for that kept getting pushed. And then fourth of July shut down America. And then other deadlines took over. And now, finally, finally, finally I have a link for you all!</p>

  472. 

  473. <p>On August 8th I’ll be giving a tiny talk, very informal, kindly hosted by the beautiful humans at <a href="https://postlight.com/">Postlight</a> in Manhattan. Seating is limited. Grab a ticket here:</p>

  474. 

  475. <p><a href="https://peatix.com/event/885437/">https://peatix.com/event/885437/</a></p>

  476. 

  477. <p>This is a free event, essentially sponsored by my <a href="https://craigmod.com/membership/">membership program</a>. If you’re a student and having trouble getting a ticket, respond to this email and let me know. We&rsquo;ll get you in.</p>

  478. 

  479. <hr />

  480. 

  481. <p><img src="https://craigmod.com/roden/img/028/bed-03.jpg" alt="Bed 03" style="width: 100%; height: auto;" class="fullbleed" /></p>

  482. 

  483. <h4 id="software">Software</h4>

  484. 

  485. <p>Strange <em>Roden</em>, as usual. Down below, a 2,000 word essay on … speed and software? This is the exact kind of thing that doesn&rsquo;t really have a home outside of Newsletter Island. Who’s going to buy this from me? It turns out: you. Indirectly, this essay was paid for by <a href="https://craigmod.com/membership/">Explorers Club memberships</a>. Thanks for letting me be weird. It could probably use like two more swings of ye old editing hatchet. But, because <em>Roden</em> feels liminal and informal, I’m OK with putting it up here.</p>

  486. 

  487. <hr />

  488. 

  489. <p><img src="https://craigmod.com/roden/img/028/bed-06.jpg" alt="Bed 06" style="width: 100%; height: auto;" class="fullbleed" /></p>

  490. 

  491. <h4 id="wait-where-am-i">Wait, where am I?</h4>

  492. 

  493. <p>In case you forgot: In theory you signed up <a href="https://craigmod.com">on my website</a> for this 4,500 word newsletter full of photos of my just-risen-from beds from my recent big <a href="https://www.wired.com/story/six-weeks-100s-miles-hours-glorious-boredom-japan/?verso=true">walk</a>, sent (mostly) monthly by <a href="https://craigmod.com">Craig Mod</a>.</p>

  494. 

  495. <p>Did you sign up on Ambien? Did an adversary enter your email vindictively? Just want to get off this bus? <unsubscribe>Unsubscribe with one click.</unsubscribe></p>

  496. 

  497. <p>For those of you here voluntarily and happily, I have another newsletter you might also enjoy: <a href="https://craigmod.com/ridgeline/"><em>Ridgline</em></a>. Weekly, on walking and Japan.</p>

  498. 

  499. <hr />

  500. 

  501. <p><img src="https://craigmod.com/roden/img/028/bed-07.jpg" alt="Bed 07" style="width: 100%; height: auto;" class="fullbleed" /></p>

  502. 

  503. <h4 id="book">Book</h4>

  504. 

  505. <p><a href="https://www.amazon.com/dp/B07H72LJ5V/"><em>On Earth We’re Briefly Gorgeous</em></a> is an exceptional novel by the poet (and now novelist) Ocean Vuong. It came out a little over a month ago and it falls right into my wheelhouse of novel love: It’s lyrical without slipping into pretension. It manages to pull off some acrobatic poetry partway through and stick the landing. It gazes into the saturnine gloom of Hartford and pulls from it a limpid coming-of-being story. A Vietnamese-American Bildungsroman that spans time and geography and generations. It’s just … really freggin’ good.</p>

  506. 

  507. <hr />

  508. 

  509. <p><img src="https://craigmod.com/roden/img/028/bed-08.jpg" alt="Bed 08" style="width: 100%; height: auto;" class="fullbleed" /></p>

  510. 

  511. <h4 id="linking-emails-affiliates">Linking, emails, affiliates</h4>

  512. 

  513. <p>That link above is to the US Amazon page for Ocean’s book. There’re a a great many of you reading this. My goal in pointing to a book like <em>On Earth We’re Briefly Gorgeous</em> is to shine a light on something wonderful and help the author a) be seen, and b) sell books. I normally link to Amazon because I think it has the least amount of friction for most to buy a book. 50% of you reading this are US based. So statistically speaking, you’re more likely to have an Amazon account, a Kindle, etcetera, and therefore the friction between seeing the book and clicking “buy” goes down significantly. Politics or capitalist issues aside, I feel this is most helpful to the author.</p>

  514. 

  515. <p>Related: The above link is not an affiliate link. It turns out <a href="https://amylynnandrews.com/do-not-put-amazon-associates-links-in-emails/">Amazon doesn’t allow affiliate links in emails</a>. If an email lives online as a webpage, the webpage can have affiliate links. But in email form, no links. This sort of makes sense — a good racket would be spam-bombing the world with affiliate links for any random, popular object. That said, you’d think Amazon would allow for the whitelisting of well-intentioned actors and their newsletters. (They have an &ldquo;influencers&rdquo; program, but joining it doesn&rsquo;t grant you blanket affiliate-linking privileges.)</p>

  516. 

  517. <p>I didn’t know any of this until Amazon issued what amounted to a cease a desist on my affiliate account: “We see you’re linking in emails. Stop within three days or your account will be terminated.” That sort of thing. <em>It&rsquo;d be a shame if something happened to your pretty little shop.</em></p>

  518. 

  519. <p>Years ago I made exceedingly decent amounts of money from affiliate links (the camera reviews are the biggest drivers of affiliate income). But those were all on my website. Ergo, fair game. Most years I make enough off recommending books in these emails to upgrade my computer. That income stream just disappeared.</p>

  520. 

  521. <p>But: I&rsquo;d much rather focus on <a href="https://craigmod.com/membership/">growing memberships</a> than figuring out ways to contort myself around affiliate links.</p>

  522. 

  523. <p>This kerfuffle gave me reason to reconsider if I even <em>wanted</em> to be linking to Amazon in the first place. Maybe it’s not the best option. And maybe it’s a little self-fulfillingly defeatist to assume it’s the best way for most people to get books.</p>

  524. 

  525. <p>I’d love to hear your feedback: <br /><strong>What’s the most useful way to point to books online?</strong></p>

  526. 

  527. <hr />

  528. 

  529. <p><img src="https://craigmod.com/onmargins/img/010-cover.jpg" alt="Clock" style="width: 100%; height: auto;" class="fullbleed" /></p>

  530. 

  531. <h4 id="on-margins">On Margins</h4>

  532. 

  533. <p>The latest <em>On Margins</em> is live: <a href="https://craigmod.com/onmargins/010/">An interview with book designer Jon Gray (Gray318)</a>. Jon is a gracious human. Be lulled and bedazzled by not only his gentle voice, but also his incredible backlist of book covers.</p>

  534. 

  535. <p><a href="https://craigmod.com/onmargins/010">Episode 10</a> has a full, illustrated transcript, as usual.</p>

  536. 

  537. <p>Jon candidly elucidates the many failures and screwups he&rsquo;s endured over his two+ decades of designing. For one cover in particular:</p>

  538. 

  539. <blockquote>

  540. <p>We’ve laid down the tape, masked off an area, and then thumbprint over the top. After about the, I don’t know … This one was too Christmasy, apparently. This one was not bright enough. After a while, I got to the stage where my thumbs were all broken and there was no print coming out. Someone in the studio said, “Oh, have you never thought of just getting a rubber stamp?” Then there was that moment of like, “Oh, you idiot.” She said, “Oh, actually, I think I’ve got one.” So, she lent me a rubber stamp of some thumbprint. Anyway, we did hundreds of these. As I said, this cover went on for a year.</p>

  541. </blockquote>

  542. 

  543. <p>A year! For one cover! Obviously there’s some parallel designing going on, too, but for anyone who thinks the pros just “knock stuff out” effortlessly, it’s encouraging to hear that <em>even</em> for someone as talented as Jon, the struggle is real.</p>

  544. 

  545. <hr />

  546. 

  547. <p><img src="https://craigmod.com/roden/img/028/bed-12.jpg" alt="Bed 12" style="width: 100%; height: auto;" class="fullbleed" /></p>

  548. 

  549. <h4 id="newsletters-forever">Newsletters forever?</h4>

  550. 

  551. <p><a href="https://substack.com/">Substack</a>, the paid-newsletter platform, just <a href="https://techcrunch.com/2019/07/16/substack-series-a/">raised $15 million dollars</a>. Because our society is obsessed with money as a proxy for success, we take these rounds <em>ipso facto</em> to be positive or indicative of health. I am skeptical by default whenever a company raises money (more on that below), but it can be a good excuse to reflect on their work.</p>

  552. 

  553. <p>Substack has become a great consumer startup archetype in the the following ways:</p>

  554. 

  555. <ol>

  556. <li>Run an actual business. I.e., sell something tangible: subscriptions (as opposed to user data).</li>

  557. <li>Make a habit out of burdensome / unscalable work. Substack co-founder Hamish McKenzie has been cold emailing writers like his hair’s on fire for years. <em>&ldquo;We&rsquo;d love to have you on Substack!&rdquo;</em> He adoringly pesters, prods, pokes, and eventually gets smart folks to sign up. This would be annoying if it ended there, but then the magic: He&rsquo;s successfully transitioned a number of previously unpaid newsletters into non-trivial cash generators. He emailed me ages ago, but because I am a nerd, and have Design Opinions, I like to roll my own stuff. (I do wonder, though, from time to time, if it would have made more financial sense to have launched <em>Ridgeline</em> on Substack.)</li>

  558. <li>Small modifications to existing systems can have a big impact. Substack is — to be <em>extremely</em> reductive — paywalled blogging software that sends out an email notification. But the framing of Email First, building up the brand (“I just launched my Substack, because everyone else has one!” is a sentence I read today), and getting good writers onboard early, has paid off handsomely.</li>

  559. </ol>

  560. 

  561. <p>$15 million — it should be said — isn’t a ton of money in the world of VC. But it&rsquo;s <em>just</em> enough to be concerning. They closed the deal in a week. It involved a dinner with Marc Andreessen. I know what those dinners are like. I&rsquo;ve been to them. They&rsquo;re breathless. They are hype machines. They&rsquo;re FUN. They get you pumped. And they are most certainly not connected to any reality you or I know. (Not saying wild goals that require buckets of capital aren&rsquo;t good, but I find them more inspiring at institution like CERN rather than in the muck of consumer tech.)</p>

  562. 

  563. <p>Generally: No startup should raise a tub of bucks <em>just</em> because a VC is willing to give them a high valuation. Ideally: They have a clear plan. Then they raise. This Substack raise is — as far as I can tell — the inverse. Money came knocking, now they&rsquo;re figuring out the plan.</p>

  564. 

  565. <p>Startups sometimes take more capital than they need because they&rsquo;re &ldquo;hot&rdquo; and venture firms are clamoring to &ldquo;get in on the action&rdquo; and it drives the valuation up, making the money &ldquo;look cheap,&rdquo; and thereby incentivizes otherwise clear-eyed and rational founders to bite off more than they their market will chew. The worst case scenario for a platform (because Substack <em>is</em> a platform; Substack is Medium Lite in some ways (and Medium may very well be a potential acquisition target)) like Substack is: Over-raise, be forced to hit an impossible valuation, completely ruin the product in the process.</p>

  566. 

  567. <p>I don&rsquo;t think Substack has over-raised, but they have raised themselves into a corner.</p>

  568. 

  569. <p>Hamish and co. aren’t disclosing the valuation of the round. All they’ve disclosed is 50,000 paying subscribers. The minimum subscription is $5/mo. So that’s at least $3,000,000/yr+ gross revenue. Substack cut is 10%: at least $300,000/year in net, without taking into account employee salaries, server costs, maintenance, etc. That&rsquo;s OK but not great, and they may find this %-split doesn&rsquo;t hold up in the long run.</p>

  570. 

  571. <p>Ben Thompson interviewed the co-founders of Substack <a href="https://stratechery.com/">in his own paid newsletter</a>, just the other day. It&rsquo;s behind a paywall. I&rsquo;ll quote just a little bit for you all.</p>

  572. 

  573. <p>On helping writers properly value themselves:</p>

  574. 

  575. <blockquote>

  576. <p>Something else we did early on actually is we set a minimum. We found that a lot of writers had no idea what to charge at all, and their instinct was to really underprice. People would be like “Do you think I could charge four bucks a year?” or ten cents an article or some sort of crazy thing, so right out of the gate we set a minimum of five bucks a month, in part to focus ourselves, because we only want to be working on stuff that’s really worth something to people.</p>

  577. </blockquote>

  578. 

  579. <p>This is good. Valuing one&rsquo;s own work is a crushing exercise in ego dissolution. Any outside help is welcome.</p>

  580. 

  581. <p>Also mentioned in the interview, something I hadn&rsquo;t before noticed / processed: Substack will allow anyone with a newsletter of <em>any size</em> to publish for free! 1,000, 10,000, 100,000 subscribers. Free. I pay Campaign Monitor roughly <strong>$2,000 a year</strong> to run my newsletters. That&rsquo;s just to send emails! In theory, I <em>could</em> transfer all of my lists to Substack and pay nothing. That&rsquo;s … tempting. (Although I lose all sorts of design control.) Does this make business sense? Thompson asks:</p>

  582. 

  583. <blockquote>

  584. <p>Do you think you can earn a sufficient return particularly supporting all these freemium offerings, if you have somebody that comes on your platform with tens of thousands of subscribers on an email list for which they’re paying Mailchimp two hundred dollars a month and you’re giving it to them for free, do you think that’s a sustainable number?</p>

  585. </blockquote>

  586. 

  587. <p>And they respond:</p>

  588. 

  589. <blockquote>

  590. <p>We think it is. Sending email is way cheaper if you’re a developer than it is if you’re an end user, this is just one of these weird arbitrage things. It’s a little bit of a tangent, but the price that you pay for emails to a Mailgun or a SendGrid or if you want to do your own email, is many orders of magnitude less than what you pay if you’re a consumer that goes to Mailchimp, which is a nice feature for us. I think that we can charge more in the future if we have ways to add even more value and I think the clearest way we can do that if we can get you marginal subscribers.</p>

  591. </blockquote>

  592. 

  593. <p>The main reason folks like me pay for Campaign Monitor or Mail Chimp is deliverability. When you&rsquo;re sending to tens of thousands of subscribers, it&rsquo;s easier (theoretically) to land in an inbox via an established entity than by sending on your own. Also, the logistics of sending that many emails is complicated. In theory: You can run <a href="https://www.phplist.org/about/">open source newsletter software</a> on your own server, use your own mail servers, and pay very little, but the setup and maintenance is non-trivial. Substack is leaning on this &ldquo;arbitrage&rdquo; opportunity, as they call it. That&rsquo;s smart. And if monetization is literally just flipping a switch, then that&rsquo;s a seductive switch to have nearby.</p>

  594. 

  595. <p>BUT. As Thompson points out in his follow-up newsletter:</p>

  596. 

  597. <blockquote>

  598. <p>To be clear, I believe this business model works, and for more people than myself; however, is supporting people like me a $150 million business, which would give Andreessen Horowitz its 10x return? I’m not so sure, particularly since any moves to maximize Substack’s revenue run the risk of losing its most profitable publishers out the top. I do think it is a reasonable bet by Andreessen Horowitz, but then again, their default position is that most of their investments will not generate that 10x return.</p>

  599. </blockquote>

  600. 

  601. <p>He then updated this note the next day:</p>

  602. 

  603. <blockquote>

  604. <p>First, I noted that Substack would have to become a $150 million company to earn Andreessen Horowitz a 10x return; actually, Substack would have to increase their valuation — which they didn’t disclose — by 10x. To pick a number out of thin air, if Substack is now valued at $50 million, it would have to become a $500 million company.</p>

  605. </blockquote>

  606. 

  607. <p>I like that Substack has a very boring, very real business model. But Substack will have to change significantly to hit a $150m (or $500m; at a certain point this becomes blurily large, either of those numbers is means a total change of business) target. And when businesses change in valuation-driven ways it&rsquo;s often towards complexity and (in the case of publishing startups) reader-hostility.</p>

  608. 

  609. <p>Substack seems like a perfect $20-$50M business. Focused squarely on achieving their core goal of empowering individual writers, giving them tools to publish, and making subscriptions around those publications friction-free and effortless. In some ways, Substack is a do-over on Arment&rsquo;s <a href="https://marco.org/2012/10/11/the-magazine"><em>The Magazine</em></a> model, a couple-degree shift on what the old Apple Newsstand promised. But it&rsquo;s simpler, more naturally integrated with reader and writer workflows, and built on <a href="https://craigmod.com/essays/newsletters/">open-network</a> tools (email!).</p>

  610. 

  611. <p>In the publishing industry some of the smallest players have the biggest impacts. Graywolf publishes translations that the bigger houses won&rsquo;t touch (<em>Out Stealing Horses</em> comes to mind). The smaller pubs can take bigger risks on poetry and Lit with a capital L. Pulitzer Prize winner, <em>Tinkers</em>, was put out by the tiny Bellevue Literary Press. Many are non-profit. Part of me wishes there was more of a trend in the startup world to build sustainably small, single-serving, hyper-focused, <em>culturally-impactful</em> businesses.</p>

  612. 

  613. <p>Well, in the case of newsletters, we have one! If you are looking for an Indie Solution to paid newsletters, check out <a href="https://buttondown.email/">Buttondown</a>. They also have a newsletter subscription model (on top of the usual free newsletter option). The service is run by one person. The <a href="https://www.notion.so/639bdb37786e489a960d4810ee6ce351?v=58ef759254094357bdb04d715e9c518b">product roadmap</a> — as well as <a href="https://buttondown.email/running-costs">running costs</a> — is online. I&rsquo;d go so far as to call it the natural successor to TinyLetter. It&rsquo;s of that ethos but … better in every way. (<a href="https://jmduke.com/">Justin</a>, the dude who runs it, also seems like a lovely human and is a damn fine writer, too. He, the mythical beast who both writes-well <em>and</em> engineers-well!)</p>

  614. 

  615. <hr />

  616. 

  617. <p>Good god, I didn&rsquo;t expect to write this much about newsletters. But newsletters are strangely important (culturally, politically, philosophically) right now. Maybe this all make a little more sense?</p>

  618. 

  619. <p>Anyway — tools that helps writers lean on open infrastructure to write freely, without click-bait headlines, and without reliance on ad models are, I believe, good for us all. Here&rsquo;s to hoping Substack puts their new cash to healthy use.</p>

  620. 

  621. <hr />

  622. 

  623. <p><img src="https://craigmod.com/roden/img/028/bed-16.jpg" alt="Bed 16" style="width: 100%; height: auto;" class="fullbleed" /></p>

  624. 

  625. <h4 id="megapixels">Megapixels</h4>

  626. 

  627. <p>What does 102 megapixels get you? <a href="https://petapixel.com/2019/07/18/this-crop-shows-the-crazy-resolution-of-the-102mp-fujifilm-gfx100/">Mega cropping</a>.</p>

  628. 

  629. <p>Forthcoming iPhones to have <a href="https://www.macrumors.com/2019/07/18/hands-on-2019-iphone-dummy-models/">three lenses</a>. Three tiny lenses don&rsquo;t resolve to a single 102 megapixel sensor, but interesting algorithmic capabilities begin to emerge; what that GFX100 is doing and what the iPhone will eventually do, might not be too distant from one another.</p>

  630. 

  631. <p>Camera technology improvements are my favorite part of iPhone updates.</p>

  632. 

  633. <hr />

  634. 

  635. <p><img src="https://craigmod.com/roden/img/028/bed-10.jpg" alt="Bed 10" style="width: 100%; height: auto;" class="fullbleed" /></p>

  636. 

  637. <h4 id="beds">Beds</h4>

  638. 

  639. <p>These were some of my beds from the Long Walk. <a href="https://craigmod.com/roden/027">Last issue</a> you got clocks. This issue, beds.</p>

  640. 

  641. <p>I&rsquo;d wake up, roll out of the (usually) futon. And take the shot. I slept in strange little inns, <em>minshuku</em> (essentially homes that offer a room), odd hotels themed around John F. Kennedy, guest-houses — almost every permutation of lodge you can imagine. I had a system, a method for achieving some semblance of sameness between the many different rooms: I slept with earplugs and an eyemask, and on my computer, I played a white noise app. You&rsquo;d be amazed at how powerful white noise is for drowning out almost all other sounds in the world.</p>

  642. 

  643. <p>Were you to walk past my room on some evening, somewhere in the countryside of Japan, and hear a faint <em>hissssss</em> sound, then you knew I was deep in slumber.</p>

  644. 

  645. <hr />

  646. 

  647. <p>OK — ready for a big essay on Speedy Software? I thought so:</p>

  648. 

  649. <hr />

  650. 

  651. <p><img src="https://craigmod.com/roden/img/028/bed-13.jpg" alt="Bed 13" style="width: 100%; height: auto;" class="fullbleed" /></p>

  652. 

  653. <h4 id="never-fast-enough">Never fast enough</h4>

  654. 

  655. <p>I love <em>fast</em> software. That is, software speedy both in function and interface. Software with minimal to no lag between wanting to activate or manipulate something and the thing happening. Lightness.</p>

  656. 

  657. <p>Software that’s speedy usually means it’s focused. Like a good tool, it often means that it’s simple, but that’s not necessarily true. Speed in software is probably the most valuable, least valued asset. To me, speedy software is the difference between an application smoothly integrating into your life, and one called upon with great reluctance. Fastness in software is like great margins in a book — makes you smile without necessarily knowing why.</p>

  658. 

  659. <hr />

  660. 

  661. <p>One of my most used, most speedy pieces of software is <a href="https://brettterpstra.com/projects/nvalt/">nvALT</a>. It’s an oddly named, very bland application. Just a database of plain text files with a plain text editor bolted on. But it’s fast. The fastest piece of text cataloging software I’ve used. It opens instantly and produces results instantly. My nvALT database is full of ten years of notes. Open it and your cursor is already in the search field. It is keyboard friendly software: If you’re ever not in the search field, just hit ESC, and you’ll land there. Type a few letters and all the notes with those letters appear. It is the best instantiation of an off-board brain I have. Any piece of text with value in my life gets dumped into nvALT.</p>

  662. 

  663. <p>nvALT syncs with <a href="https://simplenote.com">Simplenote</a>. This is handy because nvALT is macOS only. So you can use the Simplenote iOS app to keep your extra brain nearby on the go. Simplenote also has a macOS app. You may think: Why not use the Simplenote desktop application? Because — it’s not <em>quite</em> as fast. We’re talking milliseconds, but it’s enough that you <em>feel</em> the difference. It’s the difference between the <a href="https://www.youtube.com/watch?v=TD2XGwmRJi8">$1000 Japanese garden shears</a> and the $150 garden shears. They both cut just fine, but if you work in the garden all day, you will (probably?) feel the difference.</p>

  664. 

  665. <hr />

  666. 

  667. <p>I write mainly in <a href="https://ulysses.app/">Ulysses</a>. Even now, I’m writing this in Ulysses. Ulysses works well for organizing large-ish bodies of writing. The organization is mainly why I use it. But it can slow down. Ulysses has slowed down on a number of occasions. If I have a 5,000 word article and type towards the top of it, it sometimes can’t keep up with my typing. It re-renders the whole thing with each keystroke. This drives me bonkers. But the organization and simplicity of the application outweigh this sometimes-slowness. Still, the slowness feels indicative of unseen rot on the inside of the machine. The slowness is like an off smell. I don’t trust the application as much as I would if it didn’t slow down on such a small text file. 5,000 words is nothing. Faith is tested: It makes me wonder how good the sync capabilities are. It makes me wonder if the application will lose data.</p>

  668. 

  669. <p>Speed and reliability are often intuited hand-in-hand. Speed can be a good proxy for general engineering quality. If an application slows down on simple tasks, then it can mean the engineers aren’t obsessive detail sticklers. Not always, but it can mean disastrous other issues lurk. I want all my craftspeople to stickle. I don’t think Ulysses is badly made, but I am less confident in it than if it handled input and interface speed with more grace. Speed would make me trust it <em>more</em>.</p>

  670. 

  671. <p>As a counter example, <a href="https://www.sublimetext.com/">Sublime Text</a> never slows down for me. I can throw a 50,000 <em>line</em> file at it and it zips along. You may wonder why I don’t write in Sublime Text (as I sometimes wonder). And the answer is: It’s just not quite <em>nice</em> enough for full composition. Sublime&rsquo;s typography, spell check, file organization (no keywords, inability to organize order willy-nilly, etc)

  672. — just not as refined. Sublime Text is optimized for code, not words. Whereas Ulysses is word-focused. The difference is subtle but meaningful. That said, Sublime Text has — in my experience — only gotten faster. I love software that does this: Software that unbloats over time. This should be the goal of all software. The longer it’s around, the more elegant it should become. Smooth over like a river stone. I have full trust in the engineering of Sublime Text because I’ve used it for over a decade, but also because it always feels like a fast, focused tool (even though it’s actually very complicated) and has only become faster the longer I&rsquo;ve used it.</p>

  673. 

  674. <hr />

  675. 

  676. <p>Adobe Lightroom does not feel like a fast, focused tool. Nor does Photoshop. At one point, they did. It’s why I chose them. Photoshop in the 90s was very fast. I don’t think I’m invoking some halcyon fantasy. It was truly a sparky piece of code. Similarly, I started using Lightroom around 2007 because it was so much faster than Apple’s Aperture. But Aperture is gone and Lightroom has not smoothed out over the years. Lightroom is a gangly blob, with lots of dull, slow edges. Why can’t it get faster? This is a mystery for the ages, but I suspect it’s because of sub-optimal core engineering. Is this why Adobe released Lightroom CC? Probably. It’s sometimes easier to make a new program than to fix the old one.</p>

  677. 

  678. <p>Photoshop is now a turkey. Just opening the new file dialog in Photoshop takes seconds. Seconds to create a new, blank file. In 2019. If you press <span class="sc">cmd-opt-shift-w</span> to export an image, it takes 3-5 seconds to load that screen. (And if you accidentally press cmod-opt-w, it closes all your windows.) Slower and slower with each release. It’s why I spent money on <a href="https://affinity.serif.com/en-gb/photo/">Affinity Photo</a>. Simply for speed. That’s it. I still pay for a Creative Cloud license (for Lightroom and InDesign mainly), but I <em>happily</em> paid for Affinity — a vote with dollars — because it’s so fast, and especially fast at exporting files for web consumption. I sigh — actually sigh — whenever I have to open Photoshop.</p>

  679. 

  680. <hr />

  681. 

  682. <p>One could argue that design apps like <a href="https://www.sketch.com/">Sketch</a> have grown in popularity because of speed. Sketch was so much faster, simpler, and more UX design focused than most anything Adobe offered when it was released. It had reliability issues, but we were willing to overlook them because it was, once again, just <em>fun</em> to use. In this way, speed can be tremendous commercial asset. When it comes to software that people live in all day long, a 3% increase in fun should not be dismissed.</p>

  683. 

  684. <p><a href="https://www.figma.com/">Figma</a> is another design tool in the vein of Sketch or Illustrator. In spite of being browser based, Figma is so fast that I laugh from delight whenever I use it. It feels precisely as fast as everything should be on a contemporary computer — which is, extremely. It feels loved. I know the engineering and design teams behind it and I know it <em>is</em> loved. It is built from a position of craft. Close-to-the-metal craft. And you feel it. Not only in speed as speed, but speed as intuitiveness. That is: The tools work more sensibly than the same tools in, say, Illustrator. The <a href="https://medium.com/@rajipurcell/figma-a-solid-ui-design-app-thats-finally-improved-the-pen-tool-6103fa7a64b3">pen tool</a> for example. In Figma the pen tool operates from a position of rationality. In this sense, “speed” manifests not only in work per computer cycle, but work per user cycle.</p>

  685. 

  686. <hr />

  687. 

  688. <p>Google Maps is dying a tragic, public death by a thousand cuts of slowness. Google has added animations all over Google Maps. They are nice individually, but in aggregate they are very slow. Google Maps used to be a fast, focused tool. It’s now quite bovine. If you push the wrong button, it moos. Clunky, you could say. Overly complex. Unnecessarily layered. Perhaps it’s trying to do too much? To back out of certain modes — directions, for example — a user may have to tap four or five different areas and endure as many slow animations.</p>

  689. 

  690. <p>Google Maps has gotten so slow, that I did the unthinkable: I reinstalled Apple Maps on my iPhone. Apple Maps in contrast, today, is downright zippy and responsive. The data still isn&rsquo;t as good as Google Maps, but this a good example of where slowness pushed me to reinstall an app I had all but written off.</p>

  691. 

  692. <hr />

  693. 

  694. <p>For the absolute nadir of software clunkery, see exhibit a) iTunes. So slow, so laden, so burdened with being more than it ever was supposed to be that Apple decided to just throw it in the toilet, <a href="https://www.macrumors.com/2019/05/31/goodbye-itunes/">reconstitute it as a series of individual applications</a>. Which is most certainly the best choice to have been made.</p>

  695. 

  696. <p>But why is slow bad? Fast software is not always good software, but slow software is rarely able to rise to greatness. Fast software gives the user a chance to “meld” with its toolset. That is, not break flow. When the nerds upon Nerd Hill fight to the death over Vi and Emacs, it&rsquo;s partly because they have such a strong affinity for the flow of the application and its meldiness. They have invested. The Tool Is Good, so they feel. Not breaking flow is an axiom of great tools.</p>

  697. 

  698. <p>A typewriter is an excellent tool because, even though it&rsquo;s slow in a relative sense, every aspect of the machine itself operates as quickly as the user can move. It is focused. There are no delays when making a new line or slamming a key into the paper. Yes, you have to put a new sheet of paper into the machine at the end of a page, but that action becomes part of the flow of using the machine, and the accumulation of paper a visual indication of work completed. It is not wasted work. There are no fundamental mechanical delays in using the machine. The best software inches ever closer to the physical directness of something like a typewriter. (The machine may break down, of course, ribbons need to be changed — but this is maintenance and separate from the use of the tool. I’d be <em>delighted</em> to “maintain” Photoshop if it would lighten it up.)</p>

  699. 

  700. <hr />

  701. 

  702. <p>Speed manifests in the language — the literal words — of software, too. In recent years, macOS dialogs for closing an unsaved file have shifted from “Don’t Save, Cancel, Save” to “Delete, Cancel, Save.” This is only my opinion, but “Delete, Cancel, Save” makes less sense than “Don’t Save, Cancel, Save.” The option to “delete” implies something as having once been saved. Did I save this and forget I saved it? Or did it auto-save? I don’t know. Shake it any which way you like, I am still tripped up seeing this dialog when I close an unsaved file. It slows me down. Pressing delete feels violent. <em>Delete</em>. So final. I second guess — maybe I don’t want to delete? Maybe I <em>do</em> want to save. When, no, I just wanted to “Don’t Save.”</p>

  703. 

  704. <hr />

  705. 

  706. <p>I am using the iPadOS 13 beta on my iPad. It has one new interface component in particular that is extremely fast and delightful: the so-called &ldquo;Slide Over.&rdquo; Just swipe from the right and — <em>sloop</em> — an app float-over appears. The floating app is a mini-version of a big app and appears as quickly as you swipe. It feels satisfying. You move your finger and — instantly — there is the tiny app under your finger. Swipe back and it is gone. No “redrawing” of the screen. At the bottom of the tiny app is a small bar. Swipe the bar and the mini apps cycle. They cycle with a fast, beautiful animation that indicates where you&rsquo;ve been and where you&rsquo;re going. It&rsquo;s an animation with purpose and that purpose is context iteration. It feels tactile. Excellent touch interfaces feel tactile. The best &ldquo;touch interfaces,&rdquo; in my opinion, are actual buttons, things with physicality, haptics. But on a screen, to feel tactile is to move without latency.</p>

  707. 

  708. <p>From a speed and user experience point of view, I believe this Slide Over to be <em>vastly</em> superior to the screen-split on the iPad. The screen-split is slow. You have tap, hold, drag, wait for the screen to “redraw” itself, for the apps to shimmy-blink into their new sizes. The screen-split feels like it controverts the code under the hood. Contrast this with the Slide Over. The Slide Over feels like a natural extension of the iPad environment. It is quickly and reliably invokable. It is predictable. It feels like its code is moving in natural synchronicity with the disposition of the device. <em>And</em> with a speed commensurate to the power lurking under the glass. The screen-split could work, but the foundation code probably needs to be rewritten. Ideally it would be as smooth and fast as the Slide Over. It would be like cutting an unnecessary branch with $1,000 shears.</p>

  709. 

  710. <hr />

  711. 

  712. <p>I can go on and on. But let&rsquo;s end with an example of a piece of iOS software that is pure craft: <a href="https://apps.apple.com/us/app/things-3-for-ipad/id904244226">Things</a>. Things on iPad and iPhone is one of the most tactile, fast-as-you-can-move apps around. Each animation is purposeful. Mainly, it is <em>fun</em>. It’s a fun app to be in. To put stuff into, to rearrange. It is old. Things has been around for over ten years. I was glad to open it ten years ago, and I am glad to open it today.</p>

  713. 

  714. <hr />

  715. 

  716. <p>It feels — intuitively — that software (beyond core functionality) should aim for speed. Speed as a proxy for efficiency. If a piece of software is becoming taurine-esque, unwieldy, then perhaps it shouldn&rsquo;t be a <em>single</em> piece of software. Ultimately, to be fast is to be light. And to be light is to lessen the burden on someone or some task. This is the ultimate goal: For our pocket supercomputers to lesson burdens, not increase them. For our mega-powered laptops to enable a kind of fluency — not battle, or struggle — of creation.</p>

  717. 

  718. <p>All that said: It’s easy to write an essay about fast software. It’s difficult to make fast software. But when it&rsquo;s made, we&rsquo;re all grateful.</p>

  719. 

  720. <hr />

  721. 

  722. <p><img src="https://craigmod.com/roden/img/028/bed-04.jpg" alt="Bed 04" style="width: 100%; height: auto;" class="fullbleed" /></p>

  723. 

  724. <p>OK … That was approximately 8x longer than expected!</p>

  725. 

  726. <p>Still there? Reminder — NYC, August 8th, giving a little talk. Very informal — walks, Japan, walking history, SMS publishing, one-off books … that sort of thing. Grab a ticket here (mainly so we know how many are coming):</p>

  727. 

  728. <p><a href="https://peatix.com/event/885437/">https://peatix.com/event/885437/</a></p>

  729. 

  730. <p>Hope to see a few of you at the Yale Publishing Course in a week!</p>

  731. 

  732. <p>As always, thanks for following along.</p>

  733. 

  734. <p>C</p>

  735. 

  736. <hr />

  737. 

  738. <p><a href="https://craigmod.com/membership/"><img src="https://craigmod.com/roden/img/028/bed-14.jpg" alt="Bed 14" style="width: 100%; height: auto;" class="fullbleed" /></a></p>

  739.   </article>

  740. </section>

  741. 

  742. 

  743. <nav id="jumpto">

  744.   <p>

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

  746.     <a href="https://craigmod.com/roden/028/">Source originale</a> |

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

  748.   </p>

  749. </nav>

  750. 

  751. <footer>

  752.   <div>

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

  754.     <p>

  755.       Bonjour/Hi!

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

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

  758.     </p>

  759.     <p>

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

  761.     </p>

  762.     

  763.     <p>

  764.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  781.     </p>

  782.     <p>

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

  784.     </p>

  785.     <p>

  786.       Je ne traque pas ta navigation mais mon

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

  788.       conserve des logs d’accès.

  789.     </p>

  790.   </div>

  791. </footer>

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

  793.   ;(_ => {

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

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

  796.       e.preventDefault()

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

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

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

  800.     })

  801.   })()

  802. </script>