Glosario

730 términos

:focus-visibleCSS

Pseudo-clase que aplica estilos de foco SOLO cuando el navegador cree que ayudan (navegación por teclado), no al hacer clic con el ratón. La forma moderna de dar un buen anillo de foco sin molestar.

.gitignoreGit

Fichero de texto en la raíz de un repositorio que lista rutas y patrones que Git debe ignorar por completo: dependencias, secretos y ficheros generados.

.then / .catch / .finallyJavaScript

Métodos para consumir una promesa: .then(fn) se ejecuta cuando se cumple (recibe el valor), .catch(fn) si se rechaza (recibe el error) y .finally(fn) pase lo que pase. El código que sigue a la llamada no espera: la página no se bloquea.

.tsxReact

La extensión de un fichero que mezcla JSX (la sintaxis de interfaz) con TypeScript (los tipos). Es 'JSX dentro de TS': permite escribir componentes tipados en un mismo fichero. Todo el curso de React se escribe en .tsx.

AbortControllerJavaScript

Objeto para CANCELAR una operación en curso. Da una signal que pasas a fetch (fetch(url, { signal })); al llamar a controller.abort(), la petición se cancela y su promesa rechaza con un AbortError. Se usa para cancelar peticiones que ya no interesan (nueva búsqueda, componente desmontado).

AccesibilidadGeneral

Construir interfaces utilizables por el mayor número de personas posible, incluidas quienes usan tecnología asistiva (lector de pantalla, teclado). En HTML se trabaja con semántica, texto alternativo y ARIA; se desarrolla a fondo en el capítulo «Accesibilidad».

Acceso con corchetesJavaScript

Forma de leer una propiedad de objeto usando obj[expresion]. Imprescindible cuando el nombre de la propiedad viene de una variable.

Acceso indexado (T[K])TypeScript

Obtener el tipo de una propiedad por su clave: Heroe["rol"] da el tipo de rol. Combinado con keyof, Heroe[keyof Heroe] da la unión de los tipos de todos los valores. Con un array as const, typeof arr[number] deriva la unión de sus elementos.

Acción (action)React

El objeto que describe QUÉ ha pasado y que le pasas a dispatch. Lleva un campo (por convención type) y los datos necesarios. Tiparlo como una unión discriminada (Nivel 5) hace que el reducer sea exhaustivo y seguro.

actTesting

La función que envuelve las actualizaciones de estado de React en un test para que se procesen por completo (igual que en el navegador) antes de que afirmes sobre el resultado. Sin act, React avisa y puedes leer un estado viejo. render y user-event ya lo aplican por dentro; lo escribes tú al disparar una transición a mano en un test con renderHook: act(() => result.current.incrementar()).

AdapterGeneral

Patrón de diseño que traduce la interfaz de un sistema externo a la que espera tu código (por ejemplo, mapear la respuesta de una API a tu modelo interno) sin tener que cambiar ninguno de los dos lados.

addEventListenerJavaScript

Método que registra una función (handler) para que se ejecute cuando ocurra un evento (click, input, keydown…). Permite varios listeners en el mismo elemento sin que se pisen, y separa el comportamiento del marcado HTML.

Affected (tareas afectadas)Infraestructura

La capacidad de una herramienta de build para ejecutar tareas solo en los proyectos afectados por un cambio, comparando contra una referencia de git (`HEAD^1`, `main`). Si solo tocas `packages/core`, solo se reconstruyen `core` y los paquetes que lo consumen directa o transitivamente.

Agente (de IA)IA

Un asistente que no solo responde, sino que ejecuta acciones (editar ficheros, correr comandos) para cumplir una tarea, en pasos y bajo los permisos que le das.

Agile CoachTrabajo en la empresa

Perfil que ayuda a varios equipos (no solo uno) a mejorar su forma de trabajar en ágil. Va un paso por encima del Scrum Master, a escala de organización.

Aislamiento de testsTesting

Que cada test corra solo, con datos frescos, sin heredar ni dejar estado que afecte a otro. Sin aislamiento, un test contamina al siguiente (estado mutable compartido) y el orden empieza a importar: la receta de un test flaky. beforeEach —datos nuevos antes de cada test— o construir los datos dentro de cada test son las dos formas de lograrlo.

align-itemsCSS

En Flexbox, alinea los hijos en el eje cruzado (la altura, en una fila): stretch (por defecto), center, flex-start.

alt (texto alternativo)HTML

Atributo de <img> que describe lo que muestra la imagen. Si la imagen no carga, o el usuario usa un lector de pantalla, se lee en su lugar. Con alt="" vacío se declara que la imagen es decorativa y debe saltarse.

AlucinaciónIA

Cuando el modelo genera algo plausible pero falso (una función, una API o un dato que no existen) con total seguridad, porque genera lo más probable estadísticamente, no lo verdadero.

AnidamientoHTML

Meter unos elementos dentro de otros formando una jerarquía. Se cierran en orden inverso al que se abren, como muñecas rusas: el último en abrirse es el primero en cerrarse.

Animación (@keyframes)CSS

Una secuencia de estados definida con @keyframes (con from/to o porcentajes) que la propiedad animation reproduce. A diferencia de transition, que interpola entre dos estados solo cuando algo cambia, una animación puede tener varias etapas y reproducirse sola.

Animación al ritmo del scrollCSS

Técnica para ligar cualquier @keyframes al scroll que funciona en TODOS los navegadores: se pausa la animación (animation-play-state: paused) y se la 'rebobina' con animation-delay: calc(var(--scroll) * -1s), donde --scroll (de 0 a 1) lo actualiza una línea de JavaScript en el evento scroll. La alternativa universal a animation-timeline.

animation-timeline (scroll-driven)CSS

Ata el progreso de una animación a algo que no es el tiempo. Con animation-timeline: scroll(), la animación avanza según la posición de scroll de la página (0% arriba, 100% abajo). Es lo que permite una barra de progreso de lectura con CSS puro, sin JavaScript.

Anotación de tipoTypeScript

Escribir el tipo de forma explícita tras dos puntos: let nombre: string. Le dices a TypeScript qué esperas y él vigila que se cumpla. Si rompes la promesa, marca el error antes de ejecutar.

anyTypeScript

El tipo que apaga la comprobación: con any vale todo y TypeScript deja de protegerte. Cómodo y peligroso; casi siempre hay una opción mejor (empezando por unknown).

App shellLa web y el navegador

El esqueleto mínimo de la interfaz (el HTML, CSS y JS base, la cabecera, la estructura) que no cambia entre vistas. Al cachearlo con el service worker, la PWA arranca al instante y funciona offline aunque los datos se pidan después a la red.

aria-hiddenHTML

Atributo que oculta un elemento a la tecnología asistiva (aria-hidden="true") sin ocultarlo visualmente. Para decoración que ya está descrita en texto y que, leída, solo sería ruido.

aria-labelHTML

Atributo ARIA que da un nombre accesible a un elemento cuando no hay texto visible que lo nombre: un botón con solo un icono, una navegación que se distingue de otra. El lector de pantalla lo anuncia.

aria-labelledbyHTML

Atributo ARIA que da nombre accesible a un elemento tomándolo de otro de la página por su id: <section aria-labelledby="t"> usa el texto del <h2 id="t">. A diferencia de aria-label (texto escrito a mano), reutiliza un título que ya está visible.

Arquitectura hexagonalGeneral

Un estilo de arquitectura donde el núcleo de dominio (la lógica) no conoce el mundo exterior (React, la API, la BD): habla con él solo a través de PUERTOS (interfaces). Los ADAPTADORES implementan esos puertos. Las dependencias apuntan hacia adentro, así el dominio se puede probar y reusar sin arrastrar la UI ni la red.

Arrange-Act-Assert (AAA)Testing

El patrón en tres pasos de un buen test: Arrange (prepara los datos de entrada), Act (ejecuta la función bajo prueba) y Assert (afirma el resultado con expect). Seguir este orden hace que cualquier test se lea igual y se entienda de un vistazo.

ArrayJavaScript

Lista ordenada de valores accesible por índice numérico, declarada con corchetes: ["Tracer", "Mercy"].

Array de dependenciasReact

La lista [a, b] que pasas a useEffect como segundo argumento: el efecto se vuelve a ejecutar solo cuando alguno de esos valores cambia. [] = solo una vez al montar; sin array = en cada render. Omitir una dependencia que usas dentro provoca bugs de valores 'congelados'.

Array tipadoTypeScript

Un array cuyos elementos comparten tipo, declarado con tipo + corchetes: number[] (números), string[] (textos). TypeScript se queja si intentas meter un elemento de otro tipo.

Array.atJavaScript

Accede a un elemento por posición, como los corchetes, pero acepta índices negativos que cuentan desde el final: at(-1) es el último, at(-2) el penúltimo. Más legible que arr[arr.length - 1].

Array.findLastJavaScript

Como find, pero busca desde el final: devuelve el último elemento que cumple la condición (o undefined). Existe también findLastIndex para la posición.

Array.flatJavaScript

Aplana un array de arrays en uno solo. Por defecto un nivel ([[a],[b]] → [a, b]); con un argumento numérico, más niveles. Para mapear y aplanar a la vez está flatMap.

Array.flatMapJavaScript

Hace map y aplana un nivel en una sola pasada. Útil cuando cada elemento produce una lista: roster.flatMap(h => h.mapas) saca el array mapas de cada héroe y los reúne en una lista plana.

Arrow functionJavaScript

Sintaxis compacta para definir funciones: const f = (a, b) => a + b. Si el cuerpo es una sola expresión, las llaves y el return se pueden omitir. Es la forma estándar en 2026 para callbacks y transformaciones cortas.

article / section / divHTML

Tres contenedores con intenciones distintas: article para contenido autónomo que se entiende fuera de contexto; section para una agrupación temática con su encabezado; div para una caja sin significado, solo para enganchar estilos o layout.

Artifact (de CI)Infraestructura

Un fichero o carpeta que un job produce y guarda para descargarlo o pasarlo a otro job: el dist/ del build, un informe de cobertura, capturas de tests. Se suben con la action actions/upload-artifact.

as constTypeScript

Aserción que congela un literal, objeto o array a su tipo más estrecho y de solo lectura: ["Daño", "Tanque"] as const pasa de string[] a readonly ["Daño", "Tanque"]. Evita el widening y permite derivar uniones de literales de un array (con typeof y acceso indexado).

AserciónTesting

Cada comprobación concreta dentro de un test: la combinación de expect(valor) con un matcher, p. ej. expect(suma).toBe(4). Un test puede tener una o varias aserciones; si cualquiera falla, el test entero falla.

Asignación lógica (??=, ||=, &&=)JavaScript

Operadores que combinan una lógica con una asignación: a ??= b asigna b solo si a es null/undefined; a ||= b si a es falsy; a &&= b si a es truthy. Atajo para 'pon este valor por defecto si no hay nada'.

AsincroníaJavaScript

Cómo JavaScript maneja operaciones que tardan (temporizadores, red, ficheros) sin congelar la página: lanza la operación, sigue ejecutando el resto y reacciona cuando termina. Lo contrario de síncrono, donde cada línea espera a la anterior.

Asistente de códigoIA

Programa que integra un modelo de lenguaje en tu flujo de desarrollo para ayudarte a leer, escribir y revisar código. Claude Code es uno; los conceptos son transferibles a otros.

aspect-ratioCSS

Fija la proporción ancho/alto de una caja (aspect-ratio: 16 / 9) para que mantenga su forma a cualquier tamaño. Reserva el espacio de una imagen antes de que cargue y evita saltos de layout.

assignability (asignabilidad)TypeScript

Si un valor puede usarse donde se espera un tipo. La regla: es asignable si tiene AL MENOS los campos que el tipo exige, con tipos compatibles (por eso un objeto con campos de sobra encaja donde se pide menos). Excepción: el excess property check rechaza los campos sobrantes cuando asignas un objeto literal recién escrito directamente, como red contra erratas; ese control no salta si el objeto pasa antes por una variable.

async / awaitJavaScript

Azúcar sintáctico sobre las promesas para escribir asíncrono de arriba abajo. async marca una función (que SIEMPRE devuelve una promesa); await pausa esa función hasta que una promesa se resuelve y devuelve su valor. Los errores se capturan con try/catch.

Atajos de tecladoGeneral

Combinaciones de teclas que ejecutan una acción del editor sin tocar el ratón. Practicar los cinco que más usas hasta que salen solos cambia tu velocidad real.

AtributoHTML

Información extra dentro de la etiqueta de apertura, en forma nombre="valor": <html lang="es"> o <meta charset="utf-8">. Configura o describe el elemento.

auto-fill / auto-fitCSS

Palabras clave para repeat() que dejan al navegador decidir cuántas columnas caben: auto-fill mantiene los huecos vacíos; auto-fit los colapsa para que el contenido ocupe todo el ancho. La base de un grid responsive sin media queries.

autocomplete y aria-describedbyHTML

Atributos que mejoran un formulario: autocomplete sugiere valores ya conocidos (nombre, email) para rellenar más rápido; aria-describedby enlaza un campo con su texto de ayuda o de error para que el lector de pantalla lo lea.

Awaited<T>TypeScript

Utility type que desenvuelve una Promise y da el tipo de dentro: Awaited<Promise<Heroe>> es Heroe. Combinado con ReturnType (Awaited<ReturnType<typeof fn>>) saca el tipo que una función async resuelve de verdad.

axeTesting

El motor de reglas de accesibilidad más usado: inspecciona el DOM ya renderizado y lo compara con las reglas de la WCAG, devolviendo una lista de violaciones (imágenes sin alt, controles sin nombre, atributos aria inválidos…). Es el mismo motor que hay detrás de la extensión axe DevTools y de la auditoría de accesibilidad de Lighthouse. Detecta solo la parte comprobable por una máquina (en torno a un tercio de los problemas reales): es un suelo, no un techo.

BacklogTrabajo en la empresa

La lista priorizada de trabajo pendiente. El product backlog es todo lo que podría hacerse (lo ordena el PO); el sprint backlog es el subconjunto que el equipo se compromete a hacer en el sprint actual.

Barrel (fichero barril)JavaScript

Un index.js que re-exporta lo público de varios módulos para que quien los use importe de un único sitio (export { heroes } from './datos.js'). Patrón de organización: úsalo cuando simplifica de verdad, no por sistema.

bash, zsh y PowerShellGeneral

Las shells más comunes: bash y zsh en Linux y Mac (casi iguales para lo básico), PowerShell en Windows. Los comandos del día a día se parecen; las diferencias gordas llegan más adelante.

beforeEachTesting

Hook de Vitest que ejecuta una función ANTES de cada it del bloque. Se usa para dar a cada test datos frescos (un array nuevo, un objeto sin tocar) y que ningún test dependa de lo que dejó el anterior: la clave del aislamiento.

BigIntJavaScript

Un tipo numérico para enteros de tamaño ilimitado, más allá del límite seguro de los number normales (donde dos enteros grandes pueden colapsar en el mismo valor). Se escribe con una n al final (9007199254740993n) o, cuando llega como string de una API, con el constructor BigInt('...'). No mezcla con number en la misma operación. Útil para ids de 64 bits o contadores enormes.

Bivarianza y strictFunctionTypesTypeScript

strictFunctionTypes comprueba los parámetros de los TIPOS de función de forma contravariante (más segura). Pero los métodos declarados con sintaxis de método (m(x): void) quedan fuera: se comprueban de forma BIVARIANTE (aceptan ambas direcciones) por compatibilidad histórica, un agujero de seguridad que conviene conocer.

Bloque y en líneaCSS

Los dos comportamientos por defecto de un elemento. De bloque (div, p, h1, section, li): empieza en línea nueva y ocupa todo el ancho disponible, acepta width y height. En línea (a, strong, span, img): fluye dentro del texto y solo ocupa su contenido.

bodyHTML

La sección del documento con todo lo que se ve en la ventana: textos, imágenes, enlaces, botones. Es lo que el navegador pinta en la página.

booleanJavaScript

Tipo primitivo con solo dos valores posibles: true o false. Se usa para condiciones y estados binarios.

borderCSS

El borde que rodea el padding de una caja. Suma a su tamaño total, salvo con box-sizing: border-box.

Botones nativosHTML

Usar el elemento <button> real en vez de un <div> con onclick. El <button> ya es accesible: recibe foco, se activa con Enter y Espacio y el lector lo anuncia como botón. Replicar eso a mano es trabajo y bugs.

Box modelCSS

El modelo con el que el navegador calcula el espacio de cada elemento, en cuatro capas de dentro a fuera: content, padding, border y margin.

box-shadowCSS

Dibuja una sombra alrededor de una caja para darle profundidad: box-shadow: 0 2px 8px rgba(0,0,0,.1) son desplazamiento en X, en Y, desenfoque y color. Eleva una tarjeta sobre el fondo sin recurrir a un borde duro.

box-sizingCSS

Decide si width mide solo el contenido (content-box, por defecto) o incluye padding y borde (border-box). Se pone border-box en casi todos los proyectos para que los tamaños sean predecibles.

Branded / nominal typeTypeScript

Técnica para que dos tipos con la misma forma NO sean intercambiables, simulando tipado nominal sobre el estructural de TypeScript: se intersecta el tipo base con una marca única (string & { __brand: "UserId" }). Así un string normal no se cuela donde se espera un UserId. Útil en dominios donde dos ids o cantidades no deben mezclarse.

break y continueJavaScript

break abandona el bucle o switch por completo; continue salta el resto de la iteración actual y pasa a la siguiente.

Bucle forJavaScript

Bucle con inicialización, condición e incremento explícitos. for...of recorre los elementos de una lista sin necesitar índice.

Bucle whileJavaScript

Bucle que ejecuta su cuerpo mientras una condición sea verdadera. Útil cuando el número de iteraciones no se conoce de antemano.

BundlerTooling y bundlers

Herramienta que toma tu grafo de módulos (tu código más las dependencias) y produce pocos ficheros optimizados para el navegador: resuelve los imports (incluidos los 'pelados' por nombre), junta, minifica y compila lo que el navegador no entiende (TypeScript, JSX). Vite es el que usarás.

Caché de datos (TanStack Query)React

La capa de almacenamiento temporal que TanStack Query mantiene entre los componentes y el servidor. Los datos se identifican por su queryKey y se reutilizan mientras están frescos (staleTime). Evita peticiones repetidas cuando múltiples componentes piden los mismos datos.

Caché de dependencias (en CI)Infraestructura

Guardar entre ejecuciones lo que tarda en instalarse (el store de pnpm, node_modules) para no descargarlo entero en cada run. Acelera mucho el CI. Lo activa actions/setup-node con cache: o la action actions/cache.

Caché remotaInfraestructura

Caché de resultados de build almacenada en un servidor compartido entre máquinas y CI. Si otro desarrollador o un agente de CI ya ejecutó una tarea con los mismos inputs, tu máquina descarga el resultado en lugar de repetir el trabajo. Requiere configurar un proveedor (Vercel Remote Cache para Turbo, Nx Cloud para Nx, o un servidor propio).

Cadena de prototiposJavaScript

La secuencia de prototipos que JavaScript recorre al buscar una propiedad: si no está en el objeto, sube a su prototipo, y al prototipo de ese, hasta encontrarla o llegar a null. Explica de dónde sale toString(), cómo funciona la herencia con extends y por qué instanceof acierta.

call / apply / bindJavaScript

Métodos de Function.prototype para fijar this de forma explícita. call y apply ejecutan la función al momento (argumentos sueltos vs. en array); bind devuelve una función nueva con this bloqueado de forma permanente.

Call-siteJavaScript

El punto exacto del código donde se llama una función. El valor de this lo determina el call-site (cómo se llama), no el lugar donde la función está definida.

campo exports (package.json)Tooling y bundlers

El campo exports de package.json que declara qué se carga y por qué ruta: conditional exports (import/require/types/default), subpaths públicos y bloqueo de deep imports a ficheros internos.

Campos privados (#)JavaScript

Propiedades de una clase prefijadas con # que solo son accesibles desde dentro de la propia clase, garantizando que nadie las pise desde fuera.

CascadaCSS

La regla que resuelve conflictos cuando dos declaraciones CSS chocan: gana la más específica (clase > tipo) y, a igual especificidad, la última escrita. Es la «C» de CSS.

Caso límiteTesting

Una entrada en el extremo de lo posible: una lista vacía, un único elemento, el valor mínimo o máximo, un negativo, un duplicado. El caso típico casi siempre funciona; los bugs viven en los bordes, así que se prueban a propósito.

CD (entrega / despliegue continuo)Infraestructura

El paso siguiente a la integración continua: automatizar la publicación. La entrega continua deja el código siempre listo para desplegar; el despliegue continuo lo publica en cuanto pasa el CI. Es la parte CD del pipeline.

CDN (Content Delivery Network)Infraestructura

Una red de servidores repartidos por el mundo que guardan copias de tus ficheros estáticos y los sirven desde el más cercano al usuario. Reduce la latencia y, con los assets hasheados del build, permite una caché muy agresiva. Los hosts modernos (Vercel, Pages) sirven desde un CDN por defecto.

CHANGELOGInfraestructura

Registro de cambios por versión de un paquete. Changesets lo genera y actualiza automáticamente al ejecutar `changeset version`: cada changeset consumido se convierte en una entrada del CHANGELOG con el resumen que describiste al crearlo.

ChangesetsInfraestructura

Herramienta para versionar y publicar paquetes de un monorepo a partir de ficheros de intención (`.changeset/*.md`). Cada fichero declara qué paquete cambia, con qué bump de semver y por qué. Con `changeset version` se consumen esos ficheros: se suben las versiones, se actualiza el CHANGELOG y se reescriben las dependencias internas. Con `changeset publish` se publica al registry.

childrenReact

Una prop especial con el contenido que metes ENTRE las etiquetas de apertura y cierre de un componente: <Card>esto es children</Card>. Permite escribir componentes envoltorio reutilizables.

ChunkTooling y bundlers

Cada uno de los ficheros en que el bundler parte el resultado. En vez de un único bundle gigante, el code-splitting genera varios chunks (el inicial, los de cada ruta cargada bajo demanda, el de las dependencias) con un hash en el nombre para la caché.

clamp()CSS

Función CSS que da un valor fluido con topes: clamp(1rem, 2.5vw, 1.5rem) escala con la ventana pero nunca baja de 1rem ni sube de 1.5rem. Tipografía y espaciados que se adaptan sin media queries.

Clase (class)CSS

Atributo HTML reutilizable que actúa como gancho para el CSS. Varios elementos pueden compartir la misma clase; el selector de clase (.nombre) los estila a todos a la vez.

Clase (POO)JavaScript

Molde para crear objetos con datos y comportamiento compartidos. Se define con class y se instancia con new. No confundir con el atributo class de HTML/CSS.

classListJavaScript

API del DOM para manipular las clases CSS de un elemento: add, remove, toggle y contains. toggle alterna la clase sin necesidad de comprobar si ya existe.

Claude CodeIA

El asistente de programación con IA de Anthropic que trabaja sobre tu código dentro del editor o la terminal: lee tus ficheros, propone cambios concretos y ejecuta comandos, siempre bajo el permiso que le das.

CLAUDE.mdIA

Fichero de instrucciones permanentes que el asistente lee al arrancar en un proyecto: convenciones, stack y restricciones. Evita tener que repetirle lo mismo cada sesión.

Clean codeGeneral

Código escrito para LEERSE: nombres reveladores, funciones pequeñas que hacen una cosa, sin sorpresas. Se optimiza para el mantenimiento porque el código se lee mucho más de lo que se escribe.

Cliente y servidorLa web y el navegador

Los dos lados de la web: el cliente (tu navegador) pide; el servidor (otro ordenador a la escucha) responde. Hablan entre ellos por HTTP.

ClosureJavaScript

Una función que cierra sobre variables del scope donde fue creada, conservando acceso a ellas aunque esa función exterior ya haya terminado. Permite crear estado privado sin variables globales.

CLSLa web y el navegador

Cumulative Layout Shift: cuánto se mueve el contenido solo, sin que el usuario lo provoque (el salto al cargar una imagen sin espacio reservado). Mide la estabilidad visual. Objetivo: por debajo de 0,1. Se evita reservando el espacio de los elementos.

Cobertura de códigoTesting

El porcentaje de tu código que los tests llegan a ejecutar (líneas, ramas, funciones). Sirve para ver qué NO está probado, pero tiene trampa: 100% de líneas ejecutadas no significa bien testeado —se puede ejecutar una línea sin afirmar nada sobre su resultado—.

Cobertura de ramasTesting

La parte de la cobertura que mide qué RAMAS de decisión (las dos salidas de un if/else, cada lado de un &&, cada case) ejecutan los tests. Es la métrica que más delata huecos: puedes tener el 100% de líneas y un 50% de ramas si solo pruebas el camino feliz y nunca el else —y es justo en esa rama sin probar donde se esconde el bug—.

Code review (revisión de código)Trabajo en la empresa

Que otra persona del equipo revise tu código antes de integrarlo, normalmente en un Pull Request: caza errores, propone mejoras y reparte conocimiento. La regla de oro: se critica el código, no a la persona, con comentarios concretos y accionables.

Code smellGeneral

Señal en el código de que algo no está bien estructurado (función enorme, nombres opacos, duplicación, números mágicos). No es un bug: es un aviso de que conviene refactorizar.

Code splittingTooling y bundlers

Partir el bundle en trozos (chunks) que se cargan cuando hacen falta, en vez de un único paquete que el usuario descarga entero al arrancar. Se consigue con import() dinámico (y React.lazy + Suspense para componentes). Reduce el JavaScript inicial y mejora el arranque.

Códigos de estadoLa web y el navegador

El número que resume el resultado de una petición HTTP: 2xx fue bien (200), 3xx redirección, 4xx error del cliente (404), 5xx error del servidor (500).

Coerción de tiposJavaScript

Conversión implícita que JavaScript realiza cuando los operandos de una operación son de tipos distintos. Por ejemplo, '5' + 3 produce '53' porque + con un string convierte el otro operando a string.

Cola de microtareasJavaScript

La cola donde esperan las continuaciones de las promesas (.then, lo que sigue a un await) y lo que encolas con queueMicrotask. Tiene PRIORIDAD: el event loop la drena entera antes de tocar una sola macrotarea (setTimeout). Microtareas siempre antes que macrotareas.

Cola de tareas (macrotareas)JavaScript

La cola donde esperan los callbacks de setTimeout, setInterval y los eventos hasta que la pila se vacía. El event loop atiende una macrotarea solo DESPUÉS de haber drenado todas las microtareas: por eso un setTimeout(fn, 0) corre tras lo síncrono y tras las promesas.

ColorCSS

Valor CSS que describe el color de un elemento. Se expresa como nombre (red), hexadecimal (#b8336a), rgb()/rgba() (con opacidad) o hsl() (tono/saturación/luz).

Comando slashIA

Orden que se invoca escribiendo / seguido de un nombre en el asistente (por ejemplo /help o /commit) para lanzar una acción o un flujo predefinido.

Comandos de navegaciónGeneral

Las órdenes para moverte por las carpetas desde la terminal: pwd (dónde estoy), ls (qué hay aquí) y cd (entrar o salir de una carpeta).

Combinador CSSCSS

Símbolo entre dos selectores que describe su relación. El espacio (descendiente) selecciona cualquier elemento dentro del padre, a cualquier nivel; el > (hijo directo) solo los hijos inmediatos.

commitGit

Una foto del proyecto guardada en el historial local, con un mensaje que describe el cambio. Vive en tu máquina hasta que haces push.

CommonJS (CJS)JavaScript

El sistema de módulos histórico de Node: require() y module.exports. Dinámico y síncrono; al hacer require obtienes una copia del valor exportado en ese instante, no un enlace vivo.

ComponenteReact

La pieza básica de React: una función que empieza por mayúscula y devuelve JSX (la descripción de un trozo de interfaz). Se combinan unos dentro de otros para formar la pantalla.

Componente compuestoReact

Patrón en el que un componente se reparte en varias piezas que trabajan juntas: un contenedor que guarda el estado compartido y lo expone por context, y unas piezas (como Tabs/Tab/TabPanel) que el consumidor compone libremente. Mantiene la API pública pequeña mientras la flexibilidad crece, en vez de acumular props de configuración.

Componente controladoReact

Un input cuyo valor manda React: value={estado} fija lo que se ve y onChange actualiza el estado en cada tecla. React es la única fuente de verdad del campo; si pones value sin onChange, el input queda de solo lectura.

Composición de componentesReact

Construir interfaces metiendo unos componentes dentro de otros, como piezas de Lego. Un componente grande se arma combinando otros más pequeños, cada uno con una sola responsabilidad.

Comunicación asíncronaTrabajo en la empresa

Comunicarse por escrito (mensajes, tickets, documentos) de forma que el otro lo lea cuando pueda, sin necesidad de coincidir en el tiempo. Es la base del trabajo remoto: bien hecha, un mensaje completo evita tres idas y vueltas.

Conditional typeTypeScript

El if/else de los tipos: T extends U ? X : Y da el tipo X si T es asignable a U, y Y si no. Es el tercer uso de extends (además de heredar interfaces y acotar genéricos). Todo se resuelve en compilación.

Conflicto de mergeGit

Cuando dos ramas cambian las mismas líneas y Git no puede decidir cuál vale. Marca el fichero con <<<<<<< ======= >>>>>>> y tú eliges el resultado a mano antes de seguir.

ConfluenceTrabajo en la empresa

La herramienta de documentación de Atlassian, hermana de Jira: specs, decisiones, runbooks y actas. El sitio donde vive lo que el equipo necesita recordar, separado del trabajo en curso.

console.logJavaScript

Función para mostrar valores en la consola del navegador o de Node.js. Es la herramienta básica para inspeccionar el estado del programa.

constJavaScript

Palabra clave para declarar una variable cuyo valor no puede reasignarse. Es la elección por defecto en JavaScript moderno.

Constraint (restricción de tipo)TypeScript

Una condición que acota un parámetro de tipo: <T extends { victorias: number }> exige que T tenga al menos ese campo. Permite acceder a propiedades del tipo dentro de la función sin perder la generalidad.

constructorJavaScript

Método especial de una clase que se ejecuta al crear una instancia con new. Recibe los argumentos e inicializa las propiedades con this.

content (caja)CSS

El área interior de una caja donde va el texto o los elementos hijos. Por defecto, width y height miden solo esta zona.

ContextReact

Un canal creado con createContext que permite poner un valor disponible para todos los descendientes de un Provider, sin tener que pasarlo por props nivel a nivel. Resuelve el prop drilling cuando un dato necesita llegar hondo en el árbol.

Contexto del promptIA

La información que incluyes en la petición (ficheros, datos, ejemplos, restricciones) para que el modelo trabaje sobre tu caso real y no sobre suposiciones.

Contraste de colorGeneral

La diferencia de luminosidad entre un texto y su fondo, como un ratio (4.5:1, 3:1…). Un contraste bajo es ilegible para mucha gente. WCAG pide al menos 4.5:1 para texto normal y 3:1 para texto grande.

Copia profunda (deep)JavaScript

Una copia que duplica TODOS los niveles, también lo anidado, sin referencias compartidas con el original. Mutar la copia nunca toca al original. Se consigue con structuredClone(obj).

Copia superficial (shallow)JavaScript

Una copia que duplica solo el primer nivel de un objeto o array. Lo anidado (objetos/arrays dentro) NO se duplica: se comparte por referencia, así que mutarlo afecta también al original. El spread { ...obj } y Object.assign hacen copia superficial.

Core Web VitalsLa web y el navegador

Las tres métricas con las que Google mide la experiencia de una página: LCP (carga), CLS (estabilidad visual) e INP (respuesta a las interacciones). Cada una mide algo distinto y se miran por separado: una página puede ir bien en una y fatal en otra.

CorepackTooling y bundlers

Herramienta de Node que fija qué gestor de paquetes (y versión) usa un proyecto, declarado en el campo packageManager del package.json. Así todo el equipo usa el mismo, sin instalarlo a mano.

CORSGeneral

Mecanismo del navegador que controla las peticiones entre orígenes distintos (tu web pidiendo a una API de otro dominio). Por seguridad, el navegador bloquea la respuesta a menos que la API responda con la cabecera Access-Control-Allow-Origin permitiendo tu origen: la petición llega al servidor, pero el navegador te esconde la respuesta. No se arregla desde el frontend —lo permite la API, o enrutas por un backend propio—. Por eso un fetch funciona con curl y falla en el navegador.

Coste por tokenIA

El precio de usar un modelo se mide en tokens de entrada y de salida: cuanto más contexto le das y más larga es la respuesta, más cuesta. Por eso conviene dar el contexto justo y no pegar el repositorio entero.

Crear y borrar ficherosGeneral

Las órdenes básicas para gestionar ficheros y carpetas desde la terminal: mkdir (crear carpeta), touch (crear fichero), mv (mover o renombrar) y rm (borrar, sin papelera: con cuidado).

createElementJavaScript

Método de document que crea un nuevo nodo HTML en memoria, sin añadirlo aún al árbol. Se monta con append, prepend, before o after. Usar createElement + textContent es más seguro que innerHTML para datos del usuario.

createRootReact

La función de react-dom que monta tu app de React dentro de un nodo del DOM. createRoot(nodo) crea la raíz y .render(<App />) pinta tu componente dentro. Es el puente entre tu código React y la página.

Criterios de aceptaciónTrabajo en la empresa

Las condiciones verificables que debe cumplir una user story para considerarse hecha. Definen el límite del trabajo y permiten saber, sin ambigüedad, si está terminada.

CSR (renderizado en cliente)React

El modelo de una SPA: el servidor envía un index.html casi vacío y un bundle de JavaScript; el navegador ejecuta el JS y es React quien construye la interfaz en el cliente. Rápido de servir y barato de hospedar, pero el HTML inicial no tiene contenido.

CSSCSS

Cascading Style Sheets: el lenguaje que describe el aspecto de una página (colores, tamaños, tipografía, posición). Acompaña al HTML, que describe la estructura, pero con responsabilidades separadas.

CSS GridCSS

Modelo de layout para organizar elementos en DOS dimensiones (filas y columnas a la vez). Se activa con display: grid en el contenedor. Donde Flexbox piensa en una línea, Grid piensa en una cuadrícula.

CSSOMLa web y el navegador

El árbol equivalente al DOM pero para los estilos: el navegador procesa todo el CSS y construye un mapa de qué reglas se aplican a cada elemento.

Custom hookReact

Una función propia que empieza por 'use' y usa otros hooks dentro para empaquetar y reutilizar lógica entre componentes. React y el linter reconocen el prefijo 'use' y aplican las reglas de los hooks; sin ese prefijo, la red de seguridad desaparece.

Custom properties (variables CSS)CSS

Variables CSS: valores con nombre (--acento: #b8336a) definidos normalmente en :root y reutilizados con var(--acento). Una sola fuente de verdad: cambias el valor en un sitio y se actualiza en toda la hoja.

Daily (stand-up)Trabajo en la empresa

Reunión diaria corta (timeboxed, ~15 min) del equipo para sincronizarse y detectar bloqueos. Es para el equipo, no un parte de estado para el manager.

dangerouslySetInnerHTMLReact

Prop de React que inserta una cadena como HTML CRUDO en un elemento (recibe { __html: cadena }), saltándose el escapado automático que JSX aplica a todo lo que va entre llaves. Su nombre avisa del riesgo: si esa cadena incluye datos no confiables, abre la puerta al XSS. Úsalo solo con HTML que generas tú, o que has saneado antes (p. ej. con DOMPurify).

Dashboard (panel)Trabajo en la empresa

Una pantalla configurable en Jira que reúne métricas y vistas (tickets abiertos, burndown, trabajo por persona) de un vistazo. Útil para seguir el estado sin abrir mil tickets.

DateJavaScript

El objeto que representa un instante en JavaScript. Se crea con la fecha actual (new Date()), desde un texto ISO (new Date('2024-03-15')) o con números (new Date(2024, 2, 15)). Su trampa clásica: al construirlo con números, el MES es 0-based (enero = 0, marzo = 2). Para mostrar una fecha no la montes a mano: usa Intl.

DDD (Domain-Driven Design)General

Organizar el código alrededor del DOMINIO del negocio (equipos, héroes, partidas) en lugar de por capas técnicas (todos los componentes juntos, todos los servicios juntos). En la práctica: carpetas por funcionalidad/dominio, cada una con su UI, su lógica y sus tipos, en vez de un cajón por tipo de fichero.

Decision log / ADRTrabajo en la empresa

Un registro de las decisiones importantes y su porqué (qué se decidió, qué alternativas había, por qué esta). Evita rehacer el mismo debate, o deshacer la decisión sin saber el motivo, seis meses después.

Declaration merging y .d.tsTypeScript

Dos declaraciones con el mismo nombre (p. ej. dos interfaces) se fusionan en una sola. Con la palabra clave declare y los ficheros .d.ts se describen tipos sin implementación, para tipar librerías que no traen los suyos o ampliar tipos existentes (augmentation).

Declarativo (vs imperativo)React

Dos formas de programar la interfaz. Imperativo: das los pasos para cambiar el DOM ('crea este nodo, cámbiale el texto'), como en el Nivel 2. Declarativo: describes el resultado que quieres y React calcula y aplica los cambios.

defer y asyncLa web y el navegador

Dos atributos de <script> que evitan que cargar JavaScript bloquee el pintado: async lo ejecuta en cuanto llega; defer espera a que el HTML esté listo y respeta el orden de los scripts.

Definition of Done (DoD)Trabajo en la empresa

El acuerdo compartido del equipo sobre qué significa que algo está 'terminado' (tests, revisión, desplegado…). Aplica a TODO el trabajo; los criterios de aceptación son específicos de una historia.

Degradado (gradient)CSS

Una transición suave entre colores que se usa como fondo: background: linear-gradient(135deg, #b8336a, #1c1b22). No es un color plano ni una foto: lo genera el navegador, escala sin perder calidad y pesa cero.

Delegación de eventosJavaScript

Patrón que coloca un único addEventListener en un elemento padre en lugar de uno por cada hijo. Funciona gracias al bubbling: el clic en un hijo sube por el árbol hasta el padre. event.target.closest() identifica qué hijo fue pulsado.

Dependencias transitivasTooling y bundlers

Las dependencias de tus dependencias. Tú instalas A; A necesita B y C; B y C son transitivas. Por eso node_modules tiene cientos de paquetes aunque tú solo pidieras unos pocos.

Deploy (despliegue)Infraestructura

Publicar tu aplicación en un servidor accesible por internet. Para una SPA es subir el dist/ del build a un host que lo sirva por HTTP; a partir de ese momento cualquiera con la URL puede usarla.

describeTesting

Función de Vitest que AGRUPA varios tests relacionados bajo un título común. No comprueba nada por sí misma: organiza. En la salida, su título encabeza los casos que contiene, de modo que el informe se lee como un índice del comportamiento.

Design tokensCSS

Los valores de diseño de un producto (colores, espaciados, tamaños, radios) guardados como variables con nombres que describen su función. Son la base de un sistema de diseño consistente y mantenible.

Desigualdad (!== y !=)JavaScript

Operadores que comprueban que dos valores NO son iguales. !== es la versión estricta (compara valor y tipo, sin conversión) y es la recomendada; != convierte tipos antes de comparar, con las mismas sorpresas que ==. Son el negativo de === y ==.

DestructuringJavaScript

Sintaxis para desempaquetar valores de un objeto o un array y meterlos en variables sueltas, de una sola pasada. const { nombre } = heroe equivale a const nombre = heroe.nombre, pero más legible. Es la base de cómo React recibe props y devuelve estado.

Destructuring anidadoJavaScript

Desempaquetar en profundidad replicando la forma del objeto a la izquierda del =: const { stats: { rango } } = heroe baja un nivel para sacar rango de stats. El nombre intermedio (stats) no queda como variable: solo es el camino. Combínalo con = {} para no reventar si el objeto anidado falta.

Destructuring de arraysJavaScript

Desempaquetar elementos de un array por POSICIÓN: const [primero, segundo] = lista. El primer nombre recoge el índice 0, el segundo el 1. Se puede saltar una posición dejando un hueco con una coma: const [, segundo] = lista.

Destructuring de objetosJavaScript

Desempaquetar propiedades de un objeto por el NOMBRE de su clave: const { nombre, rol } = heroe crea las variables nombre y rol con esos campos. El orden dentro de las llaves no importa; se empareja por nombre.

Destructuring en parámetrosJavaScript

Desempaquetar un objeto (o array) directamente en la firma de una función: function fichaHeroe({ nombre, rol }) {}. La firma declara qué campos usa y el cuerpo queda limpio, sin repetir heroe. Es el patrón con que React recibe las props.

Determinismo (en tests)Testing

La propiedad de que un test dé SIEMPRE el mismo resultado con la misma entrada, sin depender del orden, del reloj, del azar ni de la red. Es lo contrario de flaky. Se consigue aislando cada test (datos frescos) e inyectando lo que varía —el reloj, un valor aleatorio— en vez de leerlo del entorno.

Deuda técnicaTrabajo en la empresa

Lo que cuesta de más en el futuro por una solución rápida o poco cuidada de hoy. Como una deuda, tiene intereses: cada cambio sobre código apresurado tarda más. A veces tomarla es correcto (una fecha, un prototipo); el problema es no devolverla nunca.

Difusión de responsabilidadTrabajo en la empresa

Cuando algo es de todos y por tanto de nadie: como nadie se siente el dueño, un problema (un bug en producción, una tarea entre dos tickets) rebota entre la gente y no lo arregla ninguno. El antídoto es que alguien se haga dueño.

dispatchReact

La función que devuelve useReducer para DISPARAR una acción: dispatch({ type: 'añadir', hero }). No cambias el estado a mano: le dices al reducer qué ha pasado y el reducer decide el estado nuevo.

displayCSS

La propiedad que decide cómo se comporta una caja en el layout: block (apila y ocupa el ancho), inline (fluye en la línea), inline-block (fluye pero acepta tamaño), none (la quita del flujo y del render). Flexbox y Grid también se activan como valores de display en el contenedor.

Distributividad (conditional types)TypeScript

Cuando un conditional type recibe una UNIÓN en un parámetro de tipo desnudo, se evalúa para cada miembro por separado y luego se reúnen los resultados. Los miembros que caen en la rama : never desaparecen (T | never = T), lo que permite filtrar uniones. Es el mecanismo interno de Exclude y Extract.

DNSLa web y el navegador

Domain Name System: la guía telefónica que traduce un nombre de dominio (teambuilder.app) a la dirección IP del servidor que hay que llamar.

Doble de testTesting

Cualquier objeto falso que sustituye a una dependencia real en un test (la red, el reloj, otra función), para que sea rápido, determinista y bajo tu control. La familia: stub (da respuestas preparadas), spy (registra cómo se le llamó), mock (espía con expectativas) y fake (implementación ligera que funciona de verdad).

doctypeHTML

La primera línea de un documento HTML: <!doctype html>. Le dice al navegador que interprete la página con el modo estándar moderno, no con un modo antiguo de compatibilidad.

DOMLa web y el navegador

El árbol de objetos que el navegador construye a partir del HTML. Cada etiqueta se convierte en un nodo; es la representación viva de la página que el JavaScript puede leer y modificar.

DRYGeneral

Don't Repeat Yourself: cada pieza de conocimiento vive en un solo sitio; la duplicación se extrae. Con matiz: una abstracción equivocada (DRY prematuro) es peor que un poco de duplicación, porque acopla cosas que en realidad cambian por separado.

dual package hazardTooling y bundlers

El fallo silencioso de publicar un paquete con builds CJS y ESM a la vez: el mismo módulo puede cargarse dos veces (una por cada sistema), rompiendo singletons e instanceof porque hay dos copias distintas del código.

Ecosistema (de IA)IA

El conjunto de piezas (instrucciones, skills, MCPs, memorias) que configuras para que el asistente conozca tu proyecto y tu forma de trabajar: un compañero a medida en lugar de un chatbot genérico.

Efecto secundarioJavaScript

Todo lo que una función hace además de devolver un valor: mutar sus argumentos o una variable de fuera, tocar el DOM, escribir en disco, llamar a la red. Una función sin efectos secundarios (pura) es más fácil de razonar y de testear.

Efecto secundario (en React)React

Cualquier cosa que un componente hace ADEMÁS de devolver JSX y que toca el mundo de fuera: una petición de red, un temporizador, escribir en el DOM o en localStorage. React los aísla en useEffect para controlar cuándo ocurren.

ElementoHTML

Una pieza completa de la página: la etiqueta de apertura, el contenido y la de cierre, todo junto (<p>Hola</p>). Es la unidad con la que se construye el HTML.

Encabezados (h1–h6)HTML

Las seis etiquetas de titular, de <h1> (el más importante) a <h6>. Marcan la jerarquía del contenido, como el índice de un documento. No se eligen por tamaño —eso es CSS— sino por su lugar en la estructura: un solo <h1> por página y debajo h2, h3… anidados con sentido.

Encadenar métodosJavaScript

Aplicar varios métodos de array seguidos (filter → map → sort). Como cada uno devuelve un array nuevo, se leen de arriba abajo como una receta.

Énfasis (strong / em)HTML

<strong> marca texto de fuerte importancia (se ve en negrita) y <em> marca énfasis (se ve en cursiva). Importan por su significado, no por su aspecto: un lector de pantalla los entona distinto. Sus parientes solo visuales, <b> e <i>, cambian el aspecto sin aportar significado.

Enlace (a / href)HTML

El elemento <a>, que conecta una página con otra. La dirección de destino va en su atributo href; con target="_blank" se abre en una pestaña nueva. Es lo que convierte páginas sueltas en una web: la W de WWW.

enlaces vivos (live bindings)JavaScript

En ESM, lo que importas es una referencia viva al binding del módulo, no una copia: si el módulo reasigna la variable exportada, tu import ve el nuevo valor. CommonJS no hace esto (copia el valor al hacer require).

Entidades HTMLHTML

Códigos para escribir caracteres que en HTML tienen un significado especial o no están a mano: &lt; para «<», &gt; para «>», &amp; para «&» y &nbsp; para un espacio que no se parte de línea. Empiezan por & y terminan en ;.

enumTypeScript

Construcción de TypeScript para agrupar valores con nombre bajo un tipo. A diferencia de los tipos (que desaparecen al compilar), un enum genera código en el bundle final. En TypeScript moderno se prefiere la unión de literales ("Daño" | "Tanque" | "Apoyo"), o un objeto con as const cuando además se necesitan los valores en runtime, porque no añaden peso y sus valores son los reales que viajan por la API.

Epic (épica)Trabajo en la empresa

Un contenedor grande de trabajo que agrupa varias historias relacionadas hacia un objetivo común. Demasiado grande para un solo sprint: se entrega a base de partirlo en stories.

Error boundaryReact

Componente que envuelve un trozo del árbol, captura los errores que se lanzan al renderizarlo y muestra un fallback en lugar de dejar que tiren la app entera. Es la pareja de Suspense (que cubre la carga) para el caso del fallo. En la práctica se usa <ErrorBoundary> de la librería react-error-boundary; solo atrapa errores de render, no de event handlers ni de código asíncrono.

Error personalizadoJavaScript

Un tipo de error propio creado heredando de Error (class ErrorDeValidacion extends Error), con super(mensaje) en el constructor y campos extra. Lleva tipo y datos propios, así quien lo captura puede distinguirlo con instanceof y reaccionar distinto según el caso.

esbuildTooling y bundlers

Bundler/transpilador escrito en Go, muy rápido. Vite lo usó durante años para el pre-bundle y la transformación en desarrollo (antes de unificar en Rolldown en Vite 8). Lo verás citado en tutoriales y configs anteriores.

Escapar HTMLJavaScript

Convertir los caracteres que el navegador interpretaría como HTML (< > & y las comillas) en sus entidades inofensivas (< pasa a &lt;), para que un dato se muestre como texto y no se ejecute como marcado. Es la defensa contra el XSS al construir HTML con datos del usuario.

ESLintTooling y bundlers

Un linter: analiza tu código mientras escribes buscando errores reales y malos patrones (variables sin usar, imports rotos, comparaciones siempre verdaderas). No da formato; encuentra problemas de lógica y calidad.

ESM (ECMAScript Modules)JavaScript

El sistema de módulos estándar de JavaScript: import/export. Estático (los imports se resuelven antes de ejecutar), asíncrono y con enlaces vivos a lo exportado. Permite tree-shaking.

Estado (state)React

Los datos que un componente guarda y que pueden cambiar con el tiempo: lo que el usuario escribe, un filtro activo, un contador. Cuando el estado cambia (con su setter), React vuelve a renderizar el componente con el valor nuevo.

Estado globalReact

Estado que vive fuera del árbol de componentes y que cualquier parte de la app puede leer y mutar sin pasar props ni usar un Provider. Útil cuando muchos componentes lejanos comparten y mutan el mismo dato; en la mayoría de apps, el estado local y el context bastan.

Estado vacío (empty state)React

Lo que pinta la interfaz cuando no hay datos que mostrar (lista vacía, sin resultados, sin conexión). Un estado vacío claro evita que el usuario confunda 'no hay datos' con un error o una carga infinita.

Estrategia de caché (service worker)La web y el navegador

La regla con la que un service worker decide si responder a cada petición desde la caché o desde la red. Las clásicas: cache-first (primero la caché, ideal para el app-shell), network-first (primero la red, ideal para datos frescos) y stale-while-revalidate (responde de la caché y actualiza por detrás).

Estructura de carpetasGeneral

Organización de los ficheros de un proyecto en carpetas con un criterio claro (por tipo: css/, js/, assets/; o por funcionalidad). Un buen árbol hace evidente qué hay y dónde sin abrir los ficheros.

Etiqueta (tag)HTML

La marca entre ángulos que delimita un trozo de contenido: <p> lo abre, </p> lo cierra. El navegador no las muestra; las usa para saber qué es cada cosa.

Event loopJavaScript

El mecanismo que permite a JavaScript (un solo hilo) no bloquearse: cuando la pila de llamadas se vacía, coge la siguiente tarea de la cola y la mete en la pila. Drena primero TODAS las microtareas (promesas) y solo entonces una macrotarea (timers). Explica en qué orden corren las cosas.

Eventos en ReactReact

La forma de reaccionar a lo que hace el usuario: onClick, onChange, onSubmit. Reciben la FUNCIÓN a ejecutar (onClick={manejar}), no su llamada (onClick={manejar()}), que se ejecutaría al renderizar en vez de al hacer clic.

every()JavaScript

Devuelve true si TODOS los elementos del array cumplen la condición.

Exclude<T, U>TypeScript

Utility type que filtra una unión: devuelve los miembros de T que NO encajan en U. Exclude<"Daño" | "Tanque" | "Apoyo", "Apoyo"> es "Daño" | "Tanque". Su complementario es Extract.

expectTesting

Función con la que afirmas el resultado esperado: recibe el valor real y, encadenando un matcher (toBe, toEqual...), declara qué debería cumplirse. Si no se cumple, lanza un error y el test se pone en rojo. Es el corazón de toda comprobación.

Export defaultJavaScript

El export que representa la pieza principal de un módulo. Como mucho UNO por fichero. Se importa sin llaves y quien lo importa elige el nombre local, porque el default no tiene un nombre fijo que respetar.

Export nombradoJavaScript

export delante de una declaración hace pública esa variable o función con SU nombre: export const heroes = [...]. Un módulo puede tener muchos. Se importan con llaves y el nombre debe coincidir (o renombrarse con as).

Expresión en JSX ({})React

Un trozo de JavaScript metido entre llaves {} dentro del JSX. React evalúa la expresión y coloca su resultado en la interfaz: {hero.nombre}, {victorias / partidas}, {activo ? 'sí' : 'no'}. Solo admite expresiones (que devuelven un valor), no sentencias como if o for.

Expresión regular (regex)JavaScript

Un patrón que describe una forma de texto, escrito entre barras (/^OW-[A-Z]+-\d{3}$/). Sirve para validar formatos y extraer trozos: con .test() preguntas si un texto encaja (true/false), y con grupos —partes entre paréntesis, opcionalmente nombradas (?<rol>...)— capturas lo que casa. Las flags g (global) e i (ignora mayúsculas) cambian cómo busca.

extends (interface)TypeScript

Permite que una interface herede todos los campos de otra y añada los suyos propios. Un objeto del tipo extendido cumple también el tipo base, pero no al revés.

Extensión (de editor)General

Un complemento que añade capacidades a VSCode: soporte para un lenguaje, integración con una herramienta o ayudas visuales. Instalas solo las que resuelven un problema que ya tienes.

Extract<T, U>TypeScript

Utility type que filtra una unión: se queda SOLO con los miembros de T que encajan en U (lo contrario de Exclude). Extract<"Daño" | "Tanque" | "Apoyo", "Daño" | "Tanque"> es "Daño" | "Tanque".

FactoryGeneral

Patrón de diseño que centraliza la creación de objetos en una función: en vez de construir a mano el mismo objeto por todo el código, una factory decide qué crear según los datos. Desacopla a quien usa el objeto de su forma o clase concreta.

FakeTesting

Un doble que es una implementación LIGERA pero que funciona de verdad, no una respuesta fija. El ejemplo típico es un repositorio en memoria que sustituye a la base de datos: tiene lógica real (guarda, busca), pero sin la dependencia pesada. Conecta con el Repository: una interfaz te deja meter un fake en el test.

Fecha de corteIA

La fecha hasta la que el modelo vio datos al entrenarse: no conoce nada posterior salvo que se lo des tú en el contexto de la conversación.

Feedback con SBITrabajo en la empresa

Un modelo para dar feedback concreto y no acusatorio: describe la Situación, el Comportamiento observable y su Impacto, en vez de etiquetar a la persona. 'En la demo (S), presentaste sin probarlo (C) y falló delante del cliente (I)' en lugar de 'eres un descuidado'.

fetchJavaScript

Función del navegador para hacer peticiones HTTP. Devuelve una promesa que se resuelve con un objeto Response (no con los datos). Por defecto hace GET; para enviar datos se le pasa un segundo argumento con method, headers y body. Solo rechaza ante fallos de red, no ante errores HTTP.

Ficheros .envTooling y bundlers

Ficheros de texto KEY=value donde se declaran las variables de entorno. Los .env*.local llevan valores reales y van al .gitignore; un .env.example versionado documenta qué variables hacen falta, sin sus valores.

fieldset y legendHTML

<fieldset> agrupa campos relacionados de un formulario y <legend> les pone un título común. Útil para un grupo de radios o una sección de un formulario largo; el lector de pantalla anuncia el grupo.

filter()JavaScript

Método de array que devuelve un array nuevo solo con los elementos para los que la función devuelve true.

find()JavaScript

Devuelve el PRIMER elemento de un array que cumple la condición, o undefined si ninguno la cumple.

findBy y waitForTesting

Las dos formas de esperar a algo asíncrono en un test de UI. findBy* (await screen.findByText…) es getBy + espera: reintenta hasta que el elemento aparece o agota el tiempo. waitFor(cb) reintenta una aserción hasta que pasa. A diferencia de getBy (que falla al instante si aún no está), esperan a que la app reaccione.

FIRST (principios de un buen test)Testing

Cinco propiedades de un buen test: Fast (rápido), Isolated (aislado de los demás), Repeatable (mismo resultado siempre, sin azar ni dependencia del orden), Self-validating (pasa o falla solo, sin que tú interpretes la salida) y Timely (escrito a tiempo, junto al código). Un test que las cumple protege; uno que no, estorba.

flex-basisCSS

El tamaño inicial de un hijo flex antes de repartir el espacio sobrante. En contexto flex es más preciso que width.

flex-growCSS

En un hijo flex, cuánto crece para absorber el espacio sobrante. Si varios valen 1, lo reparten a partes iguales.

flex-shrinkCSS

En un hijo flex, cuánto se encoge cuando falta espacio. Con 0 no se achica, útil para un avatar que no debe deformarse.

flex-wrapCSS

Permite que los hijos de un flex que no caben en una fila salten a la siguiente, en lugar de encogerse hasta ser ilegibles.

FlexboxCSS

Modelo de layout para alinear y distribuir elementos en una sola dimensión (una fila o una columna). Se activa con display: flex en el contenedor.

Flujo de datos unidireccionalReact

En React los datos van en una sola dirección: de padres a hijos, a través de props. Un hijo no cambia las props que recibe; si algo debe cambiar, se hace más arriba y vuelve a bajar. Eso hace el flujo predecible y fácil de seguir.

Flujo de trabajo (workflow de Jira)Trabajo en la empresa

El conjunto de estados por los que puede pasar un ticket (p. ej. To Do → In Progress → In Review → Done) y las transiciones permitidas entre ellos. Cada equipo lo adapta a cómo trabaja.

Flujo normalCSS

La forma en que el navegador coloca los elementos sin que toques nada: los de bloque se apilan de arriba abajo en el orden del HTML y los de en línea fluyen dentro de la línea. Cambiar este comportamiento con display, flex, grid o position es la base de todo el layout.

Foco visibleGeneral

El indicador visual (un contorno) que muestra qué elemento tiene el foco del teclado. Imprescindible para quien navega con Tab: si se quita sin sustituto, esa persona se pierde. Nunca uses outline: none a secas.

Force pushGit

Sobrescribir la rama del remoto con tu historia local, necesario tras un rebase de TU rama. Se hace con --force-with-lease (no --force) para no pisar trabajo que otro haya subido mientras tanto.

Format on saveGeneral

El ajuste de VSCode (editor.formatOnSave) que reformatea el fichero cada vez que guardas. Combinado con Prettier, no vuelves a formatear a mano.

FormateadorTooling y bundlers

Herramienta que reescribe el código con un estilo consistente (comillas, sangría, comas) sin tocar su comportamiento. Quita las discusiones de estilo del equipo. El estándar es Prettier.

formState (react-hook-form)React

Objeto de useForm con el estado del formulario: errors (mensajes por campo), isSubmitting (petición en vuelo), isValid, isDirty y más. errors.campo?.message contiene el texto del error de Zod si ese campo falló la validación.

Formulario (<form>)HTML

El elemento <form>: agrupa campos para RECOGER datos del usuario y enviarlos. Sus atributos action (a dónde se envían) y method (cómo: GET o POST) definen ese envío.

fr (fracción)CSS

Unidad exclusiva de Grid: una FRACCIÓN del espacio libre del contenedor. Con 1fr 2fr, la segunda columna ocupa el doble que la primera repartiendo lo que sobra.

FragmentReact

Un envoltorio invisible de React (`<>...</>` o `<Fragment>`) para devolver varios elementos sin meter un nodo extra en el DOM. Resuelve la regla de que un componente debe devolver un único nodo raíz.

Fuentes webCSS

Tipografías propias que se cargan desde fuera del sistema, con un <link> a un servicio como Google Fonts o el paquete fontsource. Dan personalidad al texto frente al system-ui por defecto; declara siempre una fuente de respaldo en font-family.

FunciónJavaScript

Bloque de código con nombre que encapsula lógica reutilizable. Se define una vez y se llama con () cuantas veces haga falta. Puede declararse con function, como expresión asignada a una variable, o como arrow function.

Función de limpieza (cleanup)React

La función que devuelve un useEffect para deshacer lo que montó, antes de volver a ejecutarse o al desmontar el componente: cancelar una petición, quitar un listener, parar un temporizador. Sin ella se acumulan suscripciones y aparecen fugas y respuestas viejas que pisan a las nuevas.

Función etiqueta (template tag)JavaScript

La función que se coloca delante de un template literal. Recibe (strings, ...valores): strings es el array de trozos fijos de texto y ...valores son las interpolaciones ${...} en orden. String.raw es la etiqueta incorporada de ejemplo: devuelve el texto sin procesar las secuencias de escape (\n queda como barra y n).

Función puraJavaScript

Función que, dado el mismo input, devuelve siempre el mismo output y no produce efectos colaterales (no muta sus argumentos ni variables de fuera, no toca el DOM ni la red). Son fáciles de testear y de razonar, y es el estilo que predomina en React.

function overloadTypeScript

Declarar varias firmas públicas para una misma función más una implementación que las cubre todas. Sirve cuando el tipo de retorno depende del tipo concreto del argumento de forma no uniforme (number → Heroe, string → Heroe[]), algo que un único genérico no captura. La firma de implementación no la ve quien llama. Tiene coste de mantenimiento, así que se prefiere una unión, un genérico o (en TS avanzado) un conditional type cuando bastan.

gapCSS

Espacio entre los hijos de un contenedor flex o grid. A diferencia de margin, no añade espacio fuera del primero ni del último.

Generador (function*)JavaScript

Una función declarada con function* que produce valores BAJO DEMANDA con yield: al llamarla no ejecuta su cuerpo, devuelve un iterador; cada next() avanza hasta el siguiente yield. Es iterable, así que se recorre con for...of y se despliega con spread. Permite secuencias perezosas (incluso infinitas) sin materializar un array entero.

GenéricoTypeScript

Una función o tipo que trabaja con un parámetro de tipo (T) en vez de un tipo fijo, de modo que el tipo exacto del argumento se conserva en el retorno. Permite reutilizar código sin perder la seguridad de tipos.

Gestión del focoGeneral

Controlar por código dónde está el foco del teclado: el elemento activo que recibe lo que se teclea y sobre el que actúa Enter. En React se hace con una ref y .focus() (por ejemplo, llevar el foco al primer campo con error al validar). Es clave para quien no usa el ratón: mover el foco es cómo se le dirige la atención.

Gestor de paquetesTooling y bundlers

La herramienta que instala, actualiza y declara el código de terceros de tu proyecto a partir del package.json (npm, pnpm, yarn). Mantiene el árbol de dependencias y el lockfile.

getByRoleTesting

La query de Testing Library que busca un elemento por su ROL accesible (button, heading, textbox…), el que ve un lector de pantalla. Es la query recomendada: si la encuentras, tu HTML es accesible; si no, probablemente no lo es. La prioridad va de rol y etiqueta (lo que percibe el usuario) a, como último recurso, un data-testid.

Getters y setters (get / set)JavaScript

Métodos especiales declarados con get y set que se usan como si fueran una propiedad normal: leer heroe.winrate ejecuta el get (lo calcula al vuelo desde victorias/partidas) y heroe.rango = x ejecuta el set (que puede validar antes de guardar). Dan propiedades CALCULADAS y siempre coherentes sin cambiar cómo se leen desde fuera.

GitHub ActionsInfraestructura

El sistema de automatización integrado en GitHub: ejecuta workflows (definidos en .github/workflows/*.yml) cuando ocurre un evento en el repo —un push, un pull request— para correr tests, lint, build o desplegar. Es la herramienta de CI/CD más usada en proyectos alojados en GitHub.

GitHub PagesInfraestructura

El hosting estático gratuito de GitHub: sirve los ficheros de un repositorio (o el dist/ que sube un workflow de Actions) en una URL del tipo usuario.github.io/repo. Ideal para proyectos personales y demos; sin backend.

Gráfico burndownTrabajo en la empresa

Un gráfico que muestra cuánto trabajo queda en el sprint día a día. Si la línea no baja al ritmo esperado, el equipo no está cerrando tickets y se ve a tiempo de reaccionar.

Grafo de módulosTooling y bundlers

El mapa que el bundler construye partiendo del fichero de entrada y siguiendo cada import: cada módulo es un nodo y cada import una arista. Es la base sobre la que decide qué incluir, qué eliminar y cómo partir el resultado.

Grafo de tareasInfraestructura

El grafo acíclico dirigido (DAG) que describe qué tareas de build dependen de otras. Distinto del grafo de módulos del bundler: aquí los nodos son tareas (`build`, `test`, `lint`) y las aristas son dependencias entre ellas. La herramienta lo usa para paralelizar lo que no tiene dependencias y serializar lo que sí las tiene.

grid-template-areasCSS

Forma visual de definir un layout: nombras zonas ("header header", "nav main") y asignas cada elemento a la suya con grid-area. El CSS se lee como un mapa de la página.

grid-template-columnsCSS

Propiedad del contenedor grid que define cuántas columnas hay y qué ancho tiene cada una: grid-template-columns: 1fr 1fr 1fr crea tres columnas iguales.

Grupos nombrados (regex)JavaScript

Partes de un patrón entre paréntesis con nombre, (?<rol>[A-Z]+), que capturan ese trozo y lo guardan en match.groups.rol. Convierten una regex de 'valida sí/no' en 'valida y EXTRAE': tras hacer match lees cada parte por su nombre, sin contar posiciones. Si el texto no casa, match devuelve null; comprueba antes de leer .groups.

Handler (MSW)Testing

En MSW, la descripción de cómo responder a una petición: a qué método y URL atiende y qué devuelve. http.get('https://.../heroes', () => HttpResponse.json([...])) dice 'cuando alguien haga GET a esa URL, responde esto'. setupServer(...handlers) los reúne, y server.use(...) sobrescribe uno solo para un test (por ejemplo, para forzar un error).

handleSubmit (react-hook-form)React

Función de useForm que envuelve el submit del formulario: hace preventDefault, valida con el resolver (Zod) y llama a la función onValid solo si todos los campos pasan. Si hay errores, los pone en formState.errors y no llama a onValid.

headHTML

La sección del documento con información que no se ve en la página pero el navegador necesita: el título de la pestaña, la codificación de caracteres, los enlaces a las hojas de estilo.

Herencia (extends / super)JavaScript

Mecanismo por el que una clase (subclase) extiende otra (clase padre) con extends, reutilizando su constructor vía super y pudiendo sobreescribir o añadir métodos. Como regla general, la composición suele preferirse a la herencia.

Hexadecimal (color)CSS

Notación de color con # seguido de seis caracteres en base 16: dos para rojo, dos para verde, dos para azul (#b8336a). Es la forma más habitual en proyectos reales.

HidrataciónReact

El paso, en SSR/SSG, en que el navegador toma el HTML ya pintado por el servidor y le engancha el JavaScript de React: añade los eventos y el estado para que la página deje de ser estática y se vuelva interactiva. Hasta que hidrata, los botones no responden.

HMR (Hot Module Replacement)Tooling y bundlers

Sustitución de módulos en caliente: al guardar un fichero, el navegador refleja el cambio al instante sin recargar toda la página y, a menudo, sin perder el estado. La gracia del dev server de Vite.

HoistingJavaScript

Mecanismo por el que el motor de JavaScript 'eleva' las declaraciones de función (function f(){}) al inicio de su scope, de modo que puedes llamarlas antes de que aparezcan en el código. Las funciones guardadas en una variable (expresiones y arrows) no se elevan: solo existen a partir de su línea.

Hoisting de dependenciasTooling y bundlers

Subir dependencias transitivas a un `node_modules` común y plano para que varios paquetes las compartan. npm y yarn clásico lo hacen por defecto; pnpm usa symlinks estrictos en su lugar para evitar phantom dependencies. Distinto del hoisting de variables en JavaScript.

Hoja de estilosCSS

Un fichero .css externo enlazado con <link rel="stylesheet"> en el <head>. Al estar separado del HTML, se reutiliza entre páginas y el navegador lo cachea tras la primera descarga.

Hosting estáticoInfraestructura

Un servicio que sirve ficheros tal cual (HTML, CSS, JS, imágenes) sin ejecutar código en el servidor. Suficiente para una SPA, que es justo eso: ficheros estáticos que el navegador ejecuta. GitHub Pages, Vercel y Netlify lo ofrecen, casi siempre gratis para proyectos pequeños.

HTMLHTML

HyperText Markup Language: el lenguaje con el que se describe la estructura y el contenido de una página. No es un lenguaje de programación (no calcula ni decide): solo nombra qué es cada cosa con etiquetas.

HTML semánticoHTML

Uso de etiquetas que describen el significado de su contenido (article, nav, main…) en lugar de etiquetas neutras (div, span). Da estructura comprensible a buscadores, lectores de pantalla y al propio equipo.

HTTPLa web y el navegador

El protocolo con el que cliente y servidor se comunican en la web: define cómo es una petición y cómo es una respuesta.

idCSS

Atributo HTML único en la página: solo un elemento puede tener cada id. En CSS se apunta con #nombre. Se usa sobre todo para anclas de navegación interna; para estilar, mejor las clases.

Identidad referencialReact

En cada render, los objetos, arrays y funciones creados dentro del componente son NUEVOS (otra referencia), aunque su contenido sea igual. React compara las props por referencia (comparación superficial), así que esa identidad nueva es lo que dispara re-renders y lo que la memoización congela.

if / else if / elseJavaScript

Estructura de control que ejecuta un bloque de código u otro según si una condición es verdadera o falsa.

Igualdad débil (==)JavaScript

Operador que convierte los operandos al mismo tipo antes de comparar. Sus reglas de coerción son complejas y producen resultados inesperados; se recomienda evitarlo en favor de ===.

Igualdad estricta (===)JavaScript

Operador que compara valor y tipo sin ninguna conversión previa. Si los tipos no coinciden devuelve false directamente. Es el operador de igualdad recomendado en JavaScript.

Imagen (<img>)HTML

Elemento vacío que incrusta una imagen en la página. El atributo src indica la ruta o URL del fichero; alt da el texto alternativo que la describe cuando no se puede ver.

importJavaScript

Trae a un módulo lo que otro exporta. Con llaves importa exports nombrados (import { heroes } from './datos.js'); sin llaves, el default. La ruta es relativa y con extensión (./datos.js). Con as se renombra al importar.

Import de namespace (* as)JavaScript

import * as Datos from './datos.js' agrupa TODOS los exports nombrados de un módulo en un objeto (Datos.heroes, Datos.equipo…). Útil para traer un módulo entero bajo un nombre, aunque lo habitual es importar solo lo que se usa.

import.meta.envTooling y bundlers

El objeto donde Vite expone las variables de entorno al código del cliente. SOLO las que empiezan por VITE_ se incluyen en el bundle (el resto se queda fuera). Built-ins: MODE, DEV, PROD, BASE_URL.

import() dinámicoJavaScript

import() con paréntesis es una función que devuelve una PROMESA del módulo: const m = await import('./x.js'). Carga código solo cuando hace falta, en vez de al arrancar la página. Es la base del code-splitting y del lazy loading de React (React.lazy).

Índice de arrayJavaScript

Número entero que identifica la posición de un elemento dentro de un array. Empieza siempre en 0.

inferTypeScript

Dentro de la cláusula extends de un conditional type, infer CAPTURA un tipo y le pone nombre para usarlo en la rama true: T extends Array<infer U> ? U : never extrae el tipo de los elementos. Solo es válido en esa posición. Es la base de utility types como ReturnType o Parameters.

Inferencia (de un modelo)IA

Cada vez que el modelo ya entrenado genera una respuesta a partir de sus pesos fijados. Distinta del entrenamiento, que fue cuando se fijaron esos pesos: al hacer una pregunta el modelo aplica lo aprendido, no aprende de nuevo.

Inferencia de genéricoTypeScript

La capacidad de TypeScript de deducir el parámetro de tipo (T) a partir del argumento que se pasa, sin escribirlo. Si pasas un Heroe[], TypeScript infiere T = Heroe.

Inferencia de tiposTypeScript

TypeScript deduce el tipo solo a partir del valor: const n = 5 ya es number sin anotarlo. La regla práctica: anota cuando no puede adivinarlo (parámetros, variables sin valor inicial) y deja que infiera el resto.

InmutabilidadJavaScript

La disciplina de no modificar los datos de entrada: en vez de mutar, se crean copias nuevas. Hace que una app grande sea más predecible y fácil de depurar.

Inmutabilidad tipadaTypeScript

Usar readonly en parámetros e interfaces para que el compilador impida las operaciones que mutan el dato (push, sort in-place…). El contrato de pureza queda expresado en el propio tipo.

INPLa web y el navegador

Interaction to Next Paint: lo que tarda la interfaz en responder a una interacción (clic, tecla) y repintar. Mide la responsividad, el 'por qué va a tirones'. Reemplazó a FID como métrica oficial en 2024. Objetivo: por debajo de 200 ms.

Input (<input>)HTML

El campo de formulario por excelencia. Su atributo type decide qué pide y cómo se comporta: text, email, number, date, checkbox, radio, file… El navegador adapta el teclado y la validación a cada tipo.

Input no controlado (RHF)React

Un input cuyo valor vive en el DOM, no en el estado de React. react-hook-form los usa internamente con refs: teclear no dispara re-renders del componente. Contrasta con el componente controlado (value + onChange con useState), que re-renderiza en cada tecla.

instanceofTypeScript

Comprueba si un objeto fue creado con una clase concreta recorriendo su cadena de prototipos en busca de Clase.prototype (por eso una subclase también es instanceof de su clase base). En JavaScript se usa sobre todo para distinguir tipos de error en un catch (if (e instanceof ErrorDeValidacion)). En TypeScript, además, estrecha el tipo: dentro de ese if el objeto pasa a ser de esa clase.

Integración continua (CI)Testing

La práctica de que un servidor corra tu suite (tests, lint, build) automáticamente en cada push o pull request, no cuando alguien se acuerda. Si algo se pone en rojo, el merge se bloquea. Convierte el testing en una portería automática del equipo: un test solo protege si SE EJECUTA, y CI garantiza que se ejecuta siempre, igual para todos.

Intercambio de variablesJavaScript

Destructuring de array aplicado para intercambiar el valor de dos variables en una sola línea, sin variable temporal: [a, b] = [b, a]. El lado derecho construye un array con los valores actuales y el izquierdo los reparte cruzados.

interfaceTypeScript

Contrato de forma para un objeto: declara qué campos tiene y de qué tipo es cada uno. TypeScript comprueba que cualquier objeto anotado con esa interface cumple exactamente esa forma. Se puede extender con extends.

InterpolaciónJavaScript

Insertar el valor de una expresión JavaScript dentro de un string usando la sintaxis ${expresion} dentro de un template literal.

IntersecciónTypeScript

El operador & combina dos tipos en uno: el resultado debe cumplir las dos formas a la vez. Sirve para componer objetos de responsabilidades distintas sin repetir campos.

IntlJavaScript

El objeto de internacionalización del navegador: formatea números y fechas según un locale (idioma/región como 'es-ES' o 'en-US'). Intl.NumberFormat hace porcentajes, monedas y decimales ('65,2 %', '1999,90 €'); Intl.DateTimeFormat, fechas en palabras ('15 de marzo de 2024'). Tú dices qué quieres y respeta las reglas de cada idioma.

Inversión de controlReact

Principio de diseño en el que el componente cede al consumidor las decisiones de composición y presentación en vez de anticiparlas con props. Es la idea detrás de los componentes compuestos y los render props: API pequeña, y quien usa el componente decide cómo se compone.

INVESTTrabajo en la empresa

Acrónimo de las cualidades de una buena user story: Independiente, Negociable, Valiosa, Estimable, Small (pequeña) y Testeable. Una chuleta para revisar si una historia está bien escrita.

ISR (regeneración incremental)React

Un punto medio entre SSG y SSR: las páginas se generan estáticas en el build y se regeneran cada cierto tiempo o bajo demanda, sin reconstruir el sitio entero. Lo populariza Next.js para contenido que cambia, pero no en cada petición.

it / testTesting

Función de Vitest que declara UN caso de test: un nombre en lenguaje llano y una función con el cuerpo del test. it y test son lo mismo (sinónimos); se elige el que haga leer mejor la frase: it('calcula el winrate', ...).

IterableJavaScript

Un valor que se puede recorrer con for...of y desplegar con spread (...) porque implementa el protocolo de iteración: un método en Symbol.iterator. Lo son los arrays, los strings, los Set y los Map, y también los generadores.

IteradorJavaScript

El objeto que produce los valores de un iterable de uno en uno. Tiene un método next() que en cada llamada devuelve { value, done }: el siguiente valor y un booleano que indica si la secuencia ya se acabó (done: true).

Jerarquía de encabezadosHTML

Uso ordenado de h1–h6 como índice del documento: un solo h1 que nombra la página, h2 para secciones, h3 para subsecciones. El nivel se elige por posición en la estructura, no por el tamaño deseado.

jest-domTesting

Un paquete de matchers extra para expect, pensados para el DOM: toBeInTheDocument(), toHaveTextContent(), toBeDisabled(), toHaveAttribute()… Leen como una frase y dan mensajes de error claros, frente a comprobaciones manuales como expect(el).not.toBe(null). Se cablean una vez (un fichero de setup) y quedan disponibles en todos los tests.

JiraTrabajo en la empresa

La herramienta de Atlassian donde el equipo gestiona el trabajo: tableros, tickets y sprints. Es donde el backlog, que en Scrum es un concepto, se vuelve una lista real que puedes mover y comentar.

JobInfraestructura

Cada bloque de trabajo de un workflow, que corre en su propia máquina (runner) limpia. Por defecto los jobs corren en paralelo; con needs: encadenas uno para que espere a otro. Cada job es una secuencia de steps.

JQL (Jira Query Language)Trabajo en la empresa

El lenguaje de búsqueda de Jira para filtrar tickets por cualquier campo y crear vistas o informes. Su sintaxis avanzada es de uso diario, no algo que haga falta dominar para empezar.

JSONJavaScript

JavaScript Object Notation: formato de TEXTO para intercambiar datos, parecido a un objeto de JS pero con reglas estrictas (claves entre comillas dobles; solo datos: nada de funciones, comentarios ni comas finales). Es lo que viaja entre cliente y servidor.

JSON.parseJavaScript

Convierte un string JSON en un objeto o array de JavaScript, para usar lo que recibes del servidor. Si el texto no es JSON válido, lanza un error (de ahí que convenga envolverlo o usar response.json(), que ya lo hace).

JSON.stringifyJavaScript

Convierte un objeto o array de JavaScript en un string JSON, para enviarlo (por ejemplo en el body de un fetch). Con un tercer argumento (JSON.stringify(obj, null, 2)) lo indenta legible para depurar.

JSXReact

La sintaxis con la que describes la interfaz dentro de un componente. Se parece a HTML, pero es JavaScript: cada etiqueta se transforma en una llamada que React entiende, y entre llaves {} puedes meter cualquier valor de JS.

justify-contentCSS

En Flexbox, distribuye los hijos a lo largo del eje principal (la fila, por defecto): flex-start, center, space-between, space-around.

KanbanTrabajo en la empresa

Alternativa a Scrum basada en flujo continuo (sin sprints) y en limitar el trabajo en curso, visualizado en un tablero de columnas. Útil cuando el trabajo llega de forma impredecible, como soporte.

key (prop de lista)React

La prop especial que React exige en cada elemento de una lista generada con .map(). No llega al componente hijo ni al DOM: solo la usa React para emparejar elementos entre renders y saber qué cambió, se añadió o se eliminó.

Key remappingTypeScript

Renombrar o filtrar las claves dentro de un mapped type con la cláusula as: { [K in keyof T as NuevaClave]: T[K] }. Permite prefijar las claves o descartar algunas (mapeándolas a never). Suele combinarse con template literal types para construir los nuevos nombres.

keyofTypeScript

Operador que devuelve la unión de las claves de un tipo como tipos literales: keyof Heroe es "nombre" | "rol" | "partidas" | "victorias". Es la base con la que utility types como Pick u Omit eligen campos.

KISSGeneral

Keep It Simple: la solución más simple que resuelve el problema gana. Evita la sobre-ingeniería: abstracciones, capas y opciones que nadie ha pedido todavía.

KPI (indicador clave)Trabajo en la empresa

Key Performance Indicator: una métrica que el equipo vigila de cerca porque refleja si el producto va bien (usuarios activos, conversión, retención). La señal que de verdad importa, frente al ruido de las métricas que no informan nada.

label (<label>)HTML

La etiqueta de texto de un campo. Asociada al input con for="id", al pulsarla se activa el campo y el lector de pantalla lo anuncia bien. Un campo sin label es un campo inaccesible.

Laboratorio y campoLa web y el navegador

Las dos formas de medir rendimiento. Laboratorio (synthetic, p. ej. Lighthouse): entorno controlado y reproducible, para depurar antes de publicar. Campo (RUM, CrUX): usuarios reales con sus móviles y redes, la verdad sobre la experiencia. Cuando discrepan, manda el campo; el laboratorio sirve para reproducir el problema.

LandmarksHTML

Regiones de página declaradas con etiquetas semánticas (header, nav, main, footer, aside). Permiten a la tecnología asistiva saltar directamente a cada zona sin recorrer todo el documento.

Layout (reflow)La web y el navegador

El paso en que el navegador calcula la geometría: la posición y el tamaño exactos de cada elemento. Cuando algo cambia y hay que recalcularlo se llama reflow, y es costoso.

Lazy loadingLa web y el navegador

Cargar un recurso solo cuando hace falta, no de entrada. En imágenes, el atributo loading='lazy' descarga la imagen al acercarse a pantalla. En componentes, React.lazy carga el módulo bajo demanda. Aligera el arranque (mejora el LCP).

LCPLa web y el navegador

Largest Contentful Paint: cuánto tarda en pintarse el elemento grande que el usuario espera ver (imagen de cabecera, titular, bloque principal). Mide la sensación de carga. Objetivo: por debajo de 2,5 s.

letJavaScript

Palabra clave para declarar una variable cuyo valor puede reasignarse. Se usa cuando el valor evoluciona con el tiempo.

Levantar el estado (lifting state up)React

Mover el estado al ancestro común de los componentes que lo necesitan y pasárselo hacia abajo por props (con un callback para cambiarlo). Como el estado es local a un componente, es la forma de que dos hermanos compartan el mismo dato.

LighthouseLa web y el navegador

La herramienta de laboratorio integrada en las DevTools de Chrome: carga tu página en condiciones simuladas (CPU y red fijas) y da un informe con LCP, CLS y métricas de carga. Mide en laboratorio, no a tus usuarios reales; el INP real necesita datos de campo (en lab da el TBT como aproximación).

Límite de WIPTrabajo en la empresa

Un tope de cuántos tickets pueden estar a la vez en una columna del tablero. Fuerza a terminar antes de empezar más y destapa los cuellos de botella.

LinterTooling y bundlers

Herramienta que analiza el código en busca de errores probables y malas prácticas (variables sin usar, == en vez de ===, promesas sin await). No cambia el formato: señala problemas de calidad. El más usado es ESLint.

Lista (<ul>)HTML

Agrupación de elementos (<li>) donde el orden no cambia el significado. El navegador la pinta con viñetas por defecto. Se usa para conjuntos sin secuencia.

Lista de descripción (<dl>)HTML

El elemento <dl>: una lista de parejas término/definición. Cada término va en <dt> y su descripción en <dd>. Encaja para datos en forma de clave-valor: las estadísticas de un héroe (Partidas: 120, Victorias: 78), un glosario o la ficha de un producto.

Lista ordenada (<ol>)HTML

Agrupación de elementos (<li>) donde la secuencia importa: cambiar el orden cambia el resultado. El navegador la numera por defecto. Se usa para pasos, rankings o cualquier serie con orden significativo.

LLM (modelo de lenguaje)IA

Large Language Model: un modelo entrenado con enormes cantidades de texto que, dado lo escrito hasta ahora, predice el siguiente fragmento (token) más probable. No «sabe» ni «busca»: genera.

LocaleJavaScript

Una etiqueta de idioma y región ('es-ES', 'en-US') que le dice a Intl con qué reglas formatear: separador decimal, símbolo de moneda y su posición, nombres de los meses, orden de la fecha. Parametrizar el locale (crearInforme(equipo, 'es-ES')) hace que toda la salida cambie de idioma con un solo argumento.

localStorage y panel ApplicationLa web y el navegador

localStorage es un almacén de clave-valor que el navegador guarda en el dispositivo y sobrevive a recargar. El panel Application de las DevTools te deja ver y editar lo que hay guardado ahí.

LockfileTooling y bundlers

El fichero que fija la versión EXACTA de cada dependencia (directa y transitiva) instalada. Garantiza que todo el equipo instale lo mismo. El package.json declara rangos; el lockfile los resuelve a versiones concretas.

Manifiesto ÁgilTrabajo en la empresa

Cuatro valores publicados en 2001 que priorizan individuos e interacciones, software funcionando, colaboración con el cliente y responder al cambio, por encima de procesos, documentación, contratos y planes rígidos. Scrum es una forma concreta de aplicarlos.

Map (estructura)JavaScript

Diccionario clave-valor pensado para ello: se maneja con set/get/has/delete, tiene .size directo, conserva el orden de inserción y admite claves de cualquier tipo (no solo strings). El patrón de conteo es conteo.set(k, (conteo.get(k) || 0) + 1). No confundir con el método map() de los arrays.

Map frente a objetoJavaScript

Cuándo usar cada uno: un Map gana para un registro que crece y mengua (conteos, cachés, índices por id), por su .size, su orden de inserción y sus claves de cualquier tipo. Un objeto plano es lo natural para una cosa de campos fijos conocidos (un DTO).

map()JavaScript

Método de array que devuelve un array NUEVO del mismo tamaño, aplicando una función a cada elemento. No muta el original: ideal para pasar de datos del servidor a datos para la interfaz.

Mapped typeTypeScript

Tipo que transforma cada propiedad de otro recorriendo sus claves: { [K in keyof T]: ... }. Permite construir a mano Partial, Readonly o Pick, y aplicar o quitar modificadores (?, readonly, y sus versiones -? y -readonly). Es el motor interno de la mayoría de los utility types.

marginCSS

Espacio exterior que un elemento pide a sus vecinos, fuera de su propia caja. No tiene color de fondo.

MatcherTesting

La función que se encadena a expect(...) para declarar QUÉ debe cumplir el valor: toBe, toEqual, toThrow, toBeCloseTo... Elegir el matcher correcto —comparar por referencia o por estructura, por valor exacto o aproximado— es lo que separa un test que protege de uno que miente.

Matrix (de CI)Infraestructura

Una estrategia que repite el mismo job sobre varias combinaciones de valores —por ejemplo, varias versiones de Node— en paralelo. Defines strategy.matrix con una lista y GitHub crea un job por cada valor.

MCP (Model Context Protocol)IA

Estándar para conectar el asistente a herramientas y datos externos (una API, una base de datos, el navegador) mediante servidores que exponen acciones que el asistente puede usar.

Media queryCSS

Bloque de CSS que solo se aplica si se cumple una condición de la pantalla, casi siempre su ancho: @media (min-width: 48rem) { … }. La herramienta para que una web se adapte a cada tamaño.

memoReact

Envuelve un COMPONENTE para que no se re-renderice si sus props no cambian (comparación superficial). Solo ayuda si el componente es caro Y sus props son referencialmente estables; sobre props nuevas en cada render, no hace nada.

MemoizaciónReact

Guardar el resultado de un cálculo (o una función, o un componente) para REUTILIZARLO mientras sus entradas no cambien, en vez de rehacerlo en cada render. En React se hace con useMemo, useCallback y memo.

Memoria del asistenteIA

Hechos que el asistente guarda entre sesiones (preferencias, decisiones, contexto del proyecto) para no empezar de cero cada vez que abres una conversación.

Merge (fusión)Git

Integrar los commits de una rama en otra. Si las dos divergieron, Git crea un commit de fusión que une ambas historias; si no, avanza en línea recta (fast-forward).

meta charsetHTML

La etiqueta <meta charset="utf-8"> en el <head> que declara cómo está codificado el texto. Con utf-8 las tildes, la ñ y cualquier símbolo se ven bien; sin ella, aparecen caracteres rotos.

Meta tagsLa web y el navegador

Etiquetas <meta> en el <head> del HTML que dan información sobre la página sin mostrarse en pantalla: el título, la descripción que aparece en los resultados de búsqueda, el charset, el viewport. Los buscadores y las redes sociales las leen.

meta viewportCSS

La etiqueta <meta name="viewport" content="width=device-width, initial-scale=1"> en el <head>. Sin ella, el móvil finge ser una pantalla ancha y tu diseño responsive no se activa.

Método de instanciaJavaScript

Función definida dentro de una clase que opera sobre los datos de esa instancia a través de this.

Métodos de NumberJavaScript

Utilidades del objeto Number para preguntar por la naturaleza de un valor sin sorpresas de coerción: Number.isInteger(x) (¿es entero?), Number.isNaN(x) (¿es NaN de verdad?), Number.EPSILON (el margen mínimo entre dos numbers, para comparar decimales con Math.abs(a - b) < Number.EPSILON) y Number.MAX_SAFE_INTEGER (el mayor entero representable con exactitud).

Métodos de string con regex (match, replace, matchAll)JavaScript

Los métodos de String que aceptan una regex. match(regex) extrae la primera coincidencia y sus grupos (o null si no casa); matchAll(regex) recorre TODAS (necesita la flag g) y devuelve un iterador; replace(regex, x) sustituye lo que casa (con g, todas las veces). Con ellos validas y transformas texto sin bucles a mano.

Métricas leading y laggingTrabajo en la empresa

Una métrica lagging mide un resultado ya ocurrido (ingresos, retención): llega tarde y no la mueves directamente. Una leading lo anticipa y sí es accionable (registros esta semana, uso de una feature). Guiarte solo por las lagging es conducir mirando el retrovisor.

Micro frontendsGeneral

Dividir un frontend grande en piezas desplegables de forma independiente, cada una propiedad de un equipo distinto. Da autonomía a escala, a cambio de más complejidad (integración, versiones, posible duplicación). Es una solución para organizaciones grandes, no un punto de partida.

MinificaciónTooling y bundlers

Reducir el tamaño del código sin cambiar lo que hace: quita espacios, saltos de línea y comentarios, y acorta los nombres de variables internas. Un fichero más pequeño se descarga antes. Es distinto de transpilar: aquí no se cambia de lenguaje, solo se comprime.

minmax()CSS

Función de Grid que fija un tamaño con mínimo y máximo: minmax(15rem, 1fr) hace que una columna nunca baje de 15rem pero crezca hasta 1fr si hay sitio.

Mobile-firstCSS

Estrategia responsive: escribes primero los estilos para móvil (la pantalla más limitada) y luego, con media queries, AÑADES lo que cabe en pantallas mayores. Más sencillo y robusto que al revés.

MockTesting

Un doble que combina stub y spy: da respuestas preparadas Y registra cómo se le llamó, a menudo con expectativas. En la práctica el término se usa de forma laxa para casi cualquier doble. vi.mock reemplaza un MÓDULO entero (para cuando no puedes inyectar la dependencia); cuando puedas, es más limpio inyectar el doble.

Modos del agenteIA

Configuraciones que regulan cuánta autonomía tiene el asistente en una sesión: desde pedir confirmación en cada paso hasta trabajar de forma más autónoma dentro de unos límites definidos.

module / moduleResolutionTypeScript

Las opciones de tsconfig que controlan el sistema de módulos de la salida (ESM o CommonJS) y cómo TypeScript resuelve los imports. En proyectos con Vite: module ESNext y moduleResolution bundler.

Módulos (ESM)JavaScript

Cada fichero JavaScript es un módulo con su propio espacio: lo que declara es privado salvo que lo exporte. Se conectan con export (lo que ofrece) e import (lo que toma). En el navegador se activan con <script type="module"> y rutas relativas con extensión.

MonorepoInfraestructura

Un único repositorio de Git que contiene varios paquetes o aplicaciones relacionados, compartiendo tooling y ciclo de desarrollo. No es lo mismo que un monolito: monorepo es una decisión de organización del código (repo), no de cómo se despliega (runtime).

MSW (Mock Service Worker)Testing

La librería estándar para simular la red en los tests. En lugar de parchear fetch, INTERCEPTA las peticiones a nivel de red: tu componente hace su llamada real y MSW responde lo que tú digas. No se acopla a fetch/axios, y los mismos handlers sirven en los tests (setupServer) y en el navegador durante el desarrollo (un service worker, de ahí su nombre).

MutaciónJavaScript

Modificar el contenido de un objeto o array a través de una referencia. Como varias variables pueden apuntar al mismo dato, mutar sin control genera bugs difíciles de rastrear.

Mutation (useMutation)React

En TanStack Query, una mutación modela una operación que cambia datos en el servidor (POST, PUT, DELETE). useMutation expone isPending mientras espera, onSuccess cuando termina bien y onError si falla. Tras el éxito, se suele invalidar la caché para que useQuery refresque los datos.

MVP (producto mínimo viable)Trabajo en la empresa

La versión más pequeña de algo que ya aporta valor y permite aprender de usuarios reales. No es un producto chapucero: es el corte más pequeño que funciona de verdad (emparentado con la vertical slice), para validar antes de invertir más.

NaNJavaScript

Valor especial de tipo number que significa 'no es un número', resultado de una operación numérica inválida (por ejemplo Number('hola')). Tiene una rareza: NaN no es igual a sí mismo (NaN === NaN es false), por eso se detecta con Number.isNaN.

Narrowing (estrechar tipos)TypeScript

La capacidad de TypeScript de afinar el tipo de una variable según el flujo del código. Dentro de un if que comprueba el tipo, TypeScript sabe que la variable es más concreta y permite usar sus métodos. Es análisis estático, antes de ejecutar.

Navegación por tecladoGeneral

Que un widget se pueda usar solo con el teclado, como esperan los estándares. En un tablist, Tab entra una vez al grupo y las flechas mueven entre pestañas (Home/End a los extremos). Se implementa con roving tabindex (solo el elemento activo tiene tabIndex 0; el resto, -1) y un onKeyDown que mueve el foco. Sin esto, un role="tab" promete un comportamiento que no cumple.

Navegación sin recarga (SPA)React

Cambio de pantalla en una SPA que no desencadena una petición HTTP: el JavaScript actualiza la historia del navegador y React re-renderiza los componentes que corresponden a la nueva URL. El estado de la app se conserva; la sensación es de app nativa.

neverTypeScript

El tipo que no admite NINGÚN valor (el bottom type), reverso de unknown. Aparece como retorno de una función que nunca devuelve (siempre lanza o bucle infinito) y al vaciar una unión de todos sus miembros. Es el elemento neutro de la unión (T | never = T) y el absorbente de la intersección (T & never = never). De ahí su uso práctico: en el default de un switch exhaustivo sobre una unión el valor restante es never, y asignarlo a un parámetro never hace que TypeScript marque error en cuanto la unión gana un caso sin cubrir (comprobación exhaustiva en compilación).

new (instancia)JavaScript

Operador que crea un objeto concreto a partir de una clase, ejecutando su constructor y devolviendo la instancia inicializada.

node_modulesTooling y bundlers

La carpeta donde npm install vuelca todo el código de las dependencias. Puede pesar cientos de megas y NO se sube a Git (va en el .gitignore): es reconstruible con npm install a partir del package.json y el lockfile.

Node.jsTooling y bundlers

El entorno que ejecuta JavaScript fuera del navegador, en tu propia máquina. Es el motor sobre el que corren las herramientas del desarrollo frontend (el servidor de desarrollo, los tests, el compilador de TypeScript, el empaquetador de React) y trae consigo npm. Se instala una vez, eligiendo la versión LTS (la estable de soporte largo).

NonNullable<T>TypeScript

Utility type que quita null y undefined de una unión (un Exclude especializado). NonNullable<string | null | undefined> es string. Útil para el tipo limpio tras descartar los valores ausentes.

npmTooling y bundlers

Node Package Manager: a la vez un registro enorme de paquetes y la herramienta de línea de comandos para instalarlos y gestionarlos (npm install). Viene con Node.js. Anota lo que instalas en el package.json.

npxTooling y bundlers

Ejecuta un paquete sin instalarlo de forma permanente: lo descarga, lo corre y lo descarta. Útil para andamiadores de un solo uso (npx create-vite) y herramientas que ejecutas de vez en cuando.

null y undefinedJavaScript

null es ausencia deliberada de valor (lo pone el programador). undefined es lo que JavaScript asigna cuando una variable no tiene valor todavía.

Nullish coalescing (??)JavaScript

El operador ?? devuelve el valor de la derecha solo si el de la izquierda es null o undefined. A diferencia de ||, respeta los valores falsy legítimos (0, '', false): partidas ?? 'sin datos' conserva el 0. Ideal para valores por defecto.

numberJavaScript

Tipo primitivo para números. JavaScript no distingue entre enteros y decimales: 120 y 0.65 son ambos number.

Number.isNaN(valor)JavaScript

Método que comprueba de forma fiable si un valor es exactamente NaN, sin coercionar. A diferencia del isNaN global (que convierte antes y da true para textos como 'hola'), Number.isNaN solo devuelve true si el valor ya es NaN. Patrón habitual: convertir con Number() y validar después con Number.isNaN.

NxInfraestructura

Sistema de build para monorepos con project graph, generadores de código, plugins por tecnología y análisis de impacto. Más batería incluida que Turborepo: da soporte a Angular, React, Node y otros stacks con plugins oficiales. Útil cuando el monorepo crece hasta necesitar scaffolding y análisis de dependencias avanzado.

object-fitCSS

Controla cómo rellena una imagen su caja sin deformarse: cover recorta para cubrir todo el espacio manteniendo la proporción; contain la encaja entera dejando hueco. Imprescindible para que las fotos no se estiren al adaptarse a distintos tamaños.

Object.assignJavaScript

Copia las propiedades de uno o más objetos fuente sobre un objeto destino; en las claves repetidas gana la última. Object.assign({}, base, extra) equivale al spread { ...base, ...extra }. Hoy se prefiere el spread, pero aparece en código existente.

Object.createJavaScript

Crea un objeto nuevo fijándole explícitamente su prototipo: Object.create(proto) devuelve un objeto cuyo prototipo es proto. Es la forma directa de enlazar la cadena de prototipos a mano, sin pasar por class ni por new.

Object.entries / keys / valuesJavaScript

Convierten un objeto en una lista para recorrerlo: keys da las claves, values los valores y entries los pares [clave, valor]. entries es el más usado: se desestructura cada par al recorrer, como en Map.entries.

Object.freezeJavaScript

Congela un objeto: impide cambiar, añadir o quitar propiedades de su primer nivel. Es superficial: los objetos anidados siguen siendo mutables. En modo estricto, intentar mutar lanza un TypeError; si no, se ignora en silencio.

Object.fromEntriesJavaScript

El inverso de Object.entries: construye un objeto a partir de una lista de pares [clave, valor]. Combinado con entries y map, es el patrón estándar para transformar un objeto entero: entries → map → fromEntries.

Object.getPrototypeOfJavaScript

Devuelve el prototipo de un objeto, es decir, el siguiente eslabón de su cadena. Para una instancia de clase, Object.getPrototypeOf(instancia) === Clase.prototype. Es la forma correcta de inspeccionar la herencia, en lugar del antiguo __proto__.

Object.groupByJavaScript

Agrupa los elementos de una lista por el valor que devuelve una función, en un objeto: una clave por grupo y un array de elementos en cada una. Object.groupBy(roster, h => h.rol) da { Daño: [...], Apoyo: [...] }. Método reciente (ES2024).

Object.keys / values / entriesJavaScript

Funciones del objeto global Object que convierten las claves, los valores o los pares clave-valor de un objeto en un array, permitiendo recorrerlo con for...of.

Objetivo del sprint (sprint goal)Trabajo en la empresa

La meta única que da sentido al sprint: la frase que explica por qué vale la pena este conjunto de trabajo. Guía las decisiones cuando algo se tuerce a mitad de sprint y hay que recortar.

ObjetoJavaScript

Estructura de datos que agrupa propiedades clave-valor bajo un mismo nombre, declarada con llaves: { nombre: "Tracer", rol: "Daño" }.

Objeto ErrorJavaScript

El objeto que representa un fallo. Trae message (el texto que le das), name (el tipo: Error, TypeError, RangeError…) y stack (la traza de llamadas hasta el fallo). Los errores nativos como TypeError o RangeError son subclases de Error y comparten esas propiedades.

Objeto eventJavaScript

Objeto que el navegador pasa al handler cuando ocurre un evento. Contiene información sobre lo ocurrido: event.target (el elemento que lo disparó), event.type, event.key, event.preventDefault()…

ObserverGeneral

Patrón en el que un sujeto notifica a quien se haya suscrito cuando algo cambia. Desacopla a quien provoca el cambio de quien reacciona: el sujeto no sabe quién escucha. Es la base de los buses de eventos y de los stores de estado (Zustand, RxJS).

OKR (Objectives and Key Results)Trabajo en la empresa

Una forma de fijar metas. El Objetivo es cualitativo y ambicioso (adónde quieres llegar este trimestre); los Key Results son 2-3 resultados MEDIBLES que prueban que lo lograste. La trampa habitual: poner tareas como key results en vez de resultados.

Omit<T, K>TypeScript

Utility type que construye un tipo nuevo con todos los campos de T excepto los de K. El reverso de Pick: en vez de elegir qué conservar, eliges qué quitar.

Open GraphLa web y el navegador

Un estándar de meta tags (og:title, og:description, og:image) que define cómo se ve tu página cuando alguien la comparte en redes sociales o mensajería: el título, el texto y la imagen de la tarjeta de previsualización.

Operador inTypeScript

Comprueba si un objeto tiene una propiedad con ese nombre (propiedad in objeto). TypeScript lo usa para estrechar entre tipos que comparten unos campos pero no otros.

Operador ternarioJavaScript

Expresión con tres partes (condición ? valorSiSeCumple : valorSiNo) que elige y devuelve un valor según una condición, a diferencia del if, que solo ejecuta bloques.

Operadores lógicosJavaScript

Operadores && (y), || (o) y ! (no) que combinan o invierten condiciones, con cortocircuito en la evaluación.

Optional chaining (?.)JavaScript

El operador ?. lee una propiedad, llama a una función (?.()) o accede a un índice (?.[i]) de forma segura: si lo de la izquierda es null o undefined, corta la cadena y devuelve undefined en vez de lanzar un error. heroe?.stats?.rango no revienta aunque stats falte.

Orden topológicoInfraestructura

El orden de ejecución que respeta las dependencias del grafo: un nodo solo se procesa cuando todos sus predecesores han terminado. En un monorepo con `dependsOn: ["^build"]`, significa que `packages/core` se construye antes que `packages/ui`, que depende de él.

overflowCSS

Decide qué pasa con el contenido que no cabe en su caja: visible (se sale, por defecto), hidden (se recorta), auto y scroll (aparece barra de desplazamiento). Junto a text-overflow: ellipsis y white-space: nowrap recorta un texto largo con puntos suspensivos.

OwnershipTrabajo en la empresa

Responsabilizarte del RESULTADO de tu trabajo de punta a punta, no solo de cerrar tu tarea: definir qué es 'hecho', pensar los bordes, comunicar bloqueos pronto y velar por que funcione en producción. No es heroísmo ni trabajar gratis: es responder de lo que entregas.

oxc / oxlintTooling y bundlers

Conjunto de herramientas de JavaScript escritas en Rust (oxc) con un linter (oxlint) ultrarrápido. oxc ya es el minificador por defecto de Vite 8; oxlint, el lado linter, es 'lo que viene'. En 2026 ESLint + Prettier siguen siendo el estándar de equipo por madurez y ecosistema de plugins.

package.jsonTooling y bundlers

El manifiesto de un proyecto JavaScript: su nombre y versión, los scripts (atajos que ejecutas con npm run), y las dependencies (lo que necesita en producción) frente a las devDependencies (herramientas solo de desarrollo, como Vite).

paddingCSS

Espacio interior entre el contenido y el borde de una caja. Forma parte de la caja, así que el color de fondo lo cubre.

Paint y compositeLa web y el navegador

Los dos últimos pasos del pintado: paint rellena los píxeles (colores, texto, bordes) y composite junta las capas en la imagen final que ves en pantalla.

Panel ConsoleLa web y el navegador

La pestaña donde el navegador escribe los errores y los mensajes de console.log, y donde puedes ejecutar JavaScript sobre la página al momento.

Panel ElementsLa web y el navegador

La pestaña de las DevTools que muestra el DOM y los estilos aplicados en vivo. Puedes inspeccionar cualquier elemento, editar su HTML y trastear su CSS sin tocar el fichero.

Panel NetworkLa web y el navegador

La pestaña que registra todas las peticiones que hace la página: a qué URL, con qué método, qué respondió el servidor y cuánto tardó. Imprescindible para depurar la comunicación con una API.

Parameters<typeof fn>TypeScript

Utility type compañero de ReturnType: donde ReturnType saca lo que una función devuelve, Parameters saca una TUPLA con los tipos de sus parámetros. Parameters<typeof crearHeroe> de (nombre: string, rol: string) es [string, string].

Parámetro de rutaReact

Un segmento variable en el patrón de una ruta, marcado con : (por ejemplo, /heroes/:id). Permite que una sola Route sirva para muchos recursos; el valor capturado llega al componente a través de useParams() siempre como string.

Parámetro de tipoTypeScript

El hueco nombrado (habitualmente T) que se declara entre <> en una función o tipo genérico. TypeScript lo rellena con el tipo concreto en cada uso, por inferencia o de forma explícita.

Parámetro opcionalTypeScript

Un parámetro marcado con ? puede pasarse o no al llamar la función. Si no se pasa, vale undefined (su tipo real es Tipo | undefined), así que conviene comprobarlo antes de usarlo. Va después de los obligatorios.

Parámetro por defectoTypeScript

Un parámetro con = valor en la firma toma ese valor cuando se omite al llamar. A diferencia del opcional (que queda undefined), dentro de la función siempre tiene un valor del tipo esperado, así que te ahorras comprobar undefined. TypeScript infiere su tipo del valor por defecto.

Parámetros y argumentosJavaScript

Los parámetros son los nombres que declara quien escribe la función; los argumentos son los valores que pasa quien la llama. Los parámetros pueden tener valores por defecto para cubrir casos en que el argumento no se proporciona.

Párrafo (p)HTML

El elemento <p>: un bloque de texto corrido. Es el contenedor por defecto de la prosa de una página; el navegador le deja un margen arriba y abajo para separarlo del resto.

Partial<T>TypeScript

Utility type que convierte todos los campos de T en opcionales. Útil para actualizaciones parciales: pasas solo los campos que cambian sin repetir los demás.

Patrón de diseñoGeneral

Una solución reutilizable y con nombre a un problema de diseño que se repite. Ejemplos: Factory (crear objetos sin acoplarte a la clase concreta), Singleton (una única instancia, a menudo un antipatrón por ser estado global) y Adapter (traducir una interfaz a otra).

Patrón FluxReact

Arquitectura de datos unidireccional creada por Meta para aplicaciones React: las acciones describen qué ha pasado, el store las procesa y actualiza el estado, la vista re-renderiza. Redux y Zustand son implementaciones de este patrón.

peerDependenciesTooling y bundlers

Dependencias que tu paquete NO instala, pero espera que el proyecto que lo usa tenga. Típico de plugins: un plugin de React declara react como peer para usar la MISMA copia que la app, no una propia.

Pérdida de thisJavaScript

Lo que ocurre al extraer un método de su objeto (guardarlo en una variable o pasarlo como callback): la función se llama sin objeto a la izquierda del punto y this pasa a ser undefined en módulos/modo estricto.

Permisos del agenteIA

Lo que el asistente puede hacer sin volver a preguntarte: leer ficheros, escribirlos, ejecutar comandos. Tú decides el alcance: a más permiso, más autonomía y más riesgo si el agente comete un error.

Petición y respuesta en vivoLa web y el navegador

Ver en el panel Network las peticiones reales según ocurren: sus cabeceras, su cuerpo y el código de estado. El mismo modelo request/response, pero observándolo mientras la página funciona.

Phantom dependencyTooling y bundlers

Un paquete que usas en el código pero que no declaraste en tu `package.json`, y que solo funciona porque otro paquete lo instaló y el hoisting plano lo puso accesible. Falla en silencio cuando ese otro paquete cambia de versión o desaparece.

Pick<T, K>TypeScript

Utility type que construye un tipo nuevo con solo los campos K de T. Ideal para vistas reducidas: el tipo resultante está derivado del original, sin duplicarlo a mano.

Pila de llamadas (call stack)JavaScript

La estructura que lleva la cuenta de qué función se ejecuta ahora: al llamar a una función se apila encima, y al terminar se desapila. JavaScript tiene UNA sola y de un solo hilo, así que ejecuta una cosa a la vez; si se ocupa mucho de forma síncrona, todo lo demás se congela.

Pirámide de testingTesting

Modelo clásico (Mike Cohn) para repartir el esfuerzo de testing: una base ancha de muchos tests unitarios, una capa media de integración y una cúspide estrecha de e2e. Nació en una época de backend pesado y automatización de navegador cara; el frontend moderno suele recolocarla en el trofeo de testing, que baja el peso a la integración. Ambos coinciden en que el e2e es la punta fina.

place-itemsCSS

Atajo de Grid (y Flexbox) que combina align-items y justify-items en una línea. place-items: center centra el contenido en los dos ejes a la vez: la forma más corta de centrar algo dentro de su caja.

Planning pokerTrabajo en la empresa

Técnica para estimar en equipo: cada persona revela a la vez una carta con su estimación y se discute cuando hay diferencias grandes. Saca a la luz supuestos distintos antes de comprometerse.

Play functionTesting

La función play de una story de Storybook: tras renderizar, conduce el componente (pulsa, escribe) y comprueba el resultado con el mismo getByRole/userEvent/expect de Testing Library. Convierte la story en un interaction test que vive junto al componente y corre también en CI. Cae en la banda de componente del trofeo de testing, no es un e2e.

PlaywrightTesting

Herramienta de Microsoft para tests end-to-end que automatiza un navegador real (Chromium, Firefox, WebKit): abre la página, escribe, pulsa y comprueba lo que aparece. Usa los mismos localizadores accesibles que Testing Library (getByRole) y sus aserciones reintentan solas hasta que la condición se cumple (web-first assertions: sin findBy, waitFor ni sleeps fijos). Es el estándar de e2e en el frontend de 2026.

Plugin (de Claude Code)IA

Paquete que agrupa skills, comandos y configuración para instalarlos juntos y compartirlos entre proyectos o con el equipo.

pnpmTooling y bundlers

Gestor de paquetes que guarda cada versión de cada paquete UNA sola vez en un store global y la enlaza a cada proyecto. Ahorra disco, instala rápido y su node_modules estricto evita usar paquetes que no declaraste (phantom dependencies). Es el que usa este curso.

PolyrepoInfraestructura

Estrategia en la que cada paquete o servicio vive en su propio repositorio de Git. Ofrece aislamiento y permisos independientes, a cambio de más fricción al hacer cambios que afectan a varios repos a la vez.

positionCSS

Propiedad que saca un elemento del flujo normal o lo desplaza: static (por defecto), relative (se mueve desde su sitio pero sigue ocupando espacio), absolute (se coloca respecto al ancestro posicionado), fixed (respecto a la ventana) y sticky (se pega al hacer scroll). Se ajusta con top, right, bottom y left.

Precisión numérica (coma flotante)JavaScript

Los números con decimales se guardan en binario con precisión limitada, y algunos (como 0.1) no caben exactos: por eso 0.1 + 0.2 da 0.30000000000000004 y la comparación con === 0.3 es false. La consecuencia práctica: no compares decimales con === a pelo; redondea con toFixed o usa un margen pequeño.

prefers-reduced-motionCSS

Media feature que detecta si la persona ha pedido reducir el movimiento en su sistema. Envolver una animación en @media (prefers-reduced-motion: no-preference) { ... } la activa solo para quien no lo ha pedido: el efecto se vuelve accesible con una línea.

PrettierTooling y bundlers

Un formateador automático: reescribe el código con un estilo fijo (indentación, comillas, longitud de línea). Elimina las discusiones de estilo en equipo, porque todos los ficheros salen iguales sin importar quién los escribe.

Preview deployInfraestructura

Un despliegue temporal y aislado que la plataforma crea por cada pull request, con su propia URL. Permite ver y probar el cambio en una web real antes de fusionarlo, no solo en la diferencia del código.

Product Owner (PO)Trabajo en la empresa

El rol responsable del QUÉ y el PORQUÉ: prioriza el backlog y representa la voz del negocio y del cliente. No decide cómo se implementa; eso es del equipo.

Promesa (Promise)JavaScript

Objeto que representa un valor futuro de una operación asíncrona. Nace pendiente (pending) y acaba cumplida (fulfilled, con un valor) o rechazada (rejected, con un error). Una función que tarda devuelve una promesa en lugar del valor; tú la consumes con .then o await.

Promise.allJavaScript

Recibe un array de promesas, las espera TODAS a la vez y se resuelve con un array de resultados (o se rechaza si alguna falla). Para operaciones independientes evita la cascada de awaits en serie: tardas lo de la más lenta, no la suma.

Promise.allSettledJavaScript

Espera a que TODAS las promesas terminen (cumplan o fallen) y NUNCA rechaza. Devuelve un array donde cada elemento es { status: 'fulfilled', value } o { status: 'rejected', reason }. Para carga resiliente: pides varias cosas y pintas las que lleguen, marcando las que fallen.

Promise.anyJavaScript

Se queda con la primera promesa que CUMPLE, ignorando los fallos por el camino; solo rechaza (con un AggregateError) si fallan todas. A diferencia de race, que toma la primera en terminar aunque sea un fallo, any espera hasta tener un éxito. Útil con varias fuentes equivalentes.

Promise.raceJavaScript

Se resuelve o rechaza con la PRIMERA promesa que termine, gane o falle. Su uso estrella es el timeout: correr una operación contra un temporizador que rechaza al pasar el tiempo, y quedarse con lo que ocurra antes.

PromptIA

El texto con el que le pides algo al modelo. Su calidad determina la de la respuesta: a más contexto, ejemplos y restricciones claras, mejor resultado.

Prompt engineeringIA

La práctica de formular peticiones al modelo para obtener buenos resultados de forma fiable: dar contexto, ejemplos, formato y límites claros.

Prop drillingReact

El patrón de pasar una prop por varios componentes intermedios que no la usan, solo para que llegue a un descendiente hondo. A medida que el árbol crece, cada nivel intermedio se convierte en un cable que alguien puede cortar sin querer. Context lo elimina.

Propagación de erroresJavaScript

Un error no capturado sube por la pila de llamadas, de la función donde se lanzó a la que la llamó, hasta que un try/catch lo atrapa (o, si nadie lo hace, detiene el programa). Por eso el catch se pone donde se puede tratar el fallo, no necesariamente donde se origina.

PropiedadJavaScript

Par clave-valor que forma parte de un objeto. Se lee con punto (obj.clave) o con corchetes (obj["clave"]).

propiedad opcionalTypeScript

Campo de una interface o type alias marcado con ?: puede estar presente (con su tipo declarado) o no estar. TypeScript lo trata como `tipo | undefined`, así que conviene comprobar antes de usarlo.

PropsReact

Los datos que un componente recibe de su padre, parecidos a los atributos de una etiqueta: <HeroCard nombre="Tracer" />. Llegan como un objeto y son de SOLO LECTURA: el componente los usa, no los modifica.

Props tipadasReact

Describir con un type o interface la forma de las props que un componente espera (qué campos lleva y de qué tipo). Si le pasas algo que no encaja, TypeScript avisa antes de ejecutar.

Protocolo de iteraciónJavaScript

El contrato que hace que un valor sea recorrible con for...of y desplegable con spread: tener un método en la clave Symbol.iterator que devuelve un iterador. Los arrays, los strings, los Set y los Map lo cumplen de fábrica; por eso todos se recorren igual.

PrototipoJavaScript

El objeto del que otro hereda propiedades y métodos. Cuando lees una propiedad que el objeto no tiene, JavaScript la busca en su prototipo. Los métodos de una clase viven en Clase.prototype: las instancias no copian los métodos, los heredan de ahí.

ProviderReact

El componente <MiContext.Provider value={...}> que rodea parte del árbol y pone el valor del context disponible para todos sus descendientes. El estado sigue viviendo donde se creó con useState; el Provider solo lo hace accesible.

ProxyJavaScript

Un envoltorio que INTERCEPTA las operaciones sobre un objeto (leer una propiedad, escribirla, comprobar si existe) mediante 'traps'. Permite registrar accesos, validar al asignar o exponer propiedades virtuales. Es el motor de la reactividad de Vue 3 y MobX: las librerías lo usan por ti.

Pseudo-claseCSS

Selector que apunta a un elemento en un estado, escrito con dos puntos: a:hover (puntero encima), a:focus (recibe el foco con clic o Tab). Se usan juntos en elementos interactivos.

Pull request (PR)Git

La propuesta de fusionar tu rama en otra, abierta en GitHub/GitLab para que el equipo revise el cambio antes de integrarlo. No es un comando de Git: es el punto donde se discute y aprueba el código.

push / pullGit

push envía tus commits locales al remoto; pull trae a tu local los commits que aún no tienes. Son las dos direcciones de sincronización con el remoto.

PWA (Progressive Web App)La web y el navegador

Una web normal que, con un manifest y un service worker, se puede instalar en el dispositivo como una app: icono en la pantalla de inicio, ventana propia sin barra de navegador y funcionamiento offline. El mismo código web, con experiencia de app nativa.

Quality gate (portería automática)Testing

Una condición automática que bloquea el merge de un pull request si no se cumple: la suite en rojo, la cobertura por debajo de un umbral (coverage.thresholds), el lint con errores. Hace que la calidad no dependa de que alguien se acuerde de revisarla. El umbral de cobertura es un SUELO útil, no una nota a maximizar: forzar el 100% premia tests huecos.

querySelector / querySelectorAllJavaScript

Métodos de document que devuelven el primer nodo (querySelector) o todos los nodos (querySelectorAll) que coinciden con un selector CSS. Devuelven null / NodeList vacío si no hay coincidencia.

queueMicrotask()JavaScript

Función del navegador que encola una función directamente en la cola de microtareas, equivalente a Promise.resolve().then(fn) pero sin envolver nada en una promesa. Corre después de todo el código síncrono y antes de cualquier macrotarea (un setTimeout). Útil para aplazar algo al final del tick actual sin saltar de cola.

Rama (branch)Git

Una línea de trabajo independiente que parte del historial. Creas una rama por tarea (git switch -c) para trabajar sin tocar la rama principal hasta que el cambio está listo.

Re-renderReact

Que React vuelva a ejecutar la función de un componente para recalcular su JSX, normalmente porque su estado o sus props han cambiado. React compara el resultado nuevo con el anterior (reconciliación) y toca el DOM solo donde hace falta.

ReactReact

Una librería para construir interfaces a base de componentes. En vez de tocar el DOM a mano, describes cómo se ve la pantalla para un estado dado y React se encarga de actualizar el DOM por ti.

React CompilerReact

El compilador de React (React 19+) que memoiza automáticamente lo necesario en tiempo de build. Con él, useMemo/useCallback/memo a mano dejan de hacer falta en la mayoría de casos: escribes código simple y la optimización la pone la herramienta.

React NativeReact

Un framework para construir apps nativas de iOS y Android con React, que renderiza a componentes nativos de verdad (no a una webview). Reutilizas tu conocimiento de React y parte de la lógica, pero la UI y muchas APIs son distintas de la web. La opción cuando una PWA o una TWA no bastan.

React RouterReact

La librería de routing más extendida en el ecosistema React. Desde la v7, todo se importa de 'react-router'. Gestiona la historia de navegación, declara rutas con <Routes>/<Route>, navega sin recargar con <Link> y expone hooks como useParams y useNavigate.

react-hook-formReact

Librería para gestionar formularios en React con inputs NO controlados (refs internas). Teclear en los campos no dispara re-renders del componente: solo se re-renderiza cuando hay errores que mostrar. Se integra con Zod a través de zodResolver.

readonlyTypeScript

Modificador que impide reasignar un campo de un objeto tras su creación. Si algo intenta sobreescribirlo, TypeScript lo marca como error en compilación. Útil en campos de identidad (nombre, id).

Readonly<T>TypeScript

Utility type que convierte todos los campos de T en de solo lectura. A diferencia del modificador readonly en la interface (que afecta a todos sus usos), Readonly<T> se aplica en un punto concreto sin cambiar el tipo original.

RebaseGit

Reaplicar tus commits sobre la punta de otra rama para obtener una historia lineal, como si hubieras partido de ahí desde el principio. Reescribe commits: nunca se hace sobre ramas compartidas.

ReconciliaciónReact

El proceso por el que React compara el Virtual DOM nuevo con el anterior para decidir el mínimo de cambios que aplicar al DOM real. Es lo que hace que actualizar la interfaz sea eficiente.

Record<K, V>TypeScript

Utility type que describe un objeto-diccionario cuyas claves son del tipo K y cuyos valores son del tipo V. Sustituto legible del patrón de índice { [clave: string]: Valor }.

reduce()JavaScript

Método de array que condensa una colección en un único valor (una suma, un objeto agrupado...) arrastrando un acumulador a lo largo de la lista.

ReducerReact

Una función PURA (sin efectos, sin mutar) que recibe el estado actual y una acción y devuelve el estado NUEVO: (estado, accion) => nuevoEstado. Al ser pura, es fácil de leer y de testear aparte del componente.

Redux ToolkitReact

La forma moderna y oficial de usar Redux: agrupa el store, los slices y las acciones en una API concisa. Trae DevTools, middleware de thunk y convenciones claras. Paga la pena en apps grandes con mucho equipo que necesita trazabilidad y estructura.

RefactorGeneral

Cambiar la estructura interna del código SIN cambiar su comportamiento: misma entrada, misma salida, mejor forma. Se apoya en tener con qué comprobar que la conducta no cambió.

Refinement (refinamiento)Trabajo en la empresa

La ceremonia continua de preparar el backlog: aclarar historias, partir las grandes y estimarlas, para que lleguen al planning listas para trabajarse.

ReflectJavaScript

Un objeto con las operaciones internas sobre objetos expuestas como funciones normales: Reflect.get(obj, clave), Reflect.set(obj, clave, valor), Reflect.has(obj, clave). Se usa de la mano de Proxy, dentro de las traps, para delegar en el comportamiento por defecto sin reescribirlo a mano.

register (react-hook-form)React

Función de useForm que conecta un input nativo con react-hook-form mediante una ref interna. Se expande con {...register('campo')}. Para inputs numéricos, admite { valueAsNumber: true } para convertir el string del DOM a number antes de validar.

Regla CSSCSS

La unidad básica de CSS: un selector seguido de un bloque de declaraciones entre llaves. Cada declaración es una pareja propiedad: valor; que dice cómo pintar los elementos seleccionados.

Reglas de los hooksReact

Los hooks se llaman SIEMPRE en el nivel superior del componente y en el mismo orden, nunca dentro de un if, un bucle o tras un return. React los identifica por su ORDEN de llamada; si ese orden cambia entre renders, asocia el estado al hook equivocado y todo se rompe.

Reglas del proyectoIA

Las normas que le fijas al asistente para que respete cómo trabajáis: estilo, límites y prohibiciones. En Claude Code viven sobre todo en CLAUDE.md.

Regresión visualTesting

Otra capa de la red de seguridad: renderiza cada story, le hace una captura y compara los PÍXELES nuevos con los aprobados en cada PR. Caza lo que un snapshot de DOM no ve —un color roto, un layout descuadrado— aunque el marcado no cambie. La herramienta estándar sobre Storybook es Chromatic. Comparte la trampa del snapshot: con muchas capturas frágiles, el equipo aprueba los diffs a ciegas y dejan de proteger.

Release (publicación de versión)Infraestructura

El proceso de publicar una nueva versión de un paquete. Con Changesets se divide en dos pasos: `changeset version` (sube versiones y actualiza el CHANGELOG) y `changeset publish` (sube los paquetes al registry, típicamente npm).

remCSS

Unidad relativa al font-size del elemento raíz (<html>). Si la raíz es 16px, 1rem = 16px. Escala con la preferencia de tipografía del usuario: la unidad recomendada para fuentes y espaciados.

Render propReact

Una prop (a menudo children) que es una función: el componente la llama con su estado interno y la función devuelve el JSX. Así el componente controla la lógica y el consumidor controla el render. Los custom hooks lo reemplazaron para compartir lógica; sigue vigente cuando el componente controla el propio render (listas virtualizadas, librerías headless).

Render treeLa web y el navegador

La combinación del DOM y el CSSOM en un solo árbol con lo que de verdad se va a pintar: solo los elementos visibles, ya con sus estilos resueltos.

renderHookTesting

La utilidad de Testing Library para probar un custom hook AISLADO, sin escribir un componente que lo use. renderHook(() => useAlgo()) lo monta y devuelve { result }, donde result.current es lo que el hook devuelve ahora mismo. Útil cuando el hook es una pieza reutilizable con su propia lógica; si el hook está atado a una sola UI, suele ser mejor probarlo a través del componente.

Renderizado condicionalReact

Pintar un elemento u otro según una condición, directamente dentro del JSX. El patrón {condicion && <X />} muestra X solo si la condición es true; el ternario {condicion ? <X /> : <Y />} elige entre dos ramas.

Renderizado de listasReact

Usar .map() sobre un array para devolver un array de elementos JSX que React pinta todos de una vez. Cada elemento necesita una prop key única y estable para que React pueda identificarlo entre renders.

Renderizar (en React)React

Que React calcule la interfaz que describen tus componentes y la refleje en la pantalla. Ocurre al montar la app y, más adelante, cada vez que cambian los datos de un componente.

Renombrar en destructuringJavaScript

Sintaxis clave: variableNueva al desempaquetar un objeto. const { nombre: nombreHeroe } = heroe saca heroe.nombre pero lo guarda en una variable llamada nombreHeroe. El objeto no cambia; solo eliges con qué nombre usas el valor.

repeat()CSS

Función que evita repetir: repeat(3, 1fr) equivale a 1fr 1fr 1fr. Combinada con auto-fill/auto-fit crea cuadrículas que se adaptan solas al número de columnas que caben.

Repositorio (local y remoto)Git

El almacén del historial de un proyecto. El repositorio local vive en tu máquina (puedes commitear sin internet); el remoto (GitHub) es la copia compartida y tu copia de seguridad.

RepositoryGeneral

Patrón que aísla el acceso a datos detrás de una interfaz. El dominio depende del contrato (obtenerTodos, guardar…), no de fetch ni de la base de datos. Puedes cambiar la implementación (API, memoria, localStorage) sin tocar la lógica, y testearla con un repositorio en memoria sin red.

request (petición)La web y el navegador

El mensaje que el navegador envía al servidor: un método (GET, POST...), una ruta y unas cabeceras.

Required<T>TypeScript

Utility type que convierte todos los campos de T en obligatorios: el reverso de Partial. Útil cuando, tras validar, quieres un tipo en el que ningún campo opcional siga pudiendo faltar.

Response (fetch)JavaScript

El objeto con que se resuelve fetch: la respuesta HTTP, no el cuerpo ya parseado. response.json() lee y parsea el cuerpo (otra promesa). response.ok es true si el estado es 2xx, y response.status el código numérico: hay que comprobarlos porque fetch no rechaza ante un 404 o 500.

response (respuesta)La web y el navegador

El mensaje que el servidor devuelve: un código de estado, unas cabeceras y un cuerpo (el HTML, el JSON...).

Rest (...)JavaScript

El gemelo de spread: el mismo ... pero a la IZQUIERDA, RECOGE lo que sobra en un array (u objeto) nuevo. La regla que lo resume: ... a la derecha reparte (spread), a la izquierda recoge (rest). Se usa en los parámetros de una función y en el destructuring.

Rest en destructuringJavaScript

En un destructuring, ... recoge todo lo que no nombraste. Con arrays separa los primeros del resto (const [capitan, ...linea] = orden); con objetos saca unas claves y agrupa las demás (const { nombre, ...stats } = heroe). Patrón típico para quitar un campo de un objeto sin mutar.

Rest en parámetrosJavaScript

Un parámetro precedido de ... recoge todos los argumentos sobrantes en un array de verdad: function alinear(capitan, ...resto) {} deja capitan con el primero y resto con los demás. Debe ir el último. Sustituye al antiguo objeto arguments.

RetrospectivaTrabajo en la empresa

La ceremonia donde el equipo mira CÓMO trabajó (no el producto) y acuerda mejoras concretas para el siguiente sprint. Sin acciones que se cumplan, es solo una queja colectiva.

returnJavaScript

Sentencia que termina la ejecución de una función y devuelve un valor al código que la llamó. Sin return explícito, la función devuelve undefined.

ReturnType<typeof fn>TypeScript

Utility type que extrae el tipo de retorno de una función. Si la función cambia, el tipo derivado se actualiza solo: mantiene la función como única fuente de verdad.

Revalidación (TanStack Query)React

El proceso por el que TanStack Query vuelve a pedir datos al servidor cuando considera que la copia en caché puede estar desactualizada (stale). Se dispara al recuperar el foco de la ventana, al remontar el componente o al invalidar manualmente la caché con invalidateQueries.

RevertGit

Deshacer un commit creando OTRO commit que aplica los cambios inversos. No borra ni reescribe la historia (a diferencia de reset), así que es la forma segura de echar atrás algo ya publicado o en una rama compartida.

Revisar el código de la IAIA

Leer y validar todo lo que genera el asistente antes de darlo por bueno: que hace lo que dice, que no introduce bugs ni problemas de seguridad. El asistente propone; tú firmas.

Roadmap de productoTrabajo en la empresa

El plan ordenado de qué se va a construir y en qué orden para acercarse a la visión, por temas y prioridades más que por fechas exactas. No es un calendario cerrado: marca la dirección, no compromete cada día.

Rojo-verde-refactorTesting

El ciclo de TDD en tres pasos: (1) Rojo — escribes un test que falla porque la función aún no hace lo pedido; (2) Verde — la implementación más simple que lo pone en verde; (3) Refactor — limpias el código sin cambiar el comportamiento, con los tests de red por si rompes algo. Y vuelta a empezar.

RolldownTooling y bundlers

El bundler en Rust que Vite 8 usa de forma unificada para desarrollo y producción (reemplaza al dúo esbuild + Rollup). Más rápido y con un único sistema de plugins. Compatible con el API de plugins de Rollup.

RollupTooling y bundlers

Bundler centrado en producción cuyo API de plugins definió el ecosistema de Vite. Hasta Vite 7 generaba el build de producción; Vite 8 lo sustituye por Rolldown manteniendo la compatibilidad de plugins.

Routing (enrutado)React

El mecanismo que decide qué componente renderizar según la URL actual. En una SPA, el routing ocurre en el cliente (sin petición al servidor): React Router examina la URL y monta el componente que corresponde.

RspackTooling y bundlers

Una reimplementación de webpack en Rust: compatible con su configuración y sus plugins, pero mucho más rápida. La vía para acelerar un proyecto webpack grande sin reescribir toda su configuración.

RTK QueryReact

La solución de server-state integrada en Redux Toolkit. Define endpoints en el store con createApi y genera hooks automáticamente (useGetHeroesQuery). Los datos de la caché viven dentro del store de Redux, lo que facilita combinarlos con slices normales.

RUMLa web y el navegador

Real User Monitoring: medir el rendimiento en los navegadores de tus usuarios reales mientras usan la app, y agregarlo en tu analítica. Es la medición de campo. La librería web-vitals es la forma habitual de instrumentarlo; CrUX es la versión pública de Google.

RunbookTrabajo en la empresa

Un documento paso a paso para una operación recurrente o una incidencia (cómo desplegar, qué hacer si se cae un servicio). Convierte el conocimiento de una persona en algo que cualquiera del equipo puede ejecutar.

RunnerInfraestructura

La máquina virtual donde corre un job. GitHub ofrece runners alojados (ubuntu-latest, windows-latest, macos-latest) que arrancan limpios en cada ejecución. Eliges el sistema con runs-on:.

Ruta (route)React

La asociación entre un patrón de URL y un componente de React: cuando la URL coincide con el patrón, React Router renderiza ese componente. Se declara con <Route path='...' element={...} />.

Rutas absolutas y relativasGeneral

Una ruta absoluta parte de la raíz del sistema (/home/usuario/proyecto); una relativa parte de donde estás ahora (./src, ../). Saber dónde estás es la mitad de manejarse en la terminal.

safeParseTypeScript

Método de Zod que valida un dato contra un schema sin lanzar excepción. Devuelve { success: true, data } si el dato es válido, o { success: false, error } con los issues si no lo es.

Sanitización (sanear HTML)JavaScript

Limpiar una cadena de HTML no confiable quitando lo que puede ejecutar código (<script>, atributos on*, href javascript:) y dejando solo el marcado seguro (<strong>, <em>, <a> con un href limpio). Es lo que necesitas cuando de verdad debes RENDERIZAR HTML del usuario; la librería estándar es DOMPurify. A diferencia de escapar —que convierte todo el HTML en texto—, sanear conserva el formato seguro.

satisfiesTypeScript

Operador que valida un valor contra un tipo SIN ensancharlo: comprueba que cumple la forma pero conserva el tipo concreto inferido. A diferencia de una anotación (const x: T = …, que ensancha al tipo T), value satisfies T mantiene los literales y solo verifica que encajan.

Schema (Zod)TypeScript

Descripción de la forma esperada de un dato, construida con z.object, z.string, z.number y otros validadores de Zod. Se usa para validar datos externos en tiempo de ejecución.

ScopeJavaScript

Alcance de una variable: el área del código desde donde es visible y accesible. Con const y let, una variable declarada dentro de una función o bloque {} solo existe dentro de ese bloque. El scope evita que variables de distintas funciones se pisen entre sí.

Scope creepTrabajo en la empresa

El alcance de un trabajo creciendo poco a poco con añadidos no planificados ('ya que estás, mete también…'). Cada añadido parece pequeño, pero juntos hacen que el sprint no se termine y el objetivo se pierda.

Scripts de npmTooling y bundlers

Atajos declarados en el campo scripts del package.json que ejecutas con npm run <nombre>. Admiten hooks pre/post (prebuild corre antes de build) y encadenarse con &&.

ScrumTrabajo en la empresa

Un marco de trabajo (no una metodología cerrada) para entregar producto en ciclos cortos llamados sprints, con roles, artefactos y ceremonias definidos. El más usado para organizar equipos ágiles.

Scrum MasterTrabajo en la empresa

El rol que facilita el proceso y quita impedimentos para que el equipo avance. No es un jefe ni reparte tareas: sirve al equipo, no manda sobre él.

Secretos en el clienteLa web y el navegador

Regla de seguridad: cualquier valor que llega al navegador es público. Una clave metida en una variable VITE_ se incrusta en el bundle y se lee abriendo las DevTools; el .gitignore no lo impide. Los secretos (claves de API, tokens) viven en el backend; el cliente le pide al backend y es este quien usa el secreto.

Secrets (de CI)Infraestructura

Valores sensibles (tokens, claves de API, credenciales de deploy) que guardas cifrados en la configuración del repo y lees en el workflow con ${{ secrets.NOMBRE }}. Nunca se escriben en el YAML ni se imprimen en los logs: así un token no acaba en el historial público.

SelectorCSS

La parte de una regla CSS que decide a qué elementos afecta. Un selector de tipo (h1, p) apunta a todos los de ese tipo; uno de clase (.hero-card) solo a los que tengan esa clase.

Selector de claseCSS

Selector que apunta a los elementos con una clase: .hero-card { ... } afecta a cualquiera con class="hero-card". Es el más habitual: reutilizable y de especificidad moderada.

Selector de IDCSS

Selector que apunta al único elemento con un id: #cabecera { ... }. Mayor especificidad que las clases y no reutilizable; en la práctica se reserva para anclas, no para estilar.

Selector de tipoCSS

Selector que apunta a todos los elementos de una etiqueta: p { ... } afecta a todos los <p>. Útil para bases globales; demasiado amplio para estilar un componente concreto.

semverTooling y bundlers

Versionado semántico MAJOR.MINOR.PATCH: major sube con cambios que rompen, minor con funciones nuevas compatibles, patch con arreglos. Los rangos del package.json: ^ bloquea el major (^3.6.0 admite 3.x), ~ bloquea el minor (~3.6.0 admite 3.6.x), y sin símbolo es exacto.

SEO (posicionamiento en buscadores)La web y el navegador

El conjunto de prácticas para que un buscador entienda y posicione bien tu página: HTML semántico, títulos y descripciones correctos, contenido presente en el HTML inicial y metadatos. Una SPA con el body vacío lo tiene difícil; SSR y SSG lo resuelven.

Server-stateReact

Datos que viven en el servidor y de los que solo tienes una copia en caché que puede quedar desactualizada. A diferencia del client-state (controlado por el navegador), el server-state puede cambiar fuera de tu control: otro usuario lo modifica, pasa el tiempo o el servidor lo actualiza.

Service workerLa web y el navegador

Un script que el navegador ejecuta en segundo plano, separado de la página, y que actúa como un proxy entre la app y la red: puede interceptar las peticiones (fetch) y responder desde una caché propia. Es lo que permite que una PWA funcione sin conexión. Requiere HTTPS. Es el mismo mecanismo que usa MSW por debajo (Nivel 8).

Servidor de desarrolloTooling y bundlers

El servidor local que arranca un bundler como Vite con npm run dev (p. ej. en localhost:5173). Su gracia es la recarga en caliente: guardas un fichero y el navegador refleja el cambio al instante, a menudo sin perder el estado de la página. Sustituye al guardar-y-pulsar-F5.

SetJavaScript

Colección de valores ÚNICOS: cada valor entra una sola vez, los duplicados se ignoran. Se maneja con add, has, delete y size (no length). No tiene índices: es para pertenencia y unicidad, no para acceder por posición. Se recorre con for...of o spread.

settings.jsonGeneral

El fichero JSON donde VSCode guarda toda su configuración. Editarlo a mano te da control total y, sobre todo, entender tus propios ajustes el día que algo se comporta raro.

Shadow DOMReact

Un DOM encapsulado y aislado que ofrece el navegador a los web components: su marcado y sus estilos no se mezclan con el resto de la página. No tiene relación con el Virtual DOM de React, aunque el nombre se parezca.

Shell y terminalGeneral

La terminal es la ventana donde escribes órdenes en texto; la shell es el programa que las interpreta (bash, zsh...). Juntas son la forma más directa y reproducible de mandar cosas al ordenador.

Single-Page Application (SPA)React

Aplicación web que carga el HTML una sola vez; a partir de ahí, JavaScript cambia la vista sin recargar la página. La navegación es instantánea y el estado de React se conserva entre pantallas. Trade-off: peor SEO y primera carga más lenta que una web clásica sin SSR.

SingletonGeneral

Patrón de diseño que garantiza una única instancia de algo en toda la aplicación (una configuración global, un store). Cómodo, pero a menudo un antipatrón: es estado global disfrazado, difícil de aislar en los tests y de rastrear.

Sistema de diseñoGeneral

Una fuente única de verdad para cómo se ve y se comporta un producto: los design tokens (colores, espaciados, radios con nombre), una librería de componentes ya construidos y consensuados, y su documentación. Resuelve la consistencia a escala: con muchas manos tocando el mismo producto durante años, evita cinco botones casi-iguales y que cada equipo reinvente lo que ya existe.

Skill (de Claude Code)IA

Una capacidad reutilizable y empaquetada que el asistente puede invocar para una tarea concreta (por ejemplo, crear un commit con un formato fijo) en vez de explicársela cada vez.

Slice (Redux Toolkit)React

En Redux Toolkit, un createSlice() define una porción del estado global con su nombre, estado inicial y sus reducers en un solo bloque. Genera automáticamente los action creators y los tipos de acción.

Smoke testTesting

Un test rápido que comprueba que lo esencial de la app funciona —que 'arranca sin echar humo'— recorriendo el camino crítico de principio a fin: cargar, una acción clave, ver el resultado. El nombre viene del hardware: enchúfalo y mira si echa humo. Como todo e2e, se escriben pocos y solo sobre los flujos que pagan las facturas.

Snapshot testingTesting

Técnica que compara una salida (un objeto, un error, el HTML que pinta un componente) contra una FOTO guardada antes: la primera corrida la guarda, las siguientes fallan si difiere. Útil para salidas pequeñas y estables que de verdad revisas; peligrosa en fotos enormes que el equipo acaba actualizando a ciegas con -u, donde el test deja de proteger.

SOLIDGeneral

Cinco principios de diseño: SRP (una sola razón para cambiar), OCP (abierto a extensión, cerrado a modificación), LSP (los subtipos sustituyen a su tipo), ISP (interfaces pequeñas y específicas) y DIP (depende de abstracciones, no de detalles concretos).

some()JavaScript

Devuelve true si AL MENOS UN elemento del array cumple la condición.

sort()JavaScript

Ordena un array en el sitio (MUTA el original) según una función de comparación. Sin comparador ordena como texto, lo que da sorpresas con números.

Source mapTooling y bundlers

Un fichero que mapea el código de producción (minificado y transpilado) de vuelta a tu código fuente original, línea a línea. Permite que las DevTools te muestren el error en tu .ts legible en vez de en el bundle ilegible.

Spread (...)JavaScript

Operador ... que REPARTE: despliega las propiedades de un objeto o los elementos de un array en uno nuevo ({ ...obj, campo: valor }, [...arr]), o despliega un array en argumentos sueltos al llamar una función (Math.max(...nums)). La forma más directa de copiar y combinar sin mutar. Su gemelo que recoge es rest.

Spread en arraysJavaScript

Dentro de un array nuevo, ...otroArray vuelca todos sus elementos en ese sitio: [...a, ...b] combina dos listas y [...a, 'x', ...b] inserta en medio. Crea siempre un array nuevo; el patrón [...lista].sort() ordena sin mutar el original.

Spread en llamadasJavaScript

Desplegar un array en argumentos sueltos al llamar una función: Math.max(...numeros) equivale a Math.max(120, 90, 200). Convierte un array en los valores sueltos que la función espera; sin el spread, recibiría un único array.

Spread en objetosJavaScript

Dentro de un objeto nuevo, ...otroObjeto copia todas sus propiedades. { ...heroe, victorias: 79 } copia el héroe y pisa un campo sin mutar (cómo React actualiza estado). Al fusionar { ...base, ...override }, en las claves repetidas gana el último spread.

SprintTrabajo en la empresa

El ciclo de trabajo de Scrum: un periodo fijo (normalmente 1-2 semanas) en el que el equipo se compromete a un conjunto de trabajo y al final entrega un incremento terminado. Es el latido del equipo.

Sprint planningTrabajo en la empresa

La ceremonia que abre el sprint: el equipo elige del backlog qué entra en el sprint y acuerda un objetivo. Sale con el sprint backlog comprometido.

Sprint review (demo)Trabajo en la empresa

La ceremonia que cierra el sprint mostrando el incremento terminado a los stakeholders para recoger feedback. Se demuestra lo HECHO, no lo prometido.

SpyTesting

Un doble que REGISTRA cómo se le llamó (cuántas veces, con qué argumentos) para que lo compruebes: expect(fn).toHaveBeenCalledWith(...). Lo creas con vi.fn(), o envuelves un método real con vi.spyOn(objeto, 'metodo'). Afirma sobre el comportamiento, no solo sobre el resultado.

SSG (generación estática)React

El HTML con contenido se genera UNA vez, en el momento del build, y se sirve como ficheros estáticos. Une lo mejor de los dos mundos para contenido que cambia poco: HTML lleno para el SEO y el coste de un hosting estático. Es como funciona este curso, hecho con Astro.

SSR (renderizado en servidor)React

El servidor ejecuta el componente y devuelve el HTML ya con el contenido en cada petición; el navegador lo muestra al instante y luego lo hidrata. Mejor para SEO y para el primer pintado, a cambio de necesitar un servidor que ejecute código (no vale un hosting estático).

Staging areaGit

La bandeja de salida donde, con git add, eliges qué cambios entrarán en el próximo commit. No tienes que incluir todo cada vez.

Stakeholder (parte interesada)Trabajo en la empresa

Cualquiera con interés en el producto o afectado por él: negocio, usuarios, soporte, legal, otros equipos. Saber quiénes son es saber a quién afecta una decisión y de quién hay que recoger feedback (por ejemplo, en la review del sprint).

StashGit

Un cajón temporal donde guardas cambios a medias sin commitearlos, para dejar el working directory limpio (p. ej. atender algo urgente) y recuperarlos luego con git stash pop.

StepInfraestructura

Cada paso dentro de un job. Un step o usa una action reutilizable (uses: actions/checkout) o ejecuta un comando de shell (run: pnpm test). Los steps de un job corren en orden, sobre la misma máquina.

StoreReact

El objeto central de una librería de estado global que agrupa el estado y las acciones que lo modifican. Todas las actualizaciones pasan por él; los componentes se suscriben y reciben el valor actualizado cuando cambia.

StoryTesting

En Storybook, un componente en un estado concreto: un export con sus args (las props con las que se monta). Se escribe en formato CSF (Component Story Format): un meta que dice a qué componente pertenece el fichero y un export por cada story. Cada story documenta un estado, y los controls del panel dejan tocar sus args en vivo.

Story pointsTrabajo en la empresa

Una medida RELATIVA del esfuerzo de una historia (complejidad + incertidumbre), no horas. Estimar en puntos evita la falsa precisión de las horas y se compara una historia con otra, no con el reloj.

StorybookTesting

Un taller para construir, ver y documentar componentes AISLADOS, fuera de la app: abres el componente solo, en todos los estados que quieras, sin montar la pantalla entera. Cada componente trae un fichero .stories.tsx; Storybook genera su documentación (autodocs) y puede probar su comportamiento con play functions.

StrategyGeneral

Patrón que encapsula algoritmos intercambiables tras un tipo común. Una función recibe la estrategia y la aplica sin saber cuál es; añadir una estrategia nueva no obliga a modificar la función ni las demás (la O de SOLID: abierto a extensión, cerrado a modificación).

strict (modo estricto)TypeScript

La opción más importante de tsconfig.json: activa de un golpe noImplicitAny, strictNullChecks y el resto de comprobaciones de seguridad de tipos. En un proyecto nuevo, siempre debe ser true.

stringJavaScript

Tipo primitivo para texto. Se escribe entre comillas simples o dobles: 'Tracer' o "Apoyo".

String multilíneaJavaScript

String que contiene saltos de línea reales. Los template literals los admiten de forma nativa: un Enter en el código fuente es un salto de línea en el string resultante.

String.rawJavaScript

La única etiqueta (tagged template) que trae incorporada el lenguaje. Devuelve el texto del template SIN procesar las secuencias de escape: \n queda como barra y n, no como salto de línea. Útil para rutas de Windows y para patrones de regex escritos como texto (\d en vez de \\d).

structuredCloneJavaScript

Función del navegador que hace una copia profunda de un valor (objeto, array, Map, Date…). Alternativa moderna a JSON.parse(JSON.stringify()), que pierde funciones, fechas y undefined.

StubTesting

Un doble que devuelve RESPUESTAS PREPARADAS, sin que afirmes nada sobre él. Sirve para alimentar al código bajo prueba con datos controlados: vi.fn().mockReturnValue(x) o .mockResolvedValue([...]) para una promesa. Solo te importa lo que da, no cómo se le llamó.

Subtask (subtarea)Trabajo en la empresa

El trozo más pequeño: una división técnica de una historia (p. ej. 'UI del filtro' y 'lógica + tests'). Ayuda a repartir el trabajo de una story dentro del equipo.

SuspenseReact

<Suspense fallback={...}> marca una parte del árbol que puede no estar lista (sus datos aún cargan): React muestra el fallback mientras tanto y el contenido cuando llega. Es la pieza que hace posible use(promesa).

Swimlane (calle)Trabajo en la empresa

Una fila horizontal del tablero que agrupa tickets por un criterio (por persona, por epic, por prioridad). Ayuda a leer un tablero con mucho trabajo.

switchJavaScript

Estructura de control para elegir entre múltiples casos concretos. Cada case necesita break para evitar el fall-through.

SymbolJavaScript

Un valor primitivo único e irrepetible: dos Symbol('x') nunca son iguales, aunque lleven la misma descripción. Se usa como clave de objeto que no colisiona con ninguna otra (ni con futuras). Los 'well-known symbols' como Symbol.iterator son claves incorporadas que enganchan tu objeto a un protocolo del lenguaje.

Tabla (<table>)HTML

Elemento para datos tabulares: información que cobra sentido al cruzar filas y columnas. Se compone de <thead>/<tbody>, <tr> (filas), <th> (encabezados, con scope) y <td> (datos). No se usa para maquetar páginas.

Tablero (board)Trabajo en la empresa

La vista de columnas (To Do, In Progress, In Review, Done) por las que se mueven los tickets. Hace visible de un vistazo en qué estado está cada trabajo y dónde se atasca.

Tag (etiqueta de versión)Git

Un marcador fijo sobre un commit concreto, casi siempre para señalar una versión publicada (v1.0.0). A diferencia de una rama, no se mueve.

Tagged template (plantilla etiquetada)JavaScript

Poner una función justo delante de un template literal —etiqueta`texto ${valor}`— para que, en vez de montar el string, esa función reciba los trozos de texto y los valores interpolados por separado y decida qué construir. Es el mecanismo detrás de styled-components (styled.div`...`) y de gql`...` o sql`...`.

TanStack QueryReact

Librería para gestionar server-state en React. Añade una capa de caché entre los componentes y el servidor: useQuery carga y cachea datos identificados por una queryKey; useMutation modela las escrituras. Incluye deduplicación, reintento automático y revalidación.

target (del compilador)TypeScript

La opción de tsconfig que define a qué versión de JavaScript compila TypeScript el código fuente. ES2022 y ESNext son los valores habituales en proyectos modernos con Vite.

TDD (test-driven development)Testing

Escribir el test ANTES del código, en un ciclo corto rojo-verde-refactor. El test define el comportamiento esperado; la implementación lo persigue. Obliga a pensar primero qué debe hacer el código y deja la suite hecha de paso.

Temperatura (IA)IA

Parámetro que regula cuánto arriesga el modelo al elegir el siguiente token: baja = respuestas más deterministas y repetibles; alta = más variadas y creativas, y más propensas a desviarse.

Template literal typeTypeScript

Tipos de string construidos a nivel de tipos con la misma sintaxis de template literal de JavaScript: a partir de un literal o una unión generan nuevos literales (p. ej. anteponer 'on' y capitalizar para obtener 'onClick'). Combinados con uniones generan todas las combinaciones; muy usados en key remapping para construir nombres de clave.

Template literalsJavaScript

Strings delimitados por acentos graves (`) que permiten interpolar expresiones con ${...} y contener saltos de línea reales sin necesidad de \n ni concatenación.

Test de integraciónTesting

Prueba que varias piezas funcionan bien JUNTAS: un pipeline de funciones encadenadas o —en React— una feature entera (varios componentes + su estado + la red) recorriendo un flujo de usuario. Cubre lo que los unitarios no ven: la costura donde una pieza le pasa algo a otra, que por separado ya funcionan.

Test end-to-end (e2e)Testing

Prueba la aplicación entera como la usaría una persona, de principio a fin y en un navegador real (abrir la página, escribir, pulsar, comprobar lo que aparece). Es el test más realista pero también el más lento y frágil: la cúspide de la pirámide.

Test flakyTesting

Un test que a veces pasa y a veces falla SIN que el código haya cambiado. Sus causas típicas: estado compartido entre tests (depende del orden), dependencia del tiempo (new Date()) o del azar (Math.random()), y carreras asíncronas (un sleep fijo). Su peligro real no es la molestia: enseña al equipo a relanzar hasta verde, y el día que el fallo es una regresión de verdad, también la sueltan a producción.

Test parametrizadoTesting

Un mismo test ejecutado sobre una tabla de casos, sin repetir el cuerpo. En Vitest se escribe con it.each([...])('nombre con %s', (a, b) => ...): cada fila de la tabla genera su propio caso, con su línea en el informe.

Test runnerTesting

El programa que encuentra tus ficheros de test, los ejecuta, comprueba las aserciones y te informa de cuáles pasan y cuáles fallan. En este curso el runner es Vitest; se lanza desde la terminal con un script de npm.

Test unitarioTesting

Prueba una pieza pequeña y aislada del código —normalmente una función— por separado, sin sus dependencias. Es el test más rápido y más barato de escribir, y el que más vas a tener: la base de la pirámide.

TestingTesting

Escribir código que comprueba, de forma automática y repetible, que otro código hace lo que debe. Un test es una especificación ejecutable: describe el comportamiento esperado y avisa en cuanto deja de cumplirse, sin que nadie tenga que probar a mano.

Testing a nivel de tiposTypeScript

Comprobar tipos en compilación con helpers como Equal<A, B> (true si A y B son el mismo tipo) y Expect<T extends true> (solo compila si T es true): un test que deja de cumplirse sale subrayado en rojo. Se complementa con @ts-expect-error para afirmar que una línea DEBE fallar.

Testing LibraryTesting

La librería estándar para testear componentes de React por su COMPORTAMIENTO, no por su implementación. Su lema: cuanto más se parezca tu test a cómo usa la interfaz una persona, más confianza te da. Con render(...) montas el componente en un DOM de prueba y con screen lo consultas como lo haría un usuario.

textContent / innerHTMLJavaScript

Propiedades para leer o escribir el contenido de un nodo. textContent trata el valor como texto puro (seguro con datos del usuario); innerHTML lo parsea como HTML (cómodo para contenido controlado, peligroso con datos externos: XSS).

thisJavaScript

Referencia al objeto sobre el que se está ejecutando un método. Dentro de un método de clase llamado de la forma normal, apunta a la instancia concreta.

this léxico (arrow function)JavaScript

Las arrow functions no tienen this propio: capturan el this del scope donde se definen (binding léxico). Por eso son la solución correcta como callbacks dentro de métodos, pero incorrectas como métodos directos de un objeto o clase.

throwJavaScript

Instrucción que LANZA un error: interrumpe la función en ese punto (lo que viene después no se ejecuta) y el control salta al try/catch que lo capture. Si nadie lo captura, el programa se detiene. Se lanza casi siempre un objeto Error: throw new Error('mensaje').

Ticket (issue)Trabajo en la empresa

Cada tarjeta de trabajo en Jira: una user story, un bug o una tarea, con su descripción, criterios, estado, asignado y estimación. La unidad que se mueve por el tablero.

Timeboxing (caja de tiempo)Trabajo en la empresa

Fijar de antemano un tiempo máximo a una actividad (una reunión, un sprint) y respetarlo. Obliga a centrarse en lo importante y evita que las cosas se eternicen.

Timers falsosTesting

Un reloj de mentira que controlas tú: con vi.useFakeTimers() los setTimeout/setInterval no corren solos, y vi.advanceTimersByTime(ms) avanza el tiempo a tu antojo. Sirve para probar código que depende del tiempo (un debounce, un sondeo) al instante y de forma determinista, sin esperas reales.

tipado estructuralTypeScript

TypeScript decide si un valor encaja en un tipo por su FORMA (qué campos tiene y de qué tipo), no por el nombre del tipo ni por una declaración explícita. Es lo contrario del tipado nominal de Java o C#, donde una clase debe declarar que implementa una interface. Si la forma coincide, encaja.

Tipar fetchTypeScript

Anotar el tipo de lo que devuelve una petición fetch. La respuesta real llega en runtime como unknown; la type assertion (as) acepta el tipo sin validarlo, mientras que Zod lo valida de verdad.

TipoTypeScript

La forma que TypeScript asigna a un valor (string, number, boolean, un array…). Decide qué operaciones son válidas sobre él y permite cazar errores antes de ejecutar. Al compilar a JavaScript, los tipos desaparecen.

Tipo de función (call signature)TypeScript

El tipo de una función, escrito con flecha: (a: Heroe, b: Heroe) => number describe CUALQUIER función con esa forma. Se usa para tipar una variable o un parámetro que recibe otra función (un callback). Al pasar el callback, TypeScript infiere los tipos de sus argumentos a partir de esta firma.

Tipo literalTypeScript

Un tipo cuyos únicos valores válidos son valores concretos, p. ej. los tres roles del Team Builder como cadenas literales. La unión de tipos literales forma un conjunto cerrado que el compilador vigila.

Tipo recursivoTypeScript

Un tipo que se refiere a sí mismo en su definición, normalmente a través de un conditional type que reduce el problema en cada paso (como hace Awaited al desenvolver Promises anidadas) o que recorre una tupla elemento a elemento. Es la forma de expresar bucles a nivel de tipos.

TipografíaCSS

Conjunto de propiedades que controlan el texto: font-family, font-size, font-weight, line-height, text-align y letter-spacing. Una buena jerarquía guía el ojo al dato importante.

Tipos primitivosJavaScript

Los tipos de dato básicos de JavaScript: string, number, boolean, null, undefined, bigint y symbol. Son inmutables y se pasan por valor.

titleHTML

El elemento, dentro del <head>, que define el título de la página: el texto de la pestaña del navegador, el de un marcador guardado y el que muestra Google en sus resultados.

toBe vs toEqualTesting

toBe compara por IDENTIDAD (===, Object.is): vale para primitivos (números, strings, booleanos), pero con objetos y arrays falla salvo que sean la MISMA referencia. toEqual compara por ESTRUCTURA, campo a campo y en profundidad: es el que quieres para objetos y arrays. Es la misma distinción valor vs referencia que ya mordía en JavaScript.

toBeCloseToTesting

Matcher que compara números decimales con una tolerancia en vez de exigir igualdad exacta. Imprescindible cuando entra el error de coma flotante (0.1 + 0.2 no da 0.3): expect(x).toBeCloseTo(esperado, decimales).

toHaveNoViolationsTesting

El matcher de vitest-axe que pasa si el resultado de axe no tiene ninguna violación: expect(await axe(container)).toHaveNoViolations(). Si las hay, falla y las lista (qué regla se incumple y en qué elemento), igual que jest-dom da mensajes claros para el DOM. Como axe es asíncrono, se usa con await.

TokenIA

La unidad mínima en la que un modelo parte el texto: trozos de palabra, no caracteres ni palabras completas. El modelo lee y escribe en tokens, y se mide (y cobra) por ellos.

TokenizaciónIA

El proceso de partir un texto en tokens antes de que el modelo lo procese. Una misma frase puede dar más o menos tokens según el vocabulario del modelo: por eso 'tokens' no es lo mismo que 'caracteres' ni que 'palabras'.

Top-level awaitJavaScript

Poder usar await en el nivel superior de un módulo, sin envolverlo en una función async. Cómodo para inicializar un módulo con algo asíncrono, pero retrasa la carga del módulo que lo usa (y de quien lo importe).

toThrowTesting

Matcher que afirma que una función LANZA un error al ejecutarse. La función se pasa envuelta —expect(() => f()).toThrow()— para que expect controle la llamada y atrape el error; opcionalmente recibe un texto o regex que el mensaje debe contener.

transitionCSS

Suaviza el cambio de una propiedad entre dos estados a lo largo de un tiempo: transition: background 0.2s ease. Sin ella, un :hover cambia de golpe; con ella, se desliza. Respétala con prefers-reduced-motion para quien prefiere menos movimiento.

TranspilaciónTooling y bundlers

Traducir código de una forma a otra equivalente que el destino sí entiende: TypeScript o JSX a JavaScript, o JavaScript moderno a una versión más antigua para navegadores viejos. No reduce el tamaño (eso es la minificación); solo cambia la sintaxis.

Tree-shakingTooling y bundlers

Eliminar del bundle final el código que nadie importa ni usa (dead code). Funciona porque los módulos ES (import/export) son estáticos: el bundler sabe en compilación qué se usa y qué no. Menos código enviado, arranque más rápido.

Trofeo de testingTesting

Forma moderna de repartir el esfuerzo de testing (Kent C. Dodds) que recoloca el peso de la vieja pirámide hacia la INTEGRACIÓN: una base ancha de análisis estático (tipos, ESLint), unos unitarios, una banda gruesa de tests de integración —el punto dulce entre confianza y coste— y unos pocos e2e en la cúspide.

Truthiness narrowingTypeScript

Estrechar un tipo aprovechando la veracidad del valor: dentro de un if (valor), TypeScript descarta null y undefined. Cuidado, porque 0 y la cadena vacía también son falsy y quedarían fuera del if sin ser nulos.

Truthy / falsyJavaScript

Cualquier valor en JavaScript puede evaluarse como condición. Los seis valores falsy son: false, 0, '', null, undefined y NaN. Todo lo demás es truthy.

try / catch / finallyJavaScript

Estructura para capturar errores: try envuelve el código que puede fallar, catch (error) recibe el error lanzado y decide qué hacer, y finally se ejecuta SIEMPRE (haya ido bien el try o haya saltado al catch). Es la red que evita que un error tumbe el programa.

tsc (el compilador)TypeScript

El comando del compilador de TypeScript. Lee el tsconfig.json, comprueba los tipos de todo el proyecto y, salvo que se lo impidas con noEmit, genera el JavaScript equivalente. En proyectos con Vite se usa como tsc --noEmit: solo comprueba tipos, no emite ficheros (de eso ya se encarga Vite).

tsconfig.jsonTypeScript

El fichero JSON que configura el compilador de TypeScript en un proyecto: define qué reglas aplica, a qué versión de JavaScript compila y cómo resuelve los imports.

tuplaTypeScript

Array de longitud fija donde cada posición tiene su propio tipo, anotado entre corchetes y en orden: [string, number] es exactamente un texto y luego un número. A diferencia de string[] (cualquier cantidad de un mismo tipo), la tupla fija cuántos elementos hay y de qué tipo es cada uno; ideal para pares y registros de forma fija.

TurbopackTooling y bundlers

El bundler en Rust de Vercel, sucesor de webpack dentro de Next.js. Optimizado para Next y su modelo de renderizado; fuera de ese ecosistema, lo habitual es Vite con Rolldown.

TurborepoInfraestructura

Orquestador de tareas ligero para monorepos: declara las tareas en `turbo.json`, calcula el grafo de dependencias entre paquetes y ejecuta en paralelo lo que puede, en orden topológico lo que no puede. Incluye caché local y remota para no repetir trabajo ya hecho.

TWA (Trusted Web Activity)La web y el navegador

Un envoltorio de Android que muestra tu PWA a pantalla completa, sin barra de navegador, dentro de una app instalable desde la Play Store. Empaqueta tu web como APK sin reescribir nada: el mismo código web corre como app de Android. La herramienta habitual es Bubblewrap.

type aliasTypeScript

Un nombre para cualquier tipo: objetos, primitivos, arrays o tipos más complejos. Para objetos, la sintaxis es casi idéntica a interface; su ventaja es que puede nombrar cualquier tipo, no solo objetos.

Type assertionTypeScript

La construcción `valor as Tipo` que le dice a TypeScript «confía en mí, esto es de tipo Tipo» sin que el compilador lo compruebe. Si el dato real no cumple el tipo, la app falla en runtime sin previo aviso.

Type guard (guarda de tipo)TypeScript

Una función cuyo retorno es de la forma `param is Tipo`: si devuelve true, TypeScript estrecha el tipo del argumento allá donde se llame. Permite encapsular comprobaciones reutilizables (esHeroe, esRolValido).

Type-safeTypeScript

Que el sistema de tipos garantiza que no puedes pasar un valor del tipo incorrecto sin que el compilador lo rechace. Un código type-safe detecta esos errores antes de ejecutar, no en runtime.

typeofJavaScript

Operador que devuelve el tipo de un valor como string: typeof 120 devuelve "number", typeof "hola" devuelve "string". TypeScript lo usa además para estrechar tipos dentro de un if (narrowing). Trampa clásica: typeof null devuelve "object", así que hay que descartar null aparte.

typeof (operador de tipo)TypeScript

El operador typeof usado en posición de TIPO (no el typeof de narrowing, que corre en ejecución): toma un valor y devuelve su tipo estático. type Heroe = typeof tracer reutiliza la forma de un valor como tipo, en compilación.

UI optimistaReact

Mostrar de inmediato el resultado que esperas de una acción (un héroe añadido, un mensaje enviado) sin esperar a que el servidor confirme, y revertir solo si falla. La interfaz se siente instantánea.

Unicidad (deduplicar)JavaScript

Quedarse con valores sin repetir. El patrón estándar usa un Set: [...new Set(array)] mete el array en un Set (que descarta duplicados) y lo saca de nuevo como array. No existe array.unique().

Unidades CSSCSS

Valores que expresan tamaños y distancias. Las absolutas (px) no escalan; las relativas (rem, em, %, vw) dependen de un contexto. Para tipografía y espaciado se prefiere rem.

UniónTypeScript

El operador | crea un tipo que puede ser cualquiera de los indicados: number | string acepta ambos. Se usa cuando un valor puede tomar más de una forma y TypeScript debe conocerlas todas.

Unión discriminadaTypeScript

Una unión de objetos donde cada miembro tiene un campo con un tipo literal único (el discriminante). Al comparar ese campo, TypeScript sabe con exactitud de qué variante se trata y da acceso solo a sus campos propios.

unknownTypeScript

Como any pero seguro: acepta cualquier valor, pero te obliga a comprobar de qué se trata (narrowing) antes de usarlo. La puerta de entrada correcta para datos externos en los que no debes confiar a ciegas.

use()React

El hook use() de React 19 para LEER el valor de una promesa o de un context. A diferencia de los demás hooks, puede llamarse dentro de un if. Con una promesa, suspende el componente hasta que resuelve (envuelto en un Suspense).

useCallbackReact

Memoiza una FUNCIÓN: useCallback(fn, [deps]) devuelve la misma referencia mientras no cambien las deps. Solo importa si esa función es dependencia de un efecto o se pasa a un hijo envuelto en memo; en otro caso, no aporta nada.

useContextReact

El hook que lee el valor del context más cercano en el árbol. Suscribe al componente al context: cuando el value del Provider cambia, todos los consumidores con useContext se re-renderizan.

useEffectReact

El hook para sincronizar un componente con algo de fuera de React: pedir datos a una API, suscribirse a un evento, cambiar el título de la página. Corre DESPUÉS de pintar, y un array de dependencias decide cuándo se vuelve a ejecutar. No es para calcular datos derivados (eso va en el render).

useFormReact

El hook central de react-hook-form. Recibe un resolver (p. ej. zodResolver) y defaultValues, y devuelve register, handleSubmit, reset y formState. Tiparlo con el genérico <DatosFormulario> da autocompletado y comprobación de tipos en todos los campos.

useIdReact

Hook de React que genera un id único y estable por instancia del componente, pensado para atributos de accesibilidad: el htmlFor de un label, o el aria-describedby que ata un input a su mensaje de error. Evita hardcodear ids (que chocan si el componente se monta dos veces) y coincide entre servidor y cliente, así que no rompe el renderizado en servidor como haría un id aleatorio.

useMemoReact

Memoiza un VALOR calculado: useMemo(() => calculoCaro(datos), [datos]) lo recalcula solo cuando cambian sus dependencias. Útil para cálculos costosos o para mantener estable la referencia de un objeto o array.

useOptimisticReact

El hook de React 19 que implementa la UI optimista: muestras ya el resultado esperado de una acción mientras la operación de verdad ocurre por detrás, y si falla, React revierte solo al valor real.

useQueryReact

Hook de TanStack Query para cargar datos del servidor. Recibe una queryKey (el nombre de la consulta en caché) y una queryFn (función que devuelve una promesa). Devuelve { data, isLoading, isError, isFetching } y gestiona caché, reintento y revalidación automáticamente.

User story (historia de usuario)Trabajo en la empresa

Una unidad de trabajo descrita desde el valor para el usuario, con el formato 'Como [rol] quiero [acción] para [beneficio]'. No es una especificación técnica: es una conversación pendiente con sus criterios de aceptación.

user-eventTesting

El simulador de interacción de Testing Library. A diferencia de fireEvent (que dispara UN evento sintético suelto), user-event reproduce lo que hace una persona de verdad: al hacer clic mueve el puntero, enfoca, pulsa y suelta. Es asíncrono (se usa con await), y por eso es el estándar de 2026 para probar la interacción.

useReducerReact

El hook para estado con muchas transiciones relacionadas. En vez de varios setState sueltos, centralizas la lógica en un reducer y disparas 'acciones' que la describen: const [estado, dispatch] = useReducer(reducer, inicial).

useRefReact

Un hook para guardar un valor que sobrevive entre renders pero que, al cambiarlo, NO provoca repintado (a diferencia del estado). Sus usos típicos: acceder a un nodo del DOM (ref={miRef}) y guardar valores entre bambalinas, como el id de un temporizador.

useStateReact

El hook que le da memoria a un componente: const [valor, setValor] = useState(inicial). valor se conserva entre renders y setValor lo cambia Y avisa a React de que repinte. Una variable normal no sirve: se reiniciaría en cada render y cambiarla no provocaría ningún repintado.

useTransitionReact

El hook de React 19 para marcar una actualización como NO urgente (una transición). React prioriza lo urgente (que el input responda) y hace lo pesado (filtrar una lista enorme) sin bloquear; isPending te dice si la transición sigue en curso.

Utility typeTypeScript

Tipo genérico incluido en la librería estándar de TypeScript que transforma o deriva un tipo a partir de otro: Partial, Pick, Omit, Record, Readonly, ReturnType… Permiten reutilizar una sola interface como fuente de verdad.

Validación cruzadaReact

Regla de validación que compara dos o más campos a la vez (p. ej. victorias <= partidas). No puede hacerse con un validador de campo individual porque este solo ve su propio valor. En Zod se implementa con .refine() encadenado al z.object(), que recibe el objeto completo. El argumento path coloca el error en el campo correcto.

Validación en fronteraTypeScript

Patrón que valida los datos externos (API, formularios, ficheros) en el punto de entrada a la app, antes de que toquen el dominio. Solo cruzan la frontera si superan el schema; los corruptos se descartan sin romper la app.

Validación nativaHTML

Las comprobaciones que el navegador hace por sí solo antes de enviar un formulario, declaradas con atributos: required, min/max, minlength/maxlength, pattern, type="email". Sin una línea de JavaScript.

Valor por defecto en destructuringJavaScript

Respaldo que se aplica cuando la propiedad (o posición) falta o vale undefined: const { rango = 'Sin clasificar' } = heroe. Si la clave existe, gana el valor real; si no, se usa el defecto. Evita comprobaciones con if.

Valor vs referenciaJavaScript

Los primitivos (number, string, boolean, null, undefined) se almacenan y comparan por valor. Los objetos y arrays se almacenan por referencia: la variable guarda un puntero a memoria, no el objeto en sí, por lo que dos objetos con el mismo contenido no son ===.

Vanity metric (métrica de vanidad)Trabajo en la empresa

Una métrica que sube y queda bonita pero no informa ninguna decisión (usuarios registrados totales, visitas a la web). Frente a ella, una métrica accionable (usuarios activos, conversión). Optimizar vanity metrics es sentirse bien mientras el negocio no avanza.

varJavaScript

Palabra clave legacy para declarar variables. Tiene alcance de función (no de bloque) y sufre hoisting. No se usa en código moderno.

VariableJavaScript

Una caja con nombre que guarda un valor. Se declara con const, let o var y se usa por su nombre en el resto del código.

Variable de entornoTooling y bundlers

Un valor de configuración que vive FUERA del código y cambia según el entorno (desarrollo, producción): la URL de una API, un modo, una flag. Separar config del código permite el mismo build en sitios distintos sin recompilar.

Varianza (covarianza y contravarianza)TypeScript

Cómo se relaciona la asignabilidad de un tipo genérico con la de sus parámetros. Covarianza: si Perro extiende Animal, un contenedor de Perro suele valer donde se espera uno de Animal. En los parámetros de una función pasa al revés (contravarianza). TypeScript suele inferirla; los modificadores in/out la anotan de forma explícita.

Velocidad (velocity)Trabajo en la empresa

Los story points que un equipo completa de media por sprint. Sirve para que el propio equipo prevea cuánto cabe en el siguiente, no para compararse con otros equipos ni para meterle presión.

Ventana de contextoIA

La cantidad máxima de tokens (lo que le das más lo que genera) que el modelo puede tener a la vista a la vez. Cuando se llena, lo más antiguo deja de estar disponible y el modelo puede ignorar instrucciones o contexto previo.

VercelInfraestructura

Una plataforma de despliegue de cero configuración: conectas tu repo de GitHub y cada push se construye y publica solo, con una URL de producción y una de preview por cada PR. Creadores de Next.js; muy usada para frontend en 2026.

Vertical slice (corte vertical)Trabajo en la empresa

Una historia que entrega valor de punta a punta, por pequeña que sea, en vez de media feature que no sirve hasta tener la otra mitad. Permite entregar algo útil cada sprint y no acumular piezas a medias.

Virtual DOMReact

La copia ligera del DOM que React mantiene en memoria. Cuando algo cambia, React crea una versión nueva, la compara con la anterior y aplica al DOM real solo las diferencias, en vez de repintarlo todo.

Visión de productoTrabajo en la empresa

Adónde quiere llegar el producto a largo plazo, en una frase aspiracional. No es un plan: es el norte que da sentido a todo lo demás. Para el Team Builder: 'ser la forma más rápida de armar un equipo competitivo'.

ViteTooling y bundlers

Herramienta de frontend con servidor de desarrollo instantáneo (ESM nativo, sin bundling en dev) y build de producción optimizado. En 2026 (Vite 8) usa un único bundler en Rust, Rolldown, para dev y producción.

VitestTesting

El test runner estándar del ecosistema Vite en 2026: rápido (reaprovecha la maquinaria de Vite), entiende TypeScript y módulos ESM sin configurar nada, trae modo watch y una API casi idéntica a la de Jest. Es el que usamos en todo el curso.

vitest-axeTesting

La integración de axe con el test runner. Aporta la función axe(contenedor) —que corre axe-core sobre lo que has renderizado— y el matcher toHaveNoViolations para afirmar el resultado. Así la accesibilidad deja de depender de acordarse de revisarla a mano: se convierte en un test más que corre en cada cambio. (Su equivalente para Jest es jest-axe.)

voidTypeScript

El tipo de retorno de una función que no devuelve nada útil (solo provoca un efecto, como registrar por consola). Matiz clave: cuando un tipo de callback dice () => void, significa que quien llama IGNORA el valor devuelto; por eso una función que sí devuelve algo (como push) es asignable donde se espera () => void. No es 'prohibido devolver', es 'no se mirará el resultado'.

Water-scrum-fallTrabajo en la empresa

El híbrido real más común: Scrum en el día a día del equipo, pero rodeado de waterfall —un gran plan cerrado al principio y una gran entrega al final—. El equipo itera por dentro mientras la empresa sigue esperando fechas y alcance fijos.

WCAGGeneral

Web Content Accessibility Guidelines: el estándar internacional de accesibilidad web. Organiza los criterios en cuatro principios (perceptible, operable, comprensible, robusto) y tres niveles (A, AA, AAA). AA es el objetivo habitual.

WeakMapJavaScript

Como un Map, pero con claves que SOLO pueden ser objetos y que no impiden liberar memoria: si el objeto-clave deja de usarse en el resto del programa, su entrada se descarta sola. Ideal para asociar datos privados a un objeto o cachear sin fugas de memoria. No es iterable.

WeakSetJavaScript

Como un Set, pero solo de objetos y con referencias débiles: sirve para marcar que un objeto 'ya fue procesado' o 'está visto' sin impedir que se libere de memoria cuando nadie más lo use. No es iterable.

Web app manifestLa web y el navegador

Un fichero JSON (manifest.json) enlazado desde el HTML que describe la app para que se pueda instalar: su nombre, los iconos, el color de tema, la URL de inicio y cómo se muestra (pantalla completa, ventana propia). El navegador lo lee para ofrecer la opción de instalar.

web-vitalsLa web y el navegador

La librería de Google que mide los Core Web Vitals (LCP, CLS, INP) tal y como los vive cada usuario real en su navegador, para enviarlos a tu analítica. Es la herramienta estándar para hacer RUM (medición de campo).

webpackTooling y bundlers

El bundler que dominó el frontend durante una década: potentísimo y configurable hasta el extremo, pero lento y con una configuración famosa por su complejidad. Sigue vivo en miles de proyectos heredados; en proyectos nuevos lo han desplazado Vite y compañía.

Widening (ensanchamiento)TypeScript

TypeScript ensancha un literal a su tipo general cuando el valor puede cambiar: let x = "Daño" se infiere como string, pero const x = "Daño" se queda en el literal "Daño". Las propiedades de un objeto literal también se ensanchan. as const evita el widening y conserva el tipo más estrecho.

WorkflowInfraestructura

Un proceso automatizado definido en un fichero YAML dentro de .github/workflows/. Declara cuándo se dispara (on:), en qué máquina corre y qué jobs y steps ejecuta. Un repo puede tener varios: uno para tests, otro para deploy.

Working directoryGit

La zona donde editas: tus ficheros normales, los que ves en el explorador, antes de seleccionar qué cambios guardar.

WorkspaceTooling y bundlers

Cada paquete declarado en `pnpm-workspace.yaml` dentro de un monorepo. pnpm resuelve las dependencias internas con symlinks en lugar de descargarlas de npm, usando el protocolo `workspace:*` para referenciarlas.

XSS (cross-site scripting)JavaScript

Vulnerabilidad por la que un dato no confiable (el apodo que escribe un usuario) acaba ejecutándose como código en la página: un <script> o un <img onerror> insertado sin tratar corre en el navegador de quien lo ve. Se neutraliza escapando los valores antes de meterlos en el HTML.

YAGNIGeneral

You Aren't Gonna Need It: no construyas lo que crees que hará falta 'algún día'. Añade la flexibilidad cuando el requisito existe de verdad, no antes.

yarnTooling y bundlers

Otro gestor de paquetes. Su versión clásica (v1) fue muy popular; la moderna (Berry/PnP) cambió bastante. Se menciona porque lo verás en proyectos existentes, pero el peso de 2026 está en npm y pnpm.

yieldJavaScript

La palabra clave que, dentro de un generador (function*), emite un valor y PAUSA la función justo ahí hasta el siguiente next(). Es lo que convierte una función en una secuencia que se va produciendo paso a paso en vez de calcularse entera de golpe.

z-indexCSS

Controla qué elemento queda por encima de otro cuando se superponen. Solo afecta a elementos posicionados (position distinto de static): a mayor z-index, más cerca del usuario.

z.inferTypeScript

Utilidad de tipos de Zod que extrae el tipo de TypeScript equivalente a un schema. Permite que el tipo y la validación compartan una única fuente de verdad: si el schema cambia, el tipo cambia solo.

ZodTypeScript

Librería de validación en runtime para TypeScript. Defines schemas que comprueban la forma real de un dato y lanzan errores descriptivos si no cumple la estructura esperada.

zodResolverReact

Adaptador de @hookform/resolvers/zod que conecta un schema Zod con react-hook-form. Se pasa como resolver en useForm. Cuando handleSubmit valida, ejecuta el schema Zod contra los datos del formulario y devuelve los errores en el formato que RHF entiende.

ZustandReact

Librería de estado global minimalista para React. Un create() define el estado y las acciones; el hook resultante suscribe al componente. Sin Provider, sin boilerplate. Ideal para apps de tamaño medio donde el estado local y el context se quedan cortos.