It’s an Alpine.js kind of summer, tons of new projects are using it.
Apparently, even Caleb (creator of Alpine.js) Googles how to listen for key sequences/combos, here’s his workaround
For the curious, this is my hack to listen for the “Cmd+K Cmd+E” sequence using Alpine.
I love Alpine pic.twitter.com/UwgwSnGkOH
— Caleb Porzio (@calebporzio) August 3, 2020
And here’s @asantibanez‘s take on the same problem:
Had a similar case listening for Shift+Enter or Enter alone. Didn’t know how to do it with Alpine events. Good thing is that you can hook into native events and use Alpine to handle the rest. 💪
❤️ @Alpine_JS pic.twitter.com/nszmeTSvt7
— Andrés Santibáñez (@asantibanez) August 3, 2020
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
alptail.com by @userlastname - a collection of components just got a refresh, have a look if you’ve been struggling to integrate 3rd party
Decent update to https://t.co/b94o0nRphn!
New Alpine/Tailwind components + bunch of examples of integrating other CDN libraries to tackle needs (@pqina‘s FilePond, masonary grids, calendar inputs etc.). Super open to PRs as I build these sleep deprived 😅@calebporzio @hugo__df
— Daniel Palmer (@userlastname) August 3, 2020
If anyone has a better way to delay transitions, have a look here:
I feel like there’s got to be a better way to do this. #alpinejs pic.twitter.com/TZMoYzu2wN
— curtisblackwell °ㅛ° (@_cpb) August 4, 2020
Pretty sure most of us who’ve done Vue.js before working with Alpine have run into the “can’t find what’s wrong with Alpine” when it was a v-*
instead of x-*
attribute.
Using @Alpine_JS with old habits be like 😩 pic.twitter.com/dAptw1b51o
— Samuel Štancl (@samuelstancl) August 4, 2020
Master tip from Ryan, apparently Jeffrey Way is a big fan of this as well, stick x-data x-init="new ThirdPartyLib($el, /* config */)"
on an element to profit.
🔥 A lot of people don’t realise that @Alpine_JS is more than data reactivity. It can also replace those inline script tags that initialise / setup libraries.
In the example below, I’m using Alpine to hook Cleave.js up to an input element for formatting (https://t.co/JciADlz0Kn) pic.twitter.com/fkWqtcQaP2
— Ryan Chandler (@ryangjchandler) July 31, 2020
Dunno how many people reading this will use it in a microfrontend but running Alpine is easy and a great way to deliver interactive experiences for a low bandwidth/loading cost.
@Alpine_JS seems to be a good candidate for content driven, extremely fast loading #microfrontends . Examples - landing pages,navigation ui,dashboard widgets,login pages,forms with a payload of ~4-8K
— Tarun Kumar Sukhu (@TarunKumarSukhu) August 4, 2020
If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.
Here are this week’s Alpine.js adopters:
Demos:
Alpine.js in-depth: listen to JavaScript events using x-on by @hugo__df
Responsive Menu Toggle with Alpine JS by @austencam
Older post but still a great read, resurfaced by @cookingcodermuc: A comparison of a simple app in Vue.js and Alpine.js
For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.
Coming up - a set of @laravelphp Blade components based on @tailwindcss and @Alpine_JS that allow you to easily display documentation for your project anywhere in your blade files.
— Blade Docs (@bladedocs) August 6, 2020
github.com/willard/craftcms-rollupjs - A Starter Kit for Craft CMS and RollupJS with TailwindCSS and AlpineJS by @MacayWillard.
For the WordPress (theme) developers, check out Jackpine at jackpine.io.
What is Jackpine?
It’s a starter theme for WordPress that helps you build custom designs with a modern stack:
🌳 @TimberWP OOC + Twig templating
🦅 @tailwindcss utility-first CSS framework
🏔 @Alpine_JS slim JS framework
🎁 https://t.co/yil3M5LeK3 asset bundling / dev server
— Jackpine (@jackpine_wp) August 3, 2020