PC de Adam - Changelog

2026/07/16

• Iconos de escritorios:
  • ¿Ves esa bonita parte de abajo, hablando de las ventajas y la optimización? Ya lo he quitado…
  • Entre problemas con la ligadura, la reducción y algunos fallos con los subsets provocando que no se vieran todos los iconos y llegando a reducir el tamaño a solo el 90% del original…
  • La idea de eliminar problemas me encanta (aunque hayan durado menos de 24 horas).

2026/07/15

• Iconos de escritorio:
  • Desde hace tiempo, siempre me cabrea la carga del Material Icons y que se vean los «códigos» de la fuente para cambiarse por los iconos. Ya intenté mejorar la carga, preload, carga desde CDN / local… pero ya no se podía mejorar. Es normal: es una fuente de iconos muy extensa. Son casi 300 KB.
  • Ahora que usamos Vite, podemos hacer cosas mejores para empaquetar estas cosas. Se me ocurrió hacer un subset: la fuente reducida a los iconos que se usan. Es un poco problemático, pero ahorramos cosas.
    • ¿Por qué es problemático? Porque tenemos que estar pendientes que, si usamos otro icono, hay que añadirlo a la lista.
    • ¿Por qué es ventajoso? Porque reducimos el fichero a lo que usamos realmente… si usamos 50 de 250 iconos, es reducir bastante la tipografía.
  • Se ha añadido un nuevo paso para crear este subset a través de un manifest.json.
  • ¿Qué he descubierto? Que si los iconos se incluyen por ligaduras, hay poco que recortar. Por suerte, en nuestro caso solo son cuatro (battery_horiz_075, signal_cellular_3_bar, work_update, youtube_activity). Pero ha hecho que el fichero sea más grande de lo que podría haberse reducido.
  • ¿El resultado de la optimización? 237 KB → 120 KB, ~49 % menos.
  • También se ha añadido medida anti-flash o parpadeos hasta que cargue la fuente via CSS/JS. Le metemos una clase al HTML hasta que carga y, una vez esté lista, le quitamos la clase para que muestre los iconos. Lo prefiero antes de que pegue el parpadeo feo.
• Conciertos:
  • Después del auge que ha tenido un proyecto vibe-coded en Claude obteniendo info de la API de setlist.fm y montando imágenes chulas, recuperé las notas que tenía del apartado Conciertos hace meses y nunca hice.
  • La verdad es que yo nunca pensé que setlist.fm estaba tan «abierto» al acceso de info ni cómo unirlos. Pero no es más que un Last.fm o Discogs que ya usamos habitualmente aquí.
  • He añadido nuevos campos para guardar la info de los setlists
  • He añadido una nueva herramienta de búsqueda e inclusión de la info de los setlists para hacer búsquedas manuales y reales en vez de asignar de forma automática y tener falsos positivos.
  • Actualizamos la REST API de la info de conciertos:
    • Añadimos el nombre del tour, setlists de canciones, si salieron a tocar con invitados. Además, se deja algunos campos sin añadir para estudiarlos y ver si pueden ser útiles, pero son muy «personalizados».
    • Añadimos estadísticas del concierto como número de canciones, covers, invitados, encores, etc… por si puede sacar info para ciertos logros y/o estadísticas.
  • Además de todo eso, trabajo manual hasta altas horas de la mañan para añadir conciertos en setlist.fm de todos mis setlists físicos (devolviéndole el favor al señor setlist.fm) e ir casando con los registros que ya tenemos en la web. Esto pinta bieeen.

2026/julio/04

• Changelog:
  • Pues nos hemos pasado el juego un poco. Hasta tal punto que fallaba el juego. Te cuento: el changelog del PC ha llegado a casi 81.000 caracteres, 13.600 palabras y a 72 minutos de lectura. Eso quiere decir que la página ya es tan larga que le cuesta guardar cada vez que añado cuatro cosas.
  • Para mejorar los tiempos, toca pasar todos los datos a un tipo de dato personalizado para los Changelogs.
  • Los changelogs antes estaban separado por páginas, pero ahora los hemos unificado y clasificado en una taxonomía personalizada.
  • Además, seguimos con nuestra Guterberg-rización y hemos creado un bloque conjunto para las listas y poder usarlo en ambas páginas.
    • Este bloque tiene un campo para elegir lo que se mostrará: todas o por tipo de proyecto.
    • Este bloque se puede elegir cuántas entradas (días de cambios) se mostrarán por página.
    • Además, añadiremos paginación para ir mostrando las últimas 20 entradas.
  • Este cambio afecta tanto a Changelog como a Changelog (otros proyectos)

2026/junio/28

• Logros musicales:
  • Limpieza de console.logs y cosas de debug en producción.
  • Añadir una pantalla de precarga mientras los datos cargan.
  • Encerrar los estilos en el propio componente para que no afecten a otros.

2026/junio/27

• Logros musicales:
  • Le doy un nuevo cambio visual. Aún no encuentro la forma que, de verdad, quiero mostrarlo y que quede guay.
  • Reviso todos los apartados para que estén funcionando adecuadamente.
  • Añadimos el logro «Ecoplaneta»: cuando se usa el transporte público en 10 ocasiones en un año.
  • Estudiando la forma si podemos tener dos vistas: clasificadas por categorías y listado contínuo ordenado por de logros más reciente a más antiguo, luego los que falten por arreglar.
  • Otro rework de diseño con colores naranjas (que tengo poco).
  • Creo el bloque de Gutenberg para poder añadirlo a la web.
  • ¡A publicar! Que llevo un año haciendo el canelo y hay que subirlo a producción para el feedback y tenerlo pendiente de cosas a mejorar.

2026/mayo/21

• General:
  • Ventanas:
    • Ahora, cuando la ventana no está maximizada, se puede aumentar o reducir de tamaño desde la esquina inferior derecha (gracias @JoseJARN por la idea)
  • Cajón de aplicaciones (escritorio en móvil):
    • Se le añade un píxel más de altura para que no se vea el fondo.
    • Se añade un poco más de espacio para que las últimas apps se muestren bien el nombre cuando se hace scroll hasta el final.

2026/mayo/14

• Vista detalle de disco:
  • Se mostraba el tracklist y los créditos de canciones, pero parece que ha cambiado la API de Discogs. Se ha arreglado.
  • Estoy pendiente de unos cambios donde mostrar más info en el apartado del disco. Por rellenar más cositas jejejej.

2026/mayo/13

• Estadísticas de conciertos:
  • Estoy lanzando React Doctor como un campeón, ahora que ha lanzado su slogan «Tu IA escribe React como el culo. Yo te ayudo.»… Me siento mal porque había poca IA cuando yo hice esto y me dice que mi código es de novato. Nah, es normal. Esto son pruebas y arreglos hasta conseguirlo.
  • Mejoras en la app:
    • Eliminar fetch dentro de useEffect y meterle @tanstack/query para manejar bien las peticiones.
    • Cambiar varias funciones encadenadas por .reduce(), entre otros.
    • Extraer una función que se renderizaba en línea en un componente aparte.
    • Evitar re-renderizados de los useMemo con valores por defecto.
    • Cambiar múltiples useState por useReducer
    • Evitar 4 llamadas de setState en un solo useEffect.
    • Encontramos los errores que aparecían 0 por la cara. Y es que hay veces que, sin querer, uso los comparadores de React y compara, pero imprime cero porque está creado y vacío. Por eso se imprime el cero. Cambiándolo por un ternario o por una comprobación de ‘> 0’, se soluciona.

2026/mayo/12

• Mis discos:
  • He recapacitado y deshabilitado los filtros hasta que se usen. Así, la app cargará casi instantáneamente. Al menos, los discos iniciales.

2026/mayo/10

• General:
  • Iconos:
    • Después de añadir que si son nuevas, que si se han editado hace poco… pues algo he programado mal, la verdad.
    • Se hacían más de 111 peticiones en el escritorio para analizar todo. Esto era un problema exponencial según se añadían más iconos.
    • El problema es que solicitaba los iconos y empezaba a construir el HTML. Entre medias, seguía haciendo queries para diferentes opciones del icono.
    • Se ha reducido todo en una sola petición y serializar las opciones. Una vez serializadas, se trabaja desde ahí. Cuando ya está cacheado, ya no tiene que hacer tantas consultas.
    • Con este cambio se han reducido de 111 queries a solo 4 cuando la caché está caliente y solo 25 cuando no.

2026/mayo/09

• Mis discos:
  • Mejoras en el código gracias a las recomendaciones de React Doctor para subir del 91 al 100 (o lo más cercano):
    • Reestructurar algunas funciones set para utilizar actualizaciones funcionales y mejorar la gestión del estado (usar prev)
    • Los «…» parece que no les gustan a los puristas de diseño de código, pero es entendible para que no se confundan con las uniones. Así que en acciones como Cargando o Recargando, se añadirá la forma tipográfica de ellipsis «…».
    • Se eliminan funciones y exportaciones no usadas.
    • En la función de Banderas de Países, para los emojis, se cambia .map().filter() por .flatMap() para hacerlo todo de golpe.
    • Cambiando un par de useEffect por varios setState dentro. Se cambia a useReduces o a un estado derivado.
    • Se añaden algunas mejoras a los index de algún bucle como para skeletons y apartados sin importancia.
    • Reconstrucción entera de Discs, DiscList y FilterSection para no poner un kilo de atributos y hacer prop drilling hacia abajo. Se pasan a componentes compuestos y uniendo cosas para más simpleza en el código.
    • Se optimizan un par de custom hooks que pillé en su día para obtener datos. Añadir useCallback para optimizar.
    • Cambiando un [...array].sort() por array.toSorted().
    • El componente Discs es un poco largo (300 líneas) y lo he dividido en mini funciones para mejorar la lectura y reducir el fichero.

2026/mayo/08

• Mis discos:
  • Se reduce de 50 a 25 discos por páginación para que la carga sea más rápida.
  • Se elimina src_set y sizes de las imágenes para usar una sola imagen tanto para móviles como para desktop.
• General:
  • Se reconfigura la caché de Redis para que funcione mejor para las dimensiones de este sitio.
  • Se configura el uso de caché de Objectos para la caché de WPGraphQL.

2026/mayo/05

• Best by year:
  • He descubierto que existe @wordpress/dataviews y cómo usarlos. Me lo he leído (la mitad) y me he agobiado. Se lo he chutado entero a Cursor y nos hemos (él solo, yo miraba) puesto a pasar las diferentes tablas del plugin personalizado sobre los discos más escuchados por años. Buah.
    • Las vistas que han sido cambiadas a DataViews son:
      • Todos los discos
      • Discos sin años
      • Discos escaneados con MusicBrainz ID
      • Discos escaneados sin MusicBrainz ID
    • ¿Qué hemos ganado con la conversión?
      • Sistema en React con todas las funciones disponibles en la tabla tales como:
        • filtrados por columnas
        • elección de columnas
        • edición rápida en la propia columna (con DataForm)
        • búsquedas prácticamente instantáneas
        • experiencia visual moderna
        • velocidad prácticamente instantánea y asíncrona sin cambiar de página
        • vistas en formato tabla, grid o lista sin tener que programarlas
        • orden de listas por columnas, ascendente/descendente, espaciado entre filas, items por página
        • comodidad del usuario (yo siendo feliz)
    • Es una pena que vosotros no podáis verlo, pero buah, han quedado genial, se arreglan errores y está todo muy funcional. Esto mola.
  • Se revisa de limpiar los duplicados cada hora en vez de cada 4 horas.
  • He añadido de limpiar los duplicados justo después de la actualización, aunque esto nunca me ha funcionado bien. Por eso la tarea de que se eliminen los duplicados cada 4 horas (ahora, cada hora).

2026/mayo/04

• Taskbar:
  • Arreglado un bug por el que no se eliminaban las ventanas del taskbar cuando se cerraban.

2026/mayo/02

• Convirtiendo páginas/apps a bloques nativos de Gutenberg:
  • Se ha convertido el bloque ‘Frases que me marcaron‘.
  • Se ha convertido el bloque ‘Discos‘, pero manteniendo el Vite/React separado del WordPress. Básicamente incluye los estilos/scripts cuando se carga el bloque.
  • Se ha convertido el bloque ‘Estadísticas de concierto‘, pero manteniendo el Vite/React separado del WordPress. Básicamente incluye los estilos/scripts cuando se carga el bloque.
  • Se ha convertido el bloque ‘Mis conciertos‘.
  • En estos cuatro bloques, volvemos a tener mejoría global. Sobre todo porque Mis Conciertos era algo pesado. Los números y porcentajes son a partir de la última vez que convertí páginas a bloques:
    • Estilos globales se reducen 10KB (un 5% menos, consiguiendo un 15% total de reducción).
    • Scripts globales se reducen 7KB (un 8% menos, consiguiendo un 20% total de reducción).
    • El CSS crítico se reduce 7KB (un 18% menos).
    • Desde que empezamos, ya tenemos un total de 61 KB ahorrados en llamadas globales. Pasito a pasito. Ya, cuando acabemos de trasladar todo, habrá que limpiar manualmente el CSS crítico y otros apartados. Esto marcha bien.
• Convirtiendo páginas/apps a bloques nativos de Gutenberg, parte 2 (unas horas más tarde):
  • Se ha reajustado el bloque ‘Estadísticas de conciertos‘.
    • Los estilos han sido enjaulados dentro del contenedor del bloque. Ya que reiniciaba partes globales que ya estaban afectando al editor del sitio.
    • Se ha desencolado los estilos, ya que en el admin no cargo los bloques (no me hace falta).
  • Se ha convertido el bloque ‘Llaveros de AriExpress‘.
    • Se ha cambiado la opción para que se muestren aleatoriamente, en vez de la primera paginación de discos.
  • Se ha convertido el bloque ‘Estadísticas musicales (por años)‘:
    • Además de trasladarlo al bloque, ahora se hará carga según se va haciendo scroll.
  • En este bloque de cambios, se ha reducido:
    • La hoja de estilos en 4Kb (es un 2,1% menos, 16.9% del global).
• Limpiezas en script global:
  • Revisando, veo que hay un par de proyectos antiguos que he dejado aparcados y se pueden limpiar.
    • Desactivando funciones de utilidad como isMobile.
    • Desactivando los scripts de Spotify Main Hub para dejarlo aparcado por si lo añado a un bloque en un futuro.
    • Eliminadas funciones que estaban en los ficheros, pero no estaban importadas.
  • Aquí sí hemos reducido el código no usado en el global:
    • En la hoja de scripts se ha reducido 27 KB (reducción del 33,75%, global del casi 47% de reducción!!)
• Convirtiendo páginas/apps a bloques nativos de Gutenberg, parte 3 (después de la pausa para merendar):
  • Tema ‘Adamtube‘:
    • Todo el apartado de Adamtube es algo especial porque tenemos una página listado y una vista detalle de vídeo. Además, tenemos el problema de que no estoy usando FSE porque el tema sigue siendo clásico (ya lo he intentado un par de veces de convertirlo, pero los estilos por defecto me destrozan todo).
    • ¿Qué se me ha ocurrido y no es del todo malo?
      • Hacer dos bloques: vista listado y vista detalle.
      • Mi intención no es construir toda la web con mini bloques de Gutenberg. Sería un suplicio y me agobiaría.
      • Cargar en la página correspondiente el bloque y que esté optimizado (código, estilos, scripts) para cada uno de ellos.
      • Si no tengo FSE, ¿cómo crearé la plantilla para el single de vídeo?
        • Lo haré desde el render y filtraré el código del bloque con do_blocks.
        • Por el momento, sé que funciona y, hasta que haga el cambio o encuentre una mejor solución, se quedará así.
    • Tareas hechas:
      • Traslado a bloque nativo de Gutenberg la vista de ‘Adamtube‘
      • Traslado del single de vídeo a bloque nativo de Gutenberg.
      • Se arregla un bug por el que los vídeos relaciones pueden repetirse si se alinean los astros, a pesar de tener medidas para evitarlo (era un caso muy muy concreto que ya ha sido subsanado).
    • Aquí tenemos las siguientes mejoras:
      • La hoja de estilos se ha reducido 5KB (un 2.7% menos, con lo que llevamos ya un 19,1% global de reducción).
      • La hoja de scripts se ha reducido en 1KB (un 2% menos y ya llegamos al 48% global de optimización). Aquí no se ha reducido mucho porque estaba bien optimizado cargando scripts dependiendo de la vista y he dejado el modo claro/oscuro en el global. Pero ya está muy afinado.

2026/mayo/01

• Estantería:
  • Mejora del esqueleto de carga añadiendo animaciones.
  • Reordenar alfabéticamente los artistas (algunos no estaban mostrando el orden correcto)
• Futura dirección de la web => convertir las páginas en PHP a bloques de Gutenberg en JS:
  • Como el proyecto ya tiene casi sus 6 añitos, es hora de ir usando mucho más Gutenberg/FSE y sus funcionalidades.
  • He decidido convertir todas las Apps/Páginas en Gutenberg para ir reduciendo la carga por cada página y hacer una carga controlada. Hemos creado muchas cosas y hay que reducirlo.
  • La primera app que se ha trasladado es Estantería:
    • Bloque nativo en Gutenberg.
    • Trasladamos tanto JS como estilos a su propio fichero y estáticos.
    • Hemos reducido de 225KB a 211KB los estilos generales.
  • La segunda app que se ha trasladado es Fotos:
    • Pasa ser bloque nativo también con sus ficheros propios.
    • En este caso es muy pequeñita y solo reduce 1KB.
    • Además, le he añadido carga asíncrona según se va haciendo scroll. En vez de cargar las tropecientas imágenes, ahora va de 50 en 50.
    • También se añade el «loader» para que, si va como el culo la web, se vea que está cargando.
  • A estas alturas, me acabo de dar cuenta de que está reduciéndose muchas cosas de tamaño. Todos los ficheros de CSS críticos de los temas, el CSS crítico de la ventana y otros también se han visto beneficiado de los cambios de estos dos bloques. Se ha eliminado muchísimo código en cada fichero.
  • La tercera app que se ha trasladado es Archivo de Escaneos:
    • Tanto scripts como styles globales se reducen 9-10KB cada uno.
  • Hasta aquí, hago un resumen de lo que hemos hecho y ganado y hay muy buenas cifras para unos cambios de tres páginas/apps a Gutenberg:
    • En la hoja de estilos se ha reducido en 24KB (un 10.7 % menos)
    • En la hoja de scripts se ha reducido en 13KB (13% menos).
    • Se nota más rapidez y fluídez. Ahora que puedo añadirle mejoras desde el propio bloque, va algo más rápido haciendo los cambios desde JS.

2026/abril/30

• General:
  • Ahora que ha petado el mundo entre vulnerabilidades del kernel de Linux, secuentro en npm de ‘Tanstack’ con robos de .env y más paquetes con malware en NPM/PyPi… pues me he rallado y vamos a hacer mantenimiento.
  • Aunque prácticamente no me afectan nada de eso, hay que ir haciendo mantemiento:
    • Se actualizan todos los paquetes de Vite/React a versiones sin vulnerabilidades
    • Se mejora el sistema de generación de estáticos del tema de WordPress para actualizar tanto Vite como generación de estáticos.

2026/abril/24

• Best by Year / Estadísticas musicales por años:
  • Se refactoriza el sistema de eliminación de duplicados para eliminar y reducir coincidencias.
• Opciones:
  • En el menú de Inicio, ahora hay un nuevo apartado ‘Iconos de escritorio’, que explica todos los estados de las apps que aparecen en el escritorio, como Nuevo o Actualizado.

2026/abril/20

• Discos:
  • Tengo muchas taxonomías para los discos:
    • Fecha de publicación
    • Artista
    • Discográfica
    • Formato
    • Descripción de formato
    • Tipo de formato
    • Género
    • Estilo
    • Región
  • Por si no lo sabéis, cada taxonomía y cada clasificación de esta taxonomía tiene una vista listado de items. Yo las tengo desactivadas porque habría más de 2.000 páginas que no me interesa indexar ni que veáis. Para eso existe Mis Discos.
  • Pero bueno, como Google está siendo muy pesado queriendo entrar, le he añadido la vista listado, aunque el enlace no es público. Ya tendréis que pelearos para verlo.

2026/abril/19

• Discos:
  • Como sabréis, tengo muchos discos en japonés y, a pesar de que convierto la mayoría de hiragana/katakana/kanjis en romaji, algunos se cuelan.
    • Esto estaba ocasionando algún que otro problema con las URLs en las que ciertos motores de búsqueda o ciertos navegadores, no estaban leyendo estos caracteres de forma correcta y me daba como URLs vacías o con cosas.
    • He revisado muchos datos como discos y artistas donde he arreglado los enlaces permanentes (slugs) para que no fallen, además de sus redirecciones.
    • Además, se ha añadido un nuevo patrón al importar los discos que, al generar el slug, tendrán los siguientes datos:
      • título
      • artista
      • año (si disponible)
      • formatos (máximo tres entre todos y si están disponibles)
        • formato principal (si disponible y hasta dos)
        • tipo de formato (si disponible y hasta dos)
      • región (si disponible y solo uno)
    • Para que luego digan que tener proyectos personales no te ayuda a aprender.
  • Se actualizan más de 200 URLs para que se vean algo diferentes 🙂