Alpine.js Weekly #91 - Summer Edition 🏝
@Alpine_JS just crossed 100,000 weekly downloads https://www.npmjs.com/package/alpinejs give it a try if you haven't tried it yet, 🤞 you would like writing js without leaving html.
here, is link https://alpinejs.dev 🥳🥳— peadev (@XSukhpreet) July 31, 2022
Awesome: my online talk for DjangoCon US 2022 is accepted! Topic: "Modern apps with Django, HTMX, Tailwind CSS and Alpine.js" 🥳😀😎#Django #Python @djangocon https://t.co/Ux4FDMw1Ju
— Andrej Baranovskij (@andrejusb) July 25, 2022
Whoo I didn't even realize it, but Thursday was the day I became an @Alpine_JS contributor! https://t.co/BJlFYWs3nw
— Martin Schön (@mgschoen) July 26, 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:
- nats-whiteboard.onrender.com is ~100 lines of Alpine.js code by @thecodegangsta
- tiny-markdown.vercel.app/ is built with Alpine and Tailwind by @itsmarkmead
- sissokho.netlify.app is @mm_sissokho's portfolio site built with Alpine.js (dev looking for work PHP, Laravel, Alpine, Tailwind)
- the logo gallery with filtering on vimeo.com/customers/enterprise is built with Alpine by @Joey_Farruggio
- vendure.io is built with Hugo site, Alpine.js and Tailwind via @michlbrmly
- nunomaduro.com/newsletter is built with Alpine.js and Rust (integrating @getmailcoach) by @enunomaduro
- mysurvivorpool.com is built with Livewire and Alpine.js by @bar1024
- tachyonsplay.vercel.app/, a @tachyons_css playground built with Alpine, code is available: gitlab.com/jjude/alpinejs/-/… by @jjude
- andrei.click/ is built with Alpine.js and Tailwindby @andrei_click
Demos:
- an emoji selector in Alpine.js by @GregoireGaonach
- a thumbnail template using Alpine.js by @benborgers who screenshots it to generate og:images on his site
- Follow Along Tab with Resize in Alpine.js by @itsmarkmead
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
Ruby-on-Rails and AlpineJS tutorial
Getting started with Alpine.js and TypeScript via @shinya16jp
An example of Algolia Search with Alpine.js by @raymondcamden
Code Splitting in Alpine.js via @juanfernandes
How to create and use Reusable Modal using Alpine.js
Building Related Selects in Alpine.js by @raymondcamden
Build a tab component using Alpine.js via @MathieuPiton
Code & Tools
Volt is an admin dashboard built with Laravel, Livewire, Alpine.js and Bootstrap by @themesberg, available in a free & open-source version via @MadeWithLaravel
github.com/colinaut/alpinejs-plugin-simple-validate a simple Alpine form validation plugin by @colinaut
github.com/markmead/alpinejs-character-count - Alpine JS plugin that tracks the character count of an input with the option to compare against the max length, by @itsmarkmead.
github.com/awcodes/alpine-floating-ui - Add Floating UI functionality to Alpine 3.x components, by @awcodes1 via @danjharrin.
You can now search @Alpine_JS using @raycastapp enjoy! https://www.raycast.com/aurawindsurfing/alpinejs
— Tomasz Lotocki 🏄♂️ (@TomaszLotocki) July 12, 2022
v3.10.3
Features
x-show.important- Add autofocus awareness to the focus plugin
Fixes
- Change Morph plugin to use createElement('template').content for crating DOM fragments, this enables table / support.
- Fix x-show updating DOM inconsistently if state changes too fast
- Allow disabling x-mask with a falsy value
- Fix x-mask $money with bad input
- change "Alpine.store(...)" link to /globals/alpine-store #2870
Adopter Reactions
For private project I have to create some ui components which require simple javascript logic. Instead of writing plain javascript code I have looked for an easier solution and found Alpine.js. Look how easy the logic for a modal/popover can be created: pic.twitter.com/rIt7imXP1D
— Markus (@markuscodes) July 11, 2022
If anyone read to the end, this will be the last Alpine.js Weekly of the summer. It's time to take a break since I've missed a few weeks building up to now (which is why this issue is big!). See you all in September for the next issue.