Alpine.js Weekly #59
Tips
The following is in Spanish, the gist is a reminder that there’s a way to access the parent component’s data by selecting it and accessing __x.
AlpineJS no permite acceder de (forma nativa), a un elemento padre desde un hijo, pero podemos hacerlo así:#javascript #alpinejs #programacion
— Damian Aguilar (@daguilarm) May 7, 2021
Top little @Alpine_JS tip I discovered today: always put your x-cloak
{display:none; !important}inline in the<head>. If you add it to your compiled CSS, that may load too late to avoid a flash of hidden elements. @hugo__df— Matt Radford (@mattradford) May 7, 2021
This newsletter supported by my GitHub Sponsors.
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:
- topspinpro.com - a recent rebuild of a WordPress/WooCommerce site with Tailwind & AlpineJS. Everything from the nav menu, modals, to a full (behind-the-scenes) dashboard for our affiliates and brand ambassadors. By @TopspinPro
- www.10degrees.uk/blog/ is a re-launched agency website integrating Alpine with the WordPress menu walker, and using Alpine to show blog content on the News page. By @10degrees
- adonismastery.com is built with Adonis, Alpine and Tailwind. By @ammezie
- jersonmr.github.io is built with Vite, Tailwind and Alpine by @JersonMorenoR
- bengreenberg.dev is built with Alpine, Tailwind & Eleventy by @RabbiGreenberg
Demos:
- Advanced PIN code input with Alpine.js by @rehhouari
- Integrating the tiptap text editor with Alpine/Livewire by @iksaku2
- Twitter “modal” clone with Livewrite and Alpine by @BotezatuDima
- Animate Text with Alpine JS by @shrutibalasa
- Go templates (Hugo) + Alpine + Tailwind for component reuse by @michlbrmly
Articles & Tutorials
Building a Constrained Textarea using Alpine.js
TATA Stack for Adonis productivity by @maxbertinetti
[Video] Responsive Side Navigation with Tailwind CSS and Alpine JS by @shrutibalasa
How to structure your Alpine.js Code into modules by @boxpiperapp
[Video] Progress Bar While Uploading Image Using Laravel Livewire and Alpine JS by @HiClovon
How to create a dropdown menu with AlpineJS + TailwindCSS by @jianjye_
Developing AlpineJs Apps Similar to Vue’s Composition API by @montalvomiguelo
For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.
Code & Tools
@rehhouari has been busy on pinecone, his Alpine.js router: github.com/pinecone-router/router, see also the Changelog.
@simo_tod is squashing bugs on the Alpine-turbo-adapter v1.1.0: github.com/SimoTod/alpine-turbo-drive-adapter, with better 4xx/5xx response handling.
k-ui-dashboard-alpine by @ak_kamona is a responsive dashboard template built with Tailwind & Alpine.js.
Bedrock a Landing page starter template by @render_labs
Jobs
A couple of days later, but I think this offer from David still stands:
I’m curious, any developers friends out there interested in helping me with the new @MtRainierWatch website?
Building a full e-commerce site, on the side, is a lot of work. DM me 📩
Frontend: @statamic@tailwindcss (and TUI)@Alpine_JS
Backend: @Shopify
— David A. Lindahl (@austriker27) May 2, 2021