Alpinejs

This is a pattern guide that'll save you from the classic Alpine mistake of cramming entire JavaScript functions into HTML attributes. It gives you a clear cutoff rule (50 characters max in directives), shows you when to extract logic into proper functions versus keeping simple toggles inline, and covers the full directive set with event modifiers and transition helpers. The decision tree at the end is genuinely useful: simple state stays inline, anything with methods gets extracted, reusable stuff goes into Alpine.data(), and shared state becomes a store. If you've ever written a 300-character x-data attribute and felt dirty about it, this codifies the better way.