Rachel Sprague

Adding an RSS Feed to a Jekyll Site

2026-03-24T00:00:00-07:00

I didn’t realize RSS feeds were still a thing, so (naturally), I wanted one. Turns out Jekyll basically does it for you.

Step 1 - The Plugin

GitHub Pages supports jekyll-feed out of the box — no custom build step needed. Add it to _config.yml:

plugins:
  - jekyll-feed

Push that and your feed is live at /feed.xml. Easy. Like Sunday morning.

Step 2 - Add It - Make It Discoverable

Browsers and RSS readers look for a tag in the page head to auto-detect feeds. Add this to the of your layouts:

 rel="alternate" type="application/atom+xml" title="Rachel Sprague" href="/feed.xml">

Then add a visible link somewhere on the page — I put mine in the footer:

 href="/feed.xml">RSS

Step 3 - Rejoice

That’s the whole thing. We did it, Joe.

RSS Readers

It’s been a long time since I’ve used an RSS Reader (RIP Google Reader). Apparantly I already have a Feedly account so I downloaded the app and am trying it out.

Tools & Skills

Jekyll
GitHub Pages
RSS / Atom
jekyll-feed plugin

Stop Repeating Yourself to Your AI Agent

2026-03-23T00:00:00-07:00

AI pair programming. It’s so hot right now.

A Little Context

I’m a senior data analyst. I work mostly in dbt, SQL, and Git. I’ve been using AI coding assistants heavily for the past year and have tried most of the major models. Lately I’ve been on Claude (who isn’t, amirite?).

Bad code in a data pipeline might silently corrupt downstream reports for weeks before anyone notices. That caution that comes with data has been one of the more important things to communicate to an agent.

What I Noticed

I found myself repeating myself while working with agents. Don’t deploy yet. Let me validate first. Don’t assume the existing logic is correct. Show me what you’re changing before you change it.

Providing context to an agent is crucial.

The AGENTS File

Most AI coding tools support some version of a persistent instructions file — a markdown file that lives in your repo and gets loaded into the agent’s context at the start of every session. Call it AGENTS.md, .cursorrules, whatever your tool supports. Same idea.

I started one. Actually, I asked Claude to make one for me. And I updated the file as I would think of more context.

The file lives in the repo, which means it’s version controlled.

Using AI to Audit Itself

I asked the agent to review our conversation (or conversations, if your agent has the memory) and identify patterns:

Things I consistently pushed back on
Corrections I made more than once
Preferences that I repeated

It surfaced things I hadn’t consciously noticed myself doing. It validated that I consistently insisted on validating and adding this to the AGENTS file was the right move.

Now that’s in there. Next session, the agent already knows.

Why This Matters for Data Work Specifically

An agent will optimize for shipping. That’s fine for a lot of work. For data work, I’d rather it optimize for correctness and visibility — show your work, flag assumptions, don’t touch what we’re not changing.

Those aren’t hard rules to follow. But the agent won’t follow them consistently unless you tell it to, and it won’t remember you told it unless it’s somewhere persistent.

The AGENTS file is just a way of encoding how you work so you’re not re-explaining yourself every day.

Tools & Skills

AI-assisted development
Prompt engineering
dbt / SQL
Git
Workflow design

I Haven’t Bought a New Computer in Ten Years and Everything Is Fine

2026-03-22T00:00:00-07:00

My laptop is a (Early) 2015 MacBook. It is over ten years old. I am still using it. Everything is fine.

I haven’t needed to replace it. It runs. It does what I need it to do. Working around its limitations became part of how I work.

What I’m Running On It

Here’s what it’s handling on a regular basis:

Building and maintaining three GitHub Pages sites
Livestreaming an aquarium (yes, really)
Image editing in GIMP and Inkscape — including designing our Save the Dates (I got married late last year 🎉) and now our thank you cards
Running AI tools daily

Not too shabby for a ten-year-old laptop.

How I Work Around the Limits

The biggest constraint is resources. I can’t run a heavy IDE — no VS Code sitting open with a dozen extensions loaded. So I’ve built a lean workflow.

The GitHub web editor handles most of my coding. It’s browser-based, surprisingly capable, and doesn’t touch my local memory at all. For everything else, the Terminal app. That’s it.

For the aquarium livestream, yes I had to reduce the output quality. Yes I limit sources in OBS. Does it freeze sometimes? Sometimes. We don’t talk about that.

I did try to expand the RAM at one point. Turns out it’s soldered to the logic board and not removable. Not upgradeable. I was annoyed.

The upside of this constraint is that I’ve gotten very comfortable with browser-based tools and lightweight workflows. I don’t reach for heavy software because I can’t, and most of the time I don’t need to.

AI

AI doesn’t make the hardware faster, but it removes the bottleneck that used to require more powerful tools. I’m building things I genuinely couldn’t have built on my own before — not for lack of skills, but lack of time. Googling everything and actually finding a good resource took time. A lot of time. Now, instant answers, instant code, instant debugging help. My 2015 MacBook doesn’t need to be faster because the workflow got smarter.

How I Do This For Free

My entire tech life has basically been: how can I do this for free, or as close to free as possible, on whatever hardware I already have?

MySpace profile CSS. Geocities. Free hosting with FTP uploads. GIMP instead of Photoshop. GitHub Pages instead of a paid host. If I can do it for free, why not?

The 2015 MacBook fits that perfectly. It’s paid for. It works. She’s my ride or die. Literally.

Will I Ever Replace It?

Yes. One day. When she crosses the rainbow bridge.

And she’ll know she was loved.

Pulling the Latest Media from Bluesky into Your Site

2026-03-21T00:00:00-07:00

I wanted to pull my latest photo and video posts from a Bluesky account directly into a page on my personal site. I didn’t want to embed anything or use an iframe (do people still use iframes? Genuine question - I haven’t used an iframe since 2002). Turns out Bluesky has a public API that makes this pretty straightforward.

What It Does

Fetches the most recent photo post from a Bluesky account
Fetches the most recent video post from the same account
Displays both inline on the page with links back to the original posts
No API key required — Bluesky’s public feed endpoints are open

The API

Bluesky’s public API is part of the AT Protocol. The endpoint I used:

https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed

Key parameters:

actor — the Bluesky handle
filter=posts_with_media — limits results to posts that have media attached
limit=50 — how many posts to scan

No authentication needed for public accounts.

How I Got Here

Started with just photos. That part was easy — the API response is clean and consistent for images.

Video was a different story. First issue: reposts were showing up in the feed and I only wanted original posts, so I had to filter those out. Second issue: Bluesky surfaces video under a few different $type values depending on how it was uploaded, so a single check wasn’t enough. Took some digging through the raw API response in dev tools to figure out what was actually coming back.

The final version handles all of it.

The HTML

Just two placeholder divs that JavaScript fills in:

Latest Photo
 id="latest-photo">


Latest Video
 id="latest-video">

The JavaScript

async function loadBlueskyMedia() {
  const handle = "your-handle.bsky.app";
  const photoEl = document.getElementById("latest-photo");
  const videoEl = document.getElementById("latest-video");

  try {
    const res = await fetch(
      `https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=${encodeURIComponent(handle)}&filter=posts_with_media&limit=50`
    );
    const data = await res.json();

    let latestPhoto = null;
    let latestVideo = null;

    for (const item of (data.feed || [])) {
      const post = item.post;
      if (!post) continue;

      // Skip reposts
      if (post.reason?.$type === "app.bsky.feed.defs#reasonRepost") continue;

      const embed = post.embed;
      if (!embed) continue;

      // Photo
      if (!latestPhoto && embed.$type === "app.bsky.embed.images#view" && embed.images?.length > 0) {
        const img = embed.images[0];
        latestPhoto = { url: img.fullsize || img.thumb, rkey: post.uri.split("/").pop() };
      }

      // Video — handles a few different embed types
      if (!latestVideo) {
        if ((embed.$type === "app.bsky.embed.video#view" || embed.$type === "app.bsky.embed.video#viewExternal") && embed.playlist) {
          latestVideo = { url: embed.playlist, rkey: post.uri.split("/").pop(), thumb: embed.thumbnail || "" };
        } else if (embed.$type === "app.bsky.embed.recordWithMedia#view" && embed.media) {
          const media = embed.media;
          if (media.playlist) {
            latestVideo = { url: media.playlist, rkey: post.uri.split("/").pop(), thumb: media.thumbnail || "" };
          }
        }
      }

      if (latestPhoto && latestVideo) break;
    }

    // Render photo
    if (latestPhoto && photoEl) {
      photoEl.innerHTML = `
        ${handle}/post/${latestPhoto.rkey}" target="_blank" rel="noopener">
          ${latestPhoto.url}" style="max-width:100%;border-radius:12px;">
        `;
    } else if (photoEl) photoEl.textContent = "No recent photo.";

    // Render video
    if (latestVideo && videoEl) {
      videoEl.innerHTML = `
        ${handle}/post/${latestVideo.rkey}" target="_blank" rel="noopener">
          ${latestVideo.thumb ? `poster="${latestVideo.thumb}"` : ""}>
            ${latestVideo.url}">
            Your browser does not support the video tag.
          
        `;
    } else if (videoEl) videoEl.textContent = "No recent video.";

  } catch (err) {
    console.error("Failed to load Bluesky media:", err);
    if (photoEl) photoEl.textContent = "Failed to load photo.";
    if (videoEl) videoEl.textContent = "Failed to load video.";
  }
}

loadBlueskyMedia();

Tools & Skills

Bluesky AT Protocol API
Vanilla JavaScript (async/await, fetch)
HTML
Jekyll
GitHub Pages
AI-assisted development

Building a Widget with Rotating Text

2026-03-20T00:00:00-07:00

I thought it would be fun to add a status widget to my landing page.

I created a widget that displays a single line that changes on every page load, pulled randomly from a list.

Simple. Favorite.

What It Does

Displays a “Currently:” label with a line of text beneath it
Picks a random line from a list on every page load
No API, no dependencies, no refresh logic — just vanilla JavaScript

The HTML

A single card with a static label and a paragraph that JavaScript swaps out:

 class="section-card">
   class="title">Currently:
   id="currently-text">Loading...

The JavaScript

The whole thing is about ten lines:

const currentlyLines = [
  "Claude.",
  "Prompting.",
  "Adding one more widget.",
  "Whack-a-CSS-issue.",
  "Fixing 1 layout issue, creating two more.",
  "Exploring Github Pages.",
  "Trying to convince myself I enjoy debugging CSS."
];

const currentlyText = document.getElementById("currently-text");
if (currentlyText) {
  const line = currentlyLines[Math.floor(Math.random() * currentlyLines.length)];
  currentlyText.textContent = line;
}

Why I Like This

There’s no server, no API call, no build step. It’s just a list of strings and ten lines of JavaScript. Anyone who visits the page gets a slightly different experience, and updating it is as simple as editing an array.

What’s Next

The list is easy to update so I’ll keep adding to it as things change. Eventually I might add a fade transition between loads, but for now the snap-in is fine.

Tools & Skills

Vanilla JavaScript
HTML
Jekyll
GitHub Pages
AI-assisted development

Building a Last.fm Now Playing Widget

2026-03-19T00:00:00-07:00

Music is a big part of my life. I’ve been scrobbling to Last.fm for years now (since 2008, to be exact) and I wanted to show what I was currently listening to on my personal site.

The result: a small widget that shows what I’m currently listening to (or last listened to), the album art, and how many times I’ve played that track.

What It Does

🎧 Shows “Now playing” if a track is actively scrobbling
🎧 Falls back to “Last played” with a time ago stamp if nothing is playing
Displays album art (clickable, opens my Last.fm library)
Shows my personal play count for that track
Refreshes automatically every 60 seconds
Pulses with a soft blue glow when something is actively playing

The API

Last.fm has a free, public API. You just need to register for an API key at last.fm/api.

The two endpoints I used:

user.getrecenttracks — pulls the most recent scrobble, and flags it as nowplaying if it’s live
track.getInfo — pulls metadata for a specific track, including your personal play count

The HTML

A simple card structure:

 id="music" class="now-item">
   id="track-status">🎧 Loading music...

   id="album-art" src="" alt="Album art" />
   id="track-name">


   id="track-timestamp">
   id="track-playcount">

The JavaScript

The main function fetches recent tracks, checks if something is actively playing, then fires a second request to get the play count:

const LASTFM_API_KEY = "your_api_key_here";
const LASTFM_USER = "your_username";
const REFRESH_MS = 60000;

async function updateNowPlaying() {
  const recentUrl = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${LASTFM_USER}&api_key=${LASTFM_API_KEY}&format=json&limit=1`;
  const res = await fetch(recentUrl);
  const data = await res.json();
  const track = data?.recenttracks?.track?.[0];

  const artist = track.artist["#text"];
  const title = track.name;
  const art = track.image?.[2]?.["#text"] || "";
  const isNowPlaying = track["@attr"]?.nowplaying === "true";

  document.getElementById("track-status").textContent =
    isNowPlaying ? "🎧 Now playing:" : "🎧 Last played:";
  document.getElementById("track-name").textContent = `${artist} — ${title}`;
  document.getElementById("album-art").src = art;

  if (!isNowPlaying && track.date?.uts) {
    const diffMinutes = Math.floor((new Date() - new Date(track.date.uts * 1000)) / 60000);
    document.getElementById("track-timestamp").textContent =
      diffMinutes < 60 ? `scrobbled ${diffMinutes} min ago`
                       : `scrobbled ${Math.floor(diffMinutes / 60)} hr ago`;
  }

  const infoUrl = `https://ws.audioscrobbler.com/2.0/?method=track.getInfo&api_key=${LASTFM_API_KEY}&artist=${encodeURIComponent(artist)}&track=${encodeURIComponent(title)}&user=${LASTFM_USER}&format=json`;
  const infoRes = await fetch(infoUrl);
  const infoData = await infoRes.json();
  document.getElementById("track-playcount").textContent =
    `${infoData?.track?.userplaycount || 1} plays`;
}

function animateBoxUpdate(box, callback) {
  box.style.opacity = 0;
  box.style.transform = "translateY(4px)";
  setTimeout(() => {
    callback();
    box.style.opacity = 1;
    box.style.transform = "translateY(0)";
  }, 300);
}

updateNowPlaying();
setInterval(updateNowPlaying, REFRESH_MS);

The CSS

#music {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 250px;
  transition: all 0.25s ease;
}

#music:hover {
  transform: translateY(-2px) scale(1.01);
}

#music img#album-art {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}

#music.playing {
  animation: musicPulse 2s infinite ease-in-out;
  border-color: rgba(120, 170, 255, 0.6);
}

@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(120, 170, 255, 0.35); }
  50%       { box-shadow: 0 0 14px rgba(120, 170, 255, 0.6); }
}

Tools & Skills

Last.fm API
Vanilla JavaScript (async/await, fetch)
CSS animations
GitHub Pages
HTML
JSON / REST APIs
AI-assisted development

What’s Next

I also built a Twitch stream status card alongside this one — same pattern, different API. I wrote that one up here.

Building a Linktree-Style Layout for My Site

2026-03-18T00:00:00-07:00

I had a Linktree forwarding my domain. I loved it. It was easy, straightforward, and exactly what I needed for a simple online presence. But it was limited.

Then I discovered Github Pages and thought: Why not just make my own?

The Goal

Minimal and clean
Central hub for my projects
Fast to update

Why Linktree-style

It checks all the boxes:

✅ Familiar layout (especially on mobile)
✅ Simple to navigate
✅ Easy to update

Layout decisions

It needed to look good on both mobile and desktop.

The first version was pretty minimal: logo, social icons, and a couple of links. Not much, but the structure was there.

Later I added a short bio and a list of projects so it didn’t look so sad. I grouped things into sections.

Current state

Clean layout
Reusable structure
Easy to extend with widgets

Tools Used & Skills Sharpened

Github Pages
Markdown
Jekyll
CSS
HTML
ChatGPT

All on my trusty 2015 MacBook.

Where it’s going

I’ll keep tinkering with the site and adding content. The landing page will stay as the Linktree-style hub, linking out to other parts of the site.

Adding a Live Twitch Status to a Static Site

2026-03-17T00:00:00-07:00

Normally, fetching live data requires a server, but we can pull the Twitch status for a channel directly from the browser using JavaScript - no backend setup needed. I also added a subtle pulsing animation when live to make it stand out visually. I’m using Github’s Twitch channel as an example

Live Demo (updates every 60s)

Checking status...

The Goal

I wanted a card on my site that:

Shows whether my stream is live
Displays the duration if live
Updates automatically every minute
Works on a completely static Jekyll site

Step 1: HTML Structure

I added a simple card in my index.md


  
    
      Checking status...

Step 2: JavaScript to Fetch Status

I use decapi.me to fetch Twitch uptime. Here’s the JavaScript:

// Twitch Status Widget
    async function updateTwitchStatus() {
    try {
        const res = await fetch("https://decapi.me/twitch/uptime/github");
        const text = await res.text();

        const card = document.getElementById("twitch-status");
        const textBlock = card.querySelector(".text-block");
        const mainText = textBlock.querySelector("#twitch-text");
        const durationEl = textBlock.querySelector(".duration");

        if (text.toLowerCase().includes("offline")) {
        mainText.textContent = "Stream Offline";
        durationEl.textContent = "";
        card.classList.remove("live");
        } else {
        mainText.textContent = "Live on Twitch";
        durationEl.textContent = text;
        card.classList.add("live");
        }
    } catch (err) {
        console.error("Failed to fetch Twitch status:", err);
        const card = document.getElementById("twitch-status");
        const textBlock = card.querySelector(".text-block");
        textBlock.querySelector("#twitch-text").textContent = "🐠 Stream status unavailable";
        textBlock.querySelector(".duration").textContent = "";
        card.classList.remove("live");
    }
    }

    // Initial load + refresh every 60s
    updateTwitchStatus();
    setInterval(updateTwitchStatus, 60000);

Step 3: Styling

Here’s the CSS I added to style.css:

.twitch-card {
    background: #f4f4f4;
    color: #111;
    max-width: 260px;
    margin: 0 auto;
}

.twitch-card.live {
    background: rgba(0, 128, 255, 0.3);
    animation: twitchPulse 1.8s infinite ease-in-out;
    border: 1px solid rgba(78, 228, 78, 0.6);
}

@keyframes twitchPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(78, 228, 78, 0.3); }
    50% { box-shadow: 0 0 16px rgba(78, 228, 78, 0.6); }
}

The live class triggers both the background color and the pulsing animation when the stream is live.

Step 4: Result

The card updates automatically every 60 seconds.
Shows Live or Offline instantly.
Pulses subtly when live for attention.
Works entirely on a static Jekyll site.

Example

Here’s how it looks in the wild:

Integrated Twitch Live status