A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 48KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  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>How I Wrote Shape Up (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://m.signalvnoise.com/how-i-wrote-shape-up/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. How I Wrote Shape Up (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://m.signalvnoise.com/how-i-wrote-shape-up/">Source originale du contenu</a></h3>
  445. <p>Here’s a little behind-the-scenes look at the development of our newest book, <a href="http://basecamp.com/shapeup">Shape Up: Stop Running in Circles and Ship Work that Matters</a>.</p>
  446. <p>In August 2018, Jason Fried (Basecamp’s founder and CEO) asked me to write a book about how we work. “Sure thing!” I said — having no clue how to go about it or what it would entail.</p>
  447. <p>I didn’t know how to write a book. But I did know how to give a workshop. So I put a call out on Twitter.</p>
  448. <p>The workshop was a prototyping device. It was going to do three things:</p>
  449. <ol><li>Force me to come up with a full day’s worth of content that could eventually become a book.</li><li>Get instant feedback from an audience to learn what’s interesting, what resonates and what doesn’t.</li><li>Put something out into the world that people could buy, so I could interview them afterward using the jobs-to-be-done approach.</li></ol>
  450. <p>I priced the workshop at $1,000 a seat and made people fill out a lengthy application before letting them buy a ticket. The application asked them to tell stories about problems they experienced with product development. Using their answers, I could screen out anyone who was merely curious or a fan but wasn’t really struggling. This created the best possible audience for getting feedback: hungry and motivated with skin in the game.</p>
  451. <p>After the workshop, I emailed every attendee and asked if I could interview them by phone. The interview wasn’t about the workshop—it was about what was going on in their company when they decided to apply. I had a lot to say about product development, but I didn’t know which specific things actually <em>mattered</em> to people. I didn’t know what they were struggling with. The interviews gave me a way to learn what was going wrong in their teams, how they made the decision to attend the workshop, and what they hoped to get out of it.</p>
  452. <p>I did a quick jobs-to-be-done analysis on the interviews and pulled out four jobs they were hiring the workshop to do. Since I considered the workshop a proxy for the book, I could use these jobs to define the key requirements.</p>
  453. <figure class="wp-block-image"><img data-attachment-id="11854" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkx1ucaawhfb-3/" data-orig-file="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkX1UcAAWhFB-3" data-image-description="" data-medium-file="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=640%2C447&amp;ssl=1" src="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11854 jetpack-lazy-image" data-lazy-srcset="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?w=2048&amp;ssl=1 2048w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?w=1280&amp;ssl=1 1280w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?w=1920&amp;ssl=1 1920w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=640%2C447&amp;ssl=1&amp;is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11854" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkx1ucaawhfb-3/" data-orig-file="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkX1UcAAWhFB-3" data-image-description="" data-medium-file="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=640%2C447&amp;ssl=1" src="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11854" srcset="https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?w=2048&amp;ssl=1 2048w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?w=1280&amp;ssl=1 1280w, https://i0.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX1UcAAWhFB-3.jpeg?w=1920&amp;ssl=1 1920w" sizes="(max-width: 640px) 100vw, 640px"/></noscript><figcaption>Job 1</figcaption></figure>
  454. <figure class="wp-block-image"><img data-attachment-id="11855" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkx4uwaeqvbc-3/" data-orig-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkX4UwAEQvbC-3" data-image-description="" data-medium-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=640%2C447&amp;ssl=1" src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11855 jetpack-lazy-image" data-lazy-srcset="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?w=2048&amp;ssl=1 2048w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?w=1920&amp;ssl=1 1920w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=640%2C447&amp;ssl=1&amp;is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11855" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkx4uwaeqvbc-3/" data-orig-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkX4UwAEQvbC-3" data-image-description="" data-medium-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=640%2C447&amp;ssl=1" src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11855" srcset="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?w=2048&amp;ssl=1 2048w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX4UwAEQvbC-3.jpeg?w=1920&amp;ssl=1 1920w" sizes="(max-width: 640px) 100vw, 640px"/></noscript><figcaption>Job 2</figcaption></figure>
  455. <figure class="wp-block-image"><img data-attachment-id="11856" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkydv4aayr6w-2/" data-orig-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkYDV4AAyr6W-2" data-image-description="" data-medium-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=640%2C447&amp;ssl=1" src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11856 jetpack-lazy-image" data-lazy-srcset="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?w=2048&amp;ssl=1 2048w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?w=1920&amp;ssl=1 1920w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=640%2C447&amp;ssl=1&amp;is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11856" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkydv4aayr6w-2/" data-orig-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkYDV4AAyr6W-2" data-image-description="" data-medium-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=640%2C447&amp;ssl=1" src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11856" srcset="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?w=2048&amp;ssl=1 2048w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkYDV4AAyr6W-2.jpeg?w=1920&amp;ssl=1 1920w" sizes="(max-width: 640px) 100vw, 640px"/></noscript><figcaption>Job 3</figcaption></figure>
  456. <figure class="wp-block-image"><img data-attachment-id="11857" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkx8vaaalrgq-2/" data-orig-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkX8VAAAlrGq-2" data-image-description="" data-medium-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=640%2C447&amp;ssl=1" src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11857 jetpack-lazy-image" data-lazy-srcset="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?w=2048&amp;ssl=1 2048w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?w=1920&amp;ssl=1 1920w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=640%2C447&amp;ssl=1&amp;is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11857" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dycdkx8vaaalrgq-2/" data-orig-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=2048%2C1431&amp;ssl=1" data-orig-size="2048,1431" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="DycDkX8VAAAlrGq-2" data-image-description="" data-medium-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=600%2C419&amp;ssl=1" data-large-file="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=640%2C447&amp;ssl=1" src="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?fit=640%2C447&amp;ssl=1" alt="" class="wp-image-11857" srcset="https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?w=2048&amp;ssl=1 2048w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?resize=600%2C419&amp;ssl=1 600w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?resize=768%2C537&amp;ssl=1 768w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/DycDkX8VAAAlrGq-2.jpeg?w=1920&amp;ssl=1 1920w" sizes="(max-width: 640px) 100vw, 640px"/></noscript><figcaption>Job 4</figcaption></figure>
  457. <p>Armed with a better understanding of the demand, I could flip to the supply side. How do I explain what we do? How should I structure the way we work into some kind of outline?</p>
  458. <p>To do that, I used a technique I learned from Bob Moesta that he learned from Genichi Taguchi. The principle goes like this: to learn how an engine works, follow a drop of gasoline over time— from pouring it into the fuel tank and onward. For us, that meant trace the path of a project. Before it was a project, it was… what? An idea? A debate? A conversation?</p>
  459. <p>With this point of view, we used a system mapping technique to spell out how a “drop” of work moved from one phase to another when we developed product at Basecamp.</p>
  460. <figure class="wp-block-image alignwide"><a href="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?ssl=1"><img data-attachment-id="11872" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/book-systems/" data-orig-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?fit=5257%2C1749&amp;ssl=1" data-orig-size="5257,1749" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Book-systems" data-image-description="" data-medium-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?fit=600%2C200&amp;ssl=1" data-large-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?fit=640%2C213&amp;ssl=1" src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=640%2C213&amp;ssl=1" alt="" class="wp-image-11872 jetpack-lazy-image" data-recalc-dims="1" data-lazy-srcset="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=1800%2C599&amp;ssl=1 1800w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=600%2C200&amp;ssl=1 600w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=768%2C256&amp;ssl=1 768w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?w=1280&amp;ssl=1 1280w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?w=1920&amp;ssl=1 1920w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=640%2C213&amp;is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11872" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/book-systems/" data-orig-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?fit=5257%2C1749&amp;ssl=1" data-orig-size="5257,1749" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Book-systems" data-image-description="" data-medium-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?fit=600%2C200&amp;ssl=1" data-large-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?fit=640%2C213&amp;ssl=1" src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=640%2C213&amp;ssl=1" alt="" class="wp-image-11872" srcset="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=1800%2C599&amp;ssl=1 1800w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=600%2C200&amp;ssl=1 600w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?resize=768%2C256&amp;ssl=1 768w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?w=1280&amp;ssl=1 1280w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Book-systems.png?w=1920&amp;ssl=1 1920w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1"/></noscript></a><figcaption>Following a “drop” of work through a series of systems</figcaption></figure>
  461. <p>That gave me the three-part structure for the book and the outline for all the chapters in the first draft. Part Three turned out to be tricky because there is a lot of looping. To arrive at the final structure for part three, I interviewed a couple people at Basecamp about situations when they reached for the techniques. That revealed struggling moments (“I hate asking for status…”, “I don’t have any progress to show…”) that I could use for the macro structure of Part Three.</p>
  462. <p>The last major trick was the cartoons. Jobs have functional, social, and emotional components. The system map was intensely functional—all about how to get from this step to that step. The cartoons were a way to set the emotional and social context for each step. They also helped me focus by framing each chapter not just as a “step” but as a situation: who’s there, how do they feel, and why are they motivated to do this?</p>
  463. <figure class="wp-block-image"><img data-attachment-id="11863" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dz5avklvyaawk2d-2/" data-orig-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?fit=1668%2C1527&amp;ssl=1" data-orig-size="1668,1527" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Dz5aVKLVYAAWK2D-2" data-image-description="" data-medium-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?fit=600%2C549&amp;ssl=1" data-large-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?fit=640%2C586&amp;ssl=1" src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=640&amp;ssl=1" alt="" class="wp-image-11863 jetpack-lazy-image" data-recalc-dims="1" data-lazy-srcset="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=1668&amp;ssl=1 1668w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?resize=600%2C549&amp;ssl=1 600w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?resize=768%2C703&amp;ssl=1 768w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=1280&amp;ssl=1 1280w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=640&amp;is-pending-load=1#038;ssl=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11863" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/dz5avklvyaawk2d-2/" data-orig-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?fit=1668%2C1527&amp;ssl=1" data-orig-size="1668,1527" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="Dz5aVKLVYAAWK2D-2" data-image-description="" data-medium-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?fit=600%2C549&amp;ssl=1" data-large-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?fit=640%2C586&amp;ssl=1" src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=640&amp;ssl=1" alt="" class="wp-image-11863" srcset="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=1668&amp;ssl=1 1668w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?resize=600%2C549&amp;ssl=1 600w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?resize=768%2C703&amp;ssl=1 768w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/Dz5aVKLVYAAWK2D-2.jpeg?w=1280&amp;ssl=1 1280w" sizes="(max-width: 640px) 100vw, 640px" data-recalc-dims="1"/></noscript><figcaption>Setting the social and emotional tone for a chapter<br/></figcaption></figure>
  464. <p>I wrote the first draft and drew the first sketches in dark mode on my iPad Pro. It helped me get out of the intimidating feeling of staring at a blank white page. I used Bear for the first drafts and drew the sketches in Notability. When I was purely writing, I’d use the Smart Keyboard. For times when I was alternating between sketching and writing, I folded back the keyboard and used a Logitech Keys-To-Go beside the iPad. </p>
  465. <figure class="wp-block-image"><img data-attachment-id="11864" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/img_4799/" data-orig-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=3891%2C2374&amp;ssl=1" data-orig-size="3891,2374" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;2.2&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 6s&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1550759602&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;4.15&quot;,&quot;iso&quot;:&quot;200&quot;,&quot;shutter_speed&quot;:&quot;0.033333333333333&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="IMG_4799" data-image-description="" data-medium-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=600%2C366&amp;ssl=1" data-large-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=640%2C390&amp;ssl=1" src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=640%2C390&amp;ssl=1" alt="" class="wp-image-11864 jetpack-lazy-image" data-lazy-srcset="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?w=3891&amp;ssl=1 3891w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?resize=600%2C366&amp;ssl=1 600w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?resize=768%2C469&amp;ssl=1 768w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?w=1280&amp;ssl=1 1280w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?w=1920&amp;ssl=1 1920w" data-lazy-sizes="(max-width: 640px) 100vw, 640px" data-lazy-src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=640%2C390&amp;ssl=1&amp;is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/><noscript><img data-attachment-id="11864" data-permalink="https://m.signalvnoise.com/how-i-wrote-shape-up/img_4799/" data-orig-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=3891%2C2374&amp;ssl=1" data-orig-size="3891,2374" data-comments-opened="0" data-image-meta="{&quot;aperture&quot;:&quot;2.2&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;iPhone 6s&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1550759602&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;4.15&quot;,&quot;iso&quot;:&quot;200&quot;,&quot;shutter_speed&quot;:&quot;0.033333333333333&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="IMG_4799" data-image-description="" data-medium-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=600%2C366&amp;ssl=1" data-large-file="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=640%2C390&amp;ssl=1" src="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?fit=640%2C390&amp;ssl=1" alt="" class="wp-image-11864" srcset="https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?w=3891&amp;ssl=1 3891w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?resize=600%2C366&amp;ssl=1 600w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?resize=768%2C469&amp;ssl=1 768w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?w=1280&amp;ssl=1 1280w, https://i2.wp.com/m.signalvnoise.com/wp-content/uploads/2019/08/IMG_4799.jpeg?w=1920&amp;ssl=1 1920w" sizes="(max-width: 640px) 100vw, 640px"/></noscript><figcaption>Writing and sketching at the same time in split window mode on the iPad</figcaption></figure>
  466. <p>One thing took a lot of pressure off: Jason’s idea to launch Shape Up as a web book. Releasing it online meant a wide audience, a better chance for the ideas to spread, and — most importantly for me—the ability to make changes after the fact. The book had only the lightest editing when we launched it. Thanks to many tweets and emails from readers, the book was typo free within a couple days of launch.</p>
  467. <p><a href="http://basecamp.com/shapeup">Shape Up</a> is available to read free online (we don’t even ask for your email address). Just today we released a <a href="https://basecamp.com/shapeup/shape-up.pdf">downloadable PDF version</a>.</p>
  468. <p>The feedback so far has been amazing. Thanks everyone for reading and sharing the book.</p>
  469. </article>
  470. </section>
  471. <nav id="jumpto">
  472. <p>
  473. <a href="/david/blog/">Accueil du blog</a> |
  474. <a href="https://m.signalvnoise.com/how-i-wrote-shape-up/">Source originale</a> |
  475. <a href="/david/stream/2019/">Accueil du flux</a>
  476. </p>
  477. </nav>
  478. <footer>
  479. <div>
  480. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  481. <p>
  482. Bonjour/Hi!
  483. 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>
  484. 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>).
  485. </p>
  486. <p>
  487. 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>.
  488. </p>
  489. <p>
  490. Voici quelques articles choisis :
  491. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  492. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  493. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  494. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  495. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  496. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  497. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  498. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  499. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  500. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  501. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  502. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  503. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  504. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  505. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  506. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  507. </p>
  508. <p>
  509. 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>.
  510. </p>
  511. <p>
  512. Je ne traque pas ta navigation mais mon
  513. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  514. conserve des logs d’accès.
  515. </p>
  516. </div>
  517. </footer>
  518. <script type="text/javascript">
  519. ;(_ => {
  520. const jumper = document.getElementById('jumper')
  521. jumper.addEventListener('click', e => {
  522. e.preventDefault()
  523. const anchor = e.target.getAttribute('href')
  524. const targetEl = document.getElementById(anchor.substring(1))
  525. targetEl.scrollIntoView({behavior: 'smooth'})
  526. })
  527. })()
  528. </script>