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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  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>If Architects had to work like Programmers (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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="http://www.gksoft.com/a/fun/architects.html">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>If Architects had to work like Programmers</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="http://www.gksoft.com/a/fun/architects.html" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-02-21
  72. </p>
  73. </nav>
  74. <hr>
  75. <p>
  76. Dear Mr. Architect!
  77. </p>
  78. <p>
  79. Please design and build me a house. I am not quite sure of what I need, so
  80. you should use your discretion. My house should have between two and
  81. forty-five bedrooms. Just make sure the plans are such that the bedrooms
  82. can be easily added or deleted. When you bring the blueprints to me, I
  83. will make the final decision of what I want. Also, bring me the cost
  84. breakdown for each configuration so that I can arbitrarily pick one.
  85. </p>
  86. <p>
  87. Keep in mind that the house I ultimately choose must cost less than the
  88. one I am currently living in. Make sure, however, that you correct all the
  89. deficiencies that exist in my current house (the floor of my kitchen
  90. vibrates when I walk across it, and the walls don't have nearly enough
  91. insulation in them).
  92. </p>
  93. <p>
  94. As you design, also keep in mind that I want to keep yearly maintenance
  95. costs as low as possible. This should mean the incorporation of extra-cost
  96. features like aluminium, vinyl, or composite siding. (If you choose not
  97. to specify aluminium, be prepared to explain your decision in detail.)
  98. </p>
  99. <p>
  100. Please take care that modern design practices and the latest materials are
  101. used in construction of the house, as I want it to be a showplace for the
  102. most up-to-date ideas and methods. Be alerted, however, that kitchen
  103. should be designed to accommodate, among other things, my 1952 Gibson
  104. refrigerator.
  105. </p>
  106. <p>
  107. To insure that you are building the correct house for our entire family,
  108. make certain that you contact each of our children, and also our in-laws.
  109. My mother-in-law will have very strong feelings about how the house should
  110. be designed, since she visits us at least once a year. Make sure that you
  111. weigh all of these options carefully and come to the right decision. I,
  112. however, retain the right to overrule any choices that you make.
  113. </p>
  114. <p>
  115. Please don't bother me with small details right now. Your job is to
  116. develop the overall plans for the house: get the big picture. At this
  117. time, for example, it is not appropriate to be choosing the color of the
  118. carpet. However, keep in mind that my wife likes blue.
  119. </p>
  120. <p>
  121. Also, do not worry at this time about acquiring the resources to build the
  122. house itself. Your first priority is to develop detailed plans and
  123. specifications. Once I approve these plans, however, I would expect the
  124. house to be under roof within 48 hours.
  125. </p>
  126. <p>
  127. While you are designing this house specifically for me, keep in mind that
  128. sooner or later I will have to sell it to someone else. It therefore
  129. should have appeal to a wide variety of potential buyers. Please make sure
  130. before you finalize the plans that there is a consensus of the population
  131. in my area that they like the features this house has.
  132. </p>
  133. <p>
  134. Please prepare a complete set of blueprints. It is not necessary at this
  135. time to do the real design, since they will be used only for construction
  136. bids. Be advised, however, that you will be held accountable for any
  137. increase of construction costs as a result of later design changes.
  138. </p>
  139. <p>
  140. You must be thrilled to be working on an interesting project as this! To
  141. be able to use the latest techniques and materials and to be given such
  142. freedom in your designs is something that can't happen very often. Contact
  143. me as soon as possible with your complete ideas and plans.
  144. </p>
  145. <p>
  146. P.S.: <br>
  147. My wife has just told me that she disagrees with many of the instructions
  148. I've given you in this letter. As architect, it is your responsibility to
  149. resolve these differences. I have tried in the past and have been unable
  150. to accomplish this. If you can't handle this responsibility, I will have
  151. to find another architect.
  152. </p>
  153. <p>
  154. P.P.S.: <br>
  155. Perhaps what I need is not a house at all, but a travel trailer. Please
  156. advise me as soon as possible if this is the case.
  157. </p>
  158. </article>
  159. <hr>
  160. <footer>
  161. <p>
  162. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  163. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  164. </svg> Accueil</a> •
  165. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  166. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  167. </svg> Suivre</a> •
  168. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  169. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  170. </svg> Pro</a> •
  171. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  172. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  173. </svg> Email</a> •
  174. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  175. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  176. </svg> Légal</abbr>
  177. </p>
  178. <template id="theme-selector">
  179. <form>
  180. <fieldset>
  181. <legend><svg class="icon icon-brightness-contrast">
  182. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  183. </svg> Thème</legend>
  184. <label>
  185. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  186. </label>
  187. <label>
  188. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  189. </label>
  190. <label>
  191. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  192. </label>
  193. </fieldset>
  194. </form>
  195. </template>
  196. </footer>
  197. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  198. <script>
  199. function loadThemeForm(templateName) {
  200. const themeSelectorTemplate = document.querySelector(templateName)
  201. const form = themeSelectorTemplate.content.firstElementChild
  202. themeSelectorTemplate.replaceWith(form)
  203. form.addEventListener('change', (e) => {
  204. const chosenColorScheme = e.target.value
  205. localStorage.setItem('theme', chosenColorScheme)
  206. toggleTheme(chosenColorScheme)
  207. })
  208. const selectedTheme = localStorage.getItem('theme')
  209. if (selectedTheme && selectedTheme !== 'undefined') {
  210. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  211. }
  212. }
  213. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  214. window.addEventListener('load', () => {
  215. let hasDarkRules = false
  216. for (const styleSheet of Array.from(document.styleSheets)) {
  217. let mediaRules = []
  218. for (const cssRule of styleSheet.cssRules) {
  219. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  220. continue
  221. }
  222. // WARNING: Safari does not have/supports `conditionText`.
  223. if (cssRule.conditionText) {
  224. if (cssRule.conditionText !== prefersColorSchemeDark) {
  225. continue
  226. }
  227. } else {
  228. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  229. continue
  230. }
  231. }
  232. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  233. }
  234. // WARNING: do not try to insert a Rule to a styleSheet you are
  235. // currently iterating on, otherwise the browser will be stuck
  236. // in a infinite loop…
  237. for (const mediaRule of mediaRules) {
  238. styleSheet.insertRule(mediaRule.cssText)
  239. hasDarkRules = true
  240. }
  241. }
  242. if (hasDarkRules) {
  243. loadThemeForm('#theme-selector')
  244. }
  245. })
  246. </script>
  247. </body>
  248. </html>