State of JS: 82% satisfaction with Alpine.js
Seems like Alpine made some waves in the State of JS 2020, you can see the JS framework results at: https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
Frontend framework satisfaction (%) ranking from “State of JS 2020”
1️⃣ Svelte (89%)
2️⃣ React (88%)
3️⃣ Vue.js (85%)
4️⃣ Alpine.js (82%)
5️⃣ Preact (78%)
6️⃣ LitElement (78%)
7️⃣ Stimulus (67%)
8️⃣ Angular (42%)
9️⃣ Ember (42%)What’s your favorite?
— Oliver Jumpertz (@oliverjumpertz) January 13, 2021
This email is supported by my GitHub Sponsors.
State of CSS 2020 and State of JavaScript 2020. Interesting to see atomic CSS, Alpine.js and Svelte gaining traction.https://t.co/VKVZtDpOSNhttps://t.co/L0innFroIu
— Smashing Magazine (@smashingmag) January 13, 2021
Tips
Great snippet by Kevin if you’re an Tailwind UI user, auto-copy Alpine.js code from Tailwind UI:
If you’re using my Tampermonkey snippet to auto copy the @Alpine_JS code from @tailwindui I just updated it to work with their recent changes. It will copy the exact markup used in their demos including the Alpine directive, etc.https://t.co/WPYXratqX2
— Kevin Batdorf (@kevinbatdorf) January 14, 2021
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:
- goldcard.nat.gov.tw/en/, Taiwan’s new website for the “Gold Card” is built with Alpine and Tailwind spotted by @markusantonwolf
- godot-proposals-viewer.github.io a godot engine feature proposals viewer by @HugoLocurcio is built with Alpine.js
- plantr-nz.herokuapp.com by @elliotclydenz is built with Alpine
- kaidesu.com by @kai___desu is built with Alpine.js and has brand new “dark mode”
- threadstart.io by @scholz_felix is built with Alpine.js
Demos:
- a three-elements + Alpine.js experiment by @hmans
- Validation with Alpine.js + iodine by @elliotclydenz
Articles & Tutorials
[Russian] Работа с куками в Alpine.js by @maxsite
PETAL Stack in Elixir by @ThinkingElixir
[French Podcast] Alpine JS, petit mais costaud ! by @PatrickFaramaz
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
TALL preset for Laravel v3.0.0 has been released, with support for Tailwind v2, by @ryangjchandler.
v2.5.0 of Spruce is out, with methods to work with Spruce from outside of Alpine.js components.
Another @ryangjchandler release, the $clipboard magic helper (which has been loaded by 30k people this month): v0.2.0
In last week’s newsletter, we had a tip about loading up Alpine without the CDN in a Laravel project. @magicroundabout has made an attempt at an asset cacher for this use-case (minus the build step): github.com/rosswintle/laravel-asset-cache
Adopter Reactions
The combination of @tailwindcss and @Alpine_JS is indeed 👌!
Very very productive.
— Jesse Scaryland (@youngElPaso) January 13, 2021
Hey I just started using @Alpine_JS in my Django project with @tailwindcss. I have to say it is awesome. It adds interactivity to my vanilla js frontend in seconds.
— yum (@AntarikshaVerm2) January 9, 2021