¿Están muriendo los blogs de desarrollo? ¡No, no lo están! Los blogs están volviendo. Pero lamentablemente, la mayoría de ellos carecen de estilo personal. Entonces, ¿qué pueden hacer los desarrolladores para hacer que sus blogs sean únicos y más bonitos? En esta charla, te mostraré cómo los SVGs (como componentes de React) pueden ayudarte a llevar tu blog de aburrido a impresionante.
SVGs para hacer destacar tu blog
Video Summary and Transcription
La charla de hoy trata sobre el uso de SVGs para mejorar el diseño de blogs, incluyendo la transformación de SVGs en JSX, la animación de elementos y el uso de React Spring para la interactividad. El orador también demuestra el uso de SVGs en SharkUI y muestra un botón de amor interactivo. Se discuten los beneficios de usar SVGs en componentes de React, así como la implementación de SVGs como componentes responsivos. También se abordan consideraciones de rendimiento y los pros y contras de CSS vs SVG.
1. Introducción a SVGs para el diseño de blogs
Hola a todos. Hoy voy a hablar sobre SVGs para hacer que tu blog destaque. Te mostraré cómo usar SVGs dentro de tu proyecto y te daré algunas ideas. Un SVG es una imagen vectorial basada en XML que admite interactividad y animación. Usaré un blog como ejemplo para demostrar el uso de SVGs.
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
2. Usando SVGs para Mejorar el Diseño de Blogs
No tienes mucho diseño. Hoy en día, la mayoría de los blogs de los desarrolladores son solo texto. Sin embargo, un buen diseño puede hacer que tu blog se destaque. En esta charla, te mostraré cómo usar SVGs para mejorar el diseño de tu blog. Transformaremos los SVGs en JSX, lo que permitirá dividir fácilmente el código, hacer animaciones y aplicar estilos. Además, los SVGs en línea eliminan la necesidad de solicitudes HTTP.
3. Dividiendo el Proyecto y Convirtiendo SVG a GSX
Te mostraré cómo dividir el proyecto y crear una carpeta para los componentes SVG. Comenzaremos cambiando el logotipo, que tiene dos caras diferentes. Explicaré cómo exportar el logotipo con atributos ID para facilitar su manipulación. Luego, demostraré cómo convertir el SVG a GSX manualmente. Ahora, tengo los componentes listos.
4. Interactuando con SVGs y Animando Elementos
Te mostraré cómo interactuar con SVGs y crear animaciones. Al utilizar eventos de mouse enter y mouse leave, puedo verificar si el mouse está ingresando o saliendo del SVG. Esto me permite mostrar diferentes caras según la posición del mouse. El blog también admite cambiar el tema claro y oscuro, lo que actualiza el color del logotipo. Demostraré cómo animar los planetas de una manera simple y efectiva.
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
5. Usando React Spring para SVGs Interactivos
Y para hacer eso, y para hacer eso, exporté la ilustración. Estoy usando React Spring. Puedes cambiar el tema aquí con este ícono. También puedes interactuar con esta ilustración. Si haces clic en esta ilustración, puedes actualizar o cambiar el tema actual. Estoy usando Chakra UI para ver el modo de color actual. Tengo un botón para alternar el modo de color con todos los SVGs dentro. Al hacer clic, actualizo el tema. Uso React Spring para crear la interacción al pasar el cursor. La animación es mejor cuando lo pruebas tú mismo. Uso Translate 3D y actualizo los valores de X e Y según los movimientos del mouse. Puedes probarlo tú mismo. Puedes agregar otro SVG en tu proyecto, como este botón.
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.
6. Usando SVGs en SharkUI
Con SharkUI, puedes personalizar las propiedades de los botones, incluyendo la relación de aspecto del SVG y el color de acento. El color se puede actualizar según el tema. Para las tarjetas en el tema oscuro, se utiliza un SVG para resaltar al pasar el cursor. El fondo del panel, parte de la tarjeta, cambia de color al pasar el cursor utilizando React Spring. Por último, se muestra el componente del botón de amor, también utilizando un SVG.
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...
7. Creando un Botón de Amor Interactivo
Para el botón de amor, estoy utilizando React Motion y Framer Motion para crear una experiencia interactiva. Al escalar el botón al pasar el cursor y utilizar variantes y animaciones, podemos lograr un efecto único. El fondo se mueve hacia arriba, creando un efecto visual atractivo. Espero que hayas disfrutado de la charla y te sientas inspirado para mejorar el diseño de tu blog. Si tienes alguna pregunta, no dudes en contactarme en Twitter. Gracias!
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
QnA
Beneficios de Usar SVGs en Componentes de React
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. 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? No, es mejor usar el SVG en línea. Si vas a animar el SVG o cambiar propiedades y colores, es mejor transformar el SVG en componentes de React. Si no vas a cambiar nada, simplemente impórtalo como una imagen. La siguiente pregunta es, ¿es mejor siempre usar SVG como un componente de React? Depende de tu caso de uso. Si deseas interacciones y personalización, es mejor usar SVG como un componente de React.
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.
Implementando SVGs como Componentes React Responsivos
Para implementar un SVG como un componente React responsivo, puedes establecer el ancho y alto al 100% y no preservar la relación de aspecto. Presta atención a la relación de aspecto al trabajar con SVGs. Para la accesibilidad, puedes usar la biblioteca SVGR para transformar SVGs en componentes React. Utiliza la etiqueta de título o aria-label para proporcionar contexto. Chakra UI te permite obtener el tema de color preferido, oscuro o claro, del agente de usuario o navegador.
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.
Rendimiento y Animación de SVG
Para el efecto de desplazamiento de la tarjeta, usar CSS sería mejor para el rendimiento que usar un SVG. Dependiendo de la complejidad del SVG, CSS puede ser más simple y eficiente. La herramienta para convertir SVGs a JSX se llama svg2jsx.com. Al usar animaciones SVG en React, pueden surgir problemas de rendimiento, especialmente al ejecutar tareas intensivas en recursos simultáneamente. Las animaciones basadas en JavaScript pueden ralentizar los sitios web y las animaciones CSS pueden ser una mejor alternativa.
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
Pros and Cons of CSS vs SVG
Usar bibliotecas de JS facilita trabajar con SVGs si no eres experto en CSS. CSS es desafiante para crear ilustraciones únicas, mientras que los SVGs ofrecen más flexibilidad y facilidad de uso. Cuando el diseño es complejo y requiere singularidad, como iconos o logotipos, los SVGs superan a CSS. Gracias por la charla y responder preguntas.