aRustyDev / aRustyDev/mdbook-htmx

docs(adr): ADR-0007: Progressive Enhancement as Baseline Requirement

Open
#15 0 comments 0 reactions 1 assignee Claimed by @aRustyDev View on GitHub
documentation
Dominant language
Rust
Stars
0
Forks
1
PR merge metrics
No merged PRs in 30d

Description

# ADR-0007: Progressive Enhancement as Baseline Requirement

## Status

Accepted

## Context

HTMX is often misunderstood as "adding JavaScript to make things dynamic." The opposite is true: HTMX enables server-rendered HTML to be enhanced with dynamic behavior while maintaining full functionality without JavaScript.

For documentation sites, this is critical:
- Search engine crawlers may not execute JavaScript
- Users on slow connections benefit from immediate content
- Accessibility tools work better with semantic HTML
- Corporate firewalls sometimes strip JavaScript

## Decision Drivers

1. **Accessibility** - Screen readers and assistive tech need working HTML
2. **SEO** - Search engines must index content without JS execution
3. **Resilience** - Sites must work when JS fails/blocks/loads slowly
4. **HTMX Philosophy** - Enhancement, not replacement

## Principle

> **All mdbook-htmx output MUST function completely without JavaScript.**
> JavaScript (via HTMX) enhances the experience but never underpins it.

## Implementation Requirements

### 1. All Links Must Be Real Links

```html

Chapter 2

Chapter 2
```

### 2. Forms Must Submit Normally

```html


Search

```

### 3. Full Pages Must Be Complete

The `pages/` directory contains fully-rendered HTML documents:

```html

Chapter 2 - My Book




```

No `` fallbacks needed - the page IS the fallback.

### 4. Content-First Loading

```html

```

### 5. Lazy Loading Is Progressive

Lazy-loaded sections must show meaningful placeholder content:

```html

Examples are loading... View examples page

```

## Verification Checklist

For every generated page, verify:

- [ ] Page renders complete content with JS disabled
- [ ] All navigation links work without JS
- [ ] Search form submits and returns results without JS
- [ ] Sidebar displays full chapter list without JS
- [ ] No empty containers that require JS to populate
- [ ] No `` tags (they indicate broken baseline)

## Testing

```bash
# Chrome DevTools: Disable JavaScript
# Settings > Preferences > Debugger > Disable JavaScript

# Or via CLI
curl -s https://docs.example.com/chapter-1 | grep -c ""
# Should return 1 (content present)
```

## Consequences

### Positive
- Works everywhere: slow networks, corporate proxies, screen readers
- SEO-friendly: crawlers see full content
- Fast First Contentful Paint: no JS blocking
- Resilient: partial JS failures don't break navigation

### Negative
- Slightly larger initial HTML (full content vs skeleton)
- Server must render complete pages, not just fragments
- Some dynamic features need careful design (e.g., live search needs form fallback)

## References

- [HTMX Essays: Progressive Enhancement](https://htmx.org/essays/progressive-enhancement/)
- [Hypermedia Systems: Chapter 2 - Progressive Enhancement](https://hypermedia.systems/hypermedia-components/)
- [MDN: Progressive Enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.