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_json and entities 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

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-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

v3.9.0

Features

• Add rootMargin support to x-intersect with .margin
• Add .noreturn modifier to x-trap
• Add x-modelable

Fixes

• x-intersect reliability improvements
• binding style attribute with CSS variables
• x-if sub expressions still being evaluated after x-if evals to false
• Morph text nodes, lookahead and keys issues