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
Tips
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
Made with Alpine.js
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:
- freddyfeedback.com by @FreddyFeedback. Both the widget and the dashboard were built using AlpineJS.
- findmeastream.com by @adrexler is built with Laravel, Livewire, a bit of Alpine and Tailwind.
- wpadmingallery.com by @meszarosrob is built with Alpine.js
- radioslipstream.com by @thedamon is built with Eleventy and Alpine.js (migration from WordPress).
- showcase2020.architecturefringe.com - Graduate Showcase for @ArchiFringe by @j_greig is built with CraftCMS, Alpine.js and Tachyons, design credit to @offfbrand
- dominik-geimer.com by @DominikGeimer is Alpine.js, Tailwind and Livewire
- systemuicons.com a growing collection of clean and simple icons designed by @CoreyGinnivan is built with Alpine.js and TailwindCSS
- austencam.com by @austencam is Alpine, Tailwind and Statamic
- buzzingpixel.com by @tjdraperpro will be seeing a new Alpine.js version soon (current Craft + jQuery).
- nightowl.fm by @tjdraperpro is in the same situation, currently CraftCMS but a new version will run Alpine & be built on top of Slim
- alpinejs-dash-docset by @slmd_macau run Alpine.js
- testy-discovery.surge.sh by @Virinchi_cv is built with Alpine.js and Tailwind.
- romanrangersfc.co.uk by @terry_upton, built for his boys’ football club, is Alpine.js, CraftCMS and TailwindCSS.
Demos:
- A file selector with size limit in a contact form by @slovenianGooner
- a Github inspired habit tracker by @austencam
- a chat ui by @asantibanez
- demo chat app with auto focus, textarea resize, search and sending by @asantibanez
- Analytics Card with AlpineJS by Scott Windon through @TwComponents
- Stock Chart with AlpineJS and ChartsJS by Scott Windon through @TwComponents
- Simple Welcome Card with AlpineJS action by Scott Windon through @TwComponents
- A Custom Select Menu with Tailwind by @victoryoalli
Articles & Tutorials
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.
Code & Tools
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