From f5e9d1e2c0e7fcfdb675c7f1466555c3705db47d Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Sat, 31 May 2025 03:34:38 +0200 Subject: [PATCH] feat: switch to light color scheme --- index.html | 2930 ++++++++++++++++++++------------------------- package-lock.json | 13 + 2 files changed, 1343 insertions(+), 1600 deletions(-) create mode 100644 package-lock.json diff --git a/index.html b/index.html index 4a5972f..9121f5b 100644 --- a/index.html +++ b/index.html @@ -1,656 +1,675 @@ - - - The Complete Native HTML Dominance Guide - + + + The Complete Native HTML Dominance Guide +
-

🚀 No JavaScript, No cry

-

Stop fighting the platform. HTML already solved 90% of your UI problems. This guide exposes the absurdity of JavaScript wheel-reinvention and shows you the path to enlightened web development through semantic markup and progressive enhancement.

+

🚀 No JavaScript, No cry

+

Stop fighting the platform. HTML already solved 90% of your UI problems. This guide exposes the + absurdity of JavaScript wheel-reinvention and shows you the path to enlightened web development through semantic + markup and progressive enhancement.

-

🎯 Collapsible Content

-
-
-

JavaScript Nightmare SLOW

+

🎯 Collapsible Content

+
+
+

JavaScript Nightmare SLOW

-
- ⚠️ Accessibility Disaster: No ARIA support, keyboard navigation broken, screen readers confused, focus management missing. You're essentially telling assistive technology users to get lost. -
+
+ ⚠️ Accessibility Disaster: No ARIA support, keyboard navigation broken, screen readers + confused, focus management missing. You're essentially telling assistive technology users to get lost. +
- -
- Web accessibility ensures that websites and digital tools are usable by people with disabilities. This includes visual, auditory, motor, and cognitive impairments. Too bad this JavaScript implementation ignores all of that. -
+ +
+ Web accessibility ensures that websites and digital tools are usable by people with disabilities. This includes + visual, auditory, motor, and cognitive impairments. Too bad this JavaScript implementation ignores all of that. +
- -
- WCAG provides the framework for making web content accessible. It's not just legal compliance - it's about not being a terrible human being who excludes people from the web. -
+ +
+ WCAG provides the framework for making web content accessible. It's not just legal compliance - it's about not + being a terrible human being who excludes people from the web. +
-
+
<!-- The horror show begins --> <button onclick="toggleContent('id')">Click</button> <div id="content" style="display:none">Hidden content</div> @@ -667,49 +686,56 @@ </script>
-
-

❌ Why This Sucks:

-
    -
  • Zero semantic meaning - screen readers see meaningless divs
    • -
  • No ARIA attributes - assistive tech has no clue what's happening
    • -
  • Keyboard navigation requires custom implementation
    • -
  • JavaScript dependency - breaks without JS
    • -
  • SEO nightmare - hidden content not properly indexed
    • -
  • State management gets complex with multiple sections
    • -
  • Performance overhead for simple interactions
    • -
-
+
+

❌ Why This Sucks:

+
    +
  • Zero semantic meaning - screen readers see meaningless divs
    • +
  • No ARIA attributes - assistive tech has no clue what's happening
    • +
  • Keyboard navigation requires custom implementation
    • +
  • JavaScript dependency - breaks without JS
    • +
  • SEO nightmare - hidden content not properly indexed
    • +
  • State management gets complex with multiple sections
    • +
  • Performance overhead for simple interactions
    • +
+
+
+ +
+

Native HTML Zen FAST

+ +
+ 🎯 Accessibility Nirvana: Built-in ARIA, keyboard support, semantic meaning, screen reader + friendly, works without JavaScript. This is what inclusive design looks like. +
+ +
+ What is Web Accessibility? +
+ Web accessibility ensures that websites and digital tools are usable by people with disabilities. This + includes visual, auditory, motor, and cognitive impairments. The native HTML approach provides this + functionality with zero JavaScript - because the web platform actually cares about inclusion.
+
-
-

Native HTML Zen FAST

+
+ Why WCAG Actually Matters +
+ WCAG provides the framework for making web content accessible. It's not just legal compliance - it's about + building a web that serves everyone. Native elements follow these guidelines by default because they were + designed by people who understand accessibility. +
+
-
- 🎯 Accessibility Nirvana: Built-in ARIA, keyboard support, semantic meaning, screen reader friendly, works without JavaScript. This is what inclusive design looks like. -
+
+ Progressive Enhancement Philosophy +
+ Start with functional HTML, enhance with CSS, sprinkle JavaScript only where needed. This approach ensures + your content works for everyone, regardless of their device, connection, or abilities. It's not just good + engineering - it's good humanity. +
+
-
- What is Web Accessibility? -
- Web accessibility ensures that websites and digital tools are usable by people with disabilities. This includes visual, auditory, motor, and cognitive impairments. The native HTML approach provides this functionality with zero JavaScript - because the web platform actually cares about inclusion. -
-
- -
- Why WCAG Actually Matters -
- WCAG provides the framework for making web content accessible. It's not just legal compliance - it's about building a web that serves everyone. Native elements follow these guidelines by default because they were designed by people who understand accessibility. -
-
- -
- Progressive Enhancement Philosophy -
- Start with functional HTML, enhance with CSS, sprinkle JavaScript only where needed. This approach ensures your content works for everyone, regardless of their device, connection, or abilities. It's not just good engineering - it's good humanity. -
-
- -
+
<!-- The elegance of simplicity --> <details> <summary>Click to expand</summary> @@ -728,45 +754,47 @@ <!-- focus management, state persistence. -->
-
-

✅ Why This Rules:

-
    -
  • Semantic HTML5 element with inherent meaning
    • -
  • Built-in ARIA support - screen readers understand it
    • -
  • Keyboard accessible out of the box (Space/Enter)
    • -
  • Works without JavaScript - progressive enhancement
    • -
  • SEO friendly - search engines can crawl collapsed content
    • -
  • Browser handles state management and animations
    • -
  • Consistent UX across all browsers and platforms
    • -
  • Zero maintenance overhead - it just works
    • -
-
-
+
+

✅ Why This Rules:

+
    +
  • Semantic HTML5 element with inherent meaning
    • +
  • Built-in ARIA support - screen readers understand it
    • +
  • Keyboard accessible out of the box (Space/Enter)
    • +
  • Works without JavaScript - progressive enhancement
    • +
  • SEO friendly - search engines can crawl collapsed content
    • +
  • Browser handles state management and animations
    • +
  • Consistent UX across all browsers and platforms
    • +
  • Zero maintenance overhead - it just works
    • +
+
+
-

🪟 Modal Dialogs

-
-
-

JavaScript Chaos JANKY

+

🪟 Modal Dialogs

+
+
+

JavaScript Chaos JANKY

-
- ⚠️ Accessibility Nightmare: Focus trapping broken, ESC key ignored, backdrop clicks inconsistent, ARIA roles missing. Your users with disabilities are stuck in modal hell. -
+
+ ⚠️ Accessibility Nightmare: Focus trapping broken, ESC key ignored, backdrop clicks + inconsistent, ARIA roles missing. Your users with disabilities are stuck in modal hell. +
- + -
-
-

JavaScript Modal of Doom

-

This modal requires hundreds of lines of custom JavaScript for focus management, ESC key handling, backdrop clicks, and ARIA attributes. And it still probably has bugs.

- -
-
+
+
+

JavaScript Modal of Doom

+

This modal requires hundreds of lines of custom JavaScript for focus management, ESC key handling, backdrop + clicks, and ARIA attributes. And it still probably has bugs.

+ +
+
-
+
<!-- The complexity monster --> <div class="modal-overlay" id="myModal"> <div class="modal-content"> @@ -807,42 +835,44 @@ </script>
-
-

❌ The Suffering:

-
    -
  • Focus trapping requires complex event management
    • -
  • ESC key handling needs custom implementation
    • -
  • Backdrop click behavior is inconsistent across browsers
    • -
  • Body scroll locking breaks on mobile
    • -
  • ARIA attributes must be managed manually
    • -
  • Focus restoration is fragile and bug-prone
    • -
  • Event cleanup leads to memory leaks
    • -
  • Testing requires mocking dozens of edge cases
    • -
-
-
+
+

❌ The Suffering:

+
    +
  • Focus trapping requires complex event management
    • +
  • ESC key handling needs custom implementation
    • +
  • Backdrop click behavior is inconsistent across browsers
    • +
  • Body scroll locking breaks on mobile
    • +
  • ARIA attributes must be managed manually
    • +
  • Focus restoration is fragile and bug-prone
    • +
  • Event cleanup leads to memory leaks
    • +
  • Testing requires mocking dozens of edge cases
    • +
+
+
-
-

Native Dialog Enlightenment PERFECT

+
+

Native Dialog Enlightenment PERFECT

-
- 🎯 Accessibility Perfection: Built-in focus trapping, ESC key support, backdrop clicks, ARIA roles, screen reader announcements. This is what happens when browsers do the heavy lifting. -
+
+ 🎯 Accessibility Perfection: Built-in focus trapping, ESC key support, backdrop clicks, ARIA + roles, screen reader announcements. This is what happens when browsers do the heavy lifting. +
- + - -

Native Dialog Zen

-

This dialog provides built-in focus trapping, ESC key support, backdrop clicks, proper ARIA semantics, body scroll locking, and focus restoration. All with zero custom JavaScript.

-

The browser is your friend. Stop fighting it.

- - + +

Native Dialog Zen

+

This dialog provides built-in focus trapping, ESC key support, backdrop clicks, proper ARIA semantics, body + scroll locking, and focus restoration. All with zero custom JavaScript.

+

The browser is your friend. Stop fighting it.

+ + -
+
<!-- The path to enlightenment --> <dialog id="myDialog"> <h4>Dialog Title</h4> @@ -870,51 +900,52 @@ </script>
-
-

✅ The Enlightenment:

-
    -
  • Built-in focus trapping - no event management needed
    • -
  • ESC key support works automatically
    • -
  • Backdrop clicks handled by browser
    • -
  • Body scroll locking just works
    • -
  • ARIA roles and states managed automatically
    • -
  • Focus restoration is bulletproof
    • -
  • Zero memory leaks or event cleanup
    • -
  • Works consistently across all browsers
    • -
-
-
+
+

✅ The Enlightenment:

+
    +
  • Built-in focus trapping - no event management needed
    • +
  • ESC key support works automatically
    • +
  • Backdrop clicks handled by browser
    • +
  • Body scroll locking just works
    • +
  • ARIA roles and states managed automatically
    • +
  • Focus restoration is bulletproof
    • +
  • Zero memory leaks or event cleanup
    • +
  • Works consistently across all browsers
    • +
+
+
-

📝 Form Validation

-
-
-

JavaScript Validation Hell BUGGY

+

📝 Form Validation

+
+
+

JavaScript Validation Hell BUGGY

-
- ⚠️ Accessibility Failure: Custom error messages not properly announced, validation timing issues, focus management broken, inconsistent UX across form fields. -
+
+ ⚠️ Accessibility Failure: Custom error messages not properly announced, validation timing + issues, focus management broken, inconsistent UX across form fields. +
-
-
- - -
Please enter a valid email
-
+ +
+ + +
Please enter a valid email
+
-
- - -
Password must be at least 8 characters
-
+
+ + +
Password must be at least 8 characters
+
- -
+ + -
+
<!-- The validation nightmare --> <form onsubmit="return validateForm(event)"> <input type="text" id="email" name="email"> @@ -974,60 +1005,61 @@ </script>
-
-

❌ The Validation Suffering:

-
    -
  • Custom regex patterns that miss edge cases
    • -
  • Manual error message management and display
    • -
  • Event listener management becomes complex
    • -
  • Inconsistent validation timing across fields
    • -
  • Screen readers may not announce custom errors
    • -
  • Form submission logic gets tangled with validation
    • -
  • Different validation rules for client vs server
    • -
  • Styling validation states requires CSS gymnastics
    • -
-
+
+

❌ The Validation Suffering:

+
    +
  • Custom regex patterns that miss edge cases
    • +
  • Manual error message management and display
    • +
  • Event listener management becomes complex
    • +
  • Inconsistent validation timing across fields
    • +
  • Screen readers may not announce custom errors
    • +
  • Form submission logic gets tangled with validation
    • +
  • Different validation rules for client vs server
    • +
  • Styling validation states requires CSS gymnastics
    • +
+
+
+ +
+

Native HTML5 Validation Zen SOLID

+ +
+ 🎯 Accessibility Excellence: Built-in error announcements, proper ARIA attributes, consistent + validation timing, native browser UX that users already understand. +
+ +
+
+ +
-
-

Native HTML5 Validation Zen SOLID

+
+ + +
-
- 🎯 Accessibility Excellence: Built-in error announcements, proper ARIA attributes, consistent validation timing, native browser UX that users already understand. -
+
+ + +
- -
- - -
+
+ + +
-
- - -
+ + -
- - -
- -
- - -
- - - - -
+
<!-- The path to validation enlightenment --> <form> <!-- Email validation built-in --> @@ -1071,41 +1103,42 @@ </script>
-
-

✅ The Validation Enlightenment:

-
    -
  • Built-in validation for email, URL, number, tel, date types
    • -
  • Pattern attribute for custom regex validation
    • -
  • Min/max length and value constraints
    • -
  • Required attribute for mandatory fields
    • -
  • Automatic error messages in user's language
    • -
  • :valid and :invalid CSS pseudo-classes
    • -
  • Form won't submit until all fields are valid
    • -
  • Constraint Validation API for custom logic
    • -
-
-
+
+

✅ The Validation Enlightenment:

+
    +
  • Built-in validation for email, URL, number, tel, date types
    • +
  • Pattern attribute for custom regex validation
    • +
  • Min/max length and value constraints
    • +
  • Required attribute for mandatory fields
    • +
  • Automatic error messages in user's language
    • +
  • :valid and :invalid CSS pseudo-classes
    • +
  • Form won't submit until all fields are valid
    • +
  • Constraint Validation API for custom logic
    • +
+
+
-

📊 Progress Indicators

-
-
-

JavaScript Progress Chaos JANKY

+

📊 Progress Indicators

+
+
+

JavaScript Progress Chaos JANKY

-
- ⚠️ Accessibility Disaster: No semantic meaning, screen readers can't announce progress, missing ARIA labels, custom implementation breaks assistive technology. -
+
+ ⚠️ Accessibility Disaster: No semantic meaning, screen readers can't announce progress, missing + ARIA labels, custom implementation breaks assistive technology. +
-
-
-
-

JavaScript Progress: 0%

- +
+
+
+

JavaScript Progress: 0%

+ -
+
<!-- The overcomplicated approach --> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> @@ -1167,45 +1200,46 @@ </script>
-
-

❌ Progress Bar Problems:

-
    -
  • No semantic meaning - just styled divs
    • -
  • ARIA attributes must be managed manually
    • -
  • Screen readers can't announce progress changes
    • -
  • Custom styling requires complex CSS
    • -
  • Animation performance varies across browsers
    • -
  • Value calculations prone to rounding errors
    • -
  • Indeterminate progress requires additional logic
    • -
  • Color coding needs manual implementation
    • -
-
-
+
+

❌ Progress Bar Problems:

+
    +
  • No semantic meaning - just styled divs
    • +
  • ARIA attributes must be managed manually
    • +
  • Screen readers can't announce progress changes
    • +
  • Custom styling requires complex CSS
    • +
  • Animation performance varies across browsers
    • +
  • Value calculations prone to rounding errors
    • +
  • Indeterminate progress requires additional logic
    • +
  • Color coding needs manual implementation
    • +
+
+
-
-

Native Progress Perfection SMOOTH

+
+

Native Progress Perfection SMOOTH

-
- 🎯 Accessibility Paradise: Semantic HTML element, built-in ARIA support, screen reader announcements, consistent browser styling, works everywhere. -
+
+ 🎯 Accessibility Paradise: Semantic HTML element, built-in ARIA support, screen reader + announcements, consistent browser styling, works everywhere. +
- 32% -

File Upload Progress

+ 32% +

File Upload Progress

- 70% -

Processing Data

+ 70% +

Processing Data

- Loading... -

Indeterminate Progress (no value attribute)

+ Loading... +

Indeterminate Progress (no value attribute)

-
- - - 50% -
+
+ + + 50% +
-
+
<!-- The elegant solution --> <!-- Determinate progress --> <progress value="32" max="100">32%</progress> @@ -1275,49 +1309,51 @@ </style>
-
-

✅ Native Progress Advantages:

-
    -
  • Semantic HTML element with inherent meaning
    • -
  • Built-in ARIA support for screen readers
    • -
  • Automatic progress announcements
    • -
  • Indeterminate state without extra code
    • -
  • Consistent styling across browsers
    • -
  • Form integration and validation support
    • -
  • Hardware acceleration for smooth animations
    • -
  • Automatic value/max ratio calculations
    • -
-
-
+
+

✅ Native Progress Advantages:

+
    +
  • Semantic HTML element with inherent meaning
    • +
  • Built-in ARIA support for screen readers
    • +
  • Automatic progress announcements
    • +
  • Indeterminate state without extra code
    • +
  • Consistent styling across browsers
    • +
  • Form integration and validation support
    • +
  • Hardware acceleration for smooth animations
    • +
  • Automatic value/max ratio calculations
    • +
+
+
-

📅 Date Pickers

-
-
-

JavaScript Date Picker Hell BLOATED

+

📅 Date Pickers

+
+
+

JavaScript Date Picker Hell BLOATED

-
- ⚠️ Accessibility Nightmare: Keyboard navigation broken, screen reader confusion, custom date format parsing errors, focus management disasters, mobile UX inconsistencies. -
+
+ ⚠️ Accessibility Nightmare: Keyboard navigation broken, screen reader confusion, custom date + format parsing errors, focus management disasters, mobile UX inconsistencies. +
-
- - - -
+
+ + + +
-
+
<!-- The complexity monster --> <input type="text" id="datePicker" placeholder="Select date..."> @@ -1396,577 +1432,268 @@ </script>
-
-

❌ Date Picker Disasters:

-
    -
  • Massive JavaScript libraries (jQuery UI = 250KB+)
    • -
  • Complex keyboard navigation implementation
    • -
  • Screen reader compatibility requires custom ARIA
    • -
  • Mobile UX often breaks or feels non-native
    • -
  • Date format parsing errors and edge cases
    • -
  • Timezone handling becomes a nightmare
    • -
  • Localization requires additional libraries
    • -
  • Theming and styling consistency issues
    • -
-
-
- -
-

Native Date Input Paradise PERFECT

- -
- 🎯 Accessibility Perfection: Native keyboard navigation, screen reader support, platform-consistent UX, automatic validation, works on all devices with zero configuration. -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- - -
- -
- <!-- The enlightened approach --> - <!-- Basic date picker --> - <input type="date" name="birthday" - min="1900-01-01" max="2024-12-31"> - - <!-- Date and time --> - <input type="datetime-local" name="appointment" - min="2024-01-01T09:00" max="2024-12-31T17:00"> - - <!-- Time only --> - <input type="time" name="meeting-time" - min="09:00" max="17:00" step="900"> - - <!-- Month picker --> - <input type="month" name="birth-month"> - - <!-- Week picker --> - <input type="week" name="vacation-week"> - - <!-- With validation and default value --> - <input type="date" name="event-date" - required - min="2024-01-01" - max="2024-12-31" - value="2024-06-15"> - - <!-- Optional: Custom styling --> - <style> - input[type="date"], - input[type="datetime-local"], - input[type="time"], - input[type="month"], - input[type="week"] { - /* Browser handles the picker UI */ - /* You just style the input field */ - padding: 12px; - border: 2px solid #ddd; - border-radius: 8px; - font-size: 16px; - } - - input[type="date"]::-webkit-calendar-picker-indicator { - /* Customize the calendar icon */ - filter: invert(1); - cursor: pointer; - } - </style> - - <!-- Optional: JavaScript for dynamic constraints --> - <script> - // Set minimum date to today - document.querySelector('[name="event-date"]').min = - new Date().toISOString().split('T')[0]; - - // Dynamic max date (30 days from now) - const futureDate = new Date(); - futureDate.setDate(futureDate.getDate() + 30); - document.querySelector('[name="event-date"]').max = - futureDate.toISOString().split('T')[0]; - </script> -
- -
-

✅ Native Date Input Excellence:

-
    -
  • Zero JavaScript required - works out of the box
    • -
  • Native OS date picker on mobile devices
    • -
  • Automatic keyboard navigation and accessibility
    • -
  • Built-in date validation and format handling
    • -
  • Consistent UX that users already understand
    • -
  • Automatic localization (user's preferred format)
    • -
  • Min/max date constraints built-in
    • -
  • Form validation integration works perfectly
    • -
-
-
+
+

❌ Date Picker Disasters:

+
    +
  • Massive JavaScript libraries (jQuery UI = 250KB+)
    • +
  • Complex keyboard navigation implementation
    • +
  • Screen reader compatibility requires custom ARIA
    • +
  • Mobile UX often breaks or feels non-native
    • +
  • Date format parsing errors and edge cases
    • +
  • Timezone handling becomes a nightmare
    • +
  • Localization requires additional libraries
    • +
  • Theming and styling consistency issues
    • +
+
-
- -
-

🪗 Accordions

-
-
-

JavaScript Framework Overkill HEAVY

+
+

Native Date Input Paradise PERFECT

-
- ⚠️ Framework Fatigue: Massive bundle sizes, complex state management, over-engineered solutions for simple disclosure widgets, dependency hell for basic interactions. -
+
+ 🎯 Accessibility Perfection: Native keyboard navigation, screen reader support, + platform-consistent UX, automatic validation, works on all devices with zero configuration. +
-
-
- React/Vue/Angular Accordion Framework -
- -
+
+ + +
-
-
- Why We Chose This Complex Solution -
- -
+
+ + +
-
- <!-- React Accordion Component (simplified) --> - import React, { useState, useContext, createContext } from 'react'; +
+ + +
- const AccordionContext = createContext(); +
+ + +
- const AccordionProvider = ({ children, allowMultiple = false }) => { - const [openItems, setOpenItems] = useState(new Set()); +
+ + +
- const toggle = (id) => { - setOpenItems(prev => { - const next = new Set(prev); - if (next.has(id)) { - next.delete(id); - } else { - if (!allowMultiple) { - next.clear(); - } - next.add(id); - } - return next; - }); - }; +
- return ( - <AccordionContext.Provider value={{ openItems, toggle }}> - {children} - </AccordionContext.Provider> - ); - }; +
- const AccordionItem = ({ id, title, children }) => { - const { openItems, toggle } = useContext(AccordionContext); - const isOpen = openItems.has(id); - - return ( - <div className="accordion-item"> - <button - className="accordion-header" - onClick={() => toggle(id)} - aria-expanded={isOpen} - aria-controls={`accordion-content-${id}`} - > - {title} - </button> - <div - id={`accordion-content-${id}`} - className={`accordion-content ${isOpen ? 'open' : ''}`} - aria-hidden={!isOpen} - > - {children} - </div> - </div> - ); - }; - - // Usage - <AccordionProvider allowMultiple={true}> - <AccordionItem id="item1" title="Section 1"> - Content 1 - </AccordionItem> - <AccordionItem id="item2" title="Section 2"> - Content 2 - </AccordionItem> - </AccordionProvider> - - // Plus: CSS modules, styled-components, animation libraries, - // testing utilities, storybook stories, TypeScript definitions... -
- -
-

❌ Framework Accordion Problems:

-
    -
  • Massive bundle size for simple disclosure functionality
    • -
  • Complex state management for basic show/hide
    • -
  • Component lifecycle overhead and re-render issues
    • -
  • Prop drilling and context complexity
    • -
  • Testing requires mocking framework internals
    • -
  • Server-side rendering complications
    • -
  • Framework version dependency and upgrade pain
    • -
  • Over-engineered solution for semantic HTML problem
    • -
-
-
- -
-

Native Details/Summary Mastery ELEGANT

- -
- 🎯 Semantic Excellence: Built-in ARIA, keyboard navigation, screen reader support, zero JavaScript required, works everywhere, follows web standards perfectly. -
- -
- Native HTML Accordion Section 1 -
- This accordion uses zero JavaScript, works with screen readers, has built-in keyboard navigation, and provides semantic meaning. The browser handles all state management, animations, and accessibility concerns. -
-
- -
- Why Native HTML Elements Rule -
-

Native HTML elements come with decades of accessibility research, cross-browser testing, and user experience optimization built-in. They work consistently across all devices and assistive technologies.

-

When you use semantic HTML, you're leveraging the collective wisdom of the web platform instead of reinventing the wheel with custom JavaScript.

-
-
- -
- Advanced Native Features -
-

The open attribute makes sections expanded by default. You can style the disclosure triangle, animate the content, and even nest accordions.

-
- Nested Accordion -
Nested accordions work perfectly with zero additional code.
-
-
-
- -
- <!-- The zen of native accordions --> - <details> - <summary>Click to expand</summary> - <div> - Content that's hidden by default, - but accessible to screen readers, - searchable by search engines, - and animated by the browser. - </div> - </details> - - <!-- Open by default --> - <details open> - <summary>Expanded by default</summary> - <div>This content is visible initially.</div> - </details> - - <!-- Nested accordions --> - <details> - <summary>Parent Section</summary> - <div> - <p>Parent content</p> - <details> - <summary>Child Section</summary> - <div>Nested content works perfectly</div> - </details> - </div> - </details> - - <!-- Optional: Custom styling --> - <style> - details { - border: 1px solid #ccc; - border-radius: 8px; - margin-bottom: 1rem; - } - - summary { - background: #f5f5f5; - padding: 1rem; - cursor: pointer; - font-weight: bold; - } - - summary:hover { - background: #e5e5e5; - } - - details[open] summary { - border-bottom: 1px solid #ccc; - } - - details > div { - padding: 1rem; - } - - /* Hide the default disclosure triangle */ - summary::-webkit-details-marker { - display: none; - } - - /* Custom disclosure indicator */ - summary::before { - content: '▶'; - margin-right: 0.5rem; - transition: transform 0.2s; - } - - details[open] summary::before { - transform: rotate(90deg); - } - </style> - - <!-- Optional: JavaScript for enhanced behavior --> - <script> - // Close other accordions when one opens (exclusive mode) - document.querySelectorAll('details').forEach(detail => { - detail.addEventListener('toggle', function() { - if (this.open) { - // Close other details elements - document.querySelectorAll('details[open]').forEach(other => { - if (other !== this) other.removeAttribute('open'); - }); - } - }); - }); - </script> -
- -
-

✅ Native Accordion Advantages:

-
    -
  • Zero JavaScript required - works without any scripts
    • -
  • Built-in accessibility and ARIA support
    • -
  • Semantic HTML with inherent meaning
    • -
  • SEO friendly - search engines index collapsed content
    • -
  • Keyboard navigation works automatically
    • -
  • Screen reader compatible out of the box
    • -
  • Consistent behavior across all browsers
    • -
  • Can be enhanced with CSS and optional JavaScript
    • -
-
-
+
+

✅ Native Date Input Excellence:

+
    +
  • Zero JavaScript required - works out of the box
    • +
  • Native OS date picker on mobile devices
    • +
  • Automatic keyboard navigation and accessibility
    • +
  • Built-in date validation and format handling
    • +
  • Consistent UX that users already understand
    • +
  • Automatic localization (user's preferred format)
    • +
  • Min/max date constraints built-in
    • +
  • Form validation integration works perfectly
    • +
+
+
-

🔍 Search & Autocomplete

-
-
-

JavaScript Autocomplete Chaos COMPLEX

+

🔍 Search & Autocomplete

+
+
+

JavaScript Autocomplete Chaos COMPLEX

-
- ⚠️ Accessibility Nightmare: Custom dropdown management, keyboard navigation bugs, screen reader confusion, focus trapping issues, ARIA implementation gaps. -
+
+ ⚠️ Accessibility Nightmare: Custom dropdown management, keyboard navigation bugs, screen reader + confusion, focus trapping issues, ARIA implementation gaps. +
-
- - - -
- -
- <!-- The overcomplicated approach --> - <input type="text" id="search" placeholder="Search..." - onkeyup="handleSearch(event)" - onkeydown="handleKeyNav(event)" - onfocus="showResults()" - onblur="hideResults()"> - <div id="results" class="dropdown-results"></div> - - <script> - let currentFocus = -1; - const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']; - - function handleSearch(e) { - const value = e.target.value.toLowerCase(); - const results = document.getElementById('results'); - - if (!value) { - results.style.display = 'none'; - return; - } - - const filtered = cities.filter(city => - city.toLowerCase().includes(value) - ); - - // Build HTML - results.innerHTML = filtered.map((city, index) => - `<div class="result-item" - onclick="selectCity('${city}')" - data-index="${index}">${city}</div>` - ).join(''); - - results.style.display = 'block'; - currentFocus = -1; - - // Manual ARIA updates - results.setAttribute('role', 'listbox'); - e.target.setAttribute('aria-expanded', 'true'); - e.target.setAttribute('aria-autocomplete', 'list'); - } - - function handleKeyNav(e) { - const results = document.querySelectorAll('.result-item'); - - if (e.key === 'ArrowDown') { - currentFocus++; - if (currentFocus >= results.length) currentFocus = 0; - setActive(results); - e.preventDefault(); - } else if (e.key === 'ArrowUp') { - currentFocus--; - if (currentFocus < 0) currentFocus = results.length - 1; - setActive(results); - e.preventDefault(); - } else if (e.key === 'Enter') { - if (currentFocus > -1 && results[currentFocus]) { - selectCity(results[currentFocus].textContent); - } - e.preventDefault(); - } else if (e.key === 'Escape') { - hideResults(); - } - } - - function setActive(results) { - results.forEach((item, index) => { - item.classList.toggle('active', index === currentFocus); - item.setAttribute('aria-selected', index === currentFocus); - }); - } - - function selectCity(city) { - document.getElementById('search').value = city; - hideResults(); - } - - function hideResults() { - document.getElementById('results').style.display = 'none'; - document.getElementById('search').setAttribute('aria-expanded', 'false'); - } - - // Handle click outside - document.addEventListener('click', function(e) { - if (!e.target.closest('#search') && !e.target.closest('#results')) { - hideResults(); - } - }); - - // Additional complexity for: - // - Debouncing API calls - // - Loading states - // - Error handling - // - Mobile touch events - // - Performance optimization - // - Screen reader announcements - </script> -
- -
-

❌ JavaScript Autocomplete Problems:

-
    -
  • Complex keyboard navigation implementation
    • -
  • Manual ARIA attribute management
    • -
  • Focus management and blur event handling
    • -
  • Dropdown positioning and z-index issues
    • -
  • Screen reader compatibility requires extensive work
    • -
  • Mobile touch and scroll behavior inconsistencies
    • -
  • Performance issues with large datasets
    • -
  • Cross-browser event handling differences
    • -
-
+
+ + + +
-
-

Native Datalist Perfection SIMPLE

+
+<!-- The overcomplicated approach --> +<input type="text" id="search" placeholder="Search..." + onkeyup="handleSearch(event)" + onkeydown="handleKeyNav(event)" + onfocus="showResults()" + onblur="hideResults()"> +<div id="results" class="dropdown-results"></div> -
- 🎯 Accessibility Paradise: Built-in keyboard navigation, screen reader support, native OS integration, consistent UX, zero JavaScript required. +<script> + let currentFocus = -1; + const cities = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']; + + function handleSearch(e) { + const value = e.target.value.toLowerCase(); + const results = document.getElementById('results'); + + if (!value) { + results.style.display = 'none'; + return; + } + + const filtered = cities.filter(city => + city.toLowerCase().includes(value) + ); + + // Build HTML + results.innerHTML = filtered.map((city, index) => + `<div class="result-item" + onclick="selectCity('${city}')" + data-index="${index}">${city}</div>` + ).join(''); + + results.style.display = 'block'; + currentFocus = -1; + + // Manual ARIA updates + results.setAttribute('role', 'listbox'); + e.target.setAttribute('aria-expanded', 'true'); + e.target.setAttribute('aria-autocomplete', 'list'); + } + + function handleKeyNav(e) { + const results = document.querySelectorAll('.result-item'); + + if (e.key === 'ArrowDown') { + currentFocus++; + if (currentFocus >= results.length) currentFocus = 0; + setActive(results); + e.preventDefault(); + } else if (e.key === 'ArrowUp') { + currentFocus--; + if (currentFocus < 0) currentFocus = results.length - 1; + setActive(results); + e.preventDefault(); + } else if (e.key === 'Enter') { + if (currentFocus > -1 && results[currentFocus]) { + selectCity(results[currentFocus].textContent); + } + e.preventDefault(); + } else if (e.key === 'Escape') { + hideResults(); + } + } + + function setActive(results) { + results.forEach((item, index) => { + item.classList.toggle('active', index === currentFocus); + item.setAttribute('aria-selected', index === currentFocus); + }); + } + + function selectCity(city) { + document.getElementById('search').value = city; + hideResults(); + } + + function hideResults() { + document.getElementById('results').style.display = 'none'; + document.getElementById('search').setAttribute('aria-expanded', 'false'); + } + + // Handle click outside + document.addEventListener('click', function(e) { + if (!e.target.closest('#search') && !e.target.closest('#results')) { + hideResults(); + } + }); + + // Additional complexity for: + // - Debouncing API calls + // - Loading states + // - Error handling + // - Mobile touch events + // - Performance optimization + // - Screen reader announcements +</script>
-
- - - - -
+
+

❌ JavaScript Autocomplete Problems:

+
    +
  • Complex keyboard navigation implementation
    • +
  • Manual ARIA attribute management
    • +
  • Focus management and blur event handling
    • +
  • Dropdown positioning and z-index issues
    • +
  • Screen reader compatibility requires extensive work
    • +
  • Mobile touch and scroll behavior inconsistencies
    • +
  • Performance issues with large datasets
    • +
  • Cross-browser event handling differences
    • +
+
+
-
- - - - -
+
+

Native Datalist Perfection SIMPLE

-
- - - - -
+
+ 🎯 Accessibility Paradise: Built-in keyboard navigation, screen reader support, native OS + integration, consistent UX, zero JavaScript required. +
-
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
<!-- The elegant native solution --> <label for="city-search">Choose a city:</label> <input type="text" id="city-search" list="cities" @@ -2030,179 +1757,182 @@ </script>
-
-

✅ Native Datalist Advantages:

-
    -
  • Zero JavaScript required for basic functionality
    • -
  • Built-in keyboard navigation (arrows, enter, esc)
    • -
  • Screen reader compatible with proper announcements
    • -
  • Native OS integration and consistent UX
    • -
  • Works with form validation automatically
    • -
  • Supports additional context with label attribute
    • -
  • Integrates with different input types (email, url, etc.)
    • -
  • Graceful degradation - still works as regular input
    • -
-
-
+
+

✅ Native Datalist Advantages:

+
    +
  • Zero JavaScript required for basic functionality
    • +
  • Built-in keyboard navigation (arrows, enter, esc)
    • +
  • Screen reader compatible with proper announcements
    • +
  • Native OS integration and consistent UX
    • +
  • Works with form validation automatically
    • +
  • Supports additional context with label attribute
    • +
  • Integrates with different input types (email, url, etc.)
    • +
  • Graceful degradation - still works as regular input
    • +
+
+
-

The Path to HTML Enlightenment

-

You've witnessed the truth: 90% of modern JavaScript UI frameworks are solving problems that HTML already solved. Native elements provide accessibility, keyboard navigation, screen reader support, consistent UX, and semantic meaning - all for free.

+

The Path to HTML Enlightenment

+

You've witnessed the truth: 90% of modern JavaScript UI frameworks are solving problems that HTML already + solved. Native elements provide accessibility, keyboard navigation, screen reader support, consistent UX, + and semantic meaning - all for free.

-

The choice is yours:

-
    -
  • Continue fighting the platform with complex JavaScript implementations
    • -
  • Or embrace the zen of semantic HTML and progressive enhancement
    • -
+

The choice is yours:

+
    +
  • Continue fighting the platform with complex JavaScript implementations
    • +
  • Or embrace the zen of semantic HTML and progressive enhancement
    • +
-

Stop reinventing the wheel. The web platform is your friend.

+

Stop reinventing the wheel. The web platform is your friend.

-
- "The best code is no code. The second best code is semantic HTML that leverages decades of browser engineering and accessibility research." -
+
+ "The best code is no code. The second best code is semantic HTML that leverages decades of browser engineering and + accessibility research." +
- \ No newline at end of file + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d69576f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "dhbw-html", + "version": "0.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "dhbw-html", + "version": "0.0.0", + "license": "ISC" + } + } +}