Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
May 15, 2020

How fast can _you_ learn Alpine.js?

A few courses have been cropping up, the latest of which is Sprinkle declarative, reactive behaviour on your HTML with Alpine JS on egghead.io by @simonswiss who apparently wrote an Alpine.js course without knowing there’s a Discord community.

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

@bep, the creator of Hugo (the Static Site Generator, not the curator of this newsletter) and Simone have been working on a PR to fix some turbolinks issues and in the meantime had this public service announcement for anyone who’s doing Turbolinks + Alpine.js:

Just a heads up about @calebporzio ‘s AlpineJS – before going down that route, you could saye some gray hairs by waiting for this to merge first: https://t.co/JVA9E764ig (esp. if Turbolinks is also on the menu).

— GoHugo.io (@GoHugoIO) May 8, 2020

There’s a bunch of love between Alpine.js and static site generators, according to @STOQE Eleventy and Alpine.js is a match made in heaven.

Made with Alpine.js

The big one this week is transistor.fm adopting Alpine + Tailwind for their dashboard rebuild.

  • northatlantic.mike-martin.ca/ by @MikeMartin604 is built with Alpine.js
  • A Ping Pong Score Board by @victormustar
  • giftaplate.org is Tailwind and Alpine.js, Python/Flask
  • @justinjunodev is looking forward to WordPress + Alpine.js
  • taptourist.co.uk/explore by @MadeByMayo is built with Alpine.js
  • burstcommerce.com/flair-release-notes-scheduling-unpublishing-copying/ by @atomgiant is rebuilt with Alpine and Tailwind

Demos

  • A ‘site banner message’ component that can display multiple messages, animates their closing, and remembers closed messages via localStorage by @philw_
  • @simonswiss is working on displaying pups with Alpine.js for his Alpine.js course on egghead
  • A Tailwind Accessibility config overview by @Xewl
  • A dropdown with focus management using classNames by @philw_
  • Transition tips by @JonasKuske
  • “playlist” for audio playback by @michaeldyrynda
  • Alpine.js slider with native scroll by @hus_hmd
  • Progressively enhanced Checkbox / Toggle by @underscoresdev
  • Analytics Add-on Usage Examples by

Articles & Tutorials

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS (video) by @simonswiss

Alpine.js State Management with Spruce (video) by @ryangjchandler on codecourse.com

Alpine.js + jQuery/JavaScript Plugin Integration: a Select2 example by @hugo__df.

For more posts like this, you can join the Alpine.js Handbook Knowledge Base (Paid), that’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

The @shat/stylenames package allows you to have object/array style bindings, like :style="styleNames({ backgroundColor: 'red' }) by @hugo__df.

alpine-minimal-boilerplate, is a one-file Alpine.js boilerplate. The irony of a boilerplate for a project that doesn’t need one isn’t lost on me. What’s nice is that you’ve now got a place to refer to for Alpine.js links: example.codewithhugo.com/alpine-minimal-boilerplate/.

The Alpine.js repo is now at 7.6k stars, which means people are liking what they see.

2.3.4

Fixes:

  • x-onon anx-fored element wasn’t being registered, fixed now
  • Fix cursor placement bug on Safari
  • Ignore extra whitespace in:class="{...}"bindings
  • Mirror VueJS’s behavior for binding false/null/undefined values to attributes
Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.