Menos desorden, más poder: Aprovecha el poder de la plataforma web

Y debido a que son tan subestimados, pensé que sería divertido hacer un pequeño tráiler para la plataforma web y CSS. Así que disfruten de mi pequeño tráiler. ¿Puedo tener un poco de audio? Soy un maestro del universo. Soy Adam. Desarrollador. Y defensor de los secretos de mi base de código. Esta es mi aplicación. Mi valiente amigo. Se me revelaron fabulosos poderes secretos el día que sostuve en alto mi mágico CSS. Por el poder de la plataforma. He llegado. Mi aplicación se convirtió en una poderosa batalla. Mi aplicación. Y me convertí en He-Man. El desarrollador más poderoso del universo. Así que mi carrera como narrador de voz está en progreso. Pero esto también puede ser ustedes si dominan los poderes de CSS y HTML. Y específicamente, CSS está volviéndose mucho más poderoso y declarativo. Así que creo que la mejor manera de mejorar su conjunto de habilidades como desarrollador es aprovechar las capacidades modernas de UI. Y creo que esto es muy cierto, pero espero que al final de esta charla, también sean verdaderos creyentes.

Entonces, hoy, voy a cubrir tres características que creo que son ejemplos impresionantes de cómo puedes facilitar tu vida y reducir la complejidad en tus bases de código aprovechando la UI moderna. Y la primera son las animations impulsadas por desplazamiento. También hablaré sobre la API de popover, el posicionamiento de anclajes y haré una comprobación de tiempo. Si tenemos tiempo, hablaré sobre la selección. Si no, búscame después. Pero hay muchas cosas geniales en la plataforma. Así que comencemos con las interacciones. Las animations impulsadas por desplazamiento son una característica nueva y genial que ha llegado a Chromium y actualmente está disponible detrás de una bandera en Firefox. Es un poco más una característica experimental en este momento, pero creo que es una gran mejora progresiva. Entonces, como ejemplo, aquí hay una pequeña demostración que creé que utiliza las animations impulsadas por desplazamiento para crear esta especie de pantalla redonda con una pequeña animation al hacer clic mientras te desplazas. También puedes hacer cosas como esta, donde al desplazarte este texto simplemente aparece en esta pequeña cita en bloque. Puedes hacer que las imágenes aparezcan usando una máscara de recorte. Puedes hacer que las cosas se desvanezcan desde un tono de gris a color. Y hay muchas cosas que puedes hacer con solo unas pocas líneas de code utilizando las animations impulsadas por desplazamiento. Así que toma el ejemplo de esta cita en bloque aquí. Lo que estoy haciendo es, en lugar de tener una dependencia adicional, escribir JavaScript para hacer esto, estoy escribiendo un keyframe de CSS. Es un keyframe llamado fly-in donde simplemente actualizo la opacidad y la traducción desde 100 píxeles negativos hacia la izquierda, de vuelta al centro aquí. Eso es todo lo que hace esto. Escribiríamos esto como una animation de CSS donde dices animation, fly-in, lo llamas, estableces el tiempo, y es una duración lineal, y luego las diferencias comienzan aquí donde establezco la línea de tiempo de la animation en la vista, donde este elemento se cruza con el puerto de desplazamiento, por lo que en este caso, es el puerto de vista. Y también puedo establecer un rango de animation. Entonces quiero que esto comience en cero y luego vaya al 50%.

También tenemos estas fotos que aparecen, y actualmente utilizan scripting para hacerlo, y hay una serie de transformaciones que ocurren en la página web. Pero puedes recrear este efecto con esta técnica donde tengo estos keyframes que actualizan la opacidad y las transformaciones, y a medida que me desplazo hacia abajo, ves cómo todas estas aparecen de forma agradable, todas las pequeñas etiquetas aquí, justo hacia la parte inferior de la pantalla. Así que podemos hacer cosas como esta de forma muy fluida ahora aprovechando el poder de la plataforma web. Y hablo sobre la mejora progresiva porque en los navegadores no compatibles, solo obtendrás la experiencia existente donde las cosas aparecen al desplazarse sin la animation adicional. Pero con esto, podrías agregar un pequeño toque. Y también puedes envolver esto en una consulta de preferencia del usuario para prefers reduced motion, para que no estés agregando una gran cantidad de animation para las personas que no lo desean. Así se vería, donde tienes add supports, animation timelines, scroll, y luego podrías tener todo tu contenido.

Otro ejemplo de algunas cosas que puedes hacer es este efecto, ¿alguna vez has creado este botón de desplazamiento hacia arriba? Esto utiliza una técnica donde en realidad estoy estableciendo un nombre de línea de tiempo. Eso es otra cosa que puedes hacer. Entonces, en el HTML, scroll timeline name, a root scroller. Luego llamo a la línea de tiempo de animation aquí por el nombre de la animation, y la animo utilizando opacidad y display. Ahora puedes animar cosas desde display none a display block. Eso es bastante genial. Aquí no hay nada que exista. Una vez que la animation comienza, comenzará a aparecer aquí arriba. Ves cómo mi cursor cambia aquí, donde va de display none a display block. Así que eso aparece, y también actualiza la opacidad, y podemos hacer todas estas animations, hacer que realmente exista en la página y crear este tipo de botón de desplazamiento hacia arriba, sin necesidad de JavaScript, lo cual creo que es bastante genial. Me encanta hablar sobre el uso de menos JavaScript. Algunas otras cosas geniales que puedes hacer son la detección de desbordamiento y desplazamiento. Aquí es donde puedes usar animations impulsadas por desplazamiento como un truco, y he visto algunos ejemplos realmente geniales de esto. Mi colega Bramice tiene un artículo en el blog sobre esto.

Roma Komaro también realiza algunas demostraciones realmente geniales utilizando técnicas como esta, así que échales un vistazo. Básicamente, lo que estamos haciendo aquí es utilizar los keyframes para crear un valor booleano. Aquí estamos diciendo básicamente que quieres que el valor inicial de desplazamiento pueda ser cero, y luego, si hay un desplazamiento, si hay un desplazamiento, eso activará esta animación, actualizando el valor de desplazamiento a uno. El desplazador es en sí mismo. Estás configurando esta animación para detectar el desplazamiento y estás actualizando el valor booleano de cero a uno, que luego puedes usar en tu estilo.

Entonces ahora puedes hacer cosas como esta, donde tienes esta variable de desplazamiento, la has configurado toda y luego tienes esta línea de código que está estilizando la visibilidad de estas pequeñas flechas indicadoras. Así que aparecen o desaparecen dependiendo de si hay desplazamiento o no. Y lo realmente genial es que puedo mostrarte que todo esto es dinámico. Todo esto es simplemente dinámico en el navegador. Y a medida que me quedo sin espacio aquí y hay más espacio, esas flechas aparecerán. Así que todo esto se puede hacer sin JavaScript en absoluto utilizando esta técnica que llamamos alternancia de espacio en general en la comunidad. Estos valores booleanos ahora se pueden usar en CSS utilizando algunas de estas capacidades, sin necesidad de JavaScript. Súper, súper genial. Y hay algunos ejemplos más. Este es uno de apilamiento de tarjetas, por lo que puedes crear este efecto de narración desplazable donde estás en esta experiencia de usuario. Este es otro de Brahmis donde los encabezados se animan hacia arriba y todas estas pequeñas piezas como el icono y el texto se mueven hacia arriba, y todo eso puede suceder al desplazarse utilizando CSS. Hay muchos ejemplos y demostraciones realmente impresionantes. Si estás interesado, visita este sitio, scroll-driven-animations.style, que tiene un montón de ejemplos, herramientas y también hay un curso en video sobre cómo utilizar esta API, creo que es realmente genial para empezar a experimentar ahora. Es una forma de liberar realmente tu creatividad en la plataforma, pero también es una forma muy práctica de mejorar progresivamente tus experiencias de usuario. Otro beneficio de las animaciones impulsadas por desplazamiento es que hay un impulso en el rendimiento si estás animando valores que se pueden componer como opacidades y transformaciones.

En lugar de utilizar JavaScript para crear algún tipo de animación de desplazamiento, el uso de estas nuevas APIs, ya sea en CSS o JavaScript, es mucho más eficiente en términos de rendimiento. Lo hemos comprobado con nuestros socios, quienes han realizado importantes actualizaciones. Hemos logrado reducir hasta un 80% de nuestras líneas de código en comparación con el uso convencional de eventos de desplazamiento en JavaScript, y hemos observado que el uso promedio de la CPU se reduce del 50% al 2% durante el desplazamiento. Esta es una cita de Tokopedia de un ingeniero senior llamado Andy, lo cual es increíble, la cantidad de cambios que esto ha permitido al aprovechar el poder de CSS. Sí, bastante genial, bastante genial.

La siguiente sección de la que quiero hablar es la de componentes de interfaz de usuario. ¿Alguien aquí ha oído hablar de la API de popover? Levanten la mano. Vale, algunos de ustedes sí, lo cual es genial, porque ahora está disponible en todos los navegadores. Todos los motores de navegadores modernos han implementado la API de popover, por lo que prácticamente está disponible para que la utilicemos. Esta característica nos brinda muchas funciones impresionantes, como accesibilidad incorporada, y otras características útiles como promoción a la capa superior, funcionalidad de cierre ligero, gestión predeterminada del enfoque y accesibilidad mediante teclado.

Así que ahora tenemos popovers en la web. Estoy bromeando. Pero en serio, esto es lo que estamos tratando de crear. Los vemos en todas partes. Están en todas las interfaces de usuario. Llamo a esto una interfaz de usuario en capas porque es una capa encima del resto de tu página. Incluso estilizar los menús desplegables no debería ser tan difícil.

Pero los vemos en todas partes. Con el popover, esto es un atributo que puedes agregar a un elemento. Obtienes algo llamado promoción a la capa superior, que es una capa separada por encima del resto de tu página. Se encuentra junto a tu cuerpo, por lo que ya no tienes que preocuparte por el índice Z, lo cual es genial. Obtienes funcionalidad de cierre ligero si usas popover igual a auto, lo que te brinda la funcionalidad de cerrar al hacer clic en cualquier parte para cerrar el popover, y también devuelve el enfoque. Obtienes gestión predeterminada del enfoque. Por lo tanto, puedes tener tu popover como un componente separado en otra parte de tu interfaz de usuario, y cuando tabulas en él, el siguiente punto de tabulación estará en ese popover. Esto es muy útil para la accesibilidad en términos de gestión del enfoque mediante la tecla Tab, y a medida que construyes componentes, es posible que lo tengas como un elemento separado que estás utilizando para conectarte a un botón o algo similar. También tenemos accesibilidad mediante teclado incorporada. Por lo tanto, al presionar Escape o hacer doble clic, se cerrará el popover y se devolverá el enfoque. Y, por último, las vinculaciones predeterminadas de componentes que conectan un popover con su disparador de forma semántica.

Y sí, obtienes todo esto con solo un atributo HTML. Amo la web. ¡Así que ya no necesitamos portales de React! ¡Hurra! Entonces, el diálogo es otro elemento que es realmente útil aquí. También hablaré de eso en un minuto. Pero con el diálogo y el popover, prácticamente no necesitamos tener otro efecto especial que tenga la capacidad de propagarse a través de tus componentes a tu DOM. Como esto está integrado en el navegador.

Entonces, construir un popover es súper, súper fácil. Básicamente, necesitas un botón. Luego estableces un objetivo de popover para el elemento que estás usando para abrir el popover. Y tienes un popover con el atributo popover y un ID. Eso es todo, realmente. Solo tienes algo que estás usando para el popover. Le das un popover. Le das un ID. Y luego lo conectas con el objetivo de popover. Muy declarativo. Me encanta esa sintaxis. Y luego obtienes esto, la capacidad de hacer clic para cerrar. Puedes tabular. Puedo presionar la barra espaciadora. Puedo presionar la barra espaciadora nuevamente para cerrarlo. Y todo eso está integrado. No tienes que gestionar todos esos estados. Es mucho trabajo gestionar esto por ti mismo. También hay popovers manuales donde hacer clic fuera no lo cerrará. Hay un botón en el que hago clic aquí. Y eso obtiene una acción de objetivo de popover y un objetivo de popover. Por lo tanto, puedes hacer muchas cosas con popover. Es realmente flexible, esta API. Y es posible que ya estés utilizando popovers, porque uno de los sitios web de desarrollo más populares, GitHub, ya los está utilizando en producción.

Aquí tienes un ejemplo de ello, que está en el nuevo menú. También en la revisión de PR, una pequeña apertura, un pequeño diálogo, eso también es un popover. Y lo están utilizando con los polyfills. Así es como aprovechan esta característica, pero también apuntando a navegadores más antiguos, utilizando los polyfills de odd bird. Así que échale un vistazo si estás interesado en utilizar esta API hoy y hacer que funcione en tu matriz de soporte de navegadores.

Ahora tenemos popovers. Pero animar popovers es una característica separada. Y hay algunas capacidades que se han implementado para admitir esto. Con soporte de navegadores variado. Actualmente están disponibles en Chromium desde el verano pasado. Acaban de llegar a Safari, la mayoría de estas características, la semana pasada, en la última versión. Y aún no están disponibles en Firefox. Pero esto te permite hacer cosas como tener estos estados de animation dentro y fuera para popovers. Lo cual tampoco era posible antes, porque básicamente tienes que enseñarle al navegador cuáles son los estilos antes de que aparezcan en la página.

Se ve un poco complicado. Creo que la mejor manera de pensar en esto es, OK, necesitas este estado antes de abrir. Esto sucede cuando el popover está abierto. Estás aplicando estilos al popover abierto. Pero tienes que tener el estilo de inicio. Entonces tu estilo de inicio es, en este caso, que viene desde abajo hacia arriba. Así que se va a traducir 20 píxeles hacia arriba. Y la opacidad es cero. Luego tienes tu estado abierto, que es el estado de reposo o predeterminado. Y el estado de salida, que estará en este popover, que va hacia arriba, negativo 50 píxeles. Así que escribes todo esto. Y luego usas esta palabra clave allow discrete, que te permite animar la visualización. Eso también fue algo nuevo para esto, animar la visualización hacia y desde display none. Así que usas esta palabra clave para entrar en este nuevo modo de animation y crear esta capacidad. Ahora puedes hacer cosas como esta sin ningún JavaScript en absoluto, que es la navegación del menú que vemos muy a menudo, a la que también puedes acceder mediante pestañas, presionar escape para salir. Y todo esto se hace simplemente utilizando una traducción.

Estamos traduciendo esta capa por encima del resto de la página.

Este es un menú popover.

Puedes navegar por él con la tecla Tab.

Una cosa a tener en cuenta es que el popover no atrapará el enfoque.

Así que eso es algo importante a tener en cuenta.

Esto volverá al resto de la página y luego pasará al siguiente elemento.

Hay un par de cosas que son sutilezas para el popover.

El popover también funciona muy bien con el posicionamiento del ancla.

El posicionamiento del ancla es una API que te permite conectar dos elementos entre sí.

Y eso es una característica súper, súper poderosa.

Antes de entrar en el posicionamiento del ancla, sin embargo, diré que con el popover también es importante agregar semántica por ti mismo.

En este caso, asegúrate de agregar roles semánticos para que sea un menú.

Asegúrate de entender lo que está sucediendo en términos de cómo se conecta con tu usuario y cómo se gestiona el enfoque.

No es un atrapador de enfoque.

Si quieres atrapar el enfoque, es mejor usar un diálogo, que inmovilizará el resto de la página,

haciendo que los usuarios no puedan interactuar con el resto de la página y forzando la interacción con ese diálogo primero.

Con el popover, esto es genial para cosas como contenido no disruptivo, desplegables, consejos de herramientas, navegación de menús, cosas así, pero también está el elemento de diálogo,

que es genial para cualquier cosa en la que quieras atrapar ese enfoque.

Entonces, el posicionamiento del ancla es un poco más una API experimental,

pero recientemente se ha implementado en Chrome y estoy muy emocionado de ver confirmaciones de Safari y Firefox que suceden en el navegador.

Estoy observando ansiosamente esos registros de confirmación.

Esta es una característica tan útil y te permite básicamente unir estos elementos entre sí sin ningún scripting adicional.

Entonces, si usas popper.js u otras APIs, ya no necesitarás esa dependencia adicional para hacer este cálculo realmente complicado para crear estos efectos.

La forma de crear anclas es configurar un nombre de ancla.

Entonces, configuras un nombre de ancla en este botón,

y luego usas el posicionamiento del ancla para conectarlo a tu popover

u otro elemento al que quieras anclar.

No tiene que ser un popover.

Luego puedes posicionarlo con bottom y right.

Entonces aquí estamos configurando la parte inferior de ese elemento anclado en la parte superior del botón,

y luego la parte derecha está a la derecha del botón.

Así que podrías hacerlo así.

Y también puedes hacer mucho más con ello.

Una cosa genial es que puedes superponerlos.

¿Has construido menús?

¿Quién aquí ha construido un menú?

Levanta la mano.

Vale, eso es muchos de nosotros.

Lo siento. También tengo. Es muy fácil crear estos menús y la navegación de submenús también de esta manera utilizando el posicionamiento de anclaje. Y esta es una forma en la que realmente puedes mostrar el poder de esta característica porque, entonces, digamos que tengo un submenú. Lo tengo anclado a este menú. Ahora puedo usar algo llamado position try para reposicionarlo según el viewport y el espacio disponible. Así que si redimensiono esto, sin ningún JavaScript, en realidad tengo detección de viewport incorporada aquí donde básicamente he dicho que quiero posicionar inicialmente esto a la izquierda y en la parte superior de ese popover, y luego quiero usar opciones de position try. Si no hay suficiente espacio en esa dirección, entonces quiero cambiar esto para que esté en la parte inferior, así que básicamente estoy moviendo la parte superior hacia la parte inferior de ese popover. Puedo cambiar el margen.

Aquí estoy ajustando algunos de los márgenes. Y todo esto se puede hacer en CSS, sin necesidad de JavaScript, con las APIs de posicionamiento de anclaje. Muy genial de ver. Hay algunas otras características aquí donde puedes usar opciones de position try como mostré. Hay una característica llamada position try order donde puedes indicar al navegador cómo ordenar estas opciones, pero también hay algunas palabras clave que ni siquiera tienes que configurar tú mismo. Otra cosa interesante con los anclajes son los anclajes múltiples. Así que puedes anclar a múltiples elementos. En este caso, estoy usando la función de anclaje para anclar la parte superior izquierda a la parte inferior derecha del ancla de este elemento, elemento número uno, o ancla número uno, que está aquí, y luego la parte inferior derecha al segundo, así que el ancla número dos aquí en la parte inferior derecha. Así que todo esto es otra forma de usar anclajes. He visto a personas crear efectos SVG para crear pequeños diagramas, diálogos, y vistas de árbol utilizando elementos anclados. Así que aquí tienes un ejemplo de un ancla que no es un popover.

Pero con el popover, es genial porque estás en la capa superior, así que volver a él es un dolor. Y hay una nueva característica de diseño que llegó con el ancla 2, que se llama área de inserción. El área de inserción es súper, súper poderosa. Básicamente puedes usar el inglés para decir, quiero posicionar esto en la parte superior y luego extenderme hacia la izquierda. Así que creé esta herramienta llamada AnchorTool.com que te muestra cómo usar el área de inserción, y planeo ampliar esto. También puedes hacer esto con propiedades lógicas si quieres usar diferentes idiomas y mostrar cómo funciona en diferentes modos de lectura también. Así que todo eso se puede mostrar. Puedes simplemente copiar y pegar esto para el posicionamiento del área de inserción. Y también estoy mostrando aquí el bloque contenedor modificado por inserción. No voy a entrar en demasiados detalles aquí, pero básicamente, cuando trabajas con anclajes y el área de inserción, estás utilizando algo llamado el bloque contenedor modificado por inserción para posicionar estas cosas.

Puedes visualizarlo aquí con esta herramienta. Así que puedes ver cómo hay una diferencia aquí desde este bloque, inicio centro, o desde arriba centro hasta arriba, que también es arriba span all. Por lo que el posicionamiento es realmente, realmente, realmente sencillo. Y en este caso, en lugar de usar esos bottoms y los márgenes y los cálculos, simplemente puedes decir área de inserción, arriba span izquierda y hacer que todo esto funcione de manera clara. Mencioné esas palabras clave de autoflip. Las opciones de position try es algo que puedes escribir tú mismo, utilizando la regla position try at, o puedes usar los valores predeterminados de flip inline, flip block, flip block, flip inline. Para crear un popover completamente funcional y receptivo a la página, oh, creo que mi demostración se rompió aquí, esto es todo el code que necesitas. Simplemente lo posicionas en el ancla. Así que simplemente puedes posicionar el ancla arriba en la parte inferior. Y luego tienes opciones de position try, flip block. Y puedes justificarlo y hacer que toda esa lógica funcione y que el ancla funcione y se redimensione y se invierta. Y luego puedes combinar esto con otras características. Entonces, oh, ¿también rompí esta demostración? Ok, espera, creo que rompí algunas demos. Esto es divertido, programación en vivo. En este caso, estoy usando funciones trigonométricas, estoy usando transiciones, estoy usando todas estas características geniales que CSS nos proporciona para crear este tipo de menú que se abre en cascada. Y se ve así aquí, donde lo estoy anclando a estos elementos. Y básicamente, ahora puedo estilizar las cosas en un plano radial en lugar de un plano lineal en la web. Y esto era realmente difícil de hacer antes. Pero con funciones trigonométricas, con la capacidad de calcular cosas usando matemáticas de una manera que nunca tuvimos antes, como este menú de Pinterest que quería crear, y es totalmente posible con solo un par de líneas de code, pensando en cosas más allá de las matemáticas lineales.

Como esta es la forma en que veo el futuro de las interfaces de usuario, pensando de manera más orgánica, de una manera que emocione a los usuarios por primera vez en mucho tiempo. Estoy un poco cansado de ver el diseño plano, pero ahora tenemos las herramientas para hacerlo accesible, utilizable, interesante, para traer de vuelta algunos estilos orgánicos a la plataforma web. Entonces, ¿qué sigue para los popovers y diálogos? Uno es invokeTarget. Esta es una forma de crear invocadores declarativos. Como viste con el popover, simplemente puedes decir popover target equals y luego conectar esos dos valores. Aún no puedes hacer esto para otros elementos como diálogos, o cosas como entradas de color, pero esa es una característica que se está discutiendo y trabajando para brindar esa funcionalidad declarativa en toda la web. InterestTarget es otro. Si alguna vez has usado GitHub o Twitter, sabes que hay este efecto genial donde pasas el cursor sobre un ícono y te muestra una vista previa del perfil u otras cosas. Esto es algo que es realmente, realmente difícil de hacer de manera accesible, realmente difícil de implementar, por lo que queremos facilitar a los autores web mostrar interés al pasar el cursor o enfocar para abrir algo así.

Al igual que Wikipedia, lo hacen en los enlaces. Actualmente, tienes que usar un botón para un popover, pero con InterestTarget también podrías usar enlaces. Y hay más cosas de las que hemos estado hablando. Sabemos que esto resuelve muchos casos de uso, pero no todo, por lo que queremos facilitarte el estilo de esa pequeña flecha de conexión. Queremos que sea fácil deslizarse en la página, rompiendo el bloque de contenedor modificado. Aún queda mucho trabajo por hacer en el anclaje, pero estoy realmente emocionado con hacia dónde se dirige esto.

Definitivamente no tengo tiempo para hablar de select, pero ven y habla conmigo al respecto más tarde. Estilizar selects es una gran necesidad para la plataforma, así que me encantaría hablar contigo al respecto.

Pero otra cosa genial que quiero destacar es que toda esta presentación fue construida solo con CSS y HTML, sin JavaScript en todo este framework para todo el conjunto de diapositivas. Y esto es completamente posible. Estoy usando solo estilos editables de contenido aquí, por lo que puedo cambiar el fondo a rosa fuerte si quisiera en esta página.

Puedo pasar por aquí, y esto es literalmente solo un bloque de código editable de contenido. Puedo cambiar todo el código a una familia de fuentes, fantasía, y luego todo eso se actualiza automáticamente, y puedes verlo en toda la presentación. Puedes ver que el desplazamiento de deslizamiento aquí ahora está en fuente de fantasía. Mi fuente de programación favorita. Estoy usando el desplazamiento de deslizamiento y el comportamiento de desplazamiento para que este efecto se vea bien. Básicamente solo un desplazador muy largo, y hay muchas cosas geniales que estoy haciendo también.

Entonces, access key es solo un poco de HTML que puedo usar con control opción, ya sabes, uno, dos, para ir a diferentes partes de mi página. Todo esto está integrado en el navegador. Estas son cosas de las que creo que las personas simplemente no son conscientes, y son súper, súper útiles cuando estás construyendo interfaces de usuario para ser creativo. Y otra cosa genial es que CSS y HTML funcionan en todos los frameworks, por lo que no tienes que preocuparte por tomar decisiones que sean relevantes hoy en día versus mañana. Esto siempre será relevante, siempre será compatible hacia atrás, e incluso si tu empresa utiliza múltiples frameworks o estás pensando en evaluar uno o dos, siempre puedes utilizar estas características principales de la plataforma sin importar cómo estés construyendo. Sin ninguna dependencia, eso siempre es un punto a favor. Una dependencia menos, y realmente facilita la construcción en la web.

Así que digo aprovecha el poder del navegador. Eso te ayudará a reducir la complejidad y mejorar tu velocidad de desarrollo, mejorar tu creatividad. Y si quieres estar al tanto de todas estas cosas a medida que se implementan, echa un vistazo a estas dos publicaciones. Es donde nuestro equipo escribe sobre nuevas características de la plataforma, web.dev y developer.chrome.com. Muchas gracias por tu tiempo. Puedes encontrarme en internet aquí. Te lo agradezco. No puedo esperar para ver qué construyes. Gracias. Tengo una pregunta, porque realmente disfruto el hecho de que cuando usas CSS, cuando usas algunas de estas cosas que ya están en el navegador, puedes simplemente disminuir la cantidad de JavaScript que necesitas escribir, y realmente puedes hacer algunas cosas sin necesariamente afectar el rendimiento. Sí. Pero mi pregunta es, ¿cómo decides qué cosas deben ser manejadas por JavaScript, qué cosas deben ser manejadas por CSS? ¿Hay alguna forma de tomar esa decisión? Creo que es una pregunta muy buena.

Para mí, la pregunta que haré es, ¿esto es de presentación, o es algo relacionado con el contenido? Entonces, si estás realizando alguna acción destructiva, edición en la página, cualquier tipo de acción del usuario, eso parece que debería estar en el script, porque es lógica. Si es simplemente de presentación, como una forma de hacer que algo aparezca o se desplace o estilizar un color o un botón, eso debería estar en tus estilos. Separar la lógica del estilo creo que es un gran objetivo de toda esta iniciativa para impulsar la web hacia adelante.

No, seguro. Y esto es realmente genial, porque creo que practicas lo que predicas cuando se trata de tus diapositivas. Tus diapositivas realmente utilizan las herramientas de las que estás hablando. Muy, muy genial.

De acuerdo, han llegado preguntas. La pregunta más votada es, ¿cuáles son algunas de las características deseadas que te encantaría ver en la plataforma web? Esa es una buena pregunta. En primer lugar, me encantaría un mayor soporte de navegadores para el anclaje. Eso es muy importante. Acabamos de ver que Firefox ha implementado propiedades, por lo que ahora tenemos valores de propiedades personalizadas semánticas en todos los navegadores, lo cual es genial. Otra característica que me gustaría ver y de la que he estado hablando recientemente es el índice de hermanos, es decir, la capacidad de saber en qué posición estás dentro de una lista y poder aplicar estilos en función de eso. Se podrían hacer animaciones escalonadas, temas de colores escalonados, cosas así. Esa sería realmente genial. Pero hay muchas características de las que podría hablar durante días, pero realmente, el estilo de los controles de formulario es muy importante. Estilizar los desplegables. Necesitamos eso.

Bueno, quiero decir, esto se relaciona muy bien con la pregunta sobre las características. Porque trabajas en Google, así que tienes una visión interna, y como haces esto, esta fue la pregunta de Hazem, gracias. ¿Qué tan difícil o fácil es implementar nuevas características en la plataforma web en diferentes navegadores? Creo que hay dos partes. ¿Qué tan difícil es implementar las nuevas características en Chrome y luego lograr que otros navegadores también las adopten? Wow. Depende. Depende de la característica. Mucho. Realmente depende de qué tan compleja sea la característica. Por ejemplo, el anclaje es muy complejo porque tienes que pensar en cómo interactúa con los desplazadores. ¿Qué pasa con los subdesplazadores? Si tienes un subdesplazador dentro de la página, ¿cómo gestionas la vista de presentación? Con HTML, también tienes que pensar en el estilo del agente de usuario. ¿Cuál es el estilo predeterminado? ¿Lo especificas? ¿Diferentes agentes de usuario como Safari y Firefox tienen vistas de presentación diferentes? Así que hay mucha complejidad con algunas de estas características. Las consultas de contenedor son otra característica que tiene mucha complejidad para implementar. No puedes tener dependencias cíclicas. Eso es algo con lo que te encuentras a menudo. Pero realmente, depende de la característica. Algunas son más fáciles de implementar que otras. A veces, tenemos azúcar sintáctica. Por ejemplo, el selector HasSelector parece muy complejo. Es un selector muy poderoso, pero en esencia es azúcar sintáctica sobre is y where con el IsSelector. Así que algunas cosas son más difíciles que otras.

Claro. No hay una respuesta perfecta. Lo entiendo. Muy bien. Se nos acabó el tiempo, pero la gente realmente quiere poder copiar tus diapositivas. Me sorprende. ¿Dónde podemos encontrar un repositorio para ellas? En GitHub, tengo un repositorio de estas diapositivas. Increíble. Si la encuentras en el chat de preguntas y respuestas, puedes preguntarle.

Denle un gran aplauso, damas y caballeros. Gracias a todos. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias.