The fact that I can create such a flexible custom @Alpine_JS directive in ~10 mins is just incredible.

Don't tweet often about work stuff, just wanted to pop in to say it's legitimately insane the things you can wire up in one afternoon. @statamic /Alpine/Livewire/Tailwind stack absolutely undefeated. BTW using the new @Alpine_JS sort plugin that dropped today 😮‍💨

✨ New Alpine plugin out: Sort Easily sort items on the page by dragging them with your mouse. Uses SortableJS under the hood 🤌

we've really made it huh?

More Pinkary updates: First, the answer input is now autosizable. We are using an "x-autosize" directive that expands the textarea as you type your response. Cool stuff by @ryangjchandler. 🧡

We're happy to say that v0.6 is now out with @Alpine_JS support. Thanks to GitHub user alexmanase 👏 Upgrade notes can be found at blade-ui-kit.com/docs/0.x/up…

Do you want to learn how to use and build an application with AdonisJS? 🎓 An official course by @AmanVirk1 is on the way! You will build a poll application using AdonisJS 6, @unpolyjs, @tailwindcss, and @Alpine_JS.

Introducing Gurido: A 100% free and open source theme built with: ⏤ @astrodotbuild ⏤ @tailwindcss ⏤ @Alpine_JS Includes: ⏤ Landing page ( duh...) ⏤ Navigation ⏤ Logo cloud ⏤ Work slider ⏤ Services ⏤ Testimonials ⏤ Massive pricing table ⏤ FAQ ⏤ CTA ⏤ Footer ⏤ Footer's note ⏤ License GPL 3.0 See it live: ⏤ gurido .vercel.app Fork it: ⏤ github .com/michael-andreuzza/gurido Hope you like and please enjoy it.

I started building a @statamic starter for myself, with a bunch of components likely to be used for client projects. One of those components involves Google Maps, so I thought I would write about how I built it, using @Alpine_JS to interact with the map. Read it here: 👇🏼

Most of developers using Go htmx stack. But, did you know that @eleven_ty @htmx_org @Alpine_JS can be an ultimate combo? Especially when you need a static website with some data fetching or some "fancy" features. I had an example repo here: github.com/riipandi/v60

Tailwind CSS, Astro and Alpinejs tip. How to create an adaptable navigation on scroll with @astrodotbuild, @tailwindcss, and @Alpine_JS. Understanding the scroll effect with Alpine.js Alpine.js uses a combination of its x-data directive to initialize data for a component and the @.scroll.window event listener to react to scroll events. This functionality is particularly useful for implementing adaptive UI elements, such as changing the appearance of a navigation bar as the user scrolls down a page. Key concepts and classes ⏤ x-data Directive: Initializes component state. Here, it’s used to set a boolean value indicating whether the page is at the top or not. ⏤ @scroll.window Modifier: Listens for scroll events on the window object. It updates the component’s state based on the scroll position. ⏤ Conditional Classes with: class Binding: Alpine.js allows for conditional class bindings, enabling you to add or remove classes based on the component’s state. Implementing scroll-triggered class changes Let’s break down the code to see how these concepts work together to change the navigation bar’s appearance on scroll. 1 Initialize State with x-data We start by defining a state named atTop that tracks whether the user has scrolled past a certain threshold. Detect scroll with @.scroll.window Next, we use @.scroll.window to modify atTop based on the user’s scroll position. If the page is scrolled down more than 50 pixels, atTop becomes false. Dynamic Class Binding with :class With the state in place, we can dynamically bind classes to our navigation bar using the :class directive. This allows us to add different classes based on whether atTop is true or false. In this example, when the user scrolls down (and atTop is false), the navigation bar’s classes change to bg-black bg-opacity-90 backdrop-blur-xl, applying a darker background, increased opacity, and a blur effect. When the user scrolls back to the top (atTop is true), the classes revert, showing a white background. The Result By combining these Alpine.js features, we create a navigation bar that reacts to the user’s scroll position, enhancing the visual experience and interactivity of the site. This approach can be adapted to trigger various effects, such as animations, color changes, or visibility toggles, based on how far the user has scrolled. Alpine.js’s simplicity and power for creating dynamic UIs are evident in how effortlessly it can add such sophisticated behaviors to web elements. With just a bit of JavaScript embedded directly in your HTML, you achieve a high level of interactivity that would typically require more complex solutions. See it live and get the code: ⏤ lexingtonthemes.com/tutorial…

Tailwind CSS, Astro and Alpinejs tip. How to create an interactive pricing table with @astrodotbuild , @tailwindcss, and @Alpine_JS. This guide walks you through building a responsive pricing table using Astro, Tailwind CSS, and Alpine.js. We'll focus on making the table interactive with Alpine.js and dynamically rendering pricing plans with Astro. Let’s populate the array for the pricing plans Starting with the pricingPlans array, the backbone of our component. This array contains objects, each representing a different pricing plan and styles for our pricing cards, because of course, we need to think about UX. Each plan includes details such as pricing, descriptions, styling classes, and arrays of available and unavailable features. Rendering the Component with Astro Using Astro’s component model, we dynamically render each pricing plan. Astro’s template syntax allows us to iterate over the pricingPlans array, generating the markup for each plan: Styling with Tailwind CSS Within each plan’s markup, Tailwind CSS classes are applied for styling. This approach ensures our pricing table is not only functional but also visually appealing and responsive. For each pricing plan, we conditionally display the price based on this state: Dynamic Feature Listing A key part of our pricing table is listing what’s included and what’s not. Using Alpine.js’s x-show, we dynamically render features based on their availability: ul> {plan​.features​.map((feature) => ( <li x-show="available">{feature}</li> ))} {plan​.unavailableFeatures.​map((feature) => ( <li x-show="!available" class="text-gray-500">{feature}</li> ))} </ul> Conclusion By combining Astro’s static generation with Tailwind CSS for styling and Alpine.js for interactivity, we’ve created a dynamic and responsive pricing table component. This tutorial showcases the power of integrating these modern web technologies to build interactive components efficiently. Experiment with the code snippets provided, tweaking styles, and adding more features as you see fit. The flexibility of Astro, combined with the utility-first approach of Tailwind CSS and the reactivity of Alpine.js, offers a solid foundation for building sophisticated web interfaces. See it live and get the code: ⏤ lexingtonthemes.com/tutorial…

Prototyping an Alpine.js Pintura integration, works like a charm ✨ @calebporzio are there any good examples of other third-party library integrations? Also, a custom directive blue-print repo is referenced in the docs but there's no link.

Huge fan of alpine as well, we use it all over T-Mobile.com and replaced most of the old angular pages just with alpine. Faster for customers easier to code and work with a cms .

I love how simple it is to make a hide / show password toggle with @Alpine_JS

My conversation with @calebporzio is live! youtube.com/watch?v=qkFvnnbl…

@htmx_org and @Alpine_JS is a power combo. So let's turn into a game! youtu.be/vQUqgURgG8M In 15 minutes you'll have your own Wordle clone!

Been a hot minute... and it feels sooo good

Just launched ahastack.dev Combine @astrodotbuild @htmx_org and @alpine_js to create modern web applications sending HTML over the wire, replacing the SPA JS-heavy approach with a much simpler set of mental models and workflows

🚀🎉 Launch day baby! New Livewire screencasts are live and 50% off! 📹 Watch 4 hours of content 🧑‍💻 Access all the source code ❤️ Support this lil project livewire.laravel.com/screenc… Lemme show you around the new content 🫴