Instalar Nada: Interfaces de Aplicación con APIs Nativas del Navegador

♪♪♪ ¡Hola, cómo están todos? ¡Whoo! Genial. Estupendo. Hola. ¿Qué tal? Mi nombre es Scott Talinsky. Soy el coanfitrión del Podcast Syntax. Es un podcast que hago tres veces a la semana con Wes Boss. Hablamos sobre JavaScript. Es bastante genial. También soy productor ejecutivo en Sentry, donde puedo trabajar en Syntax a tiempo completo. De hecho, estamos haciendo muchas cosas en Syntax en este momento, más allá del podcast. Tenemos un canal de YouTube y muchas cosas en el sitio web, así que échale un vistazo en syntax.fm.

Entonces, ¿de qué voy a hablar hoy? Bueno, vamos a echar un vistazo a algunas demostraciones reales, y todas estas demostraciones se ejecutan completamente en HTML, CSS y JavaScript. No hay frameworks, nada, sin pasos de construcción. Vamos a ver nuevas API del navegador o API potencialmente subutilizadas, algunas de las cuales probablemente hayas visto antes, algunas de las cuales tal vez no, y tal vez no sabías que podías usar hoy. Entonces, nuevamente, todas estas demostraciones se pueden cargar directamente en Chrome, sin construcción, sin framework.

Además de eso, después de mostrarte una nueva API, le daré una puntuación de envío, y esa puntuación de envío puede ser que debes verificarla ahora, algo de lo que debes estar al tanto, debes probarlo ahora porque realmente está por llegar, o puedes enviarlo. Puedes enviarlo hoy. Tengo muchas demostraciones, y otro código QR para ti. Tengo tantas demostraciones para esta charla que no pude incluirlas todas en las diapositivas, y no solo eso, no quería pasar demasiado tiempo en el code en sí. Así que voy a pasar rápidamente por mucho del code, pero vamos a hablar mucho sobre las propias API. También lo tendré disponible al final de la charla, así que voy a avanzar. También puedes encontrarlo en mi sitio web, Tolin.ski.

¿Alguna vez has construido alguna de las siguientes interfaces de usuario? Un modal, un menú, una navegación móvil, un cajón, una presentación de diapositivas? Imagino que sí. Estos son los tipos de cosas que construimos todo el tiempo, ¿verdad? Normalmente, si estás construyendo una de estas cosas, probablemente recurrirías a tu JavaScript framework, ¿verdad? Personalmente, es muy fácil tener una variable de estado y simplemente alternar ese estado variable, agregar un poco de animation y, al siguiente momento, tienes un modal, ¿verdad?

Pero, ya sabes, otra cosa que podríamos hacer es ir a npm install y agregar quién sabe qué a nuestra aplicación. Podría ser cualquier cosa. La primera de la que voy a hablar son los modales, alertas y diálogos. La primera demostración que tenemos aquí es un modal básico. Esto utiliza el elemento de diálogo en HTML. Puedes ver que todavía se utiliza JavaScript. De hecho, la mayoría de estas demostraciones seguirán utilizando JavaScript. Solo vamos a utilizar menos JavaScript, y lo que estamos haciendo aquí realmente es algunos selectores de consulta y llamando a show modal. Al siguiente momento, tenemos un modal. Lo genial de esto es que aplica un efecto a tu página para que no tengas que hacer el truco de ocultar el desbordamiento para evitar el desplazamiento. También te proporciona accesos directos de teclado para cerrarlo, pero además de eso, captura tu enfoque para que puedas comenzar a escribir de inmediato. Todas estas cosas de accessibility que normalmente tendríamos que code nosotros mismos. Pero no solo eso, apenas tenemos que escribir JavaScript para que esto funcione. Puedes utilizar estas técnicas exactamente con React, Vue, Solid, cualquier cosa, puedes utilizar estas técnicas, ¿verdad? No está limitado a JS puro. El elemento de diálogo. ¿Podrías enviar el elemento de diálogo hoy y lo estás enviando hoy? Sí. Esta función está disponible en el 96 por ciento de los navegadores.

No te lo dije, pero cada vez que lo enviamos, voy a mostrar un gif de breakdance. Este chico es el representante olímpico de los Países Bajos en los Juegos Olímpicos de París 2024. Este es tu representante olímpico. Es realmente bueno. Muy bien. Es posible que hayas visto el 96 por ciento y pensado, bueno, 96 por ciento, no es 100, pero muchas de estas cosas nunca llegarán al 100, y si ves algo con un 96, 95, en cualquier lugar de ahí, siempre y cuando sea compatible con los tres grandes, puedes imaginar que es probablemente posible enviarlo. Muchas de estas cosas tienen polyfills si necesitas soporte para versiones anteriores. Imagino que muchos de ustedes están enviando Grid hoy. Grid solo tiene un 97.25 si no tiene prefijos. Con prefijos, incluso 97.7. Llegar a ese rango del 97, 96 por ciento es bastante bueno. Entonces, si quisiéramos animar esto, podríamos utilizar la API de animaciones web, o WAPI, y si lo abrimos, podemos ver un bonito diálogo animado.

La API de animaciones web es bastante simple. Solo estamos alternando un par de valores aquí. Dejaré de moverme. Lo siento. Simplemente alternas un par de valores. Luego llamas a este método .animate. Al siguiente momento, tienes una animation. De hecho, esta demostración no tiene CSS. Bueno, tiene un poco de CSS muy básico para aplicar y hacer que se vea bonito, pero la animation, el posicionamiento, todas las cosas importantes funcionarán sin CSS aquí, y obtienes todo eso a través de la API de animaciones web.

Esto es algo de lo que estoy seguro de que muchos de ustedes son conscientes, pero si no lo están, la API de animaciones web es extremadamente compatible y ha estado disponible por un tiempo. Este chico se llama Menno. Él es el otro representante olímpico de los Países Bajos en 2024. Pero puedes ver que esto se remonta. 84, Safari 13.1. Entonces, la API de animaciones web puede ahorrarte tener que importar una biblioteca de animaciones completa. Ahora, me gustan las bibliotecas de animaciones. Yo mismo las uso mucho. Pueden hacer las cosas realmente fáciles. Transformaciones mágicas y cosas así. Pero a veces simplemente no necesitas una, ¿verdad?

E incluso menos necesidad tienes con la API de transiciones de vista. Sé que Fred habló de esto un poco antes, pero puedes ver que el JavaScript en este es aún un poco menos. Principalmente estamos manejando los eventos de cierre y apertura, y básicamente estamos llamando a document.startTransition. Lo envolvemos y simplemente llamamos a dialogue.showModal. Míralo. Eso es todo. Un bonito desvanecimiento. No estoy seguro si la FPS lo está captando, pero es un bonito desvanecimiento que obtienes. Ese es el estilo predeterminado. No apliqué ningún CSS a esta transición. Por defecto, envuelves algo en una transición de vista inicial.

Obtienes un desvanecimiento. Es bastante impresionante. Entonces, la API de transiciones de vista. ¿Puedes lanzar esto hoy? Es un 72 por ciento, pero voy a decir que lo lances, porque esta API es realmente fácil de solucionar si no estás animando.

Por ejemplo, si quieres hacer estas animaciones, puedes hacerlas, y muchas de estas cosas seguirán funcionando. De hecho, muchas de las transiciones automáticas que obtienes de la API de transiciones de vista simplemente no se animan. Y si no se admite, no se anima en el navegador, no funciona bien, está bien. Anunciaron esta semana o la semana pasada que estará disponible oficialmente en Safari 18. Eso es genial. Lo tendremos ahí. Genial.

También puedes hacer esto con CSS. De hecho, esto es todo el JavaScript que necesitamos, y mira esto. Aún obtenemos la misma tecla de escape, todo funciona, aún captura nuestro teclado, y esta vez ni siquiera tenemos que programar la animación en desvanecer al presionar la tecla de escape. Con las otras opciones, tendrías que hacer eso. Esto se hace con un par de API realmente interesantes que verás varias veces en esta charla hoy. Esto se hace con una, allow discrete. Allow discrete para mí es una de las cosas más geniales que llegan a CSS. Te permite hacer la transición a display none, lo cual, quiero decir, eso es algo que solíamos hacer con jQuery, deslizar hacia adentro y hacia afuera. Ahora puedes hacerlo con CSS.

Del mismo modo, aquí hay otra nueva API, starting style. Starting style también me parece una de las más interesantes. Esta API básicamente dice cuál es el estilo de algo antes de que entre en el DOM. En el mundo de React, podrías haber tenido una biblioteca de transiciones de React que aplica una clase a algo y rápidamente aplica otra clase y hace la transición de esa manera, lo mismo cuando se está animando hacia afuera. Básicamente, esto es eso pero en CSS. No tienes que escribir ningún JavaScript para hacer esto. Y no estoy en contra de escribir JavaScript, por cierto. Escribo mucho JavaScript. Creo que si puedes dejar que el navegador lo haga, como dijo Bruce, deja que el navegador lo haga. Entonces, starting style, una de las API nuevas más emocionantes.

¿Puedes usar esto hoy? Lamentablemente, no. Pero deberías probarlo. Ha estado en Safari desde la versión 17. Notarás que Firefox se quedará rezagado en todo esto. Pero deberías probarlo porque creo que esta API es realmente genial. En el caso de fallback, es agradable y fácil si no te importa que no se anime. Eso es Vin Diesel, por cierto. ¡Sí, en serio! De acuerdo. Siguiente, allow discrete. ¿Allow discrete? Ni cerca. Así que esto es algo que vamos a querer revisar. Es muy emocionante, pero por ahora solo vamos a tener que revisar esto. Tenlo en cuenta. Viene en camino. Muy bien.

Esta sección es realmente súper interesante para mí, menús y popovers. Un popover básico se ve así. Aquí no hay JavaScript en absoluto. El CSS solo se utiliza para que se vea bonito. Nada está haciendo nada. Mira esto. Aparece. Y no solo eso, captura tu teclado. Puedes hacerlo accesible de inmediato. Presionas la tecla de escape, se cierra. Esto funciona. Sin JavaScript, tienes un popover. Lo interesante de esto es que se coloca en algo llamado la capa superior. La capa superior se sitúa encima de todo lo demás, tiene su propio contexto y, por lo tanto, nunca tienes que preocuparte por el z-index.

No se aplica ningún z-index a este elemento. Ninguno en absoluto. Y siempre estará encima de todo debido a la capa superior.

Además, puedes obtener algunas acciones controladas reales con esto. Entonces, con esto, puedes decir mostrar acción objetivo popover, ocultar acción objetivo popover y obtener un poco más de control sobre él que simplemente tener el cambio predeterminado, ¿verdad? Y todo eso funciona.

Entonces, ¿puedes usar el popover hoy para alternar un popover sin JavaScript? Sí. Puedes usar esto hoy. Uso global del 96 por ciento. Está en todos los navegadores. Este chico se llama Pocket. Es de Corea del Sur. Es realmente bueno. Míralo ir. Vaya. De acuerdo. Entonces, si quieres animar estas cosas, aquí es donde se vuelve un poco más difícil. Además de eso, hay un defecto fatal con la capa superior del que no hemos hablado necesariamente. La cosa con la capa superior es que cuando agregas algo a la capa superior y quieres posicionarlo de manera relativa, no puedes hacerlo porque está en su propio contexto.

Entonces, si quisieras que se colocara debajo de otro elemento, digamos que estás construyendo un menú literal como lo estamos haciendo aquí, generalmente quieres que se coloque debajo de ese botón. Y no necesariamente podemos hacer eso. Entonces, la forma de abordarlo ahora es con JavaScript. Entonces, hago clic en esto. Puedes ver que está aquí. Si hago scroll, se queda aquí.

Funciona muy bien. Obtengo todos los atajos de accesibilidad de teclado que quiero para esto. Lo único interesante que estoy haciendo aquí es llamar a una función de actualización de posición con un rectángulo de límites de cliente. Lo ejecuto al cambiar el tamaño y volver a desplazarme. Y luego hago una animación básica con la API de animaciones web. Eso nos lleva bastante bien.

Es bastante JavaScript en comparación con lo que podrías escribir en tu framework de JavaScript. No está mal, sin embargo. De hecho, escribí una acción de Svelte para esto exactamente para anclarlo, y puedo colocarlo todo bonito y ordenado debajo de esa acción. ¿Podríamos hacer todo esto solo con CSS? Mira esto. Haz clic en eso. Obtenemos la animación. Obtenemos todo lo que queremos aquí. Sin JavaScript en absoluto. Eso es un menú. ¿Cuántas veces has construido un menú así sin JavaScript? Yo no lo he hecho. Así que puedes hacer eso con otra nueva API llamada Anchor, y Anchor, primero estableces un nombre de ancla, le das un nombre, luego le dices a la cosa que quieres anclar cómo usarlo.

Entonces dices que te gustaría que la parte superior se ancle a la parte inferior, te gustaría que la izquierda se ancle a la izquierda. Lo fija bonito y ordenado. Es una API realmente genial. Además, también estamos utilizando starting style y allow discrete. Estas son dos API clave que pronto estarán disponibles en el navegador. Entonces, ¿puedes usar Anchor hoy? No, no puedes. Pero esta está en amplia discusión en este momento. De hecho, la razón por la que no está en todos los navegadores es porque creo que hay un poco de desacuerdo sobre cuánto debería cubrir la API, pero está implementada en Chrome si quieres al menos probarla y acostumbrarte a ella y tener JavaScript como respaldo por ahora. La próxima vez, cuando esté disponible, podrás usar esta cosa.

Entonces, vamos a ver algunas cosas interesantes aquí con la navegación móvil en cajones. Esta es una versión con la API de animations web. Esta es una navegación deslizante. Esto se logra a través de la API de popover. De hecho, si no tuviéramos ninguna animations en esto, simplemente funcionaría si quisieras que esto aparezca. Pero como quería las animations, agregué la API de animations web y creé una bonita navegación móvil deslizante, pero una vez más, obtienes el teclado, obtienes el enfoque, obtienes la tecla de escape, todo eso, y de la misma manera, puedes hacer esto con las transiciones de vista con la misma API.

Mira eso. Obtienes la misma animation exacta con las transiciones de vista. La única diferencia aquí es que le damos un nombre de transición de vista. Luego hacemos la transición en CSS. Y en realidad, gran parte de esto es transferir cosas que hacemos en JavaScript a CSS que no tenemos que transferir. Y lo interesante de esto es que tenemos esta diapositiva de fotogramas clave, y todo lo que tenemos que decir para que esta animation funcione es desde translate 100VI. La unidad VI aquí es en línea con el viewport. Si alguna vez has visto VW para el ancho del viewport, esa es básicamente la misma unidad si estás pensando en una propiedad lógica. 100VI de arriba a abajo y de izquierda a derecha es lo mismo que 100 VW. Porque solo tenemos que decir desde, simplemente invierte esta animation cuando se va. La API de transiciones de vista es realmente versátil. Puedes escribir algunas animations y transiciones de CSS realmente intensas con esto, y puedes hacer todo esto solo con CSS utilizando esas APIs de las que hablamos antes. Estas cosas van a hacer una cantidad infinita de estas interfaces de usuario que construyas todo el tiempo. No tienes que tener un solo interruptor de JavaScript para volver a alternar una navegación móvil después de que obtengamos estas APIs.

Y de la misma manera, un cajón se puede hacer con el componente de diálogo, también se puede hacer con popover, pero un cajón, esto es como el de GitHub. Puedes ver cuánto se logra con esto utilizando solo CSS y un poco de JavaScript.

Acordeones. Los acordeones no son tan emocionantes. Voy a ser honesto. Aquí tienes un acordeón básico. Esto se puede hacer así. Detalles y resumen. Esto funciona envolviendo una etiqueta de resumen en detalles, y automáticamente obtienes este acordeón funcionando. ¿Puedes usar detalles y resumen hoy? ¡Claro que sí! Estamos entrando en territorio de un solo dígito aquí, Safari lo ha soportado desde la versión 6. Esto es extremadamente compatible. Mucha gente puede usar esto.

Casi lo eliminé de esta charla porque pensé que era aburrido, pero en mi vuelo aquí, abrí el sitio web de Delta, y son un montón de divs. Divs y botones. ¿Por qué no usan detalles y resumen? Sentí que la gente todavía necesita escuchar esto. También puedes animarlo con WAPI. No sé si alguien realmente lo llama WAPI, pero eso es lo que estoy llamándolo ahora. Obtienes esta bonita animation deslizante. Esta es probablemente la forma más fácil de animarlo hoy sin un framework o una biblioteca adicional. Si estuviera animando esto, probablemente usaría una biblioteca.

Esto está utilizando la API de animations web. La razón por la que este JavaScript es tan necesario aquí es porque queríamos que fuera cancelable. Aparte de eso, no hay mucho más. El HTML, como puedes ver, apenas ha cambiado, solo los detalles y el resumen. Las transiciones de vista no son adecuadas para esto porque no podrás obtener esa sensación de deslizamiento agradable hasta que obtengamos las propiedades de estilo de inicio y permitidas en la pantalla. Así que solo CSS, ahora esto debería funcionar. Está utilizando permitidas en la pantalla y estilo de inicio. No hay razón por la que esto no debería funcionar. Funciona una de cada diez veces.

Es posible que no lo hayas visto debido a los FPS, pero funcionó. Cada vez posterior, a veces funciona. No sé, esto me parece un error porque el código está ahí. Pero, nuevamente, si estás animando este tipo de cosas, aquí es donde recurres a una biblioteca de JavaScript.

Swipers y presentaciones de diapositivas. Estas son cosas que construimos todo el tiempo. De hecho, Instagram es prácticamente todo Instagram son solo pequeños swipers, o si quisieras comprar una pelota de baloncesto de syntax, podrías deslizar, ¿verdad? Estas cosas funcionan muy bien, pero a menudo recurrimos a JavaScript para ellas.

De hecho, déjame hacer clic, ahí vamos. Y ahora obtenemos un swiper que funciona y funciona muy bien. De hecho, este se siente muy bien en tu teléfono también. Esto se hace sin JavaScript en absoluto para construir este swiper. Y verás que funciona de la misma manera a la que estamos acostumbrados. Esto se hace con la API de scroll snap. Entonces, básicamente, el CSS importante aquí es scroll snap type X mandatory aquí, y scroll snap align start donde estamos ajustando al inicio de cada diapositiva. ¿Podemos usar scroll snap hoy para no tener que construir swipers con JavaScript? Sí, absolutamente podemos usar esto hoy. Ha estado aquí por bastante tiempo si no estás usando esto. Scroll snap puede salvarte de muchas situaciones donde no querrías escribir JavaScript en absoluto, y también facilita trabajar con JavaScript de ciertas maneras, ¿verdad? Tenemos indicadores como algo común que tienes con estos swipers. Solo agregas un poquito de JavaScript aquí, y de repente tienes estos indicadores funcionando, pero sigue funcionando igual. Sigo obteniendo ese desplazamiento suave agradable y todo como esperarías. La única diferencia es que estoy ejecutando una función de actualización cada vez que quiero actualizar esto. Del mismo modo, puedes construir la presentación de diapositivas clásica con esto. La función es exactamente la misma. No solo obtenemos los botones e indicadores, sino que también podemos obtener el deslizamiento fácil y simplemente funciona. De esta manera, nuevamente, se siente bien para tus usuarios móviles, y funciona muy bien con el navegador, y la cantidad de JavaScript que tenemos que escribir para esto es extremadamente mínima. Básicamente, solo estoy llamando a slider.scroll y usando el comportamiento smooth para hacer que esto funcione, simplemente actualizando la posición en él.

Puedes revisar todo el código para estas demos. Esto funciona extremadamente, extremadamente bien. Genial. Entonces, nuevamente, tenía muchas más de estas demos, pero iba a excederme por una cantidad tremenda de tiempo. Así que si quieres ver todas estas demos, tengo cada una de ellas, de hecho, la mayoría de ellas, en las que se ejecutan a través de diferentes grados de cuánto o cuánto poco CSS y JavaScript tienes que escribir para cada una, pero hay muchas demos aquí arriba, nuevamente, si quieres asegurarte de poder verlas todas.

Cada una de estas demos se puede cargar en un navegador, Chrome, solo con HTML, CSS, y JavaScript, y funcionará.

Así que muchas gracias, eso es todo lo que tengo hoy. APLAUSOS.

Scott, cosas como el diálogo no funcionaron bien para mí en dispositivos móviles en absoluto. Safari y Chrome son navegadores móviles, el 3 por ciento. ¿El que hace la pregunta está en la sala? Porque me interesa saber si se refieren a Safari y Chrome en iOS.

Sí, ¿sabes qué? Hemos implementado el diálogo en navegadores móviles. Lo probamos bastante y no tuvimos demasiados problemas. Pero nuevamente, siempre que necesites un soporte adicional o un soporte diferente, puedes recurrir a JavaScript y manejar estas cosas si es necesario. Pero en su mayor parte, ya sabes, siempre y cuando los navegadores que utiliza tu audiencia puedan usar estas características, están listos para continuar.

Sí, no he tenido ningún problema al implementar el diálogo en dispositivos móviles, tengo que decirlo. Lo hiciste. Sí, lo hiciste, sí. Lo implementamos en syntax en marzo y no hemos tenido ninguna queja.

Otra pregunta que no puedo encontrar en la lista, pero la responderé de memoria, es si puedo asegurarme de que las ventanas emergentes de aviso aparezcan sobre un diálogo. Oh, sí. Bueno, en realidad es una gran pregunta, porque tienes la capa superior, pero una vez que algo está en esa capa superior, según mi entendimiento, porque no trabajo demasiado con capas superpuestas, normalmente son cosas temporales, ¿verdad? Mi entendimiento es que eso sería su propio contexto. En realidad no sé exactamente cómo superponerlas en la capa superior, sí.

Estaba pensando en esto, divagando, pero estaba pensando en esto, pero un diálogo no tiene que ocultar el resto de la página. Puedes estilizar el fondo si quieres, pero un aviso solo debería ser una notificación de todos modos. No debería ser algo con lo que interactúes, creo. No sé si siempre querría que un aviso aparezca sobre, supongo que un diálogo. Básicamente, el diálogo debería ser lo único con lo que puedes interactuar en una página, porque si son modales, son importantes, creo.

Sí. Hay cierta discussion sobre eso, sobre si deberían considerar eliminar solo el método show, o simplemente mantenerlo como show modal, sí, para hacerlo modalmente.

Una pregunta sobre popover. Scott, ¿puedes invocar un popover desde dentro de un iframe y hacer que aparezca en la capa superior fuera del marco? No tengo idea. No tengo idea sobre eso. Una vez que entramos en iframes, toda mi charla fue sobre iframes. No sé si te diste cuenta. Hubo un montón de iframes, y no me encanta trabajar en iframes, así que no sé sobre eso.

Pero en general, encontré que el menú emergente, si se utiliza de la manera correcta, es una experiencia realmente fluida en general.

Sí, puedo dar fe de eso. Hace dos semanas, antes de unirme a Vivaldi, implementé para un cliente un menú basado en menú emergente que fue utilizado por cientos de miles de usuarios.

Sí. También funciona perfectamente en dispositivos móviles. Puedes usarlo ahora cuando debas hacerlo. Sí, y también hay un polyfill disponible que funciona muy bien si necesitas soporte adicional.

Alguien preguntó, ¿qué tan accesible es el deslizador de desplazamiento que demostraste? Bueno, algunos de estos elementos son tan accesibles como los hagas. Con ese, si deseas soporte de teclado, tendrás que agregarlo.

El deslizamiento ocurre, se siente bien de esa manera, pero digamos que si deseas usar la tecla Tabulador o alguna otra tecla, entonces tendrías que recurrir a JavaScript, de la misma manera que lo estábamos haciendo. Es tu elección. Con los botones, sí. Sí. Sí. Sí, eso funcionaría muy bien, creo, siempre y cuando lo hagas con JavaScript en ese sentido.

Quieres probar estas cosas, asegurarte de saber exactamente lo que estás implementando.

Wow, otra pregunta a la que nunca había pensado. Me pregunto cuál es la respuesta. Scott, ¿la API de animaciones web respetará el deseo del usuario de reducir el movimiento? Creo que tendrías que verificarlo primero. Según mi entendimiento, tendrías que verificarlo primero.

Vaya, eso es interesante. Por lo general, incluso con CSS, tienes que verificarlo tú mismo. Creo que es solo una forma de asegurarte de que puedas hacerlo. Pero sí, eso es interesante.

¡Muchas preguntas sobre accesibilidad, ¿eh? Muchas preguntas sobre accesibilidad son buenas. Creo que usarías match media en tu JavaScript antes de llamar a la API para verificar la propiedad de reducción de movimiento. Sin embargo, creo que tendrías que verificarlo manualmente. Eso es lo que entiendo.

¿Tienes alguna información sobre por qué Firefox no tiene muchas de estas APIs? No tengo ninguna información al respecto. Pero parece que es así.

No es que Firefox no esté obteniendo nuevas APIs. Simplemente sucede que no están obteniendo las que yo específicamente quiero. Creo que eso es todo. Sí, quiero decir, Firefox está agregando muchas APIs. Tienen un calendario de lanzamiento diferente. Tienen diferentes prioridades, supongo.

Alguien más dijo, espero que esta charla esté disponible más tarde. Gran demostración. ¿Quieres recordarnos tu sitio web donde la gente puede obtenerlo? Sí. Mi sitio web es T-O-L-I-N.S-K-I. Entonces, mi apellido, Talinsky, es solo .ski. Talin.ski. El sitio web está incompleto. Lo construí esta semana mientras hacía la charla. Así que disfrútalo.

Scott, otra pregunta que requiere tus poderes adivinatorios en el mundo de los navegadores. ¿Cuál es tu opinión sobre Chrome saltándose las especificaciones web adecuadas para construir esto? No estoy seguro a qué se refiere con `esto`, pero... Sí, es una buena pregunta. Hay dos lados en eso. Realmente, Chrome está impulsando las cosas, pero al mismo tiempo, como con la API de anclaje, ciertamente no hubo un consenso sobre cómo debería funcionar y qué debería incluir. Entonces, si no lo estuvieran impulsando, no lo tendríamos donde está hoy, pero al mismo tiempo, lo lanzaron bastante temprano cuando algunas personas podrían decir que no estaba completo. No sé. Creo que estas cosas son necesarias para avanzar, pero no trabajo en los estándares del navegador, así que mi participación en esas conversaciones es inexistente. Personalmente, siento que sin que Chrome lo impulse un poco, quién sabe si la gente realmente agregaría las cosas que el navegador necesita, ¿verdad? También sé que el grupo de trabajo de CSS se está reuniendo esta semana en España, y el martes fue dedicado a discutir durante todo el día sobre la API de anclaje, y creo que ayer se trató de asegurarse de que las cosas que se movieron cambiaron en Flexbox y Grid, para que puedas cambiar el orden de las pestañas y seguirlo. Sí, creo que la gente está probando estas cosas, pero se está haciendo correctamente en todos los grupos, ¿no crees?

Sí. Sí, definitivamente se está haciendo correctamente, pero es curioso lo temprano que se agregó a Chrome en relación con el estado de la propia API. Claro, estoy emocionado de que lo esté, porque es bueno poder probarlo, ya sabes, y ese es mi papel aquí, demostrar cosas y emocionar a todos al respecto, pero también dar a conocer el potencial, ¿verdad? ¿Qué pueden hacer estas cosas? Y nuevamente, supongo que estarás de acuerdo en que cuanto más las personas en esta audiencia prueben estas cosas y brinden comentarios a los grupos de trabajo, mejor podrán solucionar cualquier problema o resolver tus casos de uso.

Imagina que ahora eres el rey de los navegadores, por así decirlo, eres el señor del mundo de los estándares web. ¿Qué patrones de IU te gustaría ver como primitivas de navegador a continuación? Sí, gran parte de mi trabajo se ha centrado en las animaciones en general. Comencé en la animación de gráficos en movimiento, así que para mí, cualquier cosa que involucre transiciones más suaves, animaciones suaves, una de las APIs de las que se está hablando mucho es la API de transiciones de vista para transiciones entre múltiples páginas, porque como está ahora, la API de transiciones de vista que todos están utilizando principalmente funciona con JavaScript. Funciona muy bien en aplicaciones JavaScript. Puedo envolver toda mi aplicación Svelte en una transición de vista y hacer algunas animaciones realmente sofisticadas sin tener que preocuparme por la compatibilidad, y Astro lanzó transiciones de vista y simplemente lo tiene funcionando. Entonces, el cambio de una página HTML a otra página HTML, ese pequeño detalle es realmente emocionante para mí. Además, la capacidad de hacer cosas adecuadas que solíamos hacer fácilmente en jQuery en jQuery, como un simple deslizamiento hacia abajo, el hecho de que ahora podamos hacerlo con CSS, esas son las cosas que quiero impulsar, los patrones de IU comunes, las cosas que hacen que se sienta más nativo, más suave, más fácil, como a lo que la gente está acostumbrada, ¿verdad?

Creo que eso es algo incluso con la razón por la que las aplicaciones web siempre tienen una mala reputación en comparación con las aplicaciones nativas, casi siempre es la suavidad de las animaciones, o las transiciones, o simplemente no se sienten nativas, y creo que esas son las razones.

Muchas cosas para reflexionar. Pero se nos acabó el tiempo. Así que un gran adiós de JS Nation y un adiós a Scott, por favor.