Why Alpine.js plays nice with server-rendering
In a surprising twist @Alpine_JS appears to work with Twig templates out of the box, I’m sure there may be a few edge case issues to tackle but overall I’m extremely happy and impressed!
— Rory (@roikles) September 1, 2020
My personal observation is that the reason Alpine.js plays nice with a lot of templating engines is that it’s not a templating system itself.
Usually templating engines clash on interpolation syntax, since Alpine.js goes 100% on directives (& no interpolation syntax), it plays well with server-renderered templates out of the box.
This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).
Tips
@LaravelLivewire + @Alpine_JS + @tailwindcss = extreme DX feels pic.twitter.com/FlzzUWEEcr
— Jantinn Erezo (@CuanJan) August 30, 2020
I want to rebuild every website I’ve ever made and switch it to TALL stack. @tailwindcss @Alpine_JS @laravelphp @LaravelLivewire
— David 👨🦯 (@davidZkeefe) September 1, 2020
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:
- protone.media/en by @pascalbaljet is Laravel, Tailwind (with Tailwind UI) and Alpine
- merendinhadoarco.pt by @hmmonteiro is built with a Alpine, Tailwind and Symfony
- codewithhugo.com by @hugo__df has new dashboard pages with Alpine.js.
- collapsology.info by @jeromecoupe is built with Alpine.js and Eleventy.
- sr-100daysofcode.netlify.app/day-021-frontmatter-arrays/ by @shanerobinson is built with Alpine and Eleventy
Demos:
- Image annotation proof-of-concept made with Alpine.js by @pedroborg_es
- A Laravel Select field with Alpine & Tailwind by @masterix21
- Vue Reactivity API to mimic Alpine directives by @MrMaximVanhove
Articles & Tutorials
Accessing Data Variables from AlpineJS by @tnylea
Flexible Modal with AlpineJS and TailwindCSS by @WillRodRican
Adding Sound to Your Website with Alpine.js by @jackmcdade
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
v0.1.x+ of Alpine.js Test Utils now has a `waitFor` utility by @hugo__df
Another important feature for Tailkit is ready! You can now preview components with JS functionality (using Alpine.js) and preview/copy HTML only or HTML with Alpine.js markup! #tailkit #tailwindcss #design #ui #dashboard pic.twitter.com/NdaIpCf9Zb
— John Champ (@pixelcave_john) September 1, 2020
A few components got refactored in kutty.netlify.app by @SathishCodes.
Added a UI for the boolean reactivity in this new take on DevTools (for @Alpine_JS). Will add Number, string, and array support soon! Then themes. Let me know what other features you think this needs. github.com/KevinBatdorf/a… by @kevinbatdorf
ryangjchandler/alpine-toggle by @ryangjchandler is a magic property to toggle variables.
ryangjchandler/alpine-clipboard by @ryangjchandler is a magic property to copy to clipboard.
KevinBatdorf/alpine-inline-devtools by @kevinbatdorf is a minimalist devtools for Alpine.js
v0.2.0 for alpine-turbolinks-adapter was released with better x-cloak support.