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:
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.versionproperty 👍- Notes in README about CSP support
Fixes:
x-modelissues with non-text inputs (fixes a regression introduced as part of a Safari fix)