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.