Tema: web
-
Usar correctamente los códigos de estado HTTP: la primera bifurcación del cliente
Los clientes, las cachés y los agentes deciden únicamente a partir del código de estado si reintentar, recargar o desistir: 201/204 para el éxito con y sin cuerpo, 401 frente a 403 para la falta de autenticación frente a la falta de autorización, 409/412/428 para conflictos y condiciones previas, 429 y 503 con Retry-After para «más tarde». Un 200 con un objeto de error engaña a todos.
-
Hojas de estilo de impresión: hacer que una página web sea utilizable en papel y como PDF
Una hoja de estilo de impresión oculta la navegación y los controles, expande el contenido colapsado, imprime el destino de los enlaces después del texto del enlace, fija el tamaño de página y los márgenes con @page, evita que las tablas y figuras se corten entre páginas con break-inside: avoid, y le pide al navegador que conserve los colores de fondo esenciales. Pruébala con la vista previa de impresión del navegador, no solo en pantalla.
-
Imágenes responsivas con srcset, sizes y picture
srcset con descriptores de ancho junto con un atributo sizes permite que el navegador elija el archivo de imagen más pequeño que llena el espacio disponible según el viewport y la densidad de píxeles actuales; los descriptores x sirven imágenes de tamaño fijo a varias densidades; picture con elementos source gestiona la dirección de arte y el respaldo de formato. Conviene mantener siempre width y height para que el diseño no se desplace mientras carga la imagen.
-
Prevenir cross-site scripting mediante la codificación de salida
Escapar los datos según el contexto exacto en el que se insertan (texto HTML, atributo, JavaScript, URL, CSS), usar un motor de plantillas que escape por defecto, no construir nunca HTML mediante concatenación de cadenas, y respaldarlo con una CSP estricta.
-
Validación nativa de formularios HTML: required, pattern, type y la Constraint Validation API
HTML valida los controles de formulario antes del envío sin necesidad de script: required, minlength, min/max, pattern y los tipos de entrada definen restricciones, el navegador bloquea el envío y muestra un mensaje, CSS puede aplicar estilos a :user-invalid, y la Constraint Validation API expone el mismo estado a los scripts. Es una capa de usabilidad, no una capa de seguridad; el servidor vuelve a validar.
-
Los servicios de enlaces cortos con identificadores secuenciales reciben más solicitudes de enumeración que los servicios con identificadores aleatorios
Hipótesis: un acortador de URL cuyas claves son un contador codificado en base62 permite que cualquiera recorra todos los enlaces, mientras que las claves aleatorias de longitud fija hacen que la mayoría de los intentos fallen; la propuesta es que los servicios secuenciales presentan una proporción mayor de solicitudes de claves existentes procedentes de clientes que nunca recibieron el enlace, y que la proporción de respuestas 404 no distingue entre ambos casos.
-
Etiquetas de idioma: BCP 47 en contenido y APIs
Las etiquetas de idioma combinan un código de idioma ISO 639 con subetiquetas opcionales de escritura y de región (de, de-CH, zh-Hant); se usan para declarar el idioma del contenido, en el atributo lang de HTML y en filtros de API, y conviene validarlas en lugar de aceptar texto libre.
-
Páginas 404 personalizadas y soft 404: servir la página de error con el estado de error
Una página 404 personalizada solo ayuda a quienes la visitan si se sirve con el estado 404; una página de no encontrado servida con 200 es un soft 404 que los rastreadores siguen solicitando y que los buscadores excluyen. El error_page de nginx puede reescribir el estado (error_page 404 =200 ...), que es exactamente cómo se crean los soft 404 por accidente; conviene conservar el estado, hacer útil la página y comprobarlo con curl -I.
-
Almacenamiento en el navegador: comparativa entre cookies, Web Storage e IndexedDB
Las cookies viajan con cada solicitud y son pequeñas por especificación; localStorage y sessionStorage son almacenes síncronos de cadenas con pocos MiB por origen; IndexedDB es asíncrono, transaccional y comparte la cuota amplia del origen. Todo el almacenamiento del navegador es best-effort a menos que se conceda persistencia, y está delimitado por origen.
-
La política del mismo origen: qué es un origen y qué aísla
Un origen es el esquema, el host y el puerto de una URL. Un script puede leer y modificar documentos, almacenamiento y respuestas del mismo origen; las lecturas entre orígenes se bloquean de forma predeterminada, mientras que las escrituras entre orígenes, como los envíos de formularios, y la incrustación, como imágenes y scripts, suelen estar permitidas. CORS relaja las lecturas; aun así siguen siendo necesarias las defensas contra CSRF.
-
Hacer que un sitio web sea legible para agentes: robots.txt, sitemaps y llms.txt
Los agentes y rastreadores encuentran contenido a través de un pequeño conjunto de convenciones: robots.txt para las reglas de acceso y la ubicación del sitemap, un sitemap XML con fechas de modificación reales, y llms.txt como guía breve y curada; ninguna de ellas sustituye a la autenticación.
-
Registrar una observación HTTP acotada
Un método conciso para registrar una observación HTTP de modo que otra persona colaboradora pueda repetirla sin exponer credenciales ni datos privados.
-
Carga de fuentes web: font-display, preload, subconjuntos con unicode-range y alternativas ajustadas por métricas
Mostrar texto en el primer renderizado y cargar la fuente de marca sin saltos de maquetación: crear subconjuntos de las tipografías con unicode-range para descargar solo los sistemas de escritura usados, elegir font-display según el papel (optional para el cuerpo de texto, swap para los títulos), precargar con crossorigin los archivos del primer renderizado y declarar una fuente alternativa con size-adjust y las anulaciones de ascent/descent para que las líneas se ajusten igual antes y después del intercambio.
-
Eventos enviados por el servidor frente a WebSockets
Los eventos enviados por el servidor transmiten eventos de texto del servidor al cliente sobre HTTP normal, con reconexión automática e identificadores de último evento; los WebSockets ofrecen un canal bidireccional con capacidad binaria y protocolo propio. Elegir SSE para actualizaciones en un solo sentido y WebSockets cuando el cliente debe enviar con frecuencia.
-
Componentes web: elementos personalizados, shadow DOM y dónde termina el encapsulamiento
Los elementos personalizados registran una clase bajo un nombre de etiqueta con guion y con callbacks de ciclo de vida; el shadow DOM le otorga un subárbol acotado cuyos estilos no se filtran en ningún sentido; las plantillas y los shadow roots declarativos aportan el marcado. Cada aspecto que cruza el límite, desde el estilo mediante parts y propiedades personalizadas hasta la participación en formularios vía ElementInternals y la asociación de etiquetas, debe abrirse de forma deliberada.
-
La cabecera Link y los tipos de relación de enlace
El RFC 8288 permite que cualquier respuesta HTTP incluya enlaces tipados en una cabecera Link: <destino>; rel="relación" más los parámetros opcionales anchor, hreflang, type, title y media. Los nombres de relación proceden del registro de la IANA (next, prev, canonical, alternate, describedby, preload) o son URI absolutas para extensiones privadas. Es el modo en que las respuestas no HTML señalan a sus vecinas y en que el código 103 Early Hints indica a un navegador qué obtener por adelantado.
-
Web Vitals: qué miden LCP, INP y CLS
Core Web Vitals son tres métricas de campo: Largest Contentful Paint (tiempo de renderizado del elemento visible más grande, objetivo 2.5 s), Interaction to Next Paint (latencia de la interacción más larga, objetivo 200 ms) y Cumulative Layout Shift (movimiento inesperado, objetivo 0.1), cada una evaluada en el percentil 75 de las cargas de página.
-
¿Cuándo sigue mereciendo la pena el enrutamiento en el cliente ahora que los navegadores ofrecen bfcache, prerenderizado y transiciones de vista entre documentos?
Pregunta abierta: los enrutadores en página se adoptaron para evitar las cargas completas de página, a costa de servir un shell, gestionar los 404, restaurar el desplazamiento y el foco, y un paquete que debe llegar primero; la caché de retroceso/avance, la API Speculation Rules y las transiciones de vista entre documentos abordan ahora las motivaciones originales en los sitios de varias páginas. ¿Para qué sitios y qué patrones de interacción sigue ganando de forma mensurable un enrutador en página?
-
Fundamentos de Web Push: suscripciones, claves VAPID y el servicio push
El navegador se suscribe al servicio push de su proveedor y entrega a la página un endpoint más un conjunto de claves; el servidor de la aplicación envía mensajes cifrados a ese endpoint mediante POST con un encabezado TTL y un JWT VAPID (ES256, aud = origen del servicio push, exp de máximo 24 horas) cuya clave pública se pasó a PushManager.subscribe como applicationServerKey. Un 201 significa aceptado, no entregado.
-
Validar, almacenar y servir archivos subidos por usuarios
Aceptar solo los tipos de archivo que la función necesita, decidir el tipo mediante una lista blanca de extensiones más una comprobación del contenido, en lugar del Content-Type que envía el cliente, renombrar con un identificador aleatorio, aplicar límites de tamaño antes y después de la descompresión, almacenar fuera de la raíz web o en un host separado, y servir a través de un manejador que fije el tipo, nosniff y Content-Disposition, idealmente desde un origen separado.
Legible por máquina: JSON