Upgraded to Eleventy 3.0 (Beta) / / No Comments Like I assume most of my fellow Eleventy users have been doing, I’ve been closely following the updates on Eleventy and its progress towards 3.0. As my blog is a fairly large site, I wasn’t in a rush to upgrade to an Alpha release, but the recent beta release convinced me it was time to take the plunge. The TLDR is that… it took me roughly an hour (most of which was by choice, I’ll explain below) and it’s been smooth sailing. Want to know more? Keep on reading… The Upgrade Helper Per the release notes, I made use of the upgrade helper which is a plugin you install along with, of course, upgrading your site to Eleventy 3. This worked well and flagged my only... more → Posted in: JavaScript Tagged with: Beta, Eleventy, Upgraded
Links For You (8/3/2024) / / No Comments The past few weeks have been a bit crazy, although mostly crazy good. Since the last one of these posts, my family and I went on vacation in San Antonio for a few days, and currently, my wife and I are in New Orleans for a short break. Last night we went to the Postmodern Jukebox concert which was easily one of the most fun concerts I’ve been to. I’ll share one of their clips at the end, but let me just say that they were a real treat live. CSV for Eleventy First up is a great example of why I love Eleventy – its flexibility. This post, "Eleventy – Add CSV data file support" describes how you can use CSV files in Eleventy to drive your content. Eleventy’s... more → Posted in: JavaScript Tagged with: 8/3/2024, links
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
Add Squirrelly Support to Eleventy / / No Comments I’m supposed to be on vacation but writing about Eleventy two days ago has got it fresh on my mind, also, I can’t pass up an opportunity to use "squirrelly" in a blog title. I subscribe to three or four different email newsletters related to web development. It’s fairly normal to see the same link shared among a few of them. Most recently an example of this was the Squirrelly library. This is, yet another, JavaScript template language and I thought I’d take a look at it in my spare time. Given that Eleventy makes it easy to add other template languages, how long does it take you to add support for it? Step One – Make Your Eleventy project # Technically... more → Posted in: JavaScript Tagged with: Eleventy, Squirrelly, Support
An Online Mastodon Archive Viewer / / No Comments Here’s a quick write-up of something I actually built a week or so ago… and forgot to share on the blog. Instead, I shared a way to integrate your Mastodon with Eleventy. In that post, I mentioned how the account Fedi.Tips was looking for ways to let people view their archived Mastodon data. I followed their guide on getting my export and started work on a simple viewer. If you don’t care about the "how", and have your archive ready, just head on over to https://tootviewer.netlify.app and upload your zip. The Archive # When you get your Mastodon archive, it will be a zip file containing the following: actor.json: A file related to the user, yourself probably. avatar.jpg:... more → Posted in: JavaScript Tagged with: Archive, Mastodon, online, Viewer
Caching Input with Google Gemini / / No Comments A little over a month ago, Google announced multiple updates to their GenAI platform. I made a note of it for research later and finally got time to look at one aspect – context caching. When you send prompts to a GenAI system, your input is tokenized for analysis. While not a "one token per word" relation, basically the bigger the input (context) the more the cost (tokens). The process of converting your input into tokens takes time, especially when dealing with large media, for example, a video. Google introduced a "Context caching" system that helps improve the performance of your queries. As the docs suggest, this is really suited for cases where you’ve got... more → Posted in: JavaScript Tagged with: Caching, Gemini, Google, input
Web Component to Generate Image Color Palettes / / No Comments Chalk this up to something that is probably not terribly useful, but was kind of fun to build. A few weeks ago I came across a site talking about the colors used in the Fallout TV show. I grabbed a screenshot of how they rendered it: Unfortunately, I didn’t make note of the site itself and I can’t seem to find it anymore. I really dug how it showed the palette of prominent colors directly beneath the image itself. Using this as inspiration, I looked into how I could automate this with a web component. To get the color palette, I turned to a library I’ve used many times before, Color Thief. Given an image, it can return either the most dominant color of an image or return an... more → Posted in: JavaScript Tagged with: Color, Component, Generate, Image, Palettes