Alpine.js Weekly - Alpine.js Weekly #77

An announcement from the Alpine Components Team

We’ve decided to rename Alpine Component Patterns to just Alpine Components and integrate it with the Alpine documentation for a more seamless experience! Check out the new landing page for more details: https://alpinejs.dev/components

More free content coming soon! pic.twitter.com/Sh4q448J1n

— Jason Beggs (@jasonlbeggs) October 22, 2021

Another top reaction, throwback to the Alpine Day performance talk Matt Stauffer did

Put a client’s website through PageSpeed. It’s built with Laravel, Tailwind CSS, and Alpine.js. Under the hood it runs a custom block-based page constructor I’ve developed, and a custom CRM I’ve made for this project and its specific needs. Not bad, eh?

— Oleg Knyazev (@climberdigital) October 16, 2021

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:

• bikewise.io is built with Alpine.js + TailwindCSS + Phoenix Framework by @andrielfn
• muted.io/chords-in-keys an interactive reference to musical chords for major and minor keys, built using Alpine.js by @muted_io
• wpuniverse.online a custom search engine for WordPress and web developers. It leverages the Google API and is built with Alpine and Tailwind by @wuniverse_site
• fin-tem.herokuapp.com a new financial template using Tailwind and Alpine by @DanielDunu
• TrapperKeeper.co it built with the TALL stack, Tailwind, Alpine, Laravel, Livewire with octane on Laravel Forge and DigitalOcean by @awizemann
• healdlaw.com is built on CraftCMS, Tailwind and Alpine by @amascicreative
• github.com/WyattCast44/peergoals is an accountability tracker built with Alpine, Tailwind, Laravel and Livewire by @WyattCastaned44
• github.com/Hi-Folks/gh-actions-yaml-generator is made with Laravel, Livewire and Alpine v3 by @RmeetsH

Demos:

• Infinite scrolling with Livewire and Alpine by @Jameskaguo
• “Click to Copy” with alpine-clipboard by @Joey_Farruggio
• International Phone Number input with Alpine and intl-tel-input by @MonneyArthur

This newsletter supported by my GitHub Sponsors.

Articles & Tutorials

Building a dropdown menu using Alpine.js

Code & Tools

Daniel Palmer is looking for contributors to help with upgrading github.com/danieljpalmer/alptail to Alpine v3.