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:

  1. open every public URL directly and refresh it
  2. use Back and Forward across filters
  3. submit empty, duplicate, unauthorized, and valid values
  4. force 422, 403, 500, timeout, and offline behavior
  5. complete the workflow with JavaScript disabled
  6. use only the keyboard and verify focus after errors and deletion
  7. 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