Heute stelle ich eine neue Version dieser Website vor. Version 4.0 dieser Seite unterscheidet sich deutlich vom Erscheinungsbild von FAB INDUSTRIES, das ich im Juli 2018 bei der Neugestaltung meiner persönlichen Website im Vorfeld meiner Selbstständigkeit entwickelt hatte. Dieses neue Website-Projekt, mit dem ich damals meinen alten Blog ersetzt habe, war mein erster Versuch, eine statische Website zu betreiben. Seit 2018 wird diese Website mit dem Static-Site-Generator Hugo erstellt. Seit 2020 wird sie über Netlify ausgeliefert. Im Laufe der Jahre habe ich das Erscheinungsbild von FAB INDUSTRIES kontinuierlich optimiert, unter anderem durch einige größere Aktualisierungen des Designs. Das letzte große Update war Version 3.0 im vergangenen Jahr.

Meine Hugo-Odyssee

Obwohl ich statische Websites nach wie vor liebe — und das Ausliefern über Netlify wirklich komfortabel ist — habe ich im letzten Jahr oder so meine Begeisterung für Hugo verloren. Trotz des Anspruchs, „das schnellste Framework der Welt zum Erstellen von Websites“ zu sein, ist Hugo für meinen Anwendungsfall immer langsamer geworden. Und zwar so, dass es nicht mit der wachsenden Komplexität dieser recht umfangreichen Website korreliert. Meine Website ist ziemlich stetig gewachsen, während Hugo in den letzten zwölf bis vierundzwanzig Monaten fast exponentiell langsamer geworden ist. Die Entscheidung der Hugo-Entwickler, Websites auf die Festplatte statt in den Arbeitsspeicher zu rendern, hat die Sache nicht gerade verbessert. Sicher, ich habe diese Einstellung wieder zurückgesetzt, sobald ich herausgefunden hatte, dass a) meine Seite plötzlich viel langsamer zusammengebaut wurde und dass b) dies daran lag, dass der Prozess durch Festplatten-I/O¹ ausgebremst wurde, aber es hat mich trotzdem gestört. Man sollte Dinge, die funktionieren, nicht kaputtmachen, nur weil man eine Idee hat, die wahrscheinlich nur im eigenen Kopf und in der Bubble der Entwickler und Maintainer großartig klingt. Man sollte zumindest zuerst ein paar Tests durchführen.

Aber es gibt noch weitere Probleme mit Hugo. Die mangelhafte Dokumentation ist eines davon, aber damit kann ich leben — was ich ja offensichtlich schon seit Jahren tue. Was ich schlimmer finde, ist die Funktionsüberfrachtung. Hugo wird von Tag zu Tag umfangreicher und komplexer, und nichts von dem, was da hinzugefügt wird, brauche ich. Im Gegenteil: Die ständigen Änderungen und das Entfernen alter Funktionen führen lediglich dazu, dass sich meine Kompilierungszeiten verlängern und gelegentlich, wenn ich meine Hugo-Version mal wieder aktualisiere, mein Design nicht mehr funktioniert und Hugo mal wieder Fehlermeldungen ausgibt, für deren Behebung ich wertvolle Zeit aufwenden muss, die ich stattdessen zum Schreiben nutzen könnte. Und das alles wegen Funktionen und Änderungen, die ich nicht will und die Features hinzufügen, die mir nichts bringen.

Ich bin nicht der Einzige, der so denkt. Nur dass ich zusätzlich noch das Problem habe, dass ich der Behauptung der Hugo-Entwickler, ihre Software sei unglaublich schnell,nicht glaube. Meiner Erfahrung nach ist Hugo einfach nicht so schnell. Das Kompilieren von Markdown in HTML-Dateien ist keine Raketenwissenschaft. Selbst wenn es viele Dateien sind.

Ich bin zu dem Schluss gekommen, dass viele der Probleme, die ich mit Hugo habe, darauf zurückzuführen sind, dass sich das Project zu etwas entwickelt hat, das nichts für mich ist. Die Entwickler scheinen Hugo zu einem Schweizer Messer für Webseiten ausbauen zu wollen, mit dem man alles bauen kann, was man sich nur vorstellen kann, während ich nach einem einfachen Tool suche, mit dem ich schnell und effizient meine eigene, ganz spezifische Website zusammenbauen kann. Ich möchte, dass die Seite für Besucher so einfach wie möglich ist. Und ich möchte ein einfaches Tool, mit dem ich diese Seite erstellen kann. Aus diesem Grund habe ich mich nach einem neuen Statische-Webseiten-Generator umgesehen.

Praxisorientierter Arbeiten

Ich habe diese Gelegenheit genutzt, um noch ein Ziel zu verfolgen, das mich in letzter Zeit bewegt hat: Anstatt ein vorgefertigtes Theme anzupassen, wollte ich das HTML/CSS-Framework für die neue Version der Webseite so weit wie möglich selbst erstellen. Zum einen, weil ich so mehr Kontrolle über den Look & Feel der Seite habe, und zum anderen, weil ich sehen wollte, ob ich so etwas überhaupt noch hinbekomme. Und der Versuch hat mich tatsächlich auf angenehme Weise an die Zeit erinnert, als ich Ende der 90er Jahre manuell Webseiten gebaut habe.

Glücklicherweise habe ich ein kleines Softwareprojekt gefunden, was genau das möglich macht: Ich konnte auf eine viel einfachere Alternative zu Hugo umsteigen, und kann außerdem selbst viel mehr das Design der Seite beeinflussen, ohne eine komplizierte Template-Sprache lernen zu müssen, bei der ich dann alle möglichen fancy Funktionen lernen muss, die ich am Ende doch nicht brauche, mit denen ich mich aber trotzdem bei jeder Änderung am Theme wieder aufs Neue herumschlagen muss. Die Lösung, die ich gefunden habe, hat den zusätzlichen Vorteil, dass sie Lua für alle Teile der Software verwendet, mit denen ich beim Bauen meiner Seite interagiere — was mir besonders gefällt, da ich Lua sehr mag und in letzter Zeit viel damit programmiert habe.

Die Software, die ich gefunden habe — der Statische-Webseiten-Generator, mit dem diese Seite nun erstellt wird — heißt luasmith und ist ein wirklich raffiniertes kleines Software-Tool. Es handelt sich um eine einzelne C-Bibliothek, die Lua als Template-Sprache verwendet. Wie Hugo wandelt es Markdown-Dateien in statisches HTML und CSS um, aber im Gegensatz zu Hugo handelt es sich um eine einfache Binärdatei ohne Laufzeitabhängigkeiten, die nur wenige hundert Kilobyte groß ist. Außerdem verfügt es über integrierte Link-Prüfung und Syntax-Highlighting. In den letzten Monaten habe ich mich intensiv mit diesem SoftwareProjekt beschäftigt (die Dokumentation ist noch sehr rudimentär) und daran gearbeitet, eines der integrierten Designs in das Website-Design zu verwandeln, das ihr heute vor euch seht. Dabei habe ich sogar einen Bug in dem Projekt gefixt.

Abgesehen von der Verwendung von Lua gefallen mir an dieser Software vor allem zwei Dinge:

1. Der Anwendungsbereich ist bewusst begrenzt. Die Software versteht sich als handliches Tool, welches sich auf das Wesentliche konzentriert, anstatt alle möglichen Wünsche aller möglichen Nutzer zu erfüllen.
2. Aufgrund der Bauweise der Software kann ich sie auch dann weiter nutzen, wenn morgen die Entwicklung eingestellt würde — wahrscheinlich auf unbegrenzte Zeit. Auch wenn ich nicht genug C-Kenntnisse habe, um etwaige Probleme selbst zu beheben (was höchstwahrscheinlich der Fall ist).

Wie der Entwickler selber sagt:

Was mich am JavaScript-Ökosystem frustriert, ist, dass es sich ständig verändert. Node, Deno und Bun leisten zwar beachtliche Arbeit dabei, alte Versionen bereitzustellen, aber ich möchte mir keine Gedanken über kompatibilitätsbrechende Änderungen machen müssen.

C hingegen verändert sich nur sehr langsam, und frühere Versionen von Lua sind im Grunde in Stein gemeißelt. Wenn man dann noch statische Verknüpfungen hinzufügt, erhält man ein Software-Artefakt, das noch lange Zeit nutzbar bleiben dürfte.

Ich finde diesen Ansatz der Softwareentwicklung großartig! Das ist bei den heutigen Verhältnissen in dem Bereich eine sehr erfrischende Einstellung.

Nachteile des Wechsels

Es hat mir großen Spaß gemacht, diese neue Version der Webseite mit luasmith zu erstellen. Ein Nachteil ist jedoch, dass es bei luasmith keinen eingebauten Entwicklungsserver gibt, wie es bei Hugo der Fall ist. Zwar ist es möglich, eine Vorschau der von luasmith erstellten Webseiten-Struktur anzusehen, indem man mit einem Datei-Explorer zum Verzeichnis der .html-Dateien navigiert und diese manuell in einem Browser öffnet, doch ist das nicht gerade benutzerfreundlich und bringt zudem einige Probleme mit sich, da manche Elemente nicht funktionieren oder sich anders verhalten als im Live-Betrieb der Webseite. Daher habe ich mir mit dem Static Web Server und einigen einfachen Batch-Skripten sozusagen meinen eigenen Entwicklungsserver gebaut.

Das erste Skript, fx-compile.bat, erstellt lediglich die Webseite. Es löscht meinen Ausgabeordner für die generierten WebseitenInhalte und generiert die Seite anschließend neu, indem es luasmith zweimal ausführt. Das passiert zwei mal, um jeweils den englischen und den deutschen Teil der Seite zu bauen (zwischen denen man über den ⇆-Link in der Kopfzeile wechseln kann).

@echo off
setlocal
cd ..
cd fx-public
rd /s /q public
cd ..
cd fx
.\luasmith.exe theme\en\theme.lua
.\luasmith.exe theme\de\theme.lua

Das zweite Skript, das ich fx-serve.bat genannt habe, macht dasselbe, startet aber zusätzlich einen Webserver auf localhost, Port 8787, um eine lokale Version der Website bereitzustellen.

@echo off
setlocal
cd ..
cd fx-public
rd /s /q public
cd ..
cd fx
.\luasmith.exe theme\en\theme.lua
.\luasmith.exe theme\de\theme.lua
.\static-web-server.exe --port 8787 --root ..\fx-public\public\ --log-level info

Wenn ich einige der Markdown-Dateien geändert habe, aus denen der Quellcode der Webseite besteht, erzeuge ich meine Vorschauversion neu, indem ich das Server-Skript beende und neu starte. Da das Server-Skript Warnungen von luasmith mit anderem Output etwas untergehen lässt, benuzte ich das erste Skript, um zu prüfen, ob der Link-Checker von luasmith Fehler bei der Verlinkung von Seiten oder Bildern meldet. In diesem selbstgebauten Ansatz gibt es keine Live-Aktualisierung wie bei Hugo, aber damit kann ich leben. Der Schlanke Code der Software ist mir deutlich wichtiger.

Diese Umstellung bringt einige Nachteile mit sich. Einige davon betreffen Besucher der Webseite — diese sollten aber nur vorübergehend auftreten. Ich arbeite nun schon seit einigen Monaten daran, mir die neue Software beizubringen und das neue Design der Seite zu gestalten. Da ich den neuen Look meinen Lesern nicht länger vorenthalten wollte, habe ich mich nun entschlossen, die Seite online zu stellen. Das bedeutet allerdings, dass viele Inhalte der alten Seite noch nicht wieder verfügbar sind. Ich werde jedoch kontinuierlich alte Inhalte hinzufügen, bis alles wieder online ist.

Da ich die Gelegenheit genutzt habe, die Struktur der Website etwas zu vereinfachen, um sie besser an meine aktuellen Bedürfnisse anzupassen, werden wir leider auch mit einigen toten Links leben müssen. Das lässt sich nicht vermeiden. Ich arbeite jedoch aktiv daran, die Inhalte auf der Website besser auffindbar zu machen, was dieses Problem zumindest etwas abmildern dürfte. Außerdem sollte die Tatsache, dass ich hier eine sehr einfache statische Website betreibe, die aus reinem HTML besteht, erheblich dazu beitragen, dass alles über Suchmaschinen gut auffindbar ist.

Ich weiß noch nicht, ob luasmith beim Rendern der Seite schneller ist als Hugo, da ich ein Großteil der Inhalte der alten Seite, wie bereits erwähnt, noch nicht wieder importiert habe. Aber ich habe den leisen Verdacht, dass luasmith letztendlich schneller sein wird. Auch wenn Lua technisch gesehen gegenüber Go einen massiven Nachteil haben sollte, wenn es um die reine Rechengeschwindigkeit geht. Der deutlich schlankere Code könnte sich am Ende jedoch als entscheidener Vorteil erweisen. Wir werden sehen. Aber selbst wenn es langsamer ist als Hugo mach mir das nichts. Das Geschwindigkeitsproblem mag zwar der Grund gewesen sein, der mich anfangs gestört und dazu gebracht hat, nach einer Alternative zu suchen, letztendlich hat mich luasmith aber mit anderen Eigenschaften überzeugt. Und die empfinde ich jetzt, nachdem ich einige Monate mit der Software gearbeitet habe, als viel wichtiger. Zum Beispiel die Möglichkeit, diese Website auf Dauer zu betreiben, ohne die dahinterstehende Software anfassen zu müssen, wenn ich das nicht möchte. Oder die einfache Freude daran, eine Template-Sprache zu benuzten, die ich verstehe, und dabei eine Programmiersprache zu verwenden, in der ich tatsächlich gerne programmiere.

Das neue Erscheinungsbild

Das Ergebnis all dieser umfangreichen Änderungen hinter den Kulissen ist eine deutlich übersichtlichere Webseite. Im Gegensatz zu früheren Aktualisierungen der Seite, bei denen ich immer wieder neue Komplikationen eingeführt habe, möchte ich diese mit Version 4.0 reduzieren. Ich versuche, meine Ansprüche an Software wie Hugo, hiermit auch selbst in die Praxis umzusetzen. Weniger Schnickschnack bedeutet hoffentlich, dass ich mich mehr auf das konzentrieren kann, was wirklich zählt: den Inhalt.

Zum einen gibt es auf der gesamten Website keine einzige Zeile JavaScript. Alle Effekte² wurden ausschließlich mit CSS realisiert. Das ist zweifellos mühsam in der Entwicklung, aber es ist auch sehr cool, was man mit CSS heutzutage alles machen kann. Und meiner Meinung nach ist es immer ein lohnenswertes Ziel, auf das Laden von JavaScript möglichst komplett zu verzichten. Außerdem bette ich nun nichts mehr von Drittanbietern ein, sodass alles, was ihr auf dieser Website findet, unter meiner Kontrolle steht.

Sicherheit & Datenschutz

Da kein JavaScript und kein Code von anderen Domains geladen wird, sollte diese Webseite so sicher sein, wie eine Webseite nur sein kann. Selbstverständlich hinterlässt die Seite auch keine Cookies oder andere versteckte Dateien auf dem System des Besuchers. Mein Code trackt euch in keinster Weise. Die einzigen Informationen, die beim Besuch dieser Seite über euch erfasst werden, ist das, was mein Hoster Netlify sammelt, um einige sehr rudimentäre und unaufdringliche Besucherstatistiken bereitzustellen. Diese Seite ist im Grunde ein Relikt aus den 90er Jahren, aus einer Zeit, bevor das Internet durch kommerzielle Interessen und das damit einhergehende Tracking verhunzt wurde.

Design

Da wir gerade von vergangenen Zeiten sprechen: Ich habe mein eigenes Webseiten-Design entworfen, das auf meiner eigenen Farbpalette basiert und an die Ästhetik der 70er- und 80er-Jahre erinnert. Ein Leser hat den daraus resultierenden Look als „rostig und industriell“ bezeichnet, und ich finde, das trifft es ziemlich genau. Mit dem neuen Design und den neuen Farben habe ich mich ebenfalls dazu entschlossen, die Dinge zu vereinfachen und deshalb nur noch ein dunkles Design anzubieten. Ich habe es so gestaltet, dass sich Inhalte weiterhin gut ausdrucken lassen, und ich denke, dass eine Webseite, die ausschließlich ein dunkles Design verwendet, relativ unkontrovers sein sollte.

Das Syntax-Highlighting des Quellcodes wird von luasmith mithilfe von Scintillua in die fertigen HTML-Seiten integriert — natürlich unter Verwendung der oben genannten neuen Farbpalette. Als Schriftarten verwende ich nach wie vor Inter für den Großteil der Texte auf der Webseite und Iosevka für alles mit fester Zeichenbreite — wie etwas die Darstellung von Quellcode. Beide Schriftarten habe ich feinjustiert und sie nutzen mehrere benutzerdefinierte Einstellungen, wie beispielsweise das geschwungene kleine „l“ und alternative Ziffern in Inter, um den Text besser lesbar zu machen. Außerdem habe ich, wo immer möglich, Slab-ähnliche Stile aktiviert, unter anderem für viele der Iosevka-Glyphen und die Satzzeichen in Inter, da ich diesen Look als angenehmer für das Auge empfinde.

Ich habe mir Mühe gegeben, um das neue Erscheinungsbild sehr leserfreundlich und übersichtlich zu gestalten, mit ein paar kleinen Raffinessen, die hoffentlich nie stören. Mich würde interessieren, was ihr vom neuen Design haltet.

Feedback

À propos Feedback: Auch das habe ich hoffentlich vereinfacht. Nachdem ich in den letzten Jahren auf verschiedenen Versionen der FAB INDUSTRIES-Webseite viele Möglichkeiten ausprobiert habe, wie meine Leser mir Feedback geben können, habe ich mich hier ebenfalls dafür entschieden, es einfach zu halten. Schickt mir einfach eine E-Mail an die Adresse, die unten auf jeder Seite angegeben ist. Wenn ihr mich darum bittet, werde ich euer Feedback an der enstprechenden Stelle veröffentlichen, die ihr kommentiert. Oder ich behalte eure Kommentare einfach für mich, wenn ihr das lieber habt. E-Mail sollte auf jeden Fall für jeden funktionieren und ist meiner Meinung nach der einfachste Weg für Kommentare zu meinen Inhalten.

Organisation der Inhalte

Das Blog ist nun in vier verschiedene Inhaltsgruppen unterteilt, die alle auf den Übersichts- und Archivseiten angezeigt werden. Notizen und Fotos werden direkt und vollständig als einzelne Elemente auf der Seite dargestellt. Jedes dieser Elemente verfügt über eine Permalink-Seite, die durch Klicken auf das ⚑-Symbol aufgerufen werden kann. Artikel und Podcast-Folgen werden als kleinere Einträge dargestellt. Diese sind durch einen leuchtenden Rahmen hervorgehoben. Auch diese haben Permalink-Seiten, die ihr erreicht wenn ihr auf die Vorschaubilder, die Überschrift oder den Link am Ende des Vorschau-Eintrags klickt. Bei Podcast-Folgen (diese gibt es momentan nur auf dem englischen Teil der Webseite) ist zudem die eigentliche Audiodatei direkt verlinkt und wird als nativer HTML-Player angezeigt, auf den man klicken kann, um die entsprechende MP3-Datei abzuspielen oder herunterzuladen.

Über die Kopfzeilennavigation gelangt ihr zu den Inhalten, die bereits aus früheren Versionen der Webseite bekkant sein dürften. Über den Link ⇆ könnt ihr zwischen dem englischen und dem deutschen Teil der Webseite wechseln. Auf der Startseite und in der Blog-Übersicht finden sich außerdem eine Liste mit #Tags, über die ihr alle wichtigen Themen einsehen könnt, über die ich im Laufe der Jahre geschrieben habe. Diese Tags sind in absteigender Reihenfolge nach der Anzahl der Einträge in der jeweiligen Kategorie aufgelistet.

Eine neue Funktion, die ich LCARS nenne, ist ebenfalls in der oberen Navigationsleiste aufgeführt. Dabei handelt es sich um eine Art Datenbank, welche die auf der Website verfügbaren Inhalte strukturiert abbildet. Stellt euch das als eine Art manuell kuratierte Sitemap vor. Das ist allerdings gerade noch im Aufbau, daher ist die Seite derzeit noch nicht sehr umfangreich und wird vorerst nur für den englischen Teil der Seite verfügbar sein. Ich hoffe jedoch, dass diese Funktion es Lesern in Zukunft erleichtern wird, die interessantesten und relevantesten Inhalte zu finden, die ansonsten in den vielen Blog-Jahres-Archiven auf dieser Webseite vergraben bleiben.

Für den englischen und den deutschen Teil der Webseite stehen jeweils RSS-Feeds mit vollständigem Inhalt zur Verfügung. Ihr könnt gerne einen oder beide abonnieren, je nachdem, welche Sprachen ihr sprecht.

Ausblick

In den kommenden Wochen und Monaten werde ich fleißig daran arbeiten, ältere Inhalte wieder auf die Seite zu stellen. Falls ihr einen bestimmten Beitrag vermisst, habt bitte etwas Geduld — er wird irgendwann wieder verfügbar sein. Man munkelt, dass ich nebenbei noch in Vollzeit arbeite, was bedeutet, dass ich alle diese kostenlosen Inhalte nebenbei anbiete. Wenn ihr mich unterstützen und mir einen Anreiz geben möchtet, mehr Zeit in diese Webseite zu investieren, würde ich mich sehr über ein Blog-Abonnement freuen.

Ich hoffe, die neue Webseite gefällt euch. Ich freue mich auf euer Feedback zu der neuen Version!

↵ Zurück zur Homepage