Het web dat zichzelf herschrijft: live bewerkbare pagina's die verdwenen
De webdroom die we kwijtraakten: pagina's die zichzelf aanpassen
Vroeger was een website simpelweg een bestand. Een index.html op de server, en je zag meteen de link met wat er in je browser verscheen. Die puurheid had iets moois.
Door frameworks als PHP, WordPress en Node.js werd alles ingewikkelder. Sites werden abstracties, gegenereerd door servers, databases en API's. Je website veranderde in een heel systeem, geen simpel document meer.
Maar stel je voor: die oude magie terugbrengen.
De comeback van het lees-schrijf-web
Tim Berners-Lee droomde van een web waar je kon lezen én schrijven. Pagina's die je samen kon aanpassen. Die visie leefden we al lang niet meer.
Gelukkig bloeit er nu iets nieuws op:
- TabFS van Omar Rizwan liet zien hoe bestanden centraal kunnen staan voor slimme tools
- Static site generators zoals 11ty bewijzen dat schoonheid zonder gedoe kan
- Initiatieven als mmm.page en Beaker Browser brengen decentrale, bewerkbare webplekken terug
Ze hunkeren allemaal naar websites die aanvoelen als tastbare documenten.
Een gewaagde test: HTML die zichzelf wijzigt
Stel je een index.html voor die zichzelf aanpast. Via een eigen interface: bewerk tekst, zie wijzigingen live, en sla ze op in het bestand zelf. Zonder backend.
Klinkt onmogelijk? HTML is normaal eenmalig schrijven, eindeloos serveren. Maar met browser-API's en slim JavaScript lukt het.
Zo pak je het aan:
- Volg DOM-veranderingen met event listeners
- Maak HTML van de aangepaste DOM
- Gebruik de File API om lokaal op te slaan
- Voeg een bedieningspaneel toe voor structuur en extra's
Resultaat: een levende pagina. Klik, bewerk, en je bestand is weer je hele site.
Meer dan tekst: metadata en stijlen beheren
Echt pittig wordt het bij de <head>. Titels, meta-tags, CSS en scripts zijn onzichtbaar voor simpele DOM-edits.
Daarom heb je een apart paneel nodig. Daarmee pas je aan:
- Documentinfo zoals titel en beschrijving
- CSS-regels direct in de pagina
- Scripts en dependencies
- JSON-data voor de site
- Vooruitkijken voor je slaat
Het is een visuele editor voor de kern van je pagina. Je raakt niet alleen content aan, maar de bouwstenen.
Waarom dit de webontwikkeling verandert
Geen nostalgie, maar serieuze voordelen:
Eenvoudig hosten: Gooi het op static hosting zoals NameOcean's cloud, GitHub Pages of Netlify. Geen database nodig.
Duidelijke versiecontrole: Het HTML-bestand is de bron. Git volgt alles vanzelf.
Snelheid: Geen server-rendering of queries. Pure static HTML laadt razendsnel.
Gebruikersvrijheid: Iedereen kan sites bijhouden, zonder codekennis. Zelfs je tante fixt haar portfolio.
Onafhankelijkheid: Geen lock-in bij platforms. HTML overleeft alles.
De echte beperkingen
Toch niet perfect:
- File API-blokkades: Browsers schrijven niet zomaar naar je schijf. Je hebt een API, serverless functie of download nodig.
- Schaalbaarheid: Top voor persoonlijke sites en docs, niet voor apps met databases.
- Samenwerken: Meerdere editors eisen conflictbeheer, dat een backend biedt.
- Geavanceerd spul: Login of real-time? Dan terug naar systemen.
Zelf aan de slag
Probeer dit framework:
// Volg invoer
document.addEventListener('input', (e) => {
if (e.target.contentEditable === 'true') {
// Werk DOM bij
updateContent(e.target);
// Maak HTML-string
const html = document.documentElement.outerHTML;
// Sla op via backend of download
saveFile(html);
}
});
Koppel aan een serverless functie (AWS Lambda, Netlify), en je hebt een werkende self-editing site.
Een nieuwe mindset
Dit dwingt je anders te denken over sites. Niet als apart systeem, maar als één geheel met editor. Terug naar webcraft: klein, begrijpelijk, zelfvoorzienend.
Niet voor elke app geschikt. Maar voor blogs, portfolios en landing pages? Dit is goud.
Wat komt er?
Het read-write-web slaapt niet. Ideeën als deze maken het wakker. Simpelheid wint terrein.
De vraag is: wat bouw je als je site aanpassen voelt als een document bewerken?
Zelf-editing site hosten? NameOcean's cloud hosting en domeindiensten maken static HTML deployen makkelijk. Voeg serverless toe, en je hebt een sterke présence zonder ballast.