Aus dem OpenReplay Blog
Eine Schnellanleitung zur Lokalisierung einer Astro-Website
Astro i18n-Routing konfigurieren, Locale-Ordner strukturieren und UI-Strings mit Paraglide verwalten – für eine produktionsreife mehrsprachige Astro-Website.
Live Browser Preview in VS Code: Eine Kurzanleitung
Microsoft Live Preview und Live Server für VS Code im Vergleich, Live Browser Reloading einrichten und häufige Workspace-Pfadfehler beheben.
5 moderne CSS-Features, die jeder Entwickler kennen sollte
Container Queries, Cascade Layers, CSS Custom Properties und der has-Selektor ermöglichen responsives, wartbares CSS ohne den Einsatz von Frameworks.
Erkennung von Elementen im Viewport mit Intersection Observer
Die Intersection Observer API ersetzt Scroll-Events und erkennt Elementsichtbarkeit für Lazy Loading, Animationen und Video-Autoplay effizient.
Vergleich von 11ty und WordPress für moderne Webprojekte
Eleventy und WordPress im Vergleich nach Performance, Sicherheit und Kosten – für die Wahl der passenden statischen oder dynamischen Architektur.
Moderne SVG-Animationstechniken
CSS-Animationen, GSAP und die Web Animations API im Vergleich für performante, barrierefreie SVG-Animationen mit optimierten Pfaden und Element-Reuse.
Formularvalidierung leicht gemacht mit htmx
Formulare mit htmx sauber umsetzen: HTML5-Validierungsattribute und serverseitiges Inline-Feedback kombinieren, ohne viel JavaScript schreiben zu müssen.
Barrierefreie Popovers mit modernem CSS & JS erstellen
Dieser Beitrag zeigt, wie die native Popover API, CSS-Positionierung und ARIA-Attribute Tastaturnavigation und Fokus-Management in Popovers ermöglichen.
KI-Browser und die Zukunft der Webentwicklung
KI-fähige Webseiten mit semantischem HTML und Schema.org-Markup helfen KI-Browsern wie Comet und Edge Copilot, Inhalte effektiv zu analysieren.
Storybook: Bessere UI-Dokumentation erstellen
Storybook ermöglicht lebendige UI-Dokumentation mit Autodocs, MDX und Controls, die Komponentendoks automatisch mit der Codebasis synchronisiert hält.
Zeilenlänge in CSS kontrollieren für bessere Lesbarkeit
Zeilenlängen in CSS mit ch-Einheiten, clamp() und Container Queries steuern, um Lesbarkeit und Barrierefreiheit für verschiedene Zielgruppen zu verbessern.
Dark Mode zu Ihrer Website mit Tailwind hinzufügen
Dark Mode per Tailwind CSS dark-Variante einbinden, mit Systempräferenzen, manuellen Toggles und localStorage-Persistenz für Nutzereinstellungen.
Reverse Proxy Server für Webentwickler erklärt
Reverse Proxies wie Nginx, Caddy und Traefik leiten Traffic weiter, übernehmen HTTPS-Terminierung und stellen React- und Node.js-Apps unter einer Domain bereit.
Core Web Vitals: So optimieren Sie LCP
Langsame LCP-Werte lassen sich durch Optimierung von TTFB, Ressourcenerkennung, Ladezeit und Render-Blocking via CDN-Caching und Image-Preload beheben.
Git Rebase für Einsteiger: Eine einfache Einführung
Git Rebase spielt Commits auf Zielbranches ab für eine lineare History. Der Beitrag zeigt interaktives Squashing und Force-Push für Feature-Branches.
Automatisierung von Code-Prüfungen mit Git Pre-Commit Hooks
Git Pre-Commit Hooks mit ESLint, Prettier und Black fangen Formatierungs- und Linting-Fehler vor jedem Commit ab, eingerichtet über das pre-commit Framework.
Erste Schritte mit Googles Gemini CLI
Gemini CLI installieren, per Google-Konto authentifizieren und Terminal-Befehle nutzen, um Codebasen zu erkunden, Tests zu generieren und Code zu refaktorieren.
Ghostty: Ein modernes Terminal für Entwickler
Ghostty im Vergleich: GPU-Beschleunigung, GTK4-Unterstützung, integriertes Multiplexing und Sitzungspersistenz verbessern den Entwickler-Workflow nachhaltig.
JavaScript Pipeline Operator und seine Bedeutung
Der JavaScript Pipeline Operator wandelt verschachtelte Funktionsaufrufe in linearen, lesbaren Code um, und Babel ermöglicht dessen Einsatz bereits heute.
Erweiterte GitHub Copilot-Funktionen, die Sie ausprobieren sollten
Erweiterte GitHub Copilot-Funktionen wie Multi-File-Edits, Agenten, Slash-Befehle und Spracheingabe verändern, wie Entwickler Code schreiben und pflegen.
CSS Anchor Positioning erklärt
CSS Anchor Positioning bindet Tooltips, Dropdowns und Popovers per reinem CSS an Elemente und macht JavaScript-Positionsberechnungen vollständig überflüssig.
Verwendung von Priority Hints mit fetchpriority für die Performance
fetchpriority und Priority Hints steuern die Ladereihenfolge von Ressourcen, verbessern LCP-Werte und optimieren Core Web Vitals in modernen Browsern.
Die Device Orientation API verstehen
Bewegungsgesteuerte Web-Apps mit der Device Orientation API, Alpha-Beta-Gamma-Achsen, Gyroskopdaten und iOS-Berechtigungshandling für mobile Browser entwickeln.
Verwendung von Top-Level Await in modernem JavaScript
Top-Level Await in ES-Modulen ersetzt async IIFE-Workarounds und beeinflusst Modulausführung, dynamische Imports und zirkuläre Abhängigkeiten in JavaScript.