Help Me Solve an Alpine.js Mystery / / No Comments Yesterday I wrote up my experience in building a simple CRUD interface using Alpine.js, and in doing so, ran into an interesting issue. While it would be best to read the entire previous article, let me try to break down the issue… or at least as how I saw it. My Alpine app had a variable, cats, that was an array of objects. I looped over them and displayed them in a simple table: <template x-for="cat in cats"> Notice I’m using a variable, cat, to represent each element of the array. Here’s one example of using it: <td x-text="cat.name"></td> The application also made use of a cat variable. This was intended to be used in the edit form.... more → Posted in: JavaScript Tagged with: Alpine.js, help, Mystery, Solve
Building a CRUD Web App with Alpine.js / / No Comments One of the things I try to encourage here is for my readers to reach out with their questions. That rarely happens, but when it does, I try my best to answer as soon as possible. In this case, I got a great question from a reader back in May and then… life happened. Sorry, Nicholas, but hopefully this isn’t too late. His question was pretty simple – could I build an example of using Alpine.js for a CRUD interface? For folks who may not know the term, CRUD refers to: (C)reate (R)read (U)pdate (D)elete You’ve probably seen a hundred interfaces like this. You have a list of content with links to edit one, delete one, and a link to add a new instance of that content. When... more → Posted in: JavaScript Tagged with: Alpine.js, building, CRUD
Converting a Vue 2 App to Alpine.js / / No Comments A little over two years ago I published an "idle clicker game" built in Vue.js. I called it "IdleFleet" and was heavily inspired by games like A Dark Room, where I relied on simple text graphics and game mechanics that would change as you played. In my last <Code><Br> session, I walked through the process of building a simple text game and brought up IdleFleet as an example. While playing the game to refresh my memory about what I actually built… I discovered I actually really liked it. I decided it would be good to give it some attention with new features and other updates, but before I could do that, I knew I needed to switch from Vue to Alpine.js. Why... more → Posted in: JavaScript Tagged with: Alpine.js, Converting
Using IndexedDB with Alpine.js / / No Comments A lot of my "x with Alpine" blog posts end up being, well, nothing special. That’s a good thing I suppose as it really helps highlight how simple Alpine.js is. (Note, I go back and forth between including the ".js" when referring to Alpine. I should be more consistent I suppose. On one hand, Alpine.js is the formal name, but Alpine just feels simpler.) That being said, the impetus for this post was to get something basic done before I built something a bit more complex. So if you wish to TLDR – it just works, visit my CodePen for the full source, and come back for the next post. If you’re still curious, keep on reading. IndexedDB – Vanilla or Library?... more → Posted in: JavaScript Tagged with: Alpine.js, IndexedDB, using
Testing Out the Alpine.js Intersect Plugin / / No Comments A few weeks ago, I finally got around to looking at the official plugins Alpine.js supports and built a little demo that integrated the Intl spec with the Mask plugin. (You can read the post here: Integrating Intl with Alpine.js Mask). Today I thought I’d take a look at another plugin, Intersect. What Is It? # The Intersect plugin is a wrapper for the Intersection Observer API. This is a pretty cool web platform API that lets you monitor when DOM elements come into the visible part of a web browser. I first dug into this a few months ago in an article I wrote for Cloudinary, "Automatically Loading High-Quality Images with Cloudinary and IntersectionObserver". In that article,... more → Posted in: JavaScript Tagged with: Alpine.js, Intersect, plugin, Testing
Integrating Intl with Alpine.js Mask / / No Comments I’ve been using Alpine.js for quite a while now (although I still make silly mistakes, see the p.s. at the end) but haven’t yet looked at the "official" plugins. Listed in the docs, those plugins include: Intersect – a simple hook to recognize when an element is visible (I plan on blogging about this later) Persist – a simple hook to add persistence to Alpine data (another plugin I plan on blogging about) Focus – a way to manipulate focus Collapse – a simple UI plugin for collapsible content Morph – another UI plugin that attempts to transform one set of HTML into another (I honestly don’t quite get this one – yet) And finally,... more → Posted in: JavaScript Tagged with: Alpine.js, Integrating, Intl, Mask
Want to learn Alpine.js? / / No Comments For the past two weeks or so, I’ve been releasing videos on YouTube all about learning Alpine.js. Each video is relatively short (although longer than a Tiktok video) and can be quickly consumed, with the entire playlist coming in under an hour. Each video has links to CodePens that let you immediately play with the concepts I cover. I really like Alpine (as you can see by many other posts on the topic) as it’s an incredibly simple, and practical, JavaScript framework. There’s no build process, no hundreds of megabytes of download, and it’s something you can pick up rather quickly, as I hope my video series demonstrates. Check it out, leave me a comment, and let me know... more → Posted in: JavaScript Tagged with: Alpine.js, Learn, want
Creating a Blackjack Game with Alpine.js and the Deck of Cards API / / No Comments Some time ago I ran across a pretty fascinating service, the Deck of Cards API. This API handles everything imaginable related to working with decks of cards. It handles creating a shuffled set of cards (containing one or more decks), dealing out a card (or cards), and even reshuffling. Even better, it includes card images you can use if you don’t want to find your own: It’s an incredibly feature-filled an API and best of all, it’s completely free. No need for even a key. I’ve known about this API for a while and have contemplated building a card game with it, but realized that games can quickly go from simple to fairly complex. In fact, my friends strongly urged me not... more → Posted in: JavaScript Tagged with: Alpine.js, Blackjack, Cards, creating, Deck, Game