Web Design and Engineering · Apuntes

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL o animaciones CSS: cuándo usar cada una (2026)

CSS anima transform y opacity fuera del hilo principal, gratis. WebGL te da la GPU en bruto. Aquí está la línea entre ambos, con los costes de bundle y batería.

A scattered heap of grey files joined by lines into one lit file, which feeds a text panel whose lines sit exactly inside their dashed outlines

Web

Rendimiento de fuentes web: un solo WOFF2, cero saltos

Una familia sin optimizar añade 500KB y retrasa el texto legible. Haz subset a WOFF2, alójala tú y ajusta el fallback con size-adjust: nada se mueve al swap.

A ring gauge lit for less than half its length, the rest broken into six dark segments, beside six lanes of tasks each with one long white block past a dashed limit

Web

6 errores de frontend que hunden tu puntuación de Lighthouse en 2026

El Total Blocking Time pesa el 30% de la puntuación de Lighthouse, pero casi todos optimizan la métrica equivocada. Seis errores en producción y cómo corregirlos.

A dark client tile and a lit server tile joined by one short white line between matching ports of small pills, with a dashed detour through three empty boxes above

Web

RPC con tipos en Server Actions de Next.js: sin capa de API

Un Server Action ya es una RPC. Así se vuelve type-safe de extremo a extremo y validado en runtime, sin ruta de API ni tipo de respuesta que mantener.

One tall glowing white screen full of moving shapes beside a grid of nineteen identical grey document pages

Web

Arquitectura web en 2026: home como app, el resto estático

Casi todos los sitios tratan cada página como una SPA. Nosotros hacemos lo contrario: la home como aplicación, el resto como documentos estáticos. Dos targets.

Three closed white rings holding a large painted block, a pointer with a ripple, and stacked bars on their dashed outlines, each above a meter marked in its good zone

Web

Core Web Vitals en Next.js en 2026: cómo llegar al verde

Pasos concretos para llegar a LCP bajo 2.5s, INP bajo 200ms y CLS bajo 0.1 en un SaaS Next.js 16, y cómo leer el campo cuando Lighthouse miente.

An S-shaped easing curve with a tile repeated along it in fading copies, bunched at the ends; four lit tiles top left, three struck-through outlines bottom right, a scrollbar at the edge

Web

Stack web inmersivo en 2026: Lenis, GSAP, y qué dejar fuera

Lenis (3 kB), GSAP gratis desde abril de 2025, ScrollTrigger para el scroll, y las scroll-driven animations nativas en CSS. El stack que enviamos.

On a white ground, nine black concentric rings around a black core, nine dark lines arriving from outside, each stopped at a different ring

Web

TypeScript strict mode: los 9 ajustes que nunca apagamos

strict: true activa 9 comprobaciones y desde TypeScript 6.0 es el default. Qué atrapa cada flag en producción, más los 3 flags fuera del bundle que añadimos.

Two lanes of weekly tile columns: above, six dashed empty weeks then a steady grey block three tiles high; below, lit columns starting at once and varying in height

Web

Agencia Next.js o equipo interno: cuándo gana cada uno en 2026

Un senior Next.js en EE. UU. cuesta 195 mil dólares al año a coste pleno y seis semanas para llegar. Una agencia arranca desde 60 dólares la hora. Dónde gana cada uno.

A brick wall of dark rounded bricks in which thirteen scattered bricks are lit white

Web

Seguridad de Server Actions Next.js: 13 fallos y arreglos 2026

Next.js corrigió 13 fallos de seguridad en 2026: bypass de middleware, cache poisoning y SSRF. Qué cambió y cómo publicar Server Actions seguras ahora.

A thin upper lane of small tiles with a dashed empty outline in it, a curved arrow down to the same tile lit on a wide lower lane carrying a block of packages and a long bar

Web

Edge runtime o Node runtime: qué cambia en Next.js 16

Next.js 16 mueve el middleware al runtime de Node y lo renombra proxy.ts. Dónde gana Edge en latencia y dónde gana Node con dependencias y tareas largas.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Por qué quitamos Tailwind de producción: un design system solo CSS

Tras años usando Tailwind junto a nuestro design system, lo retiramos de producción. Esta es la arquitectura que lo reemplazó y lo que cambió.