When NativeScript's homepage uses Alpine.js
Alpine.js on the @NativeScript website?
— Hugo (@hugo__df) January 28, 2021
This email is supported by my GitHub Sponsors.
A pro tip for @Alpine_JS: Its sometimes faster without :key on your `x-for`. Alpine will default to the index, which saves an eval call. However, if your `x-for` data changes state, you should be using a unique identifier so Alpine can properly keep track.https://t.co/ZqeLrArhHn
— Kevin Batdorf (@kevinbatdorf) January 25, 2021
Nice layout tip from Ryan, not for everyone, I’m personally a “write all the code inline” type of person for my demos, but cool setup for those who enjoy a bit more structure (& like Laravel-looking code a bit more than me).
🔥 If you’re using @Alpine_JS and want to keep your components more organised, why not try out a global vendor object that holds all of your component data functions, mixins and helper functions?
(the screenshot is something you might bundle using Webpack or Rollup)
— Ryan Chandler (@ryangjchandler) January 27, 2021
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:
- Looks like the FA (England’s Football Assocation) is getting a hub portal with Alpine.js, Laravel, Livewire and Tailwind by @joelbutcher97
- key-code.now.sh by @ryangjchandler is built with Alpine.js and Tailwind
- nativescript.org now has an Alpine.js widget, great spot by @chrisbreuer1904
- calc.suesucia.com/, a sourdough proportions calculator by @goplano is built with Alpine.js
- savvycal.com by @derrickreimer keeps getting sprinkles of Alpine.js
- sieved.co by @mc4rdle uses a rating widget built with Alpine.js
- themystorytribe.com by @kieran_hunt is built with Alpine.js, Tailwind on Shopify
- eshop.quadmotocentrum.sk by @marek_racik is built with Alpine.js, Tailwind, Laravel Livewire
- willvincentvoice.com by @willvincent is built with Alpine.js, Tailwind and Eleventy
Demos:
- Experimenting with ajax loaded dropdowns, modals and notification alerts using Yoyo, htmx and Alpine.js by @getYoyoDev
- Contenteditable Search Field Demo with Alpine JS by @kevinbatdorf, reshared by @stephenoldham
Articles & Tutorials
[Video]Headless WordPress is Overrated: A Case for The Nearly-Headless Web App by @AlexStandiford
[Spanish] Alpine el nuevo jQuery reactivo, a love at second sight by @sotoplatero
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
@ryangjchandler‘s been busy, $clipboard has hit v1.0.0, now lighter for modern browsers.
Adopter Reactions
@Alpine_JS Is cleeeeean. Nice work
— Moladukes (@CitrusMe) January 27, 2021
I just heard of Alpine.js when I’m starting to play around with TailwindCSS. It’s lightweight and does the job.
— Namwa (@namwa_swd) January 23, 2021