Archive

Tips

#AlpineJS Tips

Use shorthand conditionals when you want to add a class to the element based on an alpine property using x-bind. #laravel #livewire #TALL

— Tushar Gugnani (@tushar_web) May 9, 2022

#AlpineJS Tips

No need for setting id of the element and accessing it via document.getElementByID

Use x-ref in combination with $refs is for easily accessing DOM elements directly.

See video example of using x-ref in building Stepper component : https://t.co/zqqatNCQXF

— Tushar Gugnani (@tushar_web) May 12, 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:

• caniphp.com is built with Alpine and Tailwind by @magicroundabout
• www.auzdevs.com is made with Tailwind, HTMX, Alpine,
• muted.io/lil-beat-maker/, a simple beat-making web app, made using Alpine.js and Tone.js by @muted_io
• moneyglance.herokuapp.com is built with Alpine, Tailwind, Laravel and Livewire by @dnlgrz91
• copy2.cc is built with Laravel, Livewire, Alpine and Tailwind by @extralam
• bristolpay.org.uk has been re-designed and migrated to Craft CMS, Tailwind and Alpine.js by @williamhibberd

Tips

Got to love how easy it is to make basic html interactive and animated with Alpine.js :)

x-collapse takes care of all the magic here! https://t.co/UzTV2lVToy

— Dennis van Dalen @ 🇲🇽 (@dennisvdalen) March 21, 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.

Tips

❓ Using Alpine.js and need to debounce a function?

❌ You don’t need JavaScript libraries like lodash.

✅ Just use Alpine.debounce() which is also used internally for the x-on:input.debounce=”” modifier.

Cc: @calebporzio

— Zep Fietje (@zepfietje) March 17, 2022

neat trick for @Alpine_JS v3. The official way to access Alpinejs scope from outside code is to use Alpine.store() method. However I found this approach ( window.MyData = this ) easier for small code base where using store() is overkill

— Abdurrahman Shofy Adianto (@azophy) March 7, 2022

Tips

The @Alpine_JS Collapse plugin has saved me literal hours of work since it’s release and not enough people are using it. If you’re building accordions, dropdown menus or mobile navigation menus, take it for a spin! https://alpinejs.dev/plugins/collapse

— Ryan Chandler (@ryangjchandler) February 24, 2022

Alpine JS and React developers tip. Never use invalid self-closing elements in Alpine JS ie:

<div x-text="msg" />

would raise cryptic and hard to debug errors.

— Bojan Mihelac (@bmihelac) February 16, 2022

A short poem for @Alpine_JS – my favorite small, but powerful, Javascript framework. Thanks to @calebporzio and team for making the work of #webdevelopers a little bit easier. 🙏 https://medium.com/@richeklein/a-little-alpine-js-poem-44fef7c6965b pic.twitter.com/N6uvCGbrgs

— Rich Klein (@richeklein) February 11, 2022

Also featured this week, are 2 wordle clones in Alpine.js:

• hasinhayder.github.io/wordle-alpinejs/ by @hasin (source: github.com/hasinhayder/wordle-alpinejs)
• alpinejs-wordle.netlify.app/ by @drHootcH (source: github.com/drhootch/alpinejs-wordle)

@calebporzio I’m slowly refactoring JS and rolling out Alpine on https://vimeo.com/‘s marketing sites.

SO many JS files full of redundant event handlers are easily replaced with simple, inline @Alpine_JS components.

— Joseph Farruggio (@Joey_Farruggio) February 2, 2022

Alpine.js is now available on DefinitelyTyped, you can load them using npm install @types/alpinejs.

Hmm there’s now @types/alpinejs (github.com/DefinitelyTyped/DefinitelyTyped/pull/58130)

— Jesse Dobbelaere (@JesseDobbelaere) January 14, 2022

Tips

A quick gotcha with @Alpine_JS . Make sure to use this.close() in the x-data object. If it’s just close() then that’s window.close() and well…it’ll close the browser lol!

— Kyle Williams (@kylewcode) January 13, 2022

Happy 2022 to the Alpine.js Community!

Tips

I ♥️ how easy @Alpine_JS makes it to ~Do The Right Thing~:
• got a script only needed for the footer? Lazy load it with x-intersect & muicss/loadjs
• something could benefit from aria-describedby? Use $id
• made a flyout menu? Use Trap
• want to save user state? Use Persist

— Phil Wolstenholme (@philw_) December 16, 2021

Made with Alpine.js

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:

• spartner.software is built with Laravel, Statamic, Alpine and Tailwind by @patrickbrouwers
• doeken.org is build with Alpine, Jigsaw and Algolia by @doekenorg
• sketchupforwoodworkers.com by @ZTHall is built on the NEAT (Netlify CMS, Eleventy, Alpine, Tailwind) stack

Hey @calebporzio, seems like the new https://t.co/tUm0XDf3Uh is using @Alpine_JS

— Amit Merchant (@amit_merchant) November 17, 2021

I spy @Alpine_JS 👀👀👀

— Caleb Porzio (@calebporzio) November 17, 2021

Made with Alpine.js

Tips

Someone just PR’d a good tip to the @Alpine_JS docs - thought I’d share cuz I liked it

An announcement from the Alpine Components Team

We’ve decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless experience! Check out the new landing page for more details: https://alpinejs.dev/components

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.

🚢 New Alpine Plugin: Collapse

Easily animate the height of an element when toggling via x-show.

Check it:

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.

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.

📣 Announcing (officially) Alpine Component Patterns!

📦 UI component source code
📹 Educational screencasts 🫂 3rd-party integrations 🦑 Livewire integration

Tips

Did you know that @Alpine_JS has an undocumented “destroy” lifestyle method that gets called when you remove a component? Just add it to your component the same way you would use Try it out here:

Tips

Create shortcut easily with @Alpine_JS

Alpine plugins are dropping, keep an eye on Caleb Porzio’s announcements.

🥳 New Alpine Plugin: Persist 🍾

Easily persist data across page loads by using a nifty little decorator function: $persist()

Tips

Another fun use case for x-effect in @Alpine_JS v3 when using the persist plugin: parsing localStorage values (string only) so you can keep using boolean values in directives. This simplified example is for a toolbar that’s either always visible or only when you hover it.

Tips

Top tips from Kevin this week.

Spend the last few hours deep diving into the source code to figure out the V3 codebase. And I must say it’s extremely readable, easy to follow, and approachable to all levels. Find the lifecycle’s start method and just go step by step.

Tips

I really like this use case for x-effect in @Alpine_JS v3. It’s an easy way to disable scrolling on the body when you open a modal or a mobile navigation. Using x-effect you don’t have to worry about enabling scrolling again when a user hits ESC or uses click.outside for example.

v3 is picking up some steam, if you’ve missed it, here are the launch tweets:

🎉 If you didn’t catch it, Alpine Version 3 has been officially released!

You can watch the Alpine Day keynote where I show all the changes and show off the new features here:

Alpine v3 code was released as part of Alpine Day (alpineday.com): github.com/alpinejs/alpine-next for everyone’s perusal.

It’s a complete internal rewrite with a focus on supporting feature extension and there’s now official Alpine.js docs: , head over there to see all the new features.

Tips

Thank you Afonso Cerejeira for this great introduction to Htmx, alpine.js and hotwire.
You might not need a frontend framework

Tips

This is how you can create an easy scroll to top button with @Alpine_JS and .

Tips

replace the turbo-frame with @Alpine_JS , no code replaced needed. perfect for django.

Alpine Day is shaping up to be awesome, here’s the announcement tweet for whoever isn’t on Twitter.

🎉 Alpine Day, June 10th 2021 is now a real thing!

🚀 Launching everything new and shiny 🎙️ Hearing from crazy awesome speakers 💰 All profit goes directly to speakers

Tips

The following is in Spanish, the gist is a reminder that there’s a way to access the parent component’s data by selecting it and accessing __x.

Caleb’s setting up an Alpine Day, there’s a mailing list you can join.

🥳 Alpine Day 2021 is now a real thing.

One day packed full of new launches and cool speakers. Gonna be a hoot! 🦉

“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: Marko ()

I’ve got my CSS-in-JS solution for @Alpine_JS sorted 👀🤣

Let Caleb know how you use Alpine.js & what you call it:

• Alpine users, do you use Alpine with a build? (like “npm install alpinejs) Or just the file/CDN.

A few announcements this week.

Alpine Devtools v1.0.0 is out for Chrome and .

More than one year on, it’s great to see new people discovering Alpine.js every week. We’ve got a bunch of new tools released so make sure to read all the way to the Code & Tools section.

First glance at @Alpine_JS, and I can totally relate on the separation of concern!

An issue with loads of longer form content, do scroll to the “Articles & Tutorials” section. It’s also the 52nd edition of Alpine.js Weekly, so happy 1 year to us.

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

Nice thread on setting up TypeScript with Alpine.js (@samuelstancl packaged it up, see the “code” section)

Anyone interested in an article about how to set up TypeScript support for Alpine.js with a few lines of code? 😏

Here are this week’s Alpine.js adopters:

• artmuseumgr.org by is built with Alpine.js

In the past couple of weeks Alpine.js passed 14k stars (now sitting at around 14.1k) and we’ve seen websites big and small adopt Alpine.js.

Tips

🔥 If you need to pass a bound attribute to a Blade component, you can prefix the attribute name with two colons instead of one to tell Blade to not evaluate the attribute as a PHP expression.

Refactored (almost) all JavaScript on https://eurovision.tv/ to @Alpine_JS this week. Thanks !

Alpine.js on the @NativeScript website?

Alpine is at 13.4k stars at the time of writing, still a way to go to jQuery but in the same ballpark as Stimulus (which is at 10k stars at the time of writing). GitHub stars aren’t everything but you know, Ember is next on the hitlist (although they’re really not about the JS sprinkles).

Frontend Frameworks/Libraries With Most Stars on GitHub.

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%)

Caleb has been dropping teasers about Alpine v3, for example the following thread:

The next version of @LaravelLivewire and will (likely) be completely driven by Vue 3’s reactivity core.

If you missed it on Twitter/GitHub, this week’s Alpine.js release (2.8.0) adds better error messages when Alpine.js hits an eval error. It uses console.warn under the hood so you might want to display those when working on an Alpine.js project.

Sample error messages:

@Alpine_JS is in this year’s State of JavaScript survey, how cool is that! pic.twitter.com/FmKl8Lu6mE

I’ve liked the combo of @rails + @Alpine_JS so far. Feels good not having to rip out the entire rails front end just to get little more ✨ in the UI/UX.

Alpine.js devtools versions 0.0.4-0.0.7 have been released within the last week. They includes fixes to the key issues of the devtools: handling page refresh and open/close properly (who knew those things would take months to fix). We got some help from @stephenoldham on the repo to give the Devtools a fresh UI, and squashed a bunch of issues since then (eg. got the size down to 50kb instead of 4MB) 👇 have a look at 0.0.7 if you haven’t used the devtools yet.

This email is supported by Learnetto. Get the full-stack JS bundle for (sale ending soon).

Vanilla Alpine.js codepen template that I made for myself https://codepen.io/pen?template=bGdzxBO

— Hugo (@hugo__df)