Blog

• astro
• webgl
• curtainsjs
• gsap

Componente Astro para efectos hover con WebGL y Curtains.js. Transiciones de imagen con displacement, fallback automático y soporte para dispositivos de bajo rendimiento.

Seguir leyendo

• astro

Descubre cómo logré no perder puntuación de 100 en Lighthouse migrando de Nuxt a Astro. Mejoras en SEO, rendimiento y nuevas funcionalidades como paginación y filtros.

Seguir leyendo

• css

Aprende a posicionar elementos sin JavaScript usando Anchor Positioning y crea animaciones al hacer scroll con Animation Timeline. Guía con ejemplos prácticos.

Seguir leyendo

• javascript
• webgl
• curtainsjs

Tutorial para integrar SwiperJS con CurtainsJS. Crea sliders con efectos WebGL de alto rendimiento, distorsiones y transiciones fluidas.

Seguir leyendo

• css
• accesibilidad

Descubre por qué usar unidades relativas como REM mejora la accesibilidad web permitiendo a los usuarios escalar la tipografía sin romper el diseño.

Seguir leyendo

• javascript
• css

Tutorial sobre cómo crear un cursor personalizado con efectos de mezcla (blend-mode). Incluye análisis de rendimiento sobre la creación de estelas en el DOM.

Seguir leyendo

• javascript
• html
• css

Tutorial paso a paso para integrar Web Components nativos (Vanilla JS) en Storybook. Aprende a crear stories, configurar controles y documentar tus componentes.

Seguir leyendo

• javascript
• angular
• svg

Aprende a crear un componente de iconos en Angular optimizado usando SVG Sprites y Symbols. Mejora el rendimiento y la personalización de tus iconos.

Seguir leyendo

• javascript
• angular
• performance

Aprende a implementar Intersection Observer en Angular mediante Directivas. Optimiza el rendimiento detectando elementos visibles y usando ScrollIntoView.

Seguir leyendo

• css
• pildoritas

Exploración de la propuesta experimental @scroll-timeline para vincular animaciones CSS al scroll. Nota: La especificación ha evolucionado a animation-timeline.

Seguir leyendo