Eine Versions-Geschichte

Als ich zum Jahreswechsel meine Websites umgebaut habe, hatte ich mir auch eine neue Visitenkarten-Website überlegt: „Hey, ich bin … – schön, dass du hier bist!“ und meine E-Mail-Adresse. Mittig platziert, ansprechende Farben, hübsche Typo, there you go.

Natürlich war das zu einfach. Also baute ich eine Website, in der die beiden Sätze „Hey, ich bin …“ und „Schön, dass du hier bist.“ alle paar Sekunden zufällig rotierten mit „Hi, I'm …“ und „嘿，我是⋯⋯。“ sowie „Nice to have you here.“ und „很高兴你来这里。“

Und dann programmierte ich vorsichtshalber eine Verschleierung der E-Mail-Adresse, damit es gar nicht erst zu Spam kommt.

Und dann empfand ich es als cool, wenn die beiden Sätze nicht nur durch Sprachen zufällig rotieren, sondern auch verschiedene Schriftarten hätten. Also programmierte ich, dass sich entweder einer der beiden Sätze oder die Schriftart zu einer von drei ausgewählten änderten.

Und dann war es aus Gründen wichtig, welche Websites gerade wie besucht werden, also implementierte ich Analytics.

Und dann nervte mich einer der Schriftarten, die wie „hello“ von Apple aussah, also habe ich den halben Tag damit verbracht, mir neue Font-Pairings zu überlegen.

Und dann fiel mir auf, dass ich beliebige Unterseiten, die gar nicht existieren, ohne Fehlermeldung aufgerufen werden konnten, also stellte ich sicher, dass alle Anfragen auf die Hauptseite umgelenkt wurden.

Und dann stellte ich fest, dass mit den neuen Fonts die Farben nicht mehr so recht passten. Also passte ich die Farben an.

Und dann bemerkte ich, dass die Google Search Console es gar nicht mag, wenn es keine robots.txt gibt, also fügte ich die hinzu.

Und dann kam der gute Hinweis eines Freundes, dass ich vielleicht doch nicht nur meine E-Mail-Adresse angeben sollte, sondern auch wenigstens ein paar private Projekte verlinken sollte. Also fügte ich eine Liste hinzu.

Und dann bemerkte ich bei der Zunahme an Text, dass es besser wäre, wenn sich der Text nicht sprunghaft an Bildschirmgrößen, sondern dynamisch anpasst, wie, wenn man das Browser-Fenster verändert, also setzte ich das um.

Und dann analysierte ich, dass die zufällige Auswahl von Fonts dazu führte, dass sie – was natürlich richtig ist – erst geladen würden, wenn sie angezeigt werden. Da ich aber wusste, dass sie angezeigt werden, stellte ich sicher, dass sie vorab geladen würden.

Und dann fand ich, dass die ganzen verschiedenen Farben nicht mehr so recht zu den neuen Fonts passten, also entwarf ich ein monochromatisches Farbschema.

Und dann bemerkte ich, dass die unzähligen Tests dafür sorgten, dass mein Browser nicht mehr so recht wusste, welche Farben und technischen Funktionen und so nun aktuell sind. Also erstellte ich einen Automatisierungsprozess, der die Javascript- und CSS-Dateien mit einem Hash-Wert versah, damit immer die aktuelle Version geladen würde, und diese Dateien auch automatisch referenziert würden.

Und dann nervte mich die „knappe“ Darstellung von nur zwei Sätzen gegenüber den gelisteten Projekten, also entschied ich mich dafür, die Sätze jeweils in drei Sprachen vollständig auszuschreiben, statt sie nur zufällig zu wechseln, und um eine dritte Zeile mit „Aktuelle Projekte: Current projects: 目前的项目：“ zu ergänzen.

Und dann wies mich ein Freund darauf hin, dass das bei ihm im Browser zu Unstimmigkeiten in der Zeilenhöhe führte, wenn sich die Fonts ändern würden. Also entfernte ich, dass sich die Fonts ändern, sondern ließ stattdessen zufällig auswählen, dass jeweils immer eine Sprache in ihrem Satz volle Deckkraft hatte, während die jeweils anderen beiden eine „ausgeblendet“-Deckkraft bekamen.

Und dann bemerkte ich, dass ich den Zufallsgenerator überarbeiten musste, denn so konnte es vorkommen, dass eine Phrase, die bereits volle Deckkraft hat, erneut zur Darstellung mit voller Deckkraft ausgewählt würde. Also stellte ich sicher, dass die Auswahl nur noch in dem Sinne zufällig war, eine andere zufällige Phrase zu nehmen, damit sich immer alle paar Sekunden tatsächlich etwas ändert.

Und dann hielt ich es für lustig, wenn ich die Maus über eine beliebige Sprache bewegen könnte, und alle Phrasen mit dieser Sprache ein- und alle anderen ausgeblendet würden, also programmierte ich das. Weil das zu einfach wäre, stellte ein Hinausbewegen der Maus den ursprünglichen Zustand wieder her.

Und dann sah es für mich komisch aus, dass da eine E-Mail-Adresse zwischen den Projektnamen stand, also änderte ich den Text in „Unbüro“ und richtete es so ein, dass beim Klicken automatisch eine E-Mail vorausgefüllt wird.

Und dann wollte ich wissen, wie zusätzliche Sprachen noch aussehen würden, also fügte ich zum Beispiel Baskisch hinzu und entfernte das dann doch wieder.

Und dann wurde die Projektliste zu lang, also änderte ich die vertikale Listendarstellung in eine horizontale Auflistung.

Und dann überlegte ich mir, dass es vielleicht besser sei, die Unterverzeichnisse nicht auf die Startseite umzulenken, sondern auf ben.wf, also programmierte ich das.

Und dann grübelte ich ein wenig über konstruierte Zufälle und stellte sicher, dass beim Laden der Website aus jeder der drei Zeilen die erste Phrase ausgewählt ist, damit sie visuell harmonisch geladen wird, und erst dann der „Zufalls“-Generator seinen Dienst aufnimmt.

Und dann änderte ich das Farbschema noch einmal.

Und dann sah ich, dass die Google Search Console auch gerne eine Sitemap hätte – selbst nur für eine einzige Seite. Also fügte ich sie hinzu.

Und dann … war ich fertig.

---

Ein paar Tage später kam es mir dann ganz gelegen, dass ich die Website im Hintergrund so aufgebohrt hatte – für ein paar Projekte könnte ich ein paar so einfache Websites gebrauchen. Also nahm ich mir diese Visitenkarte als Grundlage, und dachte mir, prima, damit kann ich arbeiten.

Und dann bemerkte ich, dass es Recht sei dank gar nicht wirklich möglich ist, auf Unterseiten zu verzichten, wie für ein Impressum und zu Datenschutzhinweisen. Also änderte ich meinen Hashing-Algorithmus dahingehend, auch diese Seiten automatisiert zu bearbeiten.

U nd dann stellte ich fest, dass, wenn ich nur mehr als einen Absatz habe, die Gestaltung etwas komplizierter wird, also integrierte ich tailwindcss.

Un d d ann zeigte sich im Ablauf, dass es nicht mehr „sicher“ wäre, dass Ein- und Ausgabeverzeichnis der Dateien dasselbe sind, also änderte ich die Struktur zu einem Verzeichnis, in dem ich meine einzelnen Seiten erstelle, und von dort meine Automatisierungen ein „Paket“ in einem Ausgabeverzeichnis erstellen.

U nd d a nn optimierte ich dahingehend, dass zum Beispiel auch nur die Schriftarten kopierten würden, die auch wirklich im Projekt genutzt werden, oder dass andere statische Dateien besser in anderen Unterordner vorzufinden sein sollten.

Und dann wurde für die Handhabung von schon nur den drei Seiten klar, dass ich eine kleine Template-Engine brauchte, damit ich nur einmalig den Kopf- und Fuß-Bereich ändern muss, und der auf allen Seiten importiert wird. Dabei stellte ich auch sicher, dass name.html dann in der Ausgabe zu /name/ als Unterverzeichnis wird.

Und dann erinnerte ich mich ja daran, dass Google wirklich, wirklich diese Sitemaps haben will, also programmierte ich, dass beim Erstellen der Ausgabe auch immer eine mit allen Seiten erstellt wird.

Und dann wollte ich wissen, was ich noch automatisieren konnte, und programmierte, dass die Meta-Angaben auch automatisiert aus einer Konfiguration und den jeweiligen Seiten gelesen würden, wie Titel und Beschreibung.

U nd dann ging ich noch einen Schritt weiter, und automatisierte, dass nur referenzierte Bilder in die Ausgabe kopiert und diese ebenfalls mit einem Hash-Wert im Dateinamen dabei versehen würden. Bei der Gelegenheit stellte ich sicher, dass Bilder statt über eine, da jeweils handgeschriebene, Fehler-anfällige URL nun einfach mit @images referenziert werden konnten. Und bei der Gelegenheit machte ich dasselbe für geladene Fonts.

Un d da n n kam die Anforderung, dass die Seiten auch eine gewisse Interaktivität trotz ihrer statischen Natur benötigen, also fügte ich Alpine.JS hinzu, damit das kompakt und prägnant und ohne weiteren Overhead möglich ist.

U̸n̷d̴ ̵d̵a̷n̴n̸ bemerkte ich, dass die vorherige Verschleierung von E-Mail-Adressen in diesem Kontext nicht mehr sinnvoll möglich ist, also recherchierte und implementierte ich die aktuelle Best Practice.

Ǘ̷̗̎n̴̡͆̈d̷̹̯̾͋ ̷̬̪͑̓d̵̖͋͘a̵̛͉͊ñ̵̜̘ṋ̴̎ fiel mir auf, dass ich bei dieser Art von Website auch Assets zum Download (wie AGBs, PDFs und so weiter) anbieten muss, also ergänze ich die Logiken darum.

U̵̡͚̯͔̦͂ņ̷̱̫̩͖͉̝̰̺͕͉̯̫͇̥̫̙͇́̾̾͝ͅd̴̢̨̬̣̘̮̲̺̝̠͖̘̳̗͊̀̉̔̾͐͒͐̄̓͆̎͗͗̓̔̄̚͘͘͠ ̶̨̨̢͓̣̭͖̊̆́͌͗̏́̎̐̿̑͗͊̀̒̍͊̒̈́̎̌̕͠͠d̵̢̢̦̣̥̰̖͕̮͚͕̜͕̫͙̩͍͇͍̩̠̖̜̅̍͌̈́͂̊͌̈́͊̆̀̈́̽̈́̀̽̽͑̌̒̾̈́̕ͅą̴͔̳̻͍̹͎͍̩̻̜͖̻̀́̈́́̆̈́͌͋̐͜n̵͉̖̺̮̗̊̍̓͋̾͐̑̇̍̓͋͘͠ṋ̸̻̱̺̠͔͈̬̎́̕̕ stellte ich mit Entsetzen fest, wie aufgebläht der Automatisierungsprozess da bereits war, also habe ich den vollständig refaktorisiert.

Û̵̢̢̡̧̢̨̡͇̣͔̬̮̗̱͔͔̮̞̳̱͖̘̯͇̘̻͍̮̻̖͈̟̮̖͓̺͚̜̭̠̼͇̦̠͚̼̗̰͒̓̈́̌͐̿̚̚͠ņ̷̡̛̫͈̥̥̱̞̟̈́̎̓́̃̓̎̀͊̾̎̏͆̒̿̋̍̿͂̋̕̕̚ḑ̶̛̺̅̏̑̃͗͐͊̀̿͋͑̀͌͛̽̓̋̋́̅̀̒̍̏̅́̀̃̓̉̈́̒̅̒̾͐̔̉́́̄̐͐̏̽̂̕̕̕̚̚͜͝͝͠͠͝ ̸̨̡̡̨̢͙̱̪̤̰͎̫͍̺̜̮͕̹͙̬̥̮̘̪͉͖̪͎͎̙̻͍͕͔͚̩̻̞̥̻͖͍̗̲̗͍̺̫͔̰̟̬̳͈̓ͅͅd̷̡̡̡̮̭̘̦̣̫͔̖̦͙̩̝͈̲̙̬̰͈͖̯̳͓̠̜̟̮̫͚̠̤̥̼͉͖̤̰̺̭̩̗͍͉͚͛͒̾̃͐̂̄̏̕͜͜͜͜͜͜͠ͅͅͅa̶̧̧̛͇̪͈̥̝̙̩̗̙͎̬͚̳͖̤̯̲͍̫͕͙̥̬̠͓̫̝͖̻̘̼͌͌̌̀̓̾̈́͋̉͗̏̃̃͆͆̀͊͒͊̑͑̈͐͌͐̈́̍̓̈́͑̅̑̓̔͗̔̑̒͆̕̚̕̚͜͠͝͝ͅņ̵̧̧̡̛̛̥̮̱̪̫̦̯̗̮͍̳̰̠͍̘̭̩̺̫͍̥̦̳͙͕̪̣͇̖̭͗̋̍̔̒́͋̈́͒̈̔͑͊̅̀̔̂́̔̊͐̀̊̎́̀͜͜͝ͅn̶̨̢̧̧̧̨̧͍̳̻͙̲͓͈͙̯̙̹̥͈̝̮̩̣͈͉̪̭̟͉͕̺̲͉͖̞̬̫̗͖͍̹̓̋̂̇̾̋́̒̀̈́̎͌͂͌͑̓̑̆̓̆̑́͋̓͗͑̄͜ͅ dachte ich, ich sei fertig, allerdings kamen da die ersten Fehlerberichte und Wünsche, um die ich mich kümmerte, wie, dass die 404-Fehler-Seite nicht in der Sitemap auftauchen sollte, oder auch Unterunterverzeichnisse möglich sein sollten.

Und dann war ich fertig.