Alpine.js Weekly - Alpine.js Weekly #50

Here are this week’s Alpine.js adopters:

• artmuseumgr.org by @onedesignco is built with Alpine.js
• proagentboard.com is built with Alpine, Tailwind and Laravel by @BotezatuDima
• laracon.net is built with Tailwind, Alpine, Vite by @Caneco
• @hyva_io sites: limburgiavlaai.nl, uitgeverijpluim.nl, die-ballondrucker.de and batirmoinscher.com are leveraging Alpine

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.

This email is supported by my GitHub Sponsors.

Demos:

• Alpine and Tailwind Tab Bar by @LarsKlopstra
• Alpine.js + TailwindCSS Lightbox Modal by Apatrid by @TwComponents
• Multi Range Slider with Alpine.js by t7team by @TwComponents
• Analytics Card with AlpineJS by Scott Windon by @TwComponents
• Stock Chart with AlpineJS and ChartsJS by Scott Windon by @TwComponents
• Color Picker with TailwindCSS and AlpineJS by mithicher by @TwComponents
• A minimal and accessible web application signup form using Tailwind and Alpine by @BrentArcane

Articles & Tutorials

[Chinese] HOWTO: 如何学习 Alpine.js a complete guide for newbies who want to learn Alpine.js by @xiqingongzi

[French] [Video] Alpine.js le micro-framework pour frontend by @Evilznet

[Video] Introducing Presto: Syntactically-natural, no-JS HTML Componentization — for Alpine JS by @stephancasas

Setting up dark mode with Tailwind CSS and Alpine.js by @jase_languasco

How to create an Image Upload Viewer with Alpine.js by @Tiago_Ferat

[Russian] Создаём To-do List на Alpine.js by @maxsite

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

The Magic Helpers project for is now at version 1.0! $​component and $​parent helpers are functionally in line with a native Alpine component, see the release github.com/alpine-collective/alpine-magic-helpers/releases/tag/v1.0.0, props to @kevinbatdorf for his work on this.

Adopter Reactions

Working with Bootstrap and jQuery again feels like such a chore after so long working with @tailwindcss and @vuejs or @Alpine_JS.

— George Buckingham (@gbuckingham89) February 17, 2021

oh wow @Alpine_JS is great for basically anything i didn’t want to use jQuery in the first place anyways

— Gregor Vostrak (@introsort) February 17, 2021

I support @calebporzio because i’m on the verge of replacing a 300kb Vue based form with 40kb of @Alpine_JS javascript. All the heart. Thank you Caleb.

— awcodes (@awcodes1) February 16, 2021

Plus j’utilise @tailwindcss plus je reprends plaisir à faire du front 😍
Et je ne me suis pas encore penché sur @Alpine_JS, ce sera la prochaine étape !

Manque qu’à retravailler les pages CV et contat et je pourrais enfin mettre en ligne mon blog sous @eleven_ty \o/

— Franck 🍋👨🏻‍💻 (@furankum) February 16, 2021

AlpineJS may be ugly as hell to look at but it works really beautifully. I’ve just used it to add Show/Hide Password functionality to a project in about 2 minutes, replacing “Confirm Password” - most users seems to prefer that approach.

— Code With Feeling (@codewithfeeling) February 15, 2021

Designing landing pages with @tailwindcss feels like cheating. This is currently a work in progress and not finished yet, but it took less than two hours to build this and it is fully responsive and includes a toggle (@Alpine_JS) for mobile navigation. pic.twitter.com/gOiu19NZRf

— Dominik Geimer (@DominikGeimer) February 15, 2021

W/o so many optmizations the Lighthouse score is pretty good.
The website is also using just a little bit of @Alpine_JS , and some custom API to connect to Facebook content.
THANK YOU for all these great tools and ressources, definitely deserve more visibility in France ! pic.twitter.com/oEduYUPETT

— Baptiste Turquet (@baptisteturquet) February 14, 2021

Alpine.js is amazing, I don’t know why I waited so long to try it.

Feels like Tailwind & Vue, but is super minimal and works well with SSR applications!

— Daksh 👨‍💻🙅‍♂️ (@dakmig) February 14, 2021

I have put off looking at the core technologies behind @Hyva_io because I’ve not been in the best headspace to look at new tech.

Consider me sold on @tailwindcss and @Alpine_JS now that I’ve looked at them tonight.

I know what my next web project will be using!

— indefinite[dev]il (@indefinitedevil) February 12, 2021

The 2021 SaaS startup stack:

• Laravel & Spark
• Tailwind CSS
• Alpine JS
• Digital Ocean (Droplets/App Platform)#startup #Laravel #business

— Vaugen Wakeling (@vaugenwake) February 13, 2021