Los Nuevos Valores Predeterminados de la Web Moderna

Comenzaré con una retrospectiva realmente corta y rápida sobre mi carrera porque ahora mismo estoy haciendo documentación y cosas de desarrollo para Storyblok. Pero hace más de una década, estaba trabajando para agencias de marketing en muchos tipos diferentes de sitios web. Algunos de ellos eran páginas de aterrizaje. De hecho, mi primer proyecto fue la página de aterrizaje del lanzamiento de Microsoft Windows 8, y así es como puedes decir que soy realmente viejo.

También guías de marca, sitios promocionales y de películas. Algunas de estas películas eran realmente bien conocidas, no puedo mencionarlas ahora, pero después de la charla puedes venir y preguntarme. Y probablemente mis favoritas eran los programas de iniciativas sociales. Estos sitios eran súper diferentes visualmente y en diseño, pero en las variables eran en realidad bastante similares. Estábamos haciendo lo mismo una y otra vez.

Estas experiencias eran sitios realmente inmersivos de desplazamiento. Obtendrías paneles de altura completa. Cuando te desplazas, obtendrías estos indicadores porque nunca podrías ver debajo del pliegue que había más contenido por explorar. Así que siempre teníamos este tipo de CTAs de ayuda. Tendríamos ajuste de desplazamiento, así que nunca verías esto cada vez que intentabas desplazarte. Detendríamos eso, secuestraríamos, y te mostraríamos el siguiente panel. Y luego, cuando el panel se volvía visible, ejecutaríamos alguna animación, incluso algunos videos y escenas de WebGL. Esto no era lo único que estos sitios tenían en común.

Y también estaban llenos de hacks. En realidad estábamos como torciendo el brazo de todos los navegadores. Estábamos tratando de hacer cosas que en realidad no eran posibles con la web nativa. Y el código era realmente difícil de mantener porque estos hacks se acumulaban una y otra vez. Y estábamos agregando un montón de código. Recuerda que estos sitios tenían activos realmente pesados, imágenes, videos. Así que además de eso, mucho código. Súper. Y tomaba mucho en una red móvil para realmente ver los sitios. E incluso después de cargar todo, el rendimiento era realmente bastante malo porque estaba lleno de hacks. Y seguí reflexionando mucho sobre cuánto han mejorado CSS en las APIs web en los últimos cinco años tal vez. Y cuánto me hubiera encantado tener como el nuevo CSS, pero como hace 10 años. Así que esta charla trata sobre este sentimiento de los nuevos valores predeterminados de la web moderna que me permitirían construir estos sitios de una mejor manera.

Súper rápido porque esta es una charla relámpago y no tengo mucho tiempo. Ese es mi nombre. Eso es lo que hago. Ahí es donde vivo. Esa es mi cara. Y ese soy yo en BlueSky y ese es mi blog.

Vamos al grano. Primer problema. Queríamos paneles de altura completa en cada sección. En el escritorio, por supuesto, es súper fácil. Pero el problema era en móviles, en realidad. En móviles, tienes este tipo de elementos de la interfaz de usuario del navegador que se interponen y modifican la altura del viewport.

Y a veces estos elementos de la interfaz de usuario cubrían información importante. Algunos de ellos eran como estos CTAs para desplazarse. Y así que este no era un detalle que pudiéramos pasar por alto. Así que descubrimos que nuestros usuarios en móviles descansan su pulgar en la pantalla mientras esperan. Creo que todo el mundo hace eso.

Así que creamos este hack donde al iniciar el toque recalculábamos la altura de todos los paneles y luego realmente eliminábamos el event listener. El problema es que el usuario podría no hacer eso. Pensamos que podrían hacerlo. Pero podrían realmente rotar, desplazarse. Así que teníamos que hacer eso para todos los eventos, lo cual no estaba bien. Y no me gustó. Necesito ser honesto.

Funcionó. Pero no se sentía bien. Así que sí, eso ahora es una línea de CSS. Es solo eso. Si no conoces esa unidad, es como dvh. Eso es altura de viewport dinámica. Y esa unidad se adapta cuando alguien con algo realmente este tipo de elementos de la interfaz de usuario de los navegadores realmente cubren parte del viewport. Y eso es genial. Eso no es hackear. Esas son unidades de viewport dinámicas. Ese es el nombre de la API.

Animación de desplazamiento. Tenemos este tipo de CTAs que harías clic o tocarías y el siguiente panel se desplazaría. Por supuesto, no hay opción nativa para eso hace 10 años. Así que lo que haríamos es que accederíamos al offset top del siguiente panel que queríamos mostrar. Conseguiríamos un contenedor de desplazamiento y, con una biblioteca, animaríamos la propiedad scroll top de este contenedor. Problemas. Así que cada vez que accedes a este tipo de propiedades como offset top, activarías un recálculo de diseño en el navegador. No está bien. Y además, animar scroll top no está acelerado por GPU, por lo que el rendimiento era realmente bastante malo. Ahora mismo, súper simple. Puedes simplemente usar un scroll interview to the balance. Realmente una API súper antigua.

Está presente en Internet Explorer. Pero la principal diferencia es que ahora tenemos scroll behavior en CSS, que es con una línea en el contenedor de desplazamiento, lo logras. Y eso es un scroll behavior. Siguiente cosa. Scroll snapping. La cosa que mencioné que nunca sucedería en estos proyectos es este tipo de como la mitad de un panel y la otra mitad en un panel, te bloquearíamos cada vez que quisieras desplazarte. Y la forma en que hicimos eso fue, adivina, un hack. Detectaríamos cuando intentabas desplazarte. Prevendríamos el default, así que en realidad no se desplazaba lo que sucedía, pero aún obtendríamos las coordenadas de ese evento. Y calcularíamos la dirección de eso. Que es un panel actual, llamar a una función, y animaríamos ese panel hacia afuera, y el siguiente hacia adentro. Sí. Nuevamente, no es genial, porque puedo decirte que lo principal no era el rendimiento aquí, tal vez, pero romper la inercia de desplazamiento nativa del navegador no se sentía bien en UX. Algunos sitios incluso hacen eso hoy. No sé. Así que, no es genial. ¿La solución? Scroll snap como una API CSS. Dos líneas. Básicamente, configuras el tipo en el contenedor, y luego la alineación en el panel. Y lo tienes hecho. Eso es sin JavaScript. Esta es probablemente mi API CSS favorita. Tan, tan poderosa en solo dos líneas. Es increíble. Interceptación de desplazamiento. Te dije que queríamos animar algunas cosas cada vez que un nuevo panel entraba. Así que, sí, no había opción nativa hace diez años. Así que, cuando queríamos interceptar ese panel, necesitábamos escuchar el desplazamiento, y cada vez que te desplazabas, obtendríamos el offset top nuevamente, y obtendríamos el panel actual dado esa posición. Y después de esa posición, ejecutamos algunas animaciones, y después de esas animaciones, necesitamos limpiar las cosas. Esto es porque el rendimiento era un problema tal que eliminaríamos algunos activos, detendríamos algunas animaciones en otros paneles que no estaban activos, y sí.

Todavía no funcionaba, honestamente. Y tenías algunos paneles fuera de pantalla, como, no sé, ejecutando algún WebGL o algunos videos. Fue realmente bastante complicado. Y ahora mismo tienes la intersección de la API del servidor, y eso es súper simple, porque solo verificas si el panel está intersectando, ejecutas las animaciones, y para una ganancia de rendimiento súper fácil, simplemente puedes dejar de observar el objetivo. Genial.

Intersección del servidor. Esto es realmente bastante antiguo. Así que, persona en navegadores antiguos. Tenemos animaciones. Como te dije, cada vez que interceptábamos uno de estos paneles, queríamos animar prácticamente todo lo que estaba dentro de él, porque realmente nos gustaba el diseño de movimiento. Y específicamente, estábamos haciendo flujos de animación complejos. Así que queríamos animaciones basadas en promesas. No teníamos eso. En realidad, había grandes bibliotecas de animación. Estaba GreenSock, que era uno de mis favoritos en ese momento. Pero no tenía promesas. Todo eran callbacks, y era realmente bastante difícil cuando necesitabas animar, no sé, más de siete elementos, y estas animaciones eran realmente bastante complicadas.

Así que para animaciones, sí, creamos nuestro propio envoltorio de promesas para GreenSock, lo que añadió mucho código encima del otro código que teníamos. Así que no nos gustó, y ahora mismo tienes una función de animación para cada elemento HTML. Simplemente tomas el elemento HTML, llamas a .animate, pasas un array de transformaciones que quieres hacer, y lo más interesante es que esto devuelve un objeto de animación, y ese objeto de animación tiene una promesa terminada. Puedes esperar y esperar y esperar y esperar, y eso es realmente una promesa todo si quieres animaciones concurrentes. Es súper genial. Es solo una línea. Increíble. API de animación web. Y la última cosa de la que voy a hablar hoy son las transiciones de vista. Puede que hayas oído hablar de ello, porque es realmente bastante nuevo. Solo está en Chrome y Chromium. Pero lo principal es que solo para esta cosa, tuvimos que usar un framework. No estoy en contra de los frameworks, pero estos proyectos no eran difíciles de construir debido a la característica de la aplicación web, sino por estos hacks.

Pero luego, además de eso, tuvimos que usar un framework solo para usar esta transición y animar la página cuando estaban intercambiando y revelando, y ahora mismo tienes una API de transición de vista disponible para ti. Así que eso es bastante genial, y el resultado es en realidad una web como esta, completamente animada, con desplazamiento súper controlado. Puedes ver cómo los elementos aparecen. Súper agradable. Puedes ver que se siente natural, porque esto es en realidad la inercia de desplazamiento del navegador. No estoy secuestrando nada aquí. Esto no es un video ni nada. Esto es realmente una aplicación. Existe. Puedes escanear ese código QR y simplemente escribir esa URL web, y también el código está disponible en GitHub.

También puedes escanear ese código QR y obtener el código. Realmente súper simple, literalmente como 20, no sé, 30 líneas de código tanto para CSS como para JavaScript. Y eso es todo.

Muchas gracias. Gracias.