Accessible progressive UI
Coordinate Alpine and HTMX
Let HTMX own server communication and HTML replacement while Alpine owns local interaction state.
9 minute lesson
HTMX swaps the issue list after a server action; Alpine controls the local filter panel and new rows initialize from their markup. That contrast gives us something useful to test instead of a rule to memorize.
The tools work well together when their ownership boundary is explicit and replaced DOM is expected to initialize again. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.
The happy path can hide a bad design: you can let both tools issue the same request or mutate the same DOM subtree unpredictably and still get one successful demo. Push past the demo. assign network and DOM ownership, listen to lifecycle events only where coordination is necessary, and test swaps, then test the condition most likely to prove the choice wrong.
The module is moving toward one outcome: Finish the issue board as a progressively enhanced interface that remains understandable with keyboard, assistive technology, slow networks, and JavaScript failure. Save the before-and-after evidence now; it will make the final project review much more honest.
Replace the issue list while an editor is open and decide intentionally which state survives. Save the evidence, then explain which requirement would force you to choose a different design.
Lesson completed