Tema: javascript
-
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.
-
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.
-
Las compilaciones de módulos ES con efectos secundarios declarados reducen más los paquetes del consumidor que las compilaciones CommonJS
Hipótesis: para una biblioteca de muchas funciones independientes, un consumidor que importa unas pocas obtiene un paquete más pequeño cuando la biblioteca distribuye módulos ES con una declaración sideEffects que cuando distribuye CommonJS, porque el tree shaking depende de la estructura estática de import/export; se propone una comparación basada en fixtures.
-
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.
-
¿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?
-
Interfaces sensibles al locale: reglas de plural de Intl, fechas y disposición de derecha a izquierda
Formatear números, fechas y tiempos relativos con los objetos Intl del navegador en lugar de aritmética de cadenas, elegir las formas de plural mediante las categorías de Intl.PluralRules en vez de n == 1, maquetar con propiedades lógicas de CSS para que un documento con dir=rtl se refleje a sí mismo, y dejar espacio para el texto que se expande al traducirse.
-
Módulos ES frente a CommonJS en Node.js
CommonJS usa require sincrónico y module.exports; los módulos ES usan import/export estáticos, await de nivel superior e import.meta. Node decide por archivo según la extensión y el campo type del package.json más cercano; los módulos ES necesitan extensiones de archivo completas y carecen de __dirname y de require, que tienen sustitutos documentados.
-
Desplazamientos de texto en JavaScript: distinguir unidades UTF-16, puntos de código y caracteres visibles
Nombrar la unidad de desplazamiento en cada límite de editor o de API, y convertir de forma deliberada antes de recortar el texto.
-
Desplegar un service worker de forma segura: alcance, cachés versionadas, el worker en espera y un interruptor de emergencia
Un service worker que almacena en caché el HTML puede dejar a los usuarios atados a código antiguo tras un despliegue. Registrarlo con un alcance explícito, obtener el script actualizado en cada comprobación de actualización, versionar las cachés por compilación y eliminar las antiguas en activate, elegir estrategias por tipo de recurso, decidir cómo toma el control el worker en espera, y entregar un interruptor de emergencia probado antes del primer lanzamiento.
-
Navegación por teclado en widgets compuestos: tabindex itinerante, teclas de flecha y Escape
Tab y Shift+Tab se mueven entre componentes; las teclas de flecha se mueven dentro de un componente como una lista de pestañas, una barra de herramientas, un menú o un grupo de radio. Implementarlo con un tabindex itinerante (un elemento en tabindex=0, el resto en -1) o aria-activedescendant, cerrar las superficies transitorias con Escape, y nunca atrapar el foco sin una salida anunciada.
-
Gestión del foco en interacciones de página única: diálogos, cambios de ruta y elementos eliminados
Cuando una página cambia sin una carga completa, el foco del teclado debe moverse de manera deliberada: hacia un diálogo cuando se abre y de vuelta a su disparador cuando se cierra, hacia el encabezado de la nueva vista después de un cambio de ruta del lado del cliente, y hacia un vecino razonable cuando se elimina el elemento enfocado. De lo contrario, el foco recae en el body del documento y las personas que usan lector de pantalla vuelven al principio.
-
Manejo de errores en Promises y async/await
Una función async convierte un throw en un rechazo, y await lo vuelve a lanzar; cada rechazo necesita un responsable. Envuelva solo lo que pueda recuperar, nunca deje una promesa sin gestionar, use allSettled cuando un fallo parcial sea aceptable y registre un manejador unhandledrejection como último recurso.
-
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.
-
BigInt sobre JSON: define un contrato de campo sin pérdida antes de añadir un replacer
Codifica enteros grandes con un esquema explícito y restáuralos sin pasar de forma silenciosa por Number.
-
Fundamentos de manipulación de bits: flags, máscaras y desplazamientos sin sorpresas
Los flags son potencias de dos que se combinan con OR, se comprueban con AND y se borran con AND NOT; las máscaras y los desplazamientos extraen campos. Las trampas son la precedencia de operadores, los desplazamientos a la derecha con signo, la conversión fija a 32 bits en JavaScript y los enteros sin límite en Python: nombra cada flag y pon paréntesis en cada comprobación.
Legible por máquina: JSON