April 3, 2020

Find out how Alpine.js is built

The series “Building Alpine.js” by Caleb Porzio (creator of Alpine.js) is out, first two episodes: Episode 1 - It All Starts With The Data and Episode 2 - Bringing The DOM To Life.

It turns out 70% of respondents want to use Alpine.js in conjunction with a server-rendering engine, with static site generators and HTML pages coming in at 9.5% and 14.5%, see the poll.

The demos keep rolling in, this week:

• An Alpine.js GDPR banner demo by @lepikhinb
• A cool slider by @marcelpociot
• A multistep form with Alpine & Tailwind by @mithicher
• A newsletter subscribe form with Alpine & Tailwind by @theasarmah

nutrilogic.mx is made with Alpine.js as per @victoryoalli‘s announcement.

@CoreSkillsHQ is also adopting Alpine.js per @fenskexyz‘s tweet, and their codebase is open source. The templates with Alpine.js are at views/candidate.handlebars & views/layouts/main.handlebars.

Articles & Tutorials

Combine Phoenix LiveView with Alpine.js

Alpine.js: responsive x-cloak by @hus_hmd

Alpine.js Tutorial

What is Alpine.js by @ryangjchandler.

IodineJS — a micro validation library introduction post, the library is inspired by Alpine.js’ philosophy, and created by @mattkingshott.

Code & Tools

See the repo for github.com/mattkingshott/iodine a micro client-side validation library inspired by Alpine.js by @mattkingshott

2.2.4/2.2.5

Fixes

• fix reactivity of x-if inside of x-for

2.2.3

Features

• Support for nested x-for (as long as the nested one is wrapped in an element)

2.2.2

Features

• x-on .debounce.150ms and x-model .debounce
• improved $watch nested properties support

Fixes:

• IE11 goes back to the hand-rolled reactivity core
• Fix to Mutation Observer issue with x-if inside a x-for
• Fix core debounce issues
• Removed unnecessary $nextTick stack clearing
• Make x-model.number casting to be more like Vue