Web y front-end (11-20)

El front-end es donde más lucen los agentes, y también donde más fácil es acabar con un montón de código que nadie entiende, tú incluido. Lo que mejor me ha funcionado es elegir proyectos con una funcionalidad clara y un resultado visual que puedas comprobar de un vistazo. Estos diez van por ahí.

11. Editor de Markdown con vista previa en vivo#

El clásico, pero bien hecho. Scroll sincronizado, atajos de teclado y guardado en el navegador, para que no pierdas nada si recargas sin querer.

Crea un editor de Markdown en una sola página HTML sin build.

- Panel izquierdo de texto, derecho de vista previa, scroll sincronizado
  por posición relativa (no por píxel).
- Atajos: Cmd/Ctrl+B, +I, +K para enlace, y Tab que indenta la lista.
- Guardado automático en localStorage con debounce y aviso de "guardado".
- Exportar a HTML autocontenido con los estilos incrustados.

Sanea el HTML resultante: quiero pegar Markdown de internet sin comerme un XSS.

12. Pizarra colaborativa en tiempo real#

Dos pestañas, dos cursores y un lienzo compartido. Dibujar es la parte fácil. Lo difícil es que los trazos lleguen en orden y que la pizarra siga funcionando después de una desconexión.

Construye una pizarra colaborativa: canvas + WebSocket.

Front: dibujo a mano alzada, rectángulos, flechas, texto, zoom y paneo.
Back: servidor WebSocket que retransmite operaciones y guarda el historial.

Requisitos que importan:
- Cada operación lleva id de cliente y número de secuencia.
- Un cliente que se reconecta pide las operaciones que le faltan.
- Los cursores de los demás se ven, con su nombre y color.
- Undo/redo local que no deshace lo que dibujaron otros.

13. Generador de sitios estáticos propio#

Entra Markdown, sale HTML. Escribir uno te enseña más sobre Astro, Hugo o Eleventy que leerte su documentación entera, porque te vas encontrando con los mismos problemas que resolvieron ellos.

Escribe un generador de sitios estáticos desde cero, sin frameworks.

- Lee content/**/*.md con frontmatter YAML.
- Plantillas con layouts anidados y un motor de plantillas propio y sencillo
  (interpolación, condicionales y bucles: nada más).
- Genera índice, páginas de etiquetas, RSS y sitemap.
- Modo --watch con recarga en el navegador vía Server-Sent Events.

Objetivo de rendimiento: 500 páginas en menos de un segundo. Mídelo y enséñame
el número antes y después de optimizar.

14. Panel de métricas con gráficos hechos a mano#

Sin librerías de gráficos. SVG a pelo, escalas calculadas por ti y ejes que no se pisen. Se aprende más en una tarde con esto que en un mes copiando configuraciones de Chart.js.

Haz un panel con cuatro gráficos en SVG puro, sin librerías: líneas, barras
apiladas, dispersión y mapa de calor.

- Escalas lineales y temporales calculadas a mano, con ticks "bonitos"
  (algoritmo de Wilkinson o similar, explícalo en un comentario).
- Tooltip al pasar el ratón que encuentra el punto más cercano.
- Responsive de verdad: redibuja al cambiar el tamaño, sin deformar el texto.
- Legible en tema claro y oscuro, y con contraste AA en los textos.

Datos de ejemplo generados en un JSON aparte.

15. Cliente de correo estilo bandeja de entrada (solo interfaz)#

Un ejercicio puro de interfaz. Una lista virtualizada de 10.000 mensajes, navegación completa por teclado y estados de carga que no parezcan un parche. No hay backend, y no hace falta.

Construye la interfaz de un cliente de correo con datos falsos.

- Lista virtualizada de 10.000 mensajes a 60 fps (implementa la virtualización
  tú, sin librería).
- Navegación completa por teclado: j/k, Enter, e para archivar, / para buscar.
- Selección múltiple con Shift, acciones en lote y "deshacer" con temporizador.
- Estados vacíos, de carga (esqueletos) y de error diseñados, no improvisados.

Mide y enséñame el tiempo de renderizado al hacer scroll rápido.

16. Extensión de navegador que te quita distracciones#

Bloquea sitios en las franjas horarias que le digas, cuenta cuántas veces has intentado entrar y te enseña el número al final del día. Duele lo justo para que funcione.

Crea una extensión de navegador (Manifest V3) para bloquear sitios por horario.

- Lista de dominios con horarios por día de la semana.
- Página de bloqueo propia que muestra cuántos intentos llevas hoy.
- Modo "5 minutos de gracia" con un botón que solo funciona dos veces al día.
- Estadísticas semanales en el popup, con un gráfico simple.

Sin permisos innecesarios: justifica cada permiso del manifest en el README.

17. Constructor de formularios con arrastrar y soltar#

Arrastras campos, defines validaciones y exportas un JSON que otro sistema puede renderizar. Es bastante más difícil de lo que parece a primera vista, sobre todo la parte de las condiciones entre campos.

Haz un constructor visual de formularios.

- Paleta de campos (texto, número, select, fecha, archivo) que se arrastran
  a un lienzo y se reordenan.
- Panel de propiedades por campo: etiqueta, obligatorio, validación, condición
  de visibilidad basada en otro campo.
- Exporta e importa un esquema JSON, y renderiza el formulario en modo "vista previa".
- Accesible: el reordenado también funciona solo con teclado.

La lógica condicional debe soportar dependencias encadenadas sin bucles infinitos.

18. Reproductor de música con visualizador#

Web Audio API, un analizador de frecuencias y un canvas. El proyecto perfecto para una noche en la que no te apetece pensar en nada serio.

Construye un reproductor de audio web con visualizador.

- Cola de reproducción, arrastrar ficheros locales, atajos de teclado.
- Visualizador con AnalyserNode: barras de frecuencia y forma de onda,
  conmutables, dibujados en canvas con requestAnimationFrame.
- Ecualizador de 5 bandas con BiquadFilterNode y preajustes.
- La barra de progreso permite buscar arrastrando, incluso en pausa.

Cuida el rendimiento: el visualizador no debe cortar el audio en portátiles lentos.

19. Editor de imágenes en el navegador#

Recortar, rotar, filtros y ajustes, todo en el cliente y sin subir nada a ningún sitio. Que es, por cierto, lo que la gente quiere cuando busca «editor de imágenes online».

Crea un editor de imágenes que funcione 100% en el navegador.

- Recorte con proporciones fijas, rotación, volteo y redimensionado.
- Ajustes: brillo, contraste, saturación, temperatura; aplicados con WebGL
  o con filtros de canvas si WebGL no está disponible.
- Historial de ediciones no destructivo: cada ajuste es una capa reversible.
- Exporta a PNG/JPEG/WebP con control de calidad y muestra el peso resultante.

Las imágenes grandes (>20 MP) no deben bloquear la interfaz: usa un worker.

20. Framework de interfaz reactivo mínimo#

Unas doscientas líneas que te explican qué hacen React, Vue y Svelte por debajo. Señales, seguimiento de dependencias y un renderizador que solo toca lo que ha cambiado. Después de esto los frameworks se leen de otra manera.

Implementa un micro-framework reactivo, sin dependencias, en menos de 400 líneas.

1. Sistema de señales: signal(), computed(), effect() con seguimiento
   automático de dependencias.
2. Renderizador con plantillas de template literals y actualizaciones
   granulares (nada de re-renderizar el árbol entero).
3. Listas con clave y reconciliación mínima.
4. Un contador, una lista de tareas y un buscador con debounce como demos.

Al terminar, escríbeme un README comparando tu enfoque con el VDOM de React.