Aus dem OpenReplay Blog
Was ist Babylon.js? Eine kurze Einführung
Babylon.js ist eine Open-Source-3D-Engine für JavaScript, basierend auf WebGL und WebGPU – mit einem Vergleich zu Three.js und typischen Anwendungsfällen.
Dynamische Viewport-Einheiten in CSS verstehen
Die CSS-Viewport-Einheiten svh, lvh und dvh lösen Layout-Clipping durch Browser-Chrome auf Mobilgeräten und helfen bei responsiven und Vollbild-Layouts.
Das Argument für Vanilla JavaScript statt Frameworks
Wann Vanilla JavaScript, Web Components, ES-Module und native Browser-APIs React oder Vue für spezifische Frontend-Projekte übertreffen, zeigt dieser Vergleich.
Was steckt in einer HTTP-Response?
HTTP-Antworten bestehen aus Statuszeile, Headern und Body. Dieses Wissen hilft beim Debuggen in DevTools und beim gezielten Verarbeiten von fetch-Ergebnissen.
Versteckte Funktionen in den Chrome DevTools
Chrome DevTools punktet mit CSS Overview, Logpoints, Coverage-Tab und Layout Shift-Debugging für bessere Performance und effizienteren Workflow.
UnJS kennenlernen: Framework-agnostische JavaScript-Tools
Das UnJS-Ökosystem stellt Tools wie Nitro, h3, ofetch und unplugin vor, die JavaScript-Infrastruktur laufzeitunabhängig und framework-agnostisch verwalten.
Wie OpenUI Web Components formt
OpenUI standardisiert UI-Muster über die Popover API, die Invoker Commands API und anpassbares Select-CSS, um den Aufwand für eigenes JavaScript zu reduzieren.
Wichtige npm-Befehle, die jeder Entwickler kennen sollte
Die npm CLI deckt Abhängigkeits-Audits, Skriptausführung und Pinning transitiver Abhängigkeiten ab, um Bäume zu debuggen und Sicherheitslücken zu beheben.
Wie man Komponenten in Svelte Lazy Loading anwendet
Svelte-Komponenten per dynamischer Imports und bedingtem Rendering lazy laden hält initiale Bundles in SvelteKit- und Vite-Projekten schlank.
So beheben Sie 'Cannot use import statement outside a module'
Den Fehler 'cannot use import statement outside a module' in Node.js, Browsern und Jest behebt man durch die korrekte Diagnose des Modulsystem-Konflikts.
Chromes Local Network Access (LNA) Berechtigung erklärt
Chrome Local Network Access schützt lokale Geräte vor öffentlichen Websites. Hier wird erklärt, was den LNA-Prompt auslöst und wie Web-Apps damit umgehen.
ASCII-Art im Browser und Terminal
Der Artikel zeigt, wie Pixelhelligkeit auf Zeichen abgebildet wird, Unicode-Braille ASCII-Art erweitert und Canvas, WebGL sowie ANSI-Terminals alles rendern.
Reaktivitätsmodelle im Vergleich: React, Vue, Angular, Svelte
Verglichen wird, wie React, Vue, Angular und Svelte Reaktivität umsetzen – von groben Render-Zyklen über Signals bis zu compiler-gesteuerten DOM-Updates.
So tippen Sie API-Antworten in TypeScript
API-Antworten in TypeScript mit Interfaces, Zod-Schemas und OpenAPI-Generierung zu typisieren verhindert Laufzeitfehler und hält Typen akkurat.
Ripple: Ein neues TypeScript-UI-Framework, das man im Auge behalten sollte
Ripple ist ein compilergesteuertes TypeScript-UI-Framework, das Virtual-DOM-Diffing und manuelles Dependency-Tracking durch reaktive Primitive eliminiert.
So implementieren Sie Drag and Drop in Svelte
Drag and Drop in Svelte gelingt mit der nativen HTML5 API oder svelte-dnd-action für Animationen, Touch-Unterstützung und Multi-Listen-Boards.
Anwendungsfälle für JavaScript-Generatoren
JavaScript-Generatoren liefern Werte bei Bedarf und eignen sich für Lazy Iteration, asynchrone Paginierung und Pipelines mit der Iterator Helpers API.
Wenn 100vh lügt: Mobile Viewport-Probleme beheben
Dieser Beitrag erklärt, wie svh, dvh und lvh sich von vh unterscheiden und wann welche Einheit für stabile Vollbild-Layouts ohne Viewport-Clipping passt.
So organisieren Sie Typdefinitionen in einem TypeScript-Projekt
TypeScript-Typdefinitionen lassen sich durch eine klare Strategie mit Inline-Dateien, gemeinsamen Verzeichnissen und Deklarationsdateien strukturiert verwalten.
MCP Apps: Interaktive Benutzeroberflächen zu KI-Konversationen hinzufügen
MCP Apps ermöglichen interaktive UI-Komponenten in KI-Konversationen. Der Artikel zeigt, wie MCP-Server mit dem ext-apps SDK Dashboards und Formulare rendern.
Eine bessere Möglichkeit, Fehler in VS Code mit Error Lens zu sehen
Error Lens blendet ESLint- und TypeScript-Diagnosen inline in VS Code ein, sodass Frontend-Entwickler Fehler schneller finden und beheben können.
Erstellen Sie Ihre erste API mit Koa
Eine REST-API mit Koa entwickeln: Routing einrichten, JSON-Bodys parsen und das Middleware-Kaskadenmodell für GET- und POST-Endpunkte nutzen.
Wann man user-select: none verwenden sollte (und wann es zur UX/Accessibility-Falle wird)
Der Beitrag zeigt, wann CSS user-select none bei interaktiven Elementen hilft und wann es Barrierefreiheit sowie Textauswahl beeinträchtigt.
So messen Sie die JavaScript-Performance
JavaScript-Performance mit DevTools, der Performance API und Core Web Vitals analysieren, Engpässe erkennen und den realen INP-Wert präzise messen.