Raymond Camden

AI versus a Grue

2026-06-02T18:00:00+00:00

"It is pitch dark. You are likely to be eaten by a grue." If you recognize that quote, congrats, you probably need to see your doctor about pain in your back. (Ok, pain everywhere.) For those of us of a certain age, or folks who like classic games, the Infocom series was a tremendous source of entertainment. Using plain text commands to navigate your environment, players had to use their minds to figure out puzzles and mazes in order to win the game. The IF (Interactive Fiction) community is still strong and of course, I've spoken before about my time playing and coding on MUDs, so with that in mind, I thought I'd try tackling something that I assumed probably wouldn't work well - seeing if Chrome's built-in AI could handle playing Zork 1, the most famous of Infocom's library. The short answer is... not so well. But honestly, it was kind of fun to try so I figured I'd share the results.

Getting Zork

Before I could even begin trying to test AI's ability to play a 50 year old game (almost 50, Zork 1 launched in 1977), I first needed to find a JavaScript implementation. This turned out to be a bit tricky.

I quickly found ifvms.js, an interactive fiction virtual machine library, but it was tailored to running at the command line. Also, there was little to no documentation on how to make use of the library. The repo mentions another repo, parchment which lets you play games on the web, but I struggled to find documentation there as well, or documentation specific to my use case.

To help, I went to Claude, and had it load ifvms.js and create a 'stubbed' version that I could use via calls like so:

// all of this loads Zork 1...
const res = await fetch('zork1.b64.txt');
const b64 = await res.text();

const binary = atob(b64.trim());
const arrayBuffer = new ArrayBuffer(binary.length);
const view = new Uint8Array(arrayBuffer);
for (let i = 0; i < binary.length; i++) {
    view[i] = binary.charCodeAt(i);
}

engine = new ZorkEngine();
engine.load(arrayBuffer);

// and then later:
let gameResponse = engine.getOutput(); // last thing the game did

// send a command
let lastResponse = engine.send(command);

That source file above mentioned in the first line comes from an online source. Zork itself is open source (https://github.com/historicalsource/zork1), but I forget where I got my copy of the source. It's not a text file, I renamed it to that when initially attempting to build my demo on CodePen. I believe it was pure binary I converted to base64 and then renamed.

Building the Game

So with Claude helping me build the version of ifvms I could use interactively, I then had to whip up a quick UI and point Chrome's Prompt API, which as of Chrome 148 is GA to everyone. (Well, everyone on Chrome.)

My UI was just a giant text area where I'd stream the output from the game and Chrome's inputs. All of that code is kinda basic, so I'll focus on the prompt aspect. Here's how I create my session:

$session = await LanguageModel.create({
    initialPrompts:[
        { 
            role: 'system', 
            content: 
                    `
You are playing the classic text adventure game Zork. You will be given the current game output, and you will 
respond with a single command to play the game. You will not explain your command, just give the command. 

Remember to keep your commands concise and to the point, as if you were playing the game yourself. Do not include 
any extra text or explanations.

Zork is a text-based adventure game where you explore a mysterious underground world filled with treasures, puzzles, 
and dangers. Your goal is to navigate through the various locations, solve puzzles, and collect treasures 
while avoiding traps and monsters.

Here are some examples of commands you might use in Zork:
- "go north"
- "take lamp"
- "open mailbox"
- "look around"
- "inventory"

Do your best to play the game effectively and efficiently, making smart choices based on the current game output.

Try not to keep returning to the same location repeatedly, as that can lead to getting stuck in loops. Instead, 
explore new areas and try different actions to progress through the game. Remember that you can travel in all directions.
                    `
        }
    ],		
    monitor(m) {
            m.addEventListener("downloadprogress", e => {
                console.log(`Downloaded ${e.loaded * 100}%`);
                if(e.loaded === 0 || e.loaded === 1) {
                    $output.innerHTML = '';
                    return;
                }
                $output.innerHTML = `Downloading AI model, currently at ${Math.floor(e.loaded * 100)}%`;
            });
        }		
});

As you can see, a majority of this is the big prompt. I iterated over this multiple times to help guide Chrome to effectively solve the game. (Which to be clear, it never did.)

Outside of that, the main loop of the game is this heartbeat function:

async function gameHeartBeat() {

    console.log('in hb');
    let gameResponse = engine.getOutput();
    if(!gameResponse) gameResponse = lastResponse;

    if(gameResponse) {
        $gameoutput.value += gameResponse + '\n';
        $gameoutput.scrollTop = $gameoutput.scrollHeight;

        let command = await $session.prompt(gameResponse);
        lastResponse = engine.send(command);

        $gameoutput.value += `> ${command}\n`;
        $gameoutput.scrollTop = $gameoutput.scrollHeight;

        console.log('Resp',command);
        setTimeout(gameHeartBeat, 1000 * 2);
    }
 
}

The variable $gameoutput is just a DOM pointer to the textarea used to render the game.

Before going any further, I'll note a huge issue with my code and that's the lack of session management. Chrome absolutely provides you a way to monitor that usage and re-init the session when it is nearly filled. I didn't bother with that because I was being lazy when I built this.

I'd also argue that we could help Chrome's model quite a bit by keeping track of a list of rooms it has already visited to help it remember and not loop over the same place. My prompt tries to do that, but I could also help it out myself.

All in all - this was a quick implementation and the results were... well what you would expect with a lightweight model and me just hacking quickly on it. ;)

Here's a transcript from a test I just did.

ZORK I: The Great Underground Empire
Infocom interactive fiction - a fantasy story
Copyright (c) 1981, 1982, 1983, 1984, 1985, 1986 Infocom, Inc. All rights reserved.
ZORK is a registered trademark of Infocom, Inc.
Release 119 / Serial number 880429

West of House
You are standing in an open field west of a white house, with a boarded front door.
There is a small mailbox here.

>                                                                                 West of HouseScore: 0  Turns: 0
> examine mailbox
The small mailbox is closed.

>                                                                                 West of HouseScore: 0  Turns: 1
> open mailbox
Opening the small mailbox reveals a leaflet.

>                                                                                 West of HouseScore: 0  Turns: 2
> read leaflet
(Taken)
"WELCOME TO ZORK!

ZORK is a game of adventure, danger, and low cunning. In it you will explore some of the most amazing territory ever seen by mortals. No computer should be without one!"

>                                                                                 West of HouseScore: 0  Turns: 3
> look around
West of House
You are standing in an open field west of a white house, with a boarded front door.
There is a small mailbox here.

>                                                                                 West of HouseScore: 0  Turns: 4
> go north
North of House
You are facing the north side of a white house. There is no door here, and all the windows are boarded up. To the north a narrow path winds through the trees.

>                                                                                 North of HouseScore: 0  Turns: 5
> go north
Forest Path
This is a path winding through a dimly lit forest. The path heads north-south here. One particularly large tree with some low branches stands at the edge of the path.

>                                                                                 Forest PathScore: 0  Turns: 6
> examine tree
There's nothing special about the tree.

>                                                                                 Forest PathScore: 0  Turns: 7
> go north
Clearing
You are in a clearing, with a forest surrounding you on all sides. A path leads south.
On the ground is a pile of leaves.

>                                                                                 ClearingScore: 0  Turns: 8
> take leaves
In disturbing the pile of leaves, a grating is revealed.
Taken.

>                                                                                 ClearingScore: 0  Turns: 9
> open grating
The grating is locked.

>                                                                                 ClearingScore: 0  Turns: 10
> look around
Clearing
You are in a clearing, with a forest surrounding you on all sides. A path leads south.
There is a grating securely fastened into the ground.

>                                                                                 ClearingScore: 0  Turns: 11
> go south
Forest Path

>                                                                                 Forest PathScore: 0  Turns: 12
> go north
Clearing

>                                                                                 ClearingScore: 0  Turns: 13
> examine leaves
There's nothing special about the pile of leaves.

>                                                                                 ClearingScore: 0  Turns: 14
> go south

In my tests, it never seems to get much further in the game than the outer area, but certainly tries hard, so I guess I'll give it a gold star for that.

If you want to try this yourself, you can point Chrome at https://cfjedimaster.github.io/webdemos/chrome_zork/.

If you want to peruse the code yourself, you can check it out here: https://github.com/cfjedimaster/webdemos/tree/master/chrome_zork

Now that I've got a bit more time on my hands (ahem), I may try hacking on this a bit more, but it was certainly fun to see it in action.

Photo by Joshua Sortino on Unsplash

Creating a Heavy Rain Alert with RainDrop and Val Town

2026-06-01T18:00:00+00:00

One of the "joys" of living in Louisiana is the rainy season, which is heavier in spring but honestly, feels like it lasts all year long. I can still remember being on a business trip in 2016, about to fly home, and hearing about some sort of 'rain event' back in Louisiana. This surprised me as there wasn't a hurricane involved, just an incredible amount of rain (up to 2-3 inches per hour). You can read more about it on the Wikipedia page about the event, but it goes without saying - rain is a big deal down here.

A while back I discovered RainDrop, which is an app and a web site that lets you check on rainfall totals. You can see my zipcode here, https://www.raindrop.farm/rainfall-totals/zipcode/70508#map, and while we aren't having any rain this second, we've got some forecast for today.

When I discovered the site, I did some digging and discovered they had an API: https://api.raindrop.farm/docs. This API gives you incredibly detailed information about rainfall (and snow) and can even return historical data.

Given an API key passed in an Authorization header, this gets the current precipitation for my location:

https://api.raindrop.farm/v1/precipitation/current?lat=30.216667&lon=-92.033333

Which returns (as of 11:34 AM, and I just heard thunder):

{
    "lat": 30.216667,
    "lon": -92.033333,
    "timestamp": "2026-06-01T16:30:00Z",
    "precipitationIntensity": 0.0
}

Ok - slight delay here - I just got out of a meeting, and the rain is here:

{
    "lat": 30.216667,
    "lon": -92.033333,
    "timestamp": "2026-06-01T17:06:00Z",
    "precipitationIntensity": 1.2999999523162842
}

That value is in millimeters per hour so it looks like just a trickle, so nothing to worry about. Of course, what if it was something to worry about? I thought - why not automate checking for this using my go to platform lately, Val Town.

The App

Alright, so the app I had in mind was fairly simple:

Every X minutes, use the RainDrop API to check the rain intensity and if it is over a certain threshold, send an alert my way.

My RainDrop API access had pretty high usage limits (120 a minute) that were above what made sense to realistically check. On the other hand, my free tier level at Val Town capped me at one execution per fifteen minutes.

To be honest, once every fifteen minutes seemed perfectly reasonable, but keep in mind that both RainDrop and Val Town would support much higher frequencies if necessary.

Given the above, I created a new val and set the trigger to Cron, set to every 15 minutes:

I then created an environment variable for my RainDrop key. With that in place, the entire "early warning flood system" (that's what I'll call it when doing interviews for my next job) is one file:

import { email } from "https://esm.town/v/std/email";

/**
 * Converts speed from millimeters per hour to inches per hour.
 * @param {number} mmPerHour - Speed in millimeters per hour.
 * @returns {number} Speed in inches per hour.
 */
function mmPerHourToInchesPerHour(mmPerHour) {
  return mmPerHour / 25.4;
}

function dtFormat(timestamp) {
  const date = new Date(timestamp);

  const options = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    timeZoneName: "short",
  };

  // Create the formatter (e.g., for US English)
  const formatter = new Intl.DateTimeFormat("en-US", options);

  return formatter.format(date);
}

export default async function (interval: Interval) {
  // Lafayette, LA
  const lat = "30.216667";
  const lng = "-92.033333";

  // The threshold value is inches of rain per hour - any value >= will trigger a warning
  const threshold = 0.5;

  let key = Deno.env.get("API_KEY");
  let precipReq = await fetch(
    `https://api.raindrop.farm/v1/precipitation/current?lat=${lat}&lon=${lng}`,
    {
      headers: {
        "Authorization": key,
      },
    },
  );

  let precip = await precipReq.json();
  let rainInches = mmPerHourToInchesPerHour(precip.precipitationIntensity);
  console.log("rainInches", rainInches);
  console.log(precip);

  if (rainInches >= threshold) {
    let html = `
<h2>Heavy Rain Alert</h2>

<p>
As of ${
      dtFormat(precip.timestamp)
    }, we have detected ${rainInches.toFixed(2)} inches of rain per hour.
</p>
    `;

    await email({
      subject: "Rain Alert",
      html,
    });
  }
}

On top of my script are two utility functions with the interesting one being the simple wrapper to convert RainDrop's values to inches.

After that, I hit the API, check against a threshold (currently set to half an inch), and if it matches, I fire off an email. As a reminder, I'm using Val Town's built in "mail the owner" feature. I could also use a proper email API to have more control over the delivery, but this works well for now.

And of course, as soon as I built this there were no events, which is good I suppose, but I did a quick tweak to force it to email and here's an example. Not terribly thrilling with 0 inches:

If you want to play with this, you can fork the val here: https://www.val.town/x/raymondcamden/raindropAlert. And of course if you do, let me know!

Photo by reza shayestehpour on Unsplash

Looking for My Next Role - Hire Me

2026-05-27T18:00:00+00:00

Yep, I get to write this post again...

Well, today I find myself in the same position I've been a few times over the past few years. Webflow went through a company-wide restructuring today and as part of that re-org, my role (and many others) were eliminated. So once again - I'm asking my faithful readers to help me find my next role. You can find my resume if you need the latest edition and feel free to contact me with any opportunities you may have!

Dang good Office parsing on the web with officeParser

2026-05-20T18:00:00+00:00

A few weeks ago I wrote about using Chrome's built-in AI support to summarize documents - "Summarizing Docs with Built-in AI". This was a followup on an earlier post that was PDF only and made use of an excellent library, officeParser, to work with Microsoft Office files. This library worked well, but had one issue that made it a bit harder to use.

Parsing a doc itself was super easy:

const getAST = async (file, config) => (await OfficeParser.parseOffice(file, config));

But the issue I ran into was taking that result and turning it into something meaningful for Chrome's model to analyze. PDFs supported a toText() method but for other formats I had to do a bit of work to get a text value. For example, here's the code I used to turn an Excel file into CSV:

let arrayBuffer = await file.arrayBuffer();
let data = await getAST(arrayBuffer, {});

const getCSV = s => {
    let result = '';
    let rows = s.children.filter(c => c.type === 'row');
    console.log(rows[0]);
    rows.forEach(r => {
        let data = [];
        let cells = r.children.filter(c => c.type === 'cell');
        cells.forEach(c => data.push(c.text));
        result += data.join(', ') + '\n';

    });
    return result;
};

Yeah that's not bad, but it did mean a bit of work for each of the different Office types.

Well, the good news is Harsh Ankur (the author of this awesome library) released a v7 that added a to method that supports converting files to CSV, Markdown, RTF, PDF, Text, and HTML. Even better, his HTML support isn't just "convert to Markdown then render the Markdown to html", but proper support straight from the parsed doc to create a richer result.

I went ahead and built a demo you can use to test right now (and this demo doesn't use any of the Chrome AI stuff). I created a simple HTML file with a file field and 4 tabs: Text, Markdown, HTML, CSV. You can select a PDF or Office file and it will render into each of the tabs (well, only Excel will use CSV). The HTML isn't interesting, but here's the JavaScript:

import { OfficeParser } from 'https://esm.sh/officeparser';

let $sourceFile;
let $textResult, $mdResult, $htmlResult, $csvResult;

const supportedFiles = ['pdf','xlsx','docx','pptx'];

document.addEventListener('DOMContentLoaded', init, false);
async function init() {
	console.log('lets go');
	$sourceFile = document.querySelector('#sourceFile');
	$textResult = document.querySelector('#textResult');
	$mdResult = document.querySelector('#mdResult');
	$htmlResult = document.querySelector('#htmlResult');
	$csvResult = document.querySelector('#csvResult');

	$sourceFile.addEventListener('change', filePreview, false);
}

async function filePreview(e) {
	const file = e.target.files[0];
	if (!file) return;
	let ext = file.name.split('.').pop();
	if(!supportedFiles.includes(ext)) return;
	let arrayBuffer = await file.arrayBuffer();
	let data = await getAST(arrayBuffer, {});
	
	let text = await data.to('text');
	$textResult.innerText = text.value;
	
	let md = await data.to('md');
	$mdResult.innerText = md.value;
	
	let html = await data.to('html');
	$htmlResult.contentDocument.open();
	$htmlResult.contentDocument.write(html.value);
	$htmlResult.contentDocument.close();

	if(ext === 'xlsx') {
		$csvResult.innerText = (await data.to('csv')).value;
	} else $csvResult.innerText = 'Only used for Excel files.';
}

const getAST = async (file, config) => (await OfficeParser.parseOffice(file, config));

You can play with this below:

See the Pen officeParser demo by Raymond Camden (@cfjedimaster) on CodePen.

So - given that - I took a look at my previous demo and modified the code to make use of these new features. Here's the new code that gets the text version of a document and passes it to the AI model:

document.querySelector('#upload').addEventListener('change', async (e) => {
    $output.innerHTML = '';
    const file = e.target.files[0];
    if (!file) return;
    
    let ast = await getAST(await file.arrayBuffer());

    let summary = {
        title: ast.metadata?.title ?? 'No Title',
        text: (await ast.to('md')).value
    }

    doSummary(summary);

});

Compared to the previous version, this one is over a hundred lines shorter. As I said... ddddaaaaannnnnngggg. You can try out this version below, but note that it is Chrome only. (If folks ask, or heck, even if you don't ask, I may build a Transformer.js version.)

See the Pen Chrome AI, Doc Summaries (V3) by Raymond Camden (@cfjedimaster) on CodePen.

My First AI Skill for My Blog

2026-05-19T18:00:00+00:00

I've been a professional writer now for thirty plus years, and honestly, it's one of the things I'm most proud about. When generative AI first exploded on the scene, a lot of people used it to help them write, and frankly, that wasn't for me. I'm not the best writer, but I damn well know how to write and damn well know my own voice. That being said, I've been really interested in how GenAI can help with the process.

I first wrote about this over two years ago: Using Generative AI as Your Content Assistant. In that post I talked about using GenAI for two very specific tasks:

Helping with my titles
Writing the description (which is part of the metadata for a post)

Honestly, I built those tools as proof of concept implementations and don't think I used them ever again. But lately it's been on my mind that I should think about those tools and see if there would possibly be an easier way to use GenAI to help me with my content. Specifically I'm looking for two things:

Spelling and grammar. I've got a Visual Studio Code extension for that but it's not perfect and I also just miss it sometimes.
And here's the big one. Sometimes I'll write about a topic and simply forget to cover something. I'd love to use my AI tool to try to find those missing aspects and let me know. Maybe I won't care. Maybe I intentionally skipped something. That being said, I'd still like to know.

You'll notice that none of the above involves AI actually writing for me. Outside of correcting spelling mistakes I made, I don't want to use my tool for that. But both of these could really help me catch things before I publish and just make the final result a little bit better.

The Skill

To build this, I made use of Claude Skills. Skills are persistent instructions that can be used across your entire environment or per project. They're written in simple Markdown and are stored in a particular folder depending on your use. I actually cheated a bit and used Claude itself to help me create the skill.

I knew about skills, knew they needed to be in a particular folder, but rather than looking it up I simply asked Claude to help me create a skill based on the needs above. It did an admirable job but I took over and tweaked things a bit.

The directory is in my repository now, at .claude/skills/prepublish. Here's what it looks like now (I say 'now' as I expect to be tweaking this over time - you can also check out the repo to see the latest!):

---
name: prepublish
description: Review a new blog post before publishing. Finds the latest post by its dated path under `src/posts/`, then spell-checks and offers content suggestions — without touching tone.
---

# Prepublish blog post review

Run this right before pushing a new post. Blog posts live in `src/posts/YYYY/MM/DD/` as `.md` files.

## Step 1 — Find the post

Do NOT use git to figure out which post is newest. Use the dated path under `src/posts/` — sort highest year → month → day and pick the most recent `.md` file.

A reliable command: `find src/posts -type f -name '*.md' | sort -r | head -5`. The first entry is the latest post; the rest are there in case there's a tie or the user wants to pick another.

If multiple `.md` files share the newest date directory, ask the user which one. Otherwise, confirm in one line ("Reviewing `path/to/post.md` — sound right?") before proceeding.

## Step 2 — Spell check

Read the post and surface misspellings. Ignore code blocks, fenced code, inline `code`, URLs, and proper nouns the user clearly intended (product names, people, libraries).

Present findings as a short list: `word → suggestion (line N)`. Don't auto-edit. Ask which corrections to apply, then apply them with Edit.

## Step 3 — Content review

Read the post end-to-end and give feedback focused on substance, not tone:

- **Things that sound stupid or unclear** — sentences that don't land, claims that need backing, awkward logic jumps.
- **Gaps worth filling** — missing context a reader would want, an example that would help, a link the user usually includes (docs, repo, related post).
- **Factual / technical accuracy** — flag anything that looks wrong or outdated. If the post references code, check it makes sense.
- **Loose ends** — TODO markers, "fill this in", broken-looking links, placeholder text.

**Do NOT** comment on tone, voice, snark level, casual phrasing, or stylistic choices. The user likes their voice; leave it alone.

Present feedback as a numbered list grouped by category. Keep each item to one or two sentences. Don't rewrite paragraphs — point at the issue and let the user decide.

## Step 4 — Apply changes

Ask which suggestions to act on. Apply only what's confirmed. Then stop — the user handles the actual publish/push.

An Example in Action

To test, I'm going to run this right now on this post, which means it may get a bit confused as the post isn't actually done, but let's just see what happens:

Hopefully that image is readable, let me know if not. But it did a great job of finding multiple grammar issues. My VS Code extension doesn't handle that (obviously).

I disagreed/didn't care about the awkward comment. I did care about linking to Claude Skills so I added a link. Gap 3 was incorrect. I do talk about how I 'cheated' (to be clear, it isn't cheating) in the following paragraph. And of course, issue 5 is simply because I ran this before I was done. Item 8 is the same.

You'll notice it also offered to correct those mistakes, but I did them myself and I imagine I'll do so usually.

In the end, these are all things a good editor would handle, but this is my personal blog and unfortunately I don't have an editor on call. (And even so, I'd want to do this kind of check beforehand anyway.)

What next?

Looking at the skill I wrote, and recognizing my own weaknesses (grammar, forgetting to cover things I should), I may actually move this skill into my global directory so I can use it for my non-blog writing as well. Anybody want to chime in and share if they've done something similar?

p.s. I ran the skill one more time - here's the latest:

Photo by 宁宁 on Unsplash

Links For You (5/17/26)

2026-05-17T18:00:00+00:00

Happy Sunday, and I hope your Sunday is going better than mine. One of my kids just went to use the dryer and sparks flew. I don't mean metaphorically. Nothing like the thought of replacing another major appliance to brighten up your day, amiright?!?!

Find Your (Tech) Community

First up is a new endeavour by Brian Rinaldi to help fill the gap left behind by Meetup.com (which is still a thing just not a good thing lately) and the lack of smaller and more affordable community conferences. DevRel(ish) is a community site supporting tech groups of all sizes and nature who need help organizing IRL meetups. According to the launch announcement, this is not meant to be a replacement for larger event apps, but hopefully something more suitable for smaller groups.

Check it out at https://devrelish.tech/.

Blame the Ox

Ok, this isn't tech related at all, but, "The Ox That's Breaking Your Fantasy Map" is one of the most fascinating videos I've seen in a while. And yes, it is about oxen - and fantasy maps. Even if you don't like fantasy (or oxen), it's a great watch and reminder of just how the economy affects organization and government.

AI and Goblins

Last up is a good look into why goblins started appearing in OpenAI models. The post details how initial reports of the behavior led to investigations that ultimately led to the smoking ~~goblin~~ gun.

Just For Fun

Speaking of fantasy, I recently remembered that my young kids still have yet to see the Never Ending Story. One of them really loves horses too. This is going to be great!

Is it hotter or colder this year?

2026-05-15T18:00:00+00:00

Where I live could generously be called "warm", but is usually closer to the surface of the sun, especially in late summer. That's why when the weather is not oppressively hot, I try my best to enjoy it. We're mid-May now and honestly, this spring has been... pleasant. Suspiciously pleasant but I'll take what I can get.

The last few weeks I've been telling myself that the weather must be a good bit cooler than last year, and I finally decided to do something about it. I worked with Claude and created a little web app that:

Lets you enter a free form address and then use Geocoding to convert it to a proper longitude and latitude. This is a super simple geocoding API with a generous free tier. Do note though it's North America only.
Uses the Pirate Weather API to get historical weather information. Date wise, I'm using this week, and then the same days over the previous four days.

As I mentioned, I worked with Claude on this and let it design the layout and write the code initially. I was kinda impressed by one part - the mapWithConcurrency function that lets you pass an array of async function with a desired max number to run at once. It handles doing the batching and returning the final result. That makes the calls for the weather data a bit more gentle on the provider.

However - I noticed it was taking a long time to finish. In theory, I'm doing 7 times 5 (this week plus four previous years) of calls which is 35 which doesn't seem like a lot, but I did some digging. Claude had used an endpoint that was a bit old. Doing some more research I switched to the proper endpoint... which didn't support CORS.

Oh no!

Oh - actually - I just moved to this to val.town and built a quick server side proxy. It takes in the same arguments that's send to my client side code (lat, lng, and a timestamp), and passes it to the historical Pirate Weather endpoint. So here's the frontend code - again - this is being driven by a concurrency function:

async function fetchDayTemperatures(lat, lng, unixSeconds) {
  let req = await fetch(PIRATE_WEATHER_API_BASE, {
    method: "POST",
    body: JSON.stringify({
      lat,
      lng,
      unixSeconds,
    }),
  });
  return await req.json();
}

And here's the backend code:

export default async function (req: Request): Promise<Response> {
  const body = await req.json();
  const key = Deno.env.get("PIRATE");

  const url = new URL(
    `https://timemachine.pirateweather.net/forecast/${key}/${body.lat},${body.lng},${body.unixSeconds}`,
  );
  url.searchParams.set("units", "us");
  url.searchParams.set("exclude", "minutely,hourly,alerts,flags");

  const response = await fetch(url);
  const payload = await response.json();

  if (!response.ok) {
    throw new Error(payload.error || "Weather lookup failed.");
  }

  const day = payload.daily?.data?.[0];
  if (!day) {
    throw new Error("Weather data did not include a daily summary.");
  }

  return Response.json({
    timezone: payload.timezone,
    high: day.temperatureMax,
    low: day.temperatureMin,
  });
}

I barely modified this from the original client side code - only switching to an environment variable for the API (their API is free, but I might as well) and returning a proper Response object.

Here's a screenshot of it in action:

You can try this yourself here: https://weathercomparison.val.run/. If you want to see the code, and possibly fork the val, you can do so here: https://www.val.town/x/raymondcamden/weather-comparison

So, was it cooler?

No. I was wrong. Last year was cooler than this year, but the three years before that were all higher, with 2022 being pure hell. I remember that year seeing the city working on a road that had literally buckled because of heat.

Photo by Peter Albanese on Unsplash

Send me a message in a panel...

2026-05-14T18:00:00+00:00

On my birthday a few weeks ago, one of things I got was something I've wanted to play with for a while, the Divoom Pixoo64 pixel frame. This is pixel art frame you can hang on your wall and with an app, select art, clock faces, and more. It's fun, although the app itself isn't my favorite. But - what excites me is that it has an API you can use to change what's shown on the frame. I actually built a demo of this with Webflow you can see below:

I was thinking about how else I could play with the API and decided to do something a bit risky - build a tool that lets you (yes, you!) send me a message right to my device. How did I do it? Let me describe the process from the bottom up.

The Python Server

At the lowest level is a Python server running on my machine. Yes, this isn't persistent and not stable, but who cares. The server handles accepting a string to display and rendering it on the Pixoo:

from http.server import ThreadingHTTPServer, BaseHTTPRequestHandler
from urllib.parse import urlparse, parse_qs
from pixoo_ng import Pixoo, Channel
from pixoo_ng.config import PixooConfig
import time

def split_string(text: str, max_chars: int) -> list[str]:
    """Split a string into chunks of up to max_chars characters, without breaking words."""
    words = text.split()
    chunks = []
    current = ""

    for word in words:
        if not current:
            current = word
        elif len(current) + 1 + len(word) <= max_chars:
            current += " " + word
        else:
            chunks.append(current)
            current = word

    if current:
        chunks.append(current)

    return chunks

class Handler(BaseHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/favicon.ico':
            self.send_response(404)
            self.end_headers()
            return

        query = parse_qs(urlparse(self.path).query)
        input_text = (query.get('input', [''])[0]).strip()

        if not input_text:
            self.send_response(400)
            self.end_headers()
            self.wfile.write(b"Missing 'input' query parameter")
            return

        pix = Pixoo(PixooConfig(address='192.168.0.191'))

        startY = 5
        strings = split_string(input_text, 15)

        for line in strings[:8]:
            print(line, startY)
            pix.draw_text(line, (2, startY), (0, 255, 0))
            startY += 5

        pix.push()

        self.send_response(204)
        self.end_headers()
        self.wfile.flush()

        # Show it for 10 seconds...
        time.sleep(10)

        # Then go back to my regular face
        pix.set_channel(Channel.FACES)
        pix.set_face(0)

    def log_message(self, format, *args):
        print(f"{self.address_string()} - {format % args}")


if __name__ == "__main__":
    server = ThreadingHTTPServer(("", 8099), Handler)
    print("Listening on port 8099")
    server.serve_forever()

The important bits is how it handles dynamic strings. When you send text to the Pixoo, you have to handle ensuring it actually fits, so to do that, I used a function, split_string, which wraps text on words into an array. I then take that array (up to 7 lines) and send each line progressively lower on the panel.

Here's an example:

To make this little server "live", I simply used ngrok to expose it.

Calling the Server

To call the server, I set up an API route on https://val.town that does the minimal work of proxying a front end call:

export default async function (req: Request): Promise<Response> {
  const body = await req.json();

  //trim message to 80
  let msg = body.message.substring(0, 80);
  let API = Deno.env.get("API");
  console.log(`Sending ${msg}`);
  await fetch(API + `?input=${msg}`);

  return Response.json({ ok: true });
}

The ngrok URL is an environment variable and as I don't care about the response, I return a basic boolean value back.

The Front End

And lastly, I used Claude to build a simple front end. It's just a form with a field and button:

The JavaScript literally just takes the field and sends it to the server code above, but if you want to see the complete project, you can check it out on val.town: https://www.val.town/x/raymondcamden/send-me-a-message

Want to try it? I'll share the URL, but first...

Privilege

I feel safe sharing this demo as my device is in my office, a room my kids don't go into, and I can shut it down in seconds. Heck, I'll probably forget it's running and next time I boot this machine, it won't run anyway. So yeah, no big deal.

But also - I'm a guy. Probably the worst thing I'll get is someone calling me foul names.

I can't imagine there is any world where a woman would feel safe with this kind of connection to random people on the internet.

Try It

Ready to try it? I make no guarantees it will work, but then again, you'll never know. ;) Hit the form here: https://raymondcamden--45cb2f404fa111f1b5dcee650bb23af1.web.val.run/

Photo by Jayne Harris on Unsplash

What was that song, the one with the words?

2026-05-13T18:00:00+00:00

My wife and I are both big music lovers, and I'm happy to have influenced her listening habits a bit and have loved what she's introduced me to. Given we both love music, we've also been known to sing along at times. (You can take a guess as to how well that goes.) She normally gets the lyrics right. I'm normally a bit more... loose in terms of how well I remember the lyrics. I was thinking about this and was curious how well AI could be used to identity lyrics and match them to a song, especially when the lyrics may not be exactly right. I spent some time hacking on it and here's what I built.

Strike One

I meant to type take one, accidentally wrote strike one, and as it didn't work, I'm keeping the title. ;) So my first attempt was rather simple:

Use the SpeechRecognition API to get a transcript while you talk or sing.
Use Chrome's Built-in AI to identify the song based on the lyrics.

Obviously Chrome's model would be date limited and wouldn't be able to pick up a recent song, but I figured I'd give that a shot first.

The SpeechRecognition API works real well, but one issue I ran into was on my mobile browser. For some reason the transcription would show up twice. I was working with Cursor to build the demo and it was able to handle that issue well.

Speaking of Cursor, it built the UI for me and honestly I think it did a great job:

The code isn't too terribly long, so I'll share the whole thing then call out important bits:

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

const isMobileSpeech =
  /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);

let recordBtn;
let transcriptEl;
let statusPanel;
let statusMessage;
let resultPanel;
let songTitleEl;
let songArtistEl;

let recognition = null;
let isRecording = false;
let finalTranscript = "";
let displayTranscript = "";

let session = null;

const schema = {
	type:"object", 
	properties: {
		song: {
			type:"string",
			description:"The song name."
		},
		artist: {
			type:"string",
			description:"The artist name."
		}
	},
	required: ["song", "artist"],
	additionalProperties: false
};

async function canDoIt() {
  if (!window.LanguageModel) {
    return false;
  }

  return (await LanguageModel.availability()) !== "unavailable";
}

function showUnsupportedMessage() {
  const notice = document.createElement("p");
  notice.className = "intro";
  notice.textContent =
    "Sorry, your browser doesn't support this. This must be run on Chrome 148 or later.";
  document.querySelector(".app")?.append(notice);
}

function setRecordingUi(recording) {
  isRecording = recording;
  recordBtn.classList.toggle("is-recording", recording);
  recordBtn.setAttribute("aria-pressed", String(recording));

  const icon = recordBtn.querySelector(".record-btn__icon");
  const label = recordBtn.querySelector(".record-btn__label");

  icon.classList.toggle("record-btn__icon--mic", !recording);
  icon.classList.toggle("record-btn__icon--stop", recording);
  label.textContent = recording ? "Stop" : "Start recording";
}

function resetOutput() {
  statusPanel.hidden = true;
  resultPanel.hidden = true;
  statusMessage.textContent = "";
  songTitleEl.textContent = "";
  songArtistEl.textContent = "";
}

function transcriptFromResults(results) {
  let interimTranscript = "";
  let finalPart = "";

  for (let i = 0; i < results.length; i += 1) {
    const result = results[i];
    const text = result[0].transcript;

    if (result.isFinal) {
      finalPart += text;
    } else {
      interimTranscript += text;
    }
  }

  return {
    display: `${finalPart}${interimTranscript}`.trim(),
    final: finalPart.trim(),
  };
}

function startRecording() {
  if (!SpeechRecognition) {
    transcriptEl.textContent =
      "Speech recognition is not supported in this browser. Try Chrome.";
    return;
  }

  resetOutput();
  finalTranscript = "";
  displayTranscript = "";
  transcriptEl.textContent = "Listening...";

  recognition = new SpeechRecognition();
  recognition.lang = "en-US";
  recognition.interimResults = true;
  recognition.continuous = !isMobileSpeech;

  recognition.onresult = (event) => {
    if (isMobileSpeech) {
      const transcript = transcriptFromResults(event.results);
      displayTranscript = transcript.display;
      finalTranscript = transcript.final;
    } else {
      let interimTranscript = "";

      for (let i = event.resultIndex; i < event.results.length; i += 1) {
        const result = event.results[i];
        const text = result[0].transcript;

        if (result.isFinal) {
          finalTranscript += `${text} `;
        } else {
          interimTranscript += text;
        }
      }

      displayTranscript = `${finalTranscript}${interimTranscript}`.trim();
    }

    transcriptEl.textContent = displayTranscript || "Listening...";
  };

  recognition.onerror = (event) => {
    transcriptEl.textContent = `Recognition error: ${event.error}`;
    stopRecording();
  };

  recognition.onend = () => {
    if (isRecording && recognition.continuous) {
      recognition.start();
    }
  };

  recognition.start();
  setRecordingUi(true);
}

function stopRecording() {
  if (!recognition) {
    return;
  }

  setRecordingUi(false);
  recognition.onend = null;
  recognition.stop();
  recognition = null;

  const transcript = displayTranscript.trim() || finalTranscript.trim();
  if (transcript) {
    transcriptEl.textContent = transcript;
  }
  recognize(transcript);
}

async function recognize(transcript) {
  resetOutput();
  statusPanel.hidden = false;
  statusMessage.textContent = "Analyzing your dulcet tones...";

  if(!session) {
		session = await LanguageModel.create({
			initialInputs: [
        { 
						role: 'system', 
						content: 
							'You are a song id bot. Given lyrics, sometimes incorrect, you try to identity the song. You only return the song and artist.' 
					}
			],
			monitor(m) {
        m.addEventListener("downloadprogress", e => {
          if(e.loaded === 0 || e.loaded === 1) return;
          statusPanel.innerHTML = `Downloading, currently at ${Math.floor(e.loaded * 100)}%`;
        });
    	}	
		});
	}

  console.log(`Passing: ${transcript}`);
  let thisSession = await session.clone();
  let result = await thisSession.prompt(
    [
      { role: 'user', content: transcript }
    ], { responseConstraint: schema });
  
  console.log(result);
  let { song, artist } = JSON.parse(result);
  songTitleEl.textContent = song;
  songArtistEl.textContent = artist;
  resultPanel.hidden = false;
}

function initApp() {
  recordBtn = document.getElementById("recordBtn");
  transcriptEl = document.getElementById("transcript");
  statusPanel = document.getElementById("statusPanel");
  statusMessage = document.getElementById("statusMessage");
  resultPanel = document.getElementById("resultPanel");
  songTitleEl = document.getElementById("songTitle");
  songArtistEl = document.getElementById("songArtist");

  document.querySelector(".controls").hidden = false;
  document.querySelector(".transcript-panel").hidden = false;

  recordBtn.addEventListener("click", () => {
    if (isRecording) {
      stopRecording();
    } else {
      startRecording();
    }
  });
}

document.addEventListener("DOMContentLoaded", async () => {
  const supported = await canDoIt();

  if (!supported) {
    showUnsupportedMessage();
    return;
  }

  initApp();
});

So up top - a bunch of variables that will point to the DOM and two checks - one for speech recognition (it should always exist, just not at the same place - scratch that - not supported in Firefox, sorry) and one for mobile.

I'm using a JSON schema to shape Chrome AI's response to ensure it just returns the song and artist.

After that - I've got code to handle clicking the record button and transcribing. As soon as you stop recording, the transcription is handed off to Chrome for analysis.

And... it worked. Poorly. If you get the lyrics right it can do ok, but it didn't really work well enough to consider it a success. You, if you are on Chrome 148 or higher, can now test this yourself, no need to flip a feature flag. It's up and running here: https://cfjedimaster.github.io/webdemos/voice_to_song/

But as I said... temper your expectations.

Version Do Re Mi

I decided to pivot and go from on-device AI to hitting the Gemini API directly. One nice thing about the Gemini APIs is that they have a proper free tier which meant I could put up a demo and not worry about the cost. (That being said, if you try the demo and it fails due to rate limits and such... I'm sorry. I'll offer you a full and complete refund at my earlier convenience.)

For this, I went back to to val.town which I've been enjoying the heck out of lately. I first did the quick hack to allow for static files by using this in main.ts:

import { staticHTTPServer } from "https://esm.town/v/std/utils/index.ts";
export default staticHTTPServer(import.meta.url);

And then added a HTTP trigger to make it accessible. (This feels like something I think val.town could make even easier.) My HTML stayed the same (except for one tweak I'll mention below) and my JavaScript changed to remove the check for Chrome's AI and just do a simple fetch call:

let req = await fetch(API, {
method: "post",
body: JSON.stringify({ transcript }),
});

let result = await req.json();

This is calling api.ts which also has a HTTP trigger:

import { GoogleGenerativeAI } from "npm:@google/generative-ai";

const schema = {
  type: "object",
  properties: {
    song: {
      type: "string",
      description: "The song name.",
    },
    artist: {
      type: "string",
      description: "The artist name.",
    },
  },
  required: ["song", "artist"],
};

const genAI = new GoogleGenerativeAI(Deno.env.get("GEMINI_API_KEY"));
const model = genAI.getGenerativeModel({
  model: "gemini-flash-latest",
});

export default async function (req: Request): Promise<Response> {
  const body = await req.json();
  console.log("req", body);

  let result = await model.generateContent(
    {
      contents: [{
        role: "user",
        parts: [{
          text:
            `Identify this song based on lyrics remembered. You will be passed lyrics that the user guesses are in the song. Lyrics could be wrong. Search against the lyrics, not the title of the song. Here's what they remember: ${body.transcript}`,
        }],
      }],
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: schema,
      },
    },
  );

  console.log(result.response.text());

  return Response.json(JSON.parse(result.response.text()));
}

You'll note I improved the system message a bit here. While testing with a buddy, he noted it seemed to sometimes focus on matching a title in the transcript, so I wanted to try to avoid that.

Back in the HTML, I made one more important change to the instructions:

Sing (or say) a few bars into your mic. We'll listen, pretend to think
very hard, then guess what song you had in mind. No guarantees. Maximum
synth.

I removed the mention of humming as that won't actually be transcribed. In theory, we could record that audio and send it to Gemini as well, but I was trying to keep this simpler.

Want to try this version? Want to belt out some tunes? Head over to the live version here: https://raymondcamden--4d1152f64d8111f1a0fbee650bb23af1.web.val.run/

As I said, this is a free tier Gemini call so I fully expect you may hit limits. You can always fork my val (embedded below) and use your own key.

Here's an example:

How well does this one work? Better! But myself, and my friends who tested, still see mistakes. That being said, it was kind of fun. Let me know what you find!

Also, a big thank you (again!) to Thomas Steiner from the Chrome team for help while I was building this out!

I was going to embed the Val here, but apparently you can only embed one file so - instead, here's a simple link instead: https://www.val.town/x/raymondcamden/voice-to-song

Photo by Mayko Sousa on Unsplash

Using Val Town and Gemini for Sports Ball Stuff

2026-05-04T18:00:00+00:00

This is trivial as heck as the kids say, but I really want to explore Val Town more this year and I thought of a great, and simple use for it. Both my wife and I are big Saints fans (this is their year, honest) and attend most of the games. If they're not playing at home, we're absolutely watching it on TV. We both really enjoy watching football, but honestly, not enough to watch ESPN and follow the news.

I thought - why not simply get a summary of NFL news from the past week and build an automation of it? I had this running in less than ten minutes with Val Town.

First, the code makes use of Google's Node SDK for working with Gemini. I setup my environment variable first and then used this code:

import { GoogleGenerativeAI } from "npm:@google/generative-ai";
import { email } from "https://esm.town/v/std/email";
import { marked } from "npm:marked";

const genAI = new GoogleGenerativeAI(Deno.env.get("GEMINI_API_KEY"));
const model = genAI.getGenerativeModel({ model: "gemini-2.5-pro" });

const prompt = `
  Act as a sports news curator. I am a casual football fan who watches games on Sundays 
  but avoids ESPN. 

  Provide a high-level summary of NFL news from the past 7 days. 
  
  Requirements:
  - Length: 3-4 paragraphs.
  - Include relevant links for further reading.
  - Tone: Informative but accessible for a casual fan.
  - Focus: Major trades, schedule updates, and significant roster moves.

In your response, don't mention the prompt per se, just give me the summary report.
For each item in your report, generate a heading title.
`;

async function getNFLSummary(p) {
  try {
    const result = await model.generateContent(p);
    const response = await result.response;
    return response.text();

    console.log(text);
  } catch (error) {
    console.error("Error generating report:", error);
  }
}

let summary = await getNFLSummary(prompt);
console.log(summary);

let html = `
<h2>NFL News Summary</h2>

${marked.parse(summary)}
`;

await email({
  subject: "NFL News Summary",
  html,
});

The prompt is pretty specific and grew as I tested. The final paragraph in particular was necessary as I kept getting "chat" like responses which wouldn't make sense for an email report. I also had to ask specifically for titles for the summaries which makes it easier to skip over things I don't care about. Lastly, I considered adding a note about focusing on the Saints, but I really wanted something more generic, especially as we tend to hear a lot of Saints news via local updates and such.

And the last bit just sends an email to me, from Val Town, as I don't need a custom FROM/TO here, this works just fine.

The last, last bit was the CRON schedule which I set as the trigger and for 9AM on Mondays. Doing a quick run produces this:

I've embedded the Val below - let me know if you fork it!

Photo by Dave Adamson on Unsplash