Instala Nada: Interfaces de Usuario de Aplicaciones con APIs Nativas del Navegador

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

Entonces, ¿de qué voy a hablar hoy? Bueno, vamos a ver algunas demos reales, y todas estas demos se ejecutan completamente en HTML, CSS y JavaScript. No hay frameworks, nada, ni pasos de construcción. Estas van a estar viendo nuevas o potencialmente infrautilizadas APIs de navegador, algunas de las cuales probablemente hayas visto antes, algunas de las cuales tal vez no, y tal vez no sabías que podías usarlas hoy. Así que, de nuevo, todas estas demos, se pueden cargar directamente en Chrome, sin construcción, sin framework.

Además de eso, después de mostrarte una nueva API, le daré un puntaje de envío, y ese puntaje de envío va a ser ya sea que deberías revisarlo ahora, algo de lo que deberías estar al tanto, deberías probarlo ahora porque realmente está llegando, o puedes enviarlo. Puedes enviarlo hoy. Tengo muchas demos, y otro código QR para ti. Tengo tantas demos para esta charla, que no pude incluirlas todas en las diapositivas, y no solo eso, no quería pasar demasiado tiempo en el código en sí. Así que voy a pasar rápidamente por mucho del código, pero vamos a hablar mucho sobre las APIs en sí. También tendré esto disponible al final de la charla, así que voy a avanzar. Puedes encontrarlo en mi sitio web, Tolin.ski también.

¿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? Me lo imagino. Estos son los tipos de cosas que construimos todo el tiempo, ¿verdad? Normalmente, si estás construyendo una de estas cosas, podrías recurrir a tu framework de JavaScript, ¿verdad? Personalmente, es realmente fácil tener una variable de estado y simplemente alternar esa variable de estado, añadirle un poco de animación, y lo siguiente que sabes, tienes un modal, ¿verdad?

Pero, ya sabes, otra cosa que podríamos hacer es ir a npm install e incorporar quién sabe qué en nuestra aplicación. Podría ser cualquier cosa. El primero del que voy a hablar es de modales, alertas y diálogos. La primera demo que tenemos aquí es solo un modal básico. Esto está usando el elemento dialogue en HTML. Puedes ver que todavía está usando JavaScript. De hecho, la mayoría de estas demos seguirán usando JavaScript. Solo vamos a usar menos JavaScript, y así que todo lo que estamos haciendo aquí realmente es algunos selectores de consulta y llamando a show modal. Lo siguiente que sabes, tenemos un modal. Lo que es tan genial de esto es que aplica un nert a tu página para que no tengas que hacer el truco de overflow hidden para prevenir el desplazamiento. También te da atajos de teclado para que puedas presionar escape para cerrarlo, pero además de eso, captura tu enfoque para que puedas comenzar a escribir de inmediato. Todas estas cosas de accesibilidad que típicamente tendríamos que codificar nosotros mismos. Pero no solo eso, apenas tenemos que escribir cualquier JavaScript para que esto funcione. Puedes usar estas técnicas exactamente con React, Vue, Solid, cualquier cosa, puedes usar estas técnicas, ¿verdad? No está supeditado a vanilla JS. El elemento dialogue. ¿Podrías enviar el elemento dialogue hoy, y estás enviando el elemento dialogue hoy? Sí. Esto está disponible en el 96 por ciento de los navegadores.

No te dije esto, pero cada vez que obtenemos un "envíalo", voy a tener un gif de break-dance. Este tipo 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. Así que podrías haber visto 96 por ciento, pensado, está bien, 96 por ciento, no 100, pero muchas de estas cosas nunca van a llegar al 100, y si ves algo 96, 95, en cualquier lugar por ahí, mientras sea compatible con los tres grandes, puedes imaginar que es muy probablemente enviable. Muchas de estas cosas tienen polyfills si necesitas soporte más atrás. Me imagino que muchos de ustedes están enviando Grid hoy. Grid solo tiene 97.25 si no está prefijado. Prefijado, incluso 97.7. Llegar a ese rango de 97, 96 por ciento es bastante bueno. Así que si quisiéramos animar esto, podríamos incorporar la web animations API, o WAPI, y si abrimos esto, puedes ver que obtenemos un bonito diálogo animado.

La web animations API es bastante simple. Solo estamos alternando un par de valores aquí. Dejaré de moverme. Lo siento. Solo alternas un par de valores. Luego llamas a este método .animate. Lo siguiente que sabes, tienes una animación. De hecho, esta demo no tiene CSS. Bueno, tiene algo de CSS muy básico para aplicarlo y que se vea bonito, pero la animación, la posición, todas las cosas importantes funcionarán sin CSS aquí, y obtienes todo eso a través de la web animations API.

Esto es lo que estoy seguro de que muchos de ustedes conocen, pero si no, la web animations API está extremadamente bien soportada y ha existido por un tiempo. El nombre de este chico es Menno. Él es el otro representante olímpico de los Países Bajos en 2024. Pero puedes ver que este retrocede. 84, Safari 13.1. Así que la web animations API, puede salvarte de tener que importar toda una biblioteca de animación. Ahora, me gustan las bibliotecas de animación. Uso muchas yo mismo. Pueden hacer las cosas realmente fáciles. Transformaciones mágicas y cosas así. Pero a veces simplemente no necesitas una, ¿verdad?

Y aún menos necesidad de una es la view transitions API. Sé que Fred habló un poco sobre esto antes, pero puedes ver que el JavaScript en este es incluso un poco menos. Principalmente estamos manejando los eventos de cerrar y abrir, y básicamente solo estamos llamando a document.startTransition. Lo estamos envolviendo y solo estamos llamando a dialogue.showModal. Échale un vistazo. Eso es todo. Un pequeño desvanecimiento agradable. No estoy seguro si los FPS están captando eso, pero es un pequeño desvanecimiento agradable que obtienes. Ese es el estilo predeterminado. No apliqué ningún CSS a esta transición.

Obtienes un desvanecimiento. Es bastante impresionante. Así que la view transitions API. ¿Puedes implementarlo hoy? Es un 72 por ciento, pero voy a decir que lo implementes, porque esta API es realmente bastante fácil de solucionar si no estás animando.

Así que, 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 view transitions API simplemente no hacen nada. Simplemente no animan. Y si no es compatible, no anima en el navegador, el navegador en el que no funciona está bien. Anunciaron esta semana o la semana pasada que llegará oficialmente en Safari 18. Eso es genial. Lo tendremos allí. Genial.

Así que también puedes hacer esto con CSS. De hecho, este es todo el JavaScript que necesitamos, y mira esto. Todavía obtenemos la misma tecla de escape, todo funciona, todavía captura nuestro teclado, y esta vez ni siquiera tenemos que programar la animación al desvanecerse cuando presionas la tecla de escape. Con las otras opciones, tendrás que hacer eso. Esto se está haciendo con un par de APIs realmente geniales que verás un par de veces en esta masterclass hoy. Esto se está haciendo con una, allow discrete. Allow discrete para mí es una de las cosas más geniales que vienen a CSS. Te permite hacer la transición, display none, lo cual, quiero decir, es el tipo de cosa que solíamos usar jQuery para, para deslizar dentro y fuera. Ahora puedes hacerlo con CSS.

Asimismo, hay otra nueva API aquí, starting style. Starting style podría ser una de las más interesantes para mí también. Esta API está esencialmente diciendo cuál es el estilo de algo antes de que entre en el DOM? En el mundo de React, podrías haber tenido como la biblioteca de transición 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 está animando hacia afuera. Esto es básicamente 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. Así que starting style, una de las APIs nuevas más emocionantes.

¿Puedes usar esto hoy? Lamentablemente, no. Pero deberías intentarlo. Ha estado en Safari desde la versión 17. Notarás que Firefox será el que se quede atrás en todos estos. Pero deberías intentarlo porque creo que esta API es realmente genial. En el caso de no tenerla, es agradable y fácil si no te importa que no se anime. Ese es Vin Diesel, por cierto. ¡Sí, en serio!

Bien. El siguiente, allow discrete. ¿Allow discrete? Ni siquiera cerca. Así que este es uno que vamos a querer revisar. Es muy emocionante, pero solo vamos a tener que revisarlo por ahora. Tenlo en cuenta. Está llegando.

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

No hay zindex aplicado a este elemento. Ninguno en absoluto. Y siempre se situará por encima de todo debido a la capa superior.

Además, puedes obtener algunas acciones controladas reales con esto. Así que con esto, puedes decir popover target action show, popover target action hide, y obtener un poco más de control sobre él que simplemente tener lo que sea el toggle predeterminado, ¿verdad? Y todo eso funciona.

Entonces, ¿puedes usar popover hoy para alternar un popover sin JavaScript? Sí. Puedes usar esto hoy. 96 por ciento de uso global. Está en todos los navegadores.

El nombre de este chico es Pocket. Es de Corea del Sur. Es realmente bueno.

Míralo ir. Santo cielo. Muy bien.

Así que si quieres entrar en la animación de estas cosas, aquí es donde se pone un poco más difícil. No solo eso, hay un defecto fatal con la capa superior del que no necesariamente hemos hablado. La cosa con la capa superior es que cuando agregas algo a la capa superior, y quieres posicionarlo relativamente, no puedes posicionarlo relativamente porque está en su propio contexto. Así que si quisieras que se sitúe debajo de otro elemento, digamos que estás construyendo un menú literal como lo que estamos haciendo aquí, usualmente querrás que se sitúe debajo de ese botón. Y no necesariamente podemos hacer eso.

Así que la forma en que lo abordas ahora es con JavaScript. Así que hago clic en esto. Puedes ver que está aquí. Si desplazo, se queda aquí.

Funciona muy bien. Obtengo todos los atajos de accesibilidad del teclado que quiero para esto. Lo único que estoy haciendo aquí que es realmente interesante es que estoy llamando a una función de actualización de posición con un git bounding client rect. Estoy ejecutando eso al redimensionar y re-desplazar. Y luego estoy haciendo una animación básica con la Web Animations API. Eso nos lleva bastante bien allí.

Es bastante JavaScript en comparación con lo que podrías escribir en tu framework de JavaScript. Sin embargo, no está mal. De hecho, escribí una acción de Svelte para esta cosa exacta para anclarla, y puedo simplemente guardarla toda bien y ordenada debajo de esa acción. Entonces, ¿podríamos hacer todo esto solo con CSS? Échale un vistazo. Golpea 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 anclaje le das un nombre, luego le dices a la cosa que quieres anclar cómo usarlo.

Así que 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 bien y ordenado. Es una API realmente genial. Además, también estamos usando estilo inicial y permitir discreto. Estas son dos API clave que estarán llegando al navegador pronto. Entonces, Anchor, ¿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 al menos quieres probarla y acostumbrarte a ella y tener JavaScript como respaldo por ahora. La próxima vez que sepas, cuando esté disponible, podrás usar esta cosa.

Así que entremos en algunas cosas interesantes aquí con la navegación móvil en cajones. Esta es una versión con la web animations API. Esta es una navegación deslizante. Esto se está logrando a través de la popover API. De hecho, si no tuviéramos ninguna animación en esto, esto simplemente funcionaría si quisieras que esto apareciera. Pero como quería las animaciones, utilicé la web animations API e hice una agradable navegación móvil deslizante, pero una vez más, obtienes el teclado, obtienes tu enfoque, obtienes la tecla de escape, todo eso, y de igual manera, puedes hacer esto con view transitions con la misma API.

Mira eso. Obtienes la misma animación exacta con view transitions. La única diferencia aquí es que le damos un nombre de transición de vista. Luego hacemos la transición en CSS. Y realmente, lo que mucho de esto es, es descargar cosas que hacemos en JavaScript que tenemos que enviar a CSS que no tenemos que enviar. Y lo genial de esto es que tenemos este deslizamiento de fotogramas clave, y todo lo que tenemos que decir para que esta animación funcione es desde translate 100VI. La unidad VI aquí es viewport inline. Si alguna vez has visto VW para el ancho del viewport, básicamente es la misma unidad si estás pensando en una forma de propiedad lógica. 100VI en un de arriba a abajo de izquierda a derecha es lo mismo que 100 VW. Porque solo tenemos que decir desde, simplemente inviertes esta animación cuando la haces salir. La view transitions API es realmente versátil. Puedes escribir algunas animaciones y transiciones CSS realmente intensas con esta cosa, y puedes hacer todo esto solo con CSS también usando esas APIs de las que hablamos antes. Estas cosas van a hacer una cantidad interminable de estas interfaces de usuario que construyes 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 igual 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 algo así como el de GitHub. Puedes ver cuánto se logra con estas cosas usando solo CSS y un poquito de JavaScript.

Acordeones. Los acordeones no son tan emocionantes. Voy a ser honesto. Tienes un acordeón básico aquí. Esto se puede hacer así. Details y summary. Esto funciona envolviendo una etiqueta summary en details, y luego obtienes automáticamente este acordeón funcionando. ¿Puedes usar details y summary hoy? Claro que sí, puedes. Estamos entrando en territorio de un solo dígito aquí con Safari soportando esto desde la versión 6. Esto es extremadamente ampliamente compatible. Mucha gente puede usar esto.

Casi lo saqué de esta charla porque pensé, este es un poco aburrido, pero en mi vuelo aquí, abrí el sitio web de Delta, y es un montón de divs. Divs y botones. ¿Por qué no usan detail y summary? Sentí que la gente todavía necesita escuchar esto. Puedes animar esto con WAPI también. No sé si alguien realmente lo llama WAPI, pero lo estoy llamando así ahora mismo. Obtienes esta agradable animación deslizante. Esta es probablemente la forma más fácil de animar esto hoy sin un framework o una biblioteca adicional trayendo esto. Si estuviera animando esto, probablemente usaría una biblioteca.

Esto está usando web animations API. La razón por la que hay tanto JavaScript aquí es porque queríamos hacerlo cancelable. Aparte de eso, no hay mucho más. El HTML, como puedes ver, apenas ha cambiado, solo los details y summary. Las view transitions están un poco fuera para este caso porque no vas a poder obtener esa agradable sensación de deslizamiento hasta que obtengamos las propiedades de estilo inicial y permitidas en pantalla. Así que solo CSS, ahora, esto debería funcionar. Está usando allowed to screen y estilo inicial. No hay razón por la que esto no debería funcionar. Funciona una de cada diez veces.

Puede que no lo hayas visto debido a los FPS, pero funcionó. Cada vez subsiguiente, funciona a veces. No sé, esto me parece un error porque el código está ahí. Pero, de nuevo, 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 como si todo Instagram fueran pequeños swipers, o si quisieras comprar una pelota de baloncesto de syntax, podrías hacer un poco de swiping, ¿verdad? Estas cosas funcionan muy bien, pero a menudo recurrimos a JavaScript para ellas.

De hecho, déjame presionar, ahí vamos. Y ahora obtenemos un swiper que funciona y opera muy bien. De hecho, este se siente realmente bien en tu teléfono también. Esto no está usando JavaScript en absoluto para construir este swiper. Y verás que funciona como lo que estamos acostumbrados. Esto se está haciendo con la API de scroll snap. Así que, 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. Entonces, scroll snap, ¿podemos usar esto hoy para no tener que construir swipers con JavaScript? Sí, podemos usar esto hoy absolutamente. Ha estado alrededor por bastante tiempo si no estás usando esta cosa. A estas alturas, scroll snap puede salvarte de un montón de cosas, y no solo puede salvarte de un montón de situaciones donde no querrías escribir JavaScript en absoluto, también hace que trabajar con JavaScript de ciertas maneras sea más fácil, ¿verdad? Tenemos indicadores como una cosa común que tienes con estos swipers. Solo espolvorea un poquito de JavaScript aquí, y lo siguiente que sabes es que tienes estos indicadores funcionando, pero aún funciona igual. Todavía obtengo ese agradable desplazamiento suave y todo como esperarías. La única diferencia es que estoy ejecutando una función de actualización aquí cada vez que quiero actualizar esto. Del mismo modo, puedes construir la clásica presentación de diapositivas con esta cosa. Esta función es exactamente la misma. No solo obtenemos los botones e indicadores, sino que podemos obtener el agradable y fácil swipe y simplemente funciona. De esa manera, de nuevo, 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 esto, simplemente actualizando la posición en él.

Puedes revisar todo el código de estas demostraciones. Esta cosa funciona extremadamente, extremadamente bien. Genial. Así que de nuevo, tenía muchas más de estas demostraciones, pero iba a pasarme por una cantidad tremenda de tiempo. Así que si quieres revisar todas estas demostraciones, tengo cada una de ellas, de hecho, la mayoría de ellas, lo que hacen es que pasan por varios grados de cuánto o cuán poco CSS y JavaScript tienes que escribir para cada una, pero hay un montón de demostraciones aquí, de nuevo, si quieres asegurarte de que puedes revisarlas.

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

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

Scott, cosas como el diálogo no funcionaron bien para mí en móviles en absoluto. Safari y Chrome son navegadores móviles, el 3 por ciento. ¿Está la persona que pregunta en la sala? Porque estoy interesado en saber si están preguntando sobre Safari y Chrome en iOS.

¿Sabes qué? Hemos implementado el diálogo en navegadores móviles. Probamos bastante extensamente y no tuvimos demasiados problemas. Pero de nuevo, cada vez que necesites más soporte o soporte diferente, puedes recurrir a JavaScript y manejar estas cosas si lo necesitas. Pero en su mayor parte, ya sabes, siempre que los navegadores que tu audiencia está soportando necesiten poder usar estas características, están listos para usar.

Sí, no he tenido problemas con implementar el diálogo en móviles, tengo que decir. Lo hiciste. Lo hiciste, sí. Lo implementamos en syntax en marzo y no hemos tenido quejas.

Otra pregunta que no puedo encontrar en la lista, pero la tomaré de memoria, es si puedo asegurarme de que cosas como las notificaciones emergentes aparezcan sobre un diálogo. Oh, sí. Bueno, esa es una gran pregunta, porque tienes la capa superior, pero una vez que una cosa está en esa capa superior, mi entendimiento, porque no trabajo mucho sobre capas superpuestas típicamente son cosas temporales, ¿verdad? Mi entendimiento es que eso sería su propio contexto. En realidad, no sé al 100% exactamente cómo superponerlas en la capa superior, sí.

Estaba pensando en esto, desviándome, pero estaba pensando en esto, pero un diálogo no tiene que oscurecer el resto de la página. Puedes estilizar el fondo si quieres, pero una notificación debería solo notificar de todos modos. No debería ser algo con lo que interactúes, creo. No sé si siempre querría que una notificación apareciera sobre, supongo que tal vez 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 alguna discusión sobre eso, sobre si deberían incluso considerar eliminar solo el método show, o simplemente mantenerlo como show modal, sí, para hacerlo modal.

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 notaste eso. Había un montón de iframes, y no me encanta trabajar en iframes, así que no sé sobre eso.

Pero popover en general, encontré que, si lo usas de la manera en que se supone que debe usarse, es una experiencia realmente fluida en general.

Sí, puedo dar fe de eso. Hace dos semanas, antes de unirme a Vivaldi, envié para un cliente a cientos de miles de usuarios un menú que estaba basado en popover.

Sí. Funciona perfectamente en móviles también. Puedes usarlo ahora cuando debas. Sí, y hay un polyfill por ahí, también, que funciona muy bien si quieres soporte adicional.

Alguien preguntó, ¿qué tan accesible es el scroll swiper que demostraste? Bueno, quiero decir, algunas de estas cosas son tan accesibles como las hagas. Con ese, ¿verdad?

, si quisieras soporte de teclado para eso, digamos, vas a tener que añadir soporte de teclado. El deslizamiento todo sucede, se siente bien así, pero digamos que si quisieras presionar tab o una tecla de navegación o algo así, es cuando recurrirías a JavaScript de la misma manera que lo estábamos haciendo. Es tu barba. Con los botones, sí. Sí. Sí.

Sí, así que eso funcionaría muy bien, creo, siempre y cuando lo hicieras con JavaScript en ese sentido.

Quieres probar estas cosas, asegurarte de saber exactamente qué estás enviando. Vaya, otra pregunta en la que nunca había pensado. Me pregunto cuál es la respuesta. Scott, ¿la API de animación web respetará el deseo del usuario de reducir el movimiento? La API en sí, creo que tendrías que verificar primero.

Mi entendimiento es que tienes que verificar primero. Hombre, esa es buena. Porque típicamente incluso con CSS, tienes que verificar eso tú mismo. Creo que es solo una manera de asegurarte de que puedes.

Pero sí, esa es buena. Muchas preguntas de accesibilidad, ¿eh? Muchas preguntas de accesibilidad son buenas. Creo que usarías match media en tu JavaScript antes de llamar a la API para verificar la propiedad de movimiento reducido. Creo que tendrías que verificar manualmente, sin embargo.

Ese es mi entendimiento. ¿Tienes alguna información sobre por qué Firefox carece de muchas de estas APIs? No tengo ninguna información en absoluto.

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á incorporando muchas APIs. Tienen un calendario de lanzamientos 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í. Entonces, mi sitio web es T-O-L-I-N.S-K-I. Así que mi apellido, Talinsky, es solo .ski. Talin.ski. El sitio web está sin terminar. 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 simplemente omitiendo las especificaciones web adecuadas para construir esto? No estoy muy seguro de qué es esto, pero... Sí, esa es una buena pregunta. Así que hay dos lados de eso. Realmente es solo que Chrome está realmente impulsando las cosas hacia adelante, pero de la misma manera, como con la API de anclaje, ciertamente no hubo quórum sobre cómo debería funcionar y operar, qué debería implicar. Así que con eso, si no lo están impulsando hacia adelante, no lo tendríamos donde está hoy, pero de la misma manera, lo lanzaron bastante temprano cuando algunas personas podrían decir que no estaba completo.

Sabes, no lo sé. Creo que estas cosas son necesarias para impulsar las cosas hacia adelante, pero no trabajo en ninguno de los estándares de los navegadores, así que mi participación en cualquiera de esas conversaciones es inexistente. Simplemente siento personalmente que sin que Chrome lo impulse un poco, quién sabe si la gente va a estar realmente añadiendo las cosas que el navegador simplemente 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 todo el día a una discusión sobre la API de anclaje, y creo que ayer fue para asegurarse de que las cosas que se movieron, los órdenes cambiaron en Flexbox y Grid, para que puedas cambiar el orden de las pestañas para que lo siga.

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 añadió a Chrome en relación con el estado de la API en sí. Concedido, estoy emocionado de que lo esté, porque es agradable poder probarlo, ya sabes, y ese es un poco mi papel aquí, ya que, ya sabes, demuestro cosas y las hago, hago que todos se emocionen al respecto, pero también saco el potencial, ¿verdad? ¿Qué pueden hacer estas cosas?

Y de nuevo, supongo que estarías de acuerdo en que cuanto más las personas en esta audiencia prueben estas cosas y den retroalimentación a los grupos de trabajo, mejor podrán resolver cualquier problema o resolver tus casos de uso. Así que imagina que ahora eres el rey de los navegadores, si quieres, eres el señor del mundo de los estándares web, el jefe del mundo de los estándares web. ¿Qué patrones de UI te gustaría ver para los próximos primitivos de navegador? Sí, así que gran parte de mi trabajo se ha hecho en torno a las animaciones en general.

Comencé en gráficos en movimiento, así que para mí, cualquier cosa que implique transiciones más suaves, animaciones suaves, una de las APIs que creo que se está hablando mucho es la API de transiciones de vista sobre múltiples páginas, porque tal como está ahora, la API de transición de vista que todos están lanzando funciona principalmente en 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 elegantes sin tener que preocuparme siquiera por la compatibilidad, y Astro lanzó transiciones de vista y simplemente lo tiene funcionando.

Así que, la de múltiples páginas, cuando estás transfiriendo esencialmente de un archivo HTML a otro archivo HTML, ese pequeño detalle creo que es realmente emocionante para mí. Además, la capacidad de hacer cosas adecuadas que solíamos hacer en jQuery realmente fácilmente en jQuery, un simple deslizamiento hacia abajo, el hecho de que ahora podemos hacer eso con CSS, esas son las cosas que quiero impulsar hacia adelante, los patrones de UI comunes, las cosas que lo hacen sentir 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 tal vez una mala reputación en comparación con las aplicaciones nativas es casi siempre la suavidad de las animaciones, o las transiciones, o simplemente no se sienten nativas, y creo que esas son las razones por las que. Mucha comida para el pensamiento allí.