History, errors, and enhancement
Build a progressively enhanced task interface
Combine the complete course into a list that works as ordinary HTML and becomes faster with HTMX.
8 minute lesson
Build a task interface that remains a normal server-rendered site underneath its HTMX enhancements.
Start with full-page routes for listing, creating, completing, deleting, and filtering tasks. Use real links and forms. Put authentication, per-task authorization, CSRF protection, validation, and output escaping in shared server logic before creating fragment responses.
Then enhance one interaction at a time:
- create returns the complete list region so ordering, count, and empty state stay coherent
- validation returns the form with status
422, preserved safe values, and field messages - completion replaces one task row with
outerHTML - deletion removes its row only after a successful server response
- a status filter updates the task region and pushes a directly navigable query URL
Add a textual request indicator and disable the relevant submit control while creating. Make creation idempotent if duplicates matter. Provide a site-level connection message for htmx:sendError, but distinguish an unknown network result from a confirmed HTTP failure.
Keep full pages and fragments in shared templates. Handle HX-History-Restore-Request with enough HTML to restore the page. Add hx-history="false" if any task content is too sensitive for local history snapshots.
Test the finished system as a contract:
- open every public URL directly and refresh it
- use Back and Forward across filters
- submit empty, duplicate, unauthorized, and valid values
- force
422,403,500, timeout, and offline behavior - complete the workflow with JavaScript disabled
- use only the keyboard and verify focus after errors and deletion
- inspect every request, response fragment, target, and swap
The final interface should feel faster with HTMX, while correctness remains in HTTP routes and server-rendered representations.
Lesson completed