feat: add readme

This commit is contained in:
Michael Czechowski
2025-05-30 10:52:15 +02:00
parent 4a19d868d2
commit 88d8270650

71
README.md Normal file
View File

@@ -0,0 +1,71 @@
# No JavsScript, No cry
A comprehensive demonstration of how native HTML elements solve 90% of common UI problems without JavaScript frameworks.
## Author
Michael W. Czechowski <mail@dailysh.it>
## Overview
This project exposes the absurdity of JavaScript wheel-reinvention and demonstrates the path to enlightened web development through semantic markup and progressive enhancement.
## Topics Covered
### 🎯 Collapsible Content
- **JavaScript Problem**: Complex event handling, manual ARIA management, broken accessibility
- **HTML Solution**: `<details>` and `<summary>` elements with built-in keyboard navigation and screen reader support
### 🪟 Modal Dialogs
- **JavaScript Problem**: Focus trapping, ESC key handling, backdrop clicks, memory leaks
- **HTML Solution**: Native `<dialog>` element with automatic focus management and ARIA semantics
### 📝 Form Validation
- **JavaScript Problem**: Custom regex patterns, manual error display, inconsistent UX
- **HTML Solution**: HTML5 input types (`email`, `url`, `tel`) with built-in validation and proper error handling
### 📊 Progress Indicators
- **JavaScript Problem**: Manual width calculations, custom ARIA updates, animation performance issues
- **HTML Solution**: Native `<progress>` element with semantic meaning and automatic screen reader announcements
### 📅 Date Pickers
- **JavaScript Problem**: Massive libraries (jQuery UI), complex keyboard navigation, mobile UX issues
- **HTML Solution**: Native date inputs (`date`, `datetime-local`, `time`, `month`, `week`) with OS integration
### 🪗 Accordions
- **JavaScript Problem**: Framework overkill, complex state management, massive bundle sizes
- **HTML Solution**: `<details>`/`<summary>` elements with zero JavaScript required
### 🔍 Search & Autocomplete
- **JavaScript Problem**: Custom dropdown management, keyboard navigation bugs, focus issues
- **HTML Solution**: `<datalist>` element with native OS integration and built-in accessibility
## Key Benefits of Native HTML
-**Zero JavaScript dependencies**
-**Built-in accessibility and ARIA support**
-**Consistent cross-browser behavior**
-**SEO-friendly semantic markup**
-**Progressive enhancement ready**
-**Reduced bundle sizes and faster loading**
-**Native keyboard navigation**
-**Screen reader compatibility out of the box**
## Philosophy
> "The best code is no code. The second best code is semantic HTML that leverages decades of browser engineering and accessibility research."
Stop fighting the platform. HTML already solved these problems. Embrace semantic markup and progressive enhancement for a better, more accessible web.
## Getting Started
```bash
npm start
```
Serves the demo on `http://localhost:1312`
## The Choice
- Continue fighting the platform with complex JavaScript implementations
- **Or embrace the zen of semantic HTML and progressive enhancement**
The web platform is your friend. Stop reinventing the wheel.