dhbw/html-over-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add copy text version

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-01 21:20:21 +02:00
parent 60e393bf4a
commit d33476a139
3 changed files with 621 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
high.pugrc Normal file
View File

@@ -0,0 +1,207 @@
{
"locals": {
"t": {
"meta": {
"title": "HTML-Grundlagen: Webentwicklung mit nativen Browser-Features",
"description": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
},
"hero": {
"title": "🚀 HTML-Grundlagen",
"subtitle": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
},
"sections": {
"disclosure": {
"title": "🎯 Aufklappbare Bereiche (Details/Summary)",
"js_title": "JavaScript-Implementierung",
"js_badge": "KOMPLEX",
"js_warning": "Aufwand: Manuelle ARIA-Verwaltung, Tastatur-Events, Fokus-Management und Screen Reader Kompatibilität erforderlich.",
"js_content1": "Custom Aufklapp-Implementierungen erfordern umfassendes Event-Handling, State-Synchronisation zwischen Komponenten und sorgfältige Beachtung von Accessibility-Anforderungen inklusive ARIA-Attributen und Tastatur-Navigation.",
"js_content2": "State-Management über mehrere aufklappbare Bereiche führt zu Komplexität in Event-Koordination, Memory-Management und Performance-Optimierung, besonders bei dynamischem Content-Loading.",
"js_cons_title": "❌ Architektur-Komplexität:",
"js_cons": [
"Event-Delegation und Memory-Leak-Prävention",
"ARIA State-Synchronisation und Keyboard-Trap-Management",
"Cross-Browser-Kompatibilität und Polyfill-Anforderungen"
],
"native_title": "Native Details/Summary Elemente",
"native_badge": "ZERO-JS",
"native_note": "Plattform-Integration: Eingebaute ARIA-Semantik, Tastatur-Navigation, Screen Reader Support und browser-optimierte Animationen.",
"native_semantic_title": "Semantische HTML-Architektur",
"native_semantic_content": "Das HTML5 details/summary Pattern bietet deklarative Progressive Disclosure ohne JavaScript-Dependencies. Browser-Engines handhaben State-Management, Accessibility und User-Interaction nach Plattform-Konventionen.",
"native_enhancement_title": "Progressive Enhancement Vorteile",
"native_enhancement_content": "Start mit funktionalem HTML sorgt für graceful degradation in allen Umgebungen. CSS und JavaScript werden zu Enhancement-Layern statt funktionalen Anforderungen - verbessert Zuverlässigkeit und reduziert Technical Debt.",
"native_performance_title": "Performance-Charakteristika",
"native_performance_content": "Native Elemente eliminieren Bundle-Size-Overhead, reduzieren Runtime-Memory-Consumption und nutzen Browser-Optimierungen, die Custom Implementations nicht verfügbar sind. Hardware-Acceleration und effizientes Event-Handling sind eingebaut.",
"native_pros_title": "✅ Plattform-Vorteile:",
"native_pros": [
"Zero JavaScript Footprint mit voller Accessibility-Compliance",
"Browser-native Performance-Optimierungen und Hardware-Acceleration",
"Konsistentes Cross-Platform-Verhalten ohne Maintenance-Overhead"
]
},
"modals": {
"title": "🪟 Modal Dialog Patterns",
"js_title": "Custom Modal Implementierung",
"js_badge": "BRÜCHIG",
"js_warning": "Kritische Anforderungen: Focus-Trapping, inerte Hintergrund-Inhalte, ESC-Key-Handling, Backdrop-Click-Management und ARIA Modal-Semantik.",
"js_button": "Custom Modal starten",
"js_modal_title": "Custom Modal Architektur",
"js_modal_content": "Dieser Ansatz erfordert Modal-Stack-Management, Verhinderung von Hintergrund-Interaktion, Koordination von Focus-Management und ordnungsgemäßes Cleanup zur Vermeidung von Memory-Leaks und Accessibility-Verletzungen.",
"js_modal_issue": "Kritisches Problem: Hintergrund-Content bleibt für Screen Reader und Tastatur-Navigation ohne explizites Inert-Management zugänglich.",
"js_modal_close": "Modal schließen",
"js_cons_title": "❌ Implementierungs-Herausforderungen:",
"js_cons": [
"Focus-Trap-Implementierung und Wiederherstellungs-Komplexität",
"Modal-Stack-Management und Z-Index-Koordination",
"Event-Cleanup und Memory-Leak-Prävention"
],
"native_title": "Native Dialog Element",
"native_badge": "ROBUST",
"native_note": "Eingebaute Capabilities: Automatisches Focus-Trapping, Inert-Background-Management, ESC-Key-Support und ordnungsgemäße Modal-Semantik.",
"native_button": "Native Dialog starten",
"native_dialog_title": "Native Dialog Element",
"native_dialog_content": "Das HTML5 Dialog-Element bietet robuste Modal-Funktionalität mit automatischem Focus-Management, Backdrop-Interaction-Handling und ordnungsgemäßer Accessibility-Semantik in der Browser-Engine.",
"native_dialog_advantage": "Schlüssel-Vorteil: Hintergrund-Content wird automatisch inert, verhindert Interaktion und Screen Reader Zugriff ohne zusätzliche Implementierung.",
"native_dialog_close": "Dialog schließen",
"native_pros_title": "✅ Engine-Level Features:",
"native_pros": [
"Automatisches Focus-Trapping mit ordnungsgemäßer Wiederherstellung",
"Eingebautes ESC-Key-Handling und Backdrop-Click-Support",
"Modal-Semantik und Inert-Background-Management"
]
},
"validation": {
"title": "📝 Constraint Validation Patterns",
"js_title": "Custom Validierungs-Logik",
"js_badge": "FRAGIL",
"js_warning": "Validierungs-Komplexität: Custom Error-Messaging, Timing-Koordination, Accessibility-Announcements und Server-Client-Synchronisation.",
"js_email_label": "E-Mail-Validierung",
"js_email_error": "Ungültiges E-Mail-Format erkannt",
"js_regex_label": "Pattern-Matching (UUID)",
"js_regex_error": "UUID-Format erforderlich: 8-4-4-4-12 Hex-Ziffern",
"js_submit": "Formular validieren",
"js_cons_title": "❌ Validierungs-Brüchigkeit:",
"js_cons": [
"Regex-Patterns verpassen Edge Cases und Internationalisierung",
"Error-Timing und Accessibility-Announcement-Koordination",
"Client-Server-Validierungs-Drift und Synchronisations-Issues"
],
"native_title": "Constraint Validation API",
"native_badge": "SPEC-KONFORM",
"native_note": "Standards-basiert: Automatische Error-Announcements, internationalisierte Messages und CSS-Pseudo-Class-Integration.",
"native_email_label": "E-Mail-Validierung",
"native_email_placeholder": "entwickler@beispiel.org",
"native_uuid_label": "UUID Pattern",
"native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
"native_uuid_title": "Gib ein gültiges UUID-Format ein (z.B. 550e8400-e29b-41d4-a716-446655440000)",
"native_api_label": "API Endpoint URL",
"native_api_placeholder": "https://api.beispiel.org/v1",
"native_submit": "Formular absenden",
"native_pros_title": "✅ Spezifikations-Konformität:",
"native_pros": [
"RFC-konforme Validierungs-Pattern mit Internationalisierung",
"Automatische Error-Messages in der bevorzugten Sprache des Users",
"CSS-Pseudo-Classes (:valid, :invalid) für Styling-Integration"
]
},
"progress": {
"title": "📊 Progress Indication Patterns",
"js_title": "Custom Progress Implementierung",
"js_badge": "SEMANTIK-LEER",
"js_warning": "Accessibility-Gap: Keine semantische Bedeutung ohne explizite ARIA-Implementierung und Screen Reader Progress-Announcements.",
"js_text": "Build-Progress:",
"js_button": "Build-Prozess starten",
"js_cons_title": "❌ Semantische Limitierungen:",
"js_cons": [
"Keine inhärente semantische Bedeutung für Assistive Technologies",
"Manuelles ARIA Live-Region-Management für Progress-Updates",
"Custom Animation-Performance und Value-Interpolation"
],
"native_title": "Native Progress Element",
"native_badge": "SEMANTISCH",
"native_note": "Semantische Integration: Eingebaute Progress-Role, automatische ARIA-Value-Announcements und Indeterminate-State-Support.",
"native_compilation": "Kompilierungs-Progress",
"native_compilation_text": "75% vollständig",
"native_indeterminate": "Unbestimmte Operation (wird verarbeitet)",
"native_indeterminate_text": "Verarbeite Dependencies...",
"native_dynamic": "Dynamischer Progress:",
"native_button": "Prozess starten",
"native_pros_title": "✅ Semantische Vorteile:",
"native_pros": [
"Eingebaute Progress-Role mit automatischen Value-Announcements",
"Indeterminate-State-Support für Operations unbekannter Dauer",
"Plattform-optimiertes Rendering und Animation-Performance"
]
},
"temporal": {
"title": "📅 Temporal Input Patterns",
"js_title": "Custom Date Picker",
"js_badge": "SCHWERGEWICHTIG",
"js_warning": "Implementierungs-Umfang: Kalender-Widget-Architektur, Tastatur-Navigation, Internationalisierung, Timezone-Handling und Mobile-Touch-Optimierung.",
"js_label": "Deployment-Datum (Custom)",
"js_placeholder": "JJJJ-MM-TT",
"js_picker_content": "[Kalender-Widget-Implementierung]\nBenötigt: Date-Manipulation-Library, Internationalisierung,\nTastatur-Navigation, Mobile-Gesture-Handling,\nTimezone-Berechnungen, Accessibility-Compliance.",
"js_cons_title": "❌ Implementierungs-Overhead:",
"js_cons": [
"Große JavaScript-Libraries und komplexe Kalender-Logik",
"Mobile-UX-Inkonsistenz mit Plattform-Date-Pickern",
"Internationalisierungs-Komplexität und Timezone-Edge-Cases"
],
"native_title": "Native Temporal Inputs",
"native_badge": "PLATTFORM-NATIV",
"native_note": "OS-Integration: Plattform-konsistente UI, automatische Tastatur-Navigation, eingebaute Validierung und Internationalisierungs-Support.",
"native_release_label": "Release-Datum",
"native_timestamp_label": "Build-Timestamp",
"native_window_label": "Deployment-Fenster",
"native_pros_title": "✅ Plattform-Integration:",
"native_pros": [
"Zero-Bundle-Impact mit nativer OS-Picker-Integration",
"Automatische Validierung und Internationalisierungs-Support",
"Konsistente UX entsprechend Plattform-Konventionen"
]
},
"autocomplete": {
"title": "🔍 Autocomplete Patterns",
"js_title": "Custom Autocomplete",
"js_badge": "INTERAKTIONS-SCHWER",
"js_warning": "Interaktions-Komplexität: Dropdown-Positionierung, Tastatur-Navigation, ARIA-Combobox-Implementierung und Mobile-Touch-Handling.",
"js_label": "Framework-Suche (Custom)",
"js_placeholder": "Framework-Name eingeben...",
"js_cons_title": "❌ Interaktions-Management:",
"js_cons": [
"Komplexe ARIA-Combobox-Implementierung und State-Management",
"Dropdown-Positionierung und Viewport-Kollisions-Erkennung",
"Mobile-Keyboard-Optimierung und Touch-Event-Handling"
],
"native_title": "Native Datalist Element",
"native_badge": "ZERO-CONFIG",
"native_note": "Native Combobox: Eingebaute ARIA-Combobox-Semantik, Tastatur-Navigation und plattform-konsistente Interaktions-Pattern.",
"native_framework_label": "JavaScript Framework",
"native_framework_placeholder": "Framework auswählen oder eingeben...",
"native_language_label": "Programmiersprache",
"native_language_placeholder": "Sprache auswählen...",
"native_pros_title": "✅ Zero-Configuration Vorteile:",
"native_pros": [
"Native Combobox-Semantik mit automatischem ARIA-Support",
"Plattform-konsistente Tastatur- und Interaktions-Pattern",
"Formular-Validierungs-Integration und graceful Degradation"
]
}
},
"summary": {
"title": "HTML-First Development",
"content": "Native HTML-Elemente repräsentieren Jahre von Browser-Engineering, Accessibility-Forschung und Web-Standards-Evolution. Sie bieten robuste Funktionalität mit minimalem Implementierungs-Overhead und maximaler Kompatibilität.",
"approach_title": "Der Progressive Enhancement Ansatz:",
"approach_items": [
"Baue mit semantischem HTML, das universell funktioniert",
"Verbessere das visuelle Design durch CSS ohne Funktionalitäts-Brüche",
"Schichte JavaScript für komplexe Interaktionen, wo native Capabilities unzureichend sind"
],
"closing": "Nutze Browser-Engines statt ihre Funktionalität zu reimplementieren. Deine Codebase wird wartbarer, deine User haben bessere Experiences.",
"quote": "Die anspruchsvollste Architektur ist oft die, die existierende, gut getestete Komponenten nutzt. Native HTML-Elemente bieten Jahrzehnte von Optimierung und Accessibility-Engineering—baue auf diesem Fundament auf, nicht darum herum."
}
},
"lang": "de",
"dir": "ltr"
}
}

207
low.pugrc Normal file
View File

@@ -0,0 +1,207 @@
{
"locals": {
"t": {
"meta": {
"title": "HTML-Grundlagen für Einsteiger: Browser können schon alles",
"description": "Entdecke, warum Browser bereits fertige Lösungen für deine Web-Projekte haben. Lerne, wie du mit einfachem HTML professionelle Websites baust, ohne komplizierte Programmierung."
},
"hero": {
"title": "🌐 HTML für Einsteiger",
"subtitle": "Entdecke, warum Browser bereits fertige Lösungen für deine Web-Projekte haben. Lerne, wie du mit einfachem HTML professionelle Websites baust, ohne komplizierte Programmierung."
},
"sections": {
"disclosure": {
"title": "📖 Aufklappbare Texte",
"js_title": "Komplizierte Lösung",
"js_badge": "SCHWIERIG",
"js_warning": "Problem: Du musst viel Programmieren und an viele Dinge denken - Tastatur-Bedienung, Hilfen für Menschen mit Behinderungen, verschiedene Browser.",
"js_content1": "Wenn du selbst aufklappbare Bereiche programmierst, musst du daran denken: Wie reagiert es auf Klicks? Wie bedient man es mit der Tastatur? Können blinde Menschen es benutzen? Das ist sehr viel Arbeit.",
"js_content2": "Und wenn du mehrere aufklappbare Bereiche hast, wird es noch komplizierter. Du musst aufpassen, dass sie sich nicht gegenseitig stören.",
"js_cons_title": "❌ Warum das schwierig ist:",
"js_cons": [
"Du musst viel programmieren und testen",
"Funktioniert nicht in allen Browsern gleich",
"Menschen mit Behinderungen können es nicht benutzen"
],
"native_title": "Einfache Browser-Lösung",
"native_badge": "FERTIG",
"native_note": "Gut zu wissen: Browser haben das schon eingebaut. Funktioniert überall, für alle Menschen, ohne Programmierung.",
"native_semantic_title": "So einfach geht's",
"native_semantic_content": "Mit HTML-Tags `<details>` und `<summary>` machst du aufklappbare Bereiche. Der Browser macht alles automatisch: Klick-Verhalten, Tastatur-Bedienung, Hilfen für Screen Reader.",
"native_enhancement_title": "Warum das clever ist",
"native_enhancement_content": "Deine Website funktioniert immer - auch wenn JavaScript ausgeschaltet ist oder langsam lädt. Das ist wie ein Auto mit Reserverad: Du kommst immer ans Ziel.",
"native_performance_title": "Schneller und sparsamer",
"native_performance_content": "Browser-eigene Lösungen sind optimiert und schnell. Deine Website lädt schneller und braucht weniger Speicher. Das ist gut für langsamere Geräte und schont den Akku.",
"native_pros_title": "✅ Vorteile der Browser-Lösung:",
"native_pros": [
"Funktioniert sofort, ohne Programmierung",
"Ist für alle Menschen zugänglich",
"Läuft schnell und zuverlässig"
]
},
"modals": {
"title": "💬 Pop-up Fenster",
"js_title": "Selbst gebaute Pop-ups",
"js_badge": "FEHLERANFÄLLIG",
"js_warning": "Achtung: Pop-ups richtig zu machen ist schwer - du musst den Hintergrund blockieren, die Tastatur-Bedienung programmieren und an Barrierefreiheit denken.",
"js_button": "Eigenes Pop-up öffnen",
"js_modal_title": "Selbstgebautes Pop-up",
"js_modal_content": "Dieses Pop-up wurde selbst programmiert. Das bedeutet: Jemand musste dafür sorgen, dass der Hintergrund nicht mehr bedienbar ist, dass man es mit ESC schließen kann, und dass Screen Reader es richtig vorlesen.",
"js_modal_issue": "Problem: Oft vergisst man wichtige Details, und dann können manche Menschen das Pop-up nicht richtig benutzen.",
"js_modal_close": "Schließen",
"js_cons_title": "❌ Probleme bei eigenen Pop-ups:",
"js_cons": [
"Man kann aus Versehen noch den Hintergrund bedienen",
"Komplizierte Programmierung für Tastatur-Navigation",
"Funktioniert oft nicht für Menschen mit Behinderungen"
],
"native_title": "Browser-eigene Dialoge",
"native_badge": "SICHER",
"native_note": "Besser so: Browser haben eingebaute Dialog-Fenster, die automatisch alles richtig machen - Hintergrund blockieren, ESC-Taste, Accessibility.",
"native_button": "Browser-Dialog öffnen",
"native_dialog_title": "Browser-eigener Dialog",
"native_dialog_content": "Dieser Dialog nutzt die eingebaute Browser-Funktionalität. Der Browser sorgt automatisch dafür, dass alles korrekt funktioniert - auch für Menschen, die das Internet anders nutzen.",
"native_dialog_advantage": "Der große Vorteil: Du musst nichts programmieren, und es funktioniert trotzdem perfekt für alle.",
"native_dialog_close": "Dialog schließen",
"native_pros_title": "✅ Browser-Dialog Vorteile:",
"native_pros": [
"Hintergrund wird automatisch blockiert",
"ESC-Taste funktioniert von selbst",
"Perfekt für alle Menschen zugänglich"
]
},
"validation": {
"title": "✅ Eingabe-Prüfung",
"js_title": "Selbst programmierte Prüfung",
"js_badge": "FEHLERTRÄCHTIG",
"js_warning": "Schwierigkeit: Eingaben zu prüfen ist kompliziert - du musst alle möglichen Fehler bedenken und Fehlermeldungen in verschiedenen Sprachen schreiben.",
"js_email_label": "E-Mail prüfen (selbst gemacht)",
"js_email_error": "Diese E-Mail-Adresse ist falsch",
"js_regex_label": "Spezielle Codes prüfen",
"js_regex_error": "Der Code muss das Format haben: 8-4-4-4-12 Zeichen",
"js_submit": "Eingabe prüfen",
"js_cons_title": "❌ Probleme bei eigener Prüfung:",
"js_cons": [
"Du vergisst oft seltene, aber gültige Eingaben",
"Fehlermeldungen sind nur auf Deutsch",
"Unterschiede zwischen dem, was deine Website und der Server als richtig ansehen"
],
"native_title": "Browser-eigene Prüfung",
"native_badge": "INTERNATIONAL",
"native_note": "Cleverer: Browser kennen die offiziellen Regeln für E-Mails, Daten etc. und prüfen automatisch in der Sprache des Benutzers.",
"native_email_label": "E-Mail-Adresse",
"native_email_placeholder": "name@beispiel.de",
"native_uuid_label": "System-Code",
"native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
"native_uuid_title": "Gib einen gültigen System-Code ein (Format: 550e8400-e29b-41d4-a716-446655440000)",
"native_api_label": "Website-Adresse",
"native_api_placeholder": "https://meine-website.de",
"native_submit": "Absenden",
"native_pros_title": "✅ Browser-Prüfung Vorteile:",
"native_pros": [
"Kennt internationale Standards und seltene Fälle",
"Fehlermeldungen in der Sprache des Benutzers",
"Funktioniert auch ohne Internet-Verbindung"
]
},
"progress": {
"title": "📈 Fortschritts-Anzeigen",
"js_title": "Selbst gebaute Anzeige",
"js_badge": "STUMM",
"js_warning": "Problem: Selbstgemachte Fortschritts-Balken sind für Screen Reader unsichtbar - blinde Menschen wissen nicht, was passiert.",
"js_text": "Fortschritt:",
"js_button": "Prozess starten",
"js_cons_title": "❌ Probleme eigener Anzeigen:",
"js_cons": [
"Screen Reader können den Fortschritt nicht vorlesen",
"Du musst selbst dafür sorgen, dass Updates angesagt werden",
"Sieht in jedem Browser anders aus"
],
"native_title": "Browser-eigene Fortschritts-Anzeige",
"native_badge": "SPRECHEND",
"native_note": "Besser: Browser haben eingebaute Fortschritts-Elemente, die automatisch den aktuellen Stand ansagen und für alle sichtbar sind.",
"native_compilation": "Website wird erstellt",
"native_compilation_text": "75% fertig",
"native_indeterminate": "Unbestimmter Vorgang",
"native_indeterminate_text": "Daten werden verarbeitet...",
"native_dynamic": "Dynamischer Fortschritt:",
"native_button": "Vorgang starten",
"native_pros_title": "✅ Browser-Anzeige Vorteile:",
"native_pros": [
"Screen Reader sagen automatisch den Fortschritt an",
"Funktioniert auch bei unbekannter Dauer",
"Sieht auf jedem Gerät richtig aus"
]
},
"temporal": {
"title": "📅 Datum und Zeit eingeben",
"js_title": "Selbst gebauter Kalender",
"js_badge": "RIESIG",
"js_warning": "Aufwand: Einen Kalender zu programmieren ist sehr viel Arbeit - verschiedene Sprachen, Zeitzonen, Touch-Bedienung, und das alles für alle Geräte.",
"js_label": "Datum auswählen (selbst gemacht)",
"js_placeholder": "TT.MM.JJJJ",
"js_picker_content": "[Hier wäre ein selbstgebauter Kalender]\nBraucht: Programmierung für Kalender-Ansicht,\nTouch-Bedienung, verschiedene Sprachen,\nZeitzonen, verschiedene Handys und Tablets.",
"js_cons_title": "❌ Probleme eigener Kalender:",
"js_cons": [
"Sehr viel Programmier-Aufwand und große Dateien",
"Sieht auf Handys anders aus als gewohnt",
"Schwierig für verschiedene Länder und Zeitzonen"
],
"native_title": "System-eigene Datum-Auswahl",
"native_badge": "GEWOHNT",
"native_note": "Einfacher: Jedes Gerät hat schon Datum-Picker eingebaut. Die kennen die Nutzer schon und sind in ihrer Sprache.",
"native_release_label": "Veröffentlichungs-Datum",
"native_timestamp_label": "Zeitstempel",
"native_window_label": "Zeitraum",
"native_pros_title": "✅ System-Picker Vorteile:",
"native_pros": [
"Keine zusätzlichen Downloads nötig",
"Sieht aus wie gewohnt auf jedem Gerät",
"Automatisch in der richtigen Sprache und Zeitzone"
]
},
"autocomplete": {
"title": "🔍 Auto-Vervollständigung",
"js_title": "Selbst programmierte Vorschläge",
"js_badge": "KOMPLIZIERT",
"js_warning": "Herausforderung: Dropdown-Listen mit Vorschlägen zu bauen ist schwer - Positionierung, Tastatur-Navigation, Touch-Bedienung auf Handys.",
"js_label": "Suche (selbst gemacht)",
"js_placeholder": "Tippe um zu suchen...",
"js_cons_title": "❌ Schwierigkeiten eigener Vorschläge:",
"js_cons": [
"Komplizierte Programmierung für Tastatur-Bedienung",
"Dropdown muss richtig positioniert werden",
"Schwierig auf Touch-Geräten zu bedienen"
],
"native_title": "Browser-eigene Vorschläge",
"native_badge": "EINFACH",
"native_note": "Praktisch: Browser haben eingebaute Vorschlag-Listen, die automatisch richtig funktionieren - auch mit Tastatur und auf Touch-Geräten.",
"native_framework_label": "Website-Framework",
"native_framework_placeholder": "Wähle oder tippe...",
"native_language_label": "Programmier-Sprache",
"native_language_placeholder": "Sprache auswählen...",
"native_pros_title": "✅ Browser-Vorschläge Vorteile:",
"native_pros": [
"Funktioniert automatisch mit Tastatur und Touch",
"Sieht aus wie andere bekannte Eingabe-Felder",
"Arbeitet gut mit Formular-Prüfung zusammen"
]
}
},
"summary": {
"title": "Browser sind deine Freunde",
"content": "Browser sind wie gut ausgestattete Werkzeugkästen. Sie enthalten bereits Lösungen für die meisten Aufgaben beim Website-Bau. Diese Lösungen sind getestet, funktionieren überall und sind für alle Menschen zugänglich.",
"approach_title": "So baust du clevere Websites:",
"approach_items": [
"Nutze zuerst, was der Browser schon kann",
"Mache es hübsch mit Design (CSS)",
"Füge nur bei Bedarf eigene Programmierung hinzu"
],
"closing": "Warum das Rad neu erfinden? Browser-Entwickler haben Jahre daran gearbeitet, dass alles perfekt funktioniert. Nutze diese Arbeit für deine Projekte.",
"quote": "Die beste Lösung ist oft die einfachste. Browser bieten jahrelang erprobte Funktionen - baue darauf auf, statt alles selbst zu machen."
}
},
"lang": "de",
"dir": "ltr"
}
}

207
original.pugrc Normal file
View File

@@ -0,0 +1,207 @@
{
"locals": {
"t": {
"meta": {
"title": "HTML Fundamentals: Building with Native HTML",
"description": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
},
"hero": {
"title": "🚀 HTML Fundamentals",
"subtitle": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
},
"sections": {
"disclosure": {
"title": "🎯 Details/Summary Patterns",
"js_title": "JavaScript-Dependent Implementation",
"js_badge": "COMPLEX",
"js_warning": "Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.",
"js_content1": "Custom collapsible implementations require comprehensive event handling, state synchronization across components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard navigation patterns.",
"js_content2": "Managing state across multiple collapsible sections introduces complexity in event coordination, memory management, and performance optimization, particularly when dealing with dynamic content loading.",
"js_cons_title": "❌ Architecture Complexity:",
"js_cons": [
"Event delegation and memory leak prevention",
"ARIA state synchronization and keyboard trap management",
"Cross-browser compatibility and polyfill requirements"
],
"native_title": "Native Details/Summary Elements",
"native_badge": "ZERO-JS",
"native_note": "Platform Integration: Built-in ARIA semantics, keyboard navigation, screen reader support, and browser-optimized animations.",
"native_semantic_title": "Semantic HTML Architecture",
"native_semantic_content": "The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies. Browser engines handle state management, accessibility, and user interaction patterns according to platform conventions.",
"native_enhancement_title": "Progressive Enhancement Benefits",
"native_enhancement_content": "Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become enhancement layers rather than functional requirements, improving reliability and reducing technical debt.",
"native_performance_title": "Performance Characteristics",
"native_performance_content": "Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come built-in.",
"native_pros_title": "✅ Platform Advantages:",
"native_pros": [
"Zero JavaScript footprint with full accessibility compliance",
"Browser-native performance optimizations and hardware acceleration",
"Consistent cross-platform behavior with no maintenance overhead"
]
},
"modals": {
"title": "🪟 Modal Dialog Patterns",
"js_title": "Custom Modal Implementation",
"js_badge": "BRITTLE",
"js_warning": "Critical Requirements: Focus trapping, inert background content, ESC key handling, backdrop click management, and ARIA modal semantics.",
"js_button": "Launch Custom Modal",
"js_modal_title": "Custom Modal Architecture",
"js_modal_content": "This approach requires managing the modal stack, preventing background interaction, coordinating focus management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.",
"js_modal_issue": "Critical Issue: Background content remains accessible to screen readers and keyboard navigation without explicit inert management.",
"js_modal_close": "Close Modal",
"js_cons_title": "❌ Implementation Challenges:",
"js_cons": [
"Focus trap implementation and restoration complexity",
"Modal stack management and z-index coordination",
"Event cleanup and memory leak prevention"
],
"native_title": "Native Dialog Element",
"native_badge": "ROBUST",
"native_note": "Built-in Capabilities: Automatic focus trapping, inert background management, ESC key support, and proper modal semantics.",
"native_button": "Launch Native Dialog",
"native_dialog_title": "Native Dialog Element",
"native_dialog_content": "The HTML5 dialog element provides robust modal functionality with automatic focus management, backdrop interaction handling, and proper accessibility semantics built into the browser engine.",
"native_dialog_advantage": "Key Advantage: Background content becomes automatically inert, preventing interaction and screen reader access without additional implementation.",
"native_dialog_close": "Close Dialog",
"native_pros_title": "✅ Engine-Level Features:",
"native_pros": [
"Automatic focus trapping with proper restoration",
"Built-in ESC key handling and backdrop click support",
"Modal semantics and inert background management"
]
},
"validation": {
"title": "📝 Constraint Validation Patterns",
"js_title": "Custom Validation Logic",
"js_badge": "FRAGILE",
"js_warning": "Validation Complexity: Custom error messaging, timing coordination, accessibility announcements, and server-client synchronization.",
"js_email_label": "Email Validation",
"js_email_error": "Invalid email format detected",
"js_regex_label": "Pattern Matching (UUID)",
"js_regex_error": "UUID format required: 8-4-4-4-12 hex digits",
"js_submit": "Validate Form",
"js_cons_title": "❌ Validation Brittleness:",
"js_cons": [
"Regex patterns miss edge cases and internationalization",
"Error timing and accessibility announcement coordination",
"Client-server validation drift and synchronization issues"
],
"native_title": "Constraint Validation API",
"native_badge": "SPEC-COMPLIANT",
"native_note": "Standards-Based: Automatic error announcements, internationalized messages, and CSS pseudo-class integration.",
"native_email_label": "Email Validation",
"native_email_placeholder": "developer@example.org",
"native_uuid_label": "UUID Pattern",
"native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
"native_uuid_title": "Enter a valid UUID format (e.g., 550e8400-e29b-41d4-a716-446655440000)",
"native_api_label": "API Endpoint URL",
"native_api_placeholder": "https://api.example.org/v1",
"native_submit": "Submit Form",
"native_pros_title": "✅ Specification Compliance:",
"native_pros": [
"RFC-compliant validation patterns with internationalization",
"Automatic error messaging in user's preferred language",
"CSS pseudo-classes (:valid, :invalid) for styling integration"
]
},
"progress": {
"title": "📊 Progress Indication Patterns",
"js_title": "Custom Progress Implementation",
"js_badge": "SEMANTIC-VOID",
"js_warning": "Accessibility Gap: No semantic meaning without explicit ARIA implementation and screen reader progress announcements.",
"js_text": "Build Progress:",
"js_button": "Start Build Process",
"js_cons_title": "❌ Semantic Limitations:",
"js_cons": [
"No inherent semantic meaning for assistive technologies",
"Manual ARIA live region management for progress updates",
"Custom animation performance and value interpolation"
],
"native_title": "Native Progress Element",
"native_badge": "SEMANTIC",
"native_note": "Semantic Integration: Built-in progress role, automatic ARIA value announcements, and indeterminate state support.",
"native_compilation": "Compilation Progress",
"native_compilation_text": "75% complete",
"native_indeterminate": "Indeterminate Operation (processing)",
"native_indeterminate_text": "Processing dependencies...",
"native_dynamic": "Dynamic Progress:",
"native_button": "Start Process",
"native_pros_title": "✅ Semantic Advantages:",
"native_pros": [
"Built-in progress role with automatic value announcements",
"Indeterminate state support for unknown duration operations",
"Platform-optimized rendering and animation performance"
]
},
"temporal": {
"title": "📅 Temporal Input Patterns",
"js_title": "Custom Date Picker",
"js_badge": "HEAVYWEIGHT",
"js_warning": "Implementation Scope: Calendar widget architecture, keyboard navigation, internationalization, timezone handling, and mobile touch optimization.",
"js_label": "Deployment Date (Custom)",
"js_placeholder": "YYYY-MM-DD",
"js_picker_content": "[Calendar widget implementation]\nRequires: Date manipulation library, internationalization,\nkeyboard navigation, mobile gesture handling,\ntimezone calculations, accessibility compliance.",
"js_cons_title": "❌ Implementation Overhead:",
"js_cons": [
"Large JavaScript libraries and complex calendar logic",
"Mobile UX inconsistency with platform date pickers",
"Internationalization complexity and timezone edge cases"
],
"native_title": "Native Temporal Inputs",
"native_badge": "PLATFORM-NATIVE",
"native_note": "OS Integration: Platform-consistent UI, automatic keyboard navigation, built-in validation, and internationalization support.",
"native_release_label": "Release Date",
"native_timestamp_label": "Build Timestamp",
"native_window_label": "Deployment Window",
"native_pros_title": "✅ Platform Integration:",
"native_pros": [
"Zero-bundle impact with native OS picker integration",
"Automatic validation and internationalization support",
"Consistent UX aligned with platform conventions"
]
},
"autocomplete": {
"title": "🔍 Autocomplete Patterns",
"js_title": "Custom Autocomplete",
"js_badge": "INTERACTION-HEAVY",
"js_warning": "Interaction Complexity: Dropdown positioning, keyboard navigation, ARIA combobox implementation, and mobile touch handling.",
"js_label": "Framework Search (Custom)",
"js_placeholder": "Type framework name...",
"js_cons_title": "❌ Interaction Management:",
"js_cons": [
"Complex ARIA combobox implementation and state management",
"Dropdown positioning and viewport collision detection",
"Mobile keyboard optimization and touch event handling"
],
"native_title": "Native Datalist Element",
"native_badge": "ZERO-CONFIG",
"native_note": "Native Combobox: Built-in ARIA combobox semantics, keyboard navigation, and platform-consistent interaction patterns.",
"native_framework_label": "JavaScript Framework",
"native_framework_placeholder": "Select or type framework...",
"native_language_label": "Programming Language",
"native_language_placeholder": "Choose language...",
"native_pros_title": "✅ Zero-Configuration Benefits:",
"native_pros": [
"Native combobox semantics with automatic ARIA support",
"Platform-consistent keyboard and interaction patterns",
"Form validation integration and graceful degradation"
]
}
},
"summary": {
"title": "HTML-First Development",
"content": "Native HTML elements represent years of browser engineering, accessibility research, and web standards evolution. They provide robust functionality with minimal implementation overhead and maximum compatibility.",
"approach_title": "The Progressive Enhancement Approach:",
"approach_items": [
"Build with semantic HTML that functions universally",
"Enhance visual design through CSS without breaking functionality",
"Layer JavaScript for complex interactions where native capabilities are insufficient"
],
"closing": "Leverage browser engines rather than reimplementing their functionality. Your codebase will be more maintainable, your users will have better experiences.",
"quote": "The most sophisticated architecture is often the one that uses existing, well-tested components. Native HTML elements provide decades of optimization and accessibility engineering—build upon this foundation rather than around it."
}
},
"lang": "en",
"dir": "ltr"
}
}