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