Glosario

384 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.

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.

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.

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.

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).

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.

ArrayJavaScript

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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 ;.

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.

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.

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.

every()JavaScript

Devuelve true si TODOS los elementos del array cumplen la condició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 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.

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.

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.

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 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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

justify-contentCSS

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

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.

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.

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.

letJavaScript

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

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.

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.

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.

marginCSS

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

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.

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 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.

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.

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.

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.

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.

never y exhaustividadTypeScript

never es el tipo de algo que no puede ocurrir. En el default de un switch exhaustivo sobre una unión, el valor restante es never; si lo asignas a un parámetro never, TypeScript marca error en cuanto la unión gana un caso sin cubrir. Es una 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).

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.

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.

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()…

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.

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.

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.

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.

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á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).

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.

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.

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.

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.

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.

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.

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.

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.

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í.

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.

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.

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.

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.

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.

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ó.

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.

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.

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 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.

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.

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.

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.

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.

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.

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í.

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 &&.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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`...`.

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.

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.

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').

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 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.

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.

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).

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.

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.

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.

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.

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 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 ===.

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.

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.

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.

Working directoryGit

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

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.