A corner of the internet

Some people asked me to make a site, and I already wanted a corner of the internet of my own, but there was one more reason too: I already knew how to code, I just wanted to do more of it, and get a better grip on a few concepts along the way. So here it is: chessie.cat, and its first post.

When it came to how it should look, it was a mix of two things: I love pink and cute, and I wanted it to feel like home. That’s where the soft pink and the stickers come from, and the paws and little cat bits come from the .cat in the name, which is there because the site is also in Catalan.

My favourite thing on it right now is the live lyrics: when I’m listening to something, you can open the words on the Music page, or from the song on the home page, and they move along with the song as it plays. It wasn’t part of the site from the start, it came later, and I enjoyed building it and thinking it through.

Under the hood it’s simpler than it looks. The lyrics come from LRCLIB, an open collection of song lyrics, and the timed ones come in a format called LRC, where every line starts with the moment it’s sung:

[00:12.40] the first line of the song
[00:15.90] the second line
[00:19.10] and so on

My Discord status says when the song started, so the site knows how far into it I am, and four times a second it looks up which line that is. The lines are already in order, so instead of reading the list from the top, it keeps cutting it in half until it lands on the right one:

export function currentLine(
  lines: readonly LyricLine[],
  position: number,
): number {
  let low = 0;
  let high = lines.length - 1;
  let found = -1;
  while (low <= high) {
    const middle = (low + high) >> 1;
    if (lines[middle].at <= position) {
      found = middle;
      low = middle + 1;
    } else {
      high = middle - 1;
    }
  }
  return found;
}

The part I changed my mind on the most was probably the background. It started as soft clouds of colour drifting behind the pages, but they could pile up anywhere and it got a bit messy, so now it’s one soft pink sky that picks up a little colour from the song I’m listening to.

One small trick behind it: a browser normally can’t fade a custom CSS value, it just jumps from one to the next, but if you tell it the value is a colour first, it can fade between them, so the sky changes slowly when the song does:

@property --sky-song {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

.page-backdrop-sky {
  transition: --sky-song 2.4s ease-in-out;
}

If you’re curious about the rest, the site is built with Astro, with a few interactive bits in Preact and the styles in Tailwind CSS, and it runs on Cloudflare. The colophon has the full list.

As for the blog, I’ll write about my day to day, both work and outside of it, some fun things, and so on. Thanks for poking around, and leave me a postcard if you feel like it.