Alpine.js Weekly #72
📣 Announcing (officially) Alpine Component Patterns!
📦 UI component source code
📹 Educational screencasts
🫂 3rd-party integrations
🦑 Livewire integrationPartnering 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 undefinedChrome (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…
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