Roadmap frontend

• HTML semántico — imprescindible

  El elemento es la accesibilidad, el SEO y la mitad del CSS.

• CSS: cascada, herencia, especificidad — imprescindible

  Cuál de las tres está ganando.

• El modelo de caja y el flujo normal — imprescindible

  El layout gratis suele ser el que quieres.

• JavaScript del lenguaje, no del framework — imprescindible

  Ámbito, closures, prototipos, this, event loop.

• DevTools — imprescindible

  Mirar gana a adivinar.

• Git — imprescindible

  Ramas, rebase, leer un diff, deshacer sin pánico.

• El navegador y la red — imprescindible

  Qué es una petición y qué significa un código de estado.

• Terminal, lo justo — merece la pena

  Moverte, ejecutar cosas, leer un error.

• Cómo funciona un navegador — merece la pena

  Parsear, estilar, maquetar, pintar.

• Flexbox y Grid — imprescindible

  Grid para la página, flex para la fila.

• Custom properties — imprescindible

  Cascadean y heredan. El theming más barato que hay.

• Responsive sin breakpoints — merece la pena

  clamp(), min(), max(), tamaños intrínsecos.

• Container queries y :has() — merece la pena

  Componentes que responden a su espacio, no al viewport.

• Cascade layers — puede esperar

  Guerras de especificidad en bases grandes. En pequeñas, ceremonia.

• Animación y motion — merece la pena

  Transiciones, keyframes, prefers-reduced-motion.

• Tipografía en pantalla — merece la pena

  Escala, medida, interlineado, carga.

• Tokens y sistemas de diseño — merece la pena

  Decidir una vez y reutilizarlo.

• Modo oscuro sin duplicarlo todo — merece la pena

  Un juego de tokens, dos valores.

• Tailwind — merece la pena

  Rápido y sin discutir nombres. Aprende antes el CSS de debajo.

• Teclado — imprescindible

  Recorre con el tabulador lo que has hecho.

• Foco visible y orden de foco — imprescindible

  Quitar el outline sin sustituirlo es el bug clásico.

• Nombres accesibles y roles — imprescindible

  Un botón que no dice nada no se puede usar.

• ARIA — y cuándo no usarlo — merece la pena

  La primera regla es no usarlo.

• Un lector de pantalla, aunque sea media hora — merece la pena

  VoiceOver o NVDA, media hora.

• Contraste y color — imprescindible

  Nunca solo el color. Comprueba los ratios.

• Formularios que se puedan rellenar — imprescindible

  Etiquetas atadas a los campos, errores que digan qué falla.

• Movimiento que no haga daño — merece la pena

  prefers-reduced-motion. Una media query.

• Módulos ES — imprescindible

  import/export, y cómo los carga el navegador.

• Asincronía — imprescindible

  Promesas, async/await, cancelar.

• fetch, errores y estados — imprescindible

  Cargando, vacío, error y éxito son cuatro diseños.

• TypeScript — merece la pena

  Merece la pena solo por el editor.

• Tests donde duelen — merece la pena

  Prueba comportamiento que el usuario vea.

• Formularios y validación — imprescindible

  La plataforma valida mejor que tu regex.

• APIs del navegador que valen — merece la pena

  IntersectionObserver, ResizeObserver, AbortController.

• Estado: dónde vive — imprescindible

  URL, servidor, componente o store. Elegir mal son los bugs.

• Errores que el usuario ve — merece la pena

  Algo ha fallado no es un mensaje.

• Mejora progresiva — merece la pena

  Funciona sin JS, mejor con él.

Vue y su ecosistema

• Vue — imprescindible

  Cerca de la plataforma. Aprendes el modelo, no las manías.

• Nuxt — merece la pena

  Vue con rutas, datos y renderizado ya resueltos.

• Pinia — merece la pena

  Estado compartido, cuando pasar props deja de ser razonable.

Renderizado

• Renderizado: SSR, SSG, islas — merece la pena

  Saber cuándo no enviar JavaScript.

• Astro — merece la pena

  Cero JavaScript hasta que lo pides. Por defecto para contenido.

Otros caminos

• Svelte — puede esperar

  Merece un fin de semana. No tu primer año.

• Web components — puede esperar

  Cuando necesitas algo independiente del framework.

Bundlers

• Vite — imprescindible

  Dev server instantáneo y casi nada que configurar.

• esbuild — puede esperar

  La pieza rápida bajo la mitad de tus herramientas.

Gestión de paquetes

• Dependencias y semver — imprescindible

  Para qué sirve un lockfile. Añadir una es una decisión.

• npm — imprescindible

  El registro del que sale todo.

• pnpm — merece la pena

  Una copia en disco, y sin imports chapuceros.

Despliegue

• Vercel — merece la pena

  Push y está online, con previews por rama.

• Cloudflare — merece la pena

  El edge, y un plan gratuito raro de honesto.

• CI — merece la pena

  Ejecuta los tests antes de que lo haga producción.

Linters y formato

• ESLint — imprescindible

  Lo que un chequeador de tipos no ve.

• Prettier — merece la pena

  El formato deja de ser una discusión.

Testing

• Vitest — merece la pena

  Rápido, y ya entiende tu build.

• Playwright — merece la pena

  Maneja un navegador de verdad.

Alojamiento de repos

• GitHub — imprescindible

  Pull requests, issues, Actions. El perfil no.

• GitLab — merece la pena

  Lo que las empresas autoalojan. Merge requests, misma idea.

Entorno de ejecución

• Node — imprescindible

  Donde se ejecutan todas estas herramientas.

• Bun — puede esperar

  Entorno, bundler y test runner a la vez.

Documentar

• Storybook — merece la pena

  Componentes por separado, cada estado.

• Starlight — puede esperar

  Documentación sobre Astro, con búsqueda y navegación.

• Flutter — puede esperar

  Cuando la respuesta es una app móvil de verdad.

• Tauri — puede esperar

  Escritorio sin llevarte un navegador dentro.

• Electron — puede esperar

  Más pesado, en todas partes. VS Code y Slack son esto.

• WebAssembly — puede esperar

  Para la pieza rara que tiene que ir rápida.

• Core Web Vitals — imprescindible

  LCP, CLS, INP.

• Imágenes — imprescindible

  Formato, tamaño, carga diferida, reservar el hueco.

• Fuentes — merece la pena

  Subconjunto, preload, font-display.

• Menos JavaScript — merece la pena

  La optimización más barata es lo que no enviaste.

• Medir antes de tocar — imprescindible

  Sin un antes y un después no hay optimización.

• La ruta crítica de renderizado — merece la pena

  Qué bloquea el primer pintado.

• Caché y cabeceras — merece la pena

  La petición más rápida es la que no ocurre.

• Probar en un móvil de verdad — imprescindible

  Un Android de gama media con 4G, no tu portátil.

• HTTP: métodos, estados, cabeceras — imprescindible

  Métodos, códigos de estado, cabeceras. Todos los días.

• CORS — imprescindible

  Entenderlo una vez en vez de copiar una cabecera para siempre.

• XSS y CSP — imprescindible

  innerHTML con datos de otro es cómo empieza.

• Cookies, sesiones y tokens — merece la pena

  Dónde vive la sesión y quién puede leerla.

• DNS, dominios y hosting — merece la pena

  Cómo un nombre acaba siendo un servidor.

• Consumir APIs: REST y GraphQL — imprescindible

  Pedirle datos al servidor de otro.

• PWA — merece la pena

  Service worker más manifest.

• Supabase — merece la pena

  Base de datos, auth y almacenamiento sin equipo de backend.

• Leer un diseño como desarrollador — merece la pena

  El estado vacío, el nombre largo, el error.

• SEO y metadatos, la parte honesta — merece la pena

  Títulos, descripciones, estructura, sitemap.

• Analítica sin ser un cotilla — puede esperar

  Mide el producto, no a la persona.

• Internacionalización — puede esperar

  Fechas, números, plurales y alemán un 30% más largo.

• Claude Code — imprescindible

  En la terminal, sobre tu repo. Lee y ejecuta.

• Cursor — merece la pena

  El editor con el modelo dentro.

• Revisar lo que escribe — imprescindible

  Aquí está toda la habilidad.

• Saber cuándo no usarla — merece la pena

  Cuando estás aprendiendo, o cuando equivocarse sale caro.

• Leer la especificación — merece la pena

  MDN, y la especificación cuando MDN no llega.

• Depurar de verdad — imprescindible

  Hipótesis, prueba, y duda de ti antes que del navegador.

• Escribir para quien venga después — merece la pena

  Los comentarios dicen por qué. El qué ya lo dice el código.

• Revisar código sin ser un imbécil — merece la pena

  Y recibir una sin tomártelo a lo personal.

• Saber decir que no — merece la pena

  Decir que sí a todo no es ser senior.

• Estimar sin mentir — merece la pena

  Una estimación es una probabilidad, no una promesa.

• Saber cuándo está terminado — merece la pena

  Pulir lo que nadie pidió es evitar lo que sí pidieron.

• Refactorizar — merece la pena

  Cambiar la forma, no el comportamiento.