Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
July 31, 2020

Alpine.js translation & inline scripts pre-processing

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.

Don't miss what's next. Subscribe to Alpine.js Weekly:
Powered by Buttondown, the easiest way to start and grow your newsletter.