Mira, mira, mira, cuando pasa por encima, veis los meteoros y tal.
Os voy a enseñar una cosa que es de pago, pero me ha parecido uno de los mejores catálogos de componentes que he visto en mucho tiempo.
Se llama Lunar UI, es un catálogo de componentes para Vue, para Naxx, está hecho con Tailwind CSS y fíjate que es de pago, ¿vale?
Es de pago, son 59 dólares y es de por vida.
Pero, ¿por qué te enseñaría algo de pago? Porque amigos y amigas, este catálogo de componentes está como para lamerlo de una forma muy salvaje.
Es de Vue, pero que sepáis que van a sacar una versión de React.
¿Veis? De React version se lanzará pronto, o sea que también funcionará para React, pero ahora mismo solo tiene soporte para Vue 3 y Naxx.
Pero he visto algunos de los componentes que tienen y es que, mira, este es uno, por ejemplo.
Fijaos cómo sigue la estela, el borde, cómo sigue la estela.
Fijaos cómo sigue la estela, súper bonito. Además tienes el código aquí disponible como para copiar y pegar.
Claro, no tienes el código del componente, sino el código del ejemplo.
Te ponen copiar y pegar y todo esto, lo cual está bastante bien, ¿eh?
Pero es que hay un montón más. Mira, este de Detail, es que está muy bien, muy, muy, muy bien parido.
El de Marquis, bueno, este no me parece tan exagerado, pero bueno, está bien.
Magnetics Text, mira esto.
¡Uuuh! Mira, mira, mira, ¿eh?
Cuando pasa por encima y está muy bien, funciona como muy fino, muy fino.
Text Reveal, esto cuando haces scroll, por ejemplo.
Mira, fijaos qué chulo que se queda el texto y se va como adaptando.
En cambio, el scroll sigue, pero el texto se queda fijo y se va iluminando.
Animaciones de scroll, ¿vale?
Con animaciones de scroll de ir cambiando.
Text Highlighter.
Este también, este también está muy chulo.
Scroll Reveal, para que vayan apareciendo cosas.
Con una animación bastante chula, que esta normalmente la utilizáis mucho en vuestros porfolios.
Fíjate aquí que va entre uno y otro.
Esa animación.
Hostia, qué susto me ha dado el perro.
Que está teniendo pesadillas o algo.
¿Qué pasa? Está bien.
No te enfades.
Ya sé que es de View, pero va a salir en React también.
Mira, también tiene patrones de fondo.
Este está muy chulo.
Este está muy chulo.
Mira, Dot Pattern.
Este también está súper chulo.
Y el Simple Grid.
Bueno, creo que le faltan todavía.
O sea, me parece como que le faltan más componentes por hacer.
Porque pagar 59 dólares por esto, pues igual es un poco exagerado.
Pero seguro que van saliendo y que saldrán una versión de React.
No es como tal una librería de componentes.
De hecho, lo pone aquí, ¿eh?
Si os fijáis, dice, this is not a component library.
Y no viene con un paquete de MPM.
Y es que esto es una moda que estamos viendo cada vez más por culpa o gracias por ShadCN.
ShadCN al final es lo que tiene, ¿no?
Que tienes un montón de componentes.
Pero en realidad los componentes, fijaos, es código que es de copiar y pegar.
Que sí, que te puedes instalar esto.
Pero que al final la idea es que te los copies, que te los pegues y tal.
Antes solo tenía la versión manual.
Pero mucha gente se quejó y le ha añadido como una línea de comandos para automatizar esto.
Que es algo bastante parecido ya a tener su propio paquete de MPM.
Yo no entiendo la verdad.
Entonces, ¿cuál es exactamente el punto?
No sé.
No sé cómo lo veis vosotros.
No sé si le veis algún sentido al hecho de decir, no, voy a evitar tener un componente de MPM justamente para que te lo copies.
Pero te voy a dar una línea de comandos para generarte el componente.
Es un poco raro.
Yo para esto, la verdad, pues ya vería un catálogo de componentes.
Esa es mi opinión, ¿eh?
Os voy a enseñar otro que está bastante chulo que se llama Magic UI.
Este es de React.
Y de hecho, os voy a mencionar una cosa.
Este lo he utilizado yo para algunos componentes de la Devslic.
¿Veis?
Los meteoros y tal.
Y este también está bastante chulo, pero le faltan bastantes componentes.
Yo es que lo pillé en su día porque estaba de mega oferta.
Ahora está por 59.
Decía, mira, fijaos que según él va a poner más de 100 componentes.
Y la idea es que vaya a poner más.
Pero veo que es una cosa que se está poniendo muy de moda, que la gente hace como componentes que son muy chulos y los vende.
Lo digo porque muchas veces dices, ¿cómo puedo ganar dinero?
Pues ahí tienes una idea.
Podrías crear componentes con Tailwind que sean muy chulos.
Y Tailwind, como es tanto de copiar y pegar, pues mucha gente lo está haciendo.
Esta página, que se llama Gidness.
Fijaos en esta página, qué bonita es.
Gidness.
Que tiene un montón de vídeos, que ya estaba la gente quejando, se estaba quejando, diciendo,
ay, no sé qué, que esto es un vídeo, no es HTML.
Pero bueno, la página es hermosa.
Es súper bonita.
Fijaos en estas cajitas aquí.
Está súper, súper bonito.
El tema este es que, fijaos que aquí podríais ver alguna cosa que digáis, oye, pues me llama un montón la atención esta caja.
Pues si conseguís hacer esta caja, la encapsuláis en un componente y hacéis unos cuantos componentes más y los revendéis, yo creo que podéis ganaros la vida.
Mira, aquí me ha pasado una feral también.
Esta también está súper bonita.
Mira, esto de crear poco a poco el texto con el scroll.
Este tipo de hover que te sigue el ratón.
Se están poniendo muy, muy de moda.
Y al final, yo creo, esto también, esto también está, todas, todas se parecen mucho.
Y es que al final, si esto está de moda y tú creas un montón de catálogos de componentes que te permitan hacer esta página súper rápido,
como por ejemplo, pues este menú.
Imagínate, un componente para que puedas hacer este menú con este efecto.
Pues al final te van a pagar, te van a pagar dinerito.
Así que ya sabéis lo que tenéis que hacer, amigos.
Mira, esta página que pasa a Feral es como un montón de páginas con modo oscuro para que te inspires.
La verdad es que cada vez te están haciendo páginas más bonitas.
Cada vez me sorprende cuando la gente minimiza el desarrollo web.
Y dices, madre mía, pero si es que cada vez el desarrollo web se está convirtiendo como en un arte.
Cago en la leche, ¿sabes?
Que tienes que tener un montón de cosas.
Ya no solo en cuenta temas de experiencia del usuario, performance y cosas así.
Sino el hecho de hacerla bonita, hacerla minimalista, bonita a la vez.
Tiene un montón de...
Hacerla sorprendente.
Es brutal, es brutal.
Esta página está muy chula.
Ahora, si queréis tener un montón de ideas de cómo hacer diseños con vento, con las columnas estas,
esta página que la ha pasado a Feral está muy bien porque tienes un montón de ejemplos de cómo hacerlo.
Ya veis que lo que se suele hacer mucho es mezclar texto con una imagen,
que además la imagen no tiene nada de padding, ¿ves?
Que está como ahí a tope, por ejemplo.
O imagen, incluso, mira, esta es de Apple.
Apple también lo utiliza un montón.
O incluso imágenes o que sobresalen o vídeos también.
También lo hacen mucho con vídeos.
Este, por ejemplo, este es de Vercel.
Vercel también lo utiliza un montón.
Súper bonitos.
Si tenéis que hacer un porfolio, igual podéis echarle un vistazo.
De hecho, ya hemos visto algún porfolio de gente que lo ha utilizado utilizando el vento
y le ha quedado bastante bonito.
Bastante bonito.
Debes desarrollarlo y eso toma tiempo.
Yo digo que está subvalorado de desarrollo web.
Bueno, yo creo que siempre se subvalora cualquier cosa que no conozcas.
O sea, yo creo que mucha gente que no conoce el backend lo subvalora, lo infravalora, mejor dicho.
O gente que no conoce DevOps lo infravalora, ¿no?
Porque lo que nosotros podamos tener en la cabeza a lo mejor no es el trabajo real que tiene en su día a día esa persona.
Y también lo mismo, obviamente, pasa con el frontend, que mucha gente lo infravalora,
pero porque realmente no entiende el trabajo que hay detrás.
Yo sé que hay mucha gente que se cree que es pintar botones.
De hecho, puse esto, para que os hagáis una idea, lo puse aquí en Twitter.
Dice, ser desarrollado web es pintar dos botones.
Los botones.
Esto sí que es desarrollo, pero no todo es así, pero ni de lejos.
¿Ves? Es como, no, tengo que meter la puya de que realmente, claro, no todo es así, es verdad,
pero hay otro tipo de retos que tampoco, aunque no lo hagas tan bonito, otros retos habrá.
Desde el responsive, que tenga buena experiencia de usuario, de rendimiento, de accesibilidad,
que a veces no tiene por qué verse tan bonito, pero eso no significa que no sea difícil, ¿no?
También hacía por aquí, son vídeos, son vídeos, ya está, son vídeos, que son vídeos.
A ver, obviamente esta página, son vídeos, esta parte de aquí, pero el tema de cómo se integra con la página web,
a ver, son vídeos, pero tío, si ves esto, esto no son vídeos.
Todo esto, todo esto, esto es HTML, ¿sabes? Hay un montón de trabajo aquí de desarrollo web.
Esto lo habrán hecho, esto será un vídeo, lo habrán hecho un vídeo, ¿vale?
Pero el hecho de que todo se integre en una página web, que quede como de forma nativa,
por ejemplo esto, o sea, me parece súper, súper bonito.
No sé, este tipo de cosas yo no las llego a entender muy bien.