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.

4 年之前
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394
  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>The Tao Of Programming (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="http://canonical.org/~kragen/tao-of-programming.html">
  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. The Tao Of Programming (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="http://canonical.org/~kragen/tao-of-programming.html">Source originale du contenu</a></h3>
  445. <p> Translated by Geoffrey James
  446. </p>
  447. <p> Transcribed by Duke Hillard
  448. </p>
  449. <p> Transmitted by Anupam Trivedi, Sajitha Tampi, and Meghshyam Jagannath
  450. </p>
  451. <p> Re-html-ized and edited by Kragen Sittler
  452. </p>
  453. <p> <em>Last modified 1996-04-10 or earlier</em>
  454. </p>
  455. <hr/>
  456. <h2 align="right"> Table of Contents </h2>
  457. <ol>
  458. <li> <a href="#book1">The Silent Void</a>
  459. </li><li> <a href="#book2">The Ancient Masters</a>
  460. </li><li> <a href="#book3">Design</a>
  461. </li><li> <a href="#book4">Coding</a>
  462. </li><li> <a href="#book5">Maintenance</a>
  463. </li><li> <a href="#book6">Management</a>
  464. </li><li> <a href="#book7">Corporate Wisdom</a>
  465. </li><li> <a href="#book8">Hardware and Software</a>
  466. </li><li> <a href="#book9">Epilogue</a>
  467. </li></ol>
  468. <hr/>
  469. <p> Thus spake the master programmer:
  470. </p>
  471. <p> ``When you have learned to snatch the error code from the trap frame, it
  472. will be time for you to leave.''
  473. </p>
  474. <h3 align="center"> 1.1</h3>
  475. <p> Something mysterious is formed, born in the silent void. Waiting alone
  476. and unmoving, it is at once still and yet in constant motion. It is
  477. the source of all programs. I do not know its name, so I will call it
  478. the Tao of Programming.
  479. </p>
  480. <p> If the Tao is great, then the operating system is great. If the
  481. operating system is great, then the compiler is great. If the compiler
  482. is great, then the application is great. The user is pleased and there
  483. exists harmony in the world.
  484. </p>
  485. <p> The Tao of Programming flows far away and returns on the wind of morning.
  486. </p>
  487. <h3 align="center"> 1.2</h3>
  488. <p> The Tao gave birth to machine language. Machine language gave birth to
  489. the assembler.
  490. </p>
  491. <p> The assembler gave birth to the compiler. Now there are ten thousand
  492. languages.
  493. </p>
  494. <p> Each language has its purpose, however humble. Each language expresses
  495. the Yin and Yang of software. Each language has its place within the
  496. Tao.
  497. </p>
  498. <p> But do not program in <tt>COBOL</tt> if you can avoid it.
  499. </p>
  500. <h3 align="center"> 1.3</h3>
  501. <p> In the beginning was the Tao. The Tao gave birth to Space and Time.
  502. Therefore Space and Time are Yin and Yang of programming.
  503. </p>
  504. <p> Programmers that do not comprehend the Tao are always running out of
  505. time and space for their programs. Programmers that comprehend the
  506. Tao always have enough time and space to accomplish their goals.
  507. </p>
  508. <p> How could it be otherwise?
  509. </p>
  510. <h3 align="center"> 1.4</h3>
  511. <p> The wise programmer is told about Tao and follows it. The average
  512. programmer is told about Tao and searches for it. The foolish
  513. programmer is told about Tao and laughs at it.
  514. </p>
  515. <p> If it were not for laughter, there would be no Tao.
  516. </p>
  517. <p> The highest sounds are hardest to hear. <br/>
  518. Going forward is a way to retreat. <br/>
  519. Great talent shows itself late in life. <br/>
  520. Even a perfect program still has bugs. <br/>
  521. </p>
  522. <hr/>
  523. <p> Thus spake the master programmer:
  524. </p>
  525. <p> ``After three days without programming, life becomes meaningless.''
  526. </p>
  527. <h3 align="center"> 2.1</h3>
  528. <p> The programmers of old were mysterious and profound. We cannot fathom
  529. their thoughts, so all we do is describe their appearance.
  530. </p>
  531. <p> Aware, like a fox crossing the water. Alert, like a general on the
  532. battlefield. Kind, like a hostess greeting her guests. Simple, like
  533. uncarved blocks of wood. Opaque, like black pools in darkened caves.
  534. </p>
  535. <p> Who can tell the secrets of their hearts and minds?
  536. </p>
  537. <p> The answer exists only in Tao.
  538. </p>
  539. <h3 align="center"> 2.2</h3>
  540. <p> Grand Master Turing once dreamed that he was a machine. When he awoke
  541. he exclaimed:
  542. </p>
  543. <blockquote>
  544. ``I don't know whether I am Turing dreaming that I am a machine,
  545. or a machine dreaming that I am Turing!''
  546. </blockquote>
  547. <h3 align="center"> 2.3</h3>
  548. <p> A programmer from a very large computer company went to a software
  549. conference and then returned to report to his manager, saying: ``What
  550. sort of programmers work for other companies? They behaved badly and
  551. were unconcerned with appearances. Their hair was long and unkempt
  552. and their clothes were wrinkled and old. They crashed our hospitality
  553. suite and they made rude noises during my presentation.''
  554. </p>
  555. <p> The manager said: ``I should have never sent you to the conference.
  556. Those programmers live beyond the physical world. They consider life
  557. absurd, an accidental coincidence. They come and go without knowing
  558. limitations. Without a care, they live only for their programs. Why
  559. should they bother with social conventions?
  560. </p>
  561. <p> ``They are alive within the Tao.''
  562. </p>
  563. <h3 align="center"> 2.4</h3>
  564. <p> A novice asked the Master: ``Here is a programmer that never designs,
  565. documents or tests his programs. Yet all who know him consider him
  566. one of the best programmers in the world. Why is this?''
  567. </p>
  568. <p> The Master replies: ``That programmer has mastered the Tao. He has
  569. gone beyond the need for design; he does not become angry when the
  570. system crashes, but accepts the universe without concern. He has gone
  571. beyond the need for documentation; he no longer cares if anyone else
  572. sees his code. He has gone beyond the need for testing; each of his
  573. programs are perfect within themselves, serene and elegant, their
  574. purpose self-evident. Truly, he has entered the mystery of Tao.''
  575. </p>
  576. <hr/>
  577. <p> Thus spake the master programmer:
  578. </p>
  579. <p> ``When the program is being tested, it is too late to make design
  580. changes.''
  581. </p>
  582. <h3 align="center"> 3.1</h3>
  583. <p> There once was a man who went to a computer trade show. Each day as
  584. he entered, the man told the guard at the door:
  585. </p>
  586. <blockquote>
  587. ``I am a great thief, renowned for my feats of shoplifting. Be
  588. forewarned, for this trade show shall not escape unplundered.''
  589. </blockquote>
  590. <p> This speech disturbed the guard greatly, because there were millions
  591. of dollars of computer equipment inside, so he watched the man
  592. carefully. But the man merely wandered from booth to booth, humming
  593. quietly to himself.
  594. </p>
  595. <p> When the man left, the guard took him aside and searched his clothes,
  596. but nothing was to be found.
  597. </p>
  598. <p> On the next day of the trade show, the man returned and chided the guard
  599. saying: ``I escaped with a vast booty yesterday, but today will be even
  600. better.'' So the guard watched him ever more closely, but to no avail.
  601. </p>
  602. <p> On the final day of the trade show, the guard could restrain his curiosity
  603. no longer. ``Sir Thief,'' he said, ``I am so perplexed, I cannot live in
  604. peace. Please enlighten me. What is it that you are stealing?''
  605. </p>
  606. <p> The man smiled. ``I am stealing ideas,'' he said.
  607. </p>
  608. <h3 align="center"> 3.2</h3>
  609. <p> There once was a master programmer who wrote unstructured programs.
  610. A novice programmer, seeking to imitate him, also began to write
  611. unstructured programs. When the novice asked the master to evaluate
  612. his progress, the master criticized him for writing unstructured
  613. programs, saying, ``What is appropriate for the master is not
  614. appropriate for the novice. You must understand the Tao before
  615. transcending structure.''
  616. </p>
  617. <h3 align="center"> 3.3</h3>
  618. <p> There was once a programmer who was attached to the court of the
  619. warlord of Wu. The warlord asked the programmer: ``Which is easier to
  620. design: an accounting package or an operating system?''
  621. </p>
  622. <p> ``An operating system,'' replied the programmer.
  623. </p>
  624. <p> The warlord uttered an exclamation of disbelief. ``Surely an accounting
  625. package is trivial next to the complexity of an operating system,'' he said.
  626. </p>
  627. <p> ``Not so,'' said the programmer, ``when designing an accounting package,
  628. the programmer operates as a mediator between people having different
  629. ideas: how it must operate, how its reports must appear, and how it
  630. must conform to the tax laws. By contrast, an operating system is not
  631. limited by outside appearances. When designing an operating system,
  632. the programmer seeks the simplest harmony between machine and ideas.
  633. This is why an operating system is easier to design.''
  634. </p>
  635. <p> The warlord of Wu nodded and smiled. ``That is all good and well, but
  636. which is easier to debug?''
  637. </p>
  638. <p> The programmer made no reply.
  639. </p>
  640. <h3 align="center"> 3.4</h3>
  641. <p> A manager went to the master programmer and showed him the requirements
  642. document for a new application. The manager asked the master: ``How
  643. long will it take to design this system if I assign five programmers to it?''
  644. </p>
  645. <p> ``It will take one year,'' said the master promptly.
  646. </p>
  647. <p> ``But we need this system immediately or even sooner! How long will it
  648. take if I assign ten programmers to it?''
  649. </p>
  650. <p> The master programmer frowned. ``In that case, it will take two years.''
  651. </p>
  652. <p> ``And what if I assign a hundred programmers to it?''
  653. </p>
  654. <p> The master programmer shrugged. ``Then the design will never be
  655. completed,'' he said.
  656. </p>
  657. <hr/>
  658. <p> Thus spake the master programmer:
  659. </p>
  660. <p> ``A well-written program is its own heaven; a poorly-written program is its
  661. own hell.''
  662. </p>
  663. <h3 align="center"> 4.1</h3>
  664. <p> A program should be light and agile, its subroutines connected like a
  665. string of pearls. The spirit and intent of the program should be
  666. retained throughout. There should be neither too little or too much,
  667. neither needless loops nor useless variables, neither lack of
  668. structure nor overwhelming rigidity.
  669. </p>
  670. <p> A program should follow the `Law of Least Astonishment'. What is this
  671. law? It is simply that the program should always respond to the user
  672. in the way that astonishes him least.
  673. </p>
  674. <p> A program, no matter how complex, should act as a single unit. The program
  675. should be directed by the logic within rather than by outward appearances.
  676. </p>
  677. <p> If the program fails in these requirements, it will be in a state of
  678. disorder and confusion. The only way to correct this is to rewrite
  679. the program.
  680. </p>
  681. <h3 align="center"> 4.2</h3>
  682. <p> A novice asked the master: ``I have a program that sometime runs and
  683. sometimes aborts. I have followed the rules of programming, yet I am
  684. totally baffled. What is the reason for this?''
  685. </p>
  686. <p> The master replied: ``You are confused because you do not understand
  687. Tao. Only a fool expects rational behavior from his fellow humans.
  688. Why do you expect it from a machine that humans have constructed?
  689. Computers simulate determinism; only Tao is perfect.
  690. </p>
  691. <p> ``The rules of programming are transitory; only Tao is eternal.
  692. Therefore you must contemplate Tao before you receive enlightenment.''
  693. </p>
  694. <p> ``But how will I know when I have received enlightenment?'' asked the
  695. novice.
  696. </p>
  697. <p> ``Your program will then run correctly,'' replied the master.
  698. </p>
  699. <h3 align="center"> 4.3</h3>
  700. <p> A master was explaining the nature of Tao of to one of his novices.
  701. ``The Tao is embodied in all software - regardless of how
  702. insignificant,'' said the master.
  703. </p>
  704. <p> ``Is the Tao in a hand-held calculator?'' asked the novice.
  705. </p>
  706. <p> ``It is,'' came the reply.
  707. </p>
  708. <p> ``Is the Tao in a video game?'' continued the novice.
  709. </p>
  710. <p> ``It is even in a video game,'' said the master.
  711. </p>
  712. <p> ``And is the Tao in the DOS for a personal computer?''
  713. </p>
  714. <p> The master coughed and shifted his position slightly. ``The lesson
  715. is over for today,'' he said.
  716. </p>
  717. <h3 align="center"> 4.4</h3>
  718. <p> Prince Wang's programmer was coding software. His fingers danced upon
  719. the keyboard. The program compiled without an error message, and the
  720. program ran like a gentle wind.
  721. </p>
  722. <p> ``Excellent!'' the Prince exclaimed, ``Your technique is faultless!''
  723. </p>
  724. <p> ``Technique?'' said the programmer turning from his terminal, ``What I
  725. follow is Tao - beyond all techniques! When I first began to program
  726. I would see before me the whole problem in one mass. After three
  727. years I no longer saw this mass. Instead, I used subroutines. But now
  728. I see nothing. My whole being exists in a formless void. My senses
  729. are idle. My spirit, free to work without plan, follows its own
  730. instinct. In short, my program writes itself. True, sometimes there
  731. are difficult problems. I see them coming, I slow down, I watch
  732. silently. Then I change a single line of code and the difficulties
  733. vanish like puffs of idle smoke. I then compile the program. I sit
  734. still and let the joy of the work fill my being. I close my eyes for
  735. a moment and then log off.''
  736. </p>
  737. <p> Prince Wang said, ``Would that all of my programmers were as wise!''
  738. </p>
  739. <hr/>
  740. <p> Thus spake the master programmer:
  741. </p>
  742. <p> ``Though a program be but three lines long, someday it will have to be
  743. maintained.''
  744. </p>
  745. <h3 align="center"> 5.1</h3>
  746. <p> A well-used door needs no oil on its hinges. <br/>
  747. A swift-flowing stream does not grow stagnant. <br/>
  748. Neither sound nor thoughts can travel through a vacuum. <br/>
  749. Software rots if not used. <br/>
  750. </p>
  751. <p> These are great mysteries.
  752. </p>
  753. <h3 align="center"> 5.2</h3>
  754. <p> A manager asked a programmer how long it would take him to finish
  755. the program on which he was working. ``It will be finished tomorrow,''
  756. the programmer promptly replied.
  757. </p>
  758. <p> ``I think you are being unrealistic,'' said the manager, ``Truthfully,
  759. how long will it take?''
  760. </p>
  761. <p> The programmer thought for a moment. ``I have some features that I
  762. wish to add. This will take at least two weeks,'' he finally said.
  763. </p>
  764. <p> ``Even that is too much to expect,'' insisted the manager, ``I will be
  765. satisfied if you simply tell me when the program is complete.''
  766. </p>
  767. <p> The programmer agreed to this.
  768. </p>
  769. <p> Several years later, the manager retired. On the way to his retirement
  770. luncheon, he discovered the programmer asleep at his terminal. He had
  771. been programming all night.
  772. </p>
  773. <h3 align="center"> 5.3</h3>
  774. <p> A novice programmer was once assigned to code a simple financial package.
  775. </p>
  776. <p> The novice worked furiously for many days, but when his master reviewed
  777. his program, he discovered that it contained a screen editor, a set of
  778. generalized graphics routines, an artificial intelligence interface,
  779. but not the slightest mention of anything financial.
  780. </p>
  781. <p> When the master asked about this, the novice became indignant. ``Don't
  782. be so impatient,'' he said, ``I'll put in the financial stuff eventually.''
  783. </p>
  784. <h3 align="center"> 5.4</h3>
  785. <p> Does a good farmer neglect a crop he has planted? <br/>
  786. Does a good teacher overlook even the most humble student? <br/>
  787. Does a good father allow a single child to starve? <br/>
  788. Does a good programmer refuse to maintain his code? <br/>
  789. </p>
  790. <hr/>
  791. <p> Thus spake the master programmer:
  792. </p>
  793. <p> ``Let the programmers be many and the managers few - then all will be
  794. productive.''
  795. </p>
  796. <h3 align="center"> 6.1</h3>
  797. <p> When managers hold endless meetings, the programmers write games.
  798. When accountants talk of quarterly profits, the development budget
  799. is about to be cut. When senior scientists talk blue sky, the clouds
  800. are about to roll in.
  801. </p>
  802. <p> Truly, this is not the Tao of Programming.
  803. </p>
  804. <p> When managers make commitments, game programs are ignored. When
  805. accountants make long-range plans, harmony and order are about to
  806. be restored. When senior scientists address the problems at hand,
  807. the problems will soon be solved.
  808. </p>
  809. <p> Truly, this is the Tao of Programming.
  810. </p>
  811. <h3 align="center"> 6.2</h3>
  812. <p> Why are programmers non-productive? <br/>
  813. Because their time is wasted in meetings.
  814. </p>
  815. <p> Why are programmers rebellious? <br/>
  816. Because the management interferes too much.
  817. </p>
  818. <p> Why are the programmers resigning one by one? <br/>
  819. Because they are burnt out.
  820. </p>
  821. <p> Having worked for poor management, they no longer value their jobs.
  822. </p>
  823. <h3 align="center"> 6.3</h3>
  824. <p> A manager was about to be fired, but a programmer who worked for him
  825. invented a new program that became popular and sold well. As a result,
  826. the manager retained his job.
  827. </p>
  828. <p> The manager tried to give the programmer a bonus, but the programmer
  829. refused it, saying, ``I wrote the program because I thought it was
  830. an interesting concept, and thus I expect no reward.''
  831. </p>
  832. <p> The manager upon hearing this remarked, ``This programmer, though he
  833. holds a position of small esteem, understands well the proper duty
  834. of an employee. Let us promote him to the exalted position of
  835. management consultant!''
  836. </p>
  837. <p> But when told this, the programmer once more refused, saying,
  838. ``I exist so that I can program. If I were promoted, I would do
  839. nothing but waste everyone's time. Can I go now? I have a program
  840. that I'm working on."
  841. </p>
  842. <h3 align="center"> 6.4</h3>
  843. <p> A manager went to his programmers and told them: ``As regards to
  844. your work hours: you are going to have to come in at nine in the
  845. morning and leave at five in the afternoon.'' At this, all of them
  846. became angry and several resigned on the spot.
  847. </p>
  848. <p> So the manager said: ``All right, in that case you may set your own
  849. working hours, as long as you finish your projects on schedule.''
  850. The programmers, now satisfied, began to come in at noon and work
  851. to the wee hours of the morning.
  852. </p>
  853. <hr/>
  854. <p> Thus spake the master programmer:
  855. </p>
  856. <p> ``You can demonstrate a program for a corporate executive, but you can't
  857. make him computer literate.''
  858. </p>
  859. <h3 align="center"> 7.1</h3>
  860. <p> A novice asked the master: ``In the east there is a great
  861. tree-structure that men call `Corporate Headquarters'. It is bloated
  862. out of shape with vice presidents and accountants. It issues a
  863. multitude of memos, each saying `Go, Hence!' or `Go, Hither!' and
  864. nobody knows what is meant. Every year new names are put onto the
  865. branches, but all to no avail. How can such an unnatural entity be?"
  866. </p>
  867. <p> The master replied: ``You perceive this immense structure and are
  868. disturbed that it has no rational purpose. Can you not take
  869. amusement from its endless gyrations? Do you not enjoy the
  870. untroubled ease of programming beneath its sheltering branches?
  871. Why are you bothered by its uselessness?''
  872. </p>
  873. <h3 align="center"> 7.2</h3>
  874. <p> In the east there is a shark which is larger than all other fish. It
  875. changes into a bird whose wings are like clouds filling the sky. When
  876. this bird moves across the land, it brings a message from Corporate
  877. Headquarters. This message it drops into the midst of the programmers,
  878. like a seagull making its mark upon the beach. Then the bird mounts
  879. on the wind and, with the blue sky at its back, returns home.
  880. </p>
  881. <p> The novice programmer stares in wonder at the bird, for he understands
  882. it not. The average programmer dreads the coming of the bird, for he
  883. fears its message. The master programmer continues to work at his
  884. terminal, for he does not know that the bird has come and gone.
  885. </p>
  886. <h3 align="center"> 7.3</h3>
  887. <p> The Magician of the Ivory Tower brought his latest invention for the
  888. master programmer to examine. The magician wheeled a large black box
  889. into the master's office while the master waited in silence.
  890. </p>
  891. <p> ``This is an integrated, distributed, general-purpose workstation,''
  892. began the magician, ``ergonomically designed with a proprietary
  893. operating system, sixth generation languages, and multiple state of
  894. the art user interfaces. It took my assistants several hundred man
  895. years to construct. Is it not amazing?''
  896. </p>
  897. <p> The master raised his eyebrows slightly. ``It is indeed amazing,'' he said.
  898. </p>
  899. <p> ``Corporate Headquarters has commanded,'' continued the magician,
  900. ``that everyone use this workstation as a platform for new programs.
  901. Do you agree to this?''
  902. </p>
  903. <p>
  904. ``Certainly,'' replied the master, ``I will have it transported to the
  905. data center immediately!'' And the magician returned to his tower,
  906. well pleased.
  907. </p>
  908. <p> Several days later, a novice wandered into the office of the master
  909. programmer and said, ``I cannot find the listing for my new program.
  910. Do you know where it might be?''
  911. </p>
  912. <p> ``Yes,'' replied the master, ``the listings are stacked on the platform
  913. in the data center.''
  914. </p>
  915. <h3 align="center"> 7.4</h3>
  916. <p> The master programmer moves from program to program without fear.
  917. No change in management can harm him. He will not be fired, even if
  918. the project is cancelled. Why is this? He is filled with Tao.
  919. </p>
  920. <hr/>
  921. <p> Thus spake the master programmer:
  922. </p>
  923. <p> ``Without the wind, the grass does not move. Without software, hardware is
  924. useless.''
  925. </p>
  926. <h3 align="center"> 8.1</h3>
  927. <p> A novice asked the master: ``I perceive that one computer company is
  928. much larger than all others. It towers above its competition like a
  929. giant among dwarfs. Any one of its divisions could comprise an entire
  930. business. Why is this so?''
  931. </p>
  932. <p> The master replied, ``Why do you ask such foolish questions? That
  933. company is large because it is large. If it only made hardware,
  934. nobody would buy it. If it only made software, nobody would use it.
  935. If it only maintained systems, people would treat it like a servant.
  936. But because it combines all of these things, people think it one of
  937. the gods! By not seeking to strive, it conquers without effort.''
  938. </p>
  939. <h3 align="center"> 8.2</h3>
  940. <p> A master programmer passed a novice programmer one day. The master
  941. noted the novice's preoccupation with a hand-held computer game.
  942. ``Excuse me,'' he said, ``may I examine it?''
  943. </p>
  944. <p> The novice bolted to attention and handed the device to the master.
  945. ``I see that the device claims to have three levels of play: Easy,
  946. Medium, and Hard,'' said the master. ``Yet every such device has
  947. another level of play, where the device seeks not to conquer the
  948. human, nor to be conquered by the human.''
  949. </p>
  950. <p> ``Pray, great master,'' implored the novice, ``how does one find this
  951. mysterious setting?''
  952. </p>
  953. <p> The master dropped the device to the ground and crushed it underfoot.
  954. And suddenly the novice was enlightened.
  955. </p>
  956. <h3 align="center"> 8.3</h3>
  957. <p> There was once a programmer who worked upon microprocessors. ``Look
  958. at how well off I am here,'' he said to a mainframe programmer who came
  959. to visit, ``I have my own operating system and file storage device.
  960. I do not have to share my resources with anyone. The software is self-
  961. consistent and easy-to-use. Why do you not quit your present job and
  962. join me here?''
  963. </p>
  964. <p> The mainframe programmer then began to describe his system to his friend,
  965. saying ``The mainframe sits like an ancient sage meditating in the midst
  966. of the data center. Its disk drives lie end-to-end like a great ocean of
  967. machinery. The software is as multifaceted as a diamond, and as convoluted
  968. as a primeval jungle. The programs, each unique, move through the system
  969. like a swift-flowing river. That is why I am happy where I am.''
  970. </p>
  971. <p> The microcomputer programmer, upon hearing this, fell silent. But the
  972. two programmers remained friends until the end of their days.
  973. </p>
  974. <h3 align="center"> 8.4</h3>
  975. <p> Hardware met Software on the road to Changtse. Software said: ``You
  976. are Yin and I am Yang. If we travel together we will become famous
  977. and earn vast sums of money.'' And so the set forth together, thinking
  978. to conquer the world.
  979. </p>
  980. <p> Presently they met Firmware, who was dressed in tattered rags and
  981. hobbled along propped on a thorny stick. Firmware said to them:
  982. ``The Tao lies beyond Yin and Yang. It is silent and still as a pool
  983. of water. It does not seek fame, therefore nobody knows its presence.
  984. It does not seek fortune, for it is complete within itself. It exists
  985. beyond space and time.''
  986. </p>
  987. <p> Software and Hardware, ashamed, returned to their homes.
  988. </p>
  989. <hr/>
  990. <p> Thus spake the master programmer:
  991. </p>
  992. <p> ``It is time for you to leave.''
  993. </p>
  994. <hr/>
  995. <p></body></p>
  996. </article>
  997. </section>
  998. <nav id="jumpto">
  999. <p>
  1000. <a href="/david/blog/">Accueil du blog</a> |
  1001. <a href="http://canonical.org/~kragen/tao-of-programming.html">Source originale</a> |
  1002. <a href="/david/stream/2019/">Accueil du flux</a>
  1003. </p>
  1004. </nav>
  1005. <footer>
  1006. <div>
  1007. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  1008. <p>
  1009. Bonjour/Hi!
  1010. 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>
  1011. 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>).
  1012. </p>
  1013. <p>
  1014. 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>.
  1015. </p>
  1016. <p>
  1017. Voici quelques articles choisis :
  1018. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  1019. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  1020. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  1021. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  1022. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  1023. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  1024. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  1025. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  1026. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  1027. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  1028. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  1029. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  1030. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  1031. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  1032. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  1033. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  1034. </p>
  1035. <p>
  1036. 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>.
  1037. </p>
  1038. <p>
  1039. Je ne traque pas ta navigation mais mon
  1040. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  1041. conserve des logs d’accès.
  1042. </p>
  1043. </div>
  1044. </footer>
  1045. <script type="text/javascript">
  1046. ;(_ => {
  1047. const jumper = document.getElementById('jumper')
  1048. jumper.addEventListener('click', e => {
  1049. e.preventDefault()
  1050. const anchor = e.target.getAttribute('href')
  1051. const targetEl = document.getElementById(anchor.substring(1))
  1052. targetEl.scrollIntoView({behavior: 'smooth'})
  1053. })
  1054. })()
  1055. </script>