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

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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750 
  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>Choose Boring Technology (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="http://mcfunley.com/choose-boring-technology">

  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.   Choose Boring Technology (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="http://mcfunley.com/choose-boring-technology">Source originale du contenu</a></h3>

  463.     <p>Probably the single best thing to happen to me in my career was having had <a href="http://laughingmeme.org/">Kellan</a> placed in charge of me. I stuck around long enough to see Kellan's technical decisionmaking start to bear fruit. I learned a great deal <em>from</em> this, but I also learned a great deal as a <em>result</em> of this. I would not have been free to become the engineer that wrote <a href="/data-driven-products-lean-startup-2014">Data Driven Products Now!</a> if Kellan had not been there to so thoroughly stick the landing on technology choices. </p>

  464. 

  465. <figure>

  466.   <img src="http://i.imgur.com/FRQKLCy.jpg"/>

  467.   <figcaption>Being inspirational as always.</figcaption>

  468. </figure>

  469. 

  470. <p>In the year since leaving Etsy, I've resurrected my ability to care about technology. And my thoughts have crystallized to the point where I can write them down coherently. What follows is a distillation of the Kellan gestalt, which will hopefully serve to horrify him only slightly.</p>

  471. 

  472. <h3>Embrace Boredom.</h3>

  473. 

  474. <p>Let's say every company gets about three innovation tokens. You can spend these however you want, but the supply is fixed for a long while. You might get a few more <em>after</em> you achieve a <a href="http://rc3.org/2015/03/24/the-pleasure-of-building-big-things/">certain level of stability and maturity</a>, but the general tendency is to overestimate the contents of your wallet. Clearly this model is approximate, but I think it helps.</p>

  475. 

  476. <p>If you choose to write your website in NodeJS, you just spent one of your innovation tokens. If you choose to use <a href="/why-mongodb-never-worked-out-at-etsy">MongoDB</a>, you just spent one of your innovation tokens. If you choose to use <a href="https://consul.io/">service discovery tech that's existed for a year or less</a>, you just spent one of your innovation tokens. If you choose to write your own database, oh god, you're in trouble.</p>

  477. 

  478. <p>Any of those choices might be sensible if you're a javascript consultancy, or a database company. But you're probably not. You're probably working for a company that is at least ostensibly <a href="https://www.etsy.com">rethinking global commerce</a> or <a href="https://stripe.com">reinventing payments on the web</a> or pursuing some other suitably epic mission. In that context, devoting any of your limited attention to innovating ssh is an excellent way to fail. Or at best, delay success <a ref="#f1" href="#f1" class="footnote">[1]</a>.</p>

  479. 

  480. <p>What counts as boring? That's a little tricky. "Boring" should not be conflated with "bad." There is technology out there that is both boring and bad <a ref="#f2" href="#f2">[2]</a>. You should not use any of that. But there are many choices of technology that are boring and good, or at least good enough. MySQL is boring. Postgres is boring. PHP is boring. Python is boring. Memcached is boring. Squid is boring. Cron is boring.</p>

  481. 

  482. <p>The nice thing about boringness (so constrained) is that the capabilities of these things are well understood. But more importantly, their failure modes are well understood. Anyone who knows me well will understand that it's only with a overwhelming sense of malaise that I now invoke the spectre of Don Rumsfeld, but I must. </p>

  483. 

  484. <figure>

  485.   <img src="http://i.imgur.com/n8ElWr3.jpg"/>

  486.   <figcaption>To be clear, fuck this guy.</figcaption>

  487. </figure>

  488. 

  489. <p>When choosing technology, you have both known unknowns and unknown unknowns <a ref="#f3" href="#f3" class="footnote">[3]</a>. </p>

  490. 

  491. <ul>

  492. <li>A known unknown is something like: <em>we don't know what happens when this database hits 100% CPU.</em> </li>

  493. <li>An unknown unknown is something like: <em>geez it didn't even occur to us that <a href="http://www.evanjones.ca/jvm-mmap-pause.html">writing stats would cause GC pauses</a>.</em> </li>

  494. </ul>

  495. 

  496. <p>Both sets are typically non-empty, even for tech that's existed for decades. But for shiny new technology the magnitude of unknown unknowns is significantly larger, and this is important.</p>

  497. 

  498. <h3>Optimize Globally.</h3>

  499. 

  500. <p>I unapologetically think a bias in favor of boring technology is a good thing, but it's not the only factor that needs to be considered. Technology choices don't happen in isolation. They have a scope that touches your entire team, organization, and the system that emerges from the sum total of your choices. </p>

  501. 

  502. <p>Adding technology to your company comes with a cost. As an abstract statement this is obvious: if we're already using Ruby, adding Python to the mix doesn't feel sensible because the resulting complexity would outweigh Python's marginal utility. But somehow when we're talking about Python and Scala or MySQL and Redis people <a href="http://martinfowler.com/bliki/PolyglotPersistence.html">lose their minds</a>, discard all constraints, and start raving about using the best tool for the job. </p>

  503. 

  504. <p><a href="https://twitter.com/coda/status/580531932393504768">Your function in a nutshell</a> is to map business problems onto a solution space that involves choices of software. If the choices of software were truly without baggage, you could indeed pick a whole mess of locally-the-best tools for your assortment of problems.</p>

  505. 

  506. <figure>

  507. <svg viewbox="0 0 423 420" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

  508. 

  509.     <title>Crazy</title>

  510.     <desc>Created with Sketch.</desc>

  511.     <defs/>

  512.     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

  513.         <g id="Crazy" sketch:type="MSLayerGroup" transform="translate(1.000000, -4.000000)">

  514.             <ellipse id="Solutions" stroke="#979797" sketch:type="MSShapeGroup" cx="341.5" cy="229.5" rx="79.5" ry="193.5"/>

  515.             <ellipse id="Problems" stroke="#979797" sketch:type="MSShapeGroup" cx="79.5" cy="229.5" rx="79.5" ry="193.5"/>

  516.             <g id="arrows" transform="translate(45.000000, 77.000000)" stroke="#D0011B" stroke-width="3" fill="#D0011B" stroke-linecap="square">

  517.                 <path d="M19.5,26.5 L255.502121,26.5" id="Line" sketch:type="MSShapeGroup"/>

  518.                 <path id="Line-decoration-1" d="M255.5,26.5 C251.72,25.45 248.48,24.55 244.7,23.5 C244.7,25.6 244.7,27.4 244.7,29.5 C248.48,28.45 251.72,27.55 255.5,26.5 C255.5,26.5 255.5,26.5 255.5,26.5 Z"/>

  519.                 <path d="M19.5,26.5 L245.5,84.5" id="Line-2" sketch:type="MSShapeGroup"/>

  520.                 <path id="Line-2-decoration-1" d="M245.186355,84.419507 C241.786016,82.4628271 238.87144,80.7856729 235.471101,78.8289931 C234.94908,80.8630761 234.501633,82.6065758 233.979612,84.6406589 C237.901972,84.5632557 241.263995,84.4969101 245.186355,84.419507 C245.186355,84.419507 245.186355,84.419507 245.186355,84.419507 Z"/>

  521.                 <path d="M19.5,26.5 L299.5,0.5" id="Line-3" sketch:type="MSShapeGroup"/>

  522.                 <path id="Line-3-decoration-1" d="M299.296324,0.518912741 C295.435434,-0.177093062 292.126099,-0.773669465 288.265208,-1.46967527 C288.459373,0.621329291 288.6258,2.41361891 288.819965,4.50462347 C292.486691,3.10962472 295.629598,1.9139115 299.296324,0.518912741 C299.296324,0.518912741 299.296324,0.518912741 299.296324,0.518912741 Z"/>

  523.                 <path d="M19.5,26.5 L255.502121,26.5" id="Line-4" sketch:type="MSShapeGroup"/>

  524.                 <path id="Line-4-decoration-1" d="M255.5,26.5 C251.72,25.45 248.48,24.55 244.7,23.5 C244.7,25.6 244.7,27.4 244.7,29.5 C248.48,28.45 251.72,27.55 255.5,26.5 C255.5,26.5 255.5,26.5 255.5,26.5 Z"/>

  525.                 <path d="M63.5,79.5 L256.5,34.5" id="Line-5" sketch:type="MSShapeGroup"/>

  526.                 <path id="Line-5-decoration-1" d="M256.327927,34.5401208 C252.408243,34.3758734 249.048513,34.2350899 245.128829,34.0708426 C245.605677,36.1159872 246.014403,37.8689684 246.49125,39.9141131 C249.934087,38.0332157 252.88509,36.4210181 256.327927,34.5401208 C256.327927,34.5401208 256.327927,34.5401208 256.327927,34.5401208 Z"/>

  527.                 <path d="M63.5,79.5 L301.5,116.5" id="Line-6" sketch:type="MSShapeGroup"/>

  528.                 <path id="Line-6-decoration-1" d="M300.651315,116.368062 C297.077479,114.749853 294.014192,113.362816 290.440356,111.744607 C290.117761,113.819681 289.84125,115.598316 289.518655,117.67339 C293.415086,117.216525 296.754884,116.824927 300.651315,116.368062 C300.651315,116.368062 300.651315,116.368062 300.651315,116.368062 Z"/>

  529.                 <path d="M63.5,79.5 L254.5,209.5" id="Line-7" sketch:type="MSShapeGroup"/>

  530.                 <path id="Line-7-decoration-1" d="M254.464216,209.475644 C251.930146,206.480751 249.758085,203.9137 247.224014,200.918806 C246.042418,202.654845 245.02962,204.142878 243.848024,205.878916 C247.563691,207.137771 250.748549,208.216789 254.464216,209.475644 C254.464216,209.475644 254.464216,209.475644 254.464216,209.475644 Z"/>

  531.                 <path d="M0.5,115.5 L251.5,216.5" id="Line-8" sketch:type="MSShapeGroup"/>

  532.                 <path id="Line-8-decoration-1" d="M250.981706,216.291443 C247.866929,213.906268 245.19712,211.861831 242.082342,209.476656 C241.298409,211.424847 240.626466,213.094725 239.842533,215.042916 C243.741243,215.4799 247.082995,215.854459 250.981706,216.291443 C250.981706,216.291443 250.981706,216.291443 250.981706,216.291443 Z"/>

  533.                 <path d="M54.5,176.5 L300.5,193.5" id="Line-10" sketch:type="MSShapeGroup"/>

  534.                 <path id="Line-10-decoration-1" d="M299.914697,193.459552 C296.216079,192.151452 293.045835,191.030224 289.347217,189.722124 C289.202441,191.817128 289.078346,193.612845 288.93357,195.707849 C292.776964,194.920945 296.071303,194.246456 299.914697,193.459552 C299.914697,193.459552 299.914697,193.459552 299.914697,193.459552 Z"/>

  535.                 <path d="M54.5,176.5 L288.5,273.5" id="Line-11" sketch:type="MSShapeGroup"/>

  536.                 <path id="Line-11-decoration-1" d="M288.215373,273.382013 C285.125578,270.964562 282.477183,268.892461 279.387389,266.47501 C278.58323,268.41494 277.89395,270.077737 277.089791,272.017667 C280.983745,272.495188 284.321419,272.904492 288.215373,273.382013 C288.215373,273.382013 288.215373,273.382013 288.215373,273.382013 Z"/>

  537.                 <path d="M11.5,231.5 L287.5,283.5" id="Line-12" sketch:type="MSShapeGroup"/>

  538.                 <path id="Line-12-decoration-1" d="M286.658962,283.341544 C283.138722,281.609837 280.121373,280.125516 276.601133,278.393809 C276.212321,280.457502 275.879054,282.226381 275.490243,284.290073 C279.399294,283.958088 282.74991,283.673529 286.658962,283.341544 C286.658962,283.341544 286.658962,283.341544 286.658962,283.341544 Z"/>

  539.                 <path d="M11.5,231.5 L249.5,223.5" id="Line-13" sketch:type="MSShapeGroup"/>

  540.                 <path id="Line-13-decoration-1" d="M249.36566,223.504516 C245.552519,222.582095 242.284113,221.79145 238.470973,220.869029 C238.541521,222.967844 238.601991,224.766828 238.67254,226.865643 C242.415132,225.689248 245.623068,224.68091 249.36566,223.504516 C249.36566,223.504516 249.36566,223.504516 249.36566,223.504516 Z"/>

  541.                 <path d="M0.5,115.5 L248.5,156.5" id="Line-9" sketch:type="MSShapeGroup"/>

  542.                 <path id="Line-9-decoration-1" d="M248.138638,156.440259 C244.580524,154.78777 241.530711,153.371351 237.972596,151.718862 C237.630068,153.790739 237.336473,155.566633 236.993945,157.63851 C240.894588,157.219122 244.237996,156.859647 248.138638,156.440259 C248.138638,156.440259 248.138638,156.440259 248.138638,156.440259 Z"/>

  543.             </g>

  544.             <g id="problems" transform="translate(33.000000, 91.000000)" stroke="#979797" fill="#4990E2" sketch:type="MSShapeGroup">

  545.                 <circle id="Oval-3" cx="30" cy="14" r="14"/>

  546.                 <circle id="Oval-4" cx="74" cy="66" r="14"/>

  547.                 <circle id="Oval-5" cx="14" cy="103" r="14"/>

  548.                 <circle id="Oval-6" cx="64" cy="163" r="14"/>

  549.                 <circle id="Oval-7" cx="23" cy="219" r="14"/>

  550.             </g>

  551.             <g id="Solutions" transform="translate(293.000000, 68.000000)" stroke="#979797" fill="#7ED321" sketch:type="MSShapeGroup">

  552.                 <circle id="Oval-8" cx="26" cy="37" r="14"/>

  553.                 <circle id="Oval-9" cx="74" cy="69" r="14"/>

  554.                 <circle id="Oval-10" cx="14" cy="99" r="14"/>

  555.                 <circle id="Oval-11" cx="71" cy="129" r="14"/>

  556.                 <circle id="Oval-12" cx="18" cy="168" r="14"/>

  557.                 <circle id="Oval-13" cx="71" cy="205" r="14"/>

  558.                 <circle id="Oval-14" cx="22" cy="229" r="14"/>

  559.                 <circle id="Oval-15" cx="66" cy="14" r="14"/>

  560.                 <circle id="Oval-16" cx="58" cy="289" r="14"/>

  561.             </g>

  562.             <text id="Problems" sketch:type="MSTextLayer" font-family="Lato" font-size="18" font-weight="normal" fill="#000000">

  563.                 <tspan x="43" y="18">Problems</tspan>

  564.             </text>

  565.             <text id="Technical-Solutions" sketch:type="MSTextLayer" font-family="Lato" font-size="18" font-weight="normal" fill="#000000">

  566.                 <tspan x="262" y="18">Technical Solutions</tspan>

  567.             </text>

  568.         </g>

  569.     </g>

  570. </svg>

  571.   <figcaption>The way you might choose technology in a world where choices are cheap: "pick the right tool for the job."</figcaption>

  572. </figure>

  573. 

  574. <p>But of course, the baggage exists. We call the baggage "operations" and to a lesser extent "cognitive overhead." You have to monitor the thing. You have to figure out unit tests. You need to know the first thing about it to hack on it. You need an init script. I could go on for days here, and all of this adds up fast. </p>

  575. 

  576. <figure>

  577. <svg viewbox="0 0 423 420" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">

  578. 

  579.     <title>Sane</title>

  580.     <desc>Created with Sketch.</desc>

  581.     <defs/>

  582.     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">

  583.         <g id="Sane" sketch:type="MSLayerGroup" transform="translate(1.000000, -4.000000)">

  584.             <ellipse id="Solutions-3" stroke="#979797" sketch:type="MSShapeGroup" cx="341.5" cy="229.5" rx="79.5" ry="193.5"/>

  585.             <ellipse id="Problems-2" stroke="#979797" sketch:type="MSShapeGroup" cx="79.5" cy="229.5" rx="79.5" ry="193.5"/>

  586.             <g id="arrows" transform="translate(51.000000, 102.000000)" stroke="#D0011B" stroke-width="3" fill="#D0011B" stroke-linecap="square">

  587.                 <path d="M13.5,1.5 L249.5,1.5" id="Line-14" sketch:type="MSShapeGroup"/>

  588.                 <path id="Line-14-decoration-1" d="M249.5,1.5 C245.72,0.45 242.48,-0.45 238.7,-1.5 C238.7,0.6 238.7,2.4 238.7,4.5 C242.48,3.45 245.72,2.55 249.5,1.5 C249.5,1.5 249.5,1.5 249.5,1.5 Z"/>

  589.                 <path d="M13.5,1.5 L248.5,120.5" id="Line-15" sketch:type="MSShapeGroup"/>

  590.                 <path id="Line-15-decoration-1" d="M248.132239,120.313772 C245.23431,117.669362 242.75037,115.402724 239.852441,112.758314 C238.903738,114.631803 238.090564,116.237651 237.141861,118.111141 C240.988493,118.882062 244.285607,119.542851 248.132239,120.313772 C248.132239,120.313772 248.132239,120.313772 248.132239,120.313772 Z"/>

  591.                 <path d="M57.5,54.5 L249.5,8.5" id="Line-17" sketch:type="MSShapeGroup"/>

  592.                 <path id="Line-17-decoration-1" d="M249.078398,8.6010088 C245.157787,8.46060711 241.797264,8.34026282 237.876654,8.19986114 C238.365932,10.2420674 238.785314,11.9925299 239.274592,14.0347362 C242.705924,12.1329316 245.647066,10.5028134 249.078398,8.6010088 C249.078398,8.6010088 249.078398,8.6010088 249.078398,8.6010088 Z"/>

  593.                 <path d="M0.5,92.5 L240.5,137.5" id="Line-20" sketch:type="MSShapeGroup"/>

  594.                 <path id="Line-20-decoration-1" d="M240.320814,137.466403 C236.79906,135.737776 233.780414,134.256096 230.25866,132.52747 C229.871654,134.591501 229.539934,136.360671 229.152928,138.424703 C233.061688,138.089298 236.412054,137.801808 240.320814,137.466403 C240.320814,137.466403 240.320814,137.466403 240.320814,137.466403 Z"/>

  595.                 <path d="M57.5,52.5 L242.5,129.5" id="Line-18" sketch:type="MSShapeGroup"/>

  596.                 <path id="Line-18-decoration-1" d="M242.1449,129.352202 C239.058585,126.930309 236.413173,124.854402 233.326858,122.432509 C232.51991,124.371281 231.828241,126.033085 231.021292,127.971856 C234.914555,128.454977 238.251637,128.869081 242.1449,129.352202 C242.1449,129.352202 242.1449,129.352202 242.1449,129.352202 Z"/>

  597.                 <path d="M13.5,1.5 L248.5,183.5" id="Line-16" sketch:type="MSShapeGroup"/>

  598.                 <path id="Line-16-decoration-1" d="M248.313733,183.355742 C245.968119,180.211065 243.957592,177.515627 241.611978,174.37095 C240.32613,176.031249 239.223974,177.454363 237.938125,179.114662 C241.569588,180.59904 244.68227,181.871364 248.313733,183.355742 C248.313733,183.355742 248.313733,183.355742 248.313733,183.355742 Z"/>

  599.                 <path d="M0.5,92.5 L253.5,15.5" id="Line-19" sketch:type="MSShapeGroup"/>

  600.                 <path id="Line-19-decoration-1" d="M253.061904,15.6333334 C249.139957,15.7294168 245.778289,15.8117739 241.856342,15.9078572 C242.467781,17.9168724 242.991872,19.6388854 243.603311,21.6479005 C246.913819,19.542802 249.751397,17.7384319 253.061904,15.6333334 C253.061904,15.6333334 253.061904,15.6333334 253.061904,15.6333334 Z"/>

  601.                 <path d="M0.5,92.5 L244.5,191.5" id="Line-21" sketch:type="MSShapeGroup"/>

  602.                 <path id="Line-21-decoration-1" d="M244.204221,191.379991 C241.09632,188.985863 238.432405,186.933753 235.324504,184.539624 C234.534968,186.485551 233.858223,188.153489 233.068687,190.099416 C236.966124,190.547618 240.306784,190.93179 244.204221,191.379991 C244.204221,191.379991 244.204221,191.379991 244.204221,191.379991 Z"/>

  603.                 <path d="M49.5,150.5 L258.5,19.5" id="Line-22" sketch:type="MSShapeGroup"/>

  604.                 <path id="Line-22-decoration-1" d="M257.939322,19.8514296 C254.178828,20.9692764 250.955547,21.9274308 247.195052,23.0452775 C248.310345,24.8246376 249.26631,26.3498034 250.381603,28.1291635 C253.026805,25.2319566 255.29412,22.7486365 257.939322,19.8514296 C257.939322,19.8514296 257.939322,19.8514296 257.939322,19.8514296 Z"/>

  605.                 <path d="M3.5,207.5 L265.5,22.5" id="Line-23" sketch:type="MSShapeGroup"/>

  606.                 <path id="Line-23-decoration-1" d="M264.902063,22.9222075 C261.208605,24.2448071 258.042784,25.378464 254.349327,26.7010636 C255.560618,28.4165147 256.598868,29.8869013 257.81016,31.6023523 C260.292326,28.5643016 262.419897,25.9602582 264.902063,22.9222075 C264.902063,22.9222075 264.902063,22.9222075 264.902063,22.9222075 Z"/>

  607.                 <path d="M3.5,207.5 L243.5,147.5" id="Line-24" sketch:type="MSShapeGroup"/>

  608.                 <path id="Line-24-decoration-1" d="M243.125198,147.593701 C239.203396,147.491836 235.841853,147.404523 231.920052,147.302658 C232.429376,149.339957 232.865941,151.086214 233.375265,153.123513 C236.787742,151.188079 239.712721,149.529135 243.125198,147.593701 C243.125198,147.593701 243.125198,147.593701 243.125198,147.593701 Z"/>

  609.                 <path d="M3.5,207.5 L244.5,201.5" id="Line-25" sketch:type="MSShapeGroup"/>

  610.                 <path id="Line-25-decoration-1" d="M244.425346,201.501859 C240.620384,200.546263 237.358988,199.72718 233.554026,198.771584 C233.606292,200.870934 233.651091,202.670376 233.703357,204.769726 C237.456053,203.625972 240.67265,202.645612 244.425346,201.501859 C244.425346,201.501859 244.425346,201.501859 244.425346,201.501859 Z"/>

  611.             </g>

  612.             <g id="problems-2" transform="translate(33.000000, 91.000000)" stroke="#979797" fill="#4990E2" sketch:type="MSShapeGroup">

  613.                 <circle id="Oval-3" cx="30" cy="14" r="14"/>

  614.                 <circle id="Oval-4" cx="74" cy="66" r="14"/>

  615.                 <circle id="Oval-5" cx="14" cy="103" r="14"/>

  616.                 <circle id="Oval-6" cx="64" cy="163" r="14"/>

  617.                 <circle id="Oval-7" cx="23" cy="219" r="14"/>

  618.             </g>

  619.             <g id="Solutions-2" transform="translate(293.000000, 68.000000)" stroke="#979797" fill="#7ED321" sketch:type="MSShapeGroup">

  620.                 <circle id="Oval-8" cx="26" cy="37" r="14"/>

  621.                 <circle id="Oval-9" cx="74" cy="69" r="14"/>

  622.                 <circle id="Oval-10" cx="14" cy="99" r="14"/>

  623.                 <circle id="Oval-11" cx="71" cy="129" r="14"/>

  624.                 <circle id="Oval-12" cx="18" cy="168" r="14"/>

  625.                 <circle id="Oval-13" cx="71" cy="205" r="14"/>

  626.                 <circle id="Oval-14" cx="22" cy="229" r="14"/>

  627.                 <circle id="Oval-15" cx="66" cy="14" r="14"/>

  628.                 <circle id="Oval-16" cx="58" cy="289" r="14"/>

  629.             </g>

  630.             <text id="Problems-3" sketch:type="MSTextLayer" font-family="Lato" font-size="18" font-weight="normal" fill="#000000">

  631.                 <tspan x="43" y="18">Problems</tspan>

  632.             </text>

  633.             <text id="Technical-Solutions-2" sketch:type="MSTextLayer" font-family="Lato" font-size="18" font-weight="normal" fill="#000000">

  634.                 <tspan x="262" y="18">Technical Solutions</tspan>

  635.             </text>

  636.         </g>

  637.     </g>

  638. </svg>

  639. <figcaption>The way you choose technology in the world where operations are a serious concern (i.e., "reality"). </figcaption>

  640. </figure>

  641. 

  642. <p>The problem with "best tool for the job" thinking is that it takes a myopic view of the words "best" and "job." Your job is keeping the company in business, god damn it. And the "best" tool is the one that occupies the "least worst" position for as many of your problems as possible.</p>

  643. 

  644. <p>It is basically always the case that the long-term costs of keeping a system working reliably vastly exceed any inconveniences you encounter while building it. Mature and productive developers understand this.</p>

  645. 

  646. <h3>Choose New Technology, Sometimes.</h3>

  647. 

  648. <p>Taking this reasoning to its <em>reductio ad absurdum</em> would mean picking Java, and then trying to implement a website without using anything else at all. And that would be crazy. You need some means to add things to your toolbox.</p>

  649. 

  650. <p>An important first step is to acknowledge that this is a process, and a conversation. New tech eventually has company-wide effects, so adding tech is a decision that requires company-wide visibility. Your organizational specifics may force the conversation, or <a href="https://twitter.com/mcfunley/status/578603932949164032">they may facilitate developers adding new databases and queues without talking to anyone</a>. One way or another you have to set cultural expectations that <strong>this is something we all talk about</strong>.</p>

  651. 

  652. <p>One of the most worthwhile exercises I recommend here is to <strong>consider how you would solve your immediate problem without adding anything new</strong>. First, posing this question should detect the situation where the "problem" is that someone really wants to use the technology. If that is the case, you should immediately abort.</p>

  653. 

  654. <figure>

  655.   <img src="http://i.imgur.com/rmdSx.gif"/>

  656.   <figcaption>I just watched a webinar about this graph database, we should try it out.</figcaption>

  657. </figure>

  658. 

  659. <p>It can be amazing how far a small set of technology choices can go. The answer to this question in practice is almost never "we can't do it," it's usually just somewhere on the spectrum of "well, we could do it, but it would be too hard" <a ref="#f4" href="#f4" class="footnote">[4]</a>. If you think you can't accomplish your goals with what you've got now, you are probably just not thinking creatively enough.</p>

  660. 

  661. <p>It's helpful to <strong>write down exactly what it is about the current stack that makes solving the problem prohibitively expensive and difficult.</strong> This is related to the previous exercise, but it's subtly different.</p>

  662. 

  663. <p>New technology choices might be purely additive (for example: "we don't have caching yet, so let's add memcached"). But they might also overlap or replace things you are already using. If that's the case, you should <strong>set clear expectations about migrating old functionality to the new system.</strong> The policy should typically be "we're committed to migrating," with a proposed timeline. The intention of this step is to keep wreckage at manageable levels, and to avoid proliferating locally-optimal solutions. </p>

  664. 

  665. <p>This process is not daunting, and it's not much of a hassle. It's a handful of questions to fill out as homework, followed by a meeting to talk about it. I think that if a new technology (or a new service to be created on your infrastructure) can pass through this gauntlet unscathed, adding it is fine.</p>

  666. 

  667. <h3>Just Ship.</h3>

  668. 

  669. <p>Polyglot programming is sold with the promise that letting developers choose their own tools with complete freedom will make them more effective at solving problems. This is a naive definition of the problems at best, and motivated reasoning at worst. The weight of day-to-day operational <a href="https://twitter.com/handler">toil</a> this creates crushes you to death.</p>

  670. 

  671. <p>Mindful choice of technology gives engineering minds real freedom: the freedom to <a href="/effective-web-experimentation-as-a-homo-narrans">contemplate bigger questions</a>. Technology for its own sake is snake oil.</p>

  672. 

  673. <p><hr/>

  674. <ol class="footnote-list">

  675.     <li>Etsy in its early years suffered from this pretty badly. We hired a bunch of Python programmers and decided that we needed to find something for them to do in Python, and the only thing that came to mind was creating a pointless middle layer that <a href="https://www.youtube.com/watch?v=eenrfm50mXw">required years of effort to amputate</a>. Meanwhile, the 90th percentile search latency was about two minutes. <a href="http://www.sec.gov/Archives/edgar/data/1370637/000119312515077045/d806992ds1.htm">Etsy didn't fail</a>, but it went several years without shipping anything at all. So it took longer to succeed than it needed to.

  676.     </li>

  677.     <li>We often casually refer to the boring/bad intersection of doom as "enterprise software," but that terminology may be imprecise.

  678.     </li>

  679.     <li>In saying this Rumsfeld was either intentionally or unintentionally alluding to <a href="http://en.wikipedia.org/wiki/I_know_that_I_know_nothing">the Socratic Paradox</a>. Socrates was by all accounts a thoughtful individual in a number of ways that Rumsfeld is not.

  680.     </li>

  681.     <li><p>A good example of this from my experience is <a href="https://speakerdeck.com/mcfunley/etsy-activity-feed-architecture">Etsy's activity feeds</a>. When we built this feature, we were working pretty hard to consolidate most of Etsy onto PHP, MySQL, Memcached, and Gearman (a PHP job server). It was much more complicated to implement the feature on that stack than it might have been with something like Redis (or <a href="https://aphyr.com/posts/283-call-me-maybe-redis">maybe not</a>). But it is absolutely possible to build activity feeds on that stack.</p>

  682.     <p>An amazing thing happened with that project: our attention turned elsewhere for several years. During that time, activity feeds scaled up 20x while <em>nobody was watching it at all.</em> We made no changes whatsoever specifically targeted at activity feeds, but everything worked out fine as usage exploded because we were using a shared platform. This is the long-term benefit of restraint in technology choices in a nutshell.</p>

  683.     <p>This isn't an absolutist position--while activity feeds stored in memcached was judged to be practical, implementing full text search with faceting in raw PHP wasn't. So Etsy used Solr.

  684.     </p>

  685.     </li>

  686. </ol></p>

  687.   </article>

  688. </section>

  689. 

  690. 

  691. <nav id="jumpto">

  692.   <p>

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

  694.     <a href="http://mcfunley.com/choose-boring-technology">Source originale</a> |

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

  696.   </p>

  697. </nav>

  698. 

  699. <footer>

  700.   <div>

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

  702.     <p>

  703.       Bonjour/Hi!

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

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

  706.     </p>

  707.     <p>

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

  709.     </p>

  710.     

  711.     <p>

  712.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  729.     </p>

  730.     <p>

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

  732.     </p>

  733.     <p>

  734.       Je ne traque pas ta navigation mais mon

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

  736.       conserve des logs d’accès.

  737.     </p>

  738.   </div>

  739. </footer>

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

  741.   ;(_ => {

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

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

  744.       e.preventDefault()

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

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

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

  748.     })

  749.   })()

  750. </script>