Los Nuevos Valores Predeterminados de la Web Moderna

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Hace más de una década, iniciar cualquier proyecto web requería una gran inversión para cubrir capacidades básicas como el soporte multilingüe o detalles creativos como las animaciones. Tu proyecto siempre resultará en hojas de estilo inmantenibles y código JavaScript complejo solo para llegar a la meta. Hoy en día, la web se ha convertido en un lienzo más maduro. Con proyectos reales como ejemplos, permíteme mostrar cómo la plataforma ha movido la línea de inicio para que nosotros, los desarrolladores, construyamos sitios web innovadores y accesibles.

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Jeremias Menichelli
Jeremias Menichelli
10 min
12 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El orador reflexiona sobre experiencias pasadas desarrollando varios sitios web, destacando los desafíos enfrentados para lograr sitios visualmente únicos con funcionalidades similares. Discuten los hacks utilizados en el desarrollo web, la evolución de CSS y las APIs web, y expresan un deseo por valores predeterminados modernos en la web. Se describen desafíos con la altura del viewport móvil en dispositivos táctiles, junto con la evolución de hacks hacia soluciones CSS más simples. También se discute la evolución del comportamiento de desplazamiento, los desafíos de ajuste de desplazamiento y las técnicas de intercepción de desplazamiento. El texto cubre desafíos de animación, la transición a animaciones basadas en promesas y el uso de frameworks para animaciones y transiciones de vista en el desarrollo web.

1. Retrospective on Web Development Challenges

Short description:

El orador reflexiona sobre experiencias pasadas desarrollando varios sitios web, incluyendo proyectos bien conocidos como la página de aterrizaje del lanzamiento de Microsoft Windows 8. Discuten los desafíos de crear sitios visualmente únicos con funcionalidades similares y el uso de hacks para lograr los resultados deseados. El orador destaca la evolución de CSS y las APIs web a lo largo de los años y expresa un deseo por los valores predeterminados modernos de la web para mejorar el desarrollo de sitios.

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.

2. Mobile Viewport Height Challenges

Short description:

El orador discute los desafíos enfrentados para lograr paneles de altura completa en dispositivos móviles debido a que los elementos de la interfaz de usuario del navegador afectan la altura del viewport. Se describe un hack que implica recalcular las alturas de los paneles al iniciar el toque. Se destaca una solución de CSS de una línea usando altura de viewport dinámica.

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.

3. Viewport Height Hack Evolution

Short description:

El orador describe la creación de un hack para recalcular las alturas de los paneles al iniciar el toque, pero expresa insatisfacción con el proceso. La solución evoluciona hacia un código CSS de una línea usando unidades de altura de viewport dinámicas. El texto también menciona los desafíos de animación de desplazamiento enfrentados en el pasado y la simplicidad de la solución actual usando una API antigua.

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.

4. Scroll Behavior Evolution

Short description:

El orador discute la evolución del comportamiento de desplazamiento usando CSS, destacando los desafíos de scroll snapping enfrentados en proyectos y la transición a una solución de dos líneas con la API CSS Scroll Snap. El texto también cubre técnicas de interceptación de desplazamiento empleadas en ausencia de opciones nativas hace una década, enfatizando los problemas de rendimiento y los procesos de limpieza involucrados.

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í.

5. Animation Challenges and Framework Usage

Short description:

El texto discute los desafíos con paneles fuera de pantalla ejecutando WebGL o videos, la simplicidad de la intersección de la API del servidor para ejecutar animaciones de manera eficiente, y la transición a animaciones basadas en promesas usando la API de animación web. También cubre el desarrollo de una función de animación para elementos HTML, proporcionando una solución de una línea para animaciones concurrentes y el uso de frameworks para transiciones de vista.

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.

6. Web Page Animation Framework Integration

Short description:

El texto discute el uso de un framework para transiciones y animaciones, la disponibilidad de una API de transición de vista, páginas web completamente animadas con desplazamiento controlado, y la simplicidad de implementar el código para esta funcionalidad.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construir un Sistema de Diseño con React y Tailwind CSS
React Summit 2022React Summit 2022
27 min
Construir un Sistema de Diseño con React y Tailwind CSS
Top Content
This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.
Cómo lograr la composición de diseño en React
React Summit 2022React Summit 2022
8 min
Cómo lograr la composición de diseño en React
This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
React Advanced 2023React Advanced 2023
19 min
Estilo Seguro para Paquetes de Componentes React: Vanilla Extract CSS
Today's Talk introduces Vanilla Extract CSS, a type-safe styling method for React applications. It combines the benefits of scoped styling, zero runtime overhead, and a great developer experience. Vanilla Extract generates a static CSS file at build time, resulting in better performance. It is framework agnostic and offers a powerful toolkit, including Sprinkles for utility classes and CSS utils for calculations. With type safety and the ability to define themes and variants, Vanilla Extract makes it easy to create efficient, scalable, and maintainable design system component packages.
Pasando de Css-In-Js en tiempo de ejecución a gran escala
React Summit 2023React Summit 2023
29 min
Pasando de Css-In-Js en tiempo de ejecución a gran escala
This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.
Construyendo Componentes de IU Perfectos con Variables CSS
React Summit 2023React Summit 2023
9 min
Construyendo Componentes de IU Perfectos con Variables CSS
CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.