Alpine.js Weekly - Detecting key combos in Alpine

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