July 24, 2020

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:

• .camel event/binding modifiers (super useful for working with SVG)
• .passive event modifier

Fixes:

• transition issues have been ironed out
• $event is now passed to event handlers attached using x-spread
• x-show + style and x-model + event bugs have been fixed by enforcing directive execution order