Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
May 1, 2020

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)
Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.