Dinge, an die sich nur Webentwickler der 90er erinnern (2014)

 (zachholman.com)
1 Punkte von GN⁺ 2024-01-26 | 1 Kommentare | Auf WhatsApp teilen
  • Das persönliche Web der 1990er war eine Zeit, in der es an standardisierten Layout-Werkzeugen mangelte und man mit Techniken wie , , 1x1.gif,   und DHTML Layout und Effekte mühsam erzwang
  • Bevor sich CSS-Layouts durchsetzten, wurden 1x1.gif und wiederholte   wie zentrale Layout-Werkzeuge genutzt, um Elemente zu verschieben; der Text karikiert das mit überzeichneter Nostalgie
  • Frühes CSS konzentrierte sich auf kleine visuelle Effekte wie das Entfernen von Link-Unterstreichungen und Änderungen am a:hover-Stil; dadurch verschwamm die Unterscheidung zwischen Links und normalem Text
  • DHTML stand in engem Zusammenhang mit einer Copy-and-paste-Kultur, in der CSS und JavaScript gemischt wurden, um Effekte wie Lade-alert(), Schneeflocken, Akkordeon-Menüs und benutzerdefinierte `` zu erzeugen
  • Pixel-Fonts, 88x31-Buttons, Internet Explorer 4.0, GeoCities und FrontPage ’98 erscheinen als Beispiele dafür, wie persönliche Websites damals technische Entscheidungen und Identität zur Schau stellten

Als und Animation waren

  • Die Kombination, in zu stecken, wurde im Web der 1990er scherzhaft wie großartige Computeranimation behandelt
  • Darunter liegt ein überzeichnetes Selbstbewusstsein nach dem Motto, Webentwickler der 1990er hätten wichtigere Geschichten zu erzählen als heutige jQuery- oder NoSQL-Datenbanken

Layouts, die mit 1x1.gif die Seite verschoben

  • 1x1.gif, spacer.gif und transparent.gif bezeichnen alle ein transparentes GIF mit 1 Pixel × 1 Pixel
  • Indem man die HTML-Bildattribute WIDTH und HEIGHT groß angab, konnte man unsichtbaren Raum erzeugen und Seitenelemente an die gewünschte Position schieben
  • Der Beispielcode verwendet , , , , ``, und ein Web-Counter-CGI zusammen, um Struktur und Dekoration in einem zu erledigen
  • Die Satire geht so weit, dass 1x1.gif es ermöglicht habe, Elemente überall auf der Seite zu platzieren, und bis heute die einzige Methode für vertikale Zentrierung sei

Manuelle Abstände mit  

  • Wenn es schwierig war, Image-Tags zu verwenden, gab es auch die Methode,   zu wiederholen, um Abstände auszurichten
  • Ein Beispiel platziert den Gästebuch-Text, indem mehrere   zwischen PLEASE SIGN und MY GUESTBOOK BELOW: eingefügt werden
  • Daraus wird der Witz, man hätte genug Geld für die monatlichen AOL-Überziehungsgebühren gehabt, wenn man für jedes in den 1990ern verwendete   einen Nickel bekommen hätte

Frühes CSS entfernte zuerst Link-Unterstreichungen

  • CSS wird als Technologie vorgestellt, die gegen Ende des goldenen Zeitalters von HTML auftauchte und die Trennung von Inhalt und Stil versprach
  • Das Erste, was man damals mit CSS machte, war das Entfernen der Unterstreichung von Links
  • Links sahen wie Text aus und Text wie Links, sodass schwer zu erkennen war, wohin man klicken sollte
  • Auch ein Effekt, bei dem hinter dem Mauszeiger eine Feuerspur zurückbleibt, wird erwähnt
  • Ein Beispiel für eine index.shtml-Datei aus dem Jahr 2000 enthält als Inline-CSS nur a:hover {text-decoration: none; color: #000000}
    • Der Code entfernt beim Hover die Unterstreichung und ändert die Farbe zu Schwarz
    • Auch der Umstand, dass es eine index.shtml-Datei mit SSI ist, wird scherzhaft betont

DHTML und die Kultur des Code-Kopierens

  • Nach dem Entfernen von Link-Unterstreichungen per CSS folgte der Schritt, beim Laden der Seite per JavaScript ein alert("Welcome to my website!") anzuzeigen
  • Die Verbindung von CSS und JavaScript wird als „furchterregende Technologie“ namens DHTML karikiert
  • Zu DHTML-Effekten gehörten Schneeflocken, die über die Seite fielen, animierte Image-Map-Akkordeon-Menüs und benutzerdefinierte mit
  • Dank Websites wie Dynamic Drive wird es so dargestellt, als müsse man Probleme nicht selbst lösen, sondern nur einen 50-Zeilen-Codeblock kopieren und einfügen
  • DHTML wird mit dem damaligen Twitter Bootstrap verglichen

Pixel-Fonts und die Ästhetik niedriger Auflösungen

  • Computerbildschirme waren damals CRTs und physisch groß, hatten aber keine hohe Auflösung
  • Um die begrenzten Pixel effizient zu nutzen, gab es eine Tendenz zu kleinen Schriften auf etwa 6-Punkt-Niveau
  • Webentwickler, die einfache pixelbasierte Schriften sahen, wollten Illustratoren werden; es gab auch Versuche, isometrische Pixelillustrationen in Splash-Screens einzubauen
  • Dazu kommt der Witz, dass man diese Zeit und dieses Geld vielleicht besser in Dotcom-IPOs investiert hätte als in die Installation von Photoshop

Internet Explorer 4.0 und 88x31-Buttons

  • Es wird satirisch behauptet, der Grund, warum Menschen Internet Explorer heute nicht mögen, sei, dass er sich von der „reinen Form“ des Internet Explorer 4.0 entfernt habe
  • Internet Explorer 4.0 wird übertrieben als perfekter Browser mit Active Desktop und Channels dargestellt
  • Auf damaligen Websites klebten viele 88x31-Pixel-Buttons, die Besucher darüber informierten, welchen Browser sie verwenden sollten und welche Tools und Dienste die Website nutzte
  • Die Buttons werden mit Orden auf einer Uniform verglichen, die Entscheidungen und Zugehörigkeiten der Seitenbetreiber zeigten
    • Als Editor-Beispiel wird FrontPage ’98 genannt
    • Als Webserver-Beispiel wird GeoCities genannt
    • Zum Webring kommt der Witz hinzu, man habe denjenigen gewollt, der die eigene Seite ganz nach oben bringt, den es aber in Wirklichkeit nicht gab

Witze über das heutige Web

  • Das heutige Web wird als Zustand beschrieben, in dem mehrere Abstraktionsschichten auf JavaScript gestapelt sind
  • Zusammen mit dem Witz, dass JavaScript nicht einmal richtig rechnen könne, endet der Text mit dem Staunen darüber, dass wir beim heutigen Web angekommen sind
  • Zum Schluss steht der Vorschlag, das Team spielerisch zu quälen, indem man dem nächsten Pull Request viele   hinzufügt

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-01-26
Meinungen auf Hacker News

  • Die Sache mit serverseitigen Image Maps fühlt sich wirklich nicht wie etwas Fremdes an.
    Ich bin eher ein Systemadministrator, der gelegentlich webbasierte Tools baut, als ein Webprogrammierer, daher sind meine Webkenntnisse irgendwo Anfang der 2000er stehen geblieben, und JavaScript löst bei mir eine seltsame Abwehrhaltung aus. In einem aktuellen Tool brauchte ich eine grundlegende Funktion, um Punkte auf einem Bild zu handhaben; etwas, das mit 5 Zeilen JavaScript erledigt gewesen wäre, habe ich 2023 mit einer serverseitigen Image Map gelöst.
    Am Ende hatte ich statt 5 Zeilen JavaScript 50 Zeilen Python für die Zustandsverwaltung und einen Sonderfall im Request-Handler für eine merkwürdige Fragment-Syntax. Ein bisschen peinlich, aber dass ich es zum Laufen gebracht habe, macht mich auf seltsame Weise trotzdem stolz.

    • Das Schlimmste an serverseitigen Image Maps ist, dass sie Archivierung komplett kaputtmachen.
      Wenn man in der Wayback Machine von archive.org eine alte Site findet und die komplette Startseite eine serverseitige Image Map ist, steckt man ohne den ursprünglichen Server komplett in einer Sackgasse, weil es keine Möglichkeit gibt, die Ziel-URLs des restlichen Angebots herauszufinden.
    • 2015 habe ich einmal die Unterstützung für serverseitige Image Maps in Chromium repariert.
      Damals war sie fast kaputt: Wenn der Zoom nicht bei 100 % lag oder das Padding nicht 0 war, stimmten die Koordinaten nicht, und es gab mehrere ähnliche Probleme. Dass es niemandem aufgefallen war, lag daran, dass Image Maps selbst kaum noch benutzt wurden, serverseitige Image Maps erst recht nicht.
      Auch ich wollte mir ohne JavaScript einen einfachen Ausweg schaffen und erinnerte mich an 90er-Jahre-HTML. Am Ende reparierte ich aber den Chromium-Bug, kam zu dem Schluss, dass serverseitige Image Maps nicht besonders gut sind, verwendete JavaScript, und die JavaScript-Version war besser.
    • Ich kann das Gefühl „In dieses ganze höllische Ding kommen mir nicht einmal genau 5 Zeilen JavaScript in mein Programm“ vollkommen nachvollziehen.
      HTMX wirkt wirklich wie eine Erlösung, und wenn man Tailwind UI kauft, kann jeder im Frontend ziemlich gefährlich werden. Trotzdem würde mich auch interessieren, aus welchen anderen Perspektiven JavaScript unangenehm wirkt. Für mich persönlich ist die mangelnde Konsistenz der Syntax ein großer Punkt, und bei TypeScript wird mir schon beim Anblick des node_modules-Ordners flau.
      Insgesamt hat mich das Gefühl, nicht kontrollieren zu können, was eigentlich passiert, lange vom Frontend ferngehalten.
    • Ende 2019 musste ich von zu Hause aus die GUI eines Geräts in der Firma bedienen. Es gab keinen Remote Desktop, nur ein Screenshot-Tool und ein Kommandozeilen-Tool, das Klicks injizieren konnte.
      Mit ein paar Dutzend Zeilen Lisp baute ich einen Webserver, der eine Image Map des Bildschirms bereitstellte, und bei Image-Map-Requests einen Klick einfügte. Es war ein kleines Wegwerf-Tool, um mir die Fahrt zur Arbeit und zurück zu sparen; dann kam COVID, viel zu viele Leute nutzten es, und vielleicht benutzt es heute noch jemand.

  • „Immer noch die einzige Möglichkeit, ein Element vertikal zu zentrieren“ stimmt heute nicht mehr, aber die Produktivitätskosten dafür, dass man in den letzten 30 Jahren in einem div nicht einfach vertical-align: middle; verwenden konnte, dürften in die Milliarden Dollar gegangen sein.
    Ich erinnere mich auch noch an den Trend aus der IE4- oder IE6-Zeit, Links bei :hover einen overline-Stil zu geben. Man baute auch runde divs und Buttons mit Tabellen, und selbst in den 2000ern ging der Schmerz weiter, Dinge in Photoshop zu slicen und in Tabellenzellen zu stecken.

    • Schon damals gab es in Tabellenzellen VALIGN=MIDDLE.
      Ob das schon in den 90ern möglich war, weiß ich nicht, aber in den 2000ern existierte es definitiv.
    • Heutzutage lasse ich ChatGPT solches CSS schreiben, und witzigerweise scheint es mindestens ein Dutzend Lösungen auszuspucken.
      Allerdings mischt es oft redundante Regeln hinein, etwa fünf oder mehr Regeln, obwohl zwei oder drei reichen würden. Wirklich lächerlich dumm.
    • Die Zeit, in der man runde Ecken mit Tabellen baute, war wirklich eine Mode.
      Unglaublich, wie viel Zeit wegen dieser verdammten Ecken draufging.
    • Vertikale Ausrichtung ist auch heute noch ein großes Ärgernis und erfordert viel feines Verständnis.
      Selbst bei Tailwind CSS ist es nicht simpel; man muss ständig prüfen, ob ein Element ein Block ist, Text ist, welches Layout der Parent hat usw.
    • Einer meiner liebsten CSS-Hacks ist div { display: table-cell; vertical-align: middle; }.
      Er funktioniert nicht in jeder Situation, aber auch wenn er sich anfangs schmutzig anfühlt, bleibt die Trennung der Zuständigkeiten weiterhin erhalten, und wirkliche andere Nachteile sehe ich nicht.

  • DHTML bedeutete in diesem Kontext nicht Distributed HTML, sondern Dynamic HTML, und deshalb heißt auch das Dynamic in Dynamic Drive so.

    • „DHTML ist natürlich distributed HTML“ war ein Witz, der offenbar falsch zitiert wurde.
      Wenn man sieht, dass andere Leute ihn genauso falsch zitieren, wirkt es auch möglich, dass der Autor ihn kürzlich spielerisch geändert hat.
    • Trotzdem bleibt die Beschreibung „Technology of Terror“ unwidersprochen gültig.
    • Ich fragte mich, ob damit auf die weiter unten stehende Passage „man konnte es einfach kopieren und einfügen“ angespielt werden sollte; vielleicht war es auch eine Anspielung auf DCOM.
    • Wurde im Thread weiter unten diskutiert: https://news.ycombinator.com/item?id=39127528
      Das Fazit war wohl, dass es zwar ein Witz ist, aber kein guter.
    • Hier scheint man wirklich die Spaßverbot-Fraktion gefunden zu haben.

  • Frames darf man ebenfalls nicht vergessen. Sie waren die ursprüngliche „Lösung“ für das Problem, die Navigationsleiste auf jeder einzelnen Seite ändern zu müssen.
    Das Problem war, dass Suchmaschinen jede Frame-Seite einzeln indexieren konnten, sodass man behandeln musste, was passiert, wenn jemand direkt auf eine Frame-Seite gelangte. Auch die Trennlinien zwischen den Bereichen waren immer deutlich sichtbar, was sperrig und unpraktisch wirkte.

    • Die echten Könner nutzten Server Side Includes.
      Man setzte spezielle Kommentare ins HTML, und Apache ersetzte sie vor dem Senden an den Client durch den Inhalt anderer Dateien.
    • Wenn eine andere Website meine Seite in einen Frame steckte, verteilte man ein frame-buster-Skript; wenn eine Seite ohne meinen Frame verwaiste, rief man ein frame-joiner-Skript herbei.
    • Frames werden auch heute noch überraschend gut als zugrunde liegende Micro-Frontend-Technologie genutzt.
      Die Theorie steht unter https://martinfowler.com/articles/micro-frontends.html#Run-t..., eine Implementierung sieht man unter https://luigi-project.io.
    • Ein lächerlich großer Anteil der „AJAX“-artigen Nutzung von JavaScript hätte sich auch mit Frames erledigen lassen, und wenn Frames nicht stehen geblieben wären und sich nur ein wenig weiterentwickelt hätten, wäre die Performance womöglich sogar besser gewesen.
      Wenn dazu noch HTML-Tabellen grundlegende Funktionen bekommen hätten und datenquellenbasierte Tabellen- und Listenansichten Mitte der 2000er verfügbar gewesen wären, hätte man unfassbar viel Zeit und Geld sparen können.
      Und wenn ich erst damit anfange, wie viel Geld man hätte sparen können, wenn das Web einen Zahlungsstandard übernommen hätte und der Browser selbst die Zahlungseingaben verarbeitet hätte, höre ich gar nicht mehr auf.
    • Die Grenzen zwischen Bereichen waren auch nicht in jedem Browser exakt gleich.
      Kinder, es gab einmal eine Zeit, in der nicht alle denselben Browser benutzten.

  • 1996 hatte die Microsoft-Homepage eine Menüleiste, die beim Darüberfahren mit der Maus aufklappte, und ich nahm mir vor herauszufinden, wie das funktionierte.
    Damals hatte IE zwar einen „Quelltext anzeigen“-Button, aber ihm fehlte ein Gefühl für Plattformen: Er öffnete den Quelltext als Notepad-Dokument. Der Server war Unix, also waren die Zeilenumbrüche \n, während Windows \r erwartete, sodass der HTML-Quelltext wie ein einziges langes Dokument in einer Zeile aussah.
    Ich durchforstete den Quelltext, aber die HTML-Tags kannte ich alle, und der Inhalt bestand nur aus dem Text, der auf der Seite zu sehen war. Das Einzige, was mir unbekannt war, waren HTML-Entities, und da ich sie auf jeder Site mit beweglichen Menüs sah, war ich überzeugt, dass sie damit zu tun hatten.
    Sechs Monate lang glaubte ich, DHTML-Effekte würden sich als magische Beschwörungsformeln aus diesen HTML-Entities entpuppen, bis ich später WebMonkey-Tutorials fand – und daraus wurde dann meine ganze Karriere.

    • Quelltext anzeigen war mein Startpunkt.
      Minifier und Compiler sind großartig, aber ich vermisse die Zeit wirklich, in der man den aufgeräumten, gepflegten Quelltext gut gestalteter Websites lesen konnte.
      Ich wünschte, wir wären zu Kompressionsverfahren übergegangen, die auch im Produktionscode die ursprüngliche Quellformatierung bewahren und die Erwartung aufrechterhalten, dass andere Menschen auf der ganzen Welt unseren Code lesen werden. Diese Kultur spielte sicher eine große Rolle dabei, dass sich das frühe Web so schnell entwickelte, und war definitiv ein großer Teil meiner eigenen Einstiegsgeschichte in die Branche.
    • Ich frage mich, was damals tatsächlich diese beweglichen Menüs erzeugt hat. Ich gehöre nicht zu der Generation, die zu jener Zeit schon programmiert hat, also war vermutlich irgendein Tag oder Skript der Auslöser.
    • Ich hatte eine ähnliche Erfahrung, weil ich beim Mouseover ein Bild austauschen wollte.
      Ich kaufte bei Barnes & Noble die JavaScript Bible, las sie übers Wochenende und lernte danach einfach immer weiter.
    • WebMonkey – da kommen die Erinnerungen sofort wieder hoch.

  • Man darf nicht vergessen, dass Tabellen auch für abgerundete Ecken verwendet wurden.
    Man erstellte eine 3×3-Tabelle und legte in die Zellen außer der mittleren Bilder, um ein Website-Element mit abgerundeten Ecken zu bauen; das fühlte sich an wie der Gipfel menschlicher Ausdruckskraft.
    HTML-E-Mails waren ebenfalls in Mode, und weil E-Mail-Clients sich viel langsamer aktualisierten als Browser, wurde diese Technik bis in die 2010er hinein genutzt, wenn man wollte, dass alles richtig angezeigt wird.

    • Ich werde nie vergessen, wie man Bildpakete wie tl.gif, tr.gif, bl.gif für 3×3-Tabellen erstellte.
      Da Browser damals Hintergrundbilder in leeren Zellen nicht renderten, brauchte man auch das im Text erwähnte 1x1.gif, damit die Hintergründe der linken und rechten Zellen sichtbar wurden. Gute Zeiten.
    • Kaum hatten wir border-radius, änderte sich der Designtrend, und niemand wollte mehr abgerundete Ecken.
    • Viele Punkte des Artikels scheinen eher zu den frühen 2000ern als zu den 90ern zu passen.
      Bevor ich mit Tabellen abgerundete Ecken baute, erinnere ich mich daran, an Skins für die Multi-Chat-App Trillian herumgebastelt zu haben. Sie handhabte Yahoo Chat, ICQ und Ähnliches, und wie bei abgerundeten Ecken legte man wiederholte Bilder in die oberen und seitlichen Zellen, damit sich die Fenstergröße gut ändern ließ.
    • https://www.folklore.org/Round_Rects_Are_Everywhere.html
      Die größte Leistung des großen und allmächtigen Oz. Na gut, das iPhone war vielleicht größer.
    • Tabellen wurden auch für Schatten verwendet.

  • Bei Websites der 90er/00er durfte der Button „optimiert für 800×600 Auflösung“ nicht fehlen.
    Wenn man es etwas schicker machen wollte, klebte man noch „Valid HTML 4.01“ dazu.
    Werbung bestand damals nicht aus den komplexen JavaScript-Bündeln und Videoanzeigen von heute, sondern aus einfachen Bannern in Standardgrößen. Ich erinnere mich, wie schockiert ich war, als ich sah, dass Norton Internet Security 2003 stillschweigend das HTML besuchter Seiten umschrieb, nur Banner in Standard-Werbegrößen entfernte und den Rest in Ruhe ließ. Auch eine 20 Jahre alte Bestätigung dafür, dass ein Adblocker eine Sicherheitslösung ist.

  • Dass im ganzen Text das Wort webmaster kein einziges Mal vorkommt, lässt mich fragen, ob Zach wirklich in den 90ern dabei war.

    • Ich habe immer noch meine „Webmaster“-Visitenkarte von Ende der 90er.
      Niemand wird verstehen, wie „cool“ diese Berufsbezeichnung damals war. Wenn ich sie heute sehe, kringele selbst ich mich, aber ich habe daran wirklich viele gute Erinnerungen.
    • Ich habe einmal mit einer Frau gearbeitet, die sich offiziell „webmistress“ nannte.
      Das war kein Witz.

  • Wenn man das Web der 90er selbst erleben möchte, empfiehlt sich The Geocities Gallery https://geocities.restorativland.org/
    In solchen persönlichen Webseiten steckt etwas Schönes. Jede Seite hat ein ganz eigenes Erscheinungsbild und verrät schon dadurch viel über die Persönlichkeit des Autors
    Meist gibt es eine Selbstvorstellung, ein paar zufällige persönliche Fotos, eine Liste empfohlener Links mit kurzen Beschreibungen und lockere Texte über Hobbys; das wirkt sehr persönlich und ruhig. Es steht in starkem Kontrast zu den heutigen sozialen Medien, in denen alle Profilseiten gleich flach und langweilig aussehen und der Druck besteht, endlos Inhalte zu liefern und ein bestimmtes Bild des eigenen Lebens aufrechtzuerhalten

    • Dadurch bin ich in ein Rabbit Hole geraten
      Ich habe eine ganze Weile damit verbracht, meine alte Site zu suchen, von der ich nicht mehr weiß, in welchem Verzeichnis unter Area51 sie lag und die vielleicht gar nicht archiviert wurde, und einfach diese Zeit wieder aufleben zu lassen
      Erinnerung ist seltsam. Beim Blick auf Geocities kam mir sogar der Geruch des alten Internets wieder in den Sinn – vermutlich war es der Geruch des Familienzimmers, in dem der Computer stand
    • Ich erinnere mich, dass ich Mitte der 90er mit einer Kombination aus Windows-Ziegelstein-Hintergrund und transparenten GIF-Graffiti einen ziemlich coolen Effekt erzeugt habe
      Auch die frühen Arbeiten von BBS-Art-Gruppen wie ACID, ICE und FIRE waren damals wirklich beeindruckend
      Vor der Dominanz von IE5/6 wanderte Anspruchsvolleres meist zu Flash ab. Anfang der 2000er habe ich auf Basis von E4X ein React-ähnliches Framework gebaut; ActionScript/Flash/Flex sowie Mozilla/Netscape unterstützten das, und es ähnelte auch der XML-Literal-Notation von VB.Net
      Microsoft und Google übernahmen es nicht, und am Ende wurde JSON König

  • In den 90ern lautete die Antwort auf Fragen zum Weblayout fast immer: Tabellen
    Ist die Textausrichtung verrutscht? Tabelle. Braucht man ein schickes Menü? Tabelle. Baut man eine ganze Website? Verschachtelte Tabellen. Wozu brauchte man CSS, wenn man das Design mit Zeilen und Zellen hacken konnte

    • 2024 gilt das bei E-Mail-Layouts immer noch
    • Und man darf nicht vergessen, dass in jede Zelle ein font-Tag musste
    • Damals war alles TDD. TD-Driven Design
    • Ich mag Tabellen immer noch
      Für dynamisches Design sind sie wirklich hervorragend, mit Unterstützung für Spalten-/Zeilen-Zusammenführung, Ausrichtung und Gewichtung. CSS ist immer noch deutlich komplizierter als die alten Tabellen
    • Inzwischen haben wir eine semantisch korrektere Methode dafür