Raymond Camden

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

Animated video backgrounds via a Web Component and ColorThief

2026-04-30T18:00:00+00:00

Earlier this year, the epic ColorThief library had a pretty significant update. I blogged about a simple demo I built with it but I was fascinated by one particular demo on their site.

The "observe" function in ColorThief lets you monitor a video source and grab the colors at a particular frame. Their demo uses this to create a lovely shadow background of the video. I believe some TVs have this feature as well, and honestly I'd worry that would get annoying, but the ColorThief demo was pretty cool, so I thought I'd try to build it with a web component.

The idea would be - take any basic video element and wrap it like so:

<video-bgshadow>
<video controls width="250">
    <source src="videos/flower.mp4" type="video/mp4">
</video>
</video-bgshadow>

The web component would then handle:

Loading the ColorThief library
Waiting for the video to be played
Running the observe method and updating the CSS

All in all, this wasn't too difficult. I don't think my shadow is as good as the demo (and I'm totally open to people submitting a PR!), but it came out ok.

I'll link to the demo below, but here's a simple example in a CodePen:

See the Pen <video-bgshadow> by Raymond Camden (@cfjedimaster) on CodePen.

Alright, so here's the code:

class VideoBGShadowComponent extends HTMLElement {
	
	constructor() {
		super();
	}
	
	async connectedCallback() {
		this.videoEl = this.querySelector('video');
		if(!this.videoEl) {
			console.warn('No <video> element found.');
			return;
		}

		// wrap the video in a new div
		this.wrapper = document.createElement('div');
		this.videoEl.parentNode.insertBefore(this.wrapper, this.videoEl);
		this.wrapper.appendChild(this.videoEl);
		this.wrapper.style.display = 'inline-block';
		this.videoEl.style.verticalAlign = 'bottom';
		if(!window.ColorThief) await this.loadCF();
		this.videoEl.addEventListener('play', this.startShadow.bind(this));
		this.videoEl.addEventListener('ended', this.endShadow.bind(this));
		this.videoEl.addEventListener('pause', this.endShadow.bind(this));

	
	}

	// Sets window.ColorThiefLoading (Promise) to deduplicate concurrent script injection across multiple instances.
	async loadCF() {
		if (!window.ColorThiefLoading) {
			window.ColorThiefLoading = new Promise((resolve) => {
				const script = document.createElement('script');
				script.type = 'text/javascript';
				script.src = 'https://unpkg.com/colorthief@3/dist/umd/color-thief.global.js';
				document.head.appendChild(script);
				script.onload = resolve;
			});
		}
		return window.ColorThiefLoading;
	}

	startShadow(e) {
		console.log('video play');
		let thatWrapper = this.wrapper;
		this.controller = ColorThief.observe(e.target, {
		    throttle: 200,
		    colorCount: 5,
			  onChange(palette) {
	            const [dominant] = palette;
                thatWrapper.style.setProperty('--glow-color', dominant.css());
                thatWrapper.style.boxShadow = '15px 15px 20px 8px var(--glow-color)';
		    },
		})
	}

	endShadow() {
		console.log('video play end');
		this.controller.stop();
	}

}

if(!customElements.get('video-bgshadow')) customElements.define('video-bgshadow', VideoBGShadowComponent);

I don't think there's anything necessarily interesting in here, although I struggled quite a bit with loadCF. I didn't want to add the ColorThief library N times to the page. Checking for window.ColorThief only works if for some reason a video wrapped with the component is added to the page after the library loads. I used Claude to help me with this bit and while it "litters" the window object with a value, I think that is a fair trade off to ensure only one library is loaded. (Technically this could be further updated to first see if ColorThief exists in general as it's possible the website uses it for something else.)

You can see a demo with a couple of examples here: https://cfjedimaster.github.io/webdemos/video-bgshadow/

And if you think this is a good start but could be so much better, I agree, help me out over at the repo: https://github.com/cfjedimaster/webdemos/tree/master/video-bgshadow

Photo by Matthew Ansley on Unsplash

Links For You (4/26/26)

2026-04-26T18:00:00+00:00

I was supposed to post this last week (I try to keep to a schedule of every two weeks), but I didn't get around to it because... nope, that's it. That's the reason. Because. And that's good enough, amiright!?!? The heat is slowly cranking up here in Louisiana and I'm dreading the full on summer, but things do slow down a bit when the kids aren't in school and that's something I greatly appreciate. Before getting into this weeks links, I was reminded a few weeks back that my wife actually reads my posts so... hi baby, I love you.

Super useful web components FTW - <form-saver>

First up is a really simple and really useful web component, form-saver. You can wrap any form with the component and instantly get client-side storage of form contents until the form is submitted. This works for all types of form fields except file fields of course. (I assume folks know this but you can't use JavaScript to set the value of a file field for security reasons.)

Here's a simple usage example from the docs:

<form-saver>
  <form action="/contact" method="post">
    <label>
      Name
      <input name="name" autocomplete="name" />
    </label>
    <label>
      Email
      <input name="email" type="email" autocomplete="email" />
    </label>
    <button type="submit">Send</button>
  </form>
</form-saver>

Isn't that sweet? Thanks go to Aaron Gustafson.

As a reminder (and I usually try to avoid linking to my own stuff in these posts, but it's definitely related), if you like this you may like my table-sorter web component as well.

Next up is a superb guide at packing Python code for distribution. I've written a lot of Python code, but have only created a distribution once or twice, and this guide literally walks you from the first line of code to publication.

Thanks to Stephen Funk for writing this up!

The Last Quiet Thing

Finally, this essay, "The Last Quiet Thing", is a thought provoking deep look at how much of our lives are being stolen from devices that constantly, endlessly need our attention. Not only is it incredibly well written, it's also really well designed as well.

This was written by Terry Godier and thanks go to Salma Alam-Naylor for sharing it on her newsletter.

Just For Fun

I love building silly things on the web (see yesterday's post as an example), and this little toy from Wes Bos is just that. Tab Snitch does one thing - set a custom title for the web page - but does so with silly and quite embarrassing titles. Although I have to be honest - a few of the fake titles listed there are one's I've probably legitimately had on my screen at some point in time. You can guess which.

Another Game: My Little Mortal Combat

2026-04-25T18:00:00+00:00

Hello awesome readers! I'm happy to announce my latest web game, My Little Mortal Combat, a mashup of two epic franchises, My Little Pony and Mortal Kombat. This began as an idea, just the name, that I recorded in Microsoft To Do in September of 2019. Yes, almost seven years ago. It sat there, at the bottom of my 'idea' list, until about a month ago when in the shower (not joking), it popped up in my head along with the basic mechanics of how the game would play.

Right now the game is just missing one feature (I'd rather not talk about until I figure out how I'm going to do it) but definitely needs some balancing work. I enjoy playing games without knowing the details of how things work, so if's that you too, head over to the game now and good luck!

https://cfjedimaster.github.io/webdemos/my_little_mortal_combat/

How I Built It

As a web app, I kept it pretty simple. Just HTML, CSS, JavaScript, and Alpine.js. I used AI (Cursor's IDE specifically) to create the UI for the three phases of the game - into, main display, and combat. I also used AI to generate some of the strings used in the game. Opponents have random "evil"-ish titles and I wrote some and then asked AI to generate some more. Some examples:

Life Eater
Hoof Smasher
the Blood Soaked
the Blood Drinker

Opponents also have random annoying facts. Again, I wrote some, had AI generate some more.

doesn't return library books on time.
likes to ruin the end of movies.
has been known to sneeze at the buffet.
steals candy from babies and then throws the candy in the trash—in front of them!
only speaks in passive-aggressive voice.
will point out your least favorite body parts.

The actual names of the opponents come directly from a My Little Pony API I found that was open source.

Here's an example of a randomly generated opponent:

Combat is basic "Rock Paper Scissors" style where you have 3 choices (Attack, Defend, Vogue) and the result is based on what your opponent does.

Your character, and the opponents, have numerical value for Attack, Defend, and Vogue. When you win a round in a fight, the damage you do is based on that skill. Your total HP is based on level.

As you can play, if you win or lose, you get gold and XP. Obviously you get a lot more when you win. You can use the gold to train skills. Your XP turns into your level which improves your HP.

As I said, I definitely think the numbers need tweaking probably, so let me know. You can check out all the code here: https://github.com/cfjedimaster/webdemos/tree/master/my_little_mortal_combat

Don't forget, I've got this game and my others listed over on my my Stuff page. Enjoy!

Photo by Felis Amafeles on Unsplash

Building a Simple Markdown PWA App

2026-04-20T18:00:00+00:00

While I didn't share it on the blog, last week I tasked Claude with using Electron to build a Markdown viewer app. It was part test (how well can Claude work with Electron) and part real need - I work with Markdown files all the time but didn't have a simple "view focused" application for it. I was sure there open source or paid app options out there, but I wanted my own. Claude did a pretty good job (you can see the source here) but one thing stood out to me - the size of the bundled app.

I created both a Mac and Windows distribution and both were around 90 megs. That's not huge of course, but still felt like a lot for what could - in theory - just be a web app. But there was one crucial feature I wasn't sure I could replicate - double clicking on a MD file to have it open my app. Turns out - you certainly can do it that.

If you don't care how I built it, you can go to the app right now and install it: https://mdviewerpwa.netlify.app/

Alright, let's break it down.

The UI

When I had Claude design the application for me, it went with an incredibly simple UI. I felt no reason to add to that so when I began the web app, I copied over the generated HTML/CSS from the Electron app into my new folder. Here's an example of how it looks with no file selected:

And here's how it looks after a Markdown file is opened:

Now let's look at the code a bit.

Markdown Support

This normally would be the boring part. Just drop in marked and be done with it. But so many Markdown files I use have frontmatter I wanted to do something special for it. My fix was incredibly simple. If a file begins with three dashes and has another three dashes, replace them with backticks:

const renderMarkdown = content => {
    rawContent = content;
    /*
    Special tweak for frontmatter. If our content starts with '---' and 
    contains '---' again, we assume it's frontmatter and wrap it in and
    swap the --- to ```.
    */
    contentToRender = content.trim();
    // also, making a copy so we can keep the View Source version working
    if (contentToRender.startsWith('---')) {
        console.log('detected frontmatter, applying special formatting');
        const parts = content.split('---');
        if (parts.length >= 3) {
            const frontmatter = parts[1];
            const rest = parts.slice(2).join('---');
            contentToRender = `\`\`\`yaml${frontmatter}\`\`\`\n\n${rest}`;
            console.log(contentToRender);
        }
    }
    renderedEl.innerHTML = marked.parse(contentToRender);
    sourceEl.textContent = content;

    emptyState.style.display = 'none';
    renderedEl.style.display = 'block';
    sourceEl.style.display = 'none';
    toggleBtn.style.display = 'inline-block';
    showingSource = false;
    toggleBtn.textContent = 'View Source';

    document.title = `MD Viewer — ${fileNameEl.textContent}`;
}

Honestly most of that code is UI crap, but you can see the frontmatter support on top. I think it came out perfect - it stands out and I think most folks will recognize it for what it represents, but in theory I could possibly add a small graphical label or something to the block.

So again, there's UI handling code in here that's not that interesting, so let me turn to the real cool part. Yes, Virginia, a PWA can absolutely associate itself with files. I added a manifest.json and basic service worker. For bot of these I relied on Claude and it mostly did a good job, I had to tweak a few things.

After the basics worked, I did some Googling and came across this excellent MDN resource: Associate files with your PWA. Adding file support took two steps.

First, I added the following to my manifest:

"file_handlers": [
{
    "action": "/", 
    "accept": {
    "text/markdown": [".md", ".markdown"]
    }
}
]

The action step there tells my app what URL to go to when being opened via a file. As my app has one page/view, I just used /.

The next step was to look for this in JavaScript. My application does this when starting up:

if("launchQueue" in window) {
    console.log('Launch Queue API is supported, setting up consumer');
    window.launchQueue.setConsumer(launchParams => {
        if (!launchParams.files.length) {
            return;
        }
        const fileHandle = launchParams.files[0];
        console.log('File launched:', fileHandle);
        fileHandle.getFile().then(file => {
            const reader = new FileReader();
            reader.onload = e => {
                const content = e.target.result;
                fileNameEl.textContent = file.name;
                renderMarkdown(content);
            };
            reader.readAsText(file);
        }).catch(error => {
            console.error('Error reading file:', error);
        });
    });
}

Basically, if I can use launchQueue, it will consist of a list of files, each of which is a file handle. I've used File objects in JavaScript before, but not file handles, but you can quickly go to a real file object using getFile(). Once you have that, the regular FileReader approach works to get the contents and render it.

I deployed the app to Netlify, opened it in my browser, and clicked the install icon.

After I confirmed I had the application, I right clicked on a MD file, used open with, navigated to my PWA, and selected it:

I told it to remember my choice and that was literally it. So now I've got a web-based app I can use locally, heck even offline, to render my Markdown files in a nice reading experience. (Well, nice to me anyway. ;) Oh, and the size is about 400k, of which most is one of the icons. Significantly smaller than the Electron app. (But to be fair, Electron was overkill for what I was doing.)

Once again, the link to the site is here, https://mdviewerpwa.netlify.app/, and you can find all the code here: https://github.com/cfjedimaster/webdemos/tree/master/mdviewerpwa

Photo by Annie Spratt on Unsplash