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 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>We Quit Our Jobs to Build a Cabin-Everything Went Wrong (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script>
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.outsideonline.com/2415766/friends-diy-cabin-build-washington">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>We Quit Our Jobs to Build a Cabin-Everything Went Wrong</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  63. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  64. </svg> Accueil</a> •
  65. <a href="https://www.outsideonline.com/2415766/friends-diy-cabin-build-washington" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <div class="c-flex-article__body post-entry spacing ">
  70. <p>Long hikes, casual breaks, and leisurely river sessions immediately went out the window. There was no time. In part, because we hadn’t anticipated the little things. The forest floor was steeply sloped and covered in rain-slicked clay and fern root balls that grabbed at our feet. Our shoes became caked in mud. We slid and fell, and when that happened, our tape measure’s delicate hold on some distant piece of lumber was lost, forcing us to start over. We never overcame these time warps, like how long it took to shift a ladder on a hillside—we had to dig new holes with every move to provide equal footing for the ladder’s legs. Or how easily we lost entire days sourcing materials at the lumberyard 45 minutes away. Hundreds of boards went into the structure, and we hand selected every one, eyeing them carefully to ensure they weren’t overly warped, bowed, twisted, or cupped. </p>
  71. <p>Days cascaded into weeks. We’d rise at 5 a.m. and build until the dimming light made it impossible to work anymore. By 9 p.m., we’d head to the bar and use the Wi-Fi to madly produce copy for freelance writing ventures that barely kept our bank accounts afloat. Many of our casual promises—the family camping trips, the birthday parties, the breaks to spend time with our girlfriends—would soon be broken. </p>
  72. <p>On a hot day in August, we experienced what was by turns the most bewildering and soul-crushing task of the build: getting the ridge beam in place. It was 28 feet long and hundreds of pounds, and it needed to be perched atop the highest point of the cabin, spanning the gap between the two tallest walls. We eventually produced a jimmy-rigged contraption that, in the kindest terms, might be called a slow-motion catapult that could (maybe) hoist the ridge beam into place.</p>
  73. <p>Anything improvised like this to help ourselves accomplish a job, we referred to as “jazz.” As in: <em>How on earth are we going to lift this beam without a giant crane?</em> Answer: <em>We’ll just rig up some jazz</em>. The word was useful in its lack of specificity, delaying a problem and its potential fix until there was nothing left to do but finally create the jazz. </p>
  74. <p>In some ways, the whole cabin was jazz. When we had nothing but the floor, we were still sketching and debating ridiculous design ideas over our morning coffee—curved, pagoda-style rooflines; walls that folded down into decks; a spiral staircase wrapping around a tree trunk to the loft—as if we were made of money and time. As if we were imbued with the skills of master tradespeople. As if our girlfriends wouldn’t mind us disappearing, maybe forever, to build a hut of fancy and ruin. </p>
  75. <p>The catapult was the definition of jazz:<strong> </strong>a mess of ropes, screws, ratchet straps, and random bracing, then a longer rope that extended from the beam to the towing hitch of Pat’s Subaru at the top of the sloped lot. Around midday, one of our neighbors—a burly, muscled airplane mechanic named Jordy—stopped by, saw the jazz, and with noticeable alarm said, “Holy shit.” He brought down more ratchet straps to add to the pile and then stayed to cheer us on. After eight hours of struggle and one last tug from Pat’s Subaru, the ridge beam slid into its perch. We placed a four-foot-long level on it and, with unbridled relief, saw that its bubble was dead center. </p>
  76. <p>That night, exhausted but content, we jumped in the river and had a fire on its banks. We got good and drunk and temporarily forgot about the fact that we still had to cut and attach the rafters, build out the roof, install the door, finish the siding and windows, construct the kitchen and bathroom, put in the wood-burning stove, finish the loft, insulate and clad the walls, wire and plumb everything, never mind the finish tasks of trim, tile, light fixtures, and on and on.</p> </div>
  77. </article>
  78. <hr>
  79. <footer>
  80. <p>
  81. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  82. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  83. </svg> Accueil</a> •
  84. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  85. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  86. </svg> RSS</a> •
  87. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  88. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  89. </svg> Pro</a> •
  90. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  91. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  92. </svg> Email</a> •
  93. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  94. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  95. </svg> Légal</abbr>
  96. </p>
  97. <template id="theme-selector">
  98. <form>
  99. <fieldset>
  100. <legend><svg class="icon icon-brightness-contrast">
  101. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  102. </svg> Thème</legend>
  103. <label>
  104. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  105. </label>
  106. <label>
  107. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  108. </label>
  109. <label>
  110. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  111. </label>
  112. </fieldset>
  113. </form>
  114. </template>
  115. </footer>
  116. <script>
  117. function loadThemeForm(templateName) {
  118. const themeSelectorTemplate = document.querySelector(templateName)
  119. const form = themeSelectorTemplate.content.firstElementChild
  120. themeSelectorTemplate.replaceWith(form)
  121. form.addEventListener('change', (e) => {
  122. const chosenColorScheme = e.target.value
  123. localStorage.setItem('theme', chosenColorScheme)
  124. toggleTheme(chosenColorScheme)
  125. })
  126. const selectedTheme = localStorage.getItem('theme')
  127. if (selectedTheme && selectedTheme !== 'undefined') {
  128. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  129. }
  130. }
  131. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  132. window.addEventListener('load', () => {
  133. let hasDarkRules = false
  134. for (const styleSheet of Array.from(document.styleSheets)) {
  135. let mediaRules = []
  136. for (const cssRule of styleSheet.cssRules) {
  137. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  138. continue
  139. }
  140. // WARNING: Safari does not have/supports `conditionText`.
  141. if (cssRule.conditionText) {
  142. if (cssRule.conditionText !== prefersColorSchemeDark) {
  143. continue
  144. }
  145. } else {
  146. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  147. continue
  148. }
  149. }
  150. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  151. }
  152. // WARNING: do not try to insert a Rule to a styleSheet you are
  153. // currently iterating on, otherwise the browser will be stuck
  154. // in a infinite loop…
  155. for (const mediaRule of mediaRules) {
  156. styleSheet.insertRule(mediaRule.cssText)
  157. hasDarkRules = true
  158. }
  159. }
  160. if (hasDarkRules) {
  161. loadThemeForm('#theme-selector')
  162. }
  163. })
  164. </script>
  165. </body>
  166. </html>