davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 Commits
1 Branch
Tree: ce3bfdcef2
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'ce3bfdcef2'
${ noResults }
larlet-fr-david-cache/cache/285b39b2d9af1b76d39c072410e.../index.html

index.html 37KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653 
  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>Five Years Time (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://medium.com/@gkoberger/five-years-time-6a6ae1157a66">

  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.   Five Years Time (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://medium.com/@gkoberger/five-years-time-6a6ae1157a66">Source originale du contenu</a></h3>

  463.     <p name="fcd3" id="fcd3" class="graf--p">Exactly five years ago today, I was sitting in a conference room at Mozilla. After a long day of technical questions, I was meeting with Mike Morgan, the head of Mozilla’s WebDev team.</p>

  464. 

  465. <p name="8740" id="8740" class="graf--p graf--startsWithDoubleQuote"><em class="markup--em markup--p-em">“Where do you want to be in five years?”</em>, he asked.</p>

  466. 

  467. <p name="49b8" id="49b8" class="graf--p">This isn’t the story of how I spent 5 years building a startup. Rather, it’s about how I spent 5 years<em class="markup--em markup--p-em"> not </em>building a startup, and what I learned along the way.</p>

  468. 

  469. <h3 name="02a3" id="02a3" class="graf--h3">5 Years To Go<strong class="markup--strong markup--h3-strong">: Mozilla</strong></h3>

  470. 

  471. <p name="7b91" id="7b91" class="graf--p">In five years? I could have said I wanted to be a manager or lead engineer at Mozilla, but I didn’t. I was still in college, however had worked at a few startups as internships before this and loved them. <em class="markup--em markup--p-em">Uh, I liked working at startups, I think in 5 years I’d like to start my own?</em></p>

  472. 

  473. <p name="2101" id="2101" class="graf--p">Mike pressed me, though. <em class="markup--em markup--p-em">What will this company do?</em></p>

  474. 

  475. <p name="3618" id="3618" class="graf--p">So I went on to describe an idea I had been thinking about. I called it “LiveDocs”, and talked about how documentation was too important to be static. It would allow any company or individual to create documentation that was more than just text; it would tailor itself to the user and the user could interact with it. We talked about it for a bit, and the meeting ended.</p>

  476. 

  477. <p name="29b8" id="29b8" class="graf--p">A week later, I got a call from Mike saying I got the job. He specifically wanted to know how Mozilla, over the next few years, could help me reach my goal of starting a company in 5 years. I thought it was a throw-away interview question, but to Mike it was the reason he hired me. And for my two years at Mozilla, it kept coming up.</p>

  478. 

  479. <p name="a209" id="a209" class="graf--p">Mozilla took a chance on me, and I’m so grateful. I entered as a PHP developer using Notepad in Windows who had never touched version control. I left as a Python developer using VIM on OSX who practically lived on GitHub. Mozilla employs the most talented people I have ever met, and I am so lucky to have worked with and learned from them.</p>

  480. 

  481. <p name="3926" id="3926" class="graf--p">At my first meeting with my manager, Wil, he brought it up again. <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">The clock is ticking</em></strong>, he said. <strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">In five years, I want to hear that you started a company</em></strong><em class="markup--em markup--p-em">. I’m going to keep checking in on you.</em> And he did. A lot.</p>

  482. 

  483. <h3 name="767b" id="767b" class="graf--h3"><strong class="markup--strong markup--h3-strong">3.2 Years To Go: Applying to Y Combinator</strong></h3>

  484. 

  485. <p name="90b6" id="90b6" class="graf--p">After about two years at Mozilla, I decided to apply to <a href="https://www.ycombinator.com/" data-href="https://www.ycombinator.com/" class="markup--anchor markup--p-anchor" rel="nofollow">Y Combinator</a>. I was no longer working in Web Development, and I was getting antsy to get back to building again. I threw together a YC application with my friend Matt Gardner, and we applied for the Summer 2012 batch. We called it DocHub, and had nothing but an idea. Nothing was built, and we certainly had no users.</p>

  486. 

  487. <p name="0379" id="0379" class="graf--p">However, we got an invite to interview! I took a week off from work to build a prototype based on the Scribd and Disqus APIs. Both were YC companies, and I was hoping to show what they’d look like on DocHub.</p>

  488. 

  489. <figure name="c81d" id="c81d" class="graf--figure"><div class="aspectRatioPlaceholder"><img class="graf-image" data-image-id="0*7YzX7Wjuqev1eQeH." data-external-src="https://dnqgz544uhbo8.cloudfront.net/_/fp/img/media-loading-placeholder.b31hiO4ynbDLRrXWEFF4aQ.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/0*7YzX7Wjuqev1eQeH."/></div><figcaption class="imageCaption">Our domain name alone, dochub.it, should have disqualified us from YC.</figcaption></figure>

  490. 

  491. <p name="2a0d" id="2a0d" class="graf--p">Our interview went terribly. We started to explain our pitch, and got cut off: <em class="markup--em markup--p-em">So, you guys just really like writing documentation? </em>Just the opposite! I was bad at it and hated it! The goal of DocHub was to make it dead simple for anyone to create documentation, since it was such an important yet difficult experience.</p>

  492. 

  493. <p name="5087" id="5087" class="graf--p">Hoping it would help, we showed them the Scribd demo. That made it worse. They talked more about the Scribd API than DocHub.</p>

  494. 

  495. <p name="ba1d" id="ba1d" class="graf--p">Ten minutes was up. <em class="markup--em markup--p-em">So, you guys want to start a consulting service that writes documentation for startups.</em> Nope, not at all. We had done a horrible job pitching ourselves.</p>

  496. 

  497. <p name="f722" id="f722" class="graf--p">After a few torturous weeks of waiting (although I’m told it was really a mere few hours and just seemed longer), we got an email from Garry Tan:</p>

  498. 

  499. <p name="d46b" id="d46b" class="graf--p"><em class="markup--em markup--p-em">I’m sorry to say we decided not to fund you. We liked you as individuals but we had a hard time seeing how developer API documentation was the right beachhead. Most startups have poor API documentation not because they lack the product or engineering capability, but because they lack the attention to detail and writing skill necessary to create it. The problem is one of content generation, as opposed to lack of tooling. You guys are clearly great hackers and we’d be happy to hear from you again in the future.</em></p>

  500. 

  501. <p name="3c29" id="3c29" class="graf--p">I was disappointed, but I couldn’t fault YC. We had no product, and did a horrible job explaining what we wanted to do. I knew there was something there, but I hadn’t quite figured out the problem and solution. However, the excitement and possibilities from the experience made it clear: as much as I loved Mozilla, it was no longer the right place for me.</p>

  502. 

  503. <h3 name="aad6" id="aad6" class="graf--h3"><strong class="markup--strong markup--h3-strong">3 Years To Go: Now What?</strong></h3>

  504. 

  505. <p name="3053" id="3053" class="graf--p">When you have a job, it’s amazing how many startup ideas you come up with. I had dozens of them!</p>

  506. 

  507. <p name="f312" id="f312" class="graf--p">However, things change when it comes time to pick one. There’s a scene in How I Met Your Mother about something called the “Cheerleader Effect”. There’s a <a href="http://www.theatlantic.com/business/archive/2013/11/cheerleader-effect-why-people-are-more-beautiful-in-groups/281119/" data-href="http://www.theatlantic.com/business/archive/2013/11/cheerleader-effect-why-people-are-more-beautiful-in-groups/281119/" class="markup--anchor markup--p-anchor" rel="nofollow">good write-up in The Atlantic</a> about it. Basically, it states that a group of men and women look more attractive in a group than if you look at each one individually. Turns out, <strong class="markup--strong markup--p-strong">it’s true about startup ideas</strong>, too.</p>

  508. 

  509. <p name="f452" id="f452" class="graf--p">So here I was. Not getting into YC had caused me to put aside the problem of fixing documentation, and while I had a lot of ideas that seemed great in aggregate, none of the individual ideas came close enough to being <em class="markup--em markup--p-em">the one</em>.</p>

  510. 

  511. <p name="587d" id="587d" class="graf--p">Over the next year, I’d try a bunch of things. Some just as fun side projects, some serious: a site that synced Hulu videos so people could watch together, an app for making plans with friends, construction management software, a dating app built on Pinterest’s social graph, high end hotel concierge software, a school for teaching programming in foreign countries, a personal assistant app, a file-sharing workflow app and a bunch more. Nothing managed to keep my interest.</p>

  512. 

  513. <h3 name="4698" id="4698" class="graf--h3"><strong class="markup--strong markup--h3-strong">2.5 Years To Go: Freelancing</strong></h3>

  514. 

  515. <p name="04a4" id="04a4" class="graf--p">Turns out, San Francisco is expensive. So, I got into freelancing. I was lucky enough to get to work with a bunch of awesome clients on a bunch of different projects. I worked for VC firms and startups, and everything in between. I met a ton of people, and learned a lot.</p>

  516. 

  517. <p name="d93d" id="d93d" class="graf--p">This was the turning point for me. I worked on so many different projects (both programming and design), that I had no choice but to rapidly get better. At all my previous jobs, I would work on a small part of a site for months. With freelancing, I was building and deploying full websites that had to look and work well.</p>

  518. 

  519. <p name="b80c" id="b80c" class="graf--p">Looking back, I never could have started a company without this experience. The difference is easy to see if you compare the screenshot of DocHub above to the <a href="http://readme.io" data-href="http://readme.io" class="markup--anchor markup--p-anchor" rel="nofollow">current ReadMe.io homepage</a>.</p>

  520. 

  521. <h3 name="ca2f" id="ca2f" class="graf--h3"><strong class="markup--strong markup--h3-strong">1.5 Years To Go: Phileas and Fogg</strong></h3>

  522. 

  523. <p name="24ec" id="24ec" class="graf--p"><a href="http://en.wikipedia.org/wiki/There_ain%27t_no_such_thing_as_a_free_lunch" data-href="http://en.wikipedia.org/wiki/There_ain%27t_no_such_thing_as_a_free_lunch" class="markup--anchor markup--p-anchor" rel="nofollow">There ain’t no such thing as a free lunch</a>. That’s the moral of this part of the story.</p>

  524. 

  525. <p name="b398" id="b398" class="graf--p">I had a group of investors (many of whom I respected) approach me to start an “internal incubator” in San Francisco. I declined: idea factories are a dime a dozen, and nobody would want to work for one. They kept pushing, and I finally gave in… with conditions.</p>

  526. 

  527. <p name="0fb3" id="0fb3" class="graf--p">First, we’d need to offer something to attract awesome people. No amount of money, catered lunch or nice offices could compete with Google or Facebook. But, what about travel? All my friends loved to travel, and it would be cheaper to fly everyone to a random country and rent a huge mansion than get office space in SF. I even wrote a blog post called <a href="http://phileasandblogg.com/why-were-traveling/" data-href="http://phileasandblogg.com/why-were-traveling/" class="markup--anchor markup--p-anchor" rel="nofollow">Why We’re Traveling</a> that outlines what I was thinking.</p>

  528. 

  529. <p name="2f93" id="2f93" class="graf--p">Second, the team would come up with the ideas. I didn’t want to be a dev shop for a bunch of rich people.</p>

  530. 

  531. <p name="aec6" id="aec6" class="graf--p">Everyone agreed, and I started hiring. <a href="http://phileasandfogg.com" data-href="http://phileasandfogg.com" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">Phileas and Fogg</strong></a><strong class="markup--strong markup--p-strong"> was born.</strong></p>

  532. 

  533. <figure name="ea36" id="ea36" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*P-wEJvhOQjC8xEnpBNDYKg.jpeg" data-width="459" data-height="287" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*P-wEJvhOQjC8xEnpBNDYKg.jpeg"/></div></figure>

  534. 

  535. <p name="5f61" id="5f61" class="graf--p">Remember the thing about “no such thing as a free lunch”? Turns out, it’s true. They kept pushing and changing the rules. Cutting salaries, forcing us to work on their pet projects, insisting I hire less-talented programmers for cheaper, cutting timelines, reducing investment, increasing their equity, and more. For me, the final straw was completely cutting my employees’ health insurance. Seriously!?</p>

  536. 

  537. <p name="4997" id="4997" class="graf--p">Someday, I’ll write a whole blog post on this experience. However, the short version is this: I ditched the investors, financed the trip myself, and made it less structured. Everyone just sorta worked on their own projects. The financial, emotional and time setbacks were devastating, however I still really love the idea of a traveling incubator.</p>

  538. 

  539. <h3 name="63e1" id="63e1" class="graf--h3"><strong class="markup--strong markup--h3-strong">1 Year to Go: ReadMe.io</strong></h3>

  540. 

  541. <p name="79d1" id="79d1" class="graf--p">It’s been 4 years, and I still hadn’t managed to shake the idea of documentation. I kept pushing it off because it wasn’t sexy or cool enough, or because it didn’t get into YC the first time. But, every other idea came or went, but I was still obsessed with the problem.</p>

  542. 

  543. <p name="ae73" id="ae73" class="graf--p"><em class="markup--em markup--p-em">Screw it</em>, I thought. <em class="markup--em markup--p-em">I </em><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">have</em></strong><em class="markup--em markup--p-em"> to do this.</em></p>

  544. 

  545. <p name="7c04" id="7c04" class="graf--p">There’s a lot of great ideas out there. I’m sure my list of ideas contains a few that could be much bigger than ReadMe. However, the point isn’t to find the idea with the biggest market size. <strong class="markup--strong markup--p-strong">It’s to find the right idea for you.</strong> After all, it has to be your passion for the next decade. For me, that was documentation.</p>

  546. 

  547. <p name="32c4" id="32c4" class="graf--p">So, I started building ReadMe. It was a slow process, since I was still doing freelancing. However, it was much easier this time around. I had more experience, which helped. And Stripe had gotten huge, which made people realize how important good documentation was. ReadMe simply couldn’t exist without Stripe paving the way. No longer did I have to convince people. I could just say “Stripe-quality docs”, and developers got it.</p>

  548. 

  549. <p name="9949" id="9949" class="graf--p">I built a working MVP by myself, and got ready to launch.</p>

  550. 

  551. <h3 name="534d" id="534d" class="graf--h3"><strong class="markup--strong markup--h3-strong">0.5 Years to Go: Applying to YC… again!</strong></h3>

  552. 

  553. <p name="1dfe" id="1dfe" class="graf--p"><a href="http://readme.io/blog/product-hunter-becomes-the-hunted/" data-href="http://readme.io/blog/product-hunter-becomes-the-hunted/" class="markup--anchor markup--p-anchor" rel="nofollow">ReadMe.io finally launched!</a> And due to the great response, it felt like the right time to apply to YC again. Same-ish idea, different cofounder, working product.</p>

  554. 

  555. <p name="6cb2" id="6cb2" class="graf--p">This time, it was much easier. The interview was still tough, however it was different: we had proof users loved us, rather than just saying we hoped they would. I can’t stress this enough. You can get in to YC with just an idea, however it’s so much easier if you have users.</p>

  556. 

  557. <p name="6529" id="6529" class="graf--p">This time, The Startup Formerly Known As DocHub was successful! In January 2015, <a href="http://readme.io" data-href="http://readme.io" class="markup--anchor markup--p-anchor" rel="nofollow">ReadMe.io</a> started inYC’s Winter 2015 batch.</p>

  558. 

  559. <h3 name="e7b0" id="e7b0" class="graf--h3"><strong class="markup--strong markup--h3-strong">Time’s Up!</strong></h3>

  560. 

  561. <p name="16ed" id="16ed" class="graf--p">It’s hard to say when a company starts. The conception of the idea? The first line of code? The first paying user? The signatures on the incorporation documents? The first round of funding?</p>

  562. 

  563. <p name="ffe6" id="ffe6" class="graf--p">Exactly four years and 363 days after I set my five-year goal, <a href="http://techcrunch.com/2015/03/13/readme-creates-crisp-documentation-for-developers-using-your-apis/" data-href="http://techcrunch.com/2015/03/13/readme-creates-crisp-documentation-for-developers-using-your-apis/" class="markup--anchor markup--p-anchor" rel="nofollow">TechCrunch wrote about ReadMe</a> and announced publicly that we’re in YC. Nobody can argue it’s a TechCrunch writeup that makes a startup real, but you know what? <strong class="markup--strong markup--p-strong">I like the timing and symbolism.</strong></p>

  564. 

  565. <p name="a658" id="a658" class="graf--p">With just two days to spare,<strong class="markup--strong markup--p-strong"> I hit my five-year goal.</strong></p>

  566. 

  567. <h3 name="174b" id="174b" class="graf--h3">The End... and The Beginning</h3>

  568. 

  569. <p name="9305" id="9305" class="graf--p">My biggest two takeaways contradict themselves: <strong class="markup--strong markup--p-strong">I wish I had started sooner, but I’m so glad I waited. </strong>I had the idea from the beginning so it’s painful it took half a decade, however I never could have made it happen five years ago.</p>

  570. 

  571. <p name="bb3b" id="bb3b" class="graf--p">I also don’t regret the journey. I got to work with some of the best people and companies (both while freelancing and at real jobs), and made awesome friends. I learned a lot, had lots of fun, and wouldn’t change a thing.</p>

  572. 

  573. <p name="7be8" id="7be8" class="graf--p">One regret I do have: I spent too much time waiting for other people. Investors, cofounders, mentors. I found that <strong class="markup--strong markup--p-strong">once I started actually building, these things came naturally</strong>. There’s so many ideas floating around the Valley, and so many “wantrepreneurs”, that people tune you out… until you’ve built something. You could wait for the right time and the right people forever; the people who are successful are the ones who just make it happen.</p>

  574. 

  575. <p name="c305" id="c305" class="graf--p">So, today, it’s time to add another event to my calendar. For <strong class="markup--strong markup--p-strong">March 15, 2020</strong>. Over the next half a decade, I want ReadMe to grow into something I’m proud of. I want it to change the way we interact with APIs and code, and make it dead simple for non-technical people to build awesome things. I want to build a workplace where I get to work with smart people on a project we’re all excited about. I also want to spend less time working. I love building things, but I need to be better about stepping away from my computer and enjoying life.</p>

  576. 

  577. <p name="4792" id="4792" class="graf--p">Check back in 5 years.</p>

  578. 

  579. <h3 name="aef3" id="aef3" class="graf--h3">People I Want to Thank</h3>

  580. 

  581. <p name="fb93" id="fb93" class="graf--p"><a href="http://mamamusings.net" data-href="http://mamamusings.net" class="markup--anchor markup--p-anchor" rel="nofollow">Liz Lawley</a> and <a href="http://twitter.com/superic" data-href="http://twitter.com/superic" class="markup--anchor markup--p-anchor" rel="nofollow">Eric Willis</a>, who got me to San Francisco (and are still great friends). Eric and I came up with the original idea for ReadMe.</p>

  582. 

  583. <p name="e140" id="e140" class="graf--p"><a href="http://morgamic.com/2014/11/04/joining-etsy/" data-href="http://morgamic.com/2014/11/04/joining-etsy/" class="markup--anchor markup--p-anchor" rel="nofollow">Mike Morgan</a> and <a href="https://blog.mozilla.org/webdev/2013/03/28/better-know-a-webdev-wil-clouser/" data-href="https://blog.mozilla.org/webdev/2013/03/28/better-know-a-webdev-wil-clouser/" class="markup--anchor markup--p-anchor" rel="nofollow">Wil Clouser</a>. If you ever get the chance to work for either, take it. I can’t say enough good things about either of them, and I’m so lucky they took a chance on me. And <a href="http://jbalogh.me/" data-href="http://jbalogh.me/" class="markup--anchor markup--p-anchor" rel="nofollow">Jeff Balogh</a>, who always took the time to help help me.</p>

  584. 

  585. <p name="5459" id="5459" class="graf--p">Gabriel Dillon, my co-founder at ReadMe. I couldn’t do it without him.</p>

  586. 

  587. <p name="0ded" id="0ded" class="graf--p">Most importantly, <a href="https://twitter.com/parijaatha" data-href="https://twitter.com/parijaatha" class="markup--anchor markup--p-anchor" rel="nofollow">Krupa Raj</a>. We met 5 years ago at Mozilla, and she was my best friend this entire journey. Startups are roller coasters, and she was there to cheer me up during the lows and keep my ego in check during the highs. I truly couldn’t have survived the past five years without her as a friend.</p>

  588. 

  589. <p name="db9b" id="db9b" class="graf--p">And, of course, everyone else who has helped me along the way. There are dozens of you, and I hope I’ve made it clear to each of you how thankful I am.</p>

  590.   </article>

  591. </section>

  592. 

  593. 

  594. <nav id="jumpto">

  595.   <p>

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

  597.     <a href="https://medium.com/@gkoberger/five-years-time-6a6ae1157a66">Source originale</a> |

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

  599.   </p>

  600. </nav>

  601. 

  602. <footer>

  603.   <div>

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

  605.     <p>

  606.       Bonjour/Hi!

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

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

  609.     </p>

  610.     <p>

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

  612.     </p>

  613.     

  614.     <p>

  615.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  632.     </p>

  633.     <p>

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

  635.     </p>

  636.     <p>

  637.       Je ne traque pas ta navigation mais mon

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

  639.       conserve des logs d’accès.

  640.     </p>

  641.   </div>

  642. </footer>

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

  644.   ;(_ => {

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

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

  647.       e.preventDefault()

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

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

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

  651.     })

  652.   })()

  653. </script>