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
— 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:
— 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