Alpine.js Weekly - Alpine.js Weekly #89

Github Copilot is getting very good with @Alpine_JS code. I’m frequently surprised at how well it “guesses” my exact intentions.

— Rich Klein (@richeklein) May 14, 2022

Web component JS frameworks overview by their syntax and features: Svelte, React, Vue 3, Angular, SolidJS, Lit, Ember, Alpine.js. #javascript #tools

https://component-party.dev/

— nightwolfdev (@nightwolfdev) May 18, 2022

Super excited to be releasing the first version of Tetra, a full stack component framework for Django using Alpine.js

https://www.tetraframework.com/ It lets you build “hybrid” components - combining server state and user interactions seamlessly. Take a look!

— Sam Willis (@samwillis) May 24, 2022

Tips

So, @Alpine_JS‘ dispatch-function and @Wordpress‘ #Gutenberg-blocks don’t jive well, because Gutenberg-blocks don’t like it if one sends HTML-tags with $dispatch. Luckily, I found a solution, and it’s ugly but works:

https://stackoverflow.com/questions/72305214/how-to-fix-html-in-alpine-js-dispatch-when-using-in-a-wp-gutenberg-block?noredirect=1#comment127757100_72305214

— Robbert Vervuurt (@Rvervuurt) May 24, 2022

For anyone who’s not aware of Alpine.js custom directives, see the following demo

Alpinejs has the same concept:

— Etienne Deschênes (@atn1976) May 24, 2022

And relevant docs for custom directives

Custom directive with @Alpine_JS is super. https://alpinejs.dev/advanced/extending#custom-directives

— OLIVERSINZ (@zinsouoliviers) May 25, 2022

@Alpine_JS 🤯can assign dom event handler use setAttribute

— Ihsan Berahim (@ihsanberahim) May 27, 2022

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:

• safranvert.fr is built with WooCommerce, Tailwind and Alpine by @amphibee
• muted.io/lil-beat-maker/ - a beat-making machine built with Tone.js and Alpine.js by @cageapp
• chemicalweapons.gppi.net/podcast/ is built with Eleventy and Alpine by @fubits
• ilancaworks.com is built with Alpine.js and Eleventy by @javierarcheni
• thmsmlr.com/ascii is built with Alpine.js by @thmsmlr
• t-mobile.com is adopting Alpine.js for their homepage and marketing pages by @adazlian
• simonakash.github.io/e-market/ is built with Alpine and Tailwind by @saymonakash310
• unli.xyz/eject/ is built with Alpine.js and AlaSQL by @blankxk
• liftoffcourse.com is built with Alpine.js, Tailwind and WordPress, noticed by @Joey_Farruggio

Demos: - a simple lists-based html generator backed by Alpine.js by @macint0shpie - Alpine.js x-intersect vs Intersection Observer API by @zinsouoliviers - Disable the form’s submit button, once the form is submitted in Alpine.js by @ahmedaljawahiry - Cookies alert with Tailwind & Alpine via @TwComponents - Datepicker with TailwindCSS and AlpineJS by @mithicher via @TwComponents - “Copy to Clipboard” with Alpine.js by @yucelfaruksahan

• Table UI with Tailwind and Alpine by @mithicher via @TwComponents
• automatic count ticker with Alpine via @TwComponents

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Toasts with Django+HTMX by @BenoitBlanchon

AlpineJS pass prefilled values to x-model by @web_dock

Masking Input Fields With Alpine.js by @JustinBTechGuy

Creating Dynamic HTML Tooltips with Alpine and alpine-tooltip by @ryangjchandler

Working with arrays in Alpine.js stores by @T5Trampoline

Dutch address autocomplete with Alpine.js by @jeffreyrossum

Website 101 Podcast - AlpineJS with Caleb Porzio: Lightweight javascript in your markup. by @mikemella

Django, HTMX and Alpine.js: Modern websites, JavaScript optional by @saaspegasus

The Big Elixir 2022 - Building A Distributed App With Telegram + LiveView - Mohammad Maqbool Alam by @thebigelixir

Image Upload Preview in Alpine.js by @raymondcamden

Accessible Accordion With AlpineJS Using x-id and $id by @JamesAuble

Digging into Alpine.js by @raymondcamden

Comparison of lightweight frameworks / libraries

Code & Tools

github.com/bymattlee/bymattlee-11ty-starter is a start with rollup, Alpine, GreenSock, Highway JS by @bymattlee

mistralui.com/ is a collection of Alpine and Tailwind components by @Zraly

A VSCode Extension for Alpine.js by @cferbowers, includes syntax highlighting, autocomplete and snippets: marketplace.visualstudio.com/items?itemName=pcbowers.alpine-intellisense

tetraframework.com/ is a full stack reactive component framework for Django using Alpine.js.

<is-land> (github.com/11ty/is-land) is a framework-independent partial hydration islands architecture implementation. Demos including an Alpine one at is-land.11ty.dev/. By @eleven_ty

A tiny Alpine plugin for auto growing textarea by @itsmarkmead: github.com/markmead/alpinejs-textarea-autogrow.

Adopter Reactions

Alpine JS is really good for building small prototypes. Very easy to setup and well documented 💯

— Apoorv | Plxity⚡💎🌋 ⭐️ (@apoorv_taneja) May 14, 2022

The tools that excite me these days are Alpine.js, Turbo, Laravel Livewire, and Liveview. SPAs introduce more toil than I’ll stomach on my personal projects

As far as strictly client-side frameworks: React isn’t perfect, but it’s my favorite one I’ve tried

— Tyler Smith (@tylerlwsmith) May 17, 2022

Gotta love @Alpine_JS + @tailwindcss

Perfect combination!

— jjaimealeman (@jjaimealeman) May 17, 2022

Used @Alpine_JS to open/close a mobile menu with Tailwind transitions and I think it’s super cute 😻

— Andrea Porotti (@andrea_porotti) May 18, 2022

Props to the team behind the new docs for Alpine.js v3 [https://t.co/2IUSQ2gIUJ] - it’s a huge step forward and love the new interactive features. So much power behind this nimble library <3

— Cristian Rasch (@cristianrasch) May 18, 2022

Used Alpine JS on a static page for the first time and it was pretty neat once I finally got the hang of things! https://t.co/CxVGzrFQOo

And Tailwind CSS too. I’m all aboard the Tailwind train now. Don’t have to keep coming up with class names and can style stuff way quicker.

— Amanda M 🌆 (@amandamcodes) May 19, 2022

In case you missed it, @Alpine_JS is the new jQuery*

*This is meant as a compliment 😅

— Andrew Schmelyun (@aschmelyun) May 22, 2022

From the git logs…

Move search page javascript to jquery (9 years ago)

⏩⏩⏩

Removes jQuery from web frontend (45 minutes ago)

End of an era. Better start on the upgrade from @Alpine_JS v2 to v3 now.

— Dave Marshall (@davedevelopment) May 23, 2022

The more I work with @Alpine_JS the less I miss Vue. Don’t get me wrong, I like Vue, but this minimalistic approach is just so relaxing.

— Dominik Lenz (@slpstn23) May 25, 2022

I’ve started using AlpineJS while developing HubSpot modules and it’s 🔥

Highly recommended if you want to simplify your JS!

— Jared Moats (@_Jaroldo_) June 1, 2022

A moment of appreciation for the great software engineers who have made developing web apps in 2022 such an amazing experience. @laravelphp @vuejs @Alpine_JS @djangoproject 👏🏻

— Evgeny Romanov (@intellimatic) June 3, 2022

Just had a try of @Alpine_JS. It’s lovely. Ideal for just a little sprinkle of interactivity.

— David Fitzgibbon (@loficodes) June 9, 2022