feat: add readme
This commit is contained in:
71
README.md
Normal file
71
README.md
Normal 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.
|
||||
Reference in New Issue
Block a user