Lo que voy aprendiendo.
Aprendizajes breves, gotchas y notas del día a día en desarrollo web. Patrones de Laravel, React, Next.js y más.
Lo que aprendí hoy
Laravel 13: Context::add() comparte datos entre middlewares y jobs
El nuevo helper `Context` en Laravel 13 permite pasar metadata a lo largo del request sin pasar parámetros. Útil para tracing: `Context::add('request_id', $id)` en un middleware y luego `Context::get('request_id')` desde cualquier job en cola. Persiste automáticamente al despachar jobs.
PHP 8.4: Property hooks reemplazan getters y setters
PHP 8.4 introduce property hooks nativos. En vez de definir `getName()` y `setName()`, escribes `public string $name { get => ucfirst($this->_name); set => $this->_name = trim($value); }`. Menos boilerplate y API más limpia para value objects y DTOs.
@starting-style permite animar elementos al aparecer en el DOM
La regla CSS `@starting-style` define el estado inicial de un elemento antes de la primera renderización. Útil para animaciones de entry sin JS: define los valores iniciales dentro de `@starting-style { ... }` y los finales en la regla normal. Soportado en Chrome 117+ y Safari 17.5+.
View Transitions API funciona cross-document en Chrome 126+
Las View Transitions ya no son solo para SPAs. Con `@view-transition { navigation: auto; }` en el CSS, Chrome 126+ aplica transiciones automáticas entre navegaciones MPA. Esto significa transiciones suaves en sitios estáticos sin necesidad de un framework JS.
Next.js 16: 'use cache' + cacheLife() reemplaza configuración fetch
Con Cache Components habilitado, marcar una función con `'use cache'` y opcionalmente `cacheLife('hours')` reemplaza el viejo `fetch(url, { next: { revalidate } })`. Más declarativo y funciona con cualquier fuente de datos, no solo fetch. PPR genera shells estáticos + streaming dinámico.
Next.js revalidateTag() requiere expire: 0 para invalidación inmediata
Descubrí que `revalidateTag(tag)` en Next.js 16 no invalida inmediatamente por defecto. Debes usar `revalidateTag(tag, { expire: 0 })` para forzar invalidación inmediata del cache. Esto es crítico para webhooks de revalidación.
OKLCH es superior a HSL para dark mode
OKLCH (color space) mantiene la percepción de brillo constante entre colores, a diferencia de HSL. Esto significa que un color con L=0.5 en OKLCH se verá igualmente brillante que cualquier otro color con L=0.5, perfecto para sistemas de diseño consistentes en dark mode.
React.cache() deduplica requests en Server Components
Usar `cache()` de React en funciones de data fetching en Next.js App Router deduplica automáticamente requests idénticos durante el mismo render tree. Ejemplo: si 3 componentes llaman a `getPost('slug-123')`, solo se ejecuta 1 request.
Tailwind @theme inline reemplaza extend en v4
En Tailwind CSS v4, `@theme inline` es la nueva forma de extender el tema. Reemplaza `theme: { extend: {} }` de v3. Mejora el performance del build y permite CSS variables nativas.
AVIF reduce imágenes 50% vs WebP
AVIF logra la misma calidad visual que WebP con ~50% menos tamaño de archivo. Para Next.js, configurar `formats: ['image/avif', 'image/webp']` como fallback es la mejor estrategia. Safari soporta AVIF desde v16.4.
adjustFontFallback previene CLS en font loading
Next.js tiene `adjustFontFallback: true` en next/font que ajusta métricas del fallback font para match el custom font, previniendo layout shift (CLS) durante la carga. Crítico para Core Web Vitals.
No te pierdas ningún aprendizaje.
Suscríbete al feed RSS y recibe cada nuevo TIL y artículo directamente en tu lector favorito.