Un racó d’internet

Algunes persones em van demanar que fes un web, i jo ja volia tenir un racó d’internet meu, però també hi havia un altre motiu: ja sabia programar, només volia fer-ho més sovint i entendre millor alguns conceptes pel camí. Així que aquí el tens: chessie.cat, i la seva primera entrada.

Pel que fa a com havia de ser, era una barreja de dues coses: m’encanta el rosa i tot el que és bufó, i volia que fos com estar a casa. D’aquí surten el rosa suau i els adhesius, i les potetes i els detallets de gat surten del .cat del nom, que hi és perquè el web també està en català.

El que més m’agrada ara mateix són les lletres en directe: quan escolto alguna cosa, pots obrir la lletra a la pàgina de Música, o des de la cançó a la pàgina d’inici, i va avançant amb la cançó mentre sona. No hi eren des del principi, van arribar més tard, i em va agradar construir-les i pensar-les bé.

Per dins, és més senzill del que sembla. Les lletres arriben de LRCLIB, una col·lecció oberta de lletres de cançons, i les que estan sincronitzades fan servir un format que es diu LRC, on cada vers comença amb el moment en què es canta:

[00:12.40] el primer vers de la cançó
[00:15.90] el segon vers
[00:19.10] i així successivament

El meu estat de Discord diu quan va començar la cançó, així que el web sap per on va, i quatre vegades per segon busca quin vers toca. Els versos ja estan en ordre, així que en lloc de llegir la llista des de dalt, la va partint per la meitat fins que troba el correcte:

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;
}

En el que més vaig canviar d’opinió va ser, segurament, el fons. Al principi eren uns núvols de color suaus que es movien darrere de les pàgines, però es podien amuntegar a qualsevol lloc i quedava una mica desordenat, així que ara és un sol cel rosa suau que agafa una mica de color de la cançó que estic escoltant.

Un petit truc al darrere: normalment un navegador no pot fer que un valor CSS personalitzat canviï gradualment, salta d’un a l’altre, però si primer li dius que aquell valor és un color, sí que pot, i així el cel canvia a poc a poc quan canvia la cançó:

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

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

Si et fa curiositat la resta, el web està fet amb Astro, amb algunes parts interactives en Preact i els estils amb Tailwind CSS, i està allotjat a Cloudflare. Al colofó hi ha la llista completa.

Pel que fa al blog, hi escriuré sobre el meu dia a dia, tant de la feina com de fora, algunes coses divertides, i tot això. Gràcies per tafanejar una estona, i deixa’m una postal si et ve de gust.