From d33476a139ba31798103dabbe68d121eecc8124f Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Sun, 1 Jun 2025 21:20:21 +0200 Subject: [PATCH] feat: add copy text version --- high.pugrc | 207 +++++++++++++++++++++++++++++++++++++++++++++++++ low.pugrc | 207 +++++++++++++++++++++++++++++++++++++++++++++++++ original.pugrc | 207 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 621 insertions(+) create mode 100644 high.pugrc create mode 100644 low.pugrc create mode 100644 original.pugrc diff --git a/high.pugrc b/high.pugrc new file mode 100644 index 0000000..49f89df --- /dev/null +++ b/high.pugrc @@ -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" + } +} diff --git a/low.pugrc b/low.pugrc new file mode 100644 index 0000000..2634263 --- /dev/null +++ b/low.pugrc @@ -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 `
` und `` 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" + } +} diff --git a/original.pugrc b/original.pugrc new file mode 100644 index 0000000..284ec8f --- /dev/null +++ b/original.pugrc @@ -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" + } +}