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
PDF Embed Web Component Available Via NPM / / No Comments Earlier this month, after being motivated by Thomas Steiner, I went through the not-really-a-hassle process of publishing <table-sort> to NPM. (Table-Sorter Available Via NPM) Today I’ve done the same for another web component, <pdf-embed>. This component wraps Adobe’s PDF Embed API, which, honestly, isn’t an API, but a JavaScript library to embed PDFs inline with the rest of your document. Given this HTML: <pdf-embed url="https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf" width="100%" height="500px" key="33f07f2305444579a56b088b8ac1929e"><p>Read our cool PDF <a href="https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea... more → Posted in: JavaScript Tagged with: available, Component, EMbed
Adding Your Buttondown Email Stats to Your Website / / No Comments I’ve been using Buttondown for almost a full year now (I blogged about the setup here). After having a few issues with Mailchimp and my newsletter, I was pleasantly surprised by how easy Buttondown was and how quick it was to set up. I ended up paying for it as I knew I’d end up paying for some solution and Buttondown worked great and wasn’t expensive. For a while now, I’ve had a custom-built stats page on my blog that’s primarily built for me. It reports on multiple different parts of my site and its biggest use is to let me quickly judge how well I’m keeping to my publishing schedule (a post a week). One stat it didn’t have that I’ve been checking... more → Posted in: JavaScript Tagged with: Adding, Buttondown, email, Stats, Website
Scraping Recipes Using Node.js, Pipedream, and JSON-LD / / No Comments It’s pretty well known now that most, if not all, recipes on the internet are 90% crap and 10% actual recipe, at best. Obviously, there are outliers of course and obviously, if you are sharing your recipes online you are free to do so as you see fit, but speaking for myself, when I click a link to a recipe my assumption is that I’m going to have to "work" to figure out where the actual details are amongst the humorous backstories and other tidbits that don’t actually tell you how to make what you’re trying to make. That’s why I love apps like Saffron. Not only is it incredibly minimal and laser-focused on recipes, it has an incredibly good "recipe... more → Posted in: JavaScript Tagged with: JSONLD, Node.js, Pipedream, Recipes, Scraping, using
Using JSON Schema with Google Gemini / / No Comments Back about a month ago, I wrote up a post on how to generate JSON results using Google Gemini, "JSON Results with Google Gemini Generative AI API Calls". While you should read that post first, the process basically boiled down to: Setting the response type of the result to JSON. Without this, Gemini will return JSON but encoded in Markdown. Using a System Instruction to give directions on the "shape" of the JSON, i.e., use this key and that key. While these techniques work well, recently yet another feature was added that makes this even better, JSON schema support. JSON Schema is an abstract way to define the shape of JSON and can be really useful in validation. The website... more → Posted in: JavaScript Tagged with: Gemini, Google, JSON, Schema, using
Game Dev Diary – Cat Herder – Part 2 / / No Comments Welcome to my second game diary for [Cat Herder, which I’m subtitling – "Rise of the Machines". This update is all about the ‘machine’ aspect of the game. Let me explain. Right now each cat (well, you can only have one unless you cheat) has three needs you must manually take care by clicking the right button to match the mood. The idea of the machine feature is that they will automatically handle this for you, providing you have enough of them and the right type. The first thing I needed to figure out was how to enable this feature. I decided on a one time check to see if you have 75 or more purrs (the currency of the game). This is a one-time check because as... more → Posted in: JavaScript Tagged with: Diary, Game, Herder, part
Game Dev Diary – Cat Herder – Part 1 / / No Comments Over a year ago, I released my first "idle clicker" game, IdleFleet. IdleFleet is a simple "space merchant" game built with Alpine.js. I’ve worked on it off and on since the initial release (which was in Vue.js by the way) and still have updates I want to add, but a few weeks ago I started work on a new game I’d like to share with you, Cat Herder. The Game # Cat Herder is very much in its early stages so while I’ll (eventually) link to it, you can’t do much with it now. The basic idea is that you have one cat… to start with that is – and have to keep it happy. Cats have three basic moods: Wanting to be left alone Wanting to be fed Wanting... more → Posted in: JavaScript Tagged with: Diary, Game, Herder, part
Tracking Gemini Models with Pipedream / / No Comments APIs, tools, consumer features, and heck, pretty much every aspect, of generative AI is changing at an incredibly rapid pace. I mostly focus on just Google Gemini and even that is pretty difficult to keep up with. Recently, Linda Lawton shared that she actually uses an automation script to keep track of the models currently available in Gemini. I thought that was a great idea and decided to see if I could build something similar using Pipedream. Here’s what I came up with. Getting Available Models via API # Normally, if I wanted to know what models I had available, I’d go to AI Studio and just look, or check the docs. While that’s fine usually, there’s actually an API... more → Posted in: JavaScript Tagged with: Gemini, Models, Pipedream, Tracking