We’ve got a couple of great ideas about tools & projects we might need in the Alpine.js community.
How would a translation package for Alpine.js look?
Is there any need for a Translation package build with the TALL stack? 🤔 #tailwindcss #alpinejs #laravel #livewire pic.twitter.com/kkekyI04c9
— Alessandro Belli (@Ale_Belli90) July 24, 2020
How could we use PostHTML to pre-process inline Alpine.js scripts?
Thinking out loud here, but I wonder if PostHTML (https://t.co/8oAsxZtUWe) could be used to run Prettier, Babel, ESLint etc on inline @Alpine_JS directives… 🤔
— Phil Wolstenholme (@philw_) July 27, 2020
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
Tips
TIL I learned about Spruce for @Alpine_JS. https://t.co/3zjJFbMQpY
Works really good. Communicating components with a data “store” is such a breeze. 💪
Working on an “accordion” component. All handled by #AlpineJs. 👌 pic.twitter.com/gFUq9ivpD1
— Andrés Santibáñez (@asantibanez) July 30, 2020
Tailpine, Livepine or Bladepine?
🥰 Oh my! I’m all in for this conjugation, when talking @tailwindcss and @Alpine_JS.
- Tailpine
- Livepine
- Bladepine(@jessarchercodes kudos on the https://t.co/OQTgIjVINx page. It feels super snappy and yet remains comfortable to eye-scan. ❤️) https://t.co/c1GhdqwsXT
— Jakob Steinn (@jstoone) July 25, 2020
Made with Alpine.js
A lot of new sites using Alpine.js, great work from everyone:
- imusician.pro/en by @madebymutual for @iMusician_pro is built on Alpine, CraftCMS & TailwindCSS.
- upfast.app by @scholz_felix is built on the TALL stack (TailwindCSS, Alpine.js, Laravel, Livewire).
- adria-mobil.com by @slovenianGooner for @AdriaMobil is built on Laravel, TailwindCSS and Alpine.js
- sun-living.com by @slovenianGooner for @sunliving is also built with Laravel, TailwindCSS and Alpine.js
- alpinejs.codewithhugo.com by @hugo__df now has a “copy source” feature thanks to @kevinbatdorf‘s “code preview” demo from last week
- useinspo.com by @userlastname is built on Livewire and Alpine.js and Muuri (muuri.dev)
- laravelshift.com/shifts by @jstoone has been Tailpine-ed (ie. rebuilt with Alpine.js and TailwindCSS).
Articles & Tutorials
Alpine.js in-depth: reactive HTML attribute binding with x-bind by @hugo__df
For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.
Demos:
- Shopify-inspired discount code input with Livewire and Alpine by @MonneyArthur
- Trigger the new animate spin on a button with TailwindCSS and Alpine by @ShaneDRosenthal
- A PartyParrot toggle button with Alpine/Tailwind by @bernheisel
- Minesweeper game with Alpine.js by @mr_mahd1ar
- Live Edit “playground” type component with Alpine & Tailwind by @kevinbatdorf
- An accordion component using Alpine & Spruce by @asantibanez
Code & Tools
drupal.org/project/alpinejs release 1.1.x-dev is now available (spotted by @drupalreleases).
YouTube wrapper plugin Alpine.js: ta-youtube.markusantonwolf.com by @markusantonwolf.