Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
May 29, 2020

Bye jQuery, Hello Alpine?

Is the following exchange with @horse_js a sign of things to come?

jquery was good

— Horse JS (@horse_js) May 28, 2020

Until @Alpine_JS Came.

— Nishant Singh (@_nscs) May 28, 2020

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

@rbucks seems to think so, he's taking an oath not to touch Bootstrap and go Tailwind + Alpine. @MadeByMayo are already there:

Finally broke free from jQuery 🥳

It's been sat in our framework for sometime, either being used, or not used on a project 👎

But as of today, we're pure JS with a sprinkle of AlpineJS 🧂

— Jason Mayo 🍩 (@MadeByMayo) May 28, 2020

Made with Alpine.js

  • @alexpgates is running for his board of education, his site gatesforops.com is built on the TALL stack (Tailwind, Alpine, Livewire, Laravel)
  • @justifyagencyhq is relaunching justifyagency.com with Tailwind and Alpine
  • @slovenianGooner is working on a cool site with Alpine
  • @georgejustin22's pwainside.com is TALL stack in action
  • @toomaime from @growthhacklist is looking at Alpine for search functionality.

An Alpine.js success story from @JuanDMeGon

I finally finished replacing all the small Vue.js functionalities with @Alpine_JS.

The JS bundle reduced its size in a 66% 🥳 and I was able to be much more modular by the way 💪

— Web Development Instructor | JuanDMeGon (@JuanDMeGon) May 26, 2020

Articles & Tutorials

Access Alpine.js component data/state from outside its scope by @hugo__df

Build a Multi-room Realtime Chat with Livewire (& Alpine.js) by @teamcodecourse

Demos

  • Bootstrap like modal using Tailwind CSS by @tmg_bedus
  • A side menu with Tailwind and Alpine by @tonyennis
  • Testimonial UI with Tailwind aand Alpine by @mithicher
  • Get Random Image ( Cats & Dogs ) by @mr_alaraj
  • Kanban Board with TailwindCSS and AlpineJS by @mithicher
  • Get Random Quote by @mr_alaraj

For more posts like this, you can join the Alpine.js Handbook Knowledge Base (Paid), it's a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

This new project "hello-worlds" (github.com/johnpapa/hello-worlds) has an Alpine.js example contributed by @hugo__df.

You can also check out github.com/shatstack/inline-remote-assets - 0-config CSS and JavaScript inlining and purging, designed for users of Alpine.js and TailwindCSS, by @hugo__df.

Tool alert: tailblocks is a simple WYSIWYG for @tailwindcss by @brent_dalling

Releases

Nothing this week but stay tuned, there's a lot of good work going on with new features and bug fixes.

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