Alpine.js Weekly #72

📣 Announcing (officially) Alpine Component Patterns!

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

Partnering up with @jasonlbeggs on this one to deliver some 🔥

Check out page. Get on list.https://alpinejs.dev/patterns

— Caleb Porzio (@calebporzio) September 8, 2021

Thanks to @ryangjchandler, Torchlight now supports @Alpine_JS syntax!

Turns out he just casually wrote a language grammar for it, nbd.

Docs are updated: https://torchlight.dev/docs/languages

— Aaron Francis (@aarondfrancis) August 25, 2021

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.

Here are this week’s Alpine.js adopters:

• en.neo-innovators.com/calculator is an R&D tax credit calculator, the website is built on Wix and the calculator is Alpine and Tailwind (which was a perfect tool for the job per @theAustinShelby)
• couleur.io - a simple tool to help generate harmonizing color palettes by @ffffffuel is built with Alpine
• ebusinesscard.netlify.app/ by @eanappi is built with Alpine
• md.jeremyjaydan.dev the markdown editor was recently re-built with Alpine and Tailwind by @JeremyJaydan
• under2.global is built with 11ty serverless, Tailwind, Alpine by @dwkns
• rainierwatch.com @austriker27‘s store powered by Shopify, Statamic and Alpine
• cakesdecor.com now runs on the THA (Tailwind, htmx, Alpine) stack on Rails by @msojka
• minimal.blog is built in 3 weeks (start to launch), using Rails running on Heroku, backed by Postgres and Redis (for async jobs), with just a little bit of JavaScript sprinkled in using Alpinejs by @PocketBryan
• siterig.io is built with Statamic, Tailwind and Alpine by @siterigapp
• cannabrew.uk](https://cannabrew.uk/) is wuilb with Tailwind and Alpine by @ryanhelmn
• gabrielpoca.com/music/ is built with Alpine by @gabrielgpoca
• janowski.dev‘s redesign is built with 11ty, Tailwind and Alpine, hosted on Netlify by @MaciejJanowski

Demos:

• Alpine JS Clock by @victoryoalli
• Weather Card Blade Component by @mithicher
• Cookies alert Tailwindcss & Alpine JS by tonybastienricher via @TwComponents
• Example of Tab Component made using AlpineJS only by @umutyerebakmaz
• A tabbed interface with Alpine.js by @brbcoding
• Vertical tabs with Alpine.js by @Mike_Andreuzza
• truncating long user generated text and conditionally show the “read more / less” with Alpine.js and Tailwind by @soulchildpls
• the @MtRainierWatch super menu by @austriker27

Articles & Tutorials

[Video Course - Free] Learn Alpine.js by @teamcodecourse

Phoenix 1.6.0 LiveView + esbuild + Tailwind JIT + AlpineJS - A brief tutorial. shared by @oliverandrich

From Vue to Alpine.js: Our journey how @timkley & co significantly improved the core web vitals of a big ecommerce client.

Accessible and animated expand/collapse components with Alpine.js and Tailwind CSS

[Video] Lightweight CSS Animations on Scroll using Alpine JS by @shrutibalasa

How to set up a personal website with 11ty, Markdown, TailwindCSS, and Alpine.js by @MaciejJanowski

Code & Tools

Alpine.js devtools 1.2.0 is out

Thanks to @stephenoldham
for the new layout and includes a small bugfix for when Alpine’s dataStack is undefined

Chrome (pending review): chrome.google.com/webstore/detai…

Firefox (pending review): addons.mozilla.org/firefox/addon/…

Release: github.com/alpine-collect…

— Hugo (@hugo__df) September 7, 2021

Juste released an @Alpine_JS screen plugin. It lets you programmatically monitor changes to the size of an element. github.com/victoryoalli/a…

by @victoryoalli

v3.3.2

Features

• x-intersect.half and x-intersect.full
• Support normal HTML attribute bindings from x-bind

v3.3.1

Fixes

• Support object destructuring in x-for expression

v3.3.0

Features

• $root magic property
• $persist(…).using(sessionStorage) (Persist to custom storage)
• period and equal key modifiers
• allow empty x-init expression

Fixes

• shadow dom parent issue
• bug with $persist.as

v3.2.4

Features

• x-intersect:enter and x-intersect:leave
• .dot modifier

Fixes

• x-trap crawl bug
• safari autofill bug
• regression in x-transition

Adopter Reactions

@Alpine_JS is now the new official admin JS library of ContentBox 5 Modular CMS! We will be transitioning to this amazing library in the coming versions!

— Luis Majano (@lmajano) September 3, 2021

I have to say that #AlpineJS is a very good replacement for #jQuery. Feels more like a modern framework, and is readable within the HTML. Amazing!

— Joey de Vries (@xJoeyv) September 2, 2021

I can’t believe how incredible @tailwindcss v2 + @Alpine_JS is 😯

— Till Krüss (@tillkruss) August 21, 2021

Been playing with @Alpine_JS this week and can’t believe how long I slept on it. Used it to add some really nice, tiny progressive enhancements to an admin panel and it’s just👌

— Martin Bean (@martinbean) August 20, 2021