Webs on Commentary of Takao

Herramientas de monitoreo de rendimiento web 2026

Wed, 08 Jul 2026 10:00:00 +0900

El monitoreo de rendimiento web (RUM) captura datos reales de usuarios. Combinado con laboratorio (Lighthouse), da una visión completa del rendimiento.

RUM (Real User Monitoring)

Mide usuarios reales. Captura Core Web Vitals (LCP, INP, CLS), TTFB, FCP, TBT. Library web-vitals para envío a Analytics.

Herramientas

CrUX (Chrome UX Report): datos de campo agregados. Lighthouse: laboratorio. PageSpeed Insights: combina ambos. WebPageTest: análisis detallado.

Monitoreo continuo

Alertas cuando las métricas superan umbrales. Dashboard con tendencias. Presupuesto de rendimiento en CI. Regresión = build fallido.

React 19: Novedades que los desarrolladores deben conocer

Wed, 08 Jul 2026 10:00:00 +0900

Qué cambió en React 19

React 19 no es una actualización menor sino un cambio de paradigma. Server Components estables, nuevos hooks y el React Compiler cambian fundamentalmente cómo se escriben las aplicaciones.

Server Components estables

Los React Server Components (RSC) ahora están listos para producción. Al renderizar en el servidor y enviar HTML al cliente, reducen significativamente el tamaño del bundle. Los componentes que usan useState o useEffect deben declarar “use client”.

Agentes de IA para refactorización de código

Sun, 05 Jul 2026 00:00:00 +0900

Los agentes de IA como Cursor, Copilot Workspace y Claude pueden refactorizar código base de forma autónoma. El futuro del desarrollo incluye colaboración humano-agente.

Capacidades actuales

Refactorización de nombres, extracción de funciones, división de módulos, migración de APIs. Los agentes entienden el contexto del proyecto y aplican cambios.

Límites

Los agentes pueden introducir bugs sutiles. No entienden completamente la intención del negocio. La revisión humana sigue siendo necesaria.

Flujo de trabajo

Describe el refactor. 2. El agente analiza el código. 3. Propone cambios. 4. Revisas y apruebas. 5. El agente aplica. 6. Pruebas automáticas.

Futuro

Agentes especializados por dominio, integración con CI/CD, aprendizaje del estilo del equipo, refactorizaciones multi-repositorio.

Alias de Git: Productividad en la línea de comandos

Sat, 20 Jun 2026 00:00:00 +0900

Los alias de Git permiten abreviar comandos largos. Configurados en .gitconfig, pueden incluir secuencias completas y flags.

Alias básicos

git config --global alias.co checkout, alias.br branch, alias.ci commit, alias.st status. Los alias más comunes ahorran cientos de pulsaciones al día.

Alias avanzados

Combinan múltiples comandos con !: alias.lg = !git log --graph --oneline --all. Ejecutan scripts shell arbitrarios.

Alias con parámetros

Usando funciones shell en el alias: !f() { git log --oneline --author="$1"; }; f. Máximo control sin memorizar flags.

CSS Containment: Aislamiento de renderizado para rendimiento

Mon, 15 Jun 2026 00:00:00 +0900

La propiedad CSS contain permite aislar subárboles del DOM para que el navegador pueda optimizar el renderizado independientemente del resto de la página.

Valores de contain

layout: el layout interno no afecta al exterior. style: los estilos no se escapan. paint: el elemento pinta dentro de sus bounds. size: el elemento necesita dimensiones explícitas.

content-visibility

content-visibility: auto combina containment con lazy rendering. Los elementos fuera de pantalla no se renderizan hasta que se acercan al viewport. Mejora drásticamente LCP en páginas largas.

Tipos no mapeados y utilidades avanzadas de TypeScript

Wed, 10 Jun 2026 00:00:00 +0900

Más allá de los mapped types, TypeScript ofrece patrones avanzados como tipos condicionales distributivos, tipos recursivos y operaciones sobre uniones y e intersecciones.

Tipos condicionales distributivos

Cuando un tipo condicional recibe un tipo unión, la condición se aplica a cada miembro individualmente: T extends U ? X : Y con T = A | B produce (A extends U ? X : Y) | (B extends U ? X : Y).

OWASP ZAP Avanzado 2026: Automatización y scripting

Tue, 09 Jun 2026 00:00:00 +0900

OWASP ZAP ofrece capacidades avanzadas de automatización y scripting para equipos de seguridad y desarrollo.

ZAP Automation Framework

YAML para definir pipelines de seguridad: spider, active scan, alert filtering, report generation. Reemplaza scripts ad-hoc.

Scripting con ZAP

JavaScript, Python, Groovy para hooks personalizados. Scripts passive/active/extender. Automatización de autenticación y sesiones.

API de ZAP

REST API completa. Integración con Postman, curl, cualquier lenguaje. Control total de escaneos, contextos y alerts.

Contextos y autenticación

Define contextos de aplicación (URLs, include/exclude). Autenticación basada en formularios, JSON API, OAuth. Manejo de sesiones.

Hugo 2026: Mejores prácticas con CSP

Fri, 05 Jun 2026 00:00:00 +0900

Content Security Policy (CSP) es esencial para la seguridad. Hugo 2026 ofrece nuevas capacidades para integrar CSP sin sacrificar funcionalidad.

CSP en sitios estáticos

Los sitios estáticos tienen menos vectores de ataque pero aún necesitan CSP para scripts de terceros, analytics y widgets embebidos.

Generación de nonces

Hugo puede generar nonces únicos por build para scripts inline. Configuración via template functions. Integración con partials.

Hash para scripts estáticos

Calcula hashes SHA de scripts embebidos. Incluye en la cabecera CSP. Hugo puede automatizar esto con pipe functions.

Firmado de commits con claves SSH

Mon, 25 May 2026 00:00:00 +0900

Git 2.34+ permite firmar commits con claves SSH además de GPG. SSH es más familiar para desarrolladores que ya usan claves SSH para autenticación.

Configuración

Usa tu clave SSH existente (~/.ssh/id_ed25519.pub). Configura git config --global gpg.format ssh y user.signingkey ~/.ssh/id_ed25519.pub.

Firma automática

git config --global commit.gpgsign true firma todos los commits. Git usa SSH agent para la frase de paso.

Registro en GitHub

Añade tu clave SSH pública en GitHub Settings con tipo “Signing Key” (no solo Authentication). Los commits firmados muestran “Verified”.

CSP Report-Only: Implementación segura de Content Security Policy

Fri, 15 May 2026 00:00:00 +0900

Content-Security-Policy-Report-Only permite probar políticas de seguridad sin bloquear recursos. Ideal para implementación gradual.

Diferencia con CSP

CSP normal bloquea violaciones. CSP-Report-Only solo reporta. Usa ambas en paralelo: una activa y otra para nuevas reglas.

Reportes

Content-Security-Policy-Report-Only: script-src 'self'; report-uri /csp-endpoint

Los reportes JSON contienen: document-uri, violated-directive, blocked-uri, source-file.

Endpoints de reporte

Servidor propio que captura POST. report-to (nuevo) en lugar de report-uri (obsoleto). Servicios como Report URI, Sentry.

Flujo de adopción

Report-Only vigilando. 2. Identificar violaciones legítimas. 3. Ajustar política. 4. Migrar a CSP real. 5. Repetir hasta sin reportes.

Archivos de declaración .d.ts en TypeScript

Sun, 10 May 2026 00:00:00 +0900

Los archivos .d.ts describen las formas de los tipos de bibliotecas JavaScript a TypeScript. Son la interfaz entre el ecosistema JS y el sistema de tipos de TS.

Anatomía de un .d.ts

Declaran tipos, interfaces, funciones y clases sin implementación. declare function, declare class, declare module. No generan código en el output.

Declaraciones de módulos

Para bibliotecas sin tipos nativos: declare module 'library-name' { ... }. TypeScript fusiona estas declaraciones con los imports.

Comparativa de generadores de sitios estáticos 2026

Tue, 05 May 2026 00:00:00 +0900

Los SSG han evolucionado. En 2026, las opciones principales ofrecen rendimiento, flexibilidad y DX mejorada.

Hugo

Más rápido (<1ms por página). Go templates. Ideal para blogs y sitios de contenido. Ecosistema de temas maduro.

Astro

Islas de interactividad. Multi-framework (React, Vue, Svelte). Zero JS por defecto. Ideal para marketing sites y documentación.

Next.js

SSG + SSR + PPR. Más complejo pero más potente. Ideal para aplicaciones y e-commerce con contenido dinámico.

Recuperación de ramas eliminadas con git reflog

Sat, 25 Apr 2026 00:00:00 +0900

git reflog registra todos los movimientos de HEAD. Es la herramienta de rescate cuando eliminas una rama por accidente.

Cómo funciona reflog

Cada cambio de HEAD (commit, checkout, reset, merge) se registra. git reflog muestra el historial de movimientos con sus hashes.

Recuperar una rama eliminada

Encuentra el último commit de la rama en reflog. 2. git checkout -b rama-recuperada <hash>. La rama y sus commits están intactos.

Límites de reflog

Reflog es local y temporal. Los commits huérfanos son recolectados por GC tras 90 días (default). Recupera pronto.

Docker Compose: Mejores prácticas de producción

Mon, 20 Apr 2026 00:00:00 +0900

Más allá del Docker Compose básico, existen patrones probados para entornos de producción robustos.

Multi-stage builds

Compila en una etapa, ejecuta en otra más ligera. Reduce significativamente el tamaño de la imagen final y la superficie de ataque.

Healthchecks

healthcheck:
 test: ["CMD", "curl", "-f", "http://localhost"]
 interval: 30s
 retries: 3

Docker reinicia servicios no saludables automáticamente.

Logging

Configura drivers de logging (json-file, fluentd, awslogs). Rotación de logs: max-size: 10m, max-file: 3.

Seguridad de red

Redes separadas para frontend, backend y base de datos. Solo expone puertos al host cuando sea necesario. Usa redes externas para servicios compartidos.

DNS-prefetch y Preconnect: Optimización de conexiones de red

Wed, 15 Apr 2026 00:00:00 +0900

DNS-prefetch y preconnect reducen la latencia de conexiones a orígenes externos resolviendo DNS y estableciendo conexiones TCP/SSL antes de que se necesiten.

DNS-prefetch

Resuelve DNS de dominios externos antes de que el navegador los solicite. Útil para recursos en CDNs, APIs y fuentes.

Preconnect

Además de DNS, establece la conexión TCP y el handshake TLS. Más costoso pero más efectivo. Usar solo para los orígenes más críticos (3-4 máximo).

Implementación

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Cuándo usar cuál

DNS-prefetch: recursos de terceros que no son críticos. Preconnect: orígenes que se usan en los primeros segundos de carga. Preconnect sin crossorigin puede filtrar datos.

Parsers a nivel de tipos con Template Literal Types

Fri, 10 Apr 2026 00:00:00 +0900

Los template literal types combinados con inferencia condicional permiten construir parsers que operan exclusivamente en tiempo de compilación, analizando cadenas como rutas, formatos y DSLs.

Conceptos básicos

Usar T extends ${pattern}${infer Rest} ? ... : never para extraer partes de una cadena recursivamente. Cada paso consume un token.

Parseo de rutas

type ParseRoute<T> =
 T extends `${infer Segment}/${infer Rest}`
 ? [Segment, ...ParseRoute<Rest>]
 : [T];

Validación de formatos

Validar UUIDs, fechas ISO, versiones semver, rutas de archivos. Los errores se detectan en tiempo de compilación con mensajes claros.

WebGPU: Gráficos nativos en el navegador

Sun, 05 Apr 2026 00:00:00 +0900

WebGPU es la nueva API de gráficos y cómputo para la web. Sucesora de WebGL, ofrece acceso directo a GPUs modernas con rendimiento nativo.

Diferencias con WebGL

WebGPU usa una API más cercana a Vulkan/DX12/Metal. Menos overhead de driver. Compute shaders nativos. Soporte gráfico moderno.

Conceptos clave

Adapter (GPU física), Device (contexto lógico), Queue (comandos), Pipeline (shaders), Buffer, Texture, BindGroup.

Shaders con WGSL

WGSL (WebGPU Shading Language) es el lenguaje de shaders. Tipado fuerte. Similar a SPIR-V. Compilado a código nativo de GPU.

Git checkout, restore y switch: Diferencias y cuándo usar cada uno

Wed, 25 Mar 2026 00:00:00 +0900

Git 2.23 introdujo git switch y git restore para reemplazar los usos sobrecargados de git checkout. Cada comando tiene una responsabilidad única.

git switch

Cambia de rama. Equivalente a git checkout <rama>. -c crea y cambia a una nueva rama. - vuelve a la rama anterior.

git restore

Restaura archivos del working tree o staging. git restore archivo descarta cambios locales. --staged quita archivos del staging.

git checkout (legacy)

Aún funciona pero es sobrecargado. Puede cambiar ramas o restaurar archivos. Para scripts y automatización, prefiere switch y restore.

JWT vs Autenticación por sesión: Cuál elegir

Fri, 20 Mar 2026 00:00:00 +0900

JWT (JSON Web Tokens) y sesiones basadas en cookies son los dos enfoques principales de autenticación. Cada uno tiene ventajas según el contexto.

Autenticación por sesión

Token de sesión almacenado en el servidor (memoria, Redis, DB). Cookie con session ID. Fácil invalidar (eliminar sesión del servidor). Estado server-side.

JWT

Token autónomo firmado. Contiene claims (userId, rol, exp). Sin estado server-side. Válido hasta expirar. Difícil invalidar (revocación complicada).

Comparativa

Sesión: más fácil invalidar, seguro contra robos de token. JWT: escalable (sin almacenamiento), mejor para microservicios y APIs móviles.

Optimización de carga de fuentes web

Sun, 15 Mar 2026 00:00:00 +0900

Las fuentes web pueden causar FOIT (Flash of Invisible Text) o FOUT (Flash of Unstyled Text). Optimizar su carga mejora LCP y la experiencia de lectura.

font-display

font-display: swap: muestra texto con fuente del sistema mientras carga. font-display: optional: no descarga si la red es lenta. font-display: block: período de bloqueo corto.

Subset de fuentes

Incluye solo los caracteres necesarios (latino básico, no todos los glifos). Herramientas: glyphhanger, fonttools. Reduce drásticamente el tamaño de archivos.

Recetas CSS creativas con el selector padre :has()

Tue, 10 Mar 2026 00:00:00 +0900

Cómo funciona `:has()`

La pseudo-clase :has() toma una lista de selectores y selecciona un elemento si contiene cierto descendiente o hermano. Soportada en todos los navegadores principales desde 2026.

Receta 1: Estilos de validación de formularios

.form-group:has(input:invalid) { border-left: 3px solid #e74c3c; }

Muestra/oculta mensajes de error y colorea bordes según el estado del input, sin JavaScript.

Receta 2: Layouts dinámicos de tarjetas

Tarjetas con imagen ajustan su padding automáticamente: .card:has(img) { padding: 0; }

Google Gemini API: Modelos y usos prácticos

Thu, 05 Mar 2026 00:00:00 +0900

Gemini de Google ofrece modelos multimodales de última generación accesibles via API. Compite directamente con GPT-4o y Claude.

Modelos disponibles

Gemini 2.5 Pro: razonamiento avanzado, contexto de 1M tokens. Gemini 2.5 Flash: rápido y económico. Ambos soportan texto, imagen, audio y video.

Contexto largo

1M tokens de contexto permite procesar documentos completos, repositorios de código, logs extensos. Ideal para análisis de código base.

API Features

Streaming, JSON mode, function calling, grounding (búsqueda web), caching. Precios competitivos con free tier generoso.

Git Merge vs Rebase: Mejores prácticas

Wed, 25 Feb 2026 00:00:00 +0900

Merge y rebase son dos estrategias para integrar cambios. Cada una tiene ventajas según el contexto y la política del equipo.

Merge

Crea un commit de merge que preserva el historial exacto. Útil para ramas públicas y compartidas. Traza claramente cuándo y cómo se integraron los cambios.

Rebase

Reescribe el historial aplicando commits de una rama sobre otra línea. Resulta en un historial lineal y limpio. No recomendado para ramas compartidas.

Reemplazando localStorage: localForage como wrapper de IndexedDB

Fri, 20 Feb 2026 00:00:00 +0900

Introducción

El almacenamiento del lado del cliente es fundamental. localStorage tiene límites dolorosos: ~5 MB, API síncrona, solo strings.

IndexedDB: Potente pero complejo

Ofrece almacenamiento virtualmente ilimitado, API asíncrona, datos estructurados y consultas indexadas. Pero es notoriamente verboso.

localForage: Lo mejor de ambos mundos

Wrapper ligero que envuelve IndexedDB (con WebSQL y localStorage como respaldo) tras una API simple basada en promesas, inspirada en localStorage.

await localforage.setItem('user', { name: 'Alice', role: 'admin' });
const user = await localforage.getItem('user');

Detección del mejor driver disponible: 1. IndexedDB, 2. WebSQL, 3. localStorage. Para la mayoría de necesidades de almacenamiento, localForage es la elección pragmática.

Seguridad DNS: DNSSEC, SPF, DKIM y DMARC

Sun, 15 Feb 2026 00:00:00 +0900

La seguridad del correo electrónico y DNS se basa en cuatro tecnologías que previenen spoofing, phishing y suplantación de dominio.

DNSSEC

Firma digitalmente los registros DNS. Protege contra envenenamiento de caché DNS y ataques Man-in-the-Middle. El navegador verifica la firma.

SPF

Especifica qué servidores pueden enviar correo desde tu dominio. Registro TXT con IPs autorizadas. Previene falsificación de remitente.

DKIM

Firma digitalmente los correos salientes. El receptor verifica la firma contra un registro DNS. Asegura que el correo no fue alterado.

Partial Prerendering (PPR) en Next.js

Tue, 10 Feb 2026 00:00:00 +0900

Partial Prerendering (PPR) combina contenido estático prerenderizado con contenido dinámico transmitido vía streaming en una misma página.

El problema

SSG: rápido pero contenido obsoleto. SSR: contenido fresco pero más lento. PPR ofrece lo mejor de ambos: HTML estático inmediato + partes dinámicas en streaming.

Cómo funciona

Next.js prerenderiza el shell estático de la página. Los componentes dinámicos (con cookies(), headers(), searchParams) se renderizan bajo demanda.

Configuración

experimental.ppr = 'incremental' en next.config.js. Los componentes dinámicos se envuelven en Suspense. PPR solo aplica donde se detectan datos dinámicos.

Tailwind CSS v4: Novedades y cambios

Thu, 05 Feb 2026 00:00:00 +0900

Tailwind CSS v4 es un rediseño completo. Usa el motor CSS nativo de Cascade Layers, configuración via CSS en lugar de JS, y nuevas utilidades.

Configuración via CSS

Adiós a tailwind.config.js. La configuración se hace en CSS con @theme, @utility, @variant. @import "tailwindcss" reemplaza las directivas anteriores.

Rendimiento

Engine de CSS nativo sin PostCSS. Compilación 10x más rápida. Cero dependencias de JavaScript en tiempo de ejecución.

Nuevas utilidades

inset-*, field-sizing-*, @starting-style para animaciones de entrada. color-mix(), light-dark(). Soporte mejorado para contenedores.

Commits semánticos: Estandarización de mensajes de commit

Sun, 25 Jan 2026 00:00:00 +0900

Los mensajes de commit semánticos siguen un formato estructurado que facilita la generación de changelogs y el versionado semántico automático.

Formato

tipo(alcance): descripción + cuerpo + footer. Tipos: feat, fix, chore, docs, style, refactor, perf, test, ci, build.

Beneficios

Generación automática de changelogs con herramientas como standard-version. Versionado semántico: feat → minor, fix → patch, breaking changes → major.

Breaking changes

Añade BREAKING CHANGE: en el footer o ! después del tipo/alcance: feat(api)!: rediseñar autenticación.

Error Boundaries y logging en frontend

Tue, 20 Jan 2026 00:00:00 +0900

Error Boundaries en React capturan errores de renderizado para mostrar una UI de fallback. Combinados con logging, permiten monitorear errores en producción.

Error Boundaries en React

Componentes que capturan errores en su subárbol con componentDidCatch() o static getDerivedStateFromError(). Reemplazan try/catch para errores de renderizado.

Logging de errores

Captura errores en Error Boundaries y envíalos a un servicio: Sentry, LogRocket, Datadog. Incluye stack trace, props, y contexto del usuario.

window.onerror y unhandledrejection

Captura errores no manejados globalmente. window.onerror para errores síncronos. unhandledrejection para promesas rechazadas.

HTTP Strict Transport Security (HSTS): Forzar HTTPS

Fri, 16 Jan 2026 00:00:00 +0900

HSTS le indica al navegador que solo se conecte al sitio mediante HTTPS, incluso si el usuario escribe http:// o hace clic en un enlace HTTP.

Cabecera HSTS

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

max-age en segundos (1 año recomendado). includeSubDomains aplica a todos los subdominios.

HSTS Preload

Lista mantenida por Chrome (cargada en todos los navegadores). Los dominios en la lista tienen HSTS activo desde la primera visita, sin necesidad de cabecera.

Ramas en el sistema de tipos de TypeScript: Introducción a Conditional Types

Thu, 15 Jan 2026 00:00:00 +0900

Introducción

Los conditional types permiten lógica a nivel de tipos: T extends U ? X : Y. Esto permite resolución de tipos dinámica y consciente del contexto.

Sintaxis básica

type IsString<T> = T extends string ? true : false; La condición pregunta: “¿Es T asignable a U?”

La palabra clave infer

Extrae un tipo desde dentro de una condición: type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

React Compiler: Di adiós a la memoización manual

Sat, 10 Jan 2026 00:00:00 +0900

Introducción

El React Compiler (antes React Forget) es una herramienta de compilación que memoiza automáticamente componentes, hooks y valores de React analizando dependencias reactivas en tiempo de compilación.

El problema de la memoización manual

useMemo, useCallback, React.memo son verbosos, propensos a errores y fáciles de olvidar. Un useMemo faltante causa re-renderizados innecesarios; un array de dependencias incorrecto causa closures obsoletas.

Cómo funciona

Detección de valores reactivos (AST). 2. Construcción de grafo de dependencias. 3. Generación de código optimizado con caché integrada.

Lo que puedes eliminar

Con el React Compiler activado ya no necesitas: useMemo(), useCallback(), React.memo(), ni arrays de dependencias manuales.

Cloudflare Workers y WebAssembly en el Edge

Mon, 05 Jan 2026 00:00:00 +0900

Cloudflare Workers ejecuta código JavaScript, WASM y Python en el edge. Ofrece latencia ultrabaja al procesar solicitudes cerca del usuario.

Workers Runtime

Basado en V8. Aislado por contexto. Sin Node.js (API propia: Fetch, Cache, KV, D1, R2, Queues). Arranque en frío < 5ms.

WebAssembly en Workers

Compila Rust, C/C++, Go, Zig a WASM. Workers carga módulos WASM estáticos. Procesamiento de imágenes, parsing, cálculos pesados en el edge.

Almacenamiento en el edge

KV (clave-valor, baja latencia), D1 (SQLite), R2 (S3-compatible), Durable Objects (estado coordinado). Bases de datos geodistribuidas.

Limpieza de ramas remotas huérfanas con git prune

Thu, 25 Dec 2025 00:00:00 +0900

Las ramas remotas eliminadas en el servidor pueden quedar como referencias locales obsoletas. git remote prune y git fetch --prune las eliminan.

El problema

Cuando un compañero elimina una rama remota, tu repositorio local aún conserva origin/rama-eliminada. Con el tiempo se acumulan decenas de referencias muertas.

Soluciones

git fetch --prune origin limpia al hacer fetch. git remote prune origin limpia sin fetch. Configura fetch.prune = true globalmente.

Ramas locales huérfanas

Usa git branch --merged para encontrar ramas locales ya mergeadas. Elimínalas con git branch -d. Combina con prun para limpieza completa.

Optimizaciones del Critical Rendering Path

Sat, 20 Dec 2025 00:00:00 +0900

El Critical Rendering Path (CRP) es la secuencia de pasos que el navegador sigue para renderizar la página inicial. Optimizarlo mejora LCP y First Paint.

Bloqueo de renderizado

CSS bloquea el renderizado. JavaScript bloquea el parsing de HTML. Reduce el CSS crítico e inlinealo. Difiere JS no crítico con defer o async.

CSS crítico

Extrae el CSS necesario para el contenido above-the-fold. Inlinealo en <head>. Carga el resto asíncronamente. Herramientas: Critical, Penthouse.

HTTP Headers de seguridad y CORS

Mon, 15 Dec 2025 00:00:00 +0900

Las cabeceras HTTP de seguridad protegen contra ataques comunes. CORS controla qué dominios pueden acceder a tus recursos desde el navegador.

Cabeceras de seguridad esenciales

X-Content-Type-Options: nosniff, X-Frame-Options: DENY, X-XSS-Protection: 0 (obsoleto). Referrer-Policy, Permissions-Policy.

Controla qué orígenes pueden leer respuestas de tu API. Access-Control-Allow-Origin, -Methods, -Headers. Preflight con OPTIONS para solicitudes complejas.

CORS en APIs

Para APIs públicas: Access-Control-Allow-Origin: *. Para APIs privadas: lista blanca de orígenes. Credenciales requieren Allow-Credentials: true y origen específico.

Previniendo el Cumulative Layout Shift con CSS aspect-ratio

Wed, 10 Dec 2025 00:00:00 +0900

Entendiendo Cumulative Layout Shift

CLS es una métrica de Core Web Vitals que mide la estabilidad visual. Un CLS alto daña la experiencia de usuario y el SEO. La causa principal son elementos multimedia que cargan sin espacio reservado.

Cómo funciona aspect-ratio

aspect-ratio declara la proporción ancho/alto de un elemento. El navegador reserva espacio, evitando saltos de layout.

.responsive-video { aspect-ratio: 16 / 9; width: 100%; height: auto; }

Uso con imágenes

Reemplaza el viejo truco de padding-bottom. Combina con max-width y object-fit para resultados óptimos.

Cloudflare y Privacy Sandbox: El fin de las cookies de terceros

Fri, 05 Dec 2025 00:00:00 +0900

Google está eliminando gradualmente las cookies de terceros. Cloudflare ofrece soluciones para mantener la funcionalidad del sitio sin depender de ellas.

El problema

Las cookies de terceros se usan para tracking, autenticación y personalización. Su desaparición afecta a analytics, ads y widgets sociales.

Privacy Sandbox

APIs de Google: Topics API (intereses), Protected Audience (remarketing), Attribution Reporting (conversiones), Shared Storage (datos entre contextos).

Alternativas con Cloudflare

Cookies propias (first-party) con Cloudflare Workers para tracking. Cloudflare Zaraz para analytics sin cookies. Turnstile para CAPTCHA sin tracking.

Revertir merges en Git de forma segura

Tue, 25 Nov 2025 00:00:00 +0900

Revertir un merge commit es diferente a revertir un commit normal. Git necesita saber de qué lado del merge se revierte para evitar conflictos futuros.

El problema

Revertir un merge con git revert -m 1 revierte contra la primera rama (main). Si luego reintentas mergear la rama original, los cambios revertidos no reaparecen.

Cómo revertir correctamente

git revert -m 1 <merge-commit-hash> para revertir contra main. Si necesitas reintroducir los cambios, revierte el revert: git revert <revert-commit-hash>.

Caché en GitHub Actions: Acelerar workflows

Thu, 20 Nov 2025 00:00:00 +0900

El caché de GitHub Actions almacena dependencias y artefactos entre ejecuciones. Reduce drásticamente el tiempo de CI.

action/cache

- uses: actions/cache@v4
 with:
 path: ~/.npm
 key: npm-${{ hashFiles('package-lock.json') }}

Estrategias de clave

Usa hash de archivos lock como clave primaria. Restore keys para coincidencias parciales. Fallback a último cache válido si cambian las dependencias.

Límites

10GB por repositorio. 7 días de retención (último acceso). Limpieza manual con API de GitHub. Cache miss si la clave no coincide exactamente.

Vulnerabilidades en dependencias con npm audit

Sat, 15 Nov 2025 00:00:00 +0900

npm audit escanea las dependencias del proyecto en busca de vulnerabilidades conocidas. Es la primera línea de defensa contra paquetes comprometidos.

Uso básico

npm audit lista vulnerabilidades por severidad (critical, high, moderate, low). Muestra ruta de dependencia, versión vulnerable y versión corregida.

npm audit fix

npm audit fix --force actualiza a la versión corregida. --force puede cambiar versiones major (puede romper cosas).

Alternativas

Snyk: escaneo continuo, PRs automáticos de fix. Dependabot: PRs automáticos en GitHub. socket.dev: análisis de comportamiento de paquetes.

Tipos mapeados en TypeScript: Transformación de tipos

Mon, 10 Nov 2025 00:00:00 +0900

Los tipos mapeados transforman un tipo existente iterando sobre sus propiedades. Son la base de utilidades como Partial<T>, Readonly<T>, Pick<T, K> y Record<K, V>.

Sintaxis básica

type Nullable<T> = { [P in keyof T]: T[P] | null };

Itera sobre keyof T y aplica una transformación a cada propiedad.

Modificadores

Añadir o remover readonly y ? con prefijos + y -: { -readonly [P in keyof T]-?: T[P] }.

Reasignación de claves (TS 4.1+)

as clause para renombrar propiedades: { [P in keyof T as get${Capitalize<string & P>}]: () => T[P] }.

ESM estable en Node.js: Soporte de require

Wed, 05 Nov 2025 00:00:00 +0900

Node.js ha estabilizado el soporte de ES Modules. La función require(esm) permite cargar módulos ESM desde CJS de forma síncrona, simplificando la migración.

require(esm) en Node.js 22+

Node.js 22+ permite require() de módulos ESM sincrónicamente si no tienen top-level await. Facilita la adopción híbrida.

Configuración

No requiere flags de línea de comandos. Los paquetes ESM deben declararse con "type": "module" o .mjs. require() resuelve automáticamente.

Limitaciones

Top-level await deshabilita require(esm). Paquetes ESM con solo named exports pueden necesitar ajustes. Los loaders personalizados afectan el comportamiento.

Git Bisect: Depuración de regresiones binaria

Mon, 20 Oct 2025 00:00:00 +0900

git bisect realiza una búsqueda binaria para encontrar el commit que introdujo un bug. Es la herramienta más eficiente para depurar regresiones.

Uso básico

git bisect start, marca el commit bueno (git bisect good) y el malo (git bisect bad). Git checkout commits intermedios para probar.

Automatización

git bisect run <script> ejecuta un script que devuelve 0 (bueno) o distinto de 0 (malo). El proceso es completamente automático.

Estrategias

Bisect sobre un rango específico de commits. Usa --first-parent para ignorar merges. Prueba en una rama limpia para evitar falsos positivos.

Potenciando tus expresiones regulares con el flag v

Wed, 15 Oct 2025 00:00:00 +0900

Introducción

ES2024 introduce el flag v, un superconjunto del flag u que permite notación de conjuntos, resta de clases, intersección y coincidencia de emojis Unicode.

Resta de clases (`--`)

const re = /[\p{Letter}--[aeiouAEIOU]]/v; // letras excepto vocales

Intersección (`&&`)

const re = /[\p{Letter}&&\p{Script=Greek}]/v; // solo letras griegas

Clases anidadas

El flag v permite anidar clases con corchetes, eliminando secuencias de escape confusas.

Coincidencia de emojis

Nuevas propiedades: \p{RGI_Emoji}, \p{Basic_Emoji}, \p{Emoji_Keycap_Sequence}, etc.

Migración desde flag u

El flag v es estrictamente un superconjunto pero tiene cambios disruptivos: \d dentro de clase no está permitido, -- y && son operadores.

Implementando modo oscuro simple con CSS light-dark()

Fri, 10 Oct 2025 00:00:00 +0900

El problema del modo oscuro tradicional

Tradicionalmente requería reglas CSS duplicadas en @media (prefers-color-scheme: dark). light-dark() elimina esta duplicación.

La función light-dark()

Acepta dos colores y retorna el que coincide con el esquema actual del usuario: color: light-dark(black, white).

Configuración de color-scheme

Requiere declarar los esquemas soportados: color-scheme: light dark; en :root o mediante <meta name="color-scheme">.

Variables de tema simplificadas

:root { --bg: light-dark(#ffffff, #1a1a2e); --text: light-dark(#111111, #e0e0e0); }

Sin media queries. El navegador maneja el cambio automáticamente.

Next.js 15 Stable: Mejores prácticas en producción

Sun, 05 Oct 2025 00:00:00 +0900

Introducción

Next.js 15 llega con soporte para React 19, un modelo de caché rediseñado y mejoras importantes en APIs asíncronas. Por defecto, las solicitudes fetch NO se cachean, simplificando la previsibilidad del comportamiento.

React 19 estable

Next.js 15 se empareja con React 19 estable, permitiendo el React Compiler para memoización automática. Soporte completo para use() y Server Actions.

Cambios en caché por defecto

En Next.js 14, fetch se cacheaba por defecto. En Next.js 15 NO se cachea — debes optar explícitamente con cache: 'force-cache'.

Firmado de commits con GPG en Git

Thu, 25 Sep 2025 00:00:00 +0900

Firmar commits con GPG verifica la identidad del autor. GitHub/GitLab muestran una insignia “Verified” en los commits firmados.

Configuración

Genera una clave GPG: gpg --full-generate-key. Configura git config --global user.signingkey <KEY>. Firma commits con -S.

Firma automática

git config --global commit.gpgsign true firma todos los commits. git config --global tag.gpgsign true para etiquetas.

Registro en GitHub

Añade la clave GPG pública en GitHub Settings → SSH and GPG keys. Verifica que los commits muestren “Verified”.

Caché de build en Docker: Acelerar compilaciones

Sat, 20 Sep 2025 00:00:00 +0900

Docker aprovecha la caché de capas para acelerar builds. Entender el orden de las capas y la invalidación de caché es clave para builds rápidos.

Orden de capas

Coloca las capas que cambian con menos frecuencia al inicio: dependencias del sistema, luego dependencias de la aplicación, luego código fuente.

COPY vs ADD

COPY invalida la caché si el contenido del archivo fuente cambia. Usa .dockerignore para excluir archivos innecesarios (node_modules, .git).

Accesibilidad web: Fundamentos de ARIA

Mon, 15 Sep 2025 00:00:00 +0900

ARIA (Accessible Rich Internet Applications) proporciona atributos HTML para mejorar la accesibilidad de contenido dinámico y componentes personalizados.

Principios ARIA

No uses ARIA cuando los elementos HTML nativos funcionan. ARIA modifica el árbol de accesibilidad pero no el comportamiento. Primera regla: usa HTML semántico.

Roles y propiedades

role="button", aria-label, aria-expanded, aria-hidden, aria-live. Roles de landmarks (navigation, main, complementary).

Componentes dinámicos

Tabs, modales, acordeones, sliders necesitan roles y estados ARIA. aria-controls, aria-selected, aria-current, aria-valuenow.

Uniones discriminadas en TypeScript: Patrón switch exhaustivo

Wed, 10 Sep 2025 00:00:00 +0900

Las uniones discriminadas (tagged unions) son la forma principal de modelar datos que pueden ser una de varias variantes. Usan una propiedad literal común (discriminante) para diferenciar los miembros.

Sintaxis básica

type Shape =
 | { kind: 'circle'; radius: number }
 | { kind: 'square'; side: number }
 | { kind: 'triangle'; base: number; height: number };

Estrechamiento (narrowing)

TypeScript reduce automáticamente el tipo basado en el discriminante. Usar switch con discriminante para manejar cada variante con seguridad de tipos.

Exhaustividad

Combinar con never para garantizar que todos los casos se manejan: default: const _exhaustive: never = value;.

GitHub Copilot Workspace: El agente desarrollador

Fri, 05 Sep 2025 00:00:00 +0900

GitHub Copilot Workspace es un agente de IA que ayuda a planificar, implementar y probar características completas directamente desde issues de GitHub.

Flujo de trabajo

Crea un issue. 2. Copilot Workspace analiza el código base. 3. Propone un plan de implementación. 4. Genera cambios. 5. Abre un PR con los cambios.

Contexto completo

El agente entiende el repositorio completo, no solo el archivo actual. Analiza estructura, dependencias y patrones del proyecto.

Protección CSRF: Tokens y SameSite Cookies

Mon, 25 Aug 2025 00:00:00 +0900

Cross-Site Request Forgery (CSRF) engaña al navegador para ejecutar acciones no deseadas en un sitio donde el usuario está autenticado.

Cómo funciona CSRF

El atacante crea un formulario o enlace en su sitio que apunta a una acción en tu sitio (cambiar email, transferir dinero). Las cookies se envían automáticamente.

Tokens CSRF

Token único por sesión o formulario. Incluido como campo oculto en formularios o header en requests AJAX. El servidor valida el token en cada mutación.

Técnicas avanzadas de Git Stash

Wed, 20 Aug 2025 00:00:00 +0900

git stash guarda cambios temporales sin commitearlos. Más allá del uso básico, stash ofrece opciones avanzadas para flujos complejos.

Stash parcial

git stash -p selecciona interactivamente qué cambios guardar. Útil cuando solo quieres stash una parte de los cambios.

Stash con archivos no rastreados

git stash -u (o --include-untracked) guarda también archivos nuevos. -a guarda incluso archivos ignorados.

Stash nombrado

git stash push -m "mensaje descriptivo" crea un stash con nombre. Listarlos con git stash list y buscar con git stash show -p <stash>.

Sintaxis estándar de anidamiento CSS sin preprocesadores

Fri, 15 Aug 2025 00:00:00 +0900

Introducción

El anidamiento CSS ahora es nativo en todos los navegadores modernos, sin necesidad de Sass, Less o PostCSS.

Sintaxis básica

.card { background-color: #fff; .card-title { font-size: 1.5rem; } &:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); } }

Ya no se requiere el prefijo & para anidar selectores de clase o elemento.

Diferencia clave con Sass

CSS nativo NO soporta concatenación de sufijos tipo BEM (&--large es inválido). En su lugar, escribe la clase completa: &.button--large.

Posicionamiento del &

Puedes usar & al final o en medio de un selector para estilos contextuales: .dark-mode & { color: #fff; }.

Reglas para crear hooks personalizados en React

Sun, 10 Aug 2025 00:00:00 +0900

Los hooks personalizados son la forma principal de extraer lógica con estado en React. Deben seguir las mismas reglas que los hooks integrados.

Reglas fundamentales

Solo llama hooks en el nivel superior (no en condicionales, bucles o funciones anidadas).
Solo llama hooks desde componentes React o desde otros hooks.

Patrones de hooks personalizados

Un hook debe comenzar con use. Debe devolver un objeto o array con valores y funciones. La lógica de efecto debe limpiarse en el cleanup.

Vite 6 vs Rspack: Velocidades de bundler en 2026

Tue, 05 Aug 2025 00:00:00 +0900

Vite y Rspack son los bundlers más rápidos del ecosistema. Ambos usan Rust para tareas críticas pero con filosofías diferentes.

Vite 6

Usa esbuild para desarrollo (bundling nativo en Go) y Rollup para producción (con rolldown en desarrollo para unificar). HMR instantáneo. Ecosistema maduro de plugins.

Rspack

Bundler escrito en Rust, compatible con webpack API y plugins. Ofrece migración directa desde webpack con 5-10x mejora en tiempo de build.

Comparativa

Rspack: mejor para migraciones desde webpack, SSR complejo, monorepos. Vite: mejor para proyectos nuevos, SPA, desarrollo con HMR. Ambos superan webpack 4/5 significativamente.

Interoperabilidad ESM y CJS en Node.js

Fri, 25 Jul 2025 00:00:00 +0900

Node.js soporta dos sistemas de módulos: CommonJS (require) y ES Modules (import). La interoperabilidad entre ambos tiene reglas específicas.

Detección del tipo de módulo

.mjs siempre ESM. .cjs siempre CJS. .js depende del package.json más cercano: "type": "module" para ESM, "type": "commonjs" o sin campo para CJS.

Importar CJS desde ESM

Los módulos CJS se importan con import desde ESM. Node.js envuelve module.exports como default export. Named exports requieren análisis estático limitado.

Optimizaciones con requestIdleCallback

Fri, 25 Jul 2025 00:00:00 +0900

requestIdleCallback programa tareas no urgentes para cuando el navegador está inactivo. Mejora la capacidad de respuesta de la página.

Cómo funciona

El navegador ejecuta callbacks en los tiempos muertos entre frames. requestIdleCallback(callback, { timeout: 2000 }). IdleDeadline.timeRemaining() indica el tiempo disponible.

Casos de uso

Análisis (analytics), logging, precarga de datos no críticos, cleanups, procesamiento diferido, renderizado de contenido secundario.

Alternativas

setTimeout con 0: menos eficiente. Scheduler.postTask (experimental) con prioridades. requestAnimationFrame para animaciones. Elige según la urgencia.

Git Blame: Ignorando cambios de formato con .git-blame-ignore-revs

Sun, 20 Jul 2025 00:00:00 +0900

git blame es útil para encontrar quién cambió cada línea, pero los commits de formateo (Prettier, ESLint) contaminan los resultados. .git-blame-ignore-revs resuelve esto.

Cómo funciona

Crea un archivo .git-blame-ignore-revs con los hashes de commits de formateo. Configura git config blame.ignoreRevsFile .git-blame-ignore-revs.

Uso directo

git blame --ignore-revs-file .git-blame-ignore-revs archivo.ts. Muestra la autoría real ignorando los commits listados.

Soporte en GitHub

GitHub respeta el archivo .git-blame-ignore-revs automáticamente en la interfaz web. Añade también los commits de refactors grandes.

Lazy loading de iframes para rendimiento web

Sun, 20 Jul 2025 00:00:00 +0900

Los iframes cargan documentos completos (HTML, CSS, JS) que pueden pesar varios MB. El lazy loading nativo y técnicas avanzadas mejoran el rendimiento.

loading=lazy nativo

<iframe loading="lazy" src="..."> difiere la carga hasta que el iframe está cerca del viewport. Soporte universal en navegadores modernos.

Intersection Observer

Carga el iframe solo cuando es visible. Control granular: margen de precarga, umbral de visibilidad. Ideal para integraciones complejas.

Alternativas a iframes

Embed con JavaScript ligero (widget API). Web Components. Contenido precargado y mostrado bajo demanda. Prefiere APIs sobre iframes.

Optimización de imágenes para rendimiento web

Tue, 15 Jul 2025 00:00:00 +0900

Las imágenes son el recurso más pesado y común en la web. Optimizarlas correctamente mejora LCP, CLS y la experiencia general.

Formatos modernos

AVIF: mejor compresión pero codificación lenta. WebP: equilibrio calidad/velocidad. JPEG XL: prometedor pero soporte limitado. Proporciona múltiples formatos con <picture>.

Carga responsive

srcset con diferentes tamaños. sizes para indicar el espacio que ocupa la imagen. El navegador selecciona la imagen óptima.

Lazy loading

loading="lazy" nativo para imágenes fuera del viewport. fetchpriority="high" para la LCP image. Intersection Observer para control granular.

Diseñando layouts modulares con CSS Container Queries

Thu, 10 Jul 2025 00:00:00 +0900

Introducción

Las Media Queries (@media) cambian estilos según el viewport. CSS Container Queries (@container) permiten estilar componentes según el ancho de su contenedor padre, ideal para componentes reutilizables.

Viewport vs Container

Media queries dependen del ancho de la ventana. Container queries dependen del contenedor padre inmediato, permitiendo que un mismo componente se adapte a diferentes contextos.

Configuración básica

Registrar el padre con container-type: inline-size 2. Escribir reglas con @container (min-width: 400px)

.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) { .my-card { flex-direction: row; } }

Unidades de container query

cqw (1% del ancho), cqh (1% del alto), cqmin, cqmax. Útiles para tipografía dinámica: font-size: clamp(1rem, 5cqw, 2rem).

Cómo usar decoradores estándar en TypeScript

Sat, 05 Jul 2025 00:00:00 +0900

Introducción

TypeScript 5.0 introdujo soporte oficial para decoradores ECMAScript estándar (Stage 3/4), reemplazando los experimentales.

Decoradores experimentales vs estándar

Los experimentales requerían experimentalDecorators: true. Los estándar funcionan por defecto y reciben un objeto context con metadatos tipados.

Escribir un decorador de método estándar

function logMethod<This, Args extends any[], Return>(
 target: (this: This, ...args: Args) => Return,
 context: ClassMethodDecoratorContext<This, ...>
) { return function(this: This, ...args: Args): Return { ... }; }

Consideraciones de migración

Verifica compatibilidad con reflect-metadata antes de deshabilitar flags experimentales.
Los decoradores de parámetros fueron excluidos del estándar final. Solo pueden targetizar clases, métodos, campos y accessors.

Comandos de terminal Linux para desarrolladores web

Wed, 25 Jun 2025 00:00:00 +0900

La línea de comandos es esencial para el desarrollo web moderno. Estos comandos aumentan la productividad diaria.

Navegación y archivos

ls -la, cd, pwd, find . -name "*.ts", grep -r "patrón" ., tree, du -sh *.

Procesos y red

ps aux, kill, htop. curl, wget, ping, netstat -tulpn. lsof -i :3000 para ver qué ocupa un puerto.

Git avanzado en terminal

tig (navegador de git). diff-so-fancy (diff bonito). git lg (alias para log gráfico). gh (GitHub CLI).

useMemo y useCallback: Optimización de rendimiento en React

Fri, 20 Jun 2025 00:00:00 +0900

useMemo memoiza valores calculados, useCallback memoiza funciones. Ambos evitan trabajo innecesario en re-renderizados.

useMemo

Solo recalcula el valor cuando cambian sus dependencias. Útil para cálculos costosos o para mantener referencias estables entre renderizados.

const sorted = useMemo(() => items.sort(), [items]);

useCallback

Devuelve la misma función a menos que cambien las dependencias. Esencial para pasar callbacks a componentes hijos memoizados.

const handleClick = useCallback(() => doSomething(id), [id]);

Cuándo usarlos

No optimices prematuramente. Solo usa estos hooks cuando perfiles muestren un problema real. Con el React Compiler, estos hooks serán innecesarios.

CSP strict-dynamic: La mejor defensa contra XSS

Sun, 15 Jun 2025 00:00:00 +0900

La directiva strict-dynamic de CSP cambia la forma de aplicar políticas de seguridad. En lugar de listar dominios permitidos, confía en scripts que fueron cargados por scripts legítimos.

Problema con listas blancas

Las listas de URLs permitidas son difíciles de mantener y pueden incluir CDNs comprometidas o bibliotecas con vulnerabilidades.

Cómo funciona strict-dynamic

Si un script tiene un nonce o hash válido, puede cargar otros scripts del mismo origen. La confianza se propaga del script inicial a sus dependencias.

Template Literal Types en TypeScript: Manipulación de tipos de cadenas

Tue, 10 Jun 2025 00:00:00 +0900

Los Template Literal Types (TS 4.1+) permiten manipular tipos de cadenas en tiempo de compilación. Usan la misma sintaxis que los template literals de JavaScript pero con tipos.

Sintaxis

type EventName = `on${Capitalize<string>}`;
// 'onChange' | 'onClick' | 'onSubmit' ...

Tipos de manipulación de cadenas

Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>. Combinables para crear patrones de nomenclatura.

Inferencia en template literals

type ExtractRoute<T> = T extends `/api/${infer R}` ? R : never;
type R = ExtractRoute<'/api/users'>; // 'users'

Casos de uso avanzados

Mapeo evento-manejador, tipado de rutas de API, traducciones tipadas, CSS-in-JS con props de tema, generación de tipos a partir de recursos.

WWDC 2025: Novedades de Safari

Thu, 05 Jun 2025 00:00:00 +0900

Apple anunció importantes actualizaciones para Safari en WWDC 2025, incluyendo nuevas APIs web, mejoras de rendimiento y compatibilidad con estándares.

Nuevas APIs

Soporte completo de WebGPU, CSS Anchor Positioning, View Transitions API. Mejoras en Service Workers y Push Notifications en iOS.

Rendimiento

Mejoras en JavaScript Core (JIT más rápido). Reducción de uso de memoria. Perfilado de rendimiento mejorado en Safari Web Inspector.

CSS y diseño

Soporte de @scope, @starting-style, scroll-driven-animations. Mejoras en Subgrid y Container Queries. Propiedades de texto avanzadas.

Indexación de bases de datos: Fundamentos para desarrolladores

Sun, 25 May 2025 00:00:00 +0900

Los índices de base de datos aceleran las consultas a costa de espacio y rendimiento de escritura. Entenderlos es esencial para aplicaciones escalables.

Cómo funcionan

Estructura de datos (B-tree, Hash, GiST) que mapea valores a ubicaciones. Sin índice: full table scan (O(n)). Con índice: búsqueda logarítmica (O(log n)).

Tipos de índices

Índice primario (clave primaria). Índice único (valores únicos). Índice compuesto (múltiples columnas). Índice parcial (WHERE). Índice de texto completo.

Git Worktree: Trabajar en múltiples ramas simultáneamente

Tue, 20 May 2025 00:00:00 +0900

git worktree permite tener múltiples copias del repositorio en diferentes directorios, cada una en una rama distinta. Sin cambiar de rama ni stash.

Uso básico

git worktree add ../rama-feature feature-branch crea un directorio ../rama-feature con la rama activa. Puedes trabajar en ambas simultáneamente.

Casos de uso

Revisar un PR mientras trabajas en otra rama. Ejecutar tests en paralelo. Mantener una rama de producción abierta para hotfixes rápidos.

Gestión

git worktree list muestra todos los worktrees. git worktree prune elimina referencias a directorios eliminados. Cada worktree comparte objetos pero tiene su propio index y HEAD.

Novedades emocionantes en ECMAScript 2025 (ES16)

Thu, 15 May 2025 00:00:00 +0900

Introducción

Cada año, el comité TC39 actualiza las especificaciones ECMAScript. Para ECMAScript 2025 (ES16), varias propuestas han alcanzado Stage 3 o 4.

Promise.try

Unifica el manejo de errores síncronos y asíncronos. Si el callback lanza una excepción síncrona, Promise.try() la captura y retorna una Promise rechazada, permitiendo un solo .catch().

Iterator Helpers

Añade .map() y .filter() a todos los objetos iterables (Set, Map, etc.). Evaluación perezosa: los elementos se procesan solo cuando se solicitan.

Alineación perfecta con CSS Grid Subgrid

Sat, 10 May 2025 00:00:00 +0900

Introducción

Alinear componentes anidados entre columnas en layouts de tarjetas es un desafío común. CSS Grid subgrid resuelve esta limitación permitiendo que grids anidados hereden los tracks del padre.

La limitación de los grids anidados

Con Flexbox, los contenedores de tarjetas se alinean en altura pero los elementos internos (títulos, descripciones, botones) no se alinean entre tarjetas hermanas.

Solución con subgrid

.card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.card-title { grid-row: 1; } .card-desc { grid-row: 2; } .card-btn { grid-row: 3; }

Los títulos, descripciones y botones se alinean perfectamente entre tarjetas, independientemente de la longitud del contenido.

Google I/O 2025: Novedades para la web

Mon, 05 May 2025 00:00:00 +0900

Google I/O 2025 trajo actualizaciones importantes para desarrolladores web: Chrome, Web Platform, Angular, y herramientas de desarrollo.

Chrome y Web Platform

WebGPU estable, View Transitions API, Scroll-Driven Animations. Mejoras en Core Web Vitals. INP como métrica oficial.

Angular

Angular v20 con nuevas características. Hydration mejorada. Signal components. Rendimiento optimizado con Vite como bundler por defecto.

Herramientas de desarrollo

Lighthouse 12 con nuevas auditorías. Chrome DevTools mejoradas para debugging de WebGPU y animaciones. Performance Insights panel.

Diseño de APIs REST: Mejores prácticas

Fri, 25 Apr 2025 00:00:00 +0900

Una API REST bien diseñada es intuitiva, consistente y fácil de mantener. Estas prácticas aplican a cualquier lenguaje y framework.

Nombres de recursos

Sustantivos en plural: /users, /articles. Jerarquía: /users/123/posts. URLs limpias, sin verbos. Versionado: /v1/users.

Métodos HTTP

GET (leer), POST (crear), PUT (reemplazar), PATCH (actualizar parcial), DELETE (eliminar). Siempre respeta la semántica HTTP.

Respuestas consistentes

Estructura JSON unificada. Códigos HTTP correctos: 200, 201, 204, 400, 401, 403, 404, 409, 422, 500. Mensajes de error descriptivos.

Husky y Git Hooks: Previniendo bugs antes del commit

Sun, 20 Apr 2025 00:00:00 +0900

Husky facilita la configuración de hooks de Git para equipos de JavaScript/TypeScript. Previene commits con código roto o no formateado.

Instalación

npx husky init. Crea un directorio .husky/ con scripts ejecutables. Husky 9 es la versión moderna, más ligera y simple.

Pre-commit con lint-staged

Combina Husky con lint-staged para ejecutar linters solo en los archivos modificados. Rápido y escalable incluso en proyectos grandes.

Pre-push con pruebas

Ejecuta la suite de tests completa antes de permitir el push. Previene integraciones rotas en ramas compartidas.

npm, pnpm y yarn: Comparativa de gestores de paquetes

Tue, 15 Apr 2025 00:00:00 +0900

Los gestores de paquetes de JavaScript han evolucionado. Cada uno ofrece ventajas en velocidad, almacenamiento y seguridad.

npm

El gestor oficial. npm 10+ es más rápido que versiones anteriores. package-lock.json. Workspaces para monorepos. Audit de seguridad integrado.

pnpm

Usa un almacenamiento global con enlaces duros. Los paquetes se almacenan una vez, ahorrando espacio en disco. Instalación más rápida y estricta.

Yarn

Yarn Berry (v4+) con Plug’n’Play: sin node_modules, genera un solo archivo .pnp.cjs. Resuelve dependencias más rápido. Zero-installs.

Descifrando los mecanismos de caché del App Router de Next.js

Thu, 10 Apr 2025 00:00:00 +0900

Introducción

El App Router de Next.js tiene cuatro capas de caché que pueden causar confusión. Este artículo explica cada una y cómo configurarlas.

Las cuatro capas

Router Cache (cliente): Cache de navegación en el navegador, basada en sesión.
Request Memoization (servidor): Desduplica fetch dentro de un mismo ciclo de renderizado.
Data Cache (servidor): Persiste respuestas de API entre solicitudes y usuarios.
Full Route Cache (servidor): HTML estático y payloads RSC en tiempo de build.

Request Memoization

Si la misma URL se fetch múltiples veces en el mismo árbol de componentes, solo la primera ejecuta la llamada API. Las siguientes leen de la caché de memoización.

Transiciones de página suaves con View Transitions API

Sat, 05 Apr 2025 00:00:00 +0900

Introducción

La View Transitions API permite al navegador capturar estados de la página antes y después de una modificación del DOM, ejecutando una transición acelerada por hardware.

Configuración básica (SPA)

Envuelve tu función de actualización DOM en document.startViewTransition(). El navegador captura los estados saliente y entrante, ejecutando un crossfade de 0.25 segundos por defecto.

Personalización CSS

::view-transition-old(root) { animation: 0.3s ease-out both slide-out; }
::view-transition-new(root) { animation: 0.3s ease-out both slide-in; }

Crea transiciones de deslizamiento, fundido, o cualquier animación personalizada.

Git Cherry-Pick: Casos de uso prácticos

Tue, 25 Mar 2025 00:00:00 +0900

git cherry-pick aplica commits específicos de una rama a otra. Esencial para hotfixes y selección selectiva de cambios.

Hotfixes en producción

Corrige un bug en main, luego cherry-pick el commit a release branches. Evita mergear toda la rama main con características incompletas.

Backport de cambios

Aplica parches seleccionados de una versión reciente a versiones anteriores mantenidas. Común en proyectos con LTS.

Reordenar commits

Extrae commits de una rama de características y aplícalos en orden diferente. Útil cuando commits interdependientes se mezclan.

Multi-stage builds de Docker: Imágenes más ligeras

Thu, 20 Mar 2025 00:00:00 +0900

Multi-stage builds usan múltiples instrucciones FROM en un solo Dockerfile. Cada etapa puede usar una base diferente, copiando solo los artefactos necesarios a la etapa final.

Ejemplo Node.js

FROM node:20 AS build
WORKDIR /app
COPY package*.json .
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-slim
COPY --from=build /app/dist ./dist
CMD ["node", "dist/index.js"]

Beneficios

Reduce la imagen final de ~1GB a ~150MB. Elimina herramientas de compilación, dependencias de desarrollo y archivos temporales.

INP: Interaction to Next Paint - La nueva métrica de interactividad

Sat, 15 Mar 2025 00:00:00 +0900

Interaction to Next Paint (INP) reemplaza First Input Delay (FID) como métrica de interactividad en Core Web Vitals. Mide la latencia de todas las interacciones, no solo la primera.

Cómo se mide INP

Registra el tiempo desde que el usuario interactúa (click, tap, teclado) hasta el siguiente frame pintado. Considera las interacciones más lentas. Objetivo: < 200ms (bueno), < 500ms (mejorable).

Causas de INP alto

JavaScript síncrono pesado, re-renderizados grandes sin optimizar, tareas largas en el hilo principal (> 50ms), listeners complejos en eventos frecuentes.

El operador satisfies en TypeScript: Tipado flexible y seguro

Mon, 10 Mar 2025 00:00:00 +0900

El operador satisfies (TS 4.9+) verifica que una expresión cumple un tipo sin cambiar su tipo inferido. Permite tipado estricto en valores complejos como records y tuplas.

El problema

const x: Record<string, number> = { a: 1, b: 2 } pierde las claves específicas al acceder. Sin anotación, el tipo es demasiado amplio.

Solución con satisfies

const palette = {
 red: [255, 0, 0],
 green: "#00ff00",
} satisfies Record<string, string | number[]>;

El tipo inferido conserva las propiedades específicas, pero se valida contra el constraint.

Lanzamiento oficial de React 19 y guía de funcionalidades prácticas

Wed, 05 Mar 2025 00:00:00 +0900

Introducción

React 19 representa un cambio de paradigma importante. Funciones antes restringidas a meta-frameworks como Next.js ahora están integradas en el núcleo estable de React.

Actions API y useActionState

Simplifica la gestión de mutaciones asíncronas. useActionState enlaza manejadores asíncronos directamente a atributos de formulario nativos, manejando automáticamente indicadores de carga.

useOptimistic

Para acciones interactivas como “me gusta” o envío de chats. Actualiza la IU instantáneamente antes de que la solicitud al servidor se complete, con capacidad de rollback integrada.

Seguridad web: Prevención de XSS

Tue, 25 Feb 2025 00:00:00 +0900

Cross-Site Scripting (XSS) es una vulnerabilidad donde un atacante inyecta scripts maliciosos en páginas web vistas por otros usuarios.

Tipos de XSS

Reflejado: el script viene en la URL o formulario. Almacenado: el script se guarda en la base de datos. DOM-based: el script se ejecuta mediante manipulación del DOM.

Prevención

Escapa toda salida de HTML (React lo hace por defecto con JSX). Usa Content-Security-Policy (CSP). Sanitiza entradas con DOMPurify. HttpOnly y Secure en cookies.

Git Rebase Interactivo: Flujo de trabajo avanzado

Thu, 20 Feb 2025 00:00:00 +0900

git rebase -i permite editar, reordenar, combinar y eliminar commits antes de integrarlos. Esencial para mantener un historial limpio.

Comandos del rebase interactivo

pick: mantener commit. reword: cambiar mensaje. edit: modificar contenido. squash: combinar con anterior. fixup: combinar sin mensaje. drop: eliminar.

Flujo típico

git rebase -i HEAD~3 para últimos 3 commits. 2. Reordenar para agrupar cambios relacionados. 3. Squash commits de WIP. 4. Reword mensajes.

Resolución de conflictos

Git se detiene en cada conflicto. Resuelve, git add, git rebase --continue. Usa --skip para omitir un commit, --abort para cancelar todo.

Patrones a evitar con async/await en JavaScript

Sat, 15 Feb 2025 00:00:00 +0900

Introducción

async/await hizo la programación asíncrona más intuitiva, pero puede ocultar problemas de rendimiento y errores.

Antipatrón 1: Serialización innecesaria

No uses await secuencial para tareas independientes. Usa Promise.all para ejecución en paralelo.

Antipatrón 2: Bloques try-catch anidados

El anidamiento profundo derrota el propósito de async/await. Usa un solo bloque try-catch al más alto nivel.

Antipatrón 3: async callbacks en forEach

forEach con async callback ejecuta los callbacks síncronamente. Usa for...of para secuencial o Promise.all con map para paralelo.

Introducción al posicionamiento con anclajes CSS

Mon, 10 Feb 2025 00:00:00 +0900

Introducción

Posicionar elementos flotantes (tooltips, popovers, menús) respecto a un elemento de referencia ha sido un desafío complejo. Tradicionalmente se requería JavaScript con cálculos continuos de coordenadas usando getBoundingClientRect(). La API de Posicionamiento con Anclajes CSS resuelve esto manejando coordenadas flotantes de forma nativa en el navegador.

¿Qué es CSS Anchor Positioning?

Es un estándar que permite anclar un elemento con posición absoluta o fija directamente a otro elemento usando solo CSS. Beneficios: cero JavaScript, rendimiento superior (compositor thread), y aislamiento de diseño evitando restricciones de recorte del padre.

Modelos de razonamiento de OpenAI

Wed, 05 Feb 2025 00:00:00 +0900

Los modelos de razonamiento (o-series) de OpenAI resuelven problemas complejos mediante pensamiento encadenado (chain-of-thought). Son ideales para programación y matemáticas.

o3 y o4-mini

Modelos de razonamiento profundo. o4-mini es más rápido y económico. Usan “thinking tokens” internos para razonar antes de responder.

Cuándo usarlos

Problemas de programación complejos, debugging, análisis de seguridad, optimización. No para tareas simples (mejor GPT-4o o Claude Sonnet).

Uso práctico

API con reasoning_effort (low, medium, high). Mayor effort = mejor calidad pero más lento y costoso. Cache de thinking tokens.

Proxmox Backup Server: Recuperación ante desastres

Mon, 20 Jan 2025 00:00:00 +0000

Proxmox Backup Server (PBS) es una solución de backup dedicada para entornos Proxmox. Ofrece deduplicación, compresión y cifrado.

Instalación de PBS

Servidor independiente (Debian + PBS). Almacenamiento dedicado (preferiblemente ZFS). Acceso via web en https://IP:8007.

Deduplicación y compresión

Deduplicación por bloques. Sólo se almacenan bloques únicos entre todos los backups. Compresión zstd. Ahorra 80-95% de espacio.

Cifrado

Cifrado del lado del cliente. Las claves nunca salen del entorno Proxmox. Backups seguros incluso en almacenamiento no confiable.

Gestión de tareas para desarrolladores

Tue, 14 Jan 2025 00:00:00 +0900

La gestión eficiente de tareas es crucial para la productividad del desarrollador. Sistemas como GTD, Kanban y timeboxing ayudan a organizar el trabajo.

Kanban

Tablero visual: To Do, In Progress, Done. Limita el WIP (Work In Progress). Herramientas: GitHub Projects, Linear, Trello, Notion.

GTD (Getting Things Done)

Capturar, clarificar, organizar, reflexionar, ejecutar. Ideal para desarrolladores con muchas tareas interrumpidas.

Timeboxing

Asigna bloques de tiempo fijos a tareas. Técnica Pomodoro (25 min trabajo, 5 min descanso). Evita el perfectionismo y la procrastinación.

Estrategias de caché en CDN

Mon, 30 Dec 2024 00:00:00 +0900

Las CDN almacenan contenido en servidores edge cercanos al usuario. Las estrategias de caché determinan qué, cuándo y cómo se almacena.

Cache-Control

public, max-age=31536000, immutable para recursos versionados. no-cache para validar con el origen. no-store para datos sensibles.

Invalidación de caché

Por URL (nuevo hash en nombre de archivo). Por purga (API de CDN). Por TTL (cacheo por tiempo). Por tags (purga por etiqueta).

Estrategias híbridas

Assets estáticos: caché larga con versionado. HTML: TTL corto o sin caché. APIs: caché por URL con stale-while-revalidate.

File System Access API: Acceso a archivos en el navegador

Sat, 28 Dec 2024 00:00:00 +0900

La File System Access API permite a las aplicaciones web leer, escribir y gestionar archivos y directorios en el sistema local del usuario.

Lectura de archivos

window.showOpenFilePicker() devuelve un FileSystemFileHandle. Lee con getFile() y file.text() o file.stream(). Múltiples archivos con multiple: true.

Escritura de archivos

window.showSaveFilePicker() permite guardar archivos. handle.createWritable() devuelve un writable stream. Escritura segura con permisos del usuario.

Directorios

window.showDirectoryPicker() permite seleccionar directorios. Iteración con dir.entries(). Creación de archivos y subdirectorios.

Rendimiento móvil: Optimización para dispositivos con recursos limitados

Thu, 26 Dec 2024 00:00:00 +0900

Los dispositivos móviles tienen CPUs más lentas, menos memoria y redes más lentas. La optimización móvil requiere estrategias específicas.

Redes lentas

Minimiza el peso total de la página (< 1MB ideal). Usa la API Network Information para detectar conexiones lentas. Prioriza contenido crítico con lazy loading para el resto.

Memoria limitada

Evita fugas de memoria con correcta limpieza de event listeners y observadores. Libera referencias a grandes buffers. Usa performance.memory para monitoreo.

Git Hooks: Automatización del flujo de trabajo

Tue, 24 Dec 2024 00:00:00 +0900

Los hooks de Git son scripts que se ejecutan en eventos específicos del ciclo de vida de Git. Automatizan validaciones, pruebas y despliegues.

Hooks del lado cliente

pre-commit: antes del mensaje de commit. pre-push: antes del push. post-commit: después del commit. pre-rebase: antes del rebase.

Hooks del lado servidor

pre-receive, update, post-receive. Se ejecutan en el repositorio remoto. Ideales para CI/CD y políticas de equipo.

Ejemplos prácticos

pre-commit: lint, formateo, pruebas rápidas. pre-push: tests completos, verificación de builds. post-commit: notificaciones, actualización de issues.

Alias de rutas en TypeScript: Mejora tus imports

Sun, 22 Dec 2024 00:00:00 +0900

Los alias de rutas reemplazan imports relativos profundos (../../components/Button) con alias limpios (@/components/Button). Mejoran la legibilidad y facilitan la reestructuración.

Configuración en tsconfig.json

{
 "compilerOptions": {
 "baseUrl": ".",
 "paths": {
 "@/*": ["src/*"],
 "@components/*": ["src/components/*"]
 }
 }
}

Integración con bundlers

Vite: resuelve alias de tsconfig automáticamente con vite-tsconfig-paths. Webpack: resolve.alias. Next.js: tsconfig.json paths soportado nativamente.

ESLint y editores

eslint-plugin-import necesita import/resolver configurado para seguir alias. VS Code usa tsconfig para autocompletado y navegación.

Subresource Integrity (SRI): Garantizando integridad de recursos

Fri, 20 Dec 2024 00:00:00 +0900

Subresource Integrity (SRI) permite verificar que un archivo cargado desde un CDN no ha sido manipulado, comparando su hash criptográfico.

Cómo funciona

El atributo integrity contiene un hash (SHA-256, SHA-384, SHA-512) del contenido esperado. El navegador calcula el hash y lo compara. Si no coincide, bloquea el recurso.

Ejemplo

<script src="https://cdn.example.com/lib.js"
 integrity="sha384-..."
 crossorigin="anonymous">

El crossorigin es obligatorio para recursos CORS.

Generación de hashes

openssl dgst -sha384 -binary archivo.js | openssl base64 -A. O usando herramientas online de SRI. Automatiza en el build process.

Rendimiento en Node.js: Optimización y profiling

Wed, 18 Dec 2024 00:00:00 +0900

Node.js puede manejar alto rendimiento si se optimizan correctamente el bucle de eventos, la memoria y las operaciones asíncronas.

Bucle de eventos

No bloquees el event loop con operaciones síncronas pesadas. Usa setImmediate(), nextTick() y Worker Threads para descargar trabajo.

Profiling

--inspect + Chrome DevTools para CPU profiling. --prof para logs de V8. clinic.js (Doctor, Bubbleprof, Flame) para diagnóstico visual.

Gestión de memoria

Evita fugas con correcta limpieza de listeners y referencias. Usa heapdump o v8.writeHeapSnapshot(). Monitorea con process.memoryUsage().

Estilos con alcance CSS: @scope y estrategias de encapsulación

Sun, 15 Dec 2024 00:00:00 +0900

El alcance de CSS ha sido un desafío constante. @scope introduce control de cascada basado en proximidad, aplicado por el navegador.

La regla @scope

@scope (.card) { .title { font-size: 1.25rem; } } limita estilos a un elemento raíz y sus descendientes. La novedad clave es la proximidad de alcance: estilos más cercanos al elemento tienen prioridad. Puedes definir límites con to (.card__footer).

Shadow DOM

Aislamiento total de estilos, marcado y comportamiento. Esencial para bibliotecas de widgets distribuidos, pero añade sobrecarga de ejecución.

Métodos de arrays JavaScript: De básicos a patrones avanzados

Thu, 12 Dec 2024 00:00:00 +0900

Los arrays de JavaScript son el pilar de la manipulación de datos en el desarrollo web moderno. Con ES2023 introduciendo alternativas inmutables a métodos mutantes, es momento de revisar cómo trabajamos con arrays.

Panorama de métodos de array

Los métodos se dividen en mutantes y no mutantes. ES2023 introdujo cuatro métodos inmutables: toSorted(), toReversed(), toSpliced(), with(). Estos crean nuevos arrays sin modificar el original, ideal para React o Redux.

Map, Filter y Reduce en profundidad

map transforma cada elemento, filter selecciona elementos, reduce es el más versátil. Una anti-patrón común es encadenar map seguido de filter cuando un solo flatMap sería suficiente.

Cookies seguras: HttpOnly, Secure, SameSite

Mon, 09 Dec 2024 00:00:00 +0900

Las cookies tienen atributos de seguridad que protegen contra XSS, CSRF y escuchas no autorizadas. Configurarlos correctamente es esencial.

HttpOnly

Previene el acceso a la cookie desde JavaScript (document.cookie). Bloquea robo de cookies via XSS. Esencial para cookies de sesión.

Secure

La cookie solo se envía en conexiones HTTPS. Nunca en HTTP. Protege contra ataques Man-in-the-Middle. Siempre activar.

SameSite

Strict: máxima protección CSRF. Lax: balance seguridad/usabilidad. None + Secure: cookies de terceros (menos seguro).

React Concurrent: Guía de renderizado concurrente

Fri, 06 Dec 2024 00:00:00 +0900

El renderizado concurrente de React permite que React interrumpa el trabajo de renderizado para manejar eventos de mayor prioridad. Con React 18+, startTransition y useDeferredValue permiten actualizaciones no urgentes sin bloquear la UI.

startTransition

Marca una actualización de estado como transición. React puede interrumpirla para manejar eventos urgentes como entrada de teclado.

startTransition(() => { setSearchQuery(input); });

useDeferredValue

Aplaza un valor para que React pueda mostrar contenido antiguo mientras carga el nuevo. Útil para búsquedas en listas grandes.

GraphQL vs REST en 2024: Cuál elegir

Tue, 03 Dec 2024 00:00:00 +0900

REST y GraphQL son enfoques diferentes para diseñar APIs. La elección depende del caso de uso, no de la moda.

REST

Recursos como URLs. Métodos HTTP (GET, POST, PUT, DELETE). Cacheable por naturaleza. Familiar y probado. Overfetching y underfetching son desventajas.

GraphQL

Un solo endpoint. El cliente solicita exactamente los campos que necesita. Tipado fuerte (schema). Resolvers. Suscripciones para tiempo real.

Ventajas de GraphQL

Sin over/under fetching. Documentación interactiva (GraphiQL). Tipos fuertes. Ideal para dashboards y apps con datos complejos.

WebAssembly (WASM): Aplicaciones nativas en el navegador

Sat, 30 Nov 2024 00:00:00 +0900

WebAssembly (WASM) ejecuta código compilado (C, C++, Rust, Go) en el navegador a velocidad casi nativa. Abre nuevas posibilidades para aplicaciones web.

Rendimiento

WASM es 10-40% más lento que código nativo pero mucho más rápido que JavaScript para cálculos intensivos. Compilado a binario, parseado en microsegundos.

Ecosistema

Rust + wasm-pack: el más popular. C/C++ con Emscripten. Go, Zig, Kotlin también compilan a WASM. WASI para WASM fuera del navegador.

Casos de uso

Procesamiento de imagen/video, juegos, simulaciones, compiladores, ofimática, cifrado. Figma, AutoCAD, Google Earth usan WASM.

Git LFS: Gestión de archivos grandes

Tue, 26 Nov 2024 00:00:00 +0900

Git LFS (Large File Storage) reemplaza archivos grandes con punteros de texto en el repositorio, mientras almacena el contenido real en un servidor remoto.

Instalación

git lfs install configura Git para usar LFS. Luego git lfs track "*.psd" para rastrear archivos grandes por patrón.

Flujo de trabajo

Los archivos LFS se usan como archivos normales. Git LFS maneja automáticamente la descarga/subida. El diff muestra el puntero, no el binario.

Límites y costos

GitHub: 1GB gratis, luego pago por ancho de banda. Bitbucket y GitLab tienen políticas similares. Bandwidth se consume en push y pull.

Scripts de terceros: Impacto en rendimiento y privacidad

Tue, 19 Nov 2024 00:00:00 +0900

Los scripts de terceros (analytics, ads, widgets, chatbots) afectan el rendimiento y la privacidad. Gestionarlos correctamente es esencial para Core Web Vitals.

Impacto en rendimiento

Los scripts de terceros bloquean el renderizado, añaden requests, y ejecutan código no optimizado. Pueden añadir segundos al tiempo de carga.

Carga diferida

async o defer para scripts no críticos. Carga bajo demanda (interacción del usuario). Posterga analytics con requestIdleCallback.

Privacidad

Los scripts de terceros pueden rastrear usuarios. Consent Mode (GDPR). Alternativas: Cloudflare Zaraz, Plausible, Fathom (sin cookies).

Docker Compose en producción

Tue, 12 Nov 2024 00:00:00 +0900

Docker Compose no es solo para desarrollo. Con configuraciones adecuadas puede orquestar servicios en producción para despliegues pequeños y medianos.

Diferencias desarrollo vs producción

Usa múltiples archivos: docker-compose.yml base, docker-compose.override.yml para desarrollo, docker-compose.prod.yml para producción.

Seguridad

No expongas puertos innecesarios. Usa redes internas para servicios. Variables de entorno via archivos .env o secretos de Docker.

Persistencia de datos

Volúmenes nombrados en lugar de bind mounts. Backups periódicos. Políticas de reinicio: restart: unless-stopped o restart: always.

Funciones trigonométricas CSS: Matemáticas en tus hojas de estilo

Tue, 05 Nov 2024 00:00:00 +0900

CSS ha evolucionado para incluir funciones trigonométricas: sin(), cos(), tan(), atan2(), asin(), acos(). Soportadas en Chrome 111+, Firefox 108+, Safari 15.4+.

Patrones de onda y oscilaciones

.wave { transform: translateY(calc(sin(var(--phase)) * 20px)); }

Crea efectos de onda puramente CSS. Combinado con @property para iterar ángulos.

Layouts circulares

Las fórmulas x = cx + r * cos(angle) y y = cy + r * sin(angle) permiten layouts circulares sin JavaScript. Power menús radiales, gráficos de donut, órbitas.

Generación de contenido con IA para desarrolladores

Tue, 29 Oct 2024 00:00:00 +0900

La IA generativa puede crear documentación, entradas de blog, descripciones de commits y mensajes de PR. Ahorra tiempo en tareas de comunicación.

Documentación técnica

Genera READMEs, guías de inicio rápido, documentación de API. La IA puede analizar el código fuente y describir su funcionalidad.

Blogging técnico

Tutoriales, guías, comparativas. La IA estructura el contenido, sugiere ejemplos y mantiene un tono consistente.

Limitaciones

La IA puede alucinar APIs que no existen. Verifica todo contenido generado. Usa la IA como borrador inicial, no como producto final.

Optimización del tamaño del bundle en aplicaciones web

Tue, 22 Oct 2024 00:00:00 +0900

Reducir el tamaño del bundle mejora los tiempos de carga y la experiencia del usuario. Las técnicas van desde análisis hasta code splitting y tree shaking.

Análisis del bundle

Usa vite-bundle-visualizer o webpack-bundle-analyzer para identificar módulos grandes. Busca bibliotecas duplicadas, importaciones completas de lo que solo necesita partes, y dependencias sobredimensionadas.

Tree Shaking

Asegura imports específicos en lugar de namespace imports: import { map } from 'lodash-es' en vez de import _ from 'lodash'. Usa librerías tree-shakeable (ESM).

TypeScript Branded Types: Validación de tipos en tiempo de compilación

Tue, 15 Oct 2024 00:00:00 +0900

Los tipos marcados (branded types) son una técnica para crear tipos nominales en TypeScript. Añaden una marca única a tipos estructuralmente compatibles para prevenir confusiones entre valores del mismo tipo subyacente.

El problema de los tipos estructurales

TypeScript usa tipado estructural. Una cadena de ID de usuario y una cadena de ID de producto son compatibles aunque representen conceptos distintos. Las branded types resuelven esto.

Patrones de branded types

Intersección con una marca literal: type UserID = string & { readonly __brand: 'UserID' }. Funciones constructoras con aserciones de tipo garantizan la seguridad.

Routing i18n en Next.js App Router

Tue, 08 Oct 2024 00:00:00 +0900

Next.js App Router ofrece routing internacionalizado con detección de idioma, redirecciones y Middleware. Soporta subpath y dominio.

Configuración

Define locales en next.config.js. defaultLocale. Middleware detecta el idioma preferido del navegador y redirige. El path incluye /es, /ja, etc.

Estrategias de routing

Subpath: /es/about, /ja/about. Dominio: es.example.com, ja.example.com. Subdominio. El Middleware maneja la detección y redirección.

next-intl

Biblioteca recomendada para internacionalización en Next.js. Mensajes en JSON, formateo de fechas/números, plurales. Integración con App Router.

Prevención de SQL Injection

Tue, 01 Oct 2024 00:00:00 +0900

SQL Injection es una vulnerabilidad donde el atacante manipula consultas SQL insertando código malicioso en las entradas de usuario.

Cómo ocurre

Concatenar cadenas en SQL: SELECT * FROM users WHERE id = ' + id + ' permite al atacante inyectar ' OR '1'='1.

Prevención: Consultas parametrizadas

Usa placeholders: SELECT * FROM users WHERE id = ?. La base de datos escapa los valores automáticamente. Nunca concatenes entradas en SQL.

Monorepos con Turborepo: Gestión eficiente de proyectos

Tue, 24 Sep 2024 00:00:00 +0900

Turborepo es una herramienta de construcción de alto rendimiento para monorepos JavaScript/TypeScript. Acelera builds con caché y paralelización.

Por qué monorepo

Código compartido entre proyectos, dependencias únicas, cambios atómicos, CI unificada. Ideal para equipos que mantienen múltiples paquetes.

Turborepo vs Nx

Turborepo: más simple, configuración mínima, caché remota integrada con Vercel. Nx: más características, generadores, migraciones automáticas.

Configuración

turbo.json define pipeline de tareas. dependsOn para orden de ejecución. cache para outputs. outputs para artefactos cacheados.

Patrones Serverless: Arquitecturas modernas

Tue, 17 Sep 2024 00:00:00 +0900

Serverless abstrae la infraestructura. El código se ejecuta en respuesta a eventos sin gestionar servidores. Escala automáticamente.

Funciones como unidad

AWS Lambda, Cloudflare Functions, Vercel Functions, Deno Deploy. Una función por endpoint. Stateless por defecto. Límites de duración (15min Lambda, 30s Workers).

Bases de datos serverless

PlanetScale, Neon, Supabase (SQL). DynamoDB, Firestore (NoSQL). Conexiones pooling automático. Escalado a cero cuando no se usa.

Patrón: API Gateway + Funciones

API Gateway recibe solicitudes, enruta a funciones. Autenticación, rate limiting, validación en el gateway. Las funciones solo manejan lógica de negocio.

Typed Arrays en JavaScript: Procesamiento de datos binarios en el navegador

Tue, 10 Sep 2024 00:00:00 +0900

El tipo Number nativo de JavaScript es ineficiente para datos binarios. Los Typed Arrays (ES2015) traen gestión de memoria tipo C al navegador.

ArrayBuffer

Buffer binario raw de longitud fija. No se puede leer/escribir directamente — debe usarse una vista.

Vistas TypedArray

Int8Array, Uint8Array, Float32Array, etc. Cada vista interpreta los bytes como un tipo numérico específico. subarray() crea una subvista sin copia.

DataView para estructuras complejas

Permite lectura/escritura en offsets arbitrarios con tipo y endianness explícitos. Ideal para formatos binarios como BMP, PNG, WAV.

Patrones de Portal en React: Renderizado fuera del árbol padre

Tue, 03 Sep 2024 00:00:00 +0900

ReactDOM.createPortal renderiza un componente fuera del árbol DOM del padre, útil para modales, tooltips y dropdowns que necesitan evitar overflow: hidden o z-index del padre.

Uso básico

createPortal(children, domNode)

El portal se renderiza en domNode pero conserva el contexto React (props, estado, context API).

Casos de uso comunes

Modales, notificaciones toast, tooltips, menús contextuales, paneles laterales. Todos necesitan salir del flujo de layout del padre.

Accesibilidad

Los portales deben manejar el foco correctamente: atrapar foco dentro del modal, cerrar con Escape, restaurar foco al cerrar. Combinar con la Popover API nativa cuando sea posible.

Redes en Docker: Comunicación entre contenedores

Tue, 27 Aug 2024 00:00:00 +0900

Docker proporciona varios modos de red para la comunicación entre contenedores y con el exterior. Elegir el correcto es fundamental para la seguridad y el rendimiento.

Tipos de red

bridge (default): red privada por host, comunicación entre contenedores via IP/nombre. host: comparte la red del host. overlay: múltiples hosts (Swarm). none: sin red.

DNS interno

Docker tiene DNS interno. Los contenedores en la misma red bridge personalizada se resuelven por nombre de contenedor. No es necesario conocer IPs.

CSS Popover API: Superposiciones nativas sin JavaScript

Tue, 20 Aug 2024 00:00:00 +0900

Introducción

Construir tooltips, menús y modales requería JavaScript. La CSS Popover API proporciona una forma declarativa nativa con manejo de posición, toggle, foco y cierre.

Atributos básicos

popover marca un elemento como superposición. popovertarget vincula un botón al popover. Modos: auto (cierre al hacer clic fuera o Escape) y manual (cierre programático).

API Toggle

Métodos: showPopover(), hidePopover(), togglePopover(). Eventos: beforetoggle y toggle con oldState y newState.

Light dismiss

Los popovers auto se cierran al hacer clic fuera, presionar Escape o abrir otro popover.

Almacenamiento ZFS en Proxmox

Wed, 14 Aug 2024 00:00:00 +0000

ZFS es el sistema de archivos recomendado para Proxmox. Ofrece integridad de datos, compresión, snapshots y facilidad de gestión.

Ventajas de ZFS

Checksums en todos los datos. Auto-reparación de errores. Compresión (lz4, zstd). Snapshots instantáneos. Deduplicación. Caché ARC/L2ARC.

Pools y datasets

Pool: grupo de discos con RAID-Z1, Z2, mirror. Dataset: unidad de almacenamiento con atributos independientes (compresión, cuota).

Rendimiento

ARC (caché en RAM) mejora rendimiento de lectura. SLOG para escritura síncrona. L2ARC para caché SSD. Ajuste de recordsize.

Referencias de proyecto en TypeScript: Código base a escala

Tue, 13 Aug 2024 00:00:00 +0900

Project References permiten dividir un código base grande en proyectos más pequeños que dependen entre sí. Mejoran tiempos de compilación y habilitan compilación incremental.

Configuración

Cada subproyecto tiene su tsconfig.json con composite: true. El proyecto raíz usa references para apuntar a cada subproyecto.

Modo build

tsc --build compila proyectos en orden topológico. Solo recompila los que cambiaron. tsc --build --force para reconstrucción completa.

Patrones de estructura

Monolito modular: packages/*/tsconfig.json. Separación cliente/servidor. Bibliotecas compartidas con sus propias referencias.

Logging en Node.js: Prácticas y herramientas

Tue, 06 Aug 2024 00:00:00 +0900

El logging es esencial para depuración, monitoreo y análisis. Node.js ofrece console.log pero las aplicaciones en producción necesitan más.

Niveles de log

error, warn, info, debug, trace. Configura el nivel mínimo: en producción solo info y superiores, en desarrollo también debug.

Bibliotecas populares

Pino: rápido, JSON nativo, niveles, child loggers. Winston: flexible, transports múltiples (archivo, consola, remoto). Bunyan: JSON con soporte de streams.

Formato JSON

Los logs en JSON son parseables por herramientas de análisis (ELK, Datadog, Grafana). Incluye timestamp, nivel, mensaje, contexto y correlation ID.

Machine Learning en el navegador con TensorFlow.js y ONNX

Tue, 30 Jul 2024 00:00:00 +0900

El ML en el navegador permite ejecutar modelos directamente en el cliente sin enviar datos al servidor. Privacidad, baja latencia y sin costos de infraestructura.

TensorFlow.js

Ejecuta modelos TF en el navegador via WebGL o WebGPU. Soporta modelos pre-entrenados (MobileNet, COCO-SSD) y transfer learning.

ONNX Runtime Web

Ejecuta modelos en formato ONNX en navegadores y Node.js. Soporta modelos PyTorch, TensorFlow, Scikit-learn exportados a ONNX.

WebGPU y WASM

WebGPU acelera inferencia con GPU. WASM para CPUs (WASM SIMD). Transformers.js para NLP (BERT, T5) directamente en el navegador.

Web Bluetooth API: Conexión con dispositivos BLE

Tue, 23 Jul 2024 00:00:00 +0900

La Web Bluetooth API permite que aplicaciones web se comuniquen con dispositivos Bluetooth Low Energy (BLE) cercanos.

Cómo funciona

navigator.bluetooth.requestDevice() muestra un selector de dispositivos. Requiere interacción del usuario (click). Solo HTTPS.

Servicios y características

Los dispositivos BLE exponen servicios (UUIDs) con características (lectura, escritura, notificaciones). getPrimaryService(), getCharacteristic().

Casos de uso

Monitoreo de sensores (temperatura, ritmo cardíaco), IoT, balizas, dispositivos de fitness, impresoras, controles remotos.

Limitaciones

Solo Chrome/Edge (Chromium). El usuario debe seleccionar el dispositivo manualmente. No hay escaneo en segundo plano. Desconexión al cerrar la página.

Seguridad en contenedores: Mejores prácticas

Tue, 16 Jul 2024 00:00:00 +0900

La seguridad en contenedores abarca desde la imagen base hasta la configuración de runtime. Un contenedor inseguro compromete todo el host.

Imágenes base

Usa imágenes oficiales y actualizadas. Prefiere -slim, -alpine o distroless. Escanea vulnerabilidades con docker scout o trivy.

Principio de mínimos privilegios

No ejecutes como root: USER nobody en Dockerfile. Capacidades de Linux mínimas: --cap-drop ALL --cap-add NEEDED. Modo de solo lectura: --read-only.

Secrets y variables

Nunca incluyas secretos en la imagen. Usa --secret de BuildKit para construir, y variables de entorno o montajes de secretos para ejecutar.

Module Federation: Micro-frontends con Webpack 5

Tue, 09 Jul 2024 00:00:00 +0900

Module Federation permite cargar código JavaScript desde otra aplicación en tiempo de ejecución. Es la base de los micro-frontends modernos.

Cómo funciona

Una aplicación expone módulos via ModuleFederationPlugin. Otra aplicación los consume como si fueran locales. Los módulos compartidos se cargan una sola vez.

Configuración expósitor

new ModuleFederationPlugin({
 name: 'app1',
 exposes: { './Button': './src/Button' },
 shared: { react: { singleton: true } }
})

Configuración consumidor

remotes: { app1: 'app1@http://...' }. Importa import('app1/Button'). React y otras librerías compartidas como singletons.

Optimización de imágenes en 2024: Formatos, carga y mejores prácticas

Tue, 02 Jul 2024 00:00:00 +0900

Las imágenes son el recurso más pesado en la mayoría de sitios web. Optimizarlas mejora drásticamente LCP y la experiencia general.

Formatos modernos

WebP: soporte universal, compresión 30% mejor que JPEG. AVIF: hasta 50% mejor que JPEG, pero mayor coste de codificación. JPEG XL: prometedor pero soporte limitado.

Imágenes responsive

<picture> con <source> para formatos múltiples. srcset y sizes para diferentes resoluciones. El navegador selecciona la imagen óptima según la pantalla.

Animaciones CSS basadas en scroll: El futuro de los efectos de desplazamiento

Tue, 25 Jun 2024 00:00:00 +0900

El problema de los eventos scroll en JavaScript

Los efectos basados en scroll tradicionalmente usaban listeners de JavaScript en el hilo principal, causando jank y mala experiencia. CSS Scroll-Driven Animations mueven el tracking al compositor thread.

Conceptos clave

scroll-timeline vincula una animación a la posición de scroll. view-timeline la vincula a la visibilidad de un elemento. animation-timeline asigna una animación a un timeline.

Scroll Progress Timelines

.progress-bar { animation: fill-progress linear; animation-timeline: scroll(); }

La función scroll() crea un timeline anónimo en el contenedor de scroll más cercano.

Vaultwarden y claves SSH

Thu, 20 Jun 2024 00:00:00 +0000

Vaultwarden puede almacenar claves SSH de forma segura. Con la extensión SSH Agent de Bitwarden, las claves se cargan bajo demanda.

Almacenamiento de claves

Las claves SSH se guardan como notas seguras en Vaultwarden. Cifradas con AES-256. Acceso protegido con Master Password y 2FA.

SSH Agent (browser extension)

La extensión Bitwarden ofrece SSH Agent. Carga claves privadas en el agente SSH del sistema. Las claves no se almacenan en disco.

Middleware en Next.js: Redirects, rewrites y protección

Tue, 18 Jun 2024 00:00:00 +0900

El Middleware de Next.js se ejecuta antes de cada solicitud, permitiendo redirecciones, reescrituras, autenticación y geolocalización en el edge.

Creación

Archivo middleware.ts en la raíz del proyecto. Exporta middleware(request) que retorna NextResponse.next(), redirect() o rewrite().

Matcher

Configura las rutas donde se ejecuta el middleware: export const config = { matcher: ['/dashboard/:path*'] }. Optimizado para ejecución en edge.

Casos de uso

Autenticación (redirigir a login), localización (detectar idioma), A/B testing (cookies), geobloqueo, mantenimiento (rewrite a página de mantenimiento).

CSS @layer: Gestión de la cascada con arquitectura de capas

Tue, 11 Jun 2024 00:00:00 +0900

@layer da control explícito sobre el orden de la cascada, independientemente de la especificidad o el orden de las fuentes.

El problema de la cascada antes de @layer

Antes, la gestión de la cascada se basaba en convenciones (BEM, SMACSS, ITCSS) que no eran aplicadas por el navegador.

Cómo funciona @layer

Agrupa estilos en capas con nombre y define su precedencia. Las capas posteriores sobrescriben a las anteriores, sin importar la especificidad.

API Proxy y Reflect de JavaScript: Patrones de metaprogramación

Tue, 04 Jun 2024 00:00:00 +0900

Proxy y Reflect permiten interceptar y personalizar operaciones fundamentales en objetos: acceso a propiedades, asignación, enumeración, invocación de funciones y llamadas a constructores.

Los 13 traps de Proxy

Desde get/set (lectura/escritura) hasta apply/construct (llamadas de función/constructor). Cada trap debe cumplir invariantes.

API Reflect

Los métodos de Reflect reflejan cada trap de Proxy. Usar Reflect dentro de traps asegura propagación correcta del argumento receiver.

Validación e integridad

El trap set puede imponer restricciones de esquema. Proxy de solo lectura bloquea todos los traps de mutación.

Herramientas de revisión de código con IA

Tue, 28 May 2024 00:00:00 +0900

Las herramientas de IA para code review automatizan la detección de bugs, problemas de seguridad y malas prácticas antes de la revisión humana.

CodeRabbit

Revisa PRs automáticamente. Comentarios contextuales en línea. Detecta bugs, vulnerabilidades y mejoras de rendimiento.

GitHub Copilot Code Review

Integrado en GitHub. Revisión de PRs con sugerencias. Detecta problemas de calidad y seguridad.

Códacy, SonarCloud

Análisis estático con IA. Mantienen calidad del código. Gatekeeping en CI: no mergear si baja la calidad.

Contenedores LXC en Proxmox

Wed, 22 May 2024 00:00:00 +0000

Los contenedores LXC en Proxmox ofrecen virtualización a nivel de SO con menor overhead que KVM. Ideales para servicios ligeros.

Diferencias con VMs

LXC comparte el kernel del host. Sin hypervisor. Arranque en segundos. Menor uso de memoria. Limitado a sistemas Linux.

Templates

Descarga templates desde repositorio Proxmox. Alpine, Ubuntu, CentOS, Debian. Creación de templates personalizados.

Configuración

CPU, memoria, swap, discos (montaje directo o ZFS). Privilegiados vs no privilegiados. Mapeo de UID/GID para seguridad.

Squash Merge: Limpieza de historial en GitHub

Tue, 21 May 2024 00:00:00 +0900

Squash merge combina todos los commits de una rama en un solo commit al mergear. Produce un historial limpio sin commits de WIP ni experimentales.

Cómo funciona

GitHub (y GitLab) ofrecen squash merge como opción al fusionar PRs. Todos los commits de la rama se comprimen en uno con un mensaje nuevo.

Beneficios

Historial lineal y legible. Cada commit en main representa una característica completa. Fácil revertir características enteras con un solo revert.

WebSockets: Comunicación en tiempo real

Tue, 14 May 2024 00:00:00 +0900

WebSocket proporciona un canal de comunicación bidireccional full-duplex sobre una sola conexión TCP. Ideal para aplicaciones en tiempo real.

Diferencias con HTTP

HTTP es request-response. WebSocket es persistente y bidireccional. Menos overhead (sin headers en cada mensaje). Latencia reducida.

API JavaScript

const ws = new WebSocket('wss://server.com');
ws.onmessage = (event) => console.log(event.data);
ws.send(JSON.stringify({ type: 'chat', text: 'Hola' }));

Casos de uso

Chat, notificaciones en vivo, colaboración en tiempo real (Google Docs), juegos multijugador, datos financieros, paneles de monitoreo.

Consideraciones

Reconexión automática. Heartbeats/pings para mantener conexión. Escalado: sticky sessions o pub/sub (Redis). Seguridad: WSS (WebSocket Secure).

Rate Limiting en APIs: Estrategias y mejores prácticas

Tue, 07 May 2024 00:00:00 +0900

Rate limiting protege las APIs contra abusos limitando el número de solicitudes en un período de tiempo. Esencial para seguridad y estabilidad.

Estrategias comunes

Fixed Window: cuenta en ventanas de tiempo fijas. Sliding Window: ventana deslizante más precisa. Token Bucket: tokens que se regeneran. Leaky Bucket: cola de velocidad fija.

Cabeceras de respuesta

X-RateLimit-Limit, X-RateLimit-Remaining, X-RateLimit-Reset. El cliente puede ajustar su comportamiento. HTTP 429 Too Many Requests con Retry-After.

Implementación

Redis para rate limiting distribuido. Almacenamiento en memoria para single-server. Middleware en Express, FastAPI, Cloudflare Workers.

Ingeniería de prompts para LLMs

Tue, 30 Apr 2024 00:00:00 +0900

La ingeniería de prompts es el arte de diseñar instrucciones efectivas para modelos de lenguaje. Un buen prompt obtiene respuestas precisas y útiles.

Principios básicos

Sé específico. Proporciona contexto. Define el formato de salida. Usa ejemplos (few-shot). Divide tareas complejas en pasos (chain-of-thought).

Técnicas avanzadas

Role prompting: “Eres un experto en React”. System prompts para definir comportamiento. Output formatting: JSON, markdown, código.

Iteración

Prueba, evalúa, refina. Ajusta temperatura (0 para determinista, >0 para creativo). Mide la calidad con tests automatizados.

Worker Threads en Node.js: Paralelismo real

Tue, 23 Apr 2024 00:00:00 +0900

Worker Threads permite ejecutar JavaScript en múltiples hilos, descargando tareas CPU-intensive del event loop principal.

Cuándo usar workers

Cálculos matemáticos pesados, procesamiento de imágenes, parsing de archivos grandes, compresión, cifrado. No para operaciones I/O (ya son asíncronas).

API básica

const { Worker } = require('worker_threads');
const worker = new Worker('./worker.js', { workerData: data });
worker.on('message', result => {});

Comunicación

postMessage: copia estructurada (serializable). SharedArrayBuffer: memoria compartida. parentPort.postMessage desde el worker. Atomics para sincronización.

Pool de workers

Crear workers por tarea tiene overhead. Usa workerpool o piscina para pooling. Mantén un número fijo de workers (CPU cores - 1).

GitHub Actions: Técnicas avanzadas

Tue, 16 Apr 2024 00:00:00 +0900

Más allá de los workflows básicos, GitHub Actions ofrece matrices, reutilización, entornos y despliegues avanzados.

Build Matrix

Ejecuta el mismo job en múltiples configuraciones: SO, versión de Node, dependencias. Acelera la retroalimentación de compatibilidad.

Reusable Workflows

Define un workflow en .github/workflows/reusable.yml con workflow_call. Reutiliza en otros workflows con uses: ./. Reduce duplicación.

Entornos y approval gates

Entornos con reviewers requeridos antes de desplegar a producción. Variables de entorno y secretos por ambiente. Protección de ramas.

Propiedades personalizadas CSS: Patrones estratégicos para estilos escalables

Tue, 09 Apr 2024 00:00:00 +0900

CSS Custom Properties (variables CSS) han cambiado fundamentalmente cómo escribimos y mantenemos hojas de estilo. A diferencia de las variables de preprocesadores, son dinámicas, participan en la cascada y la herencia.

Gestión de design tokens

:root { --color-primary-500: #3b82f6; --space-md: 1rem; --font-sans: "Inter", system-ui, sans-serif; }

Usa nomenclatura BEM-inspirada: --bloque__elemento--modificador para tokens de componente y --categoria-propiedad-variante para globales.

Cambio de tema

Define tema claro en :root y sobreescribe en [data-theme="dark"]. Añade prefers-color-scheme para respetar la preferencia del sistema.

WebAuthn y Passkeys: Autenticación sin contraseñas

Tue, 02 Apr 2024 00:00:00 +0900

WebAuthn es un estándar del W3C para autenticación sin contraseñas usando criptografía de clave pública. Passkeys son la implementación práctica.

Cómo funciona

El navegador genera un par de claves (pública/privada). La clave privada nunca sale del dispositivo. La autenticación usa desafíos firmados.

Passkeys

Sincronización entre dispositivos via iCloud Keychain, Google Password Manager, 1Password. Reemplazan contraseñas tradicionales. Soporte en iOS, Android, Windows, macOS.

Registro y autenticación

navigator.credentials.create() para registro. navigator.credentials.get() para autenticación. Biometría (TouchID, FaceID) o PIN como verificación local.

Optimización de imágenes con Next.js Image

Tue, 26 Mar 2024 00:00:00 +0900

Next.js Image component optimiza imágenes automáticamente: formatos modernos (WebP, AVIF), lazy loading, y dimensiones responsive.

next/image

import Image from 'next/image';
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" />

Optimización en tiempo de build o bajo demanda (servidor de optimización).

Formatos y calidad

Next.js sirve WebP o AVIF si el navegador lo soporta. quality (1-100, default 75). sizes para imágenes responsive. priority para LCP.

Remote patterns

Configura remotePatterns en next.config.js para permitir imágenes de dominios externos. Protege contra abusos del optimizador.

Gestión de estado en React 2024: Context, Zustand, Jotai y más

Tue, 19 Mar 2024 00:00:00 +0900

La gestión de estado en React ha evolucionado. Además de useState/useReducer, existen soluciones para estado global, servidor y URL.

Estado local: useState y useReducer

useState para estado simple. useReducer para lógica compleja con múltiples transiciones de estado. Para la mayoría de componentes, useState es suficiente.

Estado global: Context API

React.createContext + useContext permite estado compartido sin prop drilling. Limitado a árbol de componentes. No ideal para estado que cambia frecuentemente (causa re-renderizados masivos).

Instalación de Vaultwarden para gestión de contraseñas

Fri, 15 Mar 2024 00:00:00 +0000

Vaultwarden es una implementación ligera del servidor Bitwarden en Rust. Auto-hospeda tu gestor de contraseñas con mínimos recursos.

Instalación con Docker

docker run -d --name vaultwarden \
 -v /vw-data/:/data/ \
 -p 80:80 \
 vaultwarden/server:latest

Configuración

Variables: DOMAIN, SIGNUPS_ALLOWED, SMTP_*. Cifrado de base de datos con DATABASE_URL. Admin token para panel de administración.

Respaldo

Backup periódico del directorio /data/. Contiene la base de datos SQLite, archivos adjuntos y claves. Restauración simple reemplazando el directorio.

Novedades de ES2024 en JavaScript

Tue, 12 Mar 2024 00:00:00 +0900

ES2024 (ES15) introduce nuevas funcionalidades al lenguaje, centradas en async, arrays y gestión de datos.

Promise.withResolvers()

Crea una promesa con sus funciones resolve y reject expuestas externamente. Útil para promisificar APIs callback sin anidar constructores.

Array Grouping

Object.groupBy() y Map.groupBy() agrupan elementos de un array según una función callback. Reemplaza implementaciones manuales con reduce.

Well-formed Unicode Strings

String.prototype.isWellFormed() y toWellFormed() para manejar cadenas Unicode mal formadas. Previene errores en APIs que requieren Unicode válido.

Restricciones genéricas en TypeScript: Construyendo APIs type-safe

Tue, 05 Mar 2024 00:00:00 +0900

Los genéricos permiten código reutilizable type-safe. La palabra clave extends restringe parámetros de tipo a formas con propiedades específicas.

La restricción extends

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] garantiza que key sea una propiedad válida de obj.

Conditional Types

Usan extends para verificar relaciones de tipo: type IsString<T> = T extends string ? true : false;

Mapped Types con keyof

Transforman cada propiedad de un tipo existente. Partial<T>, Required<T>, Readonly<T>, Pick<T, K>. Desde TS 4.1, remapeo de claves con template literal types.

ESLint Flat Config: La nueva configuración

Mon, 26 Feb 2024 00:00:00 +0900

ESLint Flat Config (v9+) reemplaza el formato jerárquico .eslintrc con un sistema de configuración plano basado en arrays de objetos.

Diferencias clave

Un solo archivo eslint.config.js. Sin herencia de configuraciones anidadas. Las reglas se evalúan en orden. Adiós a .eslintrc, extends, overrides.

Sintaxis

export default [
 { rules: { 'no-unused-vars': 'error' } },
 { files: ['**/*.ts'], rules: { '@typescript-eslint/no-explicit-any': 'error' } }
];

Migración

Usa eslint --flag unstable_flat_config para probar. @eslint/migrate-config convierte .eslintrc. Las configuraciones populares (typescript-eslint, eslint-plugin-react) ya soportan flat config.

Profundizando en el Event Loop de JavaScript: Microtasks, Macrotasks y más

Mon, 19 Feb 2024 00:00:00 +0900

El event loop de JavaScript es uno de los conceptos más importantes y menos entendidos. A pesar de ser single-threaded, su event loop permite concurrencia no bloqueante mediante un sistema de colas.

Call Stack

Estructura LIFO. Principio de run-to-completion: cada función se ejecuta hasta completarse antes de que otro código la interrumpa.

Cola de Macrotasks

Origen: setTimeout, setInterval, I/O, eventos UI. El event loop toma UNA macrotask por iteración, la ejecuta, luego procesa la cola de microtasks.

Gestión de máquinas virtuales en Proxmox

Sun, 18 Feb 2024 00:00:00 +0000

Proxmox gestiona VMs KVM/QEMU con interfaz web, CLI y API REST. Soporta snapshots, clones y migración en vivo.

Creación de VMs

ISO local o desde URL. Configura CPU, memoria, disco, red. Soporta BIOS y UEFI. VirtIO drivers para rendimiento óptimo.

Snapshots y clones

Snapshots: punto de restauración instantáneo. Clones completos (independientes) o enlazados (comparten disco base). Templates para despliegue rápido.

Migración en vivo

Mueve VMs entre nodos sin downtime. Almacenamiento compartido requerido. Reequilibrio de carga automático con HA.

Service Workers: Experiencia offline y caché avanzada

Mon, 12 Feb 2024 00:00:00 +0900

Los Service Workers actúan como proxy entre el navegador y la red. Permiten experiencias offline, sincronización en segundo plano y push notifications.

Ciclo de vida

Instalación → Activación → Fetch. self.addEventListener('install') para precargar recursos. activate para limpiar cachés antiguas.

Estrategias de caché

Cache First: para assets estáticos. Network First: para APIs. Stale While Revalidate: balance. Network Only: datos sensibles. Cache Only: recursos offline.

Offline primero

Precarga recursos en install. Sirve desde caché en fetch. Actualiza en segundo plano. Sincroniza cambios cuando vuelve la conexión (Background Sync).

Desarrollo de plugins para Vite

Mon, 05 Feb 2024 00:00:00 +0900

Los plugins de Vite transforman código en tiempo de build y desarrollo. Siguen la interfaz de Rollup con hooks específicos de Vite.

Hooks básicos

resolveId, load, transform son los hooks universales. handleHotUpdate para HMR personalizado. config para modificar la configuración de Vite.

Ejemplo de plugin

export function myPlugin() {
 return {
 name: 'my-plugin',
 transform(code, id) {
 if (id.endsWith('.special')) {
 return transformSpecial(code);
 }
 }
 };
}

Hooks de Vite

configResolved, configureServer, transformIndexHtml, closeBundle. Cada hook se ejecuta en una fase específica del pipeline.

OAuth 2.0 y OpenID Connect: Autenticación y autorización modernas

Mon, 29 Jan 2024 00:00:00 +0900

OAuth 2.0 es un protocolo de autorización delegada. OpenID Connect (OIDC) añade una capa de autenticación sobre OAuth 2.0.

Roles en OAuth 2.0

Resource Owner (usuario), Client (app), Authorization Server (Auth0, Cognito), Resource Server (API). Flujo: consentimiento → token → acceso.

Grant Types

Authorization Code: el más seguro, con PKCE. Client Credentials: servidor a servidor. Implicit: obsoleto. Device Code: dispositivos sin navegador.

OpenID Connect

Añade id_token (JWT) con información del usuario. /userinfo endpoint. Scope openid. Claims: sub, name, email, picture.

Git Submodules: Dependencias anidadas

Mon, 22 Jan 2024 00:00:00 +0900

Los submódulos de Git permiten incluir un repositorio dentro de otro como una referencia versionada. Mantienen independencia de historial.

Añadir un submódulo

git submodule add <url> <path> clona el repositorio y crea un archivo .gitmodules. El commit padre registra el hash exacto del submódulo.

Clonar con submódulos

git clone --recurse-submodules <url> clona el proyecto y todos los submódulos. Para repos existentes: git submodule update --init --recursive.

Actualizar submódulos

git submodule update --remote actualiza al último commit de la rama configurada. Luego commitear el cambio de hash en el repositorio padre.

Core Web Vitals: Métricas esenciales de rendimiento web

Mon, 15 Jan 2024 00:00:00 +0900

Core Web Vitals son tres métricas que Google usa para evaluar la experiencia de usuario. Impactan directamente en SEO y ranking de búsqueda.

LCP (Largest Contentful Paint)

Mide el tiempo de renderizado del elemento visible más grande. Objetivo: menos de 2.5s. Estrategias: optimizar imágenes, precargar recursos críticos, minimizar bloqueo de renderizado.

INP (Interaction to Next Paint)

Reemplaza FID como métrica de interactividad. Mide la latencia desde la interacción del usuario hasta el siguiente pintado. Objetivo: menos de 200ms.

React Server Components: El futuro del renderizado web

Mon, 08 Jan 2024 00:00:00 +0900

React Server Components (RSC) representan un cambio de paradigma. Los componentes se ejecutan exclusivamente en el servidor, enviando cero JavaScript al cliente. A diferencia del SSR tradicional, RSC produce un formato serializado especial (payload RSC) que el reconcilidor de React en el cliente usa para reconstruir el árbol de componentes sin ejecutar el código.

Límites servidor/cliente

Las directivas “use client” y “use server” definen el límite. Componentes sin directiva son server components por defecto. Los server components no pueden usar estado, efectos o APIs del navegador.

Health Checks en Docker: Monitoreo de servicios

Mon, 25 Dec 2023 00:00:00 +0900

Los health checks de Docker permiten que el engine monitoree el estado de los contenedores y tome acciones automáticas (reinicios, notificaciones).

Sintaxis

HEALTHCHECK --interval=30s --timeout=3s --retries=3 CMD curl -f http://localhost || exit 1 en Dockerfile, o healthcheck en docker-compose.yml.

Protocolos

HTTP: curl -f http://localhost/health. TCP: nc -z localhost 3306. Script personalizado para lógica compleja.

Integración con orquestadores

Docker Compose reinicia contenedores no saludables. Swarm y Kubernetes usan health checks para reemplazar instancias fallidas.

Streams en Node.js: Procesamiento eficiente de datos

Wed, 20 Dec 2023 00:00:00 +0900

Los streams de Node.js permiten procesar datos en fragmentos (chunks) sin cargar todo en memoria. Esencial para archivos grandes y redes.

Tipos de streams

Readable: fuente de datos. Writable: destino de datos. Transform: transforma datos (compress, encrypt). Duplex: ambos (net socket).

Pipe y pipeline

readable.pipe(writable) encadena streams. pipeline (recomendada) maneja errores y limpia correctamente: pipeline(readable, transform, writable, callback).

Backpressure

Cuando el writable es más lento que el readable, se aplica backpressure. highWaterMark controla el buffer interno. El stream pause automáticamente.

Patrones avanzados de CSS Grid: Layouts complejos simplificados

Fri, 15 Dec 2023 00:00:00 +0900

CSS Grid ha transformado el diseño de layouts web. Más allá de grid-template-columns: 1fr 1fr 1fr hay un potente conjunto de características.

Named Grid Areas

Define layouts que se leen como un wireframe directamente en CSS. El reordenamiento responsivo es trivial cambiando grid-template-areas.

Auto-Fill vs Auto-Fit

auto-fill preserva tracks vacíos como espacio; auto-fit los colapsa a cero. Usa auto-fill para columnas predecibles y auto-fit para layouts fluidos.

Dense Packing

grid-auto-flow: dense rellena huecos moviendo elementos a filas anteriores. Cuidado con el orden de lectura para accesibilidad.

Utility Types de TypeScript: Tu caja de herramientas de tipos

Sun, 10 Dec 2023 00:00:00 +0900

TypeScript incluye utility types globales para transformaciones comunes de tipos. Conocerlos evita reinventar la rueda y hace el código más legible.

Básicos

Partial<T>: todas las propiedades opcionales. Required<T>: todas obligatorias. Readonly<T>: todas de solo lectura. Record<K, V>: objeto con claves K y valores V.

Para unión e intersección

Pick<T, K>: seleccionar propiedades. Omit<T, K>: excluir propiedades. Extract<T, U>: extraer miembros de unión. Exclude<T, U>: excluir miembros de unión.

Para funciones

Parameters<T>: tipos de parámetros. ReturnType<T>: tipo de retorno. ConstructorParameters<T>: parámetros de constructor. InstanceType<T>: tipo de instancia.

Patrones avanzados de Promises en JavaScript: Dominio del flujo asíncrono

Tue, 05 Dec 2023 00:00:00 +0900

Las Promises son fundamentales en JavaScript moderno. Más allá de cadenas básicas .then(), existen patrones avanzados para control de concurrencia, manejo de errores y cancelación.

Combinadores de Promises

Promise.all resuelve cuando todas resuelven. Promise.allSettled cuando todas se settling (nunca rechaza). Promise.race con la primera que se settling. Promise.any con la primera que resuelve.

Control de concurrencia

Un limitador de concurrencia encola tareas y asegura que solo un número específico se ejecute simultáneamente. El patrón pMap con Promise.race soporta contrapresión.

Cloudflare Pages: Despliegue de sitios estáticos

Tue, 28 Nov 2023 00:00:00 +0900

Cloudflare Pages aloja sitios estáticos y aplicaciones Jamstack con integración directa desde repositorios de Git.

Configuración inicial

Conecta tu repositorio (GitHub/GitLab). Selecciona la rama, framework (Hugo, Next, React) y comandos de build. Despliegue automático en cada push.

Funciones serverless

Cloudflare Functions ejecutan código en el edge. Basadas en Workers. Formularios, autenticación, APIs ligeras.

Ramas y previsualizaciones

Deploy preview por PR. Ramas de producción y staging. URLs únicas por preview. Ideal para revisión de cambios.

Guía de Cloudflare para desarrolladores web

Tue, 28 Nov 2023 00:00:00 +0900

Cloudflare ofrece CDN, seguridad, DNS y optimización de rendimiento para sitios web. Configurarlo correctamente mejora velocidad y protección.

Configuración DNS

Añade tu dominio, configura registros DNS (A, CNAME, MX). Activa el proxy naranja (proxy) para proteger IPs de origen y activar optimizaciones.

SSL/TLS

Modos: Off, Flexible, Full, Full (strict). Recomendado: Full (strict) con certificado de origen. HSTS para forzar HTTPS.

Reglas de Page Rules y WAF

Reglas de caché, redirecciones, seguridad por ruta. Firewall con reglas custom, rate limiting y protección DDoS.

Instalación y configuración de Proxmox VE

Wed, 15 Nov 2023 00:00:00 +0000

Proxmox VE es una plataforma de virtualización open source basada en Debian. Combina KVM para máquinas virtuales y LXC para contenedores.

Instalación

Descarga la ISO desde proxmox.com. Instala en hardware bare-metal. Configura red: IP estática, bridge vmbr0, DNS, gateway.

Post-instalación

Accede via web: https://IP:8006. Repositorio Enterprise (requiere suscripción) o repositorio gratuito No-Subscription. Actualiza el sistema.

Almacenamiento

ZFS (recomendado), LVM, EXT4, NFS. Creación de piscinas de almacenamiento. Deduplicación y compresión ZFS. Backups integrados.

Google Analytics para desarrolladores

Fri, 20 Oct 2023 00:00:00 +0900

Google Analytics 4 (GA4) es la plataforma de análisis de Google. Los desarrolladores deben implementarlo correctamente para obtener datos precisos.

Implementación

GTag: gtag('config', 'G-XXXXXXXXXX'). GA4 Measurement ID. Eventos recomendados: page_view, scroll, click, view_item.

Eventos personalizados

gtag('event', 'tutorial_completed', { name: 'React Guide' }). Hasta 25 parámetros por evento. Eventos únicos para acciones clave del negocio.

Anonimización de IP (automática en GA4). Consent Mode para cumplir con regulaciones. Sin cookies de terceros para mediciones básicas.

Guía de OWASP ZAP para pruebas de seguridad

Fri, 20 Oct 2023 00:00:00 +0900

OWASP ZAP (Zed Attack Proxy) es una herramienta de seguridad open source para encontrar vulnerabilidades en aplicaciones web.

Instalación

Descarga desde zaproxy.org. Versión con JRE incluida. O via Docker: docker pull softwaresecurityproject/zap-stable.

Escaneo automático

Spider: rastrea URLs. Active Scan: inyecta payloads de seguridad. Modo automático: zap -quickurl https://target.com.

Integración CI/CD

ZAP API para automatización. zap-full-scan.py para escaneo completo. zap-api-scan.py para APIs. Reports en JSON/HTML.

Principales hallazgos

XSS, SQL Injection, CSRF, missing headers (CSP, HSTS), authentication bypass, directory traversal, información sensible expuesta.

Wayback Machine: Archivo de la web para desarrolladores

Mon, 11 Sep 2023 00:00:00 +0900

The Wayback Machine (archive.org) archiva páginas web desde 1996. Útil para desarrolladores para debugging, análisis y referencia histórica.

Casos de uso

Recuperar código perdido, analizar cambios de diseño/SEO de competidores, verificar contenido histórico, debugging de cambios que rompieron algo.

API

Disponible en https://archive.org/help/wayback_api_usage.html. Búsqueda por URL y rango de fechas. Save Page Now para archivar páginas.

Integración con desarrollo

Ver cómo cambiaron las APIs de terceros. Recuperar documentación eliminada. Analizar la evolución de estándares web.

Guía completa de Git para desarrolladores web

Sun, 10 Sep 2023 00:00:00 +0900

Git es el sistema de control de versiones esencial para el desarrollo web moderno. Esta guía cubre desde la configuración inicial hasta flujos de equipo.

Configuración inicial

git config --global user.name "Tu Nombre"
git config --global user.email "email@ejemplo.com"
git config --global init.defaultBranch main

Flujo diario

git pull → git checkout -b feature/nombre → trabajo → git add → git commit → git push -u origin feature/nombre → abrir PR.

Resolución de conflictos

Los conflictos ocurren cuando dos ramas modifican las mismas líneas. Márcalos: <<<<<<<, =======, >>>>>>>. Resuelve, git add, git commit.

Guía de GitHub para desarrolladores

Sun, 10 Sep 2023 00:00:00 +0900

GitHub es la plataforma de colaboración de código más grande. Más allá de git push/pull, ofrece herramientas de gestión de proyectos y CI/CD.

Pull Requests

Los PRs son el corazón de la colaboración. Incluye descripción, contexto, capturas y enlaces a issues. Revisión de código con comentarios en línea.

Issues y Projects

Issues para bugs y características. Projects (tableros Kanban) para gestión visual. Labels, milestones, assignees y templates.

GitHub Actions

CI/CD integrado. Workflows YAML para tests, lint, despliegues. Actions del Marketplace para integraciones comunes.

Instalación y configuración de Hugo

Wed, 23 Aug 2023 00:00:00 +0900

Hugo es el generador de sitios estáticos más rápido. Escrito en Go, genera sitios completos en milisegundos.

Instalación

Windows: choco install hugo-extended o descargar binario. macOS: brew install hugo. Linux: snap install hugo. Verifica con hugo version.

Crear un sitio nuevo

hugo new site mysite crea la estructura. Añade un tema: git submodule add <tema-url> themes/mi-tema. Configura en hugo.toml.

Modo desarrollo

hugo server -D inicia el servidor con livereload. -D incluye drafts. --navigateToChanged navega automáticamente al archivo editado.