Raymond Camden

Links For You (8/2/26)

2026-08-02T18:00:00+00:00

Happy August folks. Louisiana is celebrating the approach of Fall by gradually increasing the temperatures to roughly that of the surface of the sun. Last night we saw the new Spider-Man, which was really good, although not as fantastic as "No Way Home". The point of these posts is for me to share content from other folks, but I'll remind folks of my Youtube channel. This past week I shared a few new videos demonstrating some cool stuff with Cursor so if you've not checked them out yet, give me a quick watch and let me know what you think!

Web browsing on your gaming console

First up is a great post by Vale detailing the capabilities and history of web browsers on game consoles. I've been playing on consoles since the very beginning and a lot of this was still new and surprising to me. Honestly I can't imagine surfing any web page on a browser now. I think the last time I did was on my XBox so I could find a cool background picture.

Audio visualization with wavesurfer.js

Next up is a cool JavaScript library for audio visualization, wavesurfer.js. Also I think this is the first site I've seen on the xyz TLD. The library works pretty simply - point it at a div and MP3 and it visualizes it on your web page. Here's a simple example of it in action.

See the Pen wavesurfer.js by Raymond Camden (@cfjedimaster) on CodePen.

What the hell happened to frontend?

Ah, the good ole days, hand crafting HTML in Notepad and manually "deploying" via carefully selecting and uploading via an FTP client. In the following few decades things got... a little bit more complex. This great deep dive by David Poblador i Garcia goes into detail over the changes in frontend. Those of you new to this - you missed a lot. ;)

Just For Fun

With AI being everywhere, I'm curious how many of my readers ever saw Electric Dreams, an incredibly corny 80s film I remember watching on VHS over and over again. The story is... well... it was the 80s so that gives you an idea, but it had a pretty good songs in it including the main theme. Enjoy!

Updating my Watch Site for Algolia Support

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

Alright, so I was supposed to share this a bit quicker, but life, work, etc, kept me busy. I've had this particular change up for a few days but I'm just now getting around to blogging about it. What changes?

Adding Algolia's MCP to my Cursor environment
Using Algolia's MCP (what worked, what did not)
Adding Algolia content as a scheduled service with Netlify
Adding a basic search front end to I Watch Watches

Before going on, be sure you've read the last piece where I talked about agentic development in general, and specifically how I built the site.

If you don't have a log, did it happen?

I've been doing some work with different profiles and my Cursor environment, and in doing so, I lost the chat I had with Cursor about these features. I know it's there but I think I lost it the transition/testing I've been doing. (I did find the chat actually, but I'll still probably skip including it directly here.)

The Plan - in Two Parts

I spelled this out above, but it bears repeating. I wanted to add search to my site and wanted to use Algolia. Algolia makes use of an index that's a copy of your site data. For me that's the RSS feed items from the watch blogs I aggregate. Creating and setting up the index is a one time operation. Populating the index and keeping it up to date is something you do forever. (To be technical, you've got a lot of options in that regard. So for example, in a site with millions of updates you could hold off updating your index until a particular time every day or other time period.) So the first operation was setting up that process.

The second part is much simpler - wiring up the search UI. For that I used my interface here as a guide - a nav search field that loads up a search page with results, and another form there so you can quickly change your search.

Algolia and MCP

Algolia's MCP docs were a bit confusing to me. The first example mentioned is the "Algolia Public MCP" - but this is the "per app" MCP I talked about here: "TIL - Algolia Makes Creating an MCP Server Stupid Easy". In other words, it's an MCP server for your data.

Instead, you want the Algolia Productivity MCP, which is what's used to work with your account at a high level. But - right away you see:

"Read-only index access, with an extended set of tools such as analytics."

So the MCP server can't actually make changes to your account, like creating or modifying an index. That's a bit of a bummer (and I let my buddy at Algolia know this), but it does give you MCP access via your agent so you can do things like list your indexes and perform searches right from your AI harness.

Here's a test I did in Cursor:

Pretty standard stuff, but notice both Cursor and Algolia's MCP gracefully handled the fact that I didn't specify a particular index for my account. It was smart enough to recognize which index would most likely have rolex as a term.

One more nit to be aware of. You have to enable Algolia MCP. This is documented, but given that the URL is standard (not something special per index, it's for Algolia in general) and given you have to authenticate to use it, it felt weird that I also had to enable it in my account. This is also feedback I shared with my contact at Algolia.

So given I couldn't use the MCP to create the index, I just did it myself. By hand. Uphill. In the snow. Both ways. After the 20 to 30 seconds of that work was done, I was ready to start building.

Index Seeding and Updating

My first choice was a bit difficult. For my blog here, I've got a huge amount of content, and keeping Algolia in sync could be a bit complex. I went with an approach that gets recent items and does an upsert to my index using the batch API.

For I Watch Watches, I decided to use the same API, the same upsert, but to pass everything. My spidey-sense tells me this may be problematic later as the aggregator grows, and I'll probably have to go with a "last 1k" or so filter, but for now it worked.

In Cursor, I described my ask - create a Netlify scheduled function to upsert my data to my Algolia index. Netlify has my Algolia secrets and serverless functions can use it, so I set Cursor to building it out, and it did a great job. In fact, it did it a bit differently than I would.

First, it created a core Algolia module in src/lib/algolia.ts:

import { algoliasearch } from "algoliasearch";
import { db } from "../db";
import { feedItems } from "../db/schema";

const BATCH_SIZE = 1000;

export type AlgoliaSyncSummary = {
  total: number;
  batches: number;
  indexName: string;
};

function getAlgoliaConfig() {
  const appId = process.env.ALGOLIA_APP_ID;
  const apiKey = process.env.ALGOLIA_SECRET_KEY;
  const indexName = process.env.ALGOLIA_INDEX;

  const missing = [
    !appId && "ALGOLIA_APP_ID",
    !apiKey && "ALGOLIA_SECRET_KEY",
    !indexName && "ALGOLIA_INDEX",
  ].filter(Boolean);

  if (missing.length > 0) {
    throw new Error(`Missing required Algolia environment variables: ${missing.join(", ")}`);
  }

  return { appId: appId!, apiKey: apiKey!, indexName: indexName! };
}

export async function syncFeedItemsToAlgolia(): Promise<AlgoliaSyncSummary> {
  const { appId, apiKey, indexName } = getAlgoliaConfig();
  const client = algoliasearch(appId, apiKey);

  const rows = await db
    .select({
      id: feedItems.id,
      title: feedItems.title,
      url: feedItems.url,
      synopsis: feedItems.synopsis,
      publishedAt: feedItems.publishedAt,
    })
    .from(feedItems);

  const objects = rows.map((row) => ({
    objectID: String(row.id),
    title: row.title,
    url: row.url,
    synopsis: row.synopsis,
    published_at: row.publishedAt ? row.publishedAt.toISOString() : null,
  }));

  if (objects.length === 0) {
    return { total: 0, batches: 0, indexName };
  }

  const responses = await client.saveObjects({
    indexName,
    objects,
    batchSize: BATCH_SIZE,
  });

  return {
    total: objects.length,
    batches: responses.length,
    indexName,
  };
}

And then it built the serverless function which ended up being much smaller with the core logic abstracted.

import type { Config } from "@netlify/functions";
import { syncFeedItemsToAlgolia } from "../../src/lib/algolia";

export default async (req: Request) => {
  const body = await req.json().catch(() => ({}));

  try {
    const result = await syncFeedItemsToAlgolia();
    const summary = {
      next_run: body?.next_run ?? null,
      ...result,
    };

    console.log("Algolia sync complete", JSON.stringify(summary));

    return new Response(JSON.stringify(summary), {
      headers: { "Content-Type": "application/json" },
    });
  } catch (error) {
    const message = error instanceof Error ? error.message : "Unknown error";
    console.error("Algolia sync failed", message);

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

export const config: Config = {
  schedule: "@daily",
};

Running locally, I was able to use curl to run this function and then the Algolia MCP to search and confirm it actually worked.

Searching

Algolia has multiple options for performing searches, but for me the basic JavaScript SDK is all I need. I asked Cursor to implement that following the pattern I have on my blog here and as I described above. Cursor wired up the search in the top nav, built a new page, search.astro, and mostly followed the same pattern I did here. Here's the complete Astro page:

---
import Header from "../components/Header.astro";
import { SITE_NAME } from "../config";
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout title={`Search · ${SITE_NAME}`} description="Search watch articles and news">
  <div class="site-shell">
    <Header />

    <main class="search-page">
      <h1>Search</h1>

      <form class="search-page-form" action="/search" method="get" role="search">
        <input
          id="search-input"
          type="search"
          name="search"
          placeholder="Search watches, brands, or articles"
          autocomplete="off"
        />
        <button type="submit">Search</button>
      </form>

      <p id="search-status" class="search-status" aria-live="polite"></p>
      <div id="search-results" class="search-results"></div>

      <p class="search-attribution">
        Search by
        <a href="https://www.algolia.com/" target="_blank" rel="noopener noreferrer">Algolia</a>
      </p>
    </main>
  </div>
</BaseLayout>

<script is:inline src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script is:inline>
  (() => {
    const appId = "0FJBPN4K5D";
    const apiKey = "8f741f50b983176875b65e252402b140";
    const indexName = "iwatchwatches";

    const statusEl = document.getElementById("search-status");
    const resultsEl = document.getElementById("search-results");
    const inputEl = document.getElementById("search-input");

    const params = new URLSearchParams(window.location.search);
    const term = (params.get("search") || "").trim();

    if (inputEl) {
      inputEl.value = term;
    }

    if (!term) {
      statusEl.textContent = "Enter a search term above to find articles.";
      return;
    }

    if (typeof algoliasearch !== "function") {
      statusEl.textContent = "Search is temporarily unavailable.";
      return;
    }

    statusEl.textContent = "Searching…";

    const client = algoliasearch(appId, apiKey);
    const index = client.initIndex(indexName);
    const dateFormatter = new Intl.DateTimeFormat("en", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });

    function escapeHtml(value) {
      return String(value)
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
    }

    function formatDate(value) {
      if (!value) return "";
      const date = new Date(value);
      if (Number.isNaN(date.getTime())) return "";
      return dateFormatter.format(date).toUpperCase();
    }

    index
      .search(term, {
        hitsPerPage: 50,
        attributesToRetrieve: ["title", "url", "synopsis", "published_at"],
      })
      .then((response) => {
        const hits = response.hits || [];
        const count = response.nbHits ?? hits.length;

        if (hits.length === 0) {
          statusEl.textContent = "Sorry, but there were no results.";
          resultsEl.innerHTML = "";
          return;
        }

        statusEl.textContent =
          count === 1
            ? "There was one result for this search."
            : `There were ${count} results for this search.`;

        resultsEl.innerHTML = hits
          .map((hit) => {
            const title = escapeHtml(hit.title || "Untitled");
            const url = escapeHtml(hit.url || "#");
            const synopsis = hit.synopsis ? escapeHtml(hit.synopsis) : "";
            const published = formatDate(hit.published_at);

            return `
              <article class="search-result">
                <h2 class="search-result-title">
                  <a href="${url}" target="_blank" rel="noopener noreferrer">${title}</a>
                </h2>
                ${published ? `<p class="search-result-meta">${published}</p>` : ""}
                ${synopsis ? `<p class="search-result-synopsis">${synopsis}</p>` : ""}
              </article>
            `;
          })
          .join("");
      })
      .catch(() => {
        statusEl.textContent = "Search failed. Please try again.";
        resultsEl.innerHTML = "";
      });
  })();
</script>

In case you're curious, the key embedded in code is safe - it's a read only search key.

Show me the code...

If you want to see everything behind the aggregator, you can check out the repo here: https://github.com/cfjedimaster/iwatchwatches. Note that the readme was updated by Cursor and it did a dang good job. It handled updating the configuration as well as the Changes section.

The next change will be somewhat larger - a web based interface to add new feeds to the site - behind authentication of course.

Photo by Shahrukh Rehman on Unsplash

Building Agentically and Celebrating Watches

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

I've shared past experiences with vibe coding and it's been a fascinating way to experiment and build on a small scale, but while it works well for POCs and other small utilities (I won't say 'toys' as I've built useful, if small, things now multiple times), it isn't really a "process" and not one that would work over a project with a longer time frame. This is where "Agentic Development" comes in. It's not always referred to as such and it's a huge topic, but let me give you my opinion on it and then demonstrate how I used it to build my newest project, I Watch Watches.

Agentic Development in a Nutshell

Vibe coding is traditionally defined by a quick prompt passed to an AI agent. There may be a few rounds of changes afterwards, but the process is relatively simple and straightforward. Acceptable for a team of one and smaller projects, but not necessarily a "real" enterprise/larger environment.

Agentic development integrates your AI agent or harness across an entire development process. Broadly speaking it entails:

A planning stage where you may start with a prompt, but the agent doesn't write any code, but instead creates a plan. That plan is shared with you and you have the opportunity to adjust as you see fit. Add something, remove something, tweak something, this is where you and the agent agree on not just what is being done, but how. For developers who worry about AI taking your job, this is where your experience comes into play. I always validate that the plan makes sense and is building how I (or my organization) would build.
An implementation phase where the AI agent takes over - but even here the process can be far different from simple vibe coding. A good harness (like Cursor!) will let you define rules ("always do X") as well as skills ("when doing Y, here is how we do it") which lets you give firm guardrails for how code will be generated. This is especially useful in cases where you are working on a team within a large codebase and need to ensure you follow the established procedures for that project.
Validation is also part of the process. A good agent/harness will not just build something but also validate that it actually worked. This could also be combined with creating tests to cover new features.
On top of validating the change worked, you can also add an additional level of verification, so for example, when a PR is submitted, you can use an agent (at Cursor this is Bugbot, but of course other options exist).

That's a pretty high level overview, but the end result is that you've got AI agents working for you in a much more controlled, and reliable way. Honestly it's already changed how I do a lot of my work even in cases where I've written every bit of code. Having the agent there to help validate and check what I've done is like having a virtual intern who never complains.

So, how about an example?

Watches are my bling

I've been a huge fan of watches for pretty much all my life. I remember Swatches as a kid (I literally just signed up for a pre-order for a new one) and as I got older, I started collecting more and more watches and finding myself stopping at jewelry stores just to peruse their collections. I've got some cheap ones, some expensive ones, and some weird ones, but I love them all.

This is my current favorite and I've got it on right now: Memento Mori Rose

Yes, this is a Camden watch, and the name initially caught my attention, but their collection is incredible (I have two). Even better, they literally check the timezone of where their watches are being shipped and will set the watch to the appropriate time.

My typical way of discovering new watches is either seeing it on a person or seeing it on Facebook. Shockingly, if you Like a few watch ads, you end up seeing a lot more, and honestly I'm fine with that. (Facebook is where I first saw the Camden Watch company.) A few days ago it finally clicked that there's probably a decent amount of watch blogs out there, why not start aggregating them so I can see watches my own way - in my own app.

How I Started

So obviously I'm using Cursor (where I work, just as a reminder!) and it's got a dedicated Plan mode. I switched to that and started off with this prompt:

My stack was Astro, on Netlify, using their built-in database support, which is not something I've actually used before. Note I gave direction on how aggregation should occur, specifically Netlify CRON-based serverless functions.

When I submitted this, I got a few follow-up questions including my mocks. At some point (honestly I can't find it now), I directed Cursor to not implement search for now. (If you visit the site today, search does work, but that was a second session which I'll turn into a second post.) I also said I wanted pagination with ten items per page, but I told Cursor to ensure that number was easily configurable. I'd say the follow-up questions and back and forth was probably about ten more minutes of work. When done, this plan was created. Note that the links below won't work as they are local to my project. They absolutely did work post creation which was super helpful to verify how things were done.

I told Cursor to execute and it went to work. When it was done, I got this:

I love, love, love how it ended with clear instructions on how to test myself, specifically the Netlify CLI database stuff that I'd never used before. And I knew how to run a Netlify serverless function already, but the curl command was a handy reminder. (As an FYI, a CRON serverless function for Netlify can be called via HTTP locally, but not in production. That's handy!)

At this point I was able to test and it worked perfectly... almost. One blog's items were returning broken images. I asked Cursor about that:

it looks like the media for ablogtowatch all return broken images. investigate why

And here's the response. Honestly, I do not think I could have figured this out on my own:

I selected the first option and let Cursor implement it.

After this, I made a few more changes:

Initially the footer just repeated the title. I had it link to my blog instead.
Cursor can generate favicons, so I asked for three options and picked one. When I did, Cursor went ahead and wired it into the HTML.

What's Next

I hope this made sense and I hope the power and flexibility of how I built it is clear. As I mentioned, I've already done improvements, but I want to cover that in the next blog post. You can find the site here, https://iwatchwatches.netlify.app/. I may spring for a real domain later. You can find the code here, https://github.com/cfjedimaster/iwatchwatches

Copying HTML Tables as Text, Markdown, and CSV

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

Earlier today and in a non web-related conversation, I saw someone talk about copying tabular data into different formats, like plain text and CSV. It got me thinking - this could be a useful feature for web sites and surely something pretty trivial to do in JavaScript. So I whipped up a quick demo.

First, I added a table of course:

<table id="table1">
	<thead>
		<tr>
			<th>Name</th>
			<th>DOB</th>
			<th>Gender</th>
			<th>Breed</th>
		</tr>
	</thead>
	<tbody>
	<tr><td>Whiskers</td><td>2019-03-14</td><td>Male</td><td>Maine Coon</td></tr>
	<tr><td>Luna</td><td>2020-07-22</td><td>Female</td><td>Siamese</td></tr>
	<!-- bunch more rows -->
	<tr><td>Nala</td><td>2022-04-18</td><td>Female</td><td>Persian</td></tr>
	<tr><td>Molly</td><td>2022-01-11</td><td>Female</td><td>LaPerm</td></tr>				
	</tbody>
</table>

Alright, so to enable this feature, I thought data attributes might be nice. This would let you use it on anything, a button, a link, image, etc. The data attribute would be responsible for pointing to the table (via an id) and specifying a format. Here's an example:

<!-- data-copy defaults to text -->
<a href="" data-table="table1">Copy as Text</a> ~ 
<a href="" data-table="table1" data-copy="md">Copy as Markdown</a> ~
<a href="" data-table="table1" data-copy="csv">Copy as CSV</a>

Now all I need to do is wire it up to code that looks for data-table and adds the appropriate handlers. The first part is trivial:

const links = document.querySelectorAll('*[data-table]');

Note that while I named the variable links, you can still use this with buttons or images.

I loop over each match and first get the table referenced, throwing an error in console if it doesn't exist:

links.forEach(l => {
	let table = document.querySelector(`#${l.dataset.table}`);
	if(!table) {
		console.error(`Unable to connect to table with id ${l.dataset.table}`);
		return;
	}

Next, I check the type, defaulting to text:

let type = l.dataset.copy || 'text';

The final bit is to assign the click handler:

l.addEventListener('click', async e => {
	e.preventDefault();
	console.log(`about to copy table ${table.id} to ${type}`);
	let data = getRawData(table);
	let formattedData = formatData(data, type);
	await navigator.clipboard.writeText(formattedData);
});

For each, I get the raw data from the HTML table, convert it to the right format, and then write to the clipboard. (Check out my article on working with the clipboard in JavaScript.)

getRawData just iterates through the table's DOM creating a 2D array:

const getRawData = t => {
	let data = [];
	t.querySelectorAll('tr').forEach(r => {
		let row = [];
		r.querySelectorAll('th, td').forEach(d => {
			row.push(d.innerText);
		});
		data.push(row);
	});
	return data;
}

formatData is a bit more complex and I used AI to help me with each of the main sections. I added support for plain text, Markdown, and CSV:

const formatData = (data,type) => {
	let numCols, colWidths, lines, buildRow, buildDivider;
	
	switch(type) {
		case "text": 

			numCols = Math.max(...data.map(r => r.length));
			// Compute max width for each column
			colWidths = Array(numCols).fill(0);
			for (const row of data) {
			for (let i = 0; i < numCols; i++) {
				const cell = row[i] !== undefined ? String(row[i]) : '';
				colWidths[i] = Math.max(colWidths[i], cell.length);
			}
			}
		
			buildDivider = () =>
			'+' + colWidths.map(w => '-'.repeat(w + 2)).join('+') + '+';
		
			buildRow = (row) =>
			'|' + colWidths.map((w, i) => {
				const cell = row[i] !== undefined ? String(row[i]) : '';
				return ' ' + cell.padEnd(w) + ' ';
			}).join('|') + '|';
		
			lines = [];
			lines.push(buildDivider());
			lines.push(buildRow(data[0])); // treat first row as header
			lines.push(buildDivider());
			for (let i = 1; i < data.length; i++) {
			lines.push(buildRow(data[i]));
			}
			lines.push(buildDivider());
		
			return lines.join('\n');

		case "md":
		case "markdown": 
			numCols = Math.max(...data.map(r => r.length));
			
			buildRow = (row) =>
				'| ' + Array.from({ length: numCols }, (_, i) =>
					row[i] !== undefined ? String(row[i]) : ''
				).join(' | ') + ' |';
		
			lines = [];
			lines.push(buildRow(data[0])); // header
			lines.push('| ' + Array(numCols).fill('---').join(' | ') + ' |');
			for (let i = 1; i < data.length; i++) {
				lines.push(buildRow(data[i]));
			}
		
			return lines.join('\n');

		case "csv": 
			const escapeCell = (value) => {
			const str = value !== undefined && value !== null ? String(value) : '';
			// Quote if it contains comma, quote, or newline
			if (/[",\n\r]/.test(str)) {
				return '"' + str.replace(/"/g, '""') + '"';
			}
			return str;
			};
		
			return data.map(row => row.map(escapeCell).join(',')).join('\n');
			
	}
}

With my test table (and I'm stripping out a bit here for brevity), here's the plain text version:

+----------+------------+--------+----------------------+
| Name     | DOB        | Gender | Breed                |
+----------+------------+--------+----------------------+
| Whiskers | 2019-03-14 | Male   | Maine Coon           |
| Luna     | 2020-07-22 | Female | Siamese              |
| Oliver   | 2018-11-05 | Male   | British Shorthair    |
| Max      | 2019-06-25 | Male   | Sphynx               |
| Stella   | 2021-05-04 | Female | American Curl        |
| Rocky    | 2018-09-20 | Male   | Burmese              |
| Molly    | 2022-01-11 | Female | LaPerm               |
+----------+------------+--------+----------------------+

Here's the Markdown:

| Name | DOB | Gender | Breed |
| --- | --- | --- | --- |
| Whiskers | 2019-03-14 | Male | Maine Coon |
| Luna | 2020-07-22 | Female | Siamese |
| Oliver | 2018-11-05 | Male | British Shorthair |
| Max | 2019-06-25 | Male | Sphynx |
| Stella | 2021-05-04 | Female | American Curl |
| Rocky | 2018-09-20 | Male | Burmese |
| Molly | 2022-01-11 | Female | LaPerm |

And here's CSV:

Name,DOB,Gender,Breed
Whiskers,2019-03-14,Male,Maine Coon
Luna,2020-07-22,Female,Siamese
Oliver,2018-11-05,Male,British Shorthair
Max,2019-06-25,Male,Sphynx
Stella,2021-05-04,Female,American Curl
Rocky,2018-09-20,Male,Burmese
Molly,2022-01-11,Female,LaPerm

I wrapped this all up in a function that you could add to your page. After adding it, don't forget to actually add the links/button/etc to enable it.

There's two issues with my code that come to mind, and I'd love people to comment in with their ideas. First, both the text and Markdown assume the first row is a header. In theory that might not always be accurate. I could update the code to see if the first cell in the first row is th versus td, but that kinda feels like overkill.

The second issue that comes to mind is user feedback. Usually these types of things will provide some kind of visual feedback ("Data copied!"). My code does not. I honestly don't quite know how I'd do that. Perhaps a data attribute that would replace the text (assuming it's a link or button) temporarily? I'm not sure.

If you've got ideas, leave me a comment below. Here's the demo:

See the Pen Copy Table As (2) by Raymond Camden (@cfjedimaster) on CodePen.

Links For You (7/18/26)

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

Good morning, programs. I'm currently at a conference (Day of Data), but thankfully one just down the road. I'll be back tonight, and thought I'd take a break between sessions to share some links. I'll be presenting later today one of my favorite talks, "A Beginner's Guide to Wrangling Asynchronicity in JavaScript". I love the talk, but given I'm up against eight other talks at the same time and I'm not talking AI... well it may be a small personal affair. We shall see.

Building a Blog with Astro

It's been a hot minute since I've written about Astro. I first started using it since Webflow was a sponsor and found that I really dug it, but over the past couple of months I've not had the bandwidth to keep playing with it. That being said, I keep my eyes open for cool posts and this by Zell is awesome: Building a Real Blog Easily in Astro. I'm pretty sure my first blog post on Astro showed a basic blog, but this article goes really deep.

Interactive SVGs and PDFs

As they say, you can take the dev out of PDFs but not the PDFs out of the dev. I'm now two... three? years post Adobe and Foxit and I still perk up when I see a blog post about PDFs. For today, I'm sharing a post that discusses interactivity with SVGs and PDFs. The SVG part is pretty much what you expect - DOM stuff and JavaScript. The PDF part is a bit more esoteric as it references a JavaScript engine built into PDFs from like the Mesozoic era of computers.

Animating a Dialog

The Dialog element still feels relatively new, but has great support (even in Safari) so there's no reason not to use it. The View Transition API also has stellar support. So this article by pqina is a great example of combining the two. I've used Dialog once or twice and want to use it more. The View Transition API still hasn't quite "clicked" with me yet but I'd like to use it more (where appropriate).

Just For Fun

I've shared Post Modern Jukebox a few times here so why not once again. Here's their version of "Red Right Hand" by Nick Cave. Enjoy!

TIL - Algolia Makes Creating an MCP Server Stupid Easy

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

A few days ago I was chatting with Chuck Meyer (devrel for Algolia) and I casually mentioned, "It sure would be cool if Algolia had an easy way to turn my search index into an MCP server." He promptly responded, "Of course, you complete and utter dufus, which is why we already have that feature." (Not an exact quote.) This is exactly the kind of thing I love to hear. I've been using Algolia for my search here for years and honestly have not paid much attention to the new additions on their platform. That was a mistake. Let me show you how dang easy they made this.

First - what's Algolia?

Chuck, forgive me, I'm going to do a horrible job summarizing your entire company into a few sentences. Algolia provides search as a service. You create an index (or multiple) that represent what you want to search, whether it be textual content (like this blog) or ecommerce products (perhaps Dungeon Crawler Carl merch). Via multiple ways, you populate this index and keep it up to date (when you create/edit/delete content locally, you make a corresponding edit to your index).

Once the index is created (and tuned, you can do a lot to tune how your index works), you can then search it. My search is just one simple example, but it's one JavaScript library and a few lines of code.

That's basically it. Well no, there's a lot more, but at least for my implementation here, that's basically it.

Second - what's MCP?

MCP boils down to "if a person is needing to do some kind of action, an MCP server can tell the AI agent, hey, I handle that, just hand it off to me!" At Webflow, for example (sorry, you lay me off you don't get links), the MCP server handled API calls to your Webflow site and integrated with Cursor, Claude, and other agents. If you asked something like, "What Webflow sites do I have", because the Webflow MCP server was added to your agent, and authenticated, it could handle doing the appropriate API calls and returning it such that your agent could document the result.

For a documentation site, an MCP server can help you use free form questions about the docs and get responses in your AI agent.

Third - Ok, now what?

To enable it in Algolia, you log in to your dashboard and select the appropriate application (an application can have one or more indexes), and then click Generate AI in the navigation. In the sub nav, you'll have a section titled "MCP Servers / Public", and then in that UI, just click the "Create Public MCP Server" button.

On that UI, you can select what indexes and tools to enable. I've only got one "real" index, so I picked that and gave my server an incredibly useful and informative name:

On the next page, you can select which tools you want enabled. I picked everything, but I'm not using the Recommendation product so I probably should turn that off.

The end result is the URL to your MCP server. Mine is https://0FJBPN4K5D.algolia.net/mcp/1/vMOWpYc9RK6FuHnWxZcoyg/mcp. At this point, you follow your "usual procedure" on adding MCP to your tools. I tested in a few, including Cursor of course.

Actually using it...

Two big use cases come to mind for this:

Externally, this creates a very powerful way for users to interact with your documentation. Most documentation for technical products already include this, including Algolia's docs of course. But the target user here is your audience.
Internally, this could be very powerful. As a content writer, I can already use the existing Algolia search as a quick way to see, "did I blog about X", but with my MCP server, I can ask deeper questions, and even use it to help create new content.

I did some testing related to both of these scenarios, not terribly deep, but enough to be pretty impressed.

In agy, the Antigravity CLI (Google Gemini's models), I asked:

search Ray's mcp server for his opinion on React

And the response was near perfect:

"deliberate exclusion" is the name of my Goth band.

In Cursor, I added the MCP server via the app settings and took the approach of the content creator. I asked:

using Ray's MCP server, what do you recommend for a new blog post?

And here's what Cursor and my MCP server came back with:

In case you just skimmed, it literally suggested, as the second suggestion, the blog post I'm right now. Great minds, right?

TLDR

You can add an MCP server to Algolia indexes in 5 minutes. Actually less than that - it took me longer to remember what 2FA app I used with their dashboard.

Oh, and like most of Algolia's products, this falls into their Build tier which is free up to a certain amount of usage, which I've never hit. I've told Chuck before they are too damn generous with their free tier and thankfully they've ignored me.

Let me know what you think - are you using this? Are you using Algolia at all? Leave me a comment below as I'd love to hear from some folks who may already be using this.

Turning my Cursor Performance Work into a Repeatable Skill

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

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

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

What's a skill again?

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

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

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

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

Turning my performance review into a skill

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

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

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

Cursor provides a few ways to make skills:

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

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

Cursor responded with:

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

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

Running the Skill

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

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

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

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

The Skill

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

Asking Cursor to Review My Blog for Performance

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

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

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

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

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

RSS Parsing and a dead Mastodon server

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

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

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

import Parser from 'rss-parser';

const parser = new Parser();

To:

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

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

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

Trying to be AI friendly had an unintended consequence

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

    // rest of event...

Bypassing API calls locally

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

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

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

Wrap Up

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

Here's the complete initial report Cursor created.

Photo by Yannik Zimmermann on Unsplash

My New Role - Helping AI Adoption at Cursor

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

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

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

Happy Day One!

Links For You (7/5/26)

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

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

JavaScript in the Shadows

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

Brownies for Storage

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

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

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

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

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

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

Don't use JavaScript!

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

Just For Fun

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

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