71 lines
2.9 KiB
Markdown
71 lines
2.9 KiB
Markdown
# 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. |