Alpine.js Weekly - Alpine.js Weekly #57

“Q1 2021 State Of JavaScript Libraries and Tools: Frameworks” report is out 🎉🎉🎉 https://moiva.io/blog/2021-q1-state-of-js-frameworks
Best Q1 2021 Top Performers:@reactjs @Alpine_JS @solid_js @angular
Marko (@MarkoDevTeam)#js #moiva #report pic.twitter.com/cQvaMW5CZN

— Alexey Antipov 🐟 Moiva.io 🐟 (@_aantipov) April 13, 2021

This newsletter supported by my GitHub Sponsors.

Tips

🔥 #alpineJS tip

When building in CMS-land I recently started using x-for from @Alpine_JS to template out HTML quickly where the CMS fields haven’t been created yet.
(The same idea can be used with components)

It works great in @CraftCMS, @statamic or whatever CMS you use!

— David A. Lindahl (@austriker27) April 15, 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:

• asn.org.uk has been rebuilt with Alpine and Tailwind. The site-wide notice uses madmurphy/cookies.js and a content hash-based cookie. Thanks to @mattradford for sharing & building.
• insectecofood.com is built on Drupal 9 with Alpine.js and TailwindCSS/UI, by @sinyayadynya
• clubstudio.co.uk is built with CraftCMS, Tailwind and Alpine, by @scottpwakefield
• ta-styled-plugins.com is built with Alpine & Tailwind, by @markusantonwolf

Demos:

• Profile card with inline editing using Alpine.js & WindiCSS by @rehhouari
• Class Toggle comparing Vanilla JS, jQuery, and Alpine.js by @Joey_Farruggio is built with Alpine
• Team Section - Hover Animation by @alipanick
• Tom select initialisation with Alpine by @hugronaphor

Articles & Tutorials

How to make your Web Pages look Prettier with Alpine.js

Let’s Build An Instagram Clone With The PETAL(Phoenix, Elixir, TailwindCSS, AlpineJS, LiveView) Stack by @elixirprogrammr

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

@markusantonwolf‘s TA-Gallery got a docs makeover & new features: ta-styled-plugins.com/ta-gallery/

@ryangjchandler has released Spruce 2.7.0.

Adopter Reactions

Looks like Hugo + inline partials + tailwind + alpinejs might be a pretty nice combo for fast static sites.

— Michael Bromley (@michlbrmly) April 12, 2021