Cat Herder V1 Released! / / No Comments It’s been a few weeks since I blogged about Cat Herder, my latest web game, but over the holiday break I plugged up the last few features missing and decided it was time to "release" it, and by release, I mean set the version number to 1 and see what happens next. Since my last post in June, I’ve made a few small changes here and there, but the biggest updates in this last release revolve around the cats, and how you get more of them. As I mentioned in my previous posts, I wasn’t really sure about making cats "purchasable", that just didn’t feel right. Instead, I went with a system that kind of works like levels in a RPG. The more purrs you get (which... more → Posted in: JavaScript Tagged with: Herder, Released
(Don’t) Add BASIC Support to Eleventy / / No Comments So yesterday I wrote up the process of adding the Squirrelly template language to Eleventy. It was, essentially, five minutes of work due to how well Eleventy supports adding custom languages. After writing it up, publishing it, and running some errands, a really bad and silly idea came to me… what if I added BASIC support to Eleventy? Way back in the Stone Age, my first computer language was Applesoft BASIC on an Apple 2e (or +, not sure). Just look at this rad machine and imagine it paired with a monochrome green monitor: By Bilby – Own work, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=11119727 I wrote a lot of programs on that machine, most typed by hand from the... more → Posted in: JavaScript Tagged with: BASIC, don't, Eleventy, Support
Building a Web Version of Your Mastodon Archive with Eleventy / / No Comments A couple of days ago Fedi.Tips, an account that shares Mastodon tips, asked about how non-technical users could make use of their Mastodon archive. Mastodon makes this fairly easy (see this guide for more information), and spurred by that, I actually started work on a simple(ish) client-side application to support that. (You can see it here: https://tootviewer.netlify.app) This post isn’t about that, but rather, a look at how you can turn your archive into a web site using Eleventy. This is rather rough and ugly, but I figure it may help others. Here’s what I built. Start with a Fresh Eleventy Site # To begin, I just created a folder and npm installed Eleventy. I’m using the... more → Posted in: JavaScript Tagged with: Archive, building, Eleventy, Mastodon, version
Working with Pasted Content in JavaScript / / No Comments This began as me wanting to build an Alpine.js application that handled pasted input, but I realized before I looked into handling this with Alpine, it made sense to start with basic vanilla JavaScript at first. I’ve worked with the clipboard before, mainly storing information to it, but this was the first time I looked at handling input from the clipboard. The web platform handles it rather nicely, but as with most things, there are a few interesting things you need to be aware of. Here’s what I found. Listening To the Event # The first thing you need to do is actually listen to the event. While you probably listen on a part of a DOM, it made the most sense to me to listen at the... more → Posted in: JavaScript Tagged with: Content, JavaScript, Pasted, working
Storing Recipes in IndexedDB / / No Comments The last two sessions of my show, <Code><Br>, were taken up talking about one of my favorite web platform features, IndexedDB. This is a topic I’ve covered many years on the blog (I even wrote a book on it back in 2016) so I thought it would be a good topic for the show. (I will include links to those episodes at the end of this post.) In the first session, Sue, one of the folks watching the live stream, suggested I use recipes as an example of data to persist in the browser. I thought this was perfect as recipe data can get quite complex. You can see an example of that in the post I wrote earlier this month on scraping recipes. For the context of the live stream, I decided... more → Posted in: JavaScript Tagged with: IndexedDB, Recipes, Storing
Creating a Content Assistant with Gemini and GenAI / / No Comments One of the use cases for generative AI that I’ve discussed before is the idea of using the tool to aid in the writing process. I’m not talking about creating content so much as creating suggestions and providing feedback about the content you yourself have created. This past weekend I worked on a "general purpose" tool with this in mind and thought I’d share it to get your feedback. ("You" being the smart readers of this blog who keep me honest when I show something stupid. 😉 The Application # The application itself is rather straightforward. It asks two questions – first, what are you trying to accomplish with your writing and what are the desired... more → Posted in: JavaScript Tagged with: Assistant, Content, creating, Gemini, GenAI
How to Set Date Time from Mac Command Line / / No Comments Working on a web extension that ships to an app store and isn’t immediately modifiable, like a website, can be difficult. Since you cannot immediately deploy updates, you sometimes need to bake in hardcoded date-based logic. Testing future dates can be difficult if you don’t know how to quickly change the date on your local machine. To change the current date on your Mac, execute the following from command line: # Date Format: MMDDYYYY sudo date -I 06142024 This command does not modify time, only the current date. Using the same command to reset to current date is easy as well! The post How to Set Date Time from Mac Command Line appeared first on David Walsh Blog. David Walsh... more → Posted in: JavaScript Tagged with: Command, date, from, line, time
Case Insensitive CSS Attribute Selector / / No Comments CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case! Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive: /* case sensitive, only matches "example" */ [class=example] { background: pink; } /* case insensitive, matches "example", "eXampLe", etc. */ [class=example i] { background: lightblue; } The use cases for this i flag are likely very limited, especially if this flag is knew knowledge for... more → Posted in: JavaScript Tagged with: Attribute, Case, Insensitive, Selector