A short poem for @Alpine_JS -- my favorite small, but powerful, Javascript framework. Thanks to @calebporzio and team for making the work of #webdevelopers a little bit easier. π https://medium.com/@richeklein/a-little-alpine-js-poem-44fef7c6965b pic.twitter.com/N6uvCGbrgs
β Rich Klein (@richeklein) February 11, 2022
Also featured this week, are 2 wordle clones in Alpine.js:
@calebporzio I'm slowly refactoring JS and rolling out Alpine on https://vimeo.com/'s marketing sites.
SO many JS files full of redundant event handlers are easily replaced with simple, inline @Alpine_JS components.
β Joseph Farruggio (@Joey_Farruggio) February 2, 2022
You can easily implement Copy to Clipboard Functionality using @Alpine_JS with a few lines of code.
β The Laravel Dev (@TheLaravelDev) February 8, 2022
π₯ When working with @Alpine_JS you can use the
to_json
andentities
modifiers to pass data into an Alpine component.
β Statamic (@statamic) January 28, 2022
@Alpine_JS x-intersect gotcha.
It's common for x-intersect to not fire if you're scrolling slowly.
To fix this, use x-intersect:enter.https://t.co/y1JoeEudpn
β Joseph Farruggio (@Joey_Farruggio) January 22, 2022
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:
Demos:
This newsletter supported by my GitHub Sponsors.
[Video] Compiling Your Plugin with esbuild - Developing Alpine.js Plugins by @ryangjchandler
Using Alpine's Persist plugin in a separate JavaScript file by @tylerlwsmith
Search Field with Text Suggestions by @hilmihidyt
[Video] Using Alpine.js to create a radio button (ALMOST) that you can deselect! by @JorgeConsulting
Fast. Faster. Fastest! (Murmel tech stack overview) by @preslavrachev
π₯³ Alpine Components are here!
π¦ 9 Core UI Components
πΊ "watch-me-build-these" Screencasts
β¨οΈ Keyboard Accessible
π Lifetime access
π 3rd Party Integrations like Trix (coming soon)
π Livewire Support (coming soon)Launch sale/early access for: $99
https://alpinejs.dev/components
β Caleb Porzio (@calebporzio) February 10, 2022
β‘οΈ I've just released v1.0.0 of my
alpine-tooltip
package for @Alpine_JS. This release includes a new `$tooltip` magic function that can be used to manually create tooltips on any element. Check it out in the docs!https://github.com/ryangjchandler/alpine-tooltip#tooltip
β Ryan Chandler (@ryangjchandler) February 9, 2022
Created a Laravel Component to mimic the Select2 Functionality using @Alpine_JS.
https://gist.github.com/saurabh85mahajan/a21a9673acdeedca063475207202a698
Inspired by https://codepen.io/ryangjchandler/pen/qBOmgJg from @ryangjchandler pic.twitter.com/YGGpsE1f8e
β The Laravel Dev (@TheLaravelDev) February 1, 2022
Features
x-intersect
with .margin
.noreturn
modifier to x-trap
Fixes
x-if
sub expressions still being evaluated after x-if
evals to false