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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  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>Nostalgie de l'ancien web (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://osd.ovh/index.php?article10/nostalgie-de-lancien-web">
  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>Nostalgie de l'ancien web</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.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://osd.ovh/index.php?article10/nostalgie-de-lancien-web" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>
  71. Petit écart sur la tech suite à la lecture de l'article : <i>lehollandaisvolant</i> : <a href="https://lehollandaisvolant.net/?d=2021/01/19/09/09/59-recentrage-sur-le-blog">recentrage-sur-le-blog</a>
  72. </p>
  73. <hr>
  74. <p>
  75. Je bosse dans la « Tech » ou plutôt la « old-school » tech. Je me plais à dire que je suis Informaticien à l’ancienne.
  76. </p>
  77. <p>
  78. J’ai quitté les réseaux sociaux il y a bien longtemps, qu’en j’ai compris que la plupart des gens sur facebouck passaient leur temps à bader la vie des autres ou essayer de chopper tout ce qui bouge. Et que twitteour est simplement le paradis des haters et râleurs en tout genre. Bref chacun sa came.
  79. </p>
  80. <p>
  81. Je suis nostalgique de l’ancien web, celui où les pages finissaient pour la plupart en .html ou de simples petits scripts PHP. À chaque page tu risquais la crise d’épilepsie car les gifs étaient agressifs ! À cette époque le web était libre ! <br>
  82. Bloguer n’était pas un métier, personne n’essayait d’influencer personne ou de placer du produit. Il te suffisait de coder un peu en HTML/PHP et tu étais le roi du web. Tu n’avais pas besoin de brasser de l’air sur les réseaux sociaux, en podcast ou de vendre ton cul aux GAFAM. Les réseaux sociaux sont apparus, avec toutes leurs merdes et leurs stats. Les gens se sont laissés enfermer dans des cyber-bocaux et y déversent leurs conneries comme s’ils allaient changer le monde planqué derrière leurs claviers à la con.
  83. </p>
  84. <p>
  85. La tech va mal, les applications sont de plus en plus merdiques, et les piles technologiques bancales, voir volontairement complexifiées. Il y a quelque temps j’ai fait un gros rétropédalage. J’ai quitté python, nodejs et toutes ces merdes pour revenir à du Php. C’est moins à la mode, mais niveau perf tout y est, mon code est redevenu simple et robuste, ça coûte souvent que-dalle à mettre en prod, et je suis rentré à la maison. J’y suis bien, et les utilisateurs sont contents.
  86. </p>
  87. <p>
  88. Bref, on parle de liberté. De décentralisation. A force de s’agiter dans un bocal on fait monter la mayonnaise. C’est exactement ce qui se passe du côté des réseaux sociaux. C’est des ruches et les algos s’amusent à secouer la boite pour voir comment réagissent les masses. Que des cobayes. La plupart sont des moutons, ne pouvant se passer d’un GPS, de vidéos merdiques sur YooupyTube et chialent quand ils ont oublié leur smartphone. Ils acceptent n’importe quoi du moment qu’on leur laisse leurs applications d’assistés. Côté dev c’est pas mieux, on veut du bling bling on se soumet aux APIs et Cloud des géants. On ne sait plus coder, on sait juste manipuler des ressources et des frameworks obscurs. Bien entendu les connaissances durement aqcuisent, entre deux framework et parfois deux versions ne sont pas transposables ailleurs, les compétences deviennent périssables ! Merci G@@gle !. Enfin je dis on … comme certain gaulois, je fais du old-school et je mange pas de ce pain là. Je me soumets pas au marketing agressif des soi-disant ‘sources d’actualité » de la tech. Avec leurs sondages bidonnés cherchant à convertir les devs à de nouveaux langages. On dirait des gourous essayant de recruter de nouveaux fidèles pour les frameworks offert "gratuitement" par les géants du web. Ce n’est plus des sources d’actualités mais des comptoirs de pubs. Ils vendent leurs culs « aux nouvelles techs » pour toucher des gros chèques car ils arrivent pas à se faire du blé autrement. (Bien-sûr que j'utilise toujours Jquery, Javascript c'est pour manipuler du DOM et basta. L'async et toutes ces prises de têtes sont contre productives dans 99% des cas. Un bon vieux callback et ça repart.) La plupart des mecs qui viennent t'apprendre à coder, n'ont jamais dépassé des "hello world", ni mis leurs applications d'étudiants toute neuve dans un vrai environnement de production avec de la charge. Je te parle des boîtes où si l'application est down, tes collègues sont à l'arrêt. Là bas ils en ont rien à foutre de l'index TIOBE, il veulent que sa roxe, et que ça fonctionne H24. Note que je dis collègue et pas client, sous-traiter le développement et l'infra c'est irresponsable.
  89. </p>
  90. <p> L'esclavagisme 2.0, tu suis leurs technos ou tu crèves. Enfin ça c'est ce qu'ils veulent faire croire à la masse et aux entreprises qui lâchent les billets pour des applications toujours plus grosses et instables, là ou une caissière suffit à faire le job pour bien moins cher qu'une armée de dev. Et ces devs, qui passent leur vie à apprendre des choses qu'ils savaient déjà faire dans une autre techno devenu ringarde du jour au lendemain... tout ça gratos de peur de ne plus être bon sur le marché de l'emploi. Les machines j'en ai ma claque, quand ça merde on est tous bien content de trouver le bouton "contact" et de tomber sur un humain en chair et os. "Faut évoluer, faut vivre avec son temps !", ça sera sans moi. On ne vit pas la révolution numérique, on s'assure simplement que l'homme avance au même rythme que les machines ... ou plutôt du business. Money, money la tech a perdu la tête. Nous les vieux de la vielle, on a pas oublié les SSI - Sociétés Service Informatique. Vous les avez renommés ESN Entreprise de Services du Numérique, cela reste des machines à cash où les riches placent leur pognon. Siphonner les petites TPE,PME, prendre en otage leur systèmes informatique en leur vendant du rêve tout en exploitant les salariés du digital... ça aussi, ça cassera la gueule. Alors amusez-vous bien dans vos recrutements, les bons sont partis depuis bien longtemps, et malheureusement souvent loin de la tech. Vous avez de la chance, demain avec le No-CODE les commerciaux pourront enfin assumer leurs mensonges ! Comme si le métier d'un dev se limitait à savoir coder et celui d'un administrateur système à d'éditer des fichiers de confs ... Bonne révolution numérique à tous!
  91. </p>
  92. <p>
  93. Réveillez-vous, sortez vos lecteurs de flux RSS. Ouvrez-vos blogs.
  94. On peut toujours tisser la toile et libérer l’information, suffit de lever un peu la tête de son nombril.
  95. Arrêter de prendre la béquée de papa G@@gl€ et aller chercher soi-même ses sources d’informations.
  96. </p>
  97. </article>
  98. <hr>
  99. <footer>
  100. <p>
  101. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  102. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  103. </svg> Accueil</a> •
  104. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  105. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  106. </svg> Suivre</a> •
  107. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  108. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  109. </svg> Pro</a> •
  110. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  111. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  112. </svg> Email</a> •
  113. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  114. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  115. </svg> Légal</abbr>
  116. </p>
  117. <template id="theme-selector">
  118. <form>
  119. <fieldset>
  120. <legend><svg class="icon icon-brightness-contrast">
  121. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  122. </svg> Thème</legend>
  123. <label>
  124. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  125. </label>
  126. <label>
  127. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  128. </label>
  129. <label>
  130. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  131. </label>
  132. </fieldset>
  133. </form>
  134. </template>
  135. </footer>
  136. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  137. <script>
  138. function loadThemeForm(templateName) {
  139. const themeSelectorTemplate = document.querySelector(templateName)
  140. const form = themeSelectorTemplate.content.firstElementChild
  141. themeSelectorTemplate.replaceWith(form)
  142. form.addEventListener('change', (e) => {
  143. const chosenColorScheme = e.target.value
  144. localStorage.setItem('theme', chosenColorScheme)
  145. toggleTheme(chosenColorScheme)
  146. })
  147. const selectedTheme = localStorage.getItem('theme')
  148. if (selectedTheme && selectedTheme !== 'undefined') {
  149. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  150. }
  151. }
  152. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  153. window.addEventListener('load', () => {
  154. let hasDarkRules = false
  155. for (const styleSheet of Array.from(document.styleSheets)) {
  156. let mediaRules = []
  157. for (const cssRule of styleSheet.cssRules) {
  158. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  159. continue
  160. }
  161. // WARNING: Safari does not have/supports `conditionText`.
  162. if (cssRule.conditionText) {
  163. if (cssRule.conditionText !== prefersColorSchemeDark) {
  164. continue
  165. }
  166. } else {
  167. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  168. continue
  169. }
  170. }
  171. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  172. }
  173. // WARNING: do not try to insert a Rule to a styleSheet you are
  174. // currently iterating on, otherwise the browser will be stuck
  175. // in a infinite loop…
  176. for (const mediaRule of mediaRules) {
  177. styleSheet.insertRule(mediaRule.cssText)
  178. hasDarkRules = true
  179. }
  180. }
  181. if (hasDarkRules) {
  182. loadThemeForm('#theme-selector')
  183. }
  184. })
  185. </script>
  186. </body>
  187. </html>