Alpine.js Weekly logo

Alpine.js Weekly

Subscribe
Archives
July 17, 2020

How jQuery -> Alpine reduced lines of code by 82%

For anyone still not sold on Alpine? How about no context switching and no waiting for rebuilds?

First time using @Alpine_JS in a real-world context. I can't overstate the joy of not switching context and not waiting for any compilation to complete.

β€” Daniel Wentsch πŸ‡ͺπŸ‡Ί (@klickreflex) July 16, 2020

jQuery -> Alpine.js = 82% reduction in code

I've just reduced a jQuery script that was 1009 lines, to 179 using @alpinejs and ES6.

Not to mention the initial bulk of loading jQuery compared to a move lean AlpineJS.

*party* πŸ₯³

β€” Jason Mayo 🍩 (@MadeByMayo) July 16, 2020

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

It really seems like Alpine.js is a great way to migrate off of jQuery.

I had been dreading some updates on a legacy jQuery / Bootstrap project recently. Instead of trying to sort through the using the old libraries or risk breaking everything by updating, I just slapped @Alpine_JS in there and got shit done. What a great tool. πŸ™Œ

β€” Jordan Hoff (@jordanthoff) July 14, 2020

TALLStack is still going strong, the Laravel - Alpine - Livewire crew is strong.

#TALL is my best combination@tailwindcss + @Alpine_JS + @laravelphp + @LaravelLivewire = πŸ”₯πŸ”₯πŸ”₯

β€” Mohamed Sabil (@MohamedSabil83) July 13, 2020

Static site generator + Alpine πŸ‘

This client project in @statamic has a πŸ” menu, the only place where I need JavaScript... Guess its finally time to reach for @Alpine_JS

β€” π™³πšŠπšŸπš’πš 𝙰. π™»πš’πš—πšπšŠπš‘πš• (@austriker27) July 16, 2020

Tips

You can test Alpine.js components using JSDOM, I've put together alpine-test-utils to make that easier, here's a "hello world" with AVA:

#100DaysOfCode Day 42 - Setting up testing on #alpinejs app with ava & alpine-test-utils pic.twitter.com/tylYoBVrx0

β€” mns (@narze) July 16, 2020

WordPress + Alpine to create custom themes is a thing with jackpine.

Putting finishing touches tonight on a theme framework I hope will be useful to all of you out there who build custom WordPress sites for your clients.

Uses a stack I've found extremely useful: Timber, Tailwind CSS, Alpine.js, https://t.co/zwQxXZaUv2.https://t.co/aUyuOru1B6

β€” Dylan Layne Tanner (@DylanLTanner) July 12, 2020

Made with Alpine.js

  • dissent.fit by @tannerbryant is Statamic, Alpine & Tailwind.
  • pimdeed.vercel.app by @narze is built with Alpine.js, Tailwind and Eleventy
  • primo.af is Tailwind + Alpine, spotted by by @clemblanco
  • floodtheinbox.netlify.app (see the source at github.com/dfosco/floodtheinbox by @dfosco is built with Alpine.js and Tailwind

Demos:

  • Focus styles only if user tabs by @kevinbatdorf
  • the β€œmeatball nav” on the Laravel Shift dashboard is Alpine + Tailwind, by @laravelshift
  • data-driven drag&drop listbox that is WCAG friendly by @kevinbatdorf is Tailwind + Alpine
  • custom reaction emoticons list by @hocvt is Alpine.js and Tailwind.

Articles & Tutorials

Introducing Alpine.js: A Minimal JavaScript Framework by @Fonseka_AU

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.

Code & Tools

Drupal + Alpine Single File Components https://git.drupalcode.org/project/sfc/-/tree/8.x-1.x/modules/sfc_example/components/alpine by @mortensonsam

Here are all my @Alpine_JS examples for Drupal Single File Components https://t.co/TpeoZV3Cls

β€” Sam Mortenson (@mortensonsam) July 13, 2020

jackpine by @DylanLTanner is a theme framework for custom WordPress sites with Timber, TailwindCSS, Alpine.js & wpack.io.

Coming soon - Joomla Admin with Tailwind and Alpine?

WIP… Joomla Administrator using TailwindCSS/AlpineJS. No Bootstrap but works with Bootstrap classnames so few template overrides & its backwards compatible. #joomla #tailwindcss pic.twitter.com/zkveoOVefC

β€” Shayne Bartlett (@joombaya) July 12, 2020

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