Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

Rate this content
Bookmark
28 min
02 Dec, 2022

Video Summary and Transcription

La charla de hoy discutió la importancia de las animaciones de la interfaz de usuario en React, tanto funcionales como emocionales. Se dieron ejemplos utilizando CSS y Framer Motion, con un enfoque en la retroalimentación del usuario y la accesibilidad. Se destacaron las pautas de diseño y el uso de animaciones, así como la consideración de emociones negativas en las animaciones. La charla también abordó el diseño de páginas de error 404 y concluyó con agradecimiento al público y a los organizadores.

Available in English

1. Introducción a las animaciones de UI en React

Short description:

El tema de hoy son las animaciones de UI emocionales y funcionales en React. Las animaciones de UI agregan movimiento, reducen la carga cognitiva y mejoran el encanto de la interfaz. Pueden ser funcionales o emocionales, mejorando la usabilidad y deleitando a los usuarios. Las animaciones de UI son importantes ya que proporcionan una experiencia de usuario natural, reducen el estrés y hacen que la UI sea más atractiva. Las animaciones en React se pueden crear utilizando CSS puro, frameworks o bibliotecas como Emotion y Framer Motion.

Bienvenidos a todos. Hoy voy a hablar sobre las animaciones de UI emocionales y funcionales en React. Mi nombre es Elisa Beto Oliveira. Soy de Portugal, Lisboa. Nací en Mozambique, de ascendencia portuguesa y mozambiqueña. Soy una diseñadora de productos senior. Actualmente trabajo para el equipo de Elastic UI, un sistema de diseño utilizado en Elastic.

La agenda de hoy es explicar qué es la animación de UI, por qué es importante y cómo podemos crear animaciones en React. En esta parte, mostraré algunos ejemplos con código y luego compartiré algunas reflexiones finales. Disculpen.

Entonces, ¿qué es la animación de UI? Básicamente, es el proceso de agregar movimiento a los elementos de la interfaz de usuario. También ayuda a reducir la carga cognitiva, que es la cantidad de esfuerzo que los usuarios experimentan cuando quieren hacer algo. Además, la animación de UI agrega personalidad y encanto a una interfaz, y ayuda a superar las barreras de idioma y cultura en el diseño de interacción.

Las animaciones de UI pueden ser funcionales o emocionales. Las animaciones de UI funcionales son aquellas que pueden mejorar la UI al proporcionar retroalimentación visual. Mejoran la usabilidad, brindan retroalimentación sobre las acciones del usuario y pueden proporcionar retroalimentación cuando cambian los estados de la aplicación. Las animaciones de UI emocionales, por otro lado, pueden deleitar al usuario y ayudar a establecer una conexión con la marca. Si se hacen correctamente, los usuarios pueden tener experiencias más memorables.

Pero, ¿por qué es importante la animación de UI? En primer lugar, pueden proporcionar una experiencia de usuario más natural al simular la experiencia de interactuar con un objeto físico en la vida real. También pueden reducir el estrés al proporcionar actualizaciones y retroalimentación en tiempo real. Además, pueden hacer que tu UI sea más divertida y atractiva. ¿Y cómo podemos crear animaciones en React? Puedes usar CSS puro con un framework o simplemente el estilo. Para mis demos, voy a usar Emotion. También puedes utilizar una biblioteca de animaciones para animaciones más complejas. En las demos que mostraré a continuación, estoy utilizando Framer Motion.

2. Ejemplos de Animaciones Funcionales

Short description:

Veamos algunos ejemplos. El primer ejemplo es una animación funcional que proporciona retroalimentación al usuario. Cuando pasas el cursor sobre el botón, se oscurece y se desliza hacia arriba. Esto se logra utilizando CSS con la propiedad transform. Otro ejemplo es un botón que muestra una línea al hacer clic. Sin animación, sería extraño. La línea se expande utilizando un elemento SVG.

Veamos los ejemplos. Y esto es como mi sitio web de blog. Y al final de la charla, tal vez por la tarde, puedo compartir esta publicación. Aún no está publicada. Pero la idea es mostrar las animations aquí.

Este primer ejemplo es una animación funcional. Y es una animación funcional porque proporciona retroalimentación al usuario. Imaginemos que podría tener un botón como este. Digamos, sin estilos, nada. Y al pasar el cursor, sin ninguna retroalimentación del usuario, sería extraño. No sabrías que puedes hacer clic, solo el cursor cambia. Y en este caso, tengo una mejor retroalimentación del usuario. Entonces, cuando paso el cursor sobre el botón, se oscurece más, y el botón se desliza un poco, se desliza hacia arriba. Este es un buen ejemplo de una animación funcional. Y es muy fácil lograrlo. Solo estoy usando CSS y básicamente, al pasar el cursor, tengo esta transformación translate-y. Que básicamente dice que quiero que el botón se mueva un píxel hacia arriba. Y luego tengo esta transformación con una duración de 250 milisegundos y una función de temporización de easing out y sin retraso.

Ahora puedo mostrar otro ejemplo diferente. En este caso, hay un botón que muestra una línea al hacer clic, y puedes ver, imagina que esto podría ser una barra de navegación. Sin ninguna animación, sería extraño porque tal vez no verías que al hacer clic o al pasar el cursor, no sucedería nada. En realidad, en mi computadora, esto es de color rosa. Y hay un tono morado oscuro, pero es rosa. Entonces, cuando haces clic, esta es la animación. Tenemos esta línea que se expande. Y para hacer esto, también estoy usando... Entonces tengo este componente de demostración donde estoy pasando el estado exacto para cada elemento. Y luego tengo esta línea de botón. Y en la línea de botón, estoy usando un SVG aquí. Y este SVG es básicamente la línea.

3. Animaciones CSS y Framer Motion

Short description:

Tengo una animación CSS que expande un SVG al hacer clic, proporcionando retroalimentación al usuario. Otro ejemplo es una animación más compleja utilizando Framer Motion, donde suena una campana al hacer clic. La animación puede ser activada por una notificación en una aplicación del mundo real. Sin embargo, es importante considerar a los usuarios con trastornos vestibulares y proporcionar una opción para reducir el movimiento.

Y luego tengo esta animación CSS donde tengo esta animación de expansión que ocurre en 0.3 segundos. Y tiene esta función de temporización llamada ease in. Básicamente, la expansión la estoy haciendo con estas keyframes de Emotion, pero podrías hacer lo mismo con CSS normal. Y básicamente estoy animando desde hasta. Entonces, el ancho de ese SVG, comienza cuando hago clic, cuando no hago clic va desde, cuando hago clic va desde cero hasta el 100%. Así que también es muy fácil de lograr. Y es una buena retroalimentación para el usuario.

Solo una nota para los usuarios, ahora mismo estoy en esta página sobre, y luego esta es una animación más compleja. Entonces, para este ejemplo, que llamo una campana sonando en un encabezado, estoy utilizando Framer Motion. Y cuando hago clic, la campana suena. Y estoy usando este botón, pero en una aplicación del mundo real, este estado, para animarlo puede provenir, no sé, de una API de tu base de datos. Básicamente, recibes una notificación, y la animación debería activarse. Así que estoy usando Framer Motion, y esta animación es un poco más compleja. Entonces, básicamente con Framer Motion, tienes estos componentes, casi como componentes estilizados. Entonces, en este caso, envuelvo el icono con el span. Entonces, lo que hago es motion.span, y luego tengo varias variantes. En este caso, tengo dos variantes de animación, una llamada activa y la otra llamada inactiva. Entonces, en mi estado activo, básicamente lo que quiero animar es la rotación, transform, rotate. Entonces, en mi estado inactivo, solo quiero decir que quiero rotar cero. Y en mi estado activo, quiero rotar todos estos grados diferentes en un array, cero, 30 grados, menos 10, 28, y solo doy números aleatorios porque en el mundo real, una campana suena al azar. Así que eso es lo que estoy tratando de imitar. Así que tengo estas dos variantes y los estados activos, como puedes ver, voy a llamar a ese array de grados. Pero en este caso, si te das cuenta, esta animación es muy frenética y no podemos olvidar que tenemos algunos usuarios que pueden tener algún trastorno y cosas como náuseas y vértigo. Se llaman trastornos vestibulares. Entonces, en OSX y otros sistemas operativos, puedes tener esto, que es parte de la accesibilidad. Puedes hacer clic para reducir el movimiento. Entonces, cuando reduces el movimiento y si hago clic, no sucede nada porque ahora mismo el usuario tiene esa opción habilitada. Pero si desactivo la opción, vuelve a animarse. Entonces, con Framer Motion, incluso con CSS puro, tienes una consulta de medios llamada PreferReduceMotion y debes usarla para verificar si el usuario tiene esa opción habilitada o no. Entonces, si el usuario tiene reducción de movimiento habilitada, no deberías animar.

4. Animaciones Funcionales y Emocionales

Short description:

Utilizo el gancho useReduceMotion de FramerMotion para verificar si el usuario ha habilitado la opción de no rotación. En el siguiente ejemplo, me inspiré en el sitio web de Josh Kamau y creé una animación similar. El ejemplo consta de dos componentes, uno para los likes del usuario y otro para los likes totales. Cuando el usuario alcanza cinco likes, ya no puede hacer clic. La animación incluye cambios en el tamaño y los ojos al pasar el cursor, y la visualización de emojis al hacer clic.

Entonces, lo que hago es utilizar el gancho useReduceMotion que proviene de FramerMotion y si el usuario tiene la opción habilitada, no ocurre ninguna rotación. Si está deshabilitada, se ejecuta ese array. Y esto es muy importante hacerlo.

Y luego, el siguiente ejemplo es una animación funcional pero al mismo tiempo emocional. Y este lo tomé como inspiración del sitio web de Josh Kamau. Creo que cuando fui por primera vez a su sitio web y vi su blog con este lindo corazón, quise descubrir qué hizo para lograr eso. Así que intenté hacer algo similar.

En este ejemplo, tengo dos componentes. El primero es básicamente donde tengo dos estados. Los likes del usuario y los likes totales. Los likes totales son actualmente 117 y los likes del usuario son uno, dos, tres, cuatro, cinco. Y cuando llego a cinco, no permito que los usuarios hagan clic. Así que paso esos dos estados al componente llamado love button y estoy utilizando Framer Motion. Aquí suceden varias cosas. La primera es cuando se pasa el cursor. Los ojos cambian y se hacen más grandes. Para hacer eso, utilizo los eventos onMouseEnter y onMouseLeave de React. Tengo el estado isOver y cuando el cursor entra, establezco el estado isOver en verdadero. Luego, con SVG, puedo cambiar los ojos. Si isOver es verdadero, muestro una mascota con algunos ojos. Si no es así, muestro los ojos en forma de arco. Y luego hay otra animación. Cuando haces clic, puedes ver estos emojis aquí. Para hacer eso, tengo un array de emojis y luego recorro ese array de emojis. Y luego verifico. Solo quiero mostrar cinco likes. Entonces, si es el primer like y es el primer emoji del array, se vuelve visible.

5. Ejemplos de Animación de la Interfaz de Usuario

Short description:

La primera animación implica un emoji moviéndose hacia arriba con cambios de opacidad. La segunda animación utiliza un cuadrado rosa para llenar un botón en forma de corazón. Al hacer clic en el cuadrado, se mueve hacia arriba en incrementos hasta llegar a cero. El último ejemplo es una barra de búsqueda con un planeta que se anima al escribir o hacer clic. El planeta gira y los ojos y la boca se animan con un tiempo de espera establecido. La animación se implementa utilizando Framer Motion e incluye opciones de accesibilidad.

Y luego se anima con una de las variantes. La variante visible que básicamente, que básicamente muestra ese emoji yendo hacia arriba. Así que esta es la animación visible. Básicamente estoy usando nuevamente el translate Y y algo de opacidad. En este caso, va desde cero hasta 16 y luego de 16 a 32 así, y luego tengo algo de opacidad. Va desde cero hasta 0.8 y luego desaparece de nuevo a cero.

Y luego hay otra animación que básicamente el botón se va llenando con este color rosa y para hacer eso, básicamente cuando diseñé esto, así que estoy usando una máscara y la máscara tiene esta forma de corazón y en la máscara hay un cuadrado y el cuadrado es rosa. Así que ahora mismo ese cuadrado es rosa, está en la parte inferior y cuando comienzo a hacer clic ese cuadrado comienza a subir, subir, subir, subir. Así que cada vez que hago clic, básicamente estoy trasladando ese cuadrado. Así que la posición cero en realidad son 42 píxeles, está aquí, es cero, está aquí. Así que quiero hacer que ese cuadrado vaya a los 42 píxeles. Así que cuando está en cero, ahora está en 42, cuando hago clic de nuevo, va a 32, 24, 16, ocho y cero. Así que este fue el ejemplo de una animación emocional de la interfaz de usuario.

Y luego este es el último ejemplo que voy a mostrar. Y se trata de una barra de búsqueda con un planeta que se anima. Y uso esta animación con un proyecto que hice con Sara Vieira hace algunos años. Básicamente es `¿Hay Uber en?` Y la idea del proyecto era verificar en cualquier ciudad del mundo si se podía tener Uber. Como el sitio web estaba tan vacío, solo teníamos el campo de entrada para buscar la ciudad. Tuve esta idea, vamos a poner un planeta que represente al mundo y el planeta puede animarse. Así que la idea es que cuando comienzas a escribir, se anima un poco. Si haces clic, gira. Y también tienes los ojos y la boca que se animan con el tiempo de espera establecido. Así que para hacer esta animación, una vez más, estoy usando Framer Motion. También uso useMotion. Así que si hago clic de nuevo, la animación no ocurre, no gira porque creo que es demasiado. Así que en este caso doy esta opción para mejorar la accesibilidad para algunos usuarios. Para hacer eso, tengo este componente demo. Y en ese componente, tengo tres estados. Buscando, búsqueda completa. Básicamente, cuando está buscando, la idea es que vaya de 0 a 5, 0, también hay rotación, menos 0.

6. Animación del Componente de Búsqueda

Short description:

Y cuando la búsqueda se completa, gira completamente. Y cuando no está buscando, gira en 0. Y para los ojos y la boca, simplemente animo la escala y. Va desde 1 hasta 0.1 y luego vuelve a 1. La animación se repite varias veces, con un retraso de 3 segundos al cargar el componente y cada 5 segundos después. Las animaciones funcionales, como los ejemplos del botón, el timbre y la barra de navegación, proporcionan retroalimentación al usuario. Utilice microinteracciones simples para indicar la capacidad de hacer clic y representar el mundo real. Evite abrumar la interfaz de usuario con animaciones excesivas.

Y cuando la búsqueda se completa, gira completamente. Y cuando no está buscando, gira en 0. Y estoy usando el useEffect solo para verificar los estados que provienen del componente principal. Entonces, si está buscando, tengo otro estado llamado animación del planeta. Y si está buscando, establezco la variante como búsqueda completa o no está buscando. Y eso es básicamente lo que sucede.

Y luego, para los ojos y la boca, no necesito usar ninguna variante. Básicamente, estoy animando la escala y. Así que básicamente, va desde 1. Este es un ejemplo de la boca. La boca está completamente abierta. Luego se cierra a 0.1. Y luego vuelve a 1. Estoy diciendo que quiero repetir esta animación varias veces, infinitas veces. La dirección es 0.3. Imaginemos si fuera 4. Tomaría algún tiempo. Así que pongamos 0.3. Cuando cargamos este componente, hay un retraso de 3 segundos. Y luego, cada 5 segundos, la animación ocurre nuevamente. Y este es el ejemplo. Y tengo un minuto.

Y estos son los pensamientos finales de las animaciones que mostré. Deberías usar esas animaciones funcionales, como la que mostré con el botón, el timbre y esa barra de navegación, como una forma de proporcionar retroalimentación al usuario. Entonces, cuando tienes este tipo de animaciones, la idea es que no necesitas hacer demasiado. Solo usa microinteracciones, muy simples, solo para indicar, por ejemplo, en un botón, que el botón se puede hacer clic, o intenta hacer algo que represente el mundo real. Entonces, cuando tienes muchos elementos en una página, no intentes hacer y tener muchas animaciones. Imagina si tuviera el planeta, el corazón y muchas cosas sucediendo al mismo tiempo. Sería demasiado. Pero cuando tu interfaz de usuario no tiene demasiados elementos, como en el caso de '¿Hay Uber en?', solo tienes un texto, un campo de entrada de texto o una búsqueda.

QnA

Animaciones Frenéticas y Preguntas y Respuestas

Short description:

En las animaciones frenéticas, verifica si el usuario tiene la opción de reducir el movimiento habilitada. Utiliza consultas de medios o hooks en bibliotecas como Frame o Motion. Gracias a todos. Gracias, Eva. Ahora, pasemos a las preguntas y respuestas. Tenemos preguntas en Slido sobre cómo documentar animaciones en bibliotecas de patrones o sistemas de diseño.

En ese caso, tal vez puedas tener algo sucediendo, una animación frenética que represente tu marca, por ejemplo. Y cuando tienes esas animaciones frenéticas, como el timbre sonando o algo que sea demasiado, no olvides verificar si el usuario tiene la opción de reducir el movimiento habilitada. Puedes hacerlo con una consulta de medios, con CSS puro. O si usas una biblioteca como Frame o Motion, tienes ese hook. No olvides esto. Es muy importante para la accesibilidad.

Y eso fue la charla. Gracias a todos. Muchas gracias, Eva. ¿Te gustaría acompañarme en una breve sesión de preguntas y respuestas? Vamos a restablecer esa mesa. Alguien la movió. Excelente. Muchas gracias, Eva. Me pareció realmente interesante y perspicaz.

Ahora, tenemos algunas preguntas en Slido. Y para aquellos de ustedes que se han unido a esta sala desde la pequeña introducción, en esta pista, vamos a hacer preguntas usando el mismo enlace de Slido que antes. Así que eso es sli.do en tu navegador. Y puedes usar el código 0212, que es la fecha, para ingresar al evento. Hay un par de pistas. Asegúrate de elegir la pista mnemotécnica para hacer preguntas en esta pista. Y idealmente, si puedes incluir el nombre del orador en tu pregunta, sería genial. Aquellos de ustedes que enviaron preguntas y no lo hicieron, lo hice por ustedes. Así que no se preocupen. Pero de manera continua, sería muy útil. Con eso en mente, en realidad tenemos algunas preguntas que se plantearon durante tu charla. La primera es, ¿tienes alguna idea sobre cómo documentar animaciones en bibliotecas de patrones o sistemas de diseño? Sí. Creo, y esto es algo que estamos tratando de hacer ahora con Elastic UI. En Elastic UI, cuando lo presento, digo que es un sistema de diseño. Pero en realidad, aún no es un sistema de diseño real. Es solo una biblioteca, porque nos faltan algunas cosas.

Directrices de Diseño y Uso de Animaciones

Short description:

Nos faltan directrices de diseño y directrices de animación, que son importantes para mantener la consistencia en el desarrollo de aplicaciones. Es necesario establecer directrices para evitar diferentes formas de implementar animaciones. La opción preferida de reducción de movimiento no es lo mismo que sin movimiento, y determinar cuándo las animaciones son excesivas puede ser un desafío. Las pruebas de usuario y la colaboración con especialistas en accesibilidad pueden ayudar a determinar la necesidad de animaciones en diferentes componentes. Si bien se prefiere CSS, se pueden utilizar bibliotecas como Frame-O-Motion cuando CSS se vuelve complejo.

Nos faltan algunas directrices de design. Tampoco tenemos directrices de animations. Y creo que es realmente importante, porque cuando no creas esas directrices, entonces tu aplicación comenzará a tener muchas formas diferentes de hacer las cosas. Así que imagina que tal vez implementes un botón, y ya viene, porque es un design system. Ya tiene animación. Pero luego, si en una aplicación, si tienen que implementar un botón personalizado o un fly out o un pop over o algo, pueden usar cualquier tipo de animación. Y luego comenzaremos a tener cosas extrañas, creo. Demasiadas diferencias.

Sí, absolutamente. Como cualquier componente en un design system. Una pregunta, que en realidad se ha hecho un par de veces de formas ligeramente diferentes, es que la opción preferida de reducción de movimiento no prefiere la falta de movimiento. Pero ¿cómo sabemos cuándo es demasiado? Eso es. Eso también es algo en Elastic UI, tenemos una regla que hacemos para todas las animations y todas las transiciones. Básicamente, tenemos una función que envolvemos. También estamos usando motion. Y usamos eso para envolver todas las animations. Y básicamente la animación no sucede. A veces creo que probablemente estas micro animations como botones, no hacen ninguna diferencia. Creo que tal vez no necesitamos hacer eso. Pero algunas de estas cosas las seguimos aprendiendo. Y probablemente en el futuro podamos hacer algunas pruebas de usuario. Tenemos a alguien especializado en accessibility con quien podemos hablar. Y tal vez podamos averiguar si los botones realmente necesitan tener esto. O simplemente, no sé, modelos, fly outs, tal vez esos grandes componentes que aparecen deslizándose, deslizándose hacia afuera, este tipo de animations, tal vez solo esos componentes lo necesiten. Pero en realidad creo que cada sistema de design tiene sus propias reglas. Si estuviera tomando mis propias decisiones, pero es una decisión de equipo, tal vez no envolvería estas micro interacciones.

Excelente. Y supongo que con todo lo relacionado con la accessibility, no solo las animations, las pruebas de usuario son realmente clave para comprender las mejores prácticas. Excelente. ¿Es mejor idea usar bibliotecas como Frame-O-Motion o simplemente CSS básico o vanilla? Mi regla es, siempre trato de usar primero CSS, solo cuando tengo dificultades y comienzo a ver, como, esto se está volviendo complejo. Tengo que inyectar esta clase y hacer esto y aquello.

Animaciones CSS y Manejo de Emociones Negativas

Short description:

Como diseñador, prefiero usar CSS en lugar de JavaScript complicado. Las animaciones de transformación pueden causar problemas de rendimiento, especialmente dentro de componentes flexibles. Shakra UI evita el uso de animaciones de transformación. Ya no admitimos IE 11 y recomendamos probar las animaciones para un rendimiento óptimo. Para acceder al artículo e información de demostración, visita mi sitio web MewkiMew. Elegí el nombre MewkiMew porque mi nombre real ya estaba tomado. Al representar emociones negativas, considera utilizar diferentes estados de ánimo en ilustraciones o animaciones.

Y también soy diseñador, así que mis habilidades de JavaScript no son tan buenas. Y a veces, cuando empiezo a complicar las cosas, simplemente uso CSS. Eso es lo que sé. Es mejor usar una biblioteca, porque ya se encargan de algunas partes del código. Y es entonces cuando tomo esa decisión. Tiene todo el sentido del mundo.

¿Existen, esto puede ser un poco profundo en conocimientos, pero según tu conocimiento, ¿hay alguna propiedad de CSS que consideres que es mejor no animar por razones de rendimiento o accesibilidad? Tuvimos muchos problemas, de hecho, con transform. Esos tipos de animaciones de transformación, a veces el rendimiento no es bueno, especialmente cuando está dentro de componentes flexibles y otros componentes. Tuvimos algunos problemas en algunas aplicaciones como Kibana. Y tal vez, no sé, tal vez noté que, en Shakra UI, en realidad estaba usando Shakra UI para las demostraciones. Solo tienen estas animaciones cambiando el color de fondo. No hacen que este botón suba y use esta transformación. Entonces, una vez más, creo que cuando estamos implementando y comenzamos a tener muchos problemas con esas animaciones y transiciones de transformación, tal vez deberíamos considerar eliminarlas. Y también, ¿qué estás admitiendo? Actualmente no admitimos más IE 11. Siempre hacemos algunas pruebas y no tenemos ningún problema con el tipo de animaciones que estamos usando. Pero creo que, una vez más, es probar y ver qué funciona mejor.

Genial. Creo que respondiste esto durante tu charla, pero solo para aclarar, ¿cómo puede acceder nuestra querida audiencia hoy al artículo con toda la información que utilizaste en tu demostración? Puedes ir a mi sitio web que tiene este nombre, MewkiMew. Y el nombre MewkiMew, es porque tenía este gato. Y Elisabet Oliva, mi nombre real, ya estaba tomado. Así que voy a comprar este dominio llamado MewkiMew. Y sigue hasta hoy. Creo que en ese momento tenía, no sé, 18 años cuando hice eso. Sí, pero puedes ir allí. Voy a publicar tal vez a las 5 PM. Sí, me preguntaba de dónde venía tu nombre de usuario. Realmente me gusta esa historia. Probablemente tengamos tiempo para solo una o dos más. ¿Deberíamos abstenernos de tener animaciones para emociones negativas? ¿O cómo sugieres manejar esto? Sí, en realidad tengo este proyecto, React Huawei, donde tengo componentes que son como ilustraciones, y tienen diferentes estados de ánimo. Entonces, cuando es un estado de error, puedes cambiar el estado de ánimo del planeta o el helado que es una ilustración, a una cara triste.

Diseño de Páginas de Error 404 y Conclusión

Short description:

Al diseñar una página de error 404, considera utilizar una ilustración que transmita el mensaje de página no encontrada con un toque de ternura o fantasía. A medida que concluye la charla, el orador expresa gratitud a la audiencia, los organizadores y a sí mismo por brindar una excelente charla.

Entonces creo que, sí, cuando tienes una página de error 404, en lugar de simplemente mostrar 'página no encontrada', tal vez puedas mostrar 'página no encontrada' y tener una ilustración que esté llorando. Es negativo, pero al mismo tiempo, puede ser tierno. Y tal vez... O fantasioso. Sí. Sí.

Bien, creo que ya casi se acaba el tiempo. Y siento que las preguntas que aún se plantean son similares a las preguntas que ya hemos respondido. Así que voy a aprovechar esta oportunidad para, en nombre de toda nuestra audiencia, los organizadores, y yo mismo, dar un enorme, enorme agradecimiento por brindar una charla tan excelente. Demos un gran aplauso. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias. Gracias.

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 Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
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 Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
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