v2.5.0 and the ultimate Tailwind + Alpine.js site rebuild challenge
The Tailwind Wayback project is a great stress test of the capabilities of Alpine.js and TailwindCSS.
Do you wonder what old websites would look like with modern technology? Re-creating snapshots of old websites in @tailwindcss @alpinejs and so on. First one coming up in a couple of days.
— Tailwind Wayback (@TailwindWayback) July 22, 2020
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
Alpine.js + Livewire is the way Caleb designed everything to work.
Moving stuff from Vue into @LaravelLivewire/@Alpine_JS. I’m dumbfounded by how much extra work I had to do to use it. Vue is truly great, but I’m 100% convinced that if you’re using a monolith, it’s not worth it. Reach for Turbolinks and put HTML over the wire. Don’t look back.
— Erik Westlund (@erikdbwestlund) July 21, 2020
I keep on banging about Alpine.js as a jQuery-killer and here’s the weekly reiteration:
These days I reach for @Alpine_JS like I used to reach for jQuery, great for just getting stuff done.
— Richard Bagshaw (@bagwaa) July 21, 2020
Made with Alpine.js
- ebce.org is built with TailwindCSS and Alpine.js as per this tweet by @ericmikkelsen
- orbit.love by @Phacks is getting its own talk at @jamstackberlin, built with Eleventy, TailwindCSS and Alpine.js
Demos:
- Alpine.js code source viewer/copier by @kevinbatdorf, I’m personally going to try to integrate it into Alpine.js Playground and I think Amrit is lapping it all up for alpinetoolbox.com
- EAN barcode generator with Alpine.js by @alexjgarrett
- PayPal Buttons with Alpine.js by @asantibanez
- Timezone detector in Alpine.js by @scholz_felix
- Alpine.js + Blade interop for breakpoins by @erikdbwestlund
- Alpine.js + Blade component interop demo by @pascalbaljet
- Countdown timer configurator with Laravel, Alpine and Tailwind by @austencam
- TA-Pagination demo by @markusantonwolf
- TA-Gallery demo by @markusantonwolf
Articles & Tutorials
Say No To Complexity With AlpineJS - Caleb Porzio @ JS Nation Live (Video) by @thejsnation
Creating A To-Do List App With Django, Drf, Alpine.Js And Axios by @MaciejJanowski
Creating LiveView Modals with Tailwind CSS and AlpineJS by @pthompson
Build a performant autocomplete using Phoenix LiveView and Alpine.js by @benvp_
Web Development Unlocked (Part 1) - tools that made web development more accessible to a lost Designer— TailwindCSS, AlpineJS, and Netlify by @CoreyGinnivan through @Prototypr.
In-depth: Show/hide in Alpine.js with x-show by @hugo__df
Introducing our new Laravel package: Alpinejs Table by @patrosmania
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
github.com/jcergolj/laravellte, a Laravel/Livewire/Alpine.js boilerplate by @jcergolj is now released/1.0
Check out TA-Pagination and TA-Gallery by @markusantonwolf.
If you’re interested in a side by side comparions of the same app in Alpine.js and elm, @chapmanjacobd has you covered: github.com/chapmanjacobd/cities & github.com/chapmanjacobd/neighborhoods-alpinejs
v2.5.0
I’ve tweeted out a high-level summary of the changes
Features:
.camelevent/binding modifiers (super useful for working with SVG).passiveevent modifier
Fixes:
- transition issues have been ironed out
$eventis now passed to event handlers attached usingx-spreadx-show+styleandx-model+ event bugs have been fixed by enforcing directive execution order