Responsive heißt neu komponieren
ContentKit ordnet semantische Inhalte für den tatsächlichen Container, die Lesedichte und das Ausgabemedium neu an.
#Frontend
React-Überblick: Von JSX zur Komponentenarchitektur
Ein kompletter Durchgang durch React, wie ich es heute unterrichte – vom deklarativen Rendern über die Frage, wem ein Zustand gehört, bis zur Architektur einer wachsenden Anwendung. Die Details zu einzelnen Stationen kommen später als eigene Beiträge.
Formulare in React 19: Actions, useActionState und useOptimistic
React 19 macht das Formular zur eigentlichen Schnittstelle: eine Funktion als form action, dazu drei Hooks für Ergebnis, Pending-Zustand und sofortiges UI-Feedback. Dieser Beitrag zeigt das Zusammenspiel – und wo optimistisches Rendern ohne sauberen Fehlerpfad kippt.
React Server Components und Server Actions: Die neue Grenze
Server Components laufen außerhalb des Client-Bundles und liefern ihr Ergebnis statt ihres Codes an den Browser. Server Functions holen Schreibvorgänge auf den Server – umgesetzt wird beides durch ein passendes Framework oder einen Bundler.
React Router Data Router: Die URL als Zustandsort
Der Data Router von React Router macht die URL zum Koordinationspunkt – eine Route lädt ihre Daten per loader vor dem Rendern und schreibt über action, sodass Ladelogik aus dem Komponenten-Body verschwindet.
React Transitions: nicht dringende Updates mit useTransition
useTransition markiert Updates als nicht dringend und hält React während teurer oder suspendierender Renderings responsiv. Dazu useDeferredValue als Werkzeug für nachgelagerte Renderings.
Suspense und der use-Hook: rendern, als wären die Daten schon da
Statt in jeder Komponente einen Ladezustand zu verwalten, beschreibt man mit Suspense an einer einzigen Stelle im Baum, was während des Wartens erscheint – und der use-Hook lässt die Komponente darunter rendern, als wären die Daten längst da.
Client-Zustand vs. Server-Cache: die folgenreichste Grenze im Frontend
Serverdaten sind Zustand, aber nicht client-eigener Zustand. Warum diese Unterscheidung wichtig ist, wann useEffect zum schlechten Cache wird und was eine Server-State-Bibliothek übernimmt.
TypeScript in React: Props, Hooks und Events typisieren
Wie aus Props und State überprüfbare Verträge werden – und der Editor Fehler meldet, bevor der Nutzer sie sieht. Von interface/type über useState-Generics und Event-Typen bis zu useRef und Utility-Types.
Von HOCs und Render Props zu Custom Hooks
Wie teile ich Logik zwischen Komponenten ohne Copy-Paste? Custom Hooks vermeiden dafür meist verschachtelte Wrapper; HOCs und Render Props behalten einzelne Kompositionsaufgaben.
Slots, Context und Web Components in Svelte
Drei Kompositions-Werkzeuge in Svelte 3: Slots reichen Inhalt von außen hinein, die Context-API vermeidet Prop-Drilling, und Custom Elements machen eine Komponente framework-neutral wiederverwendbar.
Build vs. Runtime in Webprojekten
Der Rendering-Zeitpunkt wird pro Route entschieden. Statische, dynamische und inkrementelle Modelle lassen sich nach Datenfrist, Kosten und Fehlerverhalten kombinieren.
RxJS in React: Observables im Datenfluss der Oberfläche
RxJS glänzt in React nicht überall, sondern genau dort, wo asynchrone Ereignisse koordiniert werden müssen – entprellte Eingaben, abgebrochene Autocomplete-Requests, kontinuierliche Ströme. Der Beitrag zeigt die wenigen Stellen, an denen sich Observables wirklich lohnen, und wo useState völlig genügt.
Motion, Transitions und Animationen in Svelte
Wie Svelte Bewegung deklarativ und ohne Extra-Bibliothek mitbringt: transition-Direktiven fürs Ein- und Ausblenden, svelte/motion für sanft interpolierte Werte und animate:flip fürs Umsortieren von Listen.
Svelte Stores: Zustand außerhalb der Komponente
Svelte Stores sind ein minimales Modell für Zustand, der nicht in eine einzelne Komponente passt: writable, readable, derived – plus die $-Kurzschreibweise, die abonniert und beim Unmount aufräumt.
Svelte-Reaktivität: der Compiler statt Virtual DOM
Svelte kompiliert Komponenten zur Build-Zeit in gezielten DOM-Code, statt zur Laufzeit einen Virtual DOM zu diffen. Ich zeige das mentale Modell, die reaktive Zuweisung mit $: und die klassische push-Falle, die mir in Projekten immer wieder begegnet.
State-Management in React: Redux Toolkit, leichte Stores, MobX
Wenn ein Zustand wirklich app-weit ist, stellt sich die Werkzeugfrage – Redux Toolkit, ein leichter Store wie Zustand oder Jotai, oder das reaktive Modell von MobX. Warum diese Wahl aber erst nach der Gegenprobe kommt und meistens kleiner ausfällt als gedacht.
Context richtig einsetzen: Verteilweg statt heimlicher globaler Zustand
Context löst das Verteilen von Daten durch den Baum – aber nicht die Frage, wem der Zustand gehört. Wer beides verwechselt, baut einen globalen Store durch die Hintertür ein und erzeugt bei unbedacht wechselnden Provider-Werten unnötige Renderläufe.
Zustand erhalten und zurücksetzen: React und die Position im Baum
React speichert Zustand nicht in der Komponente, sondern an ihrer Position im Render-Baum – wer das versteht, steuert Erhalt und Reset absichtlich statt zufällig.
Wie React den Baum rendert und aktualisiert
Vom JSX-Element zum sichtbaren Pixel – was zwischen einer Zustandsänderung und dem neu gezeichneten Bildschirm genau passiert. Render und Commit als getrennte Phasen, der Abgleich zweier Bäume und warum React fast immer nur einen winzigen Teil des DOM anfasst.
JSX genau: Die Regeln hinter dem Markup
Ein präziser Blick auf JSX – was der Compiler daraus macht, warum in geschweiften Klammern Ausdrücke statt Anweisungen stehen, wie Attribute, Kinder, Bedingungen und Listen funktionieren und an welchen Stellen Anfänger stolpern.
AWS Parameter Store im Build
Parameter Store im Build macht Konfiguration explizit, wirft aber harte Fragen zu Secrets und Reproduzierbarkeit auf.
Micro-Frontends: Teamschnitt im Browser
Warum die eigentliche Arbeit bei Micro-Frontends nicht in der Integrationstechnik steckt, sondern im Teamschnitt – gezeigt an einer lauffähigen Beispiel-Landschaft aus Gateway, vier Anwendungen und einer Komponenten-Bibliothek.
Frontend-Schnittstellen sind APIs
Warum Props, URLs, Events, CSS-Klassen und localStorage dieselbe Versionierungs-Disziplin verdienen wie ein REST-Endpunkt – spätestens, wenn mehrere Teams im selben Browser arbeiten.
Angular, React und der Wert von Übergängen
Ob ein Framework-Wechsel zum Umzug oder zum Neubau wird, entscheidet sich daran, wie billig zwei Welten monatelang nebeneinander laufen können.
Prototypen: das Objektmodell hinter JavaScript-Klassen
class in ES2015 ist im Kern Syntax-Zucker über Prototypen: Wer die [[Prototype]]-Kette, Object.create und den new-Ablauf versteht, debuggt this-Fehler und geteilte Methoden souveräner.
Redux als Protokoll für UI-Änderungen
Der Store ist der langweiligste Teil von Redux – wertvoll ist das Nachrichtenprotokoll aus benannten, serialisierbaren Actions, das UI-Änderungen nachvollziehbar, testbar und diskutierbar macht.
JavaScript-Patterns, die geblieben sind: Module, Higher-Order Functions, Currying
Drei JavaScript-Muster haben jeden Framework-Wechsel überlebt: das Module-Pattern für saubere Kapselung, Higher-Order Functions für Funktionen als Werte und Currying für spezialisierte Varianten. Warum sie das Fundament moderner Utility-Libraries bilden.
KnockoutJS: fein-granulare Reaktivität mit Observables und Computed
Wie KnockoutJS Reaktivität löst: Observables als get/set-Funktionen, Computed mit automatischem Dependency-Tracking und gezielte DOM-Updates statt globalem Baum-Vergleich.
Tic-Tac-Toe mit Minimax in React
Ein unschlagbarer Tic-Tac-Toe-Gegner in React zeigt, warum Spiellogik als reine Funktion nichts vom Rendering wissen darf – und warum unveränderliche Züge zu Reacts Modell passen.
React: Komponenten als Schnittstellen
Warum Props der öffentliche Vertrag einer React-Komponente sind – und was sich ändert, wenn man sie wie eine API entwirft statt wie eine Parameterliste.
ES6 Memory: UI-State begreifen
Ein Memory-Spiel in frischem ES2015, ohne Framework gebaut, macht sichtbar, welche Zustände eine UI wirklich hat, wo sie liegen sollten und wer sie ändern darf.