- Dans les années 1990, le web personnel manquait d’outils de mise en page standardisés : on bricolait la disposition et les effets avec des techniques comme
,,1x1.gif, - Avant que les mises en page CSS ne s’imposent,
1x1.gifet les - Les premiers usages de CSS se concentraient sur de petits effets visuels, comme supprimer le soulignement des liens ou changer le style de
a:hover, au point de brouiller la distinction entre liens et texte normal - DHTML mêlait CSS et JavaScript pour créer des effets comme des
alert()au chargement, des flocons de neige, des menus accordéon ou des `` personnalisés, dans une culture du copier-coller - Polices pixel, boutons 88x31, Internet Explorer 4.0, GeoCities et FrontPage ’98 apparaissent comme autant de façons dont les sites personnels affichaient alors leurs choix techniques et leur identité
Quand et faisaient office d’animation
- La combinaison consistant à mettre
dansétait traitée avec humour comme une incroyable animation informatique sur le web des années 1990 - Le texte repose sur une fierté exagérée selon laquelle les développeurs web des années 1990 avaient des choses plus importantes à raconter que jQuery ou les bases de données non relationnelles d’aujourd’hui
Des mises en page poussées au 1x1.gif
1x1.gif,spacer.gifettransparent.gifdésignent tous un GIF transparent de 1 pixel × 1 pixel- En définissant de grandes valeurs pour les attributs
WIDTHetHEIGHTd’une image HTML, on pouvait créer un espace invisible et pousser les éléments de la page à l’endroit souhaité - L’exemple de code utilise ensemble
,,,, ``, ainsi qu’un CGI de compteur web, pour gérer à la fois la structure et la décoration - La satire se poursuit en affirmant que
1x1.gifpermettait de placer des éléments n’importe où sur la page et reste encore aujourd’hui la seule façon de centrer verticalement
L’espacement manuel au
- Quand il était difficile d’utiliser une balise image, on pouvait aussi répéter
- Un exemple montre plusieurs
PLEASE SIGNetMY GUESTBOOK BELOW:pour positionner le texte du livre d’or - La blague se poursuit : si l’on avait reçu un nickel pour chaque
Les débuts de CSS ont commencé par supprimer le soulignement des liens
- CSS est présenté comme une technologie apparue à la fin de l’âge d’or du HTML, avec la promesse de séparer contenu et style
- La première chose que l’on faisait alors avec CSS était de supprimer le soulignement des liens
- Les liens ressemblaient à du texte, le texte ressemblait à des liens, et il devenait difficile de savoir où cliquer
- L’effet de traînée de flammes derrière le curseur de la souris est également mentionné
- Un exemple de fichier
index.shtmlde 2000 ne contient, en CSS inline, quea:hover {text-decoration: none; color: #000000}- Ce code supprime le soulignement au survol et change la couleur en noir
- Le fait qu’il s’agisse d’un fichier
index.shtmlutilisant SSI est aussi souligné sur le ton de la plaisanterie
DHTML et la culture du copier-coller de code
- Après avoir supprimé le soulignement des liens avec CSS, la suite consistait à afficher un
alert("Welcome to my website!")au chargement de la page avec JavaScript - L’association de CSS et JavaScript est tournée en dérision comme une « technologie de la terreur » appelée DHTML
- Parmi les effets DHTML figuraient des flocons tombant sur la page, des images maps animées en menus accordéon et des
personnalisés utilisant - Grâce à des sites comme Dynamic Drive, tout semblait pouvoir se résoudre en copiant-collant un bloc de 50 lignes de code plutôt qu’en réglant soi-même le problème
- DHTML est comparé au Twitter Bootstrap de l’époque
Polices pixel et esthétique de la basse résolution
- Les écrans d’ordinateur de l’époque étaient des CRT, physiquement grands mais à faible résolution
- Pour utiliser efficacement les pixels disponibles, il existait une tendance aux petites polices d’environ 6 points
- En voyant de simples fontes basées sur des pixels, des développeurs web se mettaient à vouloir devenir illustrateurs, et certains tentaient d’ajouter des illustrations pixel art isométriques aux écrans de démarrage
- Une autre blague suggère qu’il aurait peut-être mieux valu consacrer ce temps et cet argent à investir dans des introductions en Bourse dot-com plutôt qu’à installer Photoshop
Internet Explorer 4.0 et les boutons 88x31
- Le texte ironise en disant que si les gens détestent Internet Explorer aujourd’hui, c’est parce qu’il s’est éloigné de la « forme pure » d’Internet Explorer 4.0
- Internet Explorer 4.0 est exagérément présenté comme un navigateur parfait, avec Active Desktop et Channels
- À l’époque, de nombreux sites affichaient des boutons de 88x31 pixels indiquant quel navigateur les visiteurs devaient utiliser, ainsi que les outils et services employés par le site
- Ces boutons sont comparés aux décorations d’un uniforme militaire, montrant les choix et les appartenances de l’administrateur du site
- Exemple d’éditeur : FrontPage ’98
- Exemple de serveur web : GeoCities
- Une blague ajoute que l’on voulait un web ring qui propulse le site tout en haut, mais qu’en réalité cela n’existait pas
Une plaisanterie sur le web d’aujourd’hui
- Le web actuel est décrit comme un empilement de multiples abstractions au-dessus de JavaScript
- Le texte se conclut en s’étonnant que l’on en soit arrivé au web d’aujourd’hui, tout en plaisantant sur le fait que JavaScript ne sait même pas faire correctement des calculs mathématiques
- Il se termine en suggérant d’ajouter beaucoup de
1 commentaires
Avis sur Hacker News
L’histoire des images maps côté serveur me parle vraiment
Je suis plutôt admin système qui fabrique de temps en temps des outils web qu’un vrai programmeur web, donc mes compétences web sont restées bloquées au début des années 2000, et j’ai aussi une sorte d’aversion bizarre pour JavaScript. Dans un outil récent, j’avais besoin d’un comportement de base pour gérer des points sur une image ; cinq lignes de JavaScript auraient suffi, mais en 2023 je l’ai fait avec une image map côté serveur
Au final, au lieu de 5 lignes de JavaScript, je me suis retrouvé avec 50 lignes de Python pour gérer l’état et un cas spécial dans le gestionnaire de requêtes pour traiter une étrange syntaxe de fragments. C’est un peu gênant, mais j’éprouve quand même une fierté bizarre à l’avoir fait fonctionner
Si vous trouvez un vieux site dans la Wayback Machine d’archive.org et que toute sa page d’accueil est une image map côté serveur, sans le serveur d’origine il n’y a aucun moyen de connaître les URL de destination du reste du site : c’est une impasse totale
À l’époque, c’était quasiment cassé : si le zoom n’était pas à 100 % ou si le padding n’était pas à 0, les coordonnées étaient fausses, et il y avait plusieurs problèmes similaires. Personne ne s’en était rendu compte parce que les images maps elles-mêmes étaient déjà très peu utilisées, et les images maps côté serveur encore moins
Moi aussi, je voulais m’en sortir facilement sans JavaScript et je me suis souvenu du HTML des années 90, mais après avoir corrigé le bug de Chromium, j’ai fini par conclure que les images maps côté serveur n’étaient pas terribles ; j’ai utilisé JavaScript, et la version JavaScript était meilleure
HTMX ressemble vraiment à une délivrance, et en achetant Tailwind UI, n’importe qui peut devenir quelqu’un d’assez dangereux côté frontend. Cela dit, je suis curieux de connaître d’autres points de vue sur ce qui rend JavaScript si désagréable. Personnellement, le manque de cohérence de la syntaxe y est pour beaucoup, et côté TypeScript, rien que le dossier
node_modulesme donne la nauséeGlobalement, cette impression de ne pas pouvoir contrôler ce qui se passe m’a tenu longtemps éloigné du frontend
J’ai écrit quelques dizaines de lignes de Lisp pour créer un serveur web qui servait une image map de l’écran, et quand une requête d’image map arrivait, il injectait le clic. C’était un petit outil jetable pour m’éviter un aller-retour au bureau, puis le COVID est arrivé et beaucoup trop de gens se sont mis à l’utiliser ; je ne sais même pas si quelqu’un l’utilise encore aujourd’hui
“C’est encore aujourd’hui le seul moyen de centrer verticalement un élément” n’est plus vrai, mais le coût en productivité de ne pas avoir pu simplement utiliser
vertical-align: middle;dans undivpendant ces 30 dernières années doit se chiffrer en milliards de dollarsJe me souviens aussi de la mode, à l’époque d’IE4 ou IE6, qui consistait à mettre un style overline sur
:hoverpour les liens. On fabriquait aussi desdivet des boutons aux coins arrondis avec des tableaux, et même dans les années 2000, la souffrance consistant à découper dans Photoshop puis à placer les morceaux dans des cellules de tableau continuaitVALIGN=MIDDLEJe ne sais pas si c’était déjà possible dans les années 90, mais dans les années 2000, ça existait clairement
Cela dit, il mélange souvent des règles redondantes, du genre en ajouter cinq ou plus alors que deux ou trois suffiraient. C’est vraiment bête à un point presque comique
Je ne sais pas combien de temps on a perdu à cause de ces fichus coins
Même avec Tailwind CSS, ce n’est pas simple : il faut sans cesse vérifier si l’élément est un bloc, du texte, quel est le layout parent, etc.
div { display: table-cell; vertical-align: middle; }Ça ne marche pas dans toutes les situations, mais même si ça paraît sale au début, la séparation des préoccupations reste préservée et je ne vois pas vraiment d’autre inconvénient
Dans ce contexte, DHTML signifiait Dynamic HTML, pas Distributed HTML, et c’est aussi pour ça que le “Dynamic” de Dynamic Drive s’appelait ainsi
Comme d’autres personnes l’ont mal citée de la même façon, il est aussi possible que l’auteur l’ait récemment modifiée sur le ton de la plaisanterie
La conclusion était que c’était bien une blague, mais pas une très bonne
Impossible de faire l’impasse sur les frames. C’était la “solution” d’origine au problème consistant à devoir modifier la barre de navigation sur toutes les pages
Le problème, c’est que les moteurs de recherche pouvaient indexer séparément chaque page de frame, et qu’il fallait donc gérer le cas où quelqu’un arrivait directement sur une page de frame. Les lignes de séparation entre les sections étaient aussi toujours très visibles, ce qui rendait le tout maladroit et peu pratique
On mettait un commentaire spécial dans le HTML, et Apache le remplaçait par le contenu d’un autre fichier avant de l’envoyer au client
frame-buster, et si une page se retrouvait orpheline sans ma frame, on invoquait un scriptframe-joinerLa théorie est ici : https://martinfowler.com/articles/micro-frontends.html#Run-t..., et on peut voir une implémentation sur https://luigi-project.io
Si, en plus, les tableaux HTML avaient eu des fonctionnalités de base, et si des tableaux et vues en liste alimentés par des sources de données avaient été disponibles au milieu des années 2000, on aurait économisé un temps et un argent considérables
Et ne me lancez même pas sur tout l’argent qu’on aurait économisé si le web avait adopté un standard de paiement et si le navigateur lui-même avait géré la saisie des informations de paiement
Les jeunes, il fut un temps où tout le monde n’utilisait pas le même navigateur
En 1996, la page d’accueil de Microsoft avait une barre de menus qui se déployait au survol de la souris, et je m’étais mis en tête de comprendre comment ça marchait
À l’époque, IE avait un bouton “Afficher la source”, mais, faute de sens de la plateforme, il ouvrait le document dans Notepad ; comme le serveur était sous Unix, les retours à la ligne étaient en
\n, alors que Windows attendait\r, si bien que le source HTML apparaissait comme un très long document sur une seule ligneJ’ai épluché le source : les balises HTML, je les connaissais toutes, et le contenu n’était rien d’autre que le texte visible sur la page. La seule chose inconnue, c’étaient les entités HTML, et comme j’en voyais sur tous les sites avec des menus animés, j’étais persuadé que c’était lié
Pendant six mois, j’ai cru que les effets DHTML étaient en réalité implémentés par des formules magiques faites de entités HTML, puis j’ai fini par trouver des tutoriels WebMonkey, ce qui m’a entraîné dans toute une carrière
Les minificateurs et les compilateurs sont formidables, mais l’époque où l’on pouvait lire le source bien rangé et maintenu d’un site bien conçu me manque vraiment
J’aurais aimé qu’on s’oriente vers des méthodes de compression qui préservent, même en production, la forme d’origine du code source, et qui conservent l’idée que d’autres personnes, partout dans le monde, liront notre code. Cette culture a joué un grand rôle dans l’évolution rapide du web à ses débuts, et elle a clairement beaucoup compté dans mon entrée dans le secteur
J’ai acheté JavaScript Bible chez Barnes & Noble, je l’ai lu pendant le week-end, et je n’ai jamais cessé d’apprendre depuis
Il ne faut pas oublier que les tableaux servaient aussi aux coins arrondis
On créait un tableau 3×3, on mettait des images dans toutes les cellules sauf celle du centre pour fabriquer un élément de site web aux coins arrondis, et ça donnait l’impression d’avoir atteint le sommet de l’expression humaine
Les e-mails HTML étaient aussi à la mode, et comme les clients mail se mettaient à jour bien plus lentement que les navigateurs, cette technique a continué à être utilisée jusque dans les années 2010 si l’on voulait un affichage correct
tl.gif,tr.gif,bl.gifpour les tableaux 3×3À l’époque, les navigateurs ne rendaient pas l’image de fond des cellules vides, donc il fallait aussi le fameux
1x1.gifmentionné dans l’article pour faire apparaître le fond des cellules de gauche et de droite. C’était le bon tempsborder-radius, la mode en design a changé et plus personne n’a voulu de coins arrondisAvant de faire des coins arrondis avec des tableaux, je me souviens avoir bricolé des skins pour une appli de messagerie multi-protocoles appelée Trillian. Elle gérait Yahoo Chat, ICQ, etc., et on mettait des images répétées dans les cellules du haut et des côtés, un peu comme pour les coins arrondis, afin que le redimensionnement de la fenêtre fonctionne bien
Le plus grand accomplissement du grand et tout-puissant Oz. Bon, l’iPhone a peut-être été plus important
Sur les sites web des années 90/2000, impossible de ne pas avoir un bouton “optimisé pour une résolution de 800×600”
Si l’on voulait faire un peu plus chic, on ajoutait aussi “Valid HTML 4.01”
À l’époque, les publicités n’étaient pas les amas complexes de JavaScript et les pubs vidéo d’aujourd’hui, mais de simples bannières aux dimensions standard. Je me souviens avoir été sidéré en voyant Norton Internet Security 2003 réécrire discrètement le HTML des pages visitées pour supprimer uniquement les bannières aux tailles publicitaires standard, en laissant le reste intact. C’était aussi une confirmation, vieille de 20 ans, qu’un bloqueur de pubs est une solution de sécurité
Que le mot webmaster n’apparaisse pas une seule fois dans tout l’article me fait me demander si Zach était vraiment là dans les années 90
Personne ne peut comprendre à quel point ce titre paraissait “cool” à l’époque. Aujourd’hui, même moi je trouve ça gênant, mais j’en garde vraiment beaucoup de bons souvenirs
Ce n’était pas une blague
Si vous voulez faire vous-même l’expérience du Web des années 90, je recommande The Geocities Gallery https://geocities.restorativland.org/
Il y a quelque chose de beau dans ces pages Web personnelles. Chaque page a une apparence bien à elle et, rien qu’avec ça, elle en dit long sur la personnalité de son auteur
En général, on y trouve une présentation de soi, quelques photos personnelles au hasard, une liste de liens recommandés avec de courtes descriptions, des textes assez libres sur des centres d’intérêt, etc. C’est très personnel et paisible. Le contraste est net avec les réseaux sociaux d’aujourd’hui, où toutes les pages de profil se ressemblent, plates et ennuyeuses, avec une pression pour entretenir un flux de contenu sans fin et une certaine image de sa vie
J’ai passé un long moment à chercher mon ancien site, dont je ne me souviens plus dans quel répertoire sous Area51 il se trouvait — et qui n’a peut-être même pas été archivé —, et aussi simplement à revivre cette époque
La mémoire est étrange. En voyant Geocities, je me suis même rappelé l’odeur de l’ancien Internet ; c’était sans doute celle de la pièce familiale où se trouvait l’ordinateur
Les premiers travaux de groupes d’art BBS comme ACID, ICE ou FIRE étaient vraiment impressionnants à l’époque
Avant la domination d’IE5/6, ce qui était plus sophistiqué a généralement basculé vers Flash. Au début des années 2000, j’ai créé un framework proche de React basé sur E4X ; ActionScript/Flash/Flex et Mozilla/Netscape le prenaient en charge, et cela ressemblait aussi à la notation des littéraux XML de VB.Net
Microsoft et Google ne l’ont pas adopté, et JSON a fini par régner en maître
Dans les années 90, la réponse aux questions de mise en page Web était presque toujours les tableaux
L’alignement du texte déraillait ? Tableau. Besoin d’un menu sympa ? Tableau. Construire tout un site ? Tableaux imbriqués. Pourquoi aurait-on eu besoin de CSS alors qu’on pouvait hacker le design avec des lignes et des cellules ?
fontdans chaque celluleIls sont vraiment excellents pour le design dynamique, avec prise en charge de la fusion de colonnes/lignes, de l’alignement et des pondérations. CSS reste bien plus complexe que les anciens tableaux