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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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` 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>Is the madness ever going to end? (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. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://unixsheikh.com/articles/is-the-madness-ever-going-to-end.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Is the madness ever going to end?</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://unixsheikh.com/articles/is-the-madness-ever-going-to-end.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="post-data">Published on <span id="pubdate">2022-01-11</span>. Modified on <span id="moddate">2022-01-14</span>.</p>
  71. <p class="info info-yellow"><span id="description">There is something seriously wrong with the IT industry. It's so bad that I haven't managed to find a single industry with the same massive amount of stupidity, with the exception of perhaps the fashion industry. It's like the IT industry has been paralyzed in some strange kind of mass hypnosis.</span></p>
  72. <p>No, I will not be polite and call it something else because it is truly sheer stupidity.</p>
  73. <p>In the past IT people, whether we're talking about programmers or something else, were very clever people. People with a high level of intelligence that took serious pride in doing things in a meaningful and pragmatic way.</p>
  74. <p>In the so-called modern day it's like everyone - except a few - has dropped their brain on the floor. They keep inventing "revolutionary new ways" of doing the same thing that could be done in a dozen ways already. And they do that by coating more and more and more unnecessary complexity on top of existing technology stacks.</p>
  75. <p>Electron and React Native Desktop are supposed to be a revolutionary new way of making desktop applications. Except they are not, and they eat up all the memory you have and still ask for more. They constantly crash and have no value over a native desktop application what so ever - well, perhaps with the only exception that now a 2 year old baby can make something shiny that you can click on with your mouse.</p>
  76. <p><i>But, noooo, you're a dinosaur, you don't understand anything, it's the future, it's the modern way of doing things. Native desktop apps are dead!</i></p>
  77. <p>PHP is a programming language mainly for web development. It is made in C, a pure procedural language, originally as a templating language, and it still is a templating language at the core, yet it is apparently not good enough. We have to put a completely different template system on top of PHP, also written in PHP, which now makes the application load four times as slow.</p>
  78. <p><i>But, noooo, you're a dinosaur, you don't understand anything, it's the future, it's the modern way of doing things. We don't do that in modern web development any more!</i></p>
  79. <p>All web servers have a built-in router. Whether it's NGINX, Apache, lighttpd, Caddy or something else. But no. Let's not use that; let's add yet another router on top of that with a single entry point and then basically re-write every single request before it gets served.</p>
  80. <p><i>But, noooo, you're a dinosaur, you don't understand anything, it's the future, it's the modern way of doing things. We don't do that in modern web development any more!</i></p>
  81. <p>The browser's native language is HTML. HTML is a markup language and if you feed HTML to the browser it will quickly render the page with what you give it. But no. Let's not do that. Let's instead feed the browser with JSON and then have the built-in JavaScript engine translate that into a pre-formatted output which then gets translated into HTML before it's served to the user. Oh, and while we're at it, let's do the same thing with CSS. So, now your simple news article or blog post takes ages to load on a 1 gigabit connection and requires about 3 times as much electrical power even though you're only serving text and perhaps a few images - just because someone thought it was a really good idea to make a React app instead of a simple HTML page rendered by the server.</p>
  82. <p>Why in the world has this idiotic trend of abstracting everything away by layers upon layers of complexity gained such a strong foothold in the industry? Has everyone except the "unix greybeards" gone mad!?</p>
  83. <p>The situation is really bad for the industry. And it is a real shame that the younger generations who grow up not knowing anything else, thinking that these so-called "modern ways of doing things" are the correct and best ways, will have to suffer when everything starts to crumble (which it already is).</p>
  84. <p>The entry barrier to programming needs to be high! Programming is engineering; it's not something where you throw stuff at the wall and see what sticks and just assume that programming languages, browsers, and operating systems are made of magical dust.</p>
  85. <h2>Update: 2022-01-12</h2>
  86. <p>Someone wrote me an email pointing out the famous saying by <a href="https://en.wikipedia.org/wiki/Brian_Kernighan">Brian Kernighan</a>, who has stated that: "<i>Programmer time is expensive; conserve it in preference to machine time</i>", but that does not apply here at all.</p>
  87. <p>Firstly, we live in a time in which the environmental concerns needs to be considered too. As I mentioned in the beginning, it is irresponsible to keep throwing more hardware at a problem that doesn't even need to exist.</p>
  88. <p>Secondly, Brian is being general, which I completely agree with. The situation I am talking about in the above is something far beyond being justified by any means. The added layers of complexity results in products that are horrible. Everyone is experiencing the pain of using the web daily. Simple websites that contains nothing more that text and images takes forever to load, they only work in a few browsers, and they are suffering from a flood of almost daily security issues.</p>
  89. <p>Someone else wrote me another email. The person assumed that I have no experience in web development, or that I don't have any experience in larger projects, and that is the reason why I write the above.</p>
  90. <p>I have been doing web development since about 1997 and I have been involved in many different projects with many different companies and many differently sized development teams.</p>
  91. <p>One of my main activities as a contractor today is to <a href="https://www.unixsheikh.com/articles/javascript-malware-infested-nightmare.html">clean up the mess</a> that I am addressing in this article.</p>
  92. <p>A company may save both time and money in the beginning because, yes you can get something running quickly, but they <strong>always</strong> pay the price in the long run when they are faced with all the issues their bad decision has caused. Every time, and without exception, the developers are blamed for not raising enough concerns about the problems.</p>
  93. <p>I write (rant) about it, not only because I - as a daily consumer of the web - are faced with all these horrible websites, or because friends and family complain about how bad this or that website has become, but mainly because I am faced with the results of this mess every single day. And I can tell you, in about 99% of the cases I deal with, people get fired and everything is re-written from the ground up without any of the added bloat - not because we want to, but because we absolutely need to.</p>
  94. <h2>Update 2022-01-14:</h2>
  95. <p>Someone on Hacker News commented on this article with the following comment, which sums it up pretty good:</p>
  96. <blockquote>I have been in professional web development since 2004 and I mostly agree with the author that there are massive amounts of groupthink going on. "Modern" web development has standardized in tool stacks which are insanely complicated, far beyond anything that is warranted in most cases. We have forgotten how to make simple things in simple ways.<br><br>At a minimum you need node, npm, webpack, babel, an spa framework, a frontend router, a css transpiler, a css framework, a test runner, a testing functions library, and a bunch of smaller things, and that's just what is "needed" to build a static website with a bit of interaction. We're not even talking about the dockerized insanity that happens as soon as you want to slide an API under that beast.</blockquote>
  97. <p>Bingo!</p>
  98. </article>
  99. <hr>
  100. <footer>
  101. <p>
  102. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  103. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  104. </svg> Accueil</a> •
  105. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  106. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  107. </svg> Suivre</a> •
  108. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  110. </svg> Pro</a> •
  111. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  113. </svg> Email</a> •
  114. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  116. </svg> Légal</abbr>
  117. </p>
  118. <template id="theme-selector">
  119. <form>
  120. <fieldset>
  121. <legend><svg class="icon icon-brightness-contrast">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  123. </svg> Thème</legend>
  124. <label>
  125. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  126. </label>
  127. <label>
  128. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  129. </label>
  130. <label>
  131. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  132. </label>
  133. </fieldset>
  134. </form>
  135. </template>
  136. </footer>
  137. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  138. <script>
  139. function loadThemeForm(templateName) {
  140. const themeSelectorTemplate = document.querySelector(templateName)
  141. const form = themeSelectorTemplate.content.firstElementChild
  142. themeSelectorTemplate.replaceWith(form)
  143. form.addEventListener('change', (e) => {
  144. const chosenColorScheme = e.target.value
  145. localStorage.setItem('theme', chosenColorScheme)
  146. toggleTheme(chosenColorScheme)
  147. })
  148. const selectedTheme = localStorage.getItem('theme')
  149. if (selectedTheme && selectedTheme !== 'undefined') {
  150. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  151. }
  152. }
  153. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  154. window.addEventListener('load', () => {
  155. let hasDarkRules = false
  156. for (const styleSheet of Array.from(document.styleSheets)) {
  157. let mediaRules = []
  158. for (const cssRule of styleSheet.cssRules) {
  159. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  160. continue
  161. }
  162. // WARNING: Safari does not have/supports `conditionText`.
  163. if (cssRule.conditionText) {
  164. if (cssRule.conditionText !== prefersColorSchemeDark) {
  165. continue
  166. }
  167. } else {
  168. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  169. continue
  170. }
  171. }
  172. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  173. }
  174. // WARNING: do not try to insert a Rule to a styleSheet you are
  175. // currently iterating on, otherwise the browser will be stuck
  176. // in a infinite loop…
  177. for (const mediaRule of mediaRules) {
  178. styleSheet.insertRule(mediaRule.cssText)
  179. hasDarkRules = true
  180. }
  181. }
  182. if (hasDarkRules) {
  183. loadThemeForm('#theme-selector')
  184. }
  185. })
  186. </script>
  187. </body>
  188. </html>