SVGs para hacer destacar tu blog

Hola a todos. En primer lugar, quiero decir que es realmente un placer estar aquí en la edición remota de React Summit y hoy voy a hablar sobre SVGs para hacer que tu blog destaque. Mi nombre es Elisabet Oliveira y soy una diseñadora de productos senior que trabaja actualmente en Elastic. Elastic es una empresa realmente genial. Todos trabajamos de forma distribuida. Yo trabajo desde Lisboa, Portugal. Actualmente vivo en Lisboa, Portugal. Tengo colegas de los Estados Unidos. Y básicamente, en este momento, estoy ayudando a construir la Elastic UI, nuestro sistema de design. Y también estoy ayudando a veces a construir Kibana, uno de nuestros productos.

Hoy quiero hablar, una vez más, sobre SVGs. He estado hablando sobre SVGs antes y he estado en otras ediciones de React Summit, pero hoy quiero contarte un poco cómo puedes usar SVGs dentro de tu proyecto. ¿Por qué? Porque mucha gente, normalmente, cuando ven mis charlas, dicen: oh, sabes, los SVGs son realmente geniales. Me gustaría poder usarlos dentro de mis proyectos, dentro de mis productos. En realidad, puedes usar SVGs dentro de tus proyectos y productos. Hoy quiero mostrarte solo algunas ideas de lo que puedes hacer. ¿Qué es un SVG? Un SVG es una imagen vectorial basada en XML. Esta es básicamente la definición de Wikipedia. Dice que es un formato para gráficos bidimensionales con soporte para interactividad y animación. Como puedes ver, cuando tienes un SVG, básicamente una imagen, y abres el archivo, verás todo este código. Y este código, en realidad, puedes cambiar las propiedades, el relleno, los colores, todas estas cosas, y es realmente genial si quieres animar o interactuar con el SVG.

Así que pensé que para esta charla un blog puede ser un muy buen ejemplo de cómo podemos usar SVGs. Así que puedo darte un ejemplo, el mes pasado comencé a intentar actualizar mi blog. Comencé a investigar mucho y quería construir mi nuevo blog. Quería usar Next.js. También quería usar Chakra UI, así que comencé a investigar mucho y encontré encontré este blog de Noah y Noah creó este blog con Next.js y también con Chakra UI y lo hizo de código abierto. Así que decidí en lugar de comenzar desde cero, hacer un fork del proyecto de Noah, del blog de Noah y luego actualizar y mejorar un poco el design. Entonces, una cosa que noté del blog de Noah, en primer lugar, es muy solo texto. No tiene mucho design. Esta es la parte del blog, así que esta es la la primera página, la página de inicio, y luego tienes el blog y noté que, okay, tienes

Lo primero que hago aquí es tener este evento en mouse enter y mouse leave. Y estoy usando este hook de estado para ver cuándo está encima. Entonces, al establecer que está encima, puedo usar esta variable está encima solo para verificar si el mouse está ingresando al SVG o si está saliendo del SVG. Y esto es como Sharker UI y esto es como el SVG.

Y ahora que tengo estos eventos que puedo verificar si está encima o no. Ahora lo que quiero hacer es, como puedes ver en mi SVG, voy a cambiar si está encima, simplemente muestro esa parte de la cara love struck que es como un grupo y si no estoy encima, quiero mostrar la cara feliz. Entonces básicamente, si ves eso es la razón por la que exporté el ícono, el logotipo con las dos caras. Y ahora en mi código solo verifico si está encima. Entonces, si está encima, solo quiero mostrar el love struck. Si no está encima, voy a mostrar la cara feliz. Ok, ahora veamos. Así es como se ve el blog. Como puedes ver, si me acerco, ahora cambia la cara. En realidad, el logotipo no es tan grande, pero creo que es una pequeña interacción que hace que tu blog se vea un poco mejor. Y en realidad, si no tienes habilidades de diseño, hay muchos sitios web donde puedes usar SVGs de código abierto, tienes como flat icon, free pick, y puedes descargar desde allí. Así que esta es la primera interacción. Y luego en el blog, puedes cambiar el tema claro y oscuro. Entonces, si cambio el tema oscuro y claro, mi logotipo se actualizará de color. Y la forma en que lo hago, es que tengo esta propiedad llamada color de texto. Y desde el componente padre, verifico qué tema es y lo hago con Chakra. Entonces, en Chakra, verifico cuál es el tema actual , si es claro o oscuro, y luego actualizo el color del texto según el tema claro u oscuro. Básicamente, eso es lo que hace este componente.

Y luego los siguientes componentes que quiero mostrarte, es esta parte. Para crear esta parte, en realidad solo quería animar un poco. No quería tener

Para hacer esto, tengo dos cosas, estoy usando Chakra UI para ver cuál es el modo de color actual. Y luego tengo este botón para alternar el modo de color. Y con el botón de alternar el modo de color, tengo una caja de Chakra UI que uso como botón. Y dentro del botón, tengo todos los SVGs. Y lo que hago es que al hacer clic, simplemente actualizo el tema. Y luego tengo dos objetos. Uno son los colores para el tema claro. Y el otro objeto son los colores para el tema oscuro. Entonces lo que hago es que verifico si es el tema claro. Y si es el tema claro, actualizo todos los colores para usar los colores del objeto del tema claro. Y si es el tema oscuro, actualizo todos los colores para usar los colores oscuros de este objeto.

Luego, lo otro que hago es que uso React Spring para crear esa interacción al pasar el cursor. Así que cuando los planetas se actualizan un poco, la computadora parece un poco lenta porque estoy grabando. Y en realidad, la animación es un poco mejor cuando lo pruebas tú mismo. Así que uso React Spring para hacer eso. Básicamente, lo que hago es que uso Translate 3D y actualizo los valores de X e Y según los movimientos del mouse. Así que puedes intentar hacer esto tú mismo. Es muy fácil. En realidad, hay una demostración en el sitio web de React Spring. Es básicamente casi un copiar y pegar de allí.

Otras cosas que puedes agregar en tu proyecto son como este botón. Así que quería crear un tipo diferente de botón para que el blog se destaque, como dije, en lugar de usar un botón normal, quería usar el mío. Así que para hacer esto, tengo este botón.

Entonces, básicamente, con SharkUI, tengo todas estas propiedades de botón y luego eso es mi SVG, donde digo que no estoy preservando la relación de aspecto porque quiero que el SVG crezca con el texto. Así que simplemente paso como una propiedad la altura que quiero y luego la relación de aspecto, el ancho, se establece en 100% Y también paso el color de acento. Es este color. También podría actualizar el color según el tema. En este caso, funciona bien. Funciona muy bien para los temas claro y oscuro. Así que no necesito actualizar el color, pero podría hacer lo mismo que el texto del logotipo o como esta ilustración. El color se podría actualizar según el tema.

Y otra cosa que estoy haciendo aquí son estas tarjetas. Y para estas tarjetas, la idea de estas tarjetas es cuando estamos en el tema oscuro y pasamos el cursor sobre las tarjetas, no puedo ver la sombra. Es muy difícil. Así que necesitaba una forma de resaltar las tarjetas. Así que pensé, bueno, si tengo, como, ¿qué pasa si pongo un SVG aquí y al pasar el cursor, actualizo, como, el color? Así es como lo hice. Y así llamo al fondo del panel. Y el fondo del panel, es parte de esa tarjeta. Y es muy fácil. Así que compruebo si está activo. Y está activo. Viene del padre. Así que compruebo si está activo. Tengo un color de relleno y otro color cuando pasamos el cursor sobre la tarjeta. Y luego, para esto, estoy usando, de nuevo, React Spring. Así que básicamente, lo que estoy haciendo aquí, si está activo, el relleno activo es el que vemos. Y si no está activo, el relleno animado es solo con el color de relleno. Así que también es muy fácil. Así que cuando estamos activos, puedes ver este efecto. Y el último componente que quiero mostrarte, esto en realidad está utilizando un SVG, pero el último que quiero mostrarte es este componente. Y es como, es lo que llamo el botón de amor. Y el botón de amor...

Para el botón de amor, en realidad estoy utilizando React Motion y Framer Motion. También podría usar React Spring. Pero para este, decidí usar Framer Motion. Más que nada para mostrarte que puedes usar la biblioteca con la que te sientas más cómodo. Y es muy fácil crear este tipo de interacción con Framer Motion. Así que si copio esto y busco motion... Básicamente, una de las cosas que estoy haciendo con Framer Motion es casi como los componentes de estilo, motion.svg. Y luego, al pasar el cursor, escalamos un poco. Así que cuando escalamos un poco, también tenemos la misma interacción que el logotipo. Así que verifica si está encima o no y cambia la cara. Y luego, lo que también hacemos aquí es tener una variante y animarla. Así que cada vez que hacemos clic, actualizamos las variantes. Así que vamos de cero a uno, dos, tres, cuatro. Así que cuando animamos, cambiamos las variantes. Así que vamos de la variante cero, a la variante uno, dos, tres y cuatro. Básicamente, solo estamos traduciendo... Y así comienza vacío en los 44 píxeles. Y luego, cuando vamos a la primera variante, que es de 44 píxeles, luego traducimos a 33, 22, 11 y cero, y crea este efecto. Así que básicamente hay un fondo que sube, sube, sube, y eso es básicamente lo que estoy haciendo. Así que aquí estamos de nuevo. Y eso es todo. Solo quería mostrarte las cosas que puedes hacer con SVGs para que tu blog destaque un poco. Voy a compartir el código y puedes ver cómo estoy haciendo el código. Y también puedes usar esto como un proyecto de código abierto. Y eso es básicamente la charla y espero que te haya gustado la charla. Y si tienes preguntas, aquí está mi Twitter. Puedes hacer cualquier pregunta y después de eso también puedes hablar conmigo y hacer todas tus preguntas. Y bueno, eso es todo. Gracias una vez más y espero que lo hayas disfrutado y espero que ahora tengas inspiración para hacer tu

Un blog con más diseño y más creatividad. Y eso es todo. Gracias. Parece que la música sin letras es la mejor opción, lo cual tiene mucho sentido. Siento que es un poco menos distractora que otros tipos de música. Genial. Sí, pero en realidad escucho la misma canción una y otra vez. Eso es genial. Así que, hagamos la sesión de preguntas y respuestas. Así que, tenemos algunas preguntas increíbles de nuestro discord. Veamos qué preguntaron las personas. La primera pregunta es, dado que SVG es JSX válido dentro de los componentes de React, ¿hay algún beneficio en mantener el SVG que obtengo de los diseñadores en archivos separados? Y esto es de Aprilion.

Entonces, ¿puedes repetir la pregunta? Sí. Dado que SVG es JSX válido dentro de los componentes de React, ¿hay algún beneficio en mantener el SVG que obtengo de los diseñadores en archivos separados? No. Creo que es mejor si usas el SVG en línea. Pero creo que también depende de lo que quieras hacer. Si vas a animar el SVG, si vas a cambiar propiedades, colores y todo eso, es mejor si transformas el SVG en componentes de React. Si no vas a cambiar colores ni nada, simplemente puedes importarlo como una imagen porque no obtienes ningún beneficio al ponerlo en línea. Entonces, ¿por qué lo transformarías? Sí, uno de los beneficios con BEO es que no tendrás una solicitud HTTP, pero creo que depende de tu caso. Si es solo una imagen que no cambias en absoluto, simplemente impórtala como una imagen. Si vas a animarla o quieres cambiar colores basados en las props de React, creo que es mejor transformarla en un componente.

Genial. La siguiente pregunta es de Vladislav. Siempre es divertido leer los nombres de usuario de las personas porque es como ¿cómo se pronuncia esto? Entonces, ¿es mejor siempre usar SVG como un componente de React? Eso depende. Me gusta usarlo como un componente de React, pero normalmente cuando pienso en usar un SVG es porque quiero cambiar propiedades, cambiar la apariencia, animar y también tener la mejor calidad porque es como una imagen vectorial. Entonces, creo que si tu caso de uso implica tener interacciones, si quieres, digamos, tener un ícono y el ícono es un SVG, y tal vez quieras hacer el ícono realmente personalizable porque en una parte de la página quieres usar ese ícono en color oscuro, pero tal vez en otra página quieres usar ese ícono con un color diferente. Solo necesitas pasar una prop con el color. Si estás importando una imagen, el SVG como una imagen, tendrías que exportarla en rojo e importarla, y luego tendrías que exportarla nuevamente con otro color, importarla como una imagen, y hacer esto una y otra vez. Entonces, si quieres aprovechar la personalización, creo que es mejor transformarlo en un componente de React.

Genial. ¿Y qué puntos debemos tener en cuenta como desarrolladores al usar SVGs para hacerlo accesible? ¿Existen herramientas o bibliotecas para verificar automáticamente la accesibilidad de los SVGs? Sí. En realidad, está SVGR que puedes crear tu propio script y transformar el SVG en componentes React. Y donde trabajo en Elastic, usamos SVGR. Y cuando lo hacemos, en realidad, dentro de los SVGs, si usas el título para la accesibilidad, si tu SVG no hace nada, es solo una imagen que no dice nada, puedes usar hidden true. Pero si tu SVG es como un ícono que dice algo importante para el contexto, es mejor si pasas un título. Y con SVGR, también puedes hacer eso automáticamente. Y sí. Yo lo usaría. Hay una etiqueta de título, y es mejor si usas la etiqueta de título. O también puedes usar aria-label.

Genial. Genial. Y luego de Vlad S., ¿podemos obtener el tema de color preferido, oscuro o claro, del agente de usuario o del navegador? Con Chakra UI, sí. Creo que puedes hacerlo. Por defecto, lo detecta. Si lo ejecutas correctamente. Si instalas Chakra UI correctamente, puedes decir que según la preferencia del usuario, se abre en oscuro o claro. Chakra UI es uno de mis favoritos para usar también. Lo uso para todo.

Simplemente se ve tan bien de forma predeterminada, y también es fácil de usar. Genial. Thomas B. pregunta, para el efecto de desplazamiento de la tarjeta, ¿usaste el SVG circular y cambiaste el color, es esto más eficiente que simplemente usar un div con borde redondeado y el color de fondo? Creo que probablemente usar CSS sería mejor para el rendimiento que ese SVG, porque creo que si tu SVG, a veces, si lo haces correctamente, si sabes lo que estás diseñando, cuando lo exportas, es realmente simple, pero a veces si usamos especialmente este tipo de software, como Figma o Sketch, y exportas como un cuadrado o un triángulo, crea muchos caminos. A veces, si sabes cómo crear código de bytes, podrías simplemente decir círculo, o podría ser un SVG muy simple, y a veces es un SVG demasiado complicado, y por esa razón, creo que a veces CSS es simplemente, y Adib es mucho mejor. En ese caso, creo que lo hice de esa manera porque solo quería mostrar lo que se puede crear con SVGs, y tal vez en ese ejemplo, sí, creo que Adib sería mejor. Genial. Otro de Stevie R. ¿Cuál fue la herramienta para convertir SVGs a JSX? Para cambiar SVG a... A JSX, lo siento. Sí. El nombre de la herramienta es... Déjame verificar aquí. Se llama svg2jsx.com. JSX.com. Apropiadamente nombrado. Sí. Hace exactamente lo que dice. Sí. Sí. Eso es genial. Entonces, este es de Im Sardon. Pregunta. ¿Has tenido algún problema de rendimiento al trabajar con animaciones SVG de React de los que debamos estar conscientes? Sí. De hecho, uno de los ejemplos que estaba mostrando cuando estaba superponiendo esa ilustración del héroe, fue muy lento. Y fue porque estaba ejecutando Zoom y grabando la charla. Y hacer esto al mismo tiempo mostró que este rendimiento es realmente malo. Creo que a veces tener este tipo de animación con JavaScript hace que tus sitios web sean más lentos. Y a veces es mejor si