Archive

Tips

A couple days ago I just found out about this better method to trigger @Alpine_JS component from outside Alpine’s code. This method is very useful for example to make a reusable modal component using @laravelphp Blade component

— Abdurrahman Shofy Adianto (@azophy) August 6, 2022

It wasn’t particularly intuitive for me to load data in an AlpineJS template using fetch. Found some solutions but they were not clean or clear enough. So I adapted a bit of code and this is quite lovely I think.

https://gist.github.com/cdsaenz/394c1dec9610ae6d1567fb50d2baad62

— Charly@CSDevAr (@CSDevAr) August 19, 2022

@Alpine_JS just crossed 100,000 weekly downloads https://www.npmjs.com/package/alpinejs give it a try if you haven't tried it yet, 🤞 you would like writing js without leaving html.
here, is link https://alpinejs.dev 🥳🥳

— peadev (@XSukhpreet) July 31, 2022

Awesome: my online talk for DjangoCon US 2022 is accepted! Topic: "Modern apps with Django, HTMX, Tailwind CSS and Alpine.js" 🥳😀😎#Django #Python @djangocon https://t.co/Ux4FDMw1Ju

— Andrej Baranovskij (@andrejusb) July 25, 2022

🔎 The long-awaited, much-requested, global search is here for the @Alpine_JS docs. woop!

Dig it.https://t.co/HHU9GAPk5b

(Thanks @jasonlbeggs)

pic.twitter.com/DuwBnqAiF7

— Caleb Porzio (@calebporzio) June 20, 2022

When is @Alpine_JS gonna sponsor @AlpineF1Team

— Ame🦦 (@ameliniya_) June 19, 2022

Tips

In alpinejs $nextTick(); is a real magic property.
When you want to first update your data and then your DOM, use nextTick.
The system will focus on input in the attached example without updating the data first.#alpinejs #javascript pic.twitter.com/U7tPqKYAbl

— Tahir Iqbal Najam (@tahiriqbalnajam) June 1, 2022

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

https://component-party.dev/

— nightwolfdev (@nightwolfdev) May 18, 2022

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 ithttps://t.co/SUKef4Co0E

— Caleb Porzio (@calebporzio) November 1, 2021

Here's a little @Alpine_JS snippet I use for the copyright notice in site footers (both static and dynamic sites). This keeps me from having to remember to go fix the date. Doubly useful in the year 2021, where time no longer exists.

— Andrew Ek (@ektastrophe) November 3, 2021

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

More free content coming soon! pic.twitter.com/Sh4q448J1n

— Jason Beggs (@jasonlbeggs) October 22, 2021

Another top reaction, throwback to the Alpine Day performance talk Matt Stauffer did

Put a client’s website through PageSpeed. It’s built with Laravel, Tailwind CSS, and Alpine.js. Under the hood it runs a custom block-based page constructor I’ve developed, and a custom CRM I’ve made for this project and its specific needs. Not bad, eh?

— Oleg Knyazev (@climberdigital) October 16, 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:

• fullstackacademy.com is built with Alpine.js
• www.cryptopumpkins.com by @realCodeCraft is built with Alpine.js
• satechjobs-2021.herokuapp.com is built with Ruby on Rails, Tailwind, Alpine.js, Postgres, hosted on Heroku by @ThubaMamba___
• moning.co a platform for stock-market investors is powered by the PETAL stack (Phoenix Elixir Tailwind Alpine.js LiveView) by @nblanco_fr

🚢 New Alpine Plugin: Collapse

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

Check it:https://alpinejs.dev/plugins/collapse

— Caleb Porzio (@calebporzio) September 29, 2021

This newsletter supported by my GitHub Sponsors.

Tips

Two use cases where I put @Alpine_JS $persist() to work:

1. On local/dev env there's a floating toggle to simulate different account levels to access restricted content

2. Storing the response of Vimeo's API to populate a video library -> saves API calls and loads much faster

— Joseph Farruggio (@Joey_Farruggio) October 1, 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:

• previewify.app's template editor is powered by Laravel Livewire and Alpine.js by @LarsKlopstra

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:

• singdaptive.com is made with Alpine, Eleventy and Tailwind by @stephen_j_evans
• sayso.co is built with Eleventy, Alpine, Tailwind and Netlify by @SAYSOco
• martyfriedelphotography.com.au is built with Statamic, Tailwind and Alpine by @MartyFriedel

📣 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

— Fred C. (@h4mzt3r) August 6, 2021

This newsletter supported by my GitHub Sponsors.

Made 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()

Think data-table filters, currently active tab, preserving a user's decision to hide a notification, etc.

Dig it: https://alpinejs.dev/plugins/persist

— Caleb Porzio (@calebporzio) July 22, 2021

🚀🚀 New Alpine plugin drop today: Intersect 🎉🎉

A simple, declarative way to trigger some JS when an element enters the viewport (scroll-triggered animations, etc...)

Oh, also it (currently) weighs only 311 bytes!

Check it oooouuuut: https://alpinejs.dev/plugins/intersect

— Caleb Porzio (@calebporzio) July 12, 2021

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.

— Rob de Kort (@studio1902) July 7, 2021

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

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. pic.twitter.com/cPPdOPlEhf

— Rob de Kort (@studio1902) June 23, 2021

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

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#DjangoCon #djangoconeurope #sketchnote

— Sara (@aspigirlcodes) June 3, 2021

This newsletter supported by my GitHub Sponsors.

Made with Alpine.js

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

It's gonna be a hoot! 🦉

https://alpineday.com/

— Caleb Porzio (@calebporzio) May 11, 2021

This newsletter supported by my GitHub Sponsors.

Tips

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

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 Firefox.

Alpine.js devtools 1.0.0 is out

(Much) faster boot times and performance for components (even big ones) see below. Reset selected component on navigation.

Chrome (pending review): https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk

Firefox: https://addons.mozilla.org/firefox/addon/alpinejs-devtools/

Release: https://github.com/alpine-collective/alpinejs-devtools/releases/v1.0.0

pic.twitter.com/ifs4S4U3bB

— Hugo (@hugo__df) March 15, 2021

Simone and Kevin have been working on an x-unsafe-html custom directive 👀.

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

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.

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? 😏 pic.twitter.com/Wwo0CN34C1

— Samuel Štancl (@samuelstancl) February 25, 2021

This email is supported by my GitHub Sponsors.

Made with Alpine.js

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 @Alpine_JS attribute to a @laravelphp 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. pic.twitter.com/NvKOBUKfDH

— Jason Beggs (@jasonlbeggs) February 10, 2021

This email is supported by my GitHub Sponsors.

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

187 lines added
679 lines removed

🤩

— Erik Gaal (@erikgaal) February 3, 2021

This email is supported by my GitHub Sponsors.

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.

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 @Alpine_JS will (likely) be completely driven by Vue 3's reactivity core.

This has so many insanely cool implications.

Let me try to explain them.

— Caleb Porzio (@calebporzio) December 18, 2020

This email is supported by my GitHub Sponsors.

Tips

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:

This email is supported by my GitHub Sponsors.