Por qué escribir un componente de Pinch-to-Zoom es más difícil de lo que piensas

Hola a todos. Muchas gracias por asistir a mi charla sobre por qué escribir un componente de pellizcar para hacer zoom es mucho más difícil de lo que piensas. Así que primero permítanme dar una breve introducción sobre mí. Soy Oli, y trabajo en el equipo de AgCharts, que es básicamente solo una biblioteca de front-end para renderizar gráficos de visualización de datos, como gráficos de pastel, gráficos de barras, gráficos de líneas, ese tipo de cosas.

Y tenemos muchas características diferentes. Una de las características clave es que nuestros gráficos son interactivos. Así que obviamente puedes hacer clic con el ratón. También puedes usarlo con un teclado si tienes necesidades de accesibilidad. Y obviamente, también puedes usarlo con entrada táctil si estás en un dispositivo móvil.

Y hace un par de meses, recibí una solicitud de función en la que queríamos agregar soporte no solo para un dedo, sino para dos dedos. Y en términos generales, este es el problema que queríamos resolver. Queríamos algún tipo de, ya sabes, características de zoom y desplazamiento. Y estoy seguro de que todos están familiarizados con esto. Probablemente uses algo similar, como Google Maps. Pero esencialmente, queríamos una función de desplazamiento, donde el usuario pudiera poner dos dedos, mover esos alrededor y ajustar el desplazamiento de la ventana de visualización. Y algo similar con el zoom, donde el usuario pudiera poner dos dedos, separarlos, acercarlos para ajustar su escala.

Entonces, cuando esta solicitud de función llegó a mí, obviamente, siendo el buen programador que soy y todo, hice lo que cualquier buen programador haría y le dije a ChatGPT, ¿cómo hago esto? Y, ya sabes, ChatGPT dijo, oh, haces la cosa así. ¿De acuerdo? Así que esto es lo que me gusta llamar la solución clásica. Básicamente, la forma en que funciona es que cuando tienes dos dedos, ambos tienen coordenadas X e Y, y usas esos dos toques para calcular dos variables diferentes. Una variable será como el centro, o puedes pensar en ella como el promedio de las posiciones X e Y. Rastreas ese promedio, y a medida que cambia, puedes ajustar el paneo con eso. Luego, lo segundo que calculas es la distancia entre esos dos toques. Puedes calcular eso usando el teorema de Pitágoras, y a medida que cambia, puedes ajustar el zoom. Y eso realmente funciona para la mayoría de los casos de uso. Así que aquí, como puedes ver, un ejemplo en el lado izquierdo. Así que eso es, ya sabes, una función de paneo y zoom con la que estoy seguro de que todos están muy familiarizados. A medida que el usuario panea hacia arriba y hacia abajo o de izquierda a derecha, cambia el zoom, pero críticamente, mantiene los valores de escala de los ejes X e Y en proporción entre sí, lo cual es bueno. Eso es realmente lo que quieres, porque no quieres desordenar la imagen. Aún quieres que se parezca a la Isla de Manhattan. No quieres que se vea como alguna otra forma extraña. Pero aquí está la cosa. Pensé, con un gráfico, ¿no sería bueno si pudiéramos desordenar la imagen, porque el usuario, como puedes ver, puede querer ajustar el eje X o solo el eje Y, o puede querer tener un control más afinado sobre qué datos visualizan. Así que obviamente, la solución clásica no va a funcionar para nosotros, porque queremos ejes X e Y independientes.

Entonces, ya sabes, yo, un buen programador, vuelvo a chat.gpt, y digo, oh, no, no, no, no. Quiero que los ejes X e Y sean independientes. Y luego, chat.gpt, obviamente, dice, oh, esa es una gran idea. Eso realmente puede mejorar la experiencia del usuario si los ejes X e Y son un tipo muy entusiasta. Luego me dio una solución, y no funcionó. Y yo estaba como, chat.gpt, necesito una solución que funcione. Él dice, oh, sí, entiendo. Es muy frustrante cuando la solución no funciona. Aquí tienes una solución. Otra solución. No funciona. No funciona. Hice eso, como, cinco, seis veces, y finalmente dije, OK, cállate.

Déjame resolver el problema yo mismo. Así que pensé, OK, intentemos olvidar el código por el momento y tratar de pensar desde la perspectiva del usuario. ¿Cómo diseñamos una buena experiencia de usuario con el tacto? Así que investigué un poco y encontré esta guía realmente útil escrita por Android. Es muy buena. Recomiendo que la leas si estás interesado. Pero esencialmente, explica que debes tener algo llamado una experiencia táctil realista. Y como puedes ver, el buen ejemplo allí en el lado izquierdo, a medida que los toques se mueven, los componentes de la interfaz de usuario se mueven perfectamente bien en sincronía con eso. Mientras que en el mal ejemplo, puedes ver que los componentes de la interfaz de usuario se quedan atrás, o se están moviendo demasiado rápido o demasiado lento. Y eso es malo. Eso es malo. No queremos eso. Entonces, ¿cómo hacemos eso en el gráfico?

OK, veamos un caso de uso. Así que para el paneo, digamos, por ejemplo, que el usuario coloca dos dedos en estos dos marcadores, en la estrella y en el signo más. Y luego mueven esos dos dedos hacia el lado derecho. Bueno, queremos un diseño de experiencia de usuario realista, por lo que aún deberían estar tocando los mismos puntos. ¿Qué pasa con el zoom? OK, veamos un caso similar. El usuario está presionando el signo más y el signo de multiplicación, y luego mueve esos dos dedos más cerca uno del otro. Oh, bueno, eso es interesante. Queremos exactamente lo mismo. El usuario sigue tocando esos mismos dos marcadores. Así que sí, eso es muy interesante, porque inicialmente pensamos que el zoom y el paneo eran dos características diferentes. Pero resulta que son lo mismo.

Lo que queremos aquí es una característica que cuando el usuario toca las cosas y mueve esos toques alrededor, queremos que los toques sigan tocando las mismas cosas. Y ahora he dicho muchas cosas, pero probablemente estés pensando, ¿de qué está hablando? ¿Qué estamos tratando de resolver aquí realmente? Así que vamos a concretar. Pensemos solo en una dimensión por el momento, solo enfoquémonos en el eje x. Así que aquí tenemos esta línea numérica HTML, un componente unidimensional, con dos momentos en el tiempo, inicio y movimiento táctil. Vamos a centrarnos en lo que se supone que debemos hacer cuando recibimos un evento de inicio táctil. Entonces, ¿cuáles son nuestras entradas en este momento? Bueno, obviamente, conocemos el desplazamiento de la pantalla y el ancho de nuestra línea numérica. Llamaremos a eso rx y rw. Eso está en píxeles.

OK, ¿qué más sabemos? Bueno, también conocemos los desplazamientos de los toques, porque recibimos eso del evento de inicio táctil. Lo llamaremos a1 y a2. Eso también está en píxeles. Y obviamente, conocemos las restricciones de zoom de nuestro componente, porque las hemos inicializado desde el principio. Probablemente será como 0 y 1 o algo así. Sí, sabemos cuáles son las restricciones de zoom, zmin y zmax. Y básicamente, lo que estamos buscando en este momento es que necesitamos encontrar alguna manera de recordar que el usuario está tocando los números 4 y 6. Así que básicamente, lo que queremos es algún tipo de coordenadas normalizadas entre 0 y 1. Lo llamaremos x1 y x2. Y básicamente, podemos calcular eso usando alguna ecuación de interpolación. No necesitamos preocuparnos demasiado por los detalles de esta ecuación. Pero básicamente, lo que está sucediendo aquí es que estamos ajustando los valores de píxeles y los valores de zoom de tal manera que tenemos una coordenada normalizada entre 0 y 1. También he añadido aquí este valor final, que básicamente, para nuestro caso de uso, solo significa 1. Lo he añadido allí por completitud, porque puede que en algunos casos, debido a que estás lidiando con errores de punto flotante y demás, puedas querer un valor más grande en algunas condiciones. Para nosotros, digamos que n está allí. Es 1. Lo he puesto allí por completitud.

Ahora, ¿qué sucede cuando recibimos un evento de movimiento táctil? ¿Cuáles son las entradas en este momento? Bueno, obviamente, todavía tenemos el desplazamiento del viewport y el ancho. Eso no ha cambiado. El usuario no ha ido a una nueva pestaña o lo que sea. Todavía están tocando cosas. Sabemos cuáles son las nuevas coordenadas de nuestros toques, porque obtenemos eso del evento de inicio. Perdón, el evento de movimiento táctil. Podríamos, si quisiéramos, podríamos calcular las nuevas coordenadas normalizadas de estos valores usando la misma ecuación y simplemente ingresando todos los nuevos valores. Pero espera un minuto. ¿Qué es este Z-bin, Z-max con apóstrofes? ¿Qué son estas cosas? No conocemos estos valores. Eso es lo que estamos buscando aquí, ¿verdad? Estamos buscando un nuevo valor de Z-min y Z-max de tal manera que los valores de X no hayan cambiado, de tal manera que todavía estemos tocando los mismos números que estábamos tocando antes. Así que esto es genial. Sé que esto no parece revolucionario, pero lo es porque piénsalo, ¿verdad? Esto no es una ecuación. Son dos ecuaciones porque tenemos dos dedos.

Y ahora todos, estoy seguro de que están temblando porque sabemos lo que está pasando, ¿verdad? Tenemos dos ecuaciones y dos incógnitas. Así que lo que podemos hacer es un montón de matemáticas muy aburridas, muchas cosas. Esta es mi diapositiva favorita de toda la presentación, por cierto. Tuve que garabatear un montón de notas en un trozo de papel y me llevó una eternidad averiguar cómo poner esto en una diapositiva de Google. Pero hice el trabajo duro. Está ahí. Tenemos una ecuación para Z-min y tenemos una para Z-max. Podemos simplemente usar eso. Eso es todo. Eso es todo lo que tenemos que hacer.

Bien. Intentemos codificar esto ahora. Comencemos primero con el evento touchStart. Entonces, ¿qué estamos haciendo aquí? Bueno, como pueden ver, lo importante aquí es la función toNormal. Eso básicamente solo implementa la ecuación matemática de la que estaba hablando. Y luego nuestro manejador de touchStart, que básicamente, bueno, tenemos que hacer un seguimiento del identificador de los toques, obviamente, pero recibimos como entradas los límites de CSS y los dos toques, que también contienen los desplazamientos de los toques. Y aquí es donde se pone interesante, ¿verdad? Porque si recuerdan, específicamente queremos que el eje X y el eje Y sean independientes uno del otro. Así que lo que eso significa es que todas estas matemáticas que hemos hecho también se aplican al eje X. Obviamente, tenemos que usar la altura en lugar del ancho, pero podemos simplemente insertar todos estos valores en el solucionador de ecuaciones matemáticas y hará lo mismo, hará todo como queremos para el eje Y.

Ahora, ¿qué sucede con un evento touchMove? ¿Qué queremos hacer aquí? Bueno, curiosamente, hacemos algo bastante similar. Así que tenemos esta función aquí, solveTwoUnknowns, que está resolviendo estas dos ecuaciones. Es un poco más complicado. Hay un poco más de matemáticas involucradas, pero estamos haciendo lo mismo. Simplemente nos está dando un Zmin y un Zmax. Y aquí hacemos lo mismo. Básicamente, estamos rastreando nuestros números. Así que encontramos dónde están comparando los identificadores. Y luego ingresamos todos los valores de píxeles que tenemos de nuestros límites de CSS y nuestros toques. E ingresamos estos valores normalizados que calculamos en el evento touchStart. Y eso nos dará el nuevo Zmin y Zmax, y siempre estaremos tocando lo que queremos. Esto es genial.

Así que ahora he divagado durante unos 15 minutos, y ni siquiera he dicho la palabra React. Así que ustedes están pensando, ¿de qué está hablando este tipo? Pero esto no es para lo que vinimos aquí. Pero está bien. Está bien. Tomaremos todo esto. Hemos hecho la parte difícil. Intentemos integrar esto en React. Así que si vamos a diseñar un componente de React que sea muy robusto y reutilizable, queremos que funcione en cualquier componente, cualquier subcomponente de un componente, cualquier subcomponente de un subcomponente. Queremos que funcione básicamente en cualquier elemento HTML.

Bien. Bien. Así que vamos a usar eso porque afortunadamente existe esta característica llamada CSS transform. Y eso funciona en cualquier elemento HTML. Tiene dos componentes que nos importan. Tiene una traducción. Podemos usar eso para ajustar el desplazamiento.

Y tiene una escala. Podemos usar eso para ajustar el zoom. Y obviamente, ya sabes, esos valores vienen con el componente X e Y. Así que este CSS transform, ese va a ser nuestro use state para nuestro componente.

Muy bien. Bien. Echemos un vistazo al componente. Así que esta no es una implementación completa. Esto es si quieres el esqueleto de nuestro componente. Lo que tenemos aquí es nuestro use state, que es solo un CSS transform. Y para este ejemplo, lo he mantenido simple y solo estoy usando una etiqueta de imagen. En la práctica, esto funciona en cualquier elemento HTML. Pero lo he mantenido simple por el momento.

Ponemos nuestro CSS transform y establecemos el origen correcto. Y ese es el núcleo de nuestro componente. Ahora integremos nuestro solucionador matemático. ¿Qué necesitamos para hacer eso? Así que este es todo el código de nuestro componente. ¿Qué hemos añadido aquí? Bueno, hemos añadido un par de refs. Obviamente, hemos añadido el container ref aquí. Porque si recuerdas, nuestro solucionador de ecuaciones requiere los offsets, los anchos y las alturas para hacer las matemáticas. Así que tenemos que hacer un seguimiento de eso. Y luego también he añadido una instancia de nuestro zoom pan solver. Y lo bueno de eso es que podemos llamar al use ref una función. Porque realmente, no nos importa el estado interno de todas las matemáticas que están sucediendo. Lo único que realmente importa es si nuestra transformación CSS cambia, entonces está bien, necesitamos redibujar algo. Porque ese es el único estado que necesitamos. Y luego también he añadido algunos manejadores de entrada para touch start y touch move. Pero los manejadores no son realmente nada con lo que no estemos familiarizados. Así que solo estamos verificando, ¿tenemos dos números? ¿Es el elemento HTML nulo? No hagas el comportamiento predeterminado del navegador. Porque a los navegadores realmente les encantan los eventos táctiles.

Realmente quieren cambiar las cosas. Así que no lo hagas. Solo cállate. Cállate por un segundo. Y luego obtienes los límites. Porque necesitamos eso para el solucionador matemático. Y luego haces lo mismo en ambos manejadores. Estamos muy familiarizados con eso.

Así que lo único que falta aquí es cómo calculamos esa transformación CSS. Vamos a acercarnos a eso. Así es como lo harías. Así que lo que he hecho aquí, básicamente, he añadido esta función de cliente dos. Que es esencialmente solo la función inversa de nuestra función de interpolación. Porque piénsalo un poco, ¿verdad?

Si tienes una coordenada normalizada cero, y la introduces en la función inversa, te dice dónde está ese cero en coordenadas de píxeles de pantalla. Que es lo que quieres traducir al CSS. Así que eso es bueno. Podemos hacer eso para calcular las transformaciones para los ejes X e Y. Y luego para la escala, también es bastante sencillo.

Así que N es básicamente R1. Ese es el máximo en el espacio de coordenadas normalizado. Encuentras la diferencia entre el mínimo y el máximo. Y voilà. Eso te da la escala.

Así que intentemos echarle un vistazo. Solo dame un momento para cargar la demo en el iPad. Ahora recibiré un popup en cualquier momento. Sí, ahí vamos. Sí. Acepta eso. Aquí vamos. Así que aquí está el componente en su totalidad.

Así que veamos que realmente hace lo que se supone que debe hacer. Así que podemos hacer zoom aquí. Eso es agradable. Eso es genial. Bien. Podemos poner dos dedos allí y moverlos alrededor. Eso es bueno. Sí. Eso es desplazamiento. Eso es lo que queremos. También podemos ajustar solo un eje. Por ejemplo, solo ajustar el eje X moviendo los dedos hacia arriba y hacia abajo. Sí, eso es genial. Lo hace. También podemos hacerlo de izquierda a derecha. Bien.

Muy bien. Deforma la imagen en este caso, pero eso es lo que queremos, especialmente para el chart. Y verifiquemos que realmente son gestos táctiles realistas. Así que esta es la parte complicada de la demo. Tengo que asegurarme de tocar exactamente donde quiero. Intentemos tocar las caras de estas dos ovejas aquí. Así que si pones las caras en estas dos ovejas, mientras muevo esto, puedes ver que los dos toques básicamente siempre están tocando la misma parte de la imagen, incluso si la deformo. Sigue tocando más o menos el mismo lugar.

Así que eso es genial. Está haciendo lo que queremos que haga. Hay un par de advertencias con esta demo. Así que las repasaré. Una de las advertencias es que obviamente un caso de uso común es que quizás quieras, por ejemplo, solo ajustar el eje x. Pondrás tus dos dedos así cerca uno del otro y los moverás separados. Pero aquí está la cosa. Así que esto puede sorprenderte un poco, pero en realidad no soy una máquina. Soy un humano. Y así que cuando pongo los dedos al principio, había una pequeña diferencia en y entre ellos. Y era muy, muy pequeña.

Era como tal vez uno o dos píxeles. Así que eso significa que cuando pongo los dos dedos así, eso hace que el eje y sea muy sensible. Así que en realidad podemos arreglar esto. Y eso es lo que hacemos en AG Charts. Si el usuario pone esos dos dedos así, pero la diferencia, la diferencia en y es muy, muy pequeña, simplemente ignoramos eso. Pretendemos que es cero. Y eso te permite básicamente solo ajustar el eje x. Luego hay un par de otras advertencias. Así que digamos, por ejemplo, que pones dos dedos y los mueves. Nuevamente, como dije, soy un humano.

No soy un robot. Así que obviamente cuando muevo mis dedos, no los estoy moviendo perfectamente sincronizados. Se mueven un poco como... Se mueven un poco. Así que puedes notar que la escala es un poco como nerviosa. Es como hacer esto grande, hacer esto pequeño. Se ve raro. Pero también podemos arreglar eso. Así que podemos añadir algún tipo de lógica de ajuste para que cuando lo muevas, si los dedos no se están moviendo mucho, simplemente ignore ese movimiento. Podrías añadir algún tipo de lógica para eso.

Luego, otra característica que podrías implementar es qué pasa si los dos dedos intercambian posiciones. Así que digamos, por ejemplo, que haces esto. Aquí, esto no es muy bueno. He añadido un truco para básicamente decir ignora este caso. Así que cuando se intercambian, mi código es como si el truco fuera, finge que no pasó. Pero podrías añadir eso como otra característica. Así que podrías añadir algún tipo de efecto de espejo para realmente intercambiar la imagen si quisieras. Así que en términos generales, así es como implementas un componente de pinch to zoom con ejes independientes en React.

Aquí hay un código QR para escanear, para revisar el código fuente. Si quieres jugar un poco con la demo. También incluye las diapositivas y algunos documentos adicionales que explican cómo funciona la matemática. También puedes probar la biblioteca de AG charts si quieres. Porque de hecho tenemos una implementación de esto. Si quieres tener un caso de uso más realista que solo un montón de ovejas en Inglaterra, puedes probarlo allí. Definitivamente lo recomiendo mucho. Y estaré disponible para cualquier pregunta en este momento.

Mientras tanto, te preguntaré un poco sobre las bibliotecas en las que estás trabajando. Entonces, AG charts y AG grid, ¿son esas las dos principales bibliotecas de AG? Eso es correcto. Y cuando dices principales, debería enfatizar que son las únicas dos bibliotecas. Las únicas dos. Sí. Perfecto. Genial. Y entonces, AG charts, ¿está basado en algo? ¿Está basado en D3? ¿Es completamente desde cero? Es completamente autónomo. Así que no tenemos ninguna dependencia externa en él. Tenemos algunas dependencias internas. Así que tenemos un par de paquetes que dependen entre sí, pero no hay dependencias de terceros. Todo está construido desde cero. También está construido en TypeScript puro, por lo que no estás limitado solo a React. Podrías usarlo en cualquier otro framework. Pero tenemos un envoltorio para React si quisieras. Genial.

Muy bien. Primera pregunta aquí. ¿Qué otros gestos táctiles soporta AG charts? ¿Desplazamiento con inercia? No estoy realmente seguro de qué es el desplazamiento con inercia. Oh, desplazamiento con inercia. Así como eso... Oh, sí. Me encanta esa idea. Me encanta eso. No, no lo hace. Pero tal vez algún día lo haga. Esa es una idea realmente genial. Gracias. Sí.

Sí, todas esas cosas de gestos basados en física. Sí, sí. Sí. Muy bien. Siguiente. ¿Alguna consideración de rendimiento al usar un CSS transform? He escuchado que el renderizado puede verse afectado tan pronto como agregas reglas de transform.

Sí. Quiero decir, eso es cierto. Así que tienes que volver a pintar cada vez que hay un cambio. Pero al final del día, realmente no hay una forma de evitarlo. Así que, como en ese ejemplo específico, estás distorsionando la imagen. Así que en algún momento, tendrás que volver a dibujar todo porque todos esos píxeles se han movido. Así que podrías agregar algún tipo de optimización. Así que la forma en que optimizamos esto en AG charts es que solo necesitamos aplicar las transformaciones a los datos reales en el gráfico. Pero otras cosas como la leyenda y el título y todo eso, no necesitan ser redibujadas. Así que solo volvemos a dibujar las partes relevantes del lienzo. Sí. Así que para las personas que usan transforms, puedes usar un transform 3D para invocar la GPU.

Muy bien. ¿Sería esta una buena integración para mapas? ¿Y funcionaría esto para trackpads o solo para pantallas táctiles? No lo creo. Tal vez. Depende del tipo de tecnología de trackpad que estés usando. No creo que funcione en un Mac, por ejemplo, porque eso es básicamente un... No exporta eventos táctiles, pero podría ser diferente en diferentes hardware. Esto no sería una buena integración para mapas. Sería terrible porque distorsionarías la imagen completamente y se vería terrible. En ese caso, querrías usar el enfoque clásico de solo rastrear la posición promedio y la distancia y usar eso básicamente para implementar ZoomPan. ¿Cómo pueden los usuarios que solo usan teclado usar Zoom y Pan? Más ampliamente, ¿cómo harías que la accesibilidad sea intuitiva en un dominio como DataViz sin estándares fuertes? Me gusta esta pregunta porque paso mucho tiempo trabajando en cosas de accesibilidad. Y, quiero decir, lamentablemente, no hay una muy buena manera de lidiar con esto para propósitos de accesibilidad. Así que la alternativa que tenemos es que tenemos diferentes formas de ajustar el Pan.

Entonces puedes, por ejemplo, usar el signo más o el signo menos para ajustar el zoom. Y hay otras combinaciones de teclas y otras características que tenemos, como los botones de zoom, los navegadores, hay otras características que puedes ayudar a hacer tu gráfico más accesible. Pero creo que para este caso de uso específico, no creo que sea muy factible para nosotros hacerlo accesible, desafortunadamente. Sí.

¿Con qué frecuencia implementas solicitudes de características de los usuarios y cuál fue la más difícil? Esta fue bastante difícil. Tuve que discutir con ChatGpt y escribir un montón de notas. ¿Con qué frecuencia recibimos la solicitud? En realidad no estoy seguro. No tengo mucha exposición en nuestro sistema de tickets. Pero creo que es bastante sustancial porque, obviamente, la biblioteca es muy madura ahora. Así que tenemos más tiempo para implementar solicitudes de características. Sí.

Vi las matemáticas. Las matemáticas parecían difíciles. ¿Hay alguna tendencia o expectativas sobre lo que debería suceder con interacciones de tres o cuatro dedos? Así que no creo que haya ninguna expectativa en este momento o precedentes o lo que sea. Pero podríamos, en teoría, agregar soporte para eso. Podrías querer que tres dedos ajusten alguna otra parte de la vista. Pero no creo que haya ninguna tendencia en curso de la que esté al tanto. Sí. Creo que uno de los Google Maps o lo que sea ajusta la inclinación de tu punto de vista. Eso siempre me confunde cuando lo uso. Estoy como, ¿por qué estás haciendo esto? Sí. Podría haber un caso de uso para ello. Porque obviamente estás tratando con múltiples ejes y tienes diferentes series. Así que tal vez tres dedos podrían ajustar qué series son visibles o algo así.

Podría haber un caso de uso. Pero no hay ninguna tendencia de la que esté al tanto. Dado el estado de la IA, ¿qué tan importante crees que es entender lo que sucede bajo el capó y conocer las matemáticas subyacentes? Así que sí. Creo que es absolutamente fundamental.

Así que no quiero abrir la caja de Pandora porque podría hablar de esto durante horas y horas y horas. Pero esencialmente, creo que es muy, muy crucial entender la teoría y poder realmente hacer el trabajo duro por ti mismo. Y puedes usar IA para acelerar tu flujo de trabajo, pero al final del día, tienes que entender qué está haciendo. Porque si no entiendes, entonces no podrás identificar la salida incorrecta generada por la IA. Sí.

Estoy totalmente de acuerdo. Hemos estado investigando el uso de un enfoque de características plug-in para nuestra plataforma interna de front-end. ¿Cuáles son algunas trampas o preocupaciones que considerarías para este caso de uso? Así que quiero decir, ya he hablado de un par de las trampas. Así que algunas de ellas eran como, por ejemplo, el eje y es muy inquieto. Y cuando te desplazas, eso es muy inquieto. Así que todavía hay trabajo que necesita hacerse para intentar hacerlo un poco más usable porque los humanos, lamentablemente, son criaturas muy imperfectas. Y luego el otro problema sería que obviamente esto no es aplicable a todo tipo de elemento de UI. Específicamente solo es usable cuando quieres que los ejes x e y sean independientes, lo cual es probablemente una minoría de casos. Creo que en la mayoría de los casos generalmente querrías mantener esa relación de aspecto bloqueada. Sí.

¿Y qué hay de los lectores de pantalla? Leer datos de tablas en gráficos siempre es un problema. En realidad no entiendo la pregunta. ¿Cómo trabajar con lectores de pantalla? Bueno, creo que... Sí, tienes muchos datos. Sí, así que tenemos un mecanismo incorporado para dar actualizaciones al usuario. Así que tengo una charla completa separada sobre cómo lidiamos con los lectores de pantalla. Pero esencialmente, sí, a medida que los valores de zoom cambian, podríamos anunciar nuevos valores. Así que, por ejemplo, a medida que eso cambia, podríamos decir algo como, oh, ahora es 20% de zoom y 40% de zoom. Se convierte más en un problema de UX que en un problema técnico, porque cómo harías accesibles todos estos cambios? Porque hay mucho sucediendo y obviamente no quieres bombardear al usuario con muchos y muchos de casos. Así que es otro problema de UX que realmente no sé. Realmente no tengo una buena respuesta en este momento, desafortunadamente. Sí. Bueno, muchas gracias. Eso fue increíble. Y realmente lo disfruté. Oh, muchas gracias. Sí.