Voy a empezar por el principio porque os quiero enseñar una biblioteca muy chula, que es esta, React Magic Motion, que bueno, si os gusta le podéis dar un like.
Pero bueno, ¿de qué trata esto? Esto es una biblioteca que cada vez está más de moda, no es la primera de este estilo, ya ha habido unas cuantas, por ejemplo, esta AutoAnimate, que también os recomiendo, es de la gente de FormKit, esta está muy chula y además funciona para React, para Vue, para Preact, Solid, Svelte, Angular, incluso para JavaScript nativo.
¿Y la idea qué es? Pues la idea es que con muy pocas líneas de código, automáticamente te añada animaciones a tu componente, ¿vale? Y está muy chulo, está muy chulo.
Ahora bien, hay una que es específicamente para React, que también tiene bastante buena pinta, que es nueva, que se llama React Magic Motion, literalmente anima mágicamente los componentes.
¿Quieres ver unos ejemplos? Porque la verdad es que es increíble. Mira, un to-do list, fíjate, pum, ¿veis que se va animando? Y cuando añades, añades aquí, le das al Enter y se añade también, incluso el shuffle.
Y esto son dos líneas de código, bueno, tres, porque tienes que importar la biblioteca y lo único que haces es envolver todo tu componente con Magic Motion y ya automáticamente detecta
cuando hay un nuevo elemento o un elemento diferente y le hace la animación. Pero tienes un montón de cosas. El acordeón, este acordeón, igual, también animado automáticamente.
Un slider que se pueda colapsar, también animado automáticamente. Mira, un menú contextual para expandir. Esto está hecho automáticamente también, o sea, es que es espectacular.
¿Lo ves? Y aquí sí que le podéis poner props, porque ya veis que ahí se puede personalizar, pero que es absurdamente fácil.
O sea, ya todas estas animaciones las está haciendo. Incluso, mira, para cambiar esto, ¿veis esta animación? También lo está haciendo.
Para búsquedas, si estáis buscando aquí, ¿veis? Para animar la búsqueda, también. Para tabs, ¿veis el hover? ¿Cómo se va moviendo? Pues también.
O sea, brutal, brutal. Está muy chula, os la recomiendo un montón, porque en un momento podéis animar vuestra querida aplicación.
¿Es afectado el performance? A ver, muchas veces estas bibliotecas lo que hacen es animar a través de CSS, lo cual no está mal.
O sea, que el rendimiento no es tan malo. Lo que sí que puede ser interesante es ir a Vandelfobia.
Vandelfobia, que me encanta esta biblioteca, este recurso. Y aquí buscar React Magic Motion y ver cuánto es lo que realmente esto ocupa en vuestro bundle.
En este caso, uy, 45 es bastante, ¿eh? 45 es bastante.
Hay veces, mira, utiliza Framer Motion, que está bastante bien de rendimiento.
Claro, es que Framer Motion es muy top, es muy, muy tocho.
45 cas es bastante, ¿eh? La verdad. O sea, que tenerlo en cuenta.
Pero yo siempre utilizo Vandelfobia antes de meter una dependencia, justamente por esto, para hacerme un poco la idea de cuánto va a ocupar esta dependencia en mi proyecto.
Dicho esto de la dependencia, ojo, que vamos a hacer un repaso también a lo que se viene esta semana.
Mañana hacemos un especial Halloween, y es que podéis ir a Halloween.deb y podéis enviarme vuestra historia de terror en programación, ¿vale?
Le dais aquí enviar mensaje de voz y podéis grabar un mensaje de voz donde expliquéis en menos de dos minutos, y que se escuche bien, nada de ruido de fondo, nada de cosas raras, ¿vale?
Enviáis un mensaje de voz con la historia de terror de programación que os haya pasado en vuestra vida, que sea la peor y la queráis compartir.
Yo que sé, aquel día que borrasteis la base de datos, el día que insultaste al jefe y resulta que lo pusiste en copia.
Yo que sé, un día que, no sé, que llegaste tarde al trabajo y eras tú el que tenías que hacer el despliegue y perdiste millones de euros.
Lo que sea, lo que sea. Yo tengo unas cuantas que explicaré, obviamente, pero quiero saber las tuyas y las mejores.
Así que, nada, podéis explicar vuestra historia de terror en programación, le dais aquí enviar mensaje de voz, y aquí lo único que le tenéis que dar es start recording y enviar es un mensaje.
Tal que así, mira, le dais aquí a permitir, y este sería el mensaje de voz para explicar la historia más truculenta del mundo.
Y nada, le dais stop, aquí lo podéis enviar y ya está.
Y este sería el mensaje, ¿ves? Y se graba. Los mejores los vamos a poner, los mejores audios los pondremos y los comentaremos.
Y otra cosa que sepáis que el miércoles empezamos con Codenver.
Si no sabes lo que es Codenver, son retos de programación como un juego interactivo que hacemos que puedes resolverlo con cualquier lenguaje de programación.
Lo puedes hacer con JavaScript, con Python, con Java, con lo que tú quieras, ¿vale?
Y es como una terminal y empieza en dos días, cero horas y 45 minutos.
El miércoles tendréis el primer reto, así que no se lo pierdan que está súper chulo y seguro que lo pasáis súper bien, súper bien, ¿vale?
Más cositas. El miércoles tenemos curso de CSS, os voy a explicar, GRID desde cero.
Y el jueves empezamos y arrancamos con el curso de NextGS 14.
Así que ahí tenéis lo que vamos a hacer esta semana, todos los directos.
Os vais al Discord y ahí os podéis apuntar el que queráis.
Os podéis ir aquí a eventos, le dais aquí eventos y ahí tenéis todos los eventos.
¿Cómo te da tiempo de hacer tanto? ¿No miras Twitch? No miro Twitch. Yo creo Twitch.
No, no, no miro Twitch. Yo hago Twitch directamente.
No me da tiempo de mirar Twitch, la verdad. Muy poco, muy poco. O sea, no me da la vida, no me da la vida.