Alpine.js Weekly #83
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:
- hasinhayder.github.io/wordle-alpinejs/ by @hasin (source: github.com/hasinhayder/wordle-alpinejs)
- alpinejs-wordle.netlify.app/ by @drHootcH (source: github.com/drhootch/alpinejs-wordle)
@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
Tips
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_jsonandentitiesmodifiers 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
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:
- fffuel.co/ffflux/, an SVG generator for fluid gradient backgrounds, made using Alpine.js by @ffffffuel
- https://dmbins.com has recently been launched and built with Alpine.js, Tailwind and Craft CMS.
- themes.dev runs on HTML, Alpine, Tailwind CSS (in JIT Mode), Hugo, hosted on Cloudflare pages by @Frankspin
- generationfertility.ca, cliniqueovo.com & olivefertility.com are built with Alpine by @BohemicaStudio
- www.atlza.com/ is built with Hugo, Tailwind and Alpine by @AtlzA
Demos:
- Alpine.js Accordion by @chrysillala
- Mentions on Laravel.io are powered by Alpine by @laravelio
- Simple navigation with Alpine and Tailwind by @ak_kamona
- Draggable sorting UI with Alpine and ERB by @iamcherta
- Alpine loading state for a turbo frame CSV upload by @iamcherta
- Alpine.js multiselect by @SOUBIRAN25 (source)
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
[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
Code & Tools
🥳 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-tooltippackage 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
v3.9.0
Features
- Add rootMargin support to
x-intersectwith.margin - Add
.noreturnmodifier tox-trap - Add x-modelable
Fixes
- x-intersect reliability improvements
- binding style attribute with CSS variables
x-ifsub expressions still being evaluated afterx-ifevals to false- Morph text nodes, lookahead and keys issues