How much code did Eurovision delete by switching to Alpine.js?
Refactored (almost) all JavaScript on https://eurovision.tv/ to @Alpine_JS this week. Thanks @calebporzio!
187 lines added
679 lines removed🤩
— Erik Gaal (@erikgaal) February 3, 2021
This email is supported by my GitHub Sponsors.
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:
- https://dollarracing.club/ by @ProofOfThePuddn is built with Alpine.js and Tailwind.
- The new @laravelnews will be using Statmic, Tailwind and Alpine.js (per @austriker27)
- github.com/chesstabbako/blog-fake-laravel, a blog built with Alpine, Livewire and TailwindCSS by @tabbaking
Demos:
- add Alpine directives to markup you don't control by @philw_ good demo for people looking to add some sprinkles to code coming from a CMS for example.
- Autosuggest with fetch, Alpine.js and Tailwind by @DanekKalivoda
- Dark & light mode example built with Alpine and Tailwind by @ak_kamona
- Animation for a Material Design floating action button with Alpine, Tailwind, Heroicons, Laravel & Web Animations APIby @ryatkins
- Basic add/subtract calculator demo built with Alpine.js, Tailwind & accessiblity in mind by @kevinbatdorf
- Markdown Editor with codemirror and Alpine.js by @mithicher
- A 360 degree rotating carousel with Alpine.js ported from Vue by @jbfournot
Articles & Tutorials
[Spanish] Utiliza Github como base de datos II by @sotoplatero, this series uses Alpine and Livewire.
Cross-component Communication Patterns in AlpineJs by @witty_progr
How to Create Show More Button Using Alpine JS by @LaravelLinks
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/alpine-collective/alpine-magic-helpers has a few new additions and fixes (see @kevinbatdorf's announcement):
$refreshhelper to force an Alpine re-render (credit @ryangjchandler)$undohelper to undo state changes (@kevinbatdorf has been working on this one for a while)- key fix to
$componentby @simo_tod where other compoenent's methods can be accessed
@ryangjchandler is still on a Spruce bugfix/patch release spree: v2.6.3,v2.6.2, v2.6.1.
github.com/riipandi/altstack a Laravel template with Alpine and Tailwind by @riipandi
github.com/moveideas/alpine-product-360 Loop a series of images in a 360 rotatation carousel with this plugin for Vue.js by @jbfournot
Adopter Reactions
Man the more I use Alpine.js, the more I got delighted.
x-for, x-if , x-show, x-bind are cheat codes lol, and I just realized we can pass in parameter to the function name in x-data or whatever x- methods, handy af
— Axel Kee 🐐 (@soulchildpls) February 3, 2021
The magic Get Shit Done web stack... @rails + @tailwindcss + @tailwindui + @Alpine_JS + @PostgreSQL for when it's you're money/ass on the line and the cool aid's tasting rather bitter ;)
— Angus Miller (@all4miller) January 30, 2021