Creant una aplicació web minimalista de gestió del temps

TL;DR

He creat ずつzutsu, una aplicació de planificació de tasques completament offline. Repositori i demostració en vídeo.

Les tardes que aprenc japonès, tinc un conjunt de tasques que vull fer: aprendre gramàtica, practicar números amb ramu, repassar les meves flashcards, llegir, mirar una pel·lícula…

Fins fa uns dies, li demanava a Claude que em generés esdeveniments de calendari:

- Tasca 1 (X min)
- Tasca 2 (Y min)
- …

---

1. Crea un fitxer de calendari en format iCalendar (.ics).
2. Utilitza GMT+2 (TZID:Europe/Madrid) per a tots els esdeveniments.
3. Inclou pauses d'1-8 minuts (aleatòries) entre cada activitat (no llistis les pauses com a esdeveniments separats).
4. Afegeix URLs com a camp URL separat per als esdeveniments que en tinguin.
5. Per a cada esdeveniment, inclou els camps SUMMARY, DTSTART, DTEND i DESCRIPTION. No utilitzis camps innecessaris com RRULE.
6. Formata les dates i hores en format UTC (per exemple, 20000101T153000 per a l'1 de gener de 2000, 15:30:00).

Els esdeveniments comencen el [data i hora].

En un bon dia, completava totes les tasques en ordre, sense interrupcions. L’aplicació nativa del calendari m’avisava quan tocava canviar de tasca.

Però la majoria de dies havia d’ajustar els esdeveniments (per exemple, per menjar). Realment, fins i tot els bons dies tenien problemes: podia passar que el repàs de flashcards durés menys del previst! Això implicava seleccionar tots els esdeveniments restants al calendari i moure’ls amunt o avall. La majoria de dies planejava unes 12 tasques, algunes de curta durada —difícils de seleccionar—, així que era una mica molest.

M’agradava la idea del time blocking, però no necessitava planificar dies o setmanes, només les meves tardes. Volia:

  • Crear una llista de tasques
  • Pausar/reprendre
  • Completar tasques abans d’hora (movent les tasques restants)
  • Rebre una notificació amb so quan fos hora de canviar de tasca
  • Repetir fàcilment sessions anteriors
  • Tenir totes les dades emmagatzemades i processades localment

No volia compartir les meves dades del calendari ni utilitzar una aplicació de tercers. Em semblava que una petita aplicació web així hauria d’existir. Així que la vaig crear!

Després de discutir els requisits amb Claude i compartir el codi complet de la meva última aplicació web, va proposar aquest disseny:

Primer prototip d'interfície de Claude Primer prototip d'interfície de Claude

No és un mal punt de partida!

Vaig passar unes hores treballant en:

  • Una manera fàcil d’afegir tasques amb un temps predeterminat i control per teclat
  • Exportació i importació de tasques (JSON)
  • Poder reordenar les tasques
  • Mostrar totes les tasques en llista: completades, actual i pendents
  • Estil + disseny responsive
  • Accessibilitat (per exemple, navegació per teclat al calendari d’activitats)
  • I, el meu preferit, unes petites utilitats:
    • Calendari d’activitat, similar al de GitHub, mostra tasques completades en els últims 30 dies
    • Cronòmetre —«quant em portarà aquesta subtasca?»
    • Espai per prendre notes
    • Comptador simple —«quantes paraules he après en aquesta sessió?»
    • Selectors aleatoris per evitar la fatiga de decisions —«hauria d’utilitzar subtítols?»; «quantes definicions busco com a màxim durant la immersió?»
    • Temporitzador Pomodoro que pausa la tasca principal durant el descans

La idea és centrar-se en una tasca cada vegada, així que la vaig anomenar ずつzutsu, de l’expressió japonesa 一つずつhitotsu zutsu (un per un).

Així funciona:

Pots provar-la tu mateix o veure el codi font.

Ara toca aprendre japonès amb les eines que he fet en lloc de treballar en les eines. 🙃