Alpine.js Weekly - Tips for Alpine.js Productivity

If you still haven’t installed them, the latest version of the community devtools is available on Chrome and for Firefox.

Not too many demos this week:

• Count characters typed - AlpineJS by @Xewl

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

To make up for the lack of demos, I found some awesome tips to share, thanks to @brbcoding and @anu:

• 🤦‍♂️ If you’re using “x-show” with @Alpine_JS and wondering why there’s still a flash of hidden content despite tacking on “x-cloak”, make sure you don’t forget to add “[x-cloak] { display: none; }” to your CSS. Little gotcha that bit me on a new project…

  — Placebo Domingo (@brbcoding) January 30, 2020

• Useful tip for anyone using @Alpine_JS and @phpstorm – add the AlpineJS directives as custom HTML attributes to remove warning lines. Also enables autocompletion 🎉

  Settings > Editor > Inspections > HTML > Unknown HTML tag attributes pic.twitter.com/5VkUKSSLgB

  — anu (@anu) April 25, 2020

If tips aren’t your thing and you’re just stuck, feel free to ask in the Alpine.js Community Discord or on StackOverflow/GitHub Issues

Articles & Tutorials

Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch by @hugo__df

Learn Alpine.js - Codecourse the new Alpine.js course by our new sponsor @teamcodecourse

“Sprinkles” showdown: Alpinejs vs Stimulusjs by @minimulx it’s available both as video and notes.

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS by @hugo__df on CSS Tricks. A working title & good explanation for this post is “What is Alpine.js & why should I care?” (see the Twitter thread).

Code & Tools

Spruce - A lightweight state management layer for Alpine.js by @ryangjchandler is great for when using the window to pass events becomes clunky.

2.3.1

Features:

• Alpine.version property 👍
• Notes in README about CSP support

Fixes:

• x-model issues with non-text inputs (fixes a regression introduced as part of a Safari fix)