Feb. 11, 2022, 9:30 p.m.

Alpine.js Weekly #83

Alpine.js Weekly

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.

pic.twitter.com/nWRn9cP33H

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

pic.twitter.com/JJc3Tle1aX

— 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

You just read issue #83 of Alpine.js Weekly. You can also browse the full archives of this newsletter.

Share on Facebook Share on Twitter Share via email
Brought to you by Buttondown, the easiest way to start and grow your newsletter.