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

feat: change tone of copy text

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-01 19:43:09 +02:00
parent b76fcc515e
commit c3458a7ade
1 changed files with 240 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

612
index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>The Complete Native HTML Dominance Guide</title> <title>Web Platform Fundamentals: Building with Native HTML</title>
<style> <style>
:root { :root {
--color-bg: #ffffff; --color-bg: #ffffff;
@@ -651,89 +651,95 @@
<body class="search_plugin_added"> <body class="search_plugin_added">
<div class="hero"> <div class="hero">
<h1>🚀 No more (JS) Drama</h1> <h1>🚀 Web Platform Fundamentals</h1>
<p class="subtitle">Discover the power of semantic HTML and native browser features. This guide shows you how to build <p class="subtitle">Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how
accessible, performant interfaces using the web platform's built-in components with progressive enhancement.</p> leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable
codebases.</p>
</div> </div>
<!-- COLLAPSIBLES --> <!-- COLLAPSIBLES -->
<div class="section"> <div class="section">
<h2 class="section-title">🎯 Collapsible Content</h2> <h2 class="section-title">🎯 Progressive Disclosure Patterns</h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="column bad"> <div class="column bad">
<h3>Custom Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3> <h3>JavaScript-Dependent Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Accessibility:</strong> Requires manual ARIA, keyboard nav, and screen reader support. <strong>⚠️ Implementation Overhead:</strong> Manual ARIA state management, keyboard event handling, focus
management, and screen reader compatibility.
</div> </div>
<div class="js-wrapper"> <div class="js-wrapper">
<div class="js-content" id="content1"> <div class="js-content" id="content1">
Web accessibility ensures that websites work for people with disabilities. Custom implementations need careful Custom collapsible implementations require comprehensive event handling, state synchronization across
attention to accessibility requirements. components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard
navigation patterns.
</div> </div>
<button class="js-collapsible" onclick="toggleContent('content1')"> <button class="js-collapsible" onclick="toggleContent('content1')">
What is Web Accessibility? Custom Collapsible Architecture
</button> </button>
</div> </div>
<div class="js-wrapper"> <div class="js-wrapper">
<div class="js-content" id="content2"> <div class="js-content" id="content2">
WCAG provides the framework for accessible web content. Following these guidelines ensures your content works Managing state across multiple collapsible sections introduces complexity in event coordination, memory
for assistive technologies. management, and performance optimization, particularly when dealing with dynamic content loading.
</div> </div>
<button class="js-collapsible" onclick="toggleContent('content2')"> <button class="js-collapsible" onclick="toggleContent('content2')">
Why WCAG Guidelines Matter State Management Challenges
</button> </button>
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="cons">❌ Implementation Challenges:</h4> <h4 class="cons">❌ Architecture Complexity:</h4>
<ul> <ul>
<li>Manual ARIA attributes and keyboard navigation</li> <li>Event delegation and memory leak prevention</li>
<li>JavaScript dependency affects reliability</li> <li>ARIA state synchronization and keyboard trap management</li>
<li>State management and performance overhead</li> <li>Cross-browser compatibility and polyfill requirements</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="column good"> <div class="column good">
<h3>Native HTML Elements <span class="perf-indicator perf-fast">BUILT-IN</span></h3> <h3>Native Details/Summary Elements <span class="perf-indicator perf-fast">ZERO-JS</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Built-in:</strong> ARIA support, keyboard navigation, screen reader compatibility work automatically. <strong>🎯 Platform Integration:</strong> Built-in ARIA semantics, keyboard navigation, screen reader support,
and browser-optimized animations.
</div> </div>
<details name="a11y"> <details name="architecture">
<summary>What is Web Accessibility?</summary> <summary>Semantic HTML Architecture</summary>
<div> <div>
Web accessibility ensures that websites work for people with disabilities. Native HTML elements provide The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies.
accessibility features automatically, following established web standards. Browser engines handle state management, accessibility, and user interaction patterns according to platform
conventions.
</div> </div>
</details> </details>
<details name="a11y"> <details name="architecture">
<summary>Why WCAG Guidelines Matter</summary>
<div>
WCAG provides the framework for accessible web content. Native elements follow these guidelines by default,
reducing development complexity.
</div>
</details>
<details name="a11y">
<summary>Progressive Enhancement Benefits</summary> <summary>Progressive Enhancement Benefits</summary>
<div> <div>
Start with functional HTML, enhance with CSS, add JavaScript where needed. This ensures your content works Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become
across all devices and abilities. enhancement layers rather than functional requirements, improving reliability and reducing technical debt.
</div>
</details>
<details name="architecture">
<summary>Performance Characteristics</summary>
<div>
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.
</div> </div>
</details> </details>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Built-in Advantages:</h4> <h4 class="pros">✅ Platform Advantages:</h4>
<ul> <ul>
<li>Semantic HTML5 with native ARIA and keyboard support</li> <li>Zero JavaScript footprint with full accessibility compliance</li>
<li>Works without JavaScript - progressive enhancement</li> <li>Browser-native performance optimizations and hardware acceleration</li>
<li>Zero maintenance overhead, consistent UX</li> <li>Consistent cross-platform behavior with no maintenance overhead</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -742,65 +748,68 @@
<!-- MODALS --> <!-- MODALS -->
<div class="section"> <div class="section">
<h2 class="section-title">🪟 Modal Dialogs</h2> <h2 class="section-title">🪟 Modal Dialog Patterns</h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="column bad"> <div class="column bad">
<h3>Custom Modal Implementation <span class="perf-indicator perf-slow">INVOLVED</span></h3> <h3>Custom Modal Implementation <span class="perf-indicator perf-slow">BRITTLE</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Requirements:</strong> Focus trapping, ESC handling, backdrop interaction, ARIA roles need custom <strong>⚠️ Critical Requirements:</strong> Focus trapping, inert background content, ESC key handling, backdrop
development. click management, and ARIA modal semantics.
</div> </div>
<button onclick="openJSModal()">Open Custom Modal</button> <button onclick="openJSModal()">Launch Custom Modal</button>
<div class="js-modal-overlay" id="jsModal"> <div class="js-modal-overlay" id="jsModal">
<div class="js-modal-content"> <div class="js-modal-content">
<h4>Custom Modal Implementation</h4> <h4>Custom Modal Architecture</h4>
<p>This modal requires custom JavaScript for focus management, keyboard handling, and ARIA attributes. While <p>This approach requires managing the modal stack, preventing background interaction, coordinating focus
flexible, it needs careful implementation.</p> management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.</p>
<p>All the text in the background can still be focused and the user does not get informed.</p> <p><strong>Critical Issue:</strong> Background content remains accessible to screen readers and keyboard
navigation without explicit inert management.</p>
<button onclick="closeJSModal()">Close Modal</button> <button onclick="closeJSModal()">Close Modal</button>
</div> </div>
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="cons">❌ Development Requirements:</h4> <h4 class="cons">❌ Implementation Challenges:</h4>
<ul> <ul>
<li>Focus trapping and ESC key handling</li> <li>Focus trap implementation and restoration complexity</li>
<li>ARIA attributes and scroll management</li> <li>Modal stack management and z-index coordination</li>
<li>Event cleanup and comprehensive testing</li> <li>Event cleanup and memory leak prevention</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="column good"> <div class="column good">
<h3>Native Dialog Element <span class="perf-indicator perf-fast">READY</span></h3> <h3>Native Dialog Element <span class="perf-indicator perf-fast">ROBUST</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Built-in:</strong> Focus trapping, ESC support, backdrop clicks, ARIA roles work out of the box. <strong>🎯 Built-in Capabilities:</strong> Automatic focus trapping, inert background management, ESC key
support, and proper modal semantics.
</div> </div>
<button onclick="document.getElementById('nativeDialog').showModal()"> <button onclick="document.getElementById('nativeDialog').showModal()">
Open Native Dialog Launch Native Dialog
</button> </button>
<dialog id="nativeDialog"> <dialog id="nativeDialog">
<h4>Native Dialog Element</h4> <h4>Native Dialog Element</h4>
<p>This dialog provides built-in focus trapping, keyboard support, backdrop interaction, and ARIA semantics <p>The HTML5 dialog element provides robust modal functionality with automatic focus management, backdrop
automatically.</p> interaction handling, and proper accessibility semantics built into the browser engine.</p>
<p><strong>The browser handles the complexity for you.</strong></p> <p><strong>Key Advantage:</strong> Background content becomes automatically inert, preventing interaction and
screen reader access without additional implementation.</p>
<button onclick="document.getElementById('nativeDialog').close()"> <button onclick="document.getElementById('nativeDialog').close()">
Close Dialog Close Dialog
</button> </button>
</dialog> </dialog>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Native Features:</h4> <h4 class="pros">✅ Engine-Level Features:</h4>
<ul> <ul>
<li>Built-in focus trapping and ESC key support</li> <li>Automatic focus trapping with proper restoration</li>
<li>Backdrop clicks and scroll management</li> <li>Built-in ESC key handling and backdrop click support</li>
<li>No memory leaks, consistent browser behavior</li> <li>Modal semantics and inert background management</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -809,76 +818,78 @@
<!-- FORM VALIDATION --> <!-- FORM VALIDATION -->
<div class="section"> <div class="section">
<h2 class="section-title">📝 Form Validation</h2> <h2 class="section-title">📝 Constraint Validation Patterns</h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="column bad"> <div class="column bad">
<h3>Custom Validation Logic <span class="perf-indicator perf-slow">MANUAL</span></h3> <h3>Custom Validation Logic <span class="perf-indicator perf-slow">FRAGILE</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Implementation:</strong> Custom error announcements, validation timing, focus management needed. <strong>⚠️ Validation Complexity:</strong> Custom error messaging, timing coordination, accessibility
announcements, and server-client synchronization.
</div> </div>
<form onsubmit="return validateJSForm(event)"> <form onsubmit="return validateJSForm(event)">
<div class="form-group"> <div class="form-group">
<label for="js-email">Email Address</label> <label for="js-email">Email Validation</label>
<input id="js-email" name="email" type="text"> <input id="js-email" name="email" type="text">
<div class="js-error" id="email-error">Please enter a valid email</div> <div class="js-error" id="email-error">Invalid email format detected</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="js-iban">IBAN</label> <label for="js-regex">Pattern Matching (UUID)</label>
<input id="js-iban" name="iban" type="text"> <input id="js-regex" name="uuid" type="text">
<div class="js-error" id="iban-error">Please enter a valid IBAN</div> <div class="js-error" id="regex-error">UUID format required: 8-4-4-4-12 hex digits</div>
</div> </div>
<button type="submit">Submit Form</button> <button type="submit">Validate Form</button>
</form> </form>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="cons">❌ Custom Validation Challenges:</h4> <h4 class="cons">❌ Validation Brittleness:</h4>
<ul> <ul>
<li>Custom patterns may miss edge cases</li> <li>Regex patterns miss edge cases and internationalization</li>
<li>Error message and timing management</li> <li>Error timing and accessibility announcement coordination</li>
<li>Client-server validation synchronization</li> <li>Client-server validation drift and synchronization issues</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="column good"> <div class="column good">
<h3>Native HTML5 Validation <span class="perf-indicator perf-fast">INTEGRATED</span></h3> <h3>Constraint Validation API <span class="perf-indicator perf-fast">SPEC-COMPLIANT</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Built-in:</strong> Automatic error announcements, ARIA attributes, consistent validation timing. <strong>🎯 Standards-Based:</strong> Automatic error announcements, internationalized messages, and CSS
pseudo-class integration.
</div> </div>
<form> <form>
<div class="form-group"> <div class="form-group">
<label for="native-email-wcag">Email Address</label> <label for="native-email">Email Validation</label>
<input id="native-email-wcag" name="email" placeholder="user@example.com" required="" type="email"> <input id="native-email" name="email" placeholder="developer@example.org" required type="email">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-iban">IBAN</label> <label for="native-uuid">UUID Pattern</label>
<input id="native-iban" name="iban" <input id="native-uuid" name="uuid"
pattern="[A-Z]{2}[0-9]{2}[A-Z0-9]{4}[0-9]{7}([A-Z0-9]?){0,16}" pattern="[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}"
placeholder="DE89370400440532013000" required="" placeholder="550e8400-e29b-41d4-a716-446655440000" required
title="Enter a valid IBAN format (e.g., DE89370400440532013000)" type="text"> title="Enter a valid UUID format (e.g., 550e8400-e29b-41d4-a716-446655440000)" type="text">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-url">Website URL</label> <label for="native-api">API Endpoint URL</label>
<input id="native-url" name="website" placeholder="https://example.com" type="url"> <input id="native-api" name="api" placeholder="https://api.example.org/v1" type="url">
</div> </div>
<button type="submit">Submit Form</button> <button type="submit">Submit Form</button>
</form> </form>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Native Validation Features:</h4> <h4 class="pros">✅ Specification Compliance:</h4>
<ul> <ul>
<li>Built-in validation for email, URL, patterns</li> <li>RFC-compliant validation patterns with internationalization</li>
<li>Automatic error messages in user's language</li> <li>Automatic error messaging in user's preferred language</li>
<li>CSS pseudo-classes and Constraint Validation API</li> <li>CSS pseudo-classes (:valid, :invalid) for styling integration</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -887,29 +898,29 @@
<!-- PROGRESS INDICATORS --> <!-- PROGRESS INDICATORS -->
<div class="section"> <div class="section">
<h2 class="section-title">📊 Progress Indicators</h2> <h2 class="section-title">📊 Progress Indication Patterns</h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="column bad"> <div class="column bad">
<h3>Custom Progress Implementation <span class="perf-indicator perf-slow">STYLED</span></h3> <h3>Custom Progress Implementation <span class="perf-indicator perf-slow">SEMANTIC-VOID</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Requirements:</strong> Semantic meaning, screen reader announcements, ARIA labels need custom <strong>⚠️ Accessibility Gap:</strong> No semantic meaning without explicit ARIA implementation and screen
implementation. reader progress announcements.
</div> </div>
<div class="js-progress-container"> <div class="js-progress-container">
<div class="js-progress-bar" id="jsProgress"></div> <div class="js-progress-bar" id="jsProgress"></div>
</div> </div>
<p>Custom Progress: <span id="jsProgressText">0%</span></p> <p>Build Progress: <span id="jsProgressText">0%</span></p>
<button onclick="startJSProgress()">Start Progress Demo</button> <button onclick="startJSProgress()">Start Build Process</button>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="cons">❌ Custom Implementation Needs:</h4> <h4 class="cons">❌ Semantic Limitations:</h4>
<ul> <ul>
<li>No semantic meaning without ARIA attributes</li> <li>No inherent semantic meaning for assistive technologies</li>
<li>Screen reader announcements require setup</li> <li>Manual ARIA live region management for progress updates</li>
<li>Animation performance and value calculations</li> <li>Custom animation performance and value interpolation</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -918,95 +929,97 @@
<h3>Native Progress Element <span class="perf-indicator perf-fast">SEMANTIC</span></h3> <h3>Native Progress Element <span class="perf-indicator perf-fast">SEMANTIC</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Built-in:</strong> Semantic element, native ARIA support, automatic screen reader announcements. <strong>🎯 Semantic Integration:</strong> Built-in progress role, automatic ARIA value announcements, and
indeterminate state support.
</div> </div>
<p>Static Progress Example</p> <p>Compilation Progress</p>
<progress max="100" value="70">70%</progress> <progress max="100" value="75">75% complete</progress>
<p>Indeterminate Progress (no value attribute)</p> <p>Indeterminate Operation (processing)</p>
<progress>Loading...</progress> <progress>Processing dependencies...</progress>
<p>Native Progress: <span id="nativeProgressText">0%</span></p> <p>Dynamic Progress: <span id="nativeProgressText">0%</span></p>
<progress id="nativeProgress" max="100" value="0">0%</progress> <progress id="nativeProgress" max="100" value="0">0%</progress>
<button onclick="startNativeProgress()">Start Progress Demo</button> <button onclick="startNativeProgress()">Start Process</button>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Native Progress Benefits:</h4> <h4 class="pros">✅ Semantic Advantages:</h4>
<ul> <ul>
<li>Semantic element with built-in ARIA support</li> <li>Built-in progress role with automatic value announcements</li>
<li>Automatic progress announcements</li> <li>Indeterminate state support for unknown duration operations</li>
<li>Indeterminate state and hardware-accelerated animations</li> <li>Platform-optimized rendering and animation performance</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- DATE PICKERS --> <!-- DATE/TIME INPUTS -->
<div class="section"> <div class="section">
<h2 class="section-title">📅 Date Pickers</h2> <h2 class="section-title">📅 Temporal Input Patterns</h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="column bad"> <div class="column bad">
<h3>Custom Date Picker <span class="perf-indicator perf-slow">LIBRARY</span></h3> <h3>Custom Date Picker <span class="perf-indicator perf-slow">HEAVYWEIGHT</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Complexity:</strong> Keyboard navigation, screen reader support, date parsing, mobile UX need <strong>⚠️ Implementation Scope:</strong> Calendar widget architecture, keyboard navigation,
development. internationalization, timezone handling, and mobile touch optimization.
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="js-date">Select Date (Custom)</label> <label for="js-date">Deployment Date (Custom)</label>
<input id="js-date" onclick="openDatePicker()" placeholder="DD.MM.YYYY" readonly="" type="text"> <input id="js-date" onclick="openDatePicker()" placeholder="YYYY-MM-DD" readonly type="text">
<div id="datePicker" <div id="datePicker"
style="display:none; position:absolute; background:white; border:1px solid #ccc; z-index:1000;"> style="display:none; position:absolute; background:white; border:1px solid #ccc; z-index:1000;">
<p style="padding:20px; color:#666;"> <p style="padding:20px; color:#666;">
[Complex calendar widget would be here]<br> [Calendar widget implementation]<br>
Requires: JavaScript library, keyboard handlers,<br> Requires: Date manipulation library, internationalization,<br>
ARIA implementation, mobile touch events. keyboard navigation, mobile gesture handling,<br>
timezone calculations, accessibility compliance.
</p> </p>
</div> </div>
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="cons">❌ Custom Date Picker Challenges:</h4> <h4 class="cons">❌ Implementation Overhead:</h4>
<ul> <ul>
<li>Large JavaScript libraries and complex keyboard navigation</li> <li>Large JavaScript libraries and complex calendar logic</li>
<li>Mobile UX differs from native experience</li> <li>Mobile UX inconsistency with platform date pickers</li>
<li>Date format parsing, timezone, and localization complexity</li> <li>Internationalization complexity and timezone edge cases</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="column good"> <div class="column good">
<h3>Native Date Inputs <span class="perf-indicator perf-fast">PLATFORM</span></h3> <h3>Native Temporal Inputs <span class="perf-indicator perf-fast">PLATFORM-NATIVE</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Platform:</strong> Native keyboard navigation, screen reader support, platform-consistent UX, <strong>🎯 OS Integration:</strong> Platform-consistent UI, automatic keyboard navigation, built-in validation,
automatic validation. and internationalization support.
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-date">Date</label> <label for="native-date">Release Date</label>
<input id="native-date" max="2030-12-31" min="2020-01-01" name="date" type="date" value="2024-06-15"> <input id="native-date" max="2025-12-31" min="2024-01-01" name="date" type="date" value="2024-12-15">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-datetime">Date and Time</label> <label for="native-datetime">Build Timestamp</label>
<input id="native-datetime" max="2024-12-31T23:59" min="2024-01-01T00:00" name="datetime" type="datetime-local"> <input id="native-datetime" name="datetime" step="1" type="datetime-local">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-time">Time</label> <label for="native-time">Deployment Window</label>
<input id="native-time" max="17:00" min="09:00" name="time" step="900" type="time"> <input id="native-time" max="18:00" min="02:00" name="time" step="900" type="time">
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Native Date Input Benefits:</h4> <h4 class="pros">✅ Platform Integration:</h4>
<ul> <ul>
<li>No JavaScript required - native OS picker on mobile</li> <li>Zero-bundle impact with native OS picker integration</li>
<li>Automatic keyboard navigation and date validation</li> <li>Automatic validation and internationalization support</li>
<li>Consistent UX and automatic localization</li> <li>Consistent UX aligned with platform conventions</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -1015,214 +1028,97 @@
<!-- SEARCH & AUTOCOMPLETE --> <!-- SEARCH & AUTOCOMPLETE -->
<div class="section"> <div class="section">
<h2 class="section-title">🔍 Search &amp; Autocomplete</h2> <h2 class="section-title">🔍 Autocomplete Patterns</h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="column bad"> <div class="column bad">
<h3>Custom Autocomplete <span class="perf-indicator perf-slow">FEATURED</span></h3> <h3>Custom Autocomplete <span class="perf-indicator perf-slow">INTERACTION-HEAVY</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>⚠️ Requirements:</strong> Dropdown management, keyboard navigation, screen reader support, focus <strong>⚠️ Interaction Complexity:</strong> Dropdown positioning, keyboard navigation, ARIA combobox
management. implementation, and mobile touch handling.
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="js-search">City Search (Custom)</label> <label for="js-search">Framework Search (Custom)</label>
<input autocomplete="off" id="js-search" onkeyup="filterCities(this.value)" <input autocomplete="off" id="js-search" onkeyup="filterFrameworks(this.value)"
placeholder="Type to search cities..." type="text"> placeholder="Type framework name..." type="text">
<div id="js-results" <div id="js-results"
style="display:none; position:absolute; background:var(--color-card); border:1px solid var(--color-border); max-height:200px; overflow-y:auto; z-index:100;"> style="display:none; position:absolute; background:var(--color-card); border:1px solid var(--color-border); max-height:200px; overflow-y:auto; z-index:100;"></div>
</div>
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="cons">❌ Custom Autocomplete Requirements:</h4> <h4 class="cons">❌ Interaction Management:</h4>
<ul> <ul>
<li>Complex keyboard navigation and ARIA management</li> <li>Complex ARIA combobox implementation and state management</li>
<li>Focus management and dropdown positioning</li> <li>Dropdown positioning and viewport collision detection</li>
<li>Mobile touch behavior and performance considerations</li> <li>Mobile keyboard optimization and touch event handling</li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="column good"> <div class="column good">
<h3>Native Datalist Element <span class="perf-indicator perf-fast">BUILT-IN</span></h3> <h3>Native Datalist Element <span class="perf-indicator perf-fast">ZERO-CONFIG</span></h3>
<div class="accessibility-note"> <div class="accessibility-note">
<strong>🎯 Native:</strong> Built-in keyboard navigation, screen reader support, native OS integration. <strong>🎯 Native Combobox:</strong> Built-in ARIA combobox semantics, keyboard navigation, and
platform-consistent interaction patterns.
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-city">City Search (Native)</label> <label for="native-framework">JavaScript Framework</label>
<input id="native-city" list="cities" placeholder="Type or select a city..." type="text"> <input id="native-framework" list="frameworks" placeholder="Select or type framework..." type="text">
<datalist id="cities"> <datalist id="frameworks">
<!-- Original core cities with proper names --> <option value="React">React - Component-based library</option>
<option value="Berlin"> <option value="Vue.js">Vue.js - Progressive framework</option>
<option value="Wien"> <option value="Angular">Angular - Full platform</option>
<option value="Zürich"> <option value="Svelte">Svelte - Compile-time framework</option>
<option value="München"> <option value="Solid">Solid - Fine-grained reactivity</option>
<option value="Hamburg"> <option value="Alpine.js">Alpine.js - Minimal framework</option>
<option value="Salzburg"> <option value="Lit">Lit - Web Components library</option>
<option value="Genève"> <option value="Preact">Preact - Lightweight React alternative</option>
<option value="Frankfurt am Main">
<option value="Köln">
<option value="Stuttgart">
<!-- Extended German cities -->
<option value="Dresden">
<option value="Leipzig">
<option value="Düsseldorf">
<option value="Dortmund">
<option value="Essen">
<option value="Bremen">
<option value="Hannover">
<option value="Nürnberg">
<option value="Duisburg">
<option value="Bochum">
<option value="Wuppertal">
<option value="Bielefeld">
<option value="Bonn">
<option value="Münster">
<option value="Karlsruhe">
<option value="Mannheim">
<option value="Augsburg">
<option value="Wiesbaden">
<option value="Gelsenkirchen">
<option value="Mönchengladbach">
<option value="Braunschweig">
<option value="Chemnitz">
<option value="Kiel">
<option value="Aachen">
<option value="Halle (Saale)">
<option value="Magdeburg">
<option value="Freiburg im Breisgau">
<option value="Krefeld">
<option value="Lübeck">
<option value="Oberhausen">
<!-- Austrian cities -->
<option value="Graz">
<option value="Linz">
<option value="Innsbruck">
<option value="Klagenfurt">
<option value="Villach">
<option value="Wels">
<option value="Sankt Pölten">
<option value="Dornbirn">
<option value="Steyr">
<option value="Wiener Neustadt">
<!-- Swiss cities -->
<option value="Basel">
<option value="Bern">
<option value="Lausanne">
<option value="Winterthur">
<option value="Luzern">
<option value="St. Gallen">
<option value="Lugano">
<option value="Biel/Bienne">
<option value="Thun">
<option value="Köniz">
<!-- South Tyrolean cities -->
<option value="Bozen">
<option value="Meran">
<option value="Brixen">
<option value="Bruneck">
<option value="Sterzing">
<option value="Schlanders">
<option value="Eppan">
<option value="Leifers">
<option value="Klausen">
<option value="Neumarkt">
<!-- Alsatian cities -->
<option value="Strasbourg">
<option value="Mulhouse">
<option value="Colmar">
<option value="Haguenau">
<option value="Schiltigheim">
<option value="Illkirch-Graffenstaden">
<option value="Saint-Louis">
<option value="Sélestat">
<option value="Bischwiller">
<option value="Saverne">
</datalist> </datalist>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="native-browser">Browser Choice</label> <label for="native-language">Programming Language</label>
<input id="native-browser" list="browsers" placeholder="Choose your browser..." type="text"> <input id="native-language" list="languages" placeholder="Choose language..." type="text">
<datalist id="browsers"> <datalist id="languages">
<option label="Google Chrome" value="Chrome"> <option label="JavaScript - Dynamic scripting" value="JavaScript"></option>
</option> <option label="TypeScript - Typed JavaScript" value="TypeScript"></option>
<option label="Mozilla Firefox" value="Firefox"> <option label="Python - General purpose" value="Python"></option>
</option> <option label="Rust - Systems programming" value="Rust"></option>
<option label="Apple Safari" value="Safari"> <option label="Go - Concurrent systems" value="Go"></option>
</option> <option label="WebAssembly - High-performance web" value="WebAssembly"></option>
<option label="Microsoft Edge" value="Edge">
</option>
<option label="Opera Browser" value="Opera">
</option>
</datalist>
</div>
<div class="form-group"> <option label="C - Low-level systems" value="C"></option>
<label for="company-domain">Company Domain</label> <option label="C++ - High-performance systems" value="C++"></option>
<input <option label="C# - .NET ecosystem" value="C#"></option>
aria-describedby="company-domain-hint" <option label="Java - Cross-platform enterprise" value="Java"></option>
autocomplete="organization" <option label="Kotlin - Modern JVM language" value="Kotlin"></option>
id="company-domain" <option label="Swift - iOS and macOS" value="Swift"></option>
list="company-domains"
placeholder="e.g., siemens, volkswagen"
type="text"
>
<small class="form-text text-muted" id="company-domain-hint">
Enter your company's domain name without www or .com
</small>
<datalist id="company-domains"> <option label="Ruby - Web development (Rails)" value="Ruby"></option>
<!-- German automotive & industrial giants --> <option label="PHP - Server-side scripting" value="PHP"></option>
<option label="Volkswagen AG" value="volkswagen"> <option label="Perl - Text processing" value="Perl"></option>
<option label="Mercedes-Benz Group" value="mercedes-benz"> <option label="Haskell - Functional programming" value="Haskell"></option>
<option label="BMW Group" value="bmw"> <option label="Elixir - Scalable applications" value="Elixir"></option>
<option label="Audi AG" value="audi"> <option label="Dart - Web and mobile apps" value="Dart"></option>
<option label="Porsche AG" value="porsche">
<!-- Industrial conglomerates --> <option label="Scala - Functional JVM language" value="Scala"></option>
<option label="Siemens AG" value="siemens"> <option label="Lua - Lightweight scripting" value="Lua"></option>
<option label="Robert Bosch GmbH" value="bosch"> <option label="R - Statistical computing" value="R"></option>
<option label="thyssenkrupp AG" value="thyssenkrupp"> <option label="Julia - High-performance computing" value="Julia"></option>
<option label="Continental AG" value="continental"> <option label="Shell - Command-line scripting" value="Shell"></option>
<option label="Schaeffler Group" value="schaeffler"> <option label="MATLAB - Engineering and science" value="MATLAB"></option>
<!-- Tech & Software -->
<option label="SAP SE" value="sap">
<option label="Infineon Technologies" value="infineon">
<option label="Software AG" value="software-ag">
<!-- Energy & Utilities -->
<option label="E.ON SE" value="eon">
<option label="RWE AG" value="rwe">
<option label="Wintershall Dea" value="wintershall-dea">
<!-- Chemicals & Pharma -->
<option label="BASF SE" value="basf">
<option label="Bayer AG" value="bayer">
<option label="Merck KGaA" value="merck">
<!-- Retail & Consumer -->
<option label="Adidas AG" value="adidas">
<option label="Puma SE" value="puma">
<option label="Metro AG" value="metro">
</datalist> </datalist>
</div> </div>
<div class="pros-cons"> <div class="pros-cons">
<h4 class="pros">✅ Native Datalist Features:</h4> <h4 class="pros">✅ Zero-Configuration Benefits:</h4>
<ul> <ul>
<li>Zero JavaScript - built-in keyboard navigation</li> <li>Native combobox semantics with automatic ARIA support</li>
<li>Screen reader compatible with native OS integration</li> <li>Platform-consistent keyboard and interaction patterns</li>
<li>Form validation compatibility and graceful degradation</li> <li>Form validation integration and graceful degradation</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -1230,32 +1126,52 @@
</div> </div>
<div class="summary-box"> <div class="summary-box">
<h3>Embrace Built-in Web Components</h3> <h3>Platform-First Development</h3>
<p>Native HTML elements provide rich functionality with built-in accessibility, keyboard navigation, and consistent <p>Native HTML elements represent years of browser engineering, accessibility research, and web standards evolution.
user experience. These elements represent years of browser engineering and web standards development.</p> They provide robust functionality with minimal implementation overhead and maximum compatibility.</p>
<p><strong>The approach:</strong></p> <p><strong>The Progressive Enhancement Approach:</strong></p>
<ul style="text-align: left; max-width: 600px; margin: 2rem auto;"> <ul style="text-align: left; max-width: 600px; margin: 2rem auto;">
<li>Start with semantic HTML that works for everyone</li> <li>Build with semantic HTML that functions universally</li>
<li>Enhance with CSS for visual design</li> <li>Enhance visual design through CSS without breaking functionality</li>
<li>Add JavaScript progressively where truly needed</li> <li>Layer JavaScript for complex interactions where native capabilities are insufficient</li>
</ul> </ul>
<p>Build with the platform, not against it. <strong>Your users will thank you.</strong></p> <p>Leverage browser engines rather than reimplementing their functionality. <strong>Your codebase will be more
maintainable, your users will have better experiences.</strong></p>
<div class="zen-quote"> <div class="zen-quote">
"The most elegant code leverages existing solutions. Native HTML elements provide decades of accessibility research "The most sophisticated architecture is often the one that uses existing, well-tested components. Native HTML
and browser optimization - use them as your foundation." elements provide decades of optimization and accessibility engineering—build upon this foundation rather than around
it."
</div> </div>
</div> </div>
<script> <script>
// Existing JavaScript functions with additions for progress demo // JavaScript functions remain unchanged except for filterFrameworks addition
const frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
function filterFrameworks(value) {
const results = document.getElementById('js-results');
if (!value) {
results.style.display = 'none';
return;
}
const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));
results.innerHTML = filtered.map(fw => `<div style="padding:8px; cursor:pointer;" onclick="selectFramework('${fw}')">${fw}</div>`).join('');
results.style.display = filtered.length ? 'block' : 'none';
}
function selectFramework(fw) {
document.getElementById('js-search').value = fw;
document.getElementById('js-results').style.display = 'none';
}
// All other functions remain unchanged
function startNativeProgress() { function startNativeProgress() {
const progress = document.getElementById('nativeProgress'); const progress = document.getElementById('nativeProgress');
const text = document.getElementById('nativeProgressText'); const text = document.getElementById('nativeProgressText');
let value = 0; let value = 0;
const interval = setInterval(() => { const interval = setInterval(() => {
value += Math.random() * 15; value += Math.random() * 15;
if (value >= 100) { if (value >= 100) {
@@ -1267,10 +1183,8 @@
}, 200); }, 200);
} }
// Rest of existing JavaScript functions remain unchanged
function toggleContent(id) { function toggleContent(id) {
const content = document.getElementById(id); document.getElementById(id).classList.toggle("active");
content.classList.toggle("active");
} }
function openJSModal() { function openJSModal() {
@@ -1291,7 +1205,6 @@
const bar = document.getElementById('jsProgress'); const bar = document.getElementById('jsProgress');
const text = document.getElementById('jsProgressText'); const text = document.getElementById('jsProgressText');
let width = 0; let width = 0;
const interval = setInterval(() => { const interval = setInterval(() => {
width += Math.random() * 15; width += Math.random() * 15;
if (width >= 100) { if (width >= 100) {
@@ -1307,51 +1220,6 @@
const picker = document.getElementById('datePicker'); const picker = document.getElementById('datePicker');
picker.style.display = picker.style.display === 'none' ? 'block' : 'none'; picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
} }
const cities = [
// Original core cities with proper names
'Berlin', 'Wien', 'Zürich', 'München', 'Hamburg', 'Salzburg', 'Genève', 'Frankfurt am Main', 'Köln', 'Stuttgart',
// Extended German cities
'Dresden', 'Leipzig', 'Düsseldorf', 'Dortmund', 'Essen', 'Bremen', 'Hannover', 'Nürnberg', 'Duisburg', 'Bochum',
'Wuppertal', 'Bielefeld', 'Bonn', 'Münster', 'Karlsruhe', 'Mannheim', 'Augsburg', 'Wiesbaden', 'Gelsenkirchen', 'Mönchengladbach',
'Braunschweig', 'Chemnitz', 'Kiel', 'Aachen', 'Halle (Saale)', 'Magdeburg', 'Freiburg im Breisgau', 'Krefeld', 'Lübeck', 'Oberhausen',
// Austrian cities beyond Wien/Salzburg
'Graz', 'Linz', 'Innsbruck', 'Klagenfurt', 'Villach', 'Wels', 'Sankt Pölten', 'Dornbirn', 'Steyr', 'Wiener Neustadt',
// Swiss cities beyond Zürich/Genève
'Basel', 'Bern', 'Lausanne', 'Winterthur', 'Luzern', 'St. Gallen', 'Lugano', 'Biel/Bienne', 'Thun', 'Köniz',
// South Tyrolean cities (Italian with German names)
'Bozen', 'Meran', 'Brixen', 'Bruneck', 'Sterzing', 'Schlanders', 'Eppan', 'Leifers', 'Klausen', 'Neumarkt',
// Alsatian cities (historically German-speaking)
'Strasbourg', 'Mulhouse', 'Colmar', 'Haguenau', 'Schiltigheim', 'Illkirch-Graffenstaden', 'Saint-Louis', 'Sélestat', 'Bischwiller', 'Saverne'
];
function filterCities(value) {
const results = document.getElementById('js-results');
if (!value) {
results.style.display = 'none';
return;
}
const filtered = cities.filter(city =>
city.toLowerCase().includes(value.toLowerCase())
);
results.innerHTML = filtered.map(city =>
`<div style="padding:8px; cursor:pointer;" onclick="selectCity('${city}')">${city}</div>`
).join('');
results.style.display = filtered.length ? 'block' : 'none';
}
function selectCity(city) {
document.getElementById('js-search').value = city;
document.getElementById('js-results').style.display = 'none';
}
</script> </script>
</body> </body>