Flechas (En Detalle)

Rate this content
Bookmark

¿Te encantan las líneas de conexión? Únete a mí para considerar la humilde flecha como un problema de programación y un desafío de experiencia de usuario. En esta charla, presentaré los muchos problemas complejos y soluciones que he encontrado al trabajar con flechas en mi biblioteca de código abierto perfect-arrows y luego en tldraw (tldraw.com). Con un enfoque estrecho y muchas animaciones para guiarnos, analizaremos las intersecciones, las cabezas de flecha, los ángulos de las cabezas de flecha y todos los diferentes problemas de interfaz de usuario detrás de la creación y ajuste de flechas entre formas, otras formas y puntos.

23 min
24 Oct, 2022

Video Summary and Transcription

Esta charla se centra en las flechas y sus características únicas en las herramientas de diagramación. Explora los desafíos de la posición de las flechas y la selección de conectores, especialmente con formas irregulares. La charla también discute las intersecciones alternativas de flechas y las líneas curvas, así como los desafíos de crear flechas curvas. El orador presenta un método para crear flechas y mover los manejadores que siempre se ven bien. La charla concluye con una invitación a probar la nueva versión de Teal Draw y seguir al orador en Twitter para obtener más contenido sobre flechas.

Available in English

1. Introducción a las flechas en detalle

Short description:

Bienvenidos a mi charla, Flechas en detalle. Soy Steve Ruiz, el fundador de Teal Draw, una aplicación de dibujo. Hoy nos centraremos en las flechas y sus características únicas.

Hola, y bienvenidos a mi charla, Flechas en detalle. Mi nombre es Steve Ruiz y me encuentro en Twitter como SteveRuizOK. Pueden seguirme usando este código QR y si les gustan las flechas, probablemente deberían seguir o si les gusta otro tipo de contenido visual de algoritmos. Soy el fundador de un, bueno solía ser un proyecto secundario, ahora es una startup llamada Teal Draw. Y Teal Draw es una pequeña aplicación de dibujo, pueden acceder a ella en TealDraw.com y les mostraré cómo se ve. Es, como dije, una especie de aplicación de dibujo, una aplicación de diagramación.

Pueden usarla para pizarra colaborativa. Es gratuita, basada en archivos y con un enfoque local. Y estamos trabajando en la nueva versión de esa aplicación que está diseñada más como una plataforma de productos para desarrolladores con la que pueden construir este tipo de aplicaciones. Así que si tienen una idea para un lienzo espacial, una especie de figma para una aplicación x, entonces podrían construirlo sobre Teal Draw en lugar de comenzar desde cero. Y es bastante bueno, obtienen mucho de forma gratuita. Quién sabe, tal vez vuelva el próximo año y pueda hablar de eso. Pero hoy, sí, vamos a hablar de Teal Draw y específicamente vamos a hablar de las flechas. Hay mucho de lo que podríamos hablar, como el minimapa o la tinta digital, ambas cosas son súper complejas e interesantes, creo que hay historias de desarrolladores que contar. Pero en lugar de eso, vamos a hablar solo de las flechas y he pasado mucho tiempo trabajando en las flechas y si han usado Teal Draw, podrán notar que las flechas son especiales, son consideradas. Hay muchas formas diferentes de hacer una flecha. Les mostraré las formas en que lo hacemos y también un poco de contexto sobre por qué y por qué no lo hacemos de otra manera. Así que vamos a sumergirnos en ello. Digamos hola a las flechas, lo que sea.

2. Understanding Arrows and Connectors

Short description:

Una flecha es una línea que conecta dos cosas diferentes, como puntos en el espacio o formas. También puede conectar una forma y un lugar, o un lugar y un lugar dentro de una forma. La mayoría de las flechas tienen una dirección específica indicada por una punta de flecha, que se puede utilizar para representar relaciones en marcos de diagramación. Las flechas pueden tener diferentes formas, como codos, curvas, arcos o splines. Los usuarios pueden encontrar difícil ajustar estos tipos de flechas. Las flechas en las herramientas de diagramación se conectan a lugares específicos llamados conectores, lo que permite conexiones entre ciertos conectores.

¿Qué es una flecha? Es una línea. Específicamente, es como una línea de conexión. Está conectando dos cosas diferentes. Podría estar conectando dos puntos en el espacio como vemos aquí. Podría estar conectando dos cosas, como dos formas, como estos dos rectángulos.

Podría estar conectando una forma y un lugar o un lugar y una forma. O un lugar y un lugar dentro de una forma. La idea es indicar un área específica de una cosa específica, en lugar de solo la cosa en sí misma.

La mayoría de las flechas están dirigidas en el sentido de que van en una dirección específica. Indicamos esa dirección con una punta de flecha que puede ir en cualquier dirección. Así, de esta manera, de esa manera, en ambas direcciones. Las puntas de flecha también se pueden utilizar en diferentes tipos de marcos de diagramación para representar diferentes cosas. Por ejemplo, si tienes un gráfico de entidades o servidores, se pueden utilizar diferentes puntas de flecha para representar diferentes relaciones entre esas dos cosas. También se pueden etiquetar las flechas. Las etiquetas podrían verse así o así. Es un poco difícil hacerlo bien así, así que lo hago así.

Las flechas en sí mismas también pueden tener diferentes formas. No siempre quieres una línea recta. Tal vez quieras algunos codos. Tal vez quieras algunas curvas a lo largo de esos codos. Tal vez quieras un arco o un spline. Y el lugar donde esto se vuelve realmente complicado e interesante es cuando consideras cómo los usuarios crean estas flechas. ¿Cómo ajustas una línea de codo o un spline como este? Ahí es donde realmente se vuelve un poco complicado, como veremos.

La mayoría de las flechas y la mayoría de las herramientas de diagramación se conectan a cosas específicas llamadas conectores. Son lugares específicos en cada lado de la forma donde las flechas pueden conectarse. Así que llamémoslos noreste-suroeste. En este caso, tendríamos este conectando con oeste. Es bastante sencillo. Quieres conectar ciertos conectores entre sí.

3. Posicionamiento de flechas y desafíos de conectores

Short description:

No quieres situaciones en las que la disposición de dos formas resulte en un posicionamiento incorrecto. En su lugar, conecta los puntos de anclaje en los centros y utiliza conectores en los lados correspondientes. Hay varias posibilidades para los conectores, como codos, flechas en ángulo recto o curvas cuadráticas. Elegir el conector adecuado puede ser complejo y hay casos particulares en los que la apariencia de la flecha puede verse extraña. Cuando los usuarios editan flechas, preservar sus decisiones puede llevar a resultados inesperados. Las formas irregulares también pueden plantear desafíos al usar conectores.

No quieres situaciones como esta en las que estás basado en el oeste-oeste según la disposición de las dos formas. Eso no se ve bien. En su lugar, probablemente quieras tener un segmento de línea que vaya entre los dos puntos de anclaje en los dos centros. Observa qué bordes se rompen o se intersectan y luego utiliza los conectores en esos lados. Eso funcionará tanto si las formas son de diferentes tamaños como si están posicionadas de diferentes maneras.

Esa es una regla bastante buena para qué lados usar. Pero incluso así, es posible que quieras complicar las cosas. Es posible que desees mezclar un poco las cosas y tener codos o flechas en ángulo recto, o tal vez quieras convertir eso en algún tipo de curva cuadrática. Siéntete libre de hacerlo, pero aún así necesitarías elegir qué conectores conectar. Eso no siempre es así. Esto es tal vez como una flecha en forma de L, pero también te encontrarás, si sigues este camino, con flechas en forma de C y flechas en forma de I, lugares donde quieres, tal vez si las formas están directamente alineadas, entonces quieres conectar los dos puntos más cercanos. Si están alineados, pero están muy cerca uno del otro, entonces tal vez quieras conectar los puntos hacia un lado. Así que terminas con esta forma en C y sí, si están más o menos así, entonces terminas con una forma en L.

Hay muchas combinaciones posibles y muchas reglas sobre cuándo elegir qué conector, y mucho menos dónde elegir, qué codo elegir y todo eso. Se vuelve bastante complicado y tampoco funciona muy bien en todos los casos. Te encuentras con estos casos particulares, que están literalmente en el límite de un espacio de decisiones, donde no se ha movido lo suficiente como para activar otra ruta de decisión, como, okay, conectemos a un conjunto diferente de flechas o conectores, pero aún está mal, como donde tienes, por ejemplo aquí, el extremo corto de la flecha en codo, que es más corto que la propia punta de flecha, y eso ocurre en muchas aplicaciones donde se utiliza este tipo de cosa.

Especialmente si los usuarios crean sus propias flechas, te encuentras con situaciones como esta donde quieres preservar las decisiones del usuario sin importar lo que hayan hecho. A veces eso significa que quiero que esto se conecte a esta otra forma, pero si los usuarios también editan la flecha, es posible que hayan movido este lado de la flecha hacia la derecha y luego cuando mueves la punta de flecha a otra forma o mueves esa forma a la que está conectada y preservas esa punta de flecha hacia la derecha o el segmento de la flecha que el usuario ha movido, terminas con flechas que se ven un poco extrañas.

Has utilizado una aplicación llamada Whimsical. Whimsical es una aplicación fantástica y un conjunto maravilloso de, bueno, diferentes utilidades realmente. Un par de aplicaciones en una. Pero con sus flechas, puedes llegar a estados bastante extraños al hacer esto, al editar la flecha y también conectarla a algo. Así que es un poco impredecible. Finalmente, las flechas de conexión o el uso de conectores, no hay realmente una solución para, quiero conectar esto dentro de esta otra forma. Normalmente, sí, si no hay un conector allí, entonces simplemente no puedes conectarlo. Así que esta es una historia un poco complicada. Y también si la forma es irregular, los conectores pueden ser un problema. Principalmente porque los conectores son Noreste, Suroeste, se basan en la caja delimitadora de la forma. Si la forma es un cuadro, eso es perfecto porque corresponde. Si no es un cuadro, y si no es un círculo y si no es igual en todos los cuatro lados, entonces podrías encontrarte en situaciones donde sí, simplemente están ahí colgando en el espacio.

4. Intersecciones alternativas de flechas y líneas curvas

Short description:

Cuanto más orgánica es la forma, menos parece que el conector realmente se conecta a la forma. Una alternativa son las intersecciones. Esto es lo que terminamos utilizando en Teal Draw. Intersectamos el segmento de línea en un lugar específico con las dos formas, en lugar de prestar atención a qué borde está roto. Si hay una intersección y ese lado de la flecha tiene una punta de flecha, retrocedemos un poco la punta de flecha. Esto asegura que la flecha apunte e intersecte en el lugar correcto. Buscamos lograr una decisión estética que un diseñador tomaría, obteniendo una flecha que colocarían en esa posición. Ahora exploremos las líneas curvas.

Cuanto más orgánica es la forma, menos parece que el conector realmente se conecta a la forma. Entonces, ¿cuál es una alternativa? Así es. La alternativa son las intersecciones, o al menos esta es una alternativa. Esta es una de las que terminamos utilizando en Teal Draw.

Así es como funciona. Si piensas en una flecha nuevamente, como una especie de línea entre dos puntos de anclaje, tal vez sea el punto medio, pensemos más en eso, es como un segmento de línea que podemos intersectar en un lugar específico con las dos formas. Así que en lugar de prestar atención a qué borde está roto, en realidad miramos, okay, ¿dónde se intersecta esto con la forma? Y luego simplemente dibujamos la línea, la flecha entre esos dos puntos. Fácil.

Así se ve bien. Se ve un poco menos bien para la punta de flecha, el final de la flecha en lugar del comienzo de la flecha. Entonces, lo que hice en Teal Draw es que si hay una intersección y ese lado de la flecha tiene una punta de flecha, retrocedo un poco la punta de flecha. Puedes pensar en esto como una intersección contra los límites expandidos de la forma, pero en realidad no lo es. Te diré por qué en un segundo, pero esto es, esto es lo que quieres. Esto es bueno. Dije como, en realidad no estamos expandiendo los límites y luego intersectando con eso. Simplemente retrocedemos la flecha en la dirección en la que vino. Y la razón de esto es que con formas más complicadas, sí, podrías hacer cosas con los desplazamientos de los límites. Sí, podrías hacer esto. Es un poco complicado. Um, y cuanto más orgánica es una forma, más complicado se vuelve. No quieres hacer, ya sabes, desplazamientos de curvas de Bézier solo para que la punta de flecha retroceda 12 píxeles. Simplemente inviertes la flecha. La empujas hacia atrás. Es fácil. Um, así que no hagas esto, solo, solo, solo haz esto de todos modos. Um, lo que obtienes es una flecha que apunta y se intersecta en el lugar correcto, y se acerca bastante al tipo de flecha que dibujarías si estuvieras dibujando esto tú mismo. Y con este tipo de algoritmos gráficos y demás, eso es realmente, realmente lo que buscas es tratar de descubrir, uh, la, la lógica detrás de una decisión estética que habrías tomado como, como diseñador, o simplemente, ya sabes, um, si tuvieras tiempo para design cada cuadro de eso o dibujar cada cuadro de eso tú mismo, a veces esas reglas son un poco complicadas, pero, uh, ese es el objetivo, obtener algo que sería como, sí, pondría la flecha ahí. Si lo hiciera yo mismo, pondría la flecha ahí. Así que, uh, hablamos de diferentes tipos de líneas, como tipos de líneas estéticas, y queremos adentrarnos en las líneas curvas.

5. Flechas curvas y desafíos

Short description:

El algoritmo que discutimos funciona para flechas rectas y maneja el movimiento y el redimensionamiento de las formas. Sin embargo, las flechas curvas presentan desafíos. En Teal Draw v1, utilizamos manijas al inicio y al final, con una manija intermedia que recorre la longitud de la flecha. La curva no se ve bien cuando está conectada a dos formas diferentes. Exploraremos mejores flechas curvas que intersectan una línea recta con las dos formas.

Pero antes de adentrarnos en las líneas curvas, también debemos señalar que este algoritmo del que acabamos de hablar, donde encontramos las intersecciones, dibujamos la flecha entre ellas, y retrocedemos un poco la punta de flecha. Um, eso funciona para el lugar en una cosa. Uh, también funciona si la forma se mueve y cambia de tamaño. Um, seguirá apuntando al lugar correcto, al anclaje correcto. Um, y como veremos, incluso con líneas curvas, la flecha seguirá funcionando y seguirá funcionando, ya sabes, en la misma situación si las cosas cambian de tamaño o se mueven.

Entonces hablemos de las flechas curvas. Las flechas curvas son un poco complicadas y te mostraré por qué. En Teal Draw v1, en la versión actual de tealdraw.com, um, la forma en que hacemos las flechas curvas es teniendo manijas al inicio y al final, y podemos, um, usar una manija intermedia que viaja a lo largo, uh, la misma distancia, la misma longitud de la flecha, pero de forma perpendicular. Uh, y puede viajar a lo largo de eso. Puedes pensar en ello como normalizado, donde -1 está completamente a la izquierda y 1 está completamente a la derecha. Puedes agarrar la manija intermedia y jalarla hacia arriba hasta la parte superior. Eso sería -1 de curvatura. Um, esto sería 1 de curvatura. Esto sería como 0.5 de curvatura. Um, y de cualquier manera, así es como se crea la curva. Y el problema es que la curva no se ve bien cuando está conectada a dos formas diferentes. Ok. Yo no dibujaría eso. Y lo que sucede es, mientras que este algoritmo que teníamos antes, ¿verdad? La pequeña serie de pasos que nos daba nuestra flecha recta que funciona para flechas rectas, pero no funciona realmente para flechas curvas. Y te mostraré cómo se ve exactamente. Um, y también te mostraré por qué, pero esto es, esto es como se ve, tealdraw.com. Así es como se ven las flechas en tealdraw.com. Um, se ve bien. Se ve bastante bien. Pero cuando las flechas están un poco más separadas, simplemente no se ve bien. Así que hablemos de mejores flechas curvas. ¿Qué sería mejor si, uh, si nuestras flechas rectas se ven bien y nuestras flechas rectas se usan, ya sabes, para encontrar la flecha recta, usamos una línea recta.

6. Flechas curvas y arcos

Short description:

Queremos usar una línea curva para encontrar dónde la línea se intersecta con las dos formas y basar nuestra flecha en el espacio entre esas dos intersecciones. En lugar de colocar las manijas en la punta de flecha, las colocamos en el punto de anclaje, lo que nos permite crear un arco entre esos tres puntos. Esto asegura que la flecha se vea correctamente y se pueda ajustar incluso al reposicionar la manija final. También podemos agarrar la manija intermedia y preservar la distancia real entre la manija y el punto medio de la línea entre los puntos de inicio y final. Este enfoque nos permite crear el arco y tener nuestra flecha.

Intersectamos eso con las dos formas. Um, pero no funciona bien con nuestras flechas curvas porque todavía estamos usando esa línea recta para encontrar los puntos donde se intersecta. No queremos hacer eso. En cambio, queremos usar una línea curva, uh, para encontrar dónde se intersecta con las dos formas y luego basar nuestra flecha en el espacio entre esas dos intersecciones.

En otras palabras, el modelo que teníamos antes, donde teníamos las dos manijas de la flecha, uh, la manija de inicio y la de fin, y luego la intermedia, estábamos reemplazando la manija de inicio y fin en el punto de intersección. Um, pero en cambio vamos a colocar esas manijas en, ya sabes, el punto de anclaje real, donde el usuario ha señalado la flecha. Um, en lugar de colocarlas en la punta de flecha real, las colocaremos en el, um, punto de anclaje y aún dibujaremos la flecha entre las dos intersecciones. Pero las manijas ya no están en la punta de flecha en sí si está unida a una forma. Uh, y lo que eso nos permite hacer es crear el arco entre esos tres puntos y luego nuestra flecha se ve correctamente. Podemos, podemos dibujar la flecha como parte del cuerpo de ese arco. Uh, y eso aún funciona si estamos reposicionando la manija final. Entonces, nuevamente, aquí, no estamos agarrando la punta de flecha, la manija está más o menos aquí. Todavía podemos arrastrarla y, uh, se verá, se verá correctamente. El resto del arco sucederá automáticamente. Um, también podemos agarrar la manija intermedia en esta situación. Y en lugar de que simplemente se mueva hacia arriba y hacia abajo a lo largo de un camino, realmente solo queremos ver la distancia entre la manija y el punto medio de la línea o cuerda entre el punto de inicio y el punto final. Y eso en lugar de representarse como un valor normalizado, como de menos uno a uno. Um, es una distancia real y vamos a preservar esa distancia real. Entonces, en base a esos tres puntos, podemos obtener nuestro arco y luego tenemos nuestra flecha. Veamos cómo se ve eso. Al igual que antes, tengo una flecha recta, pero esta vez las manijas están más o menos en el medio de las formas y puedo decidir dónde apunta la flecha y puedo ajustarla.

7. Creando Flechas y Moviendo Manijas

Short description:

No importa lo que haga, la flecha siempre se ve bien. Usamos tres puntos para crear un círculo, lo intersectamos con las formas y seleccionamos el punto de intersección más cercano para determinar el inicio y fin de la flecha. Empujamos hacia atrás el punto final si tiene una punta de flecha. Con el círculo, el centro, los puntos de inicio y fin, podemos dibujar la flecha y agregar la punta de flecha. Al arrastrar un punto final, también movemos la manija intermedia calculando la distancia entre la manija y el punto medio de la línea entre las formas de inicio y fin.

se ve bien. Incluso al mover las cosas, eso es lo que quieres. Uh, y realmente lo importante es que no importa lo que haga, la flecha sigue viéndose bien. Si está casi recta, entonces simplemente la hago recta. Así que hablemos de cómo hacemos esto. Como poner, ¿cuál es la matemática involucrada y cómo encontramos todos estos puntos? Porque, um, sí, hay bastante sucediendo aquí. Uh, en términos de, um, colocar programáticamente estas cosas en el lugar correcto y, y crear esta curva y crear el arco y todo eso, y hacer las banderas de barrido y las banderas largas, todo eso.

Entonces, es posible que recuerdes de la escuela secundaria, uh, yo lo perdí en la escuela secundaria, pero lo aprendí tarde. Uh, si tienes tres puntos, puedes hacer un círculo. En nuestro caso, tenemos tres puntos para el inicio y fin de la flecha y la manija intermedia de la flecha. Y eso nos permite hacer un círculo. Cualquier tres puntos, siempre y cuando no estén en una línea recta perfecta, se pueden usar para crear un círculo. Si están en línea recta, entonces eso no funciona, pero entiendes la idea. Uh, intersectamos el círculo con la primera forma para obtener estos dos puntos de intersección. Y luego seleccionamos el punto de intersección que está más cerca de la manija intermedia. Y eso se convierte en el inicio de la flecha. Repetimos para la segunda, uh, forma obtenemos esos dos puntos de intersección, encontramos el que está más cerca de la manija intermedia del centro. Y eso es el final de la flecha. Um, al igual que antes, queremos empujar ese, ese punto final hacia atrás un poco si tiene una punta de flecha, en cuyo caso obtenemos la longitud del segmento del arco y cuánto queremos empujarlo hacia atrás, etcétera, etcétera. Sí, simplemente lo hacemos. Uh, y ya tenemos toda la información que realmente necesitamos para, uh, dibujar nuestra flecha. Tenemos un círculo, tenemos el centro del círculo, tenemos un punto de inicio y un punto final, um, o al menos el inicio y el ángulo final, que podemos usar con el radio para encontrar el punto en el círculo. Y eso nos da el cuerpo de nuestra flecha. Y todo lo que tenemos que hacer es ponerle una punta de flecha y listo. Perfecto. Um, se vuelve un poco más complicado con, uh, las interacciones, nuevamente, um, cuando, cuando, cuando arrastramos un punto final, todavía tenemos tres, uh, tres puntos, pero también necesitamos mover esa manija intermedia. Um, y, y para hacer eso, bueno, obtenemos la distancia que teníamos antes, la especie de distancia doblada, la distancia entre la manija y el punto medio de esa línea entre las dos, uh, formas de inicio y fin. Y luego, cuando arrastro este, um, antes de mover realmente esta manija, tengo, ya sabes, puedo encontrar el punto medio y luego aplicar esa misma distancia en una perpendicular. Y ahí es donde colocamos la manija intermedia. Lo siento, esta diapositiva realmente no comunica eso de ninguna manera. Uh,

8. Creando Flechas con Mejor Apariencia en Teal Draw

Short description:

Cuando movemos el punto central, hemos cambiado la distancia de curvatura, lo que nos permite crear un círculo. Encontrar el punto medio del cordón entre el inicio y el final y desplazarlo por la distancia de curvatura nos da la manija final, lo que nos permite crear un círculo, un arco y nuestra flecha. Teal Draw es una herramienta de diagramación que proporciona un conjunto limitado de opciones que siempre se ven bien. No hemos discutido las puntas de flecha, la selección del punto de anclaje y la gestión compleja del estado para las actualizaciones de flechas. Prueba nuestras flechas en tealdraw.com.

así es como movemos los puntos de inicio y fin. Cuando movemos el punto central, lo mismo que antes, es que hemos cambiado esa distancia de curvatura, pero esa distancia de curvatura, uh, es lo que nos permite crear el círculo. Como, tenemos, o al menos conducimos la posición de esos tres puntos, el punto medio. Um, así que ahora hemos cambiado la distancia de curvatura. Um, queremos poner la manija intermedia de nuevo en el medio. Um, la próxima vez que seleccione esto, espero que la manija intermedia esté en el medio. Así que hay un último paso que tenemos que hacer, que es encontrar el punto medio del, bueno, nos angulamos hacia el inicio, el ángulo hacia el final, obtenemos el punto medio, uh, el ángulo de eso. Y luego ahí es donde estará la manija la próxima vez. Y luego tenemos nuestra bonita flecha que hemos ajustado arrastrando la manija intermedia. Te mostraré cómo se ve realmente esto. Y he agregado algo de información de debug aquí para que podamos, realmente verlo sucediendo. A medida que muevo las dos formas, eso es mover el inicio y el final. Punto punto a la manija cuando luego usamos la especie de distancia final para encontrar el punto medio de la manija.

Así que encontrar el punto medio del cordón entre el inicio y el final y luego desplazarlo por esa distancia de curvatura en una perpendicular, uh, eso nos da la manija final, lo que nos permite crear un círculo, lo que nos permite crear un arco, lo que nos permite crear nuestra flecha. Y así es como nace una flecha con mejor apariencia. Estoy usando, usando intersecciones basadas en el, uh, ese círculo. Entonces, al final tienes una herramienta de flecha en Teal Draw, que es bastante buena. Um, como dije, cuando esto funciona, funciona porque cualquier cosa que hagas se verá bien. Um, y, uh, Teal Draw es como una especie de herramienta de diagramación, supongo, se trata de darte un conjunto limitado de opciones que siempre se verán bien sin importar lo que hagas. Um, por mucho que lo intentes, seguirá siendo bueno.

Hay otras cosas involucradas en las flechas de las que no hemos hablado. No hemos hablado de estas puntas de flecha, como estos pequeños puntos que ves aquí. Um, no hemos hablado de cómo elegimos los puntos de anclaje para las formas, aunque es bastante sencillo. Si puedes adivinar, entonces probablemente tienes la respuesta correcta. Um, y no hemos hablado de la especie de la, la gestión compleja del state management involucrada en asegurarnos de que las flechas se actualicen en el momento adecuado, um, en función de lo que ha cambiado, también es bastante complicado. Um, pero sí, eso es sobre las flechas en Teal Draw. Siento que las partes difíciles al menos. Así que gracias de nuevo por ver. Uh, puedes probar nuestras flechas en dos lugares. Primero, por supuesto, tealdraw.com, um, donde puedes probar el conjunto anterior de flechas que mostré, incluyendo las que se doblan de una manera que no esperarías. Uh, pero ya que has sido lo suficientemente amable como para ver esta, uh, esta charla video, um, también puedes echar un vistazo a la nueva versión de nuestras flechas que son un poco,

9. Construyendo la Nueva Versión de Tealdraw

Short description:

Estamos construyendo la nueva versión de Tealdraw en LITE.tealdraw.com. Prueba ambas flechas y déjame saber tus opiniones. Sígueme en Twitter para más contenido sobre flechas. Gracias y cuídate.

dice beta, pero es más como una versión alfa. Um, aquí es donde estamos, construyendo la nueva versión de Tealdraw y puedes revisarlo en L I T E punto tealdraw.com. Prueba ambas flechas. Déjame saber qué piensas. Espero que sea una mejora. Y, uh, una vez más, soy Steve Ruiz. Um, sígueme en Twitter. Mucho más contenido sobre flechas y muchos tweets. Um, así que gracias. Uh, cuídate. Adiós.

Check out more articles and videos

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

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️

Workshops on related topic

React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
TypeScript Congress 2022TypeScript Congress 2022
116 min
Advanced TypeScript types for fun and reliability
Workshop
If you're looking to get the most out of TypeScript, this workshop is for you! In this interactive workshop, we will explore the use of advanced types to improve the safety and predictability of your TypeScript code. You will learn when to use types like unknown or never. We will explore the use of type predicates, guards and exhaustive checking to make your TypeScript code more reliable both at compile and run-time. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.
Are you familiar with the basics of TypeScript and want to dive deeper? Then please join me with your laptop in this advanced and interactive workshop to learn all these topics and more.
You can find the slides, with links, here: http://theproblemsolver.nl/docs/ts-advanced-workshop.pdf
And the repository we will be using is here: https://github.com/mauricedb/ts-advanced