Alpine.js Weekly #90
π The long-awaited, much-requested, global search is here for the @Alpine_JS docs. woop!
Dig it.https://t.co/HHU9GAPk5b
(Thanks @jasonlbeggs)
β Caleb Porzio (@calebporzio) June 20, 2022
When is @Alpine_JS gonna sponsor @AlpineF1Team
β Ame𦦠(@ameliniya_) June 19, 2022
Tips
In alpinejs $nextTick(); is a real magic property.
When you want to first update your data and then your DOM, use nextTick.
The system will focus on input in the attached example without updating the data first.#alpinejs #javascript pic.twitter.com/U7tPqKYAblβ Tahir Iqbal Najam (@tahiriqbalnajam) June 1, 2022
Non-reactive data in Alpine.js https://t.co/yxUITWTCiJ#javascript #alpinejs #developer pic.twitter.com/lejn0PXPYi
β Oozman (@oozman) June 23, 2022
The input.@Alpine_JS 's ".debounce.750ms" is a life-saver here. pic.twitter.com/o4HLpCnpNi
β ahmed (@ahmedaljawahiry) June 29, 2022
@tailwindcss has the pseudo-class for first-child, but what about nth-child?
A use case for this I run into often is when I want to use :first-child an @Alpine_JS
<template x-for>loop.In that scenario, the
<template>is first child.first-of-type is the solution here.
β Joseph Farruggio (@Joey_Farruggio) July 8, 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:
- real-estate-proceeds.netlify.app is built with Tailwind and Alpine by @Joey_Farruggio
- @YashsWay's wedding site is made with Tailwind, Alpine, Parcel and deployed on Surge.sh.
- todo-mvc-alpine.netlify.app/ is built with Alpine by @Joey_Farruggio
Demos: - Stopwatch in Alpine.js + Tailwind - Toast feature in Alpine (forreal-estate-proceeds.netlify.app) by @Joey_Farruggio - multi-step registration form with Alpine.js by @ryanhelmn - Mobile-friendly Modal using Tailwind and Alpine by @om211196 - Carousel using CSS scroll snap and Alpine by @Accudio - upload progress button/bar
This newsletter supported by my GitHub Sponsors.
Articles & Tutorials
Image Upload Preview in Alpine.js by @raymondcamden
How to Syntax Highlight Alpine JS in Sublime by @zenia2020
A rendered code example with Statamic, Tailwind and Alpine by @studio1902
Digging into Alpine.js by @raymondcamden
Creating Dynamic HTML Tooltips with Alpine and alpine-tooltip dlvr.it/SSNX4c by @ryangjchandler on @larachatslack
Use the power of a JavaScript framework right in your HTML file!! by @_asheeshh via @TheJSDev
How to AlpineJS - Introduction
Alpine.js: The lightweight and powerful framework you should consider using for your next project by @trammellwebdev
How to create a portfolio site using Alpine.js and Tailwind CSS by @trammellwebdev
Dynamic Accordion in WordPress using Meta Box and Alpine.js by @BricksLabs
Code & Tools
github.com/glhd/alpine-wizard, a package to build multi-step wizards with Alpine.js (provided as a directive x-wizard and a magic $wizard), by @inxilpro
Alpine Language Features VisualStudio Marketplace by @johnsoncodehk
πgithub.com/guocaoyi/create-chrome-ext v0.5.0 has released with an Alpine.js template, by @without_horn. For this link, a note from the newsletter editor (I maintain alpinejs-devtools): I believe Alpine.js non-CSP build is going to cause issues when Chrome starts enforcing extensions manifest v3 (which might start disallowing unsafe-inline evaluation which is Alpine.js' default evaluation method).
Adopter Reactions
I've been using AlpineJS where I would've used jquery in the past. Just because I prefer its API but either way some light JS on the DOM is underrated in 2022.
β Chrisβ‘Arter π€ (@ChrisArter) June 16, 2022
Working with @Alpine_JS is so dang fun! I picked it this weekend and have multiple components up and running: dropdown, theme-switcher and text-resizer. Next up is a modal with search.
β Naiyer Asif ΩΫΨ± Ψ’Ψ΅Ω (@Microflash) June 20, 2022
@Alpine_JS is a really nice framework for websites that are mostly static (or fully-fledged apps, but I prefer Vue for that).
You can eliminate all that glue code to manipulate form fields and the DOM. It's super lightweight and doesn't require compilation π
β Marvin Blum (@m5blum) June 21, 2022
Tinkering with @Alpine_JS with a personal toy @elixirphoenix project that has @tailwindcss. Really nice, easy experience. Very happy to not have dive into a more cough hefty approach to the necessary bit of javascript.
β Jon Phenow (@jphenow) June 21, 2022
Apropos of nothing, @eleven_ty and @Alpine_JS are lovely to work with, even if I am still wrapping my head around the latter https://t.co/U1nXbiveYx
β Chris M. (@MstrKapowski) July 10, 2022