Raymond Camden

Turning my Cursor Performance Work into a Repeatable Skill

2026-07-08T18:00:00+00:00

Yesterday, I wrote about using Cursor to review my blog for performance. Cursor (and again, for full disclosure I work here now ;) did a dang good job of finding performance issues with my site, handling the huge size and various languages, platforms, and so forth. As I said, it worked well, but I wanted to look into making this more of a repeatable process.

I'm saying "repeatable", not "automated", on purpose here. I can automate the process, but a full performance review feels much more like something I should run when I think it makes sense, for example, when I know I've tweaked my blog at the 'code' level versus writing cat-related blogs. I do plan to look into automations with Cursor later, but for now, what I've done is something I'll run when I think it makes the most sense.

What's a skill again?

At the simplest level, a skill simply gives direction to an AI agent on how to perform a task. It also describes itself in such a way that your AI agent knows when to invoke the skill. This is done in a simple Markdown file that can, and probably should, be checked into your repo.

So for example, if I had a skill related to checking the health of my cat, my AI agent should be smart enough to recognize when it should use the skill based on my prompt. So for example:

I'm worried about Donut's health, anything I can do?
Sir Fluffalot is doing fine, but what steps can I do to ensure she's healthy?

That's a pretty quick summary but you get the idea. Where the benefit comes in is helping document and describe a process that you need to run again and again, or a process your organization/team/herd of cats needs to standardize on and wants to be consistent.

Turning my performance review into a skill

When I first did my performance review, I kept the prompt pretty simple. I did this on another machine so I don't have it in front of me, but I believe it was literally as simple as:

Review this site and tell me of any performance improvements you can find.

That generated the review I shared in my last post and guided my development.

Cursor provides a few ways to make skills:

Since it's just a Markdown file, you can just make a file, old school like we did in the old days.
Cursor has a skill to make skills: /create-skill i need a skill to help with cat care
You can also just ask Cursor to do this in a prompt.

The last option is what I did, asking Cursor to make a skill like my prepublish one.

Cursor responded with:

A note on the last paragraph of the response. I had started my conversation with Cursor initially thinking I was going to automate it with a hook, but changed my mind. That's why it's mentioned here. The last bit "frontmatter trigger phrases" goes back to what I said earlier - a skill is both a guide on how to do something as well as a description of when it should be run.

The result was pretty astounding I think, specifically in how Cursor recognized the "engine" parts of my blog versus the "content" bits. It did this well in the one off so I'm not surprised, but I love having the various parts spelled out specifically in the skill itself. Like yesterday, I'll share the entire skill at the end, but let me talk a bit about what it did when I tried running it.

Running the Skill

When I ran the skill, I didn't expect it to find anything as my last commit was just a blog post. Cursor responded as such mentioning there was nothing staged. It noted two files that were dirty but not important:

I asked it to review the last two and it also noticed they didn't have anything relevant either - but what got me excited was that it went ahead and looked at one more and noted relevant changes there. Here's how that response ended:

Want me to precheck 1117ccc2 (or 1117ccc2 + 06626459 together)? That is where the meaningful review would be.

As I mentioned, I didn't do everything in the initial performance check, so I figured, why not, and I approved this scan. It noted two places I had used rss-parser and not yet added the timeout change so I went ahead and let Cursor make those changes as well.

The Skill

Here's the skill created by Cursor. Let me know what you think! Also, check out Cursor's docs on Skills - it's not just specific to Cursor and is a great reference in general.

Asking Cursor to Review My Blog for Performance

2026-07-07T18:00:00+00:00

Last week I decided to try something interesting. I opened my blog up in Cursor and asked for a basic performance review. That seems like a no-brainer, but keep in mind, my blog's source code clocks in at near seven thousand files (ignoring node_modules of course), so this wasn't some small request.

My blog is built with the Eleventy static site generator. It's a mix of JavaScript and Markdown primarily, with a huge portion of the codebase being Markdown and not 'code' per se, but me rambling on about cats and Star Wars. There's also Liquid templates which are parsed into HTML by a JavaScript library. But that doesn't quite tell the whole story.

In Eleventy, when converting my Markdown into HTML, it also applies the Liquid template syntax to Markdown which means my blog posts can actually be dynamic, at build time anyway. This impacts how fast the site builds in ways I can completely forget about down the road.

This is why I let Cursor look over the entire code base instead of ignoring my Markdown (Cursor docs on ignore files), and I'm glad I did. I'll share the complete report at the end of this post, but let me talk about the highlights.

RSS Parsing and a dead Mastodon server

The biggest fix Cursor discovered concerned code I had to work with, and render, Mastodon posts. I've got a shortcode that given a server and username will find the last post via the RSS feed generated for the account. I use another shortcode that renders the post into HTML.

Cursor discovered I had multiple calls out to botsin.space, a Mastodon server that was built to target bots and unfortunately had to be shut down. I had multiple blog posts trying to get content from that server. The code, which made use rss-parser, would get a quick failure but was keeping an HTTP socket open until it timed out, roughly 70 seconds later.

To be clear, the 'bug' here was in my implementation, not the RSS library. The fix was pretty simple. Going from:

import Parser from 'rss-parser';

const parser = new Parser();

To:

import https from 'https';
import Parser from 'rss-parser';

const parser = new Parser({
  requestOptions: {
    timeout: 5000,
    agent: new https.Agent({ keepAlive: false }),
  },
});

This alone helped, but I also found instances in my Markdown where I was calling out to botsin.space and replaced it with mastodon.social (where I moved my bots).

Trying to be AI friendly had an unintended consequence

A few months back I made a change to my blog to be more AI friendly. That involved two steps:

For every post, I now have a copy of the Markdown version. So for example, this https://www.raymondcamden.com/2026/07/06/my-new-role-helping-ai-adoption-at-cursor goes to HTML, and you can go to https://www.raymondcamden.com/2026/07/06/my-new-role-helping-ai-adoption-at-cursor/index.md for the Markdown
I used a Netlify Edge serverless function to sniff for a content request that prefers plain text or Markdown, what an AI agent would send, and redirects to that automatically. You can see that code here: https://github.com/cfjedimaster/raymondcamden2023/blob/main/netlify/edge-functions/content-negotiation.ts

To enable the Markdown copy, my eleventy.config.js uses an event handler for builds:

eleventyConfig.on("eleventy.after", async ({ dir }) => {
    const inputDir = dir.input;   
    const outputDir = dir.output; 

    // blog posts only
    const mdFiles = glob.sync("posts/**/*.md", {
        cwd: inputDir,
        ignore: ["node_modules/**"],
    });

    for (const file of mdFiles) {
        const srcPath = path.join(inputDir, file);
        /*
        My input file looks like so:
        src/posts/2026/03/04/2026-03-04-dyanimically-adjusting-image-text-for-contrast.md
        I need to save to

        outputdir/2026/03/04/dynamically etc
        */
        let newFile = file.replace('posts', '');
        newFile = newFile.replace(/[0-9]{4}-[0-9]{2}-[0-9]{2}-/,'');
        newFile = newFile.replace('.md','/index.md');

        const destPath = path.join(outputDir, newFile);


        fs.mkdirSync(path.dirname(destPath), { recursive: true });
        fs.copyFileSync(srcPath, destPath);
    }
});

The important bit is the glob. When I run my blog locally, I have an .eleventyignore file which ignores blog posts from 2003 to 2024 or so, basically 90% of my blog posts (I blogged a lot more in the old days). However, my glob wasn't using that and every change resulted in 6k+ files being copied. Locally that meant every change I made while writing a post would take about 3 seconds to process. That's not bad in theory, but I tend to write, check the HTML, edit, etc, quickly, and I absolutely noticed times when I'd have to reload again because I reloaded too quickly the first time.

For the fix, I went back to Cursor and simply asked for help and the response was perfect:

The simplest fix is to stop globbing and copy only posts Eleventy actually built. The eleventy.after event gives you a results array of everything Eleventy processed, which already respects all ignore sources.

I missed this in Eleventy's docs on the event that's 100% on me. I let Cursor update the code:

eleventyConfig.on("eleventy.after", async ({ directories, results }) => {
    const inputDir = directories.input;
    const outputDir = directories.output;

    // Only copy posts Eleventy actually built (respects .eleventyignore)
    const postResults = results.filter((r) => {
        const rel = path.relative(inputDir, r.inputPath);
        return rel.startsWith(`posts${path.sep}`) && rel.endsWith('.md');
    });

    // rest of event...

Bypassing API calls locally

One last thing it suggested that I implemented involved my _data files. These files use remote APIs to fetch data for my site, most of which you can see on my Now page. I had code to look for a local run, or a lack of an environment variable for a key. My code though was a bit of a hack, like looking for /home/ray, and that failed on new machines where my local username didn't match. It didn't dramatically impact my builds, but Cursor pointing this out made me build a nicer solution - which was just to look for an environment variable instead, one I include in my npm scripts now:

"dev2": "SKIP_REMOTE_DATA=1 eleventy --serve --quiet",

(The use of 'dev2' is another story and related to a bug in the Netlify CLI.)

Wrap Up

Ok, I work at Cursor, I'm biased, but of course other tools could create similar results. I'm just impressed by how deep Cursor looked into my code and found things that I never would have realized. As I write this and save, I'm seeing build times of 0.33 seconds or so, which is freaking great. My "full" builds aren't necessarily faster, but that's fine. (Netlify and Eleventy both perform incredibly well with a typical site build of less than four minutes.)

Here's the complete initial report Cursor created.

Photo by Yannik Zimmermann on Unsplash

My New Role - Helping AI Adoption at Cursor

2026-07-06T18:00:00+00:00

This will be a short and sweet post to announce that today is my first day at Cursor!

I'm starting today as an AI Adoption Engineer, which basically boils down to helping our customers make better use of Cursor and AI in general. If you've been visiting my site for a while now, you know I've been using AI for quite some time, but more importantly, I've also been adopting AI in my own workflows and processes. It takes time and energy but the payoff can be so incredible, and that's what I get to help our developers with.

Happy Day One!

Links For You (7/5/26)

2026-07-05T18:00:00+00:00

In my last links post, I hinted that I may have some good news on the job front, and if you follow me on LinkedIn you already know that I've signed on to my next gig. Tomorrow morning I'll share on here (and on LI) details about the new gig, but I am beyond excited about this new job. With that out of the way, how about some happy links for what's going to be a really dang good week?

JavaScript in the Shadows

As one of the new proposals for JavaScript, the ShadowRealm API is pretty interesting. It allows for the creation of a realm, or in my mind, an environment, with JavaScript that is 100% disconnected from the main environment of your browser window. Mat Marquis gives a great introduction to this in Soon We Can Finally Banish JavaScript to the ShadowRealm over on CSS Tricks. (If for some reason you've never heard of css-tricks, you should absolutely bookmark it and make it part of your required reading.) Mat's introduction is a pretty fun read as well.

Brownies for Storage

I'm a sucker for anything browser-storage related, and Brownies is a great example of that. Brownies is a library that wraps cookies, Web Storage, and IndexedDB, all in one. Here's an example from their docs:

import { cookies, local, db } from 'brownies';

cookies.token = 42;     // Set it
let t = cookies.token;  // Get it
delete cookies.token;   // Eat it

local.token = 42;       // Set it
let t = local.token;    // Get it
delete local.token;     // Del it

// db is ASYNC so read is different
db.token = 42;          // Set it
let t = await db.token; // Get it
delete db.token;        // Del it

This looks quite delicious. It's probably not fair to say it is a wrapper for IndexedDB as from what I can see, it's just doing a key/value store and not letting you specify custom object stores and such. In fact, the docs for db seem to be missing, and the repository doesn't have issues enabled so I'm going to have to find another way to leave that feedback, but check it out nonetheless. (I sent the author an email about this.)

Don't use JavaScript!

My first two links were JavaScript related, so why not advise against JavaScript in my third link? While not an "anti" JavaScript resource, NoLoJS is a resource showing multiple different UX/UI components that can be built with no, or at least little, JavaScript. As I discovered last week, there's a lot you can do with CSS and removing JavaScript dependencies is just one benefit.

Just For Fun

Yesterday was July 4th which means hot dogs and fireworks and that's all... right? Unsurprisingly, there's quite a few examples of fireworks being rendered in HTML. Here's one fun example that's pure CSS:

See the Pen Pure CSS Fireworks by Eddie Lin (@yshlin) on CodePen.

Building Custom Form Selection Boxes - Working on Accessibility

2026-07-03T18:00:00+00:00

Whenever I find myself needing to update a previous blog post, I either correct it inline and add a small note on top, for small tweaks, or write a whole new piece for larger changes. My last blog post talked about how to use CSS to style a "block" such that it acted like a form radio button. When I worked on that demo, I was a bit worried about accessibility. I did one quick check with an online tool, and thought I was ok. I was not.

When I shared my post on LinkedIn, Kevin Bonett shared this feedback with me:

I would argue that, despite using correct semantic HTML, the "custom" radio buttons are inaccessible.

If you're a sighted keyboard user, how will you know how to interact with the radios, because they look nothing like traditional controls?

Radio selection is usually made with ARROW keys. There's nothing to visually suggest this.

Users may become frustrated because they're trying to use TAB key instead to access the 2nd radio.

This all made sense to me, so I turned to Cursor for help. The first thing I did was download the CodePen assets locally. I knew my agent in Cursor could work with the remote URL, but as far as I know, could not edit my CodePen for me, and I wanted to give the agent the ability to edit locally so I could test and confirm.

With the files in place locally, I started with this prompt:

I built this demo to showcase how to have a 'custom' block of HTML that
could be selected and used in a form. I did an online check for
accessibility and while it reported a few issues, none seemed to
imply to the form concept that I was testing, the customized 
radio blocks. I blogged about this demo here. https://www.raymondcamden.com/2026/07/01/building-custom-form-selection-blocks-no-js-all-css. 

When I shared this online, a user sent this feedback:

"I would argue that, despite using correct semantic HTML,
the "custom" radio buttons are inaccessible.

If you're a sighted keyboard user, how will you know 
how to interact with the radios, because they look
nothing like traditional controls?

Radio selection is usually made with ARROW keys. There's
nothing to visually suggest this.

Users may become frustrated because they're trying to use
TAB key instead to access the 2nd radio."

Given this feedback, what do you think, and what can we do to 
improve the demo?

The response from this was pretty stellar, and I think a lot better than if I had simply said "work on accessibility". By bringing in Kevin's details, I think it really helped focus the agent's work when looking at my code.

Here's the response, and it's pretty extensive, you would be fine scrolling down to the Summary:

I went ahead and gave Cursor permission to edit and update my files, and while I'm keeping the original CodePen as is, I pushed up the new files to Netlify: https://formselectionblock.netlify.app/

The keyboard navigation is improved and the text helps too. I passed this by Kevin; he agreed with the updates, so going forward when I use this UX on my sites, I'll work with this version. Let me know what you think!

Building Custom Form Selection Blocks - no JS, all CSS

2026-07-01T18:00:00+00:00

Edit on July 3 - See my update. I apologize for what may be a slightly misleading title. The topic for this post is something I've had on my list of things to explore for some time now, and while I wait for the new job to start, I've found myself with time to kill. Let me explain what I'm talking about and hopefully it will make a bit more sense. You are, dear reader, familiar with form controls and how to build forms both big and small. One type of user interface I've seen from time to time is the ability to select an item where the "item" is an arbitrary block of code. What do I mean by that?

Typically a choice element in a form is either a select, checkbox, or radio set. But I've seen some forms where you select something a bit more abstract. Consider the screen shot below:

See the two regular text fields and the cat selection? If I pick one, it visually updates:

On submitting the form, there will be something representing the selected value, along with any other form field values as well. In theory, the "thing" you select can be any arbitrary block with the selection look and feel being whatever makes sense for your site.

So given this UX, I was curious how I'd build it myself.

First thought - Web Components

Initially, I thought this would be a great use for web components. Web components can participate in forms (see my post from... wow, three years ago!) so in theory, I could build something like this:

<form method="post">

	<p>
	<label for="name">Name:</label>
	<input type="text" name="name" id="name">
	</p>
	<p>
	<label for="email">Email:</label>
	<input type="email" name="email" id="email">
	</p>
	
	<area-select name="foo" value="1">
		This is area select 1.
	</area-select>

	<area-select name="foo" value="2">
		This is area select 2.
	</area-select>

	<input type="submit">
</form>

In the sample code above, area-select is a web component which will participate in a form by setting the foo value to whatever is selected, using the string in value as the value.

I wrote this out and was about to start hacking away at the code. Because of course JavaScript would be needed for this, right?

Sorry I doubted you CSS...

Before I started writing JavaScript, I thought - let me Google some more and research this because maybe, just maybe, a pure CSS solution would work?

I'm glad I did.

Turns out - it's actually relatively simple to achieve this with a bit of CSS. First, let's consider this version of the HTML:

<form method="post" action="https://postman-echo.com/post">
	
	<p>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name">
	</p>
	<p>
		<label for="email">Email:</label>
		<input type="email" name="email" id="email">
	</p>

	<label class="custom-card">
	  <input type="radio" name="option" value="1">
	  <h3>Option 1 - Luna</h3>
	  <img src="https://placecats.com/200/250">
	</label>

	<label class="custom-card">
	  <input type="radio" name="option" value="2">
	  <h3>Option 2 - Pig</h3>
	  <img src="https://placecats.com/300/200">
	</label>

	<p>
	<input type="submit">
	</p>
</form>

My two "custom selectable doohickies" are just label elements with an internal radio button. After the button I've got arbitrary HTML.

Now for the CSS:

.custom-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style the label container itself as the button */
.custom-card {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 350px;
  height: 350px;
  vertical-align: top;
}

/* Style change when active */
.custom-card:has(input[type="radio"]:checked) {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

This does a few things. It completely hides the radio field, styles the label like a "card" element, and defines the "selected" look to add a blue border and background. It also swaps out the text color to white. Because I'm wrapping everything in a label, the entire block is selectable, and a cursor pointer helps make that clear to the user.

In theory... that's it. I spent a bit of time tweaking the initial CSS I had found and more could be done of course, but this ended up being simpler than I imagined.

You can play with the full demo here: https://capital-wood-marlin.codepen.app/

And here's the full CodePen:

See the Pen Custom Radio by Raymond Camden (@cfjedimaster) on CodePen.

Decoding VINs with an API

2026-06-26T18:00:00+00:00

Today's post took a bit of a pivot. I decided to work on a demo idea I had created way back in March. As I worked on it, I ran into multiple roadblocks, and while that original idea for a demo may still see the light of the day, I figured I'd at least share something that did work.

What's a VIN?

A VIN is a vehicle identification number. It's a standard that dates back to 1954 and identifies a particular car by manufacturer, make, model, year, and a heck of a lot more. A VIN is 17 characters avoiding the letters O, I, U, and Q to avoid confusion with some numbers.

You can break down a VIN into various components if you want - but would still need to know various lookup values, for example a manufacturer referred to as 1FT maps to Ford Truck.

Decoding a VIN via API

As part of the demo that didn't quite make it, I needed to decode a VIN value. I had a commercial service in mind but it had a pretty limited free tier (50 calls). Turns out, the National Highway Traffic Safety Administration actually has a bunch of APIs, multiple of which work with VINs.

The Vehicle API is free, with no limits (outside of not being a jerk), and requires no API keys at all.

The one we want is the Decode VIN Extended (flat format) endpoint. Why "flat format"? The initial API returns information that very much looks like XML translated to JSON, which to be fair, it is, and while the data is all there, it's a bit ugly. The flat format makes it look quite a bit nicer.

To use the API, simply include the VIN in the URL and ensure you add ?format=json: https://vpic.nhtsa.dot.gov/api/vehicles/decodevinvalues/3VV3B7AXXNM077525?format=json

This returns:

{
  "Count": 1,
  "Message": "Results returned successfully. NOTE: Any missing decoded values should be interpreted as NHTSA does not have data on the specific variable. Missing value should NOT be interpreted as an indication that a feature or technology is unavailable for a vehicle.",
  "SearchCriteria": "VIN(s): 3VV3B7AXXNM077525",
  "Results": [
    {
      "ABS": "Standard",
      "ActiveSafetySysNote": "",
      "AdaptiveCruiseControl": "Standard",
      "AdaptiveDrivingBeam": "Standard",
      "AdaptiveHeadlights": "",
      "AdditionalErrorText": "",
      "AirBagLocCurtain": "1st Row (Driver and Passenger)",
      "AirBagLocFront": "1st Row (Driver and Passenger)",
      "AirBagLocKnee": "",
      "AirBagLocSeatCushion": "",
      "AirBagLocSide": "1st Row (Driver and Passenger)",
      "AutoReverseSystem": "Standard",
      "AutomaticPedestrianAlertingSound": "",
      "AxleConfiguration": "",
      "Axles": "",
      "BasePrice": "",
      "BatteryA": "",
      "BatteryA_to": "",
      "BatteryCells": "",
      "BatteryInfo": "",
      "BatteryKWh": "",
      "BatteryKWh_to": "",
      "BatteryModules": "",
      "BatteryPacks": "",
      "BatteryType": "",
      "BatteryV": "",
      "BatteryV_to": "",
      "BedLengthIN": "",
      "BedType": "",
      "BlindSpotIntervention": "",
      "BlindSpotMon": "Standard",
      "BodyCabType": "",
      "BodyClass": "Sport Utility Vehicle [SUV]/Multipurpose Vehicle [MPV]",
      "BrakeSystemDesc": "",
      "BrakeSystemType": "",
      "BusFloorConfigType": "Not Applicable",
      "BusLength": "",
      "BusType": "Not Applicable",
      "CAN_AACN": "",
      "CIB": "Standard",
      "CashForClunkers": "",
      "ChargerLevel": "",
      "ChargerPowerKW": "",
      "CombinedBrakingSystem": "",
      "CoolingType": "",
      "CurbWeightLB": "",
      "CustomMotorcycleType": "Not Applicable",
      "DaytimeRunningLight": "Standard",
      "DestinationMarket": "",
      "DisplacementCC": "2000.0",
      "DisplacementCI": "122.04748818946",
      "DisplacementL": "2.0",
      "Doors": "",
      "DriveType": "",
      "DriverAssist": "",
      "DynamicBrakeSupport": "Standard",
      "EDR": "",
      "ESC": "Standard",
      "EVDriveUnit": "",
      "ElectrificationLevel": "",
      "EngineConfiguration": "",
      "EngineCycles": "",
      "EngineCylinders": "4",
      "EngineHP": "184",
      "EngineHP_to": "",
      "EngineKW": "",
      "EngineManufacturer": "Volkswagen",
      "EngineModel": "",
      "EntertainmentSystem": "",
      "ErrorCode": "0",
      "ErrorText": "0 - VIN decoded clean. Check Digit (9th position) is correct",
      "ForwardCollisionWarning": "Standard",
      "FuelInjectionType": "",
      "FuelTankMaterial": "",
      "FuelTankType": "",
      "FuelTypePrimary": "Gasoline",
      "FuelTypeSecondary": "",
      "GCWR": "",
      "GCWR_to": "",
      "GVWR": "Class 1D: 5,001 - 6,000 lb (2,268 - 2,722 kg)",
      "GVWR_to": "",
      "KeylessIgnition": "Standard",
      "LaneCenteringAssistance": "",
      "LaneDepartureWarning": "Standard",
      "LaneKeepSystem": "Standard",
      "LowerBeamHeadlampLightSource": "LED",
      "Make": "VOLKSWAGEN",
      "MakeID": "482",
      "Manufacturer": "VOLKSWAGEN DE MEXICO SA DE CV",
      "ManufacturerId": "16478",
      "Model": "Tiguan",
      "ModelID": "8151",
      "ModelYear": "2022",
      "MotorcycleChassisType": "Not Applicable",
      "MotorcycleSuspensionType": "Not Applicable",
      "NCSABodyType": "",
      "NCSAMake": "",
      "NCSAMapExcApprovedBy": "",
      "NCSAMapExcApprovedOn": "",
      "NCSAMappingException": "",
      "NCSAModel": "",
      "NCSANote": "",
      "NonLandUse": "",
      "Note": "",
      "OtherBusInfo": "",
      "OtherEngineInfo": "Test Group: NVGAJ02.0V3A / Emission Std.: Tier 3 BIN 30 LEV3 SULEV30",
      "OtherMotorcycleInfo": "",
      "OtherRestraintSystemInfo": "Seat Belt: Active-Dr/Pass / Advanced Front Airbags",
      "OtherTrailerInfo": "",
      "ParkAssist": "",
      "PedestrianAutomaticEmergencyBraking": "",
      "PlantCity": "PUEBLA",
      "PlantCompanyName": "",
      "PlantCountry": "MEXICO",
      "PlantState": "",
      "PossibleValues": "",
      "Pretensioner": "",
      "RearAutomaticEmergencyBraking": "Standard",
      "RearCrossTrafficAlert": "Standard",
      "RearVisibilitySystem": "Standard",
      "SAEAutomationLevel": "",
      "SAEAutomationLevel_to": "",
      "SeatBeltsAll": "Manual",
      "SeatRows": "2",
      "Seats": "5",
      "SemiautomaticHeadlampBeamSwitching": "Standard",
      "Series": "",
      "Series2": "",
      "SteeringLocation": "",
      "SuggestedVIN": "",
      "TPMS": "Indirect",
      "TopSpeedMPH": "",
      "TrackWidth": "",
      "TractionControl": "Standard",
      "TrailerBodyType": "Not Applicable",
      "TrailerLength": "",
      "TrailerType": "Not Applicable",
      "TransmissionSpeeds": "8",
      "TransmissionStyle": "Automatic",
      "Trim": "SE",
      "Trim2": "",
      "Turbo": "",
      "VIN": "3VV3B7AXXNM077525",
      "ValveTrainDesign": "",
      "VehicleDescriptor": "3VV3B7AX*NM",
      "VehicleType": "MULTIPURPOSE PASSENGER VEHICLE (MPV)",
      "WheelBaseLong": "",
      "WheelBaseShort": "",
      "WheelBaseType": "",
      "WheelSizeFront": "",
      "WheelSizeRear": "",
      "WheelieMitigation": "",
      "Wheels": "",
      "Windows": ""
    }
  ]
}

This is, indeed, my car and the data is spot on. If you pass an invalid VIN, the values for ErrorCode and ErrorText will include pertinent information. As an example, this URL with a messed up VIN gives:

{ 
// All the usual keys
"ErrorCode": "1,7,400",
"ErrorText": "1 - Check Digit (9th position) does not calculate properly; 7 - Manufacturer is not registered with NHTSA for sale or importation in the U.S. for use on U.S roads; Please contact the manufacturer directly for more information; 400 - Invalid Characters Present",
 // more
}

Note that as I said in the code block, you still get all the other keys as well, so you need to check for ErrorCode being "0" (note that it's a string, not a number) before you can use the data.

But - the API tries its best to decode as much as possible. So for example, if I remove one value from my VIN, I get an error ("6 - Incomplete VIN"), but it still returns the right make and model for my car.

Depending on your particular need, you may not want to treat errors as a boolean state and see what you can get away with.

Putting a Bow on It

Alright, so while this worked, I thought I'd make a quick trip to Val Town to build a slightly nicer API wrapper for this. My code would do two things:

Return an object with two keys, vehicle and error.
vehicle is the vehicle information result, just the first one, but with keys lowercased because there's no need to write more APIs the Microsoft way.
error will check if ErrorCode isn't "0", and if so, will be populated with ErrorText.

In Val Town, I created a new val with a HTTP trigger. I look for the VIN in the URL, and if it's there, pass it to the NHTSA's API and shape the API as I described above. That's literally it.

export default async function (req: Request): Promise<Response> {
  const url = new URL(req.url);
  const vin = url.searchParams.get("vin");

  if (!vin) {
    return new Response(
      JSON.stringify({ error: "Missing 'vin' query parameter" }),
      {
        status: 400,
        headers: { "Content-Type": "application/json" },
      },
    );
  }

  const vinreq = await fetch(
    `https://vpic.nhtsa.dot.gov/api/vehicles/decodevinvalues/${vin}?format=json`,
  );
  const data = await vinreq.json();

  const result = {
    vehicle: lowerCaseKeys(data.Results[0]),
    error: null,
  };

  if (data.Results[0].ErrorCode !== "0") {
    result.error = data.Results[0].ErrorText;
  }

  return new Response(JSON.stringify(result), {
    headers: { "Content-Type": "application/json" },
  });
}

function lowerCaseKeys(obj) {
  const result = {};
  for (const key of Object.keys(obj)) {
    result[key.toLowerCase()] = obj[key];
  }
  return result;
}

This API is up and running at https://raymondcamden--a5e2f648718311f1ace11607ee4eb77e.web.val.run, and you can see the full Val here, https://www.val.town/x/raymondcamden/vin-api.

Quick Demo

I went to another code hosting service, Code Pen, to create a quick and simple demo. If you open your browser to https://new-thunder-treefrog.codepen.app/, you can enter a VIN, hit the button, and see the result dumped on screen. The entire Val Town integration was just a fetch call:

let req = await fetch(`https://raymondcamden--a5e2f648718311f1ace11607ee4eb77e.web.val.run/?vin=${vin}`);
let result = await req.json();

Here's the CodePen itself if you want to fork, or run the demo here.

See the Pen VIN API Tester by Raymond Camden (@cfjedimaster) on CodePen.

Photo by Elisa Schmidt on Unsplash

Parsing Arbitrary Dates in Strings with Chrono and a Web Component

2026-06-24T18:00:00+00:00

Yesterday I had an idea for a possible experiment using Chrome's built-in AI support - looking for "date" references in strings. So for example: "I will have my new job in 12 days". Could the AI model recognize "12 days" as a date and determine what the actual date is, assuming a reference date of now? I was about to start working on a simple POC when I thought... wait... is there already a JavaScript library for this?

Of course there is.

The aptly named Chrono library does just that. It can parse a string with one assumed date and return the date, so for example:

import * as chrono from 'chrono-node';

chrono.parseDate('An appointment on Sep 12-13');

This returns: Sat Sep 12 2026 12:00:00 GMT-0500 (Central Daylight Time). It can also take a string and give you a parsed set of results, so for example:

chrono.parse('An appointment on Sep 12-13');
/* [{ 
    index: 18,
    text: 'Sep 12-13',
    start: ...
}] */

The parse method will return one result per matched item, with the result including the original string, lots of info on how it parsed it, and the ability to get the proper date object from it. It can also handle durations and a reference date too, so if your input was, "I will eat sushi tomorrow" and the reference was January 2nd, 2026, it would recognize that tomorrow is January 3rd, 2026.

So, how about a demo? I created a quick CodePen that has a textarea for arbitrary input. You can type anything, and when it finds stuff, it dumps it out below and then follows up that dump with parsed dates. I'll skip over the HTML (you can see it in the embedded CodePen), but here's the JavaScript:

import * as chrono from 'chrono-node';

const $input = document.querySelector('#input');
const $output = document.querySelector('#output');

$input.addEventListener('input', () => {
	const input = $input.value.trim();
	$output.innerText = '';
	if(input === '') return;
	/*
	temp test to set a reference:
	let yesterday = new Date();
	yesterday.setDate(yesterday.getDate() - 1);
	let parsed = chrono.parse(input, yesterday);
	*/
	let parsed = chrono.parse(input);

	if(parsed.length) {
		$output.innerText = JSON.stringify(parsed, null, '\t') + '\n';
	
		for(const p of parsed) {
			console.log(p.start.date());
			$output.innerText += `Parsed date: ${p.start.date()} `;
			if(p.end) $output.innerText += ` - ${p.end.date()}`;
			$output.innerText += '\n';
		}
	}
});

Basically import the library, note changes in the textarea, and parse. If results are found I do the simple dump as I mentioned. One small oddity with the library is that the initial result does not actually include the date. You have to run .date() on the start and (optional) end values to get that. Hence that for loop. You can also see, commented out, how easy it is to use a reference date.

Go ahead and test it below.

I will say I found the 'duration' support didn't work terribly well. By that I mean it would find the date reference, but not always the 'end'. The sample input, "I have an appointment tomorrow from 10 to 11 AM", worked fine, but in my tests it was hit or miss. Again though, it got the start every time so that's something.

See the Pen chrono test by Raymond Camden (@cfjedimaster) on CodePen.

Turning it into a Web Component

At this point, I thought it might be cool to build a web component that would:

Use Chrono to find the date strings
Wrap each matched item with a <time> element, setting datetime and title to the parsed date
Use a bit of CSS to highlight the text
Allow for an attribute that lets you specify the date. In my mind, the main use for this is UGC (user generated content), things like comments for example. Comments are made at a point in time which means it should be easy to pass that to the component.

I named my component time-parse because I'm incredibly creative. Here's an example of it in play, both with and without a reference date:

<div>
    <time-parse>
    I'll be eating tomorrow. Or maybe in 3 hours? I'm not sure.
    </time-parse>
</div>

<div>
    <time-parse date="2026-06-04">
        This is an example in the past. I set the date to June 4th. 
    I'll be eating tomorrow. Or maybe in 3 hours? I'm not sure.
    </time-parse>
</div>

Here's the code I used. I'll talk a bit about my design decisions after:

import * as chrono from 'chrono-node';

class TimeParseComponent extends HTMLElement {

	constructor() {
		super();
	}
	
	connectedCallback() {

		// doing an inline style so i dont have to worry about specifying it just for the WC. This feels wrong a bit...
		const STYLE = 'text-decoration: underline;text-decoration-color: #ccc;';

		let dateRef = null;
		
		// look for date attribute
		if(this.hasAttribute("date")) {
			console.log('Date found, using as ref');
			dateRef = this.#parseLocalDate(this.getAttribute("date"));
			console.log('dateRef is ', dateRef);
		}
		
		let input = this.innerHTML;
		const parsed = chrono.parse(input, dateRef);
		if(!parsed || !parsed.length) return;
		console.log(`Found ${parsed.length} items to update`);
		/*
		For each, find the initial string, and wrap it with:
		<time datetime=PARSEDTIME title=PARSEDTIME>orig</time>

		Go backwards as we are changing the string
		*/
		for(let x=parsed.length-1; x >= 0; x--) {
			console.log(parsed[x]);
			// first get the date, currently not supporting end
			let date = this.#formatDateTime(parsed[x].start.date());
			let orig = input.substring(parsed[x].index, parsed[x].index + parsed[x].text.length);
			// now make the new string
			let newStr = `
<time datetime="${date}" title="${date}" style="${STYLE}">${orig}</time>
			`.trim();
			//console.log(newStr);

			input = input.slice(0, parsed[x].index) + newStr + input.slice(parsed[x].index + parsed[x].text.length);
		}

		// All done - 
		console.log('Final Result', input);
		this.innerHTML = input;
	}

	#formatDateTime(x) {
	  const pad = (n) => String(n).padStart(2, '0');
	
	  return [
	    x.getFullYear(),
	    pad(x.getMonth() + 1),
	    pad(x.getDate()),
	  ].join('-') + ' ' + [
	    pad(x.getHours()),
	    pad(x.getMinutes()),
	    pad(x.getSeconds()),
	  ].join(':');
	}

	#parseLocalDate(isoDate) {
	  const [y, m, d] = isoDate.split('-').map(Number);
	  return new Date(y, m - 1, d); // local midnight on that date
	}
}

if(!customElements.get('time-parse')) customElements.define('time-parse', TimeParseComponent);

Alright, so ignoring the basic web component setup, you can see the basic flow is:

Look to see if a date attribute was used, if so, that's our reference date.
Get the text inside the component and parse it.
For each found result, looping backwards, replace the match with new HTML that uses the time tag.
Finally, update the inner HTML inside the component.

Up top you'll notice a STYLE variable. I went with an inline style for... I don't know. I just didn't want to think about the shadow DOM and so forth. I figure with something so small it's ok. Feel free to fork the pen. ;)

You can try it out below. Also, once again, I love web components.

See the Pen time-parse demo by Raymond Camden (@cfjedimaster) on CodePen.

Use AI to not use AI (as much)

2026-06-22T18:00:00+00:00

This squarely falls into the "everyone probably knows this but it didn't click with me right away" category so please feel free to laugh at my ignorance, but it's something I realized over the past few months, and as I just used this technique this morning, I figured I'd share it on the blog. The idea is simple - it's trivial to ask a Gen AI tool to do something for you - and depending on the ask, may work great. But what I realized a few months back, especially in regards to having AI parse data, is that you can also use the opportunity to generate a tool (like a Python or Node script) so you don't need to return to the AI tool again. This becomes especially useful if you want to slightly tweak the output over time or gradually add more features.

For my example today, it was a GitHub alert. Last month I got a few emails about Actions storage usage and it repeated this month:

I know of GitHub Actions, but I don't really use them much myself. That being said, GitHub's billing and usage reports were good for an aggregate high level look at my account, but were surprisingly unhelpful in terms of telling me where my usage was coming from. Apparently I was supposed to go through my 300+ repositories and find this out by checking the settings for each? That's crazy. It's also completely possible I missed a way to get this value easier, but honestly, I wasn't sure what to do.

I finally found a usage report generator in my settings, I used that, and quickly got a CSV report. I took a quick look at it, nothing stood out, so I went to my AI tool and simply asked it to parse it for me.

And it did - swimmingly - giving me a culprit to point to - or in my case - simply delete. It was a repo I had set up to test something that was apparently storing some artifacts I didn't need. Problem solved.

But... I wasn't convinced this wasn't going to happen again, so I used the technique that first occurred to me a few months back, and is pretty obvious, but I simply asked my tool to generate a Python script for me that would create a report.

For this I used Cursor, a tool I've been using a lot lately, and in Plan mode, simply asked:

"pay attention to the csv. it is a GitHub usage report. I need a general Python script that can be run at the command line that parses this CSV and reports on usage. the idea is to help me figure out what repo is causing the most usage"

It chewed on the CSV a bit, and then asked what it should prioritize in terms of the report. Now, my email warning was about storage, but Cursor suggested total cost, so I went along. After it built the script, I liked the output, but the 'problem' repo (that I had already corrected) wasn't necessarily given enough attention.

I then went back to Cursor with:

"this works, but i noticed that testing-boxlang-desktop, which used a lot of storage, doesn't get call out quite as much. can we maybe add another report after the gross amount one that shows top repos by stoage?"

Thank god AI doesn't complain about typos so much as I didn't even notice that till just now. This iteration added a second report and really made it a great v1 for the script. Speaking of...

Just show me the code already...

Ok, so if you are also looking at a GitHub usage report and not sure what repo to blame, generate your summary, save the file, and use this script:

#!/usr/bin/env python3
"""Parse GitHub summarized usage CSV exports and report repo-level usage."""

from __future__ import annotations

import argparse
import csv
import json
import sys
from dataclasses import dataclass, field
from pathlib import Path

REQUIRED_COLUMNS = {
    "date",
    "product",
    "sku",
    "quantity",
    "unit_type",
    "gross_amount",
    "net_amount",
    "discount_amount",
    "repository",
}


def parse_float(value: str) -> float:
    if not value or not value.strip():
        return 0.0
    return float(value)


def parse_args() -> argparse.Namespace:
    parser = argparse.ArgumentParser(
        description="Parse a GitHub summarized usage CSV and rank repositories by cost."
    )
    parser.add_argument("csv_file", type=Path, help="Path to summarized usage CSV")
    parser.add_argument(
        "--top",
        type=int,
        default=10,
        metavar="N",
        help="Number of repositories to show in ranking (default: 10)",
    )
    parser.add_argument(
        "--product",
        help="Filter rows by product (e.g. actions, git_lfs)",
    )
    parser.add_argument("--sku", help="Filter rows by SKU")
    parser.add_argument(
        "--from",
        dest="date_from",
        metavar="YYYY-MM-DD",
        help="Include rows on or after this date",
    )
    parser.add_argument(
        "--to",
        dest="date_to",
        metavar="YYYY-MM-DD",
        help="Include rows on or before this date",
    )
    parser.add_argument(
        "--json",
        action="store_true",
        help="Emit structured JSON instead of formatted text",
    )
    return parser.parse_args()


def load_rows(path: Path) -> list[dict[str, str]]:
    if not path.is_file():
        print(f"Error: file not found: {path}", file=sys.stderr)
        sys.exit(1)

    with path.open(newline="", encoding="utf-8-sig") as handle:
        reader = csv.DictReader(handle)
        if reader.fieldnames is None:
            print(f"Error: {path} is empty or has no header row", file=sys.stderr)
            sys.exit(1)

        missing = REQUIRED_COLUMNS - set(reader.fieldnames)
        if missing:
            missing_list = ", ".join(sorted(missing))
            print(
                f"Error: {path} is missing required columns: {missing_list}",
                file=sys.stderr,
            )
            sys.exit(1)

        return list(reader)


def filter_rows(
    rows: list[dict[str, str]],
    *,
    product: str | None,
    sku: str | None,
    date_from: str | None,
    date_to: str | None,
) -> list[dict[str, str]]:
    filtered: list[dict[str, str]] = []
    for row in rows:
        if product and row["product"] != product:
            continue
        if sku and row["sku"] != sku:
            continue
        if date_from and row["date"] < date_from:
            continue
        if date_to and row["date"] > date_to:
            continue
        filtered.append(row)
    return filtered


@dataclass
class SkuBreakdown:
    sku: str
    unit_type: str
    quantity: float = 0.0
    gross_amount: float = 0.0


@dataclass
class RepoUsage:
    repository: str
    gross_amount: float = 0.0
    net_amount: float = 0.0
    discount_amount: float = 0.0
    row_count: int = 0
    skus: dict[tuple[str, str], SkuBreakdown] = field(default_factory=dict)

    def add_row(self, row: dict[str, str]) -> None:
        gross = parse_float(row["gross_amount"])
        net = parse_float(row["net_amount"])
        discount = parse_float(row["discount_amount"])
        quantity = parse_float(row["quantity"])
        sku = row["sku"]
        unit_type = row["unit_type"]

        self.gross_amount += gross
        self.net_amount += net
        self.discount_amount += discount
        self.row_count += 1

        key = (sku, unit_type)
        if key not in self.skus:
            self.skus[key] = SkuBreakdown(sku=sku, unit_type=unit_type)
        breakdown = self.skus[key]
        breakdown.quantity += quantity
        breakdown.gross_amount += gross


def aggregate_by_repo(rows: list[dict[str, str]]) -> list[RepoUsage]:
    repos: dict[str, RepoUsage] = {}
    for row in rows:
        repository = row["repository"].strip() or "(unknown)"
        if repository not in repos:
            repos[repository] = RepoUsage(repository=repository)
        repos[repository].add_row(row)

    return sorted(repos.values(), key=lambda repo: repo.gross_amount, reverse=True)


def is_storage_row(row: dict[str, str]) -> bool:
    return "storage" in row["sku"].lower()


@dataclass
class RepoStorage:
    repository: str
    quantity: float = 0.0
    gross_amount: float = 0.0
    row_count: int = 0
    skus: dict[str, SkuBreakdown] = field(default_factory=dict)

    def add_row(self, row: dict[str, str]) -> None:
        gross = parse_float(row["gross_amount"])
        quantity = parse_float(row["quantity"])
        sku = row["sku"]
        unit_type = row["unit_type"]

        self.gross_amount += gross
        self.quantity += quantity
        self.row_count += 1

        if sku not in self.skus:
            self.skus[sku] = SkuBreakdown(sku=sku, unit_type=unit_type)
        breakdown = self.skus[sku]
        breakdown.quantity += quantity
        breakdown.gross_amount += gross


def aggregate_storage_by_repo(rows: list[dict[str, str]]) -> list[RepoStorage]:
    repos: dict[str, RepoStorage] = {}
    for row in rows:
        if not is_storage_row(row):
            continue
        repository = row["repository"].strip() or "(unknown)"
        if repository not in repos:
            repos[repository] = RepoStorage(repository=repository)
        repos[repository].add_row(row)

    return sorted(repos.values(), key=lambda repo: repo.quantity, reverse=True)


def storage_repo_payload(repo: RepoStorage, total_storage: float) -> dict:
    return {
        "repository": repo.repository,
        "quantity_gigabyte_hours": repo.quantity,
        "gross_amount": repo.gross_amount,
        "percent_of_total_storage": (
            (repo.quantity / total_storage * 100) if total_storage else 0.0
        ),
        "row_count": repo.row_count,
        "skus": [
            {
                "sku": item.sku,
                "unit_type": item.unit_type,
                "quantity": item.quantity,
                "gross_amount": item.gross_amount,
            }
            for item in sorted(repo.skus.values(), key=lambda sku_item: sku_item.quantity, reverse=True)
        ],
    }


def format_money(amount: float) -> str:
    return f"${amount:.4f}"


def format_percent(part: float, whole: float) -> str:
    if whole == 0:
        return "0.0%"
    return f"{(part / whole) * 100:.1f}%"


def print_storage_table(storage_repos: list[RepoStorage], top: int) -> None:
    print("Top repositories by storage")
    print("-" * 28)

    if not storage_repos:
        print("No storage usage found.")
        print()
        return

    total_storage = sum(repo.quantity for repo in storage_repos)
    print(
        f"{'#':>3}  {'Repository':<26} {'GB-hours':>10} {'%':>7} {'Gross':>10} {'Rows':>5}"
    )
    for index, repo in enumerate(storage_repos[:top], start=1):
        print(
            f"{index:>3}  {repo.repository:<26} "
            f"{repo.quantity:>10.2f} "
            f"{format_percent(repo.quantity, total_storage):>7} "
            f"{format_money(repo.gross_amount):>10} "
            f"{repo.row_count:>5}"
        )
    print()


def print_text_report(
    path: Path,
    rows: list[dict[str, str]],
    repos: list[RepoUsage],
    storage_repos: list[RepoStorage],
    top: int,
) -> None:
    total_gross = sum(repo.gross_amount for repo in repos)
    total_net = sum(repo.net_amount for repo in repos)
    dates = [row["date"] for row in rows]
    date_range = f"{min(dates)} to {max(dates)}" if dates else "n/a"

    print("GitHub Usage Report")
    print("=" * 19)
    print(f"File: {path.name}")
    print(f"Period: {date_range} ({len(rows)} rows)")
    print(f"Total gross: {format_money(total_gross)}   Total net: {format_money(total_net)}")
    print()

    if not repos:
        print("No matching usage rows found.")
        return

    print("Top repositories by gross amount")
    print("-" * 32)
    print(f"{'#':>3}  {'Repository':<26} {'Gross':>10} {'%':>7} {'Net':>10} {'Rows':>5}")
    for index, repo in enumerate(repos[:top], start=1):
        print(
            f"{index:>3}  {repo.repository:<26} "
            f"{format_money(repo.gross_amount):>10} "
            f"{format_percent(repo.gross_amount, total_gross):>7} "
            f"{format_money(repo.net_amount):>10} "
            f"{repo.row_count:>5}"
        )

    print()
    print_storage_table(storage_repos, top)
    print("Details for top repos")
    print("-" * 19)
    for repo in repos[:top]:
        print(f"{repo.repository} ({format_money(repo.gross_amount)} gross)")
        sku_items = sorted(repo.skus.values(), key=lambda item: item.gross_amount, reverse=True)
        for item in sku_items:
            print(
                f"  {item.sku:<22} {item.quantity:>10.2f} {item.unit_type:<16} "
                f"{format_money(item.gross_amount):>10}"
            )
        print()


def print_json_report(
    path: Path,
    rows: list[dict[str, str]],
    repos: list[RepoUsage],
    storage_repos: list[RepoStorage],
    top: int,
) -> None:
    total_gross = sum(repo.gross_amount for repo in repos)
    total_net = sum(repo.net_amount for repo in repos)
    total_storage = sum(repo.quantity for repo in storage_repos)
    dates = [row["date"] for row in rows]

    payload = {
        "file": str(path),
        "row_count": len(rows),
        "date_from": min(dates) if dates else None,
        "date_to": max(dates) if dates else None,
        "total_gross_amount": total_gross,
        "total_net_amount": total_net,
        "total_storage_gigabyte_hours": total_storage,
        "repositories": [
            {
                "rank": index,
                "repository": repo.repository,
                "gross_amount": repo.gross_amount,
                "net_amount": repo.net_amount,
                "discount_amount": repo.discount_amount,
                "row_count": repo.row_count,
                "percent_of_total_gross": (
                    (repo.gross_amount / total_gross * 100) if total_gross else 0.0
                ),
                "skus": [
                    {
                        "sku": item.sku,
                        "unit_type": item.unit_type,
                        "quantity": item.quantity,
                        "gross_amount": item.gross_amount,
                    }
                    for item in sorted(
                        repo.skus.values(),
                        key=lambda sku_item: sku_item.gross_amount,
                        reverse=True,
                    )
                ],
            }
            for index, repo in enumerate(repos[:top], start=1)
        ],
        "storage_repositories": [
            {"rank": index, **storage_repo_payload(repo, total_storage)}
            for index, repo in enumerate(storage_repos[:top], start=1)
        ],
    }
    print(json.dumps(payload, indent=2))


def main() -> None:
    args = parse_args()
    rows = load_rows(args.csv_file)
    filtered = filter_rows(
        rows,
        product=args.product,
        sku=args.sku,
        date_from=args.date_from,
        date_to=args.date_to,
    )
    repos = aggregate_by_repo(filtered)
    storage_repos = aggregate_storage_by_repo(filtered)

    if args.json:
        print_json_report(args.csv_file, filtered, repos, storage_repos, args.top)
    else:
        print_text_report(args.csv_file, filtered, repos, storage_repos, args.top)


if __name__ == "__main__":
    main()

You can also find this here: https://github.com/cfjedimaster/pythondemos/tree/main/ghusageparser. Note that this uses no external dependencies outside of standard library modules. Usage is simple:

python -h

Which gives:

Honestly, none of those arguments were ideas I had but they all make sense. And here's how the report looks:

The 'culprit' was testing-boxlang-desktop which as I said, was just for testing, so easy to delete. Honestly, tweetback surprised me. This is a repo I created as an export from Twitter and apparently it's got a lot of media. I didn't delete it - but may do so in the future.

Anyway, let me know what you think and if this could be helpful to you!

Photo by Simon Kadula on Unsplash

Links For You (6/21/26)

2026-06-21T18:00:00+00:00

Greetings and salutations, readers. It's been a few weeks since I shared one of these, mostly due to the job search being somewhat exhausting, but I've got a backup of links so it's time to get back in the habit. And of course, it's Father's Day and I want to wish all the dads out there (myself included) a very happy father's day. This weekend I got to officiate my first wedding (for my brother-in-law and his fiance) so my plan today is to do... nothing. Enjoy your links!

Mastodon and Translation with Chrome AI

First up is a presentation by Thomas Steiner demonstrating Chrome built-in AI APIs doing language detection and translation for Mastodon. I'm a pretty big fan of those APIs (my last presentation was on them!) so I enjoyed this quite a bit. Thomas has been a big help with my demos and posts on these APIs and is a scary smart dev.

Datatype - Text into Charts

Next is Datatype, a font that creates charts. Seriously. For example:

Sales {l:20,45,60,55,80,95} are up this quarter.

And this was driven by CSS and text:

<style>
@font-face {
  font-family: 'Datatype';
  src: url('https://static.raymondcamden.com/fonts/Datatype-Regular.woff2') format('woff2');
  font-weight: 100 900;      /* Variable weight axis */
  font-stretch: 0% 100%;     /* Variable width axis */
  font-display: swap;
}

.chart {
  font-family: 'Datatype', monospace;
}
</style>

<span class="chart">{l:20,45,60,55,80,95}</span>

It supports bar charts, sparklines, and pie charts. As it's just text, in theory it would be easy to animate and make it 'live' with just a bit of JavaScript.

You Don't Know HTML Lists

Finally there's a spectacular deep dive into HTML lists by Frank Taylor, You don't know HTML lists. You know this is going to be a great article with a sentence like this in the intro:

"We're skipping over the MDN and W3Schools introductory pages and instead we're going into the kind of stuff you discover after accidentally taking your cousin's Ritalin right before you open up the W3C specs."

I knew maybe... half of this? Maybe a bit more? Either way, it's a damn good investigation into a part of HTML you may not know even got that complex.

Just For Fun

Looking for your next read? Are you mostly through your current book and getting a bit of anxiety over whether or not you'll have your next read as soon as you finish? Good news, you're in luck. I've spoken about Scott Stroz in the past (and linked to some of his cool blogs too), he's one of my oldest, and best friends. He's a father as well to two incredible kids, one of which just released his first novel, "The Dreaded."

Tyler's shared some of his works for me in the past so as soon as this one became available, I went ahead and purchased a copy for myself. Grab your copy today - available on Kindle, paper and hardback.