Categorías

Frontend

UI y experiencia de usuario · 40 artículos · Página 2 de 4

Cuadrícula de maquetación CSS que muestra puntos de ruptura de container queries adaptando componentes al tamaño de su contenedor

Maquetación CSS moderna: container queries y subgrid

Guía práctica de diseños responsivos con container queries y subgrid: respuesta por componente, herencia de alineación, cuadrículas y paneles.

10 mar 2025·5 min de lectura

Árbol de componentes React con anotaciones de accesibilidad que muestran roles ARIA y el flujo del foco de teclado

Frontend

Cómo construir componentes React accesibles desde cero

Guía para construir componentes React con la accesibilidad como prioridad: patrones ARIA, navegación por teclado, gestión del foco y pruebas de lectura.

13 ene 2025·5 min de lectura

Efectos de animación fluidos basados en el desplazamiento en una página web moderna

Frontend

Animaciones CSS basadas en scroll sin JavaScript

Guía práctica para crear animaciones de scroll de alto rendimiento con timelines nativos de CSS, view transitions y la propiedad animation-timeline.

26 oct 2024·5 min de lectura

Comparación lado a lado del mismo componente de tarjeta renderizado pequeño en una barra lateral y grande en un área de contenido principal usando container queries

Frontend

Container Queries: componentes que se adaptan a su contenedor

Crea componentes responsivos con container queries que se adaptan a su contenedor y no al viewport: el mismo layout sirve en barras laterales y modales.

3 ago 2024·5 min de lectura

Herramientas de desarrollo del navegador que muestran una comparación de rendimiento entre la ejecución de JavaScript y WebAssembly para una tarea de alto consumo computacional

Frontend

WebAssembly para desarrolladores de JavaScript: casos de uso prácticos

Casos de uso prácticos de WebAssembly para desarrolladores JavaScript: imágenes, compresión, criptografía, y cuándo JavaScript ya es bastante rápido.

30 may 2024·6 min de lectura

Página web que demuestra animaciones CSS controladas por scroll con elementos que aparecen gradualmente, fondos parallax y una barra de progreso que avanza a medida que el usuario se desplaza

Frontend

Animaciones CSS controladas por scroll: más allá de JavaScript

Crea animaciones ligadas al scroll con la API de CSS: timelines de progreso y de vista, parallax y encabezados sticky, fuera del hilo principal.

30 abr 2024·4 min de lectura

Comparación lado a lado que muestra la misma imagen principal servida en distintas resoluciones y formatos para dispositivos móviles, tablets y escritorio

Frontend

Imágenes responsivas: srcset, sizes y formatos modernos

Domina la entrega de imágenes responsivas con srcset, sizes, el elemento picture y formatos como AVIF y WebP: páginas más rápidas, igual calidad.

20 feb 2024·5 min de lectura

Diagrama de un layout complejo de CSS Grid que muestra áreas de grid superpuestas, alineación con subgrid, áreas de plantilla con nombre y reordenamiento responsive en distintos breakpoints

Frontend

Patrones avanzados de CSS Grid para layouts complejos

CSS Grid avanzado en producción: subgrid, áreas con nombre, reordenamiento responsive, colocación automática, minmax y componentes conscientes del grid.

21 dic 2023·5 min de lectura

Comparación de media queries que apuntan al ancho del viewport frente a container queries que apuntan al ancho del elemento padre para el diseño de componentes responsivos

Frontend

Módulos de UI portables con container queries de CSS

Cómo las container queries permiten crear componentes que se adaptan al tamaño de su padre y no al viewport: módulos de UI portables a cualquier layout.

21 oct 2023·5 min de lectura