ZadA - Das Framework dieser Website oder: Die "Renaissance von Serverless"
Warum dieses Framework?
Ich hatte beschlossen, für eine private Non-Profit-Veranstaltung (Zen auf der Alb, kurz ZadA), eine einfache Website zu bauen.
Meine Direktive für dieses Projekt war: "Keep it simple" : eine schlichte und schlanke Lösung zu finden.
WordPress hatte für mich aufgehört, einfach und transparent zu sein.
Ausgaben für die Instanz selber, mich auf ein "Theme" festlegen und einarbeiten, Komponenten für SEO und Ähnliches lizenzieren, träge ladende Seiten, ein WYSIWYG - Editor der seinen Namen nicht verdient....
Alles in allem ein Gesamtkontext, der mich nicht mehr besonders interessierte.
Ich überlegte, was ich wirklich brauchte, das meiste war einfach Overhead - selbst der Webserver...
ChatGPT AI Assistant
Natürlich hatte ich immer wieder auch mit statischem HTML bzw. mit "$.ajax" gegen einen Webserver experimentiert.
Aber es war klar, dass es ein paar Dinge mehr bedarf, eine moderne SPA - Website aufzubauen, die vernünftig funktioniert.
Ein weiteres persönliches Requirement von mir war es gewesen, mich nicht im Hobbyismus der HTML-Entwicklung für eine private Website zu verlieren.
Und da ich mich für Pair Programming interessierte, habe ich mich dazu entschieden, dies alles zu einem kleinen Fortbildungsprojekt zu machen.
Und so wurde die Idee, ein minimalistisches Framework zu bauen getragen von der Entscheidung, mit Unterstützung eines digitalen Assistenten zu arbeiten.
In der ersten Phase, der Entwicklung der Website "Zen auf der Alb" arbeitete ich mit ChatGPT als digitalen Assistenten, und ließ mir immer wieder Tipps geben, die ich dann umsetzte.
What I wanted to avoid
- Operational overhead (servers, databases, deployments, monitoring)
- Update pressure (CMS/plugin ecosystems that require constant patching)
- Opaque behavior (too many layers of abstraction, “magic” configuration)
- Fragile add-ons (features that break the page if a single script fails)
What I wanted instead
- Serverless : HTML/CSS/JS served directly from a static host/CDN
- 100% transparency : pure JS, HTML CSS, JSON - nothing else
- Minimal runtime : just enough JavaScript for navigation and small UI enhancements
- SEO-ready output : real, indexable pages generated from the same content
- Full Maintainability : clear component concept, easy to edit and preview in sandbox
- Version control : Opportunity to work with git and bitbucket
- Optional features : isolated “widgets” that only run when the page includes their containers
Verwendung für diese Seite
Irgendwann entschied ich mich dazu, das ZadA - Framework auch für meine eigene Website zu verwenden.
Ein Upgrade auf eine neue WordPress-Version ließ sich nicht mehr verschieben.
Das war für mich der Moment, in dem ich mich dazu entschloss, das ZadA - Framework auch für meine eigene Website zu verwenden.
Claude in WebStorm
In jüngerer Vergangenheit (Januar 2026) entschied ich mich dazu, weitere Optimierungen am ZadA - Framework vorzunehmen.
Ich verwende WebStorm als IDE für JavaScripting seit 2015. Ich entschied mich nun dazu, direkt innerhalb der IDE einen interaktiven Modus mit Claude auszuprobieren.
SEO
Das Thema "SEO" bedurfte einer genaueren Betrachtung und Optimierung.
Die Anforderungen waren klar, die Umsetzung im Detail nicht.
Diese fiel dann allerdings dank Claude recht leicht, und am Ende des Tages - nicht einmal sinnbildlich gesprochen - hatte ich Klarheit über die Metadaten für SEO, und auch ein modulares Konzept für HTML- und SEO- Fragmente une eine Template Engine.
Weitere Themen: Sprachauswahl und Plugin-Konzept
Auch wenn ich eine sehr minimalistische Freelancer-Website betreibe hatte ich mich immer wieder gefragt, ob Deutsch oder Englisch die Sprache der Wahl wäre.
Da die Site wirklich minimalistisch, modular und strukturiert ist, war dies sehr einfach umzusetzen.
Meine Freude am Experimentieren mit Claude wuchs von Tag zu Tag: Eigentlich reichte es mir für dieses Experiment aus, wenn ich die Requirements prompte, und dann schaue, wie gut Claude das hinkriegt - und was er von mir braucht.
Tutorial-Mode, ACE - Editor und Plugins
Da dies alles sehr viel Freude bereitete, wollte ich auch ein Tutorial-Mode einbauen, der meine Erlebnisse mit Claude dokumentiert, aber auch das Framework beschreibt.
"Baue mir eine Seite, die die wesentlichen Konzepte des ZadA- Frameworks dokumentiert und deren Codepassagen in ACE-Editor-Snippets darstellt"
The index page basically consists of four "div" elements for navigator, main content, sidebar and footer
Further, a small script is loading content into navbar, sidebar and footer:
Und das Meta-Update hier: