Fernando Muñoz · NANDO MUÑOZ, Tech Lead Frontend · Madrid

A Cara A

1. LUZ (Light, Usable & Zero-dependency) es un sistema de diseño en HTML, CSS y módulos ES, sin dependencias en tiempo de ejecución. El HTML que escribes sale con estilo sin poner ninguna clase, y las clases solo añaden lo que el HTML no puede decir.

2. Se adopta por capas independientes: solo los tokens, los tokens con los componentes, o además el catálogo con buscador, aviso de cookies, selector de idioma y patrones de landing, blog o documentación. En un proyecto que ya tiene diseño puede cargarse solo dentro de una región marcada y migrarse página a página.

3. Trae componentes de botones, formularios y tablas a pestañas, ventanas modales, avisos o un reproductor de vídeo, audio y MIDI. Cada uno tiene su página en la documentación con un ejemplo en vivo, el código para copiar y cuándo usarlo y cuándo no.

4. Apunta al nivel AA de WCAG 2.2 en sus tres modos de color, claro, oscuro y alto contraste: se maneja con teclado, el foco siempre se ve y cada página funciona sin JavaScript. Las pruebas automáticas pasan en cada cambio, y la declaración de accesibilidad dice también lo que aún no se ha probado.

5. Está pensado para personas y a la vez es sencillo para que un agente de IA lo escriba bien: la web publica la lista cerrada de clases, y luz-check lee sin conexión el HTML y el CSS de un proyecto y dice qué clases, elementos, orden de carga o colores están mal.

6. Cada cambio empieza con un test que falla, y cada archivo tiene un tamaño máximo que nadie sube para que pase. La paleta de color es propia y todo, fuentes incluidas, tiene licencia MIT, sin registro ni telemetría.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · HTML · CSS

   Estado

   En línea

   Fecha

   2024

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. IKAY lee 33 datos que cualquier web obtiene de tu navegador sin pedirte un solo permiso y te los enseña como el expediente que una web guarda de ti.

2. Los datos van desde la ciudad que delata tu IP y la zona horaria, que comparada con la de esa IP apunta a si usas una VPN, hasta la memoria, la tarjeta gráfica, la batería, las fuentes instaladas o el modo incógnito. También sigue en directo el ratón, los clics y las teclas, sin guardar nada.

3. Cada dato llega en una frase, con una marca de protegido o no protegido y una explicación de lo que significa para ti, con el detalle técnico plegado para quien lo quiera. Al final calcula «tu ID», una huella que sobrevive a las cookies y al modo incógnito, sin guardar ni enviar nada.

4. La página parece un expediente: papel y tinta, capítulos y entradas numerados y un solo rojo de alarma usado como un rotulador. Los títulos van en Fraunces, el texto en Inter Tight y cada valor encontrado en Fira Code.

5. Está en español, inglés y árabe, que se lee de derecha a izquierda sin casos especiales. Tiene modo automático, claro, oscuro y alto contraste, con el texto a 7 a 1 o más en este último, se maneja con teclado y ningún estado depende solo del color.

6. Es la versión moderna del IKAY original, de 2020, que necesitaba compilarse y tenía 16 tarjetas: HTML, CSS y JavaScript sobre los tokens de LUZ, sin bundler y sin nada que instalar. Los tokens y las tipografías se sirven desde el propio repositorio, sin CDN, y no hay cookies ni analítica.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · CSS · HTML · LUZ

   Estado

   En línea

   Fecha

   2026

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Demos de las APIs de IA que Chrome trae integradas con Gemini Nano. Todo se ejecuta en tu dispositivo: no hay servidor y, una vez descargado el modelo, tampoco hace falta conexión.

2. Hay un playground con respuesta en streaming, un chat con varias sesiones que se pueden bifurcar, salida en JSON que sigue un esquema, recetas para clasificar, extraer o moderar textos, un buscador de sinónimos con matices y una caja de herramientas para resumir, traducir y reescribir un mismo texto.

3. Cada demo empieza con una guía paso a paso; el sitio es bilingüe y está hecho con Astro, TypeScript y LUZ.

B Cara B

1. Ficha

   Tecnologías

   TypeScript · Astro · Chrome AI · LUZ

   Estado

   En línea

   Fecha

   2025

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Responde a la pregunta que se hace todo el mundo durante el Carnaval de Cádiz: qué agrupación sale ahora en el COAC y cuándo me toca verla. El concurso del Gran Teatro Falla dura semanas, con una sesión por noche y más de una decena de agrupaciones en cada una, y el listado oficial es una tabla larga y sin horas.

2. Esta web la convierte en una página para el móvil que dice qué sesión es la de hoy, a qué hora aproximada sale cada agrupación, cuál está en directo y cuánto falta para la próxima.

3. La hora de cada agrupación se calcula a partir del orden de actuación, sumando lo que duran la actuación y el montaje; son estimaciones, no el horario oficial. Todas las horas son las de Cádiz estés donde estés, y la sesión de la noche sigue contando como la de ese día hasta la madrugada.

4. Cada agrupación lleva su modalidad, coro, comparsa, chirigota o cuarteto, su autor y su ciudad. Un buscador por autor lleva a la agrupación dentro de su sesión, y hay un enlace a la emisión en directo en YouTube y otro que busca lo que la agrupación presentó el año anterior.

5. Al construir la web, el contenido real de las sesiones se escribe dentro del HTML, con sus datos estructurados, para buscadores y lectores sin JavaScript. Tiene modo claro, oscuro y alto contraste, y los dos últimos cumplen el nivel AA de WCAG.

6. Sin cuentas, sin cookies y sin servidor: React y TypeScript sobre un tema propio de LUZ, con la lógica de fechas separada de los componentes y probada, también con un reloj simulado. Cambiar de fase es añadir el JSON copiado del listado oficial y tocar un solo archivo; las fechas salen del propio JSON.

B Cara B

1. Ficha

   Tecnologías

   TypeScript · React · Vite · LUZ

   Estado

   En línea

   Fecha

   2023

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Una API estática y sin dependencias con la discografía y la obra completa de Antonio Martínez Ares, el autor de comparsas del Carnaval de Cádiz. Sirve las composiciones, las letras y su contexto histórico como ficheros JSON alojados en GitHub Pages, sin base de datos, sin servidor y sin paso de compilación.

2. Incluye un índice ligero para autocompletar búsquedas sin descargar todos los datos, los datos repartidos por épocas y CORS abierto para usarla desde cualquier web. Carga en menos de un segundo en una red normal y es software libre con licencia MIT.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · HTML · CSS · JSON

   Estado

   En línea

   Fecha

   2026

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Una extensión de Chrome que añade una barra flotante a las páginas de Adobe Experience Manager para saltar entre el Editor, la vista publicada, Sites y CRXDE sin reescribir URLs, conservando la ruta del contenido.

2. Abre la misma página en otro entorno (local, desarrollo, QA, stage), pone un favicon de color distinto a cada uno para no confundir Stage con Local y guarda marcadores a las rutas más usadas.

3. Funciona con AEM as a Cloud Service, AMS, on-premise y el SDK local, y los ajustes se comparten con el equipo en un JSON. JavaScript plano, Manifest V3, sin compilación ni dependencias.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · CSS · HTML · Chrome Extension

   Estado

   Repositorio

   Fecha

   2025

2. Enlaces

   • Ver código
   • Página del proyecto

A Cara A

1. La web de un estudio ficticio, Acme Studio, que parece limpia pero está rota a propósito para practicar auditorías de accesibilidad.

2. Tiene un enlace para saltar al contenido que apunta a un destino equivocado, imágenes sin texto alternativo, un botón con solo un icono y sin nombre, un orden de tabulación alterado, encabezados que se saltan niveles, un div que parece un botón pero no responde al teclado y una tabla sin cabeceras. El formulario de contacto suma etiquetas que no se corresponden con sus campos y campos con solo un placeholder.

3. Cada error está comentado en el código para comprobar lo que has encontrado.

B Cara B

1. Ficha

   Tecnologías

   HTML

   Estado

   En línea

   Fecha

   2026

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Un viaje literario por los continentes: una lista de libros elegidos con una regla sencilla, que hayan sido publicados a partir de 2010 y escritos por autores del país que representan. La idea es asomarse a lo que se escribe y se lee hoy en cada lugar, contado desde dentro, con las voces y los temas del siglo XXI.

2. Es un repositorio abierto y colaborativo: cualquiera puede proponer un libro con un pull request y una breve explicación de por qué lo eligió, siempre que se pueda encontrar en bibliotecas o plataformas.

B Cara B

1. Ficha

   Tecnologías

   Markdown

   Estado

   Repositorio

   Fecha

   2024

2. Enlaces

   • Ver código
   • Página del proyecto

A Cara A

1. Convierte un texto a más de 50 formatos agrupados en ocho categorías: convenciones de nombres como camelCase, snake_case o kebab-case, codificaciones como Base64, URL, hexadecimal o Morse, cifrados clásicos como ROT13 o Atbash, hashes SHA, la carga de un JWT y utilidades para ordenar, deduplicar o limpiar líneas.

2. Transforma mientras escribes, avisa cuando la entrada no tiene el formato esperado, sugiere el formato que detecta y permite invertir la conversión con un botón. Todo ocurre en el navegador sin enviar nada a ningún servidor; se instala como PWA, funciona sin conexión y también se usa como librería o desde la línea de comandos.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · HTML · CSS · PWA

   Estado

   En línea

   Fecha

   2023

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Una aplicación de una sola página para registrar, importar y analizar las comparsas del COAC y sus modalidades discursivas en cada fase del concurso, de las preliminares a la final. Carga datos desde CSV o Excel o desde un formulario, evita duplicados de comparsa y año, se edita en la propia tabla y guarda los cambios en el navegador.

2. Un dashboard muestra métricas y gráficos con filtros, y las preguntas en lenguaje natural las responde la IA local de Chrome usando solo los datos filtrados. No necesita backend ni instalación: todo cabe en un index.html.

B Cara B

1. Ficha

   Tecnologías

   HTML · JavaScript · Chrome AI

   Estado

   En línea

   Fecha

   2026

2. Enlaces

   • Ver demo
   • Ver código
   • Página del proyecto

A Cara A

1. Un componente web que muestra un indicador de carga animado y que se usa con una sola etiqueta en cualquier proyecto, con o sin framework.

2. La animación se hace con el símbolo que elijas, de un bloque sombreado a puntos, barras o signos musicales, y se adapta a los esquemas de color claro y oscuro con una animación suave y configurable. Se carga como módulo desde un CDN o desde los propios ficheros del repositorio.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · Web Components

   Estado

   Repositorio

   Fecha

   2025

2. Enlaces

   • Ver código
   • Página del proyecto

A Cara A

1. Una librería pequeña y sin dependencias para saber el subtipo exacto de cualquier valor de JavaScript —Array, Date, Map, RegExp…— allí donde typeof solo dice «object».

2. Expone una sola función, getType, que devuelve el nombre del subtipo y sirve para validar entradas con precisión o decidir cómo tratar un valor. Funciona en Node.js y en los navegadores modernos, se instala desde npm o yarn y tiene licencia MIT.

B Cara B

1. Ficha

   Tecnologías

   JavaScript · Node.js

   Estado

   Repositorio

   Fecha

   2024

2. Enlaces

   • Ver código
   • Página del proyecto