Is Alpine the best way to add JS to your site?

Building stuff with @Alpine_JS is so much fun.

Add the 15kb library to your site and you can pretty much build any ui-component without dependencies.

Here’s a snippet detecting mobile devices with < 480px screenwidth to make a menu collapsible.https://t.co/ljOPSpXxX5 pic.twitter.com/OUB8edG6O0

— willem wigman (@willemwigman) August 25, 2020

Saw someone suggest that @tailwindcss + @Alpine_JS = colocation.

While blade components = encapsulation. Together you get DRY code.

So who cares if the code instead is messy. #LaraconOnline

Agree?

— Dan Norris (@danielpnorris) August 26, 2020

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

Made with Alpine.js

If you’ve got something to share with the Alpine.js community, you can submit your link or reach out to me on twitter @hugo__df.

Here are this week’s Alpine.js adopters:

• vimsum.com by @jase_languasco is Alpine, Tailwind UI and Laravel
• recordmytemp.com by @neilkeena is a TALL stack app, with Tailwind UI, Alpine, Laravel, Livewire
• vemto.app by @Tiago_Ferat is built with Alpine and Laravel
• @MaciejJanowski is building a Twitter Scheduler with Tailwind, Alpine and Django
• faven.netlify.app by @kodedpxlart is a webapp to generate favicons
• apinotready.com by @carnou is a nifty tool built with the TALL stack (Tailwind, Alpine, Laravel, Livewire), open-source and tested with PestPHP.
• a mortage calculator built with Alpine.js by @thegrumpyscot

#100DaysOfCode Day 86/100. Built an E-commerce page using @tailwindcss and @Alpine_JS. Check it out and comment! special-whip.surge.sh by @Virinchi_cv

Demos

• a countdown timer in Alpine.js by @asantibanez
• Alpine + Tailwind cookie banner by @Ratko_Solaja
• dropdown with header and badges by @pixelcave_john (for Tailkit)
• delete confirmation modal with Alpine.js by @wimdeblauwe
• input disabling on a condition by @yacobee
• Alpine.js responsive menu (collapses on mobile) by @willemwigman
• show length of <textarea> characters with a limit and color change by @yacobee
• Modal confirmation dialogues with Alpine.js and Tailwind by @mstrauss_dev

Articles & Tutorials

Simple Color Theme Implementation with css and alpine.js by @dxc_chx in @gitconnected

Setting app notifications with Phoenix LiveView and Alpine.js by @FullstackPhoen1

[Video]”Liven up your LiveViews (even further) with AlpineJS” at ElixirConf US 2020 by @pthompson at @ElixirConf

Creating Custom Magic Variables in Alpine.js by @ryangjchandler

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

Spruce - a state managemenet library for Alpine.js by @ryangjchandler has hit v1.0.0 (& beyond)

riipandi/altstack - Alpine.js, Tailwind, and Laravel. An alternative full-stack development solution surfaced by @call_user_func

alpine-magic-helpers - a helpers library for Alpine.js by @kevinbatdorf has a “parent” & “component” data access/write helper which can help you communicate between (nested) components

alpine-turbolinks-adapter maintained by @simo_tod has a new v0.1.2 release with bug fixes.