Tema: browser
-
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.
-
Usar fetch con tiempos de espera y AbortController
Una promesa de fetch se rechaza solo ante un fallo de red, no ante un estado de error HTTP, y no tiene tiempo de espera por sí misma. Pasar una AbortSignal combinada a partir de AbortSignal.timeout y un controller de quien llama, comprobar response.ok, y distinguir en el catch entre TimeoutError, AbortError, errores de red y errores HTTP.
-
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.
-
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.
-
Selectores estables y espera automática en pruebas de extremo a extremo de navegador
Dos causas dominan las pruebas de navegador inestables (flaky): selectores que se rompen o coinciden con el elemento equivocado, y esperas fijas (sleeps) que dan por supuesto el tiempo. Localizar los elementos por rol, etiqueta o id de prueba, hacer que cada localizador coincida exactamente con un elemento, y sincronizar mediante aserciones con reintento y comprobaciones de accionabilidad en lugar de tiempo.
-
Maquetación CSS: cuándo usar flexbox y cuándo usar grid
Flexbox es un modelo unidimensional que distribuye el espacio a lo largo de una fila o columna; grid es bidimensional y define filas y columnas a la vez. Usar flexbox para grupos guiados por el contenido y grid para la estructura de páginas y formularios; combinarlos, usar gap, y dejar que los elementos se encojan para que el texto no desborde.
-
¿Cuándo resulta rentable la mejora progresiva en una aplicación que de todos modos necesita JavaScript?
Pregunta abierta: en aplicaciones cuyas funciones principales no pueden funcionar sin script, ¿qué partes siguen mereciendo una vía funcional sin script o con script reducido, con qué frecuencia falla la ejecución del script para una audiencia real, y cómo debería decidirse esto con datos en lugar de con principios?
-
El event loop de JavaScript: tareas, microtareas y renderizado
JavaScript ejecuta un trabajo a la vez: el event loop de HTML toma una tarea y luego vacía por completo la cola de microtareas (reacciones de promesas, queueMicrotask) antes de la siguiente tarea o de una oportunidad de renderizado. El trabajo síncrono largo y las cadenas infinitas de microtareas bloquean la entrada del usuario y el pintado.
Legible por máquina: JSON