Awesómico CSS 🔥🔥

Hoy os quiero contar el porqué de este repositorio. Sí, aunque no lo creas, no es solo trolear sin sentido, tiene su explicación. ¡Acompáñame!


TL;DR:

Creo un efecto psychedelic-fun con javascript y css en este proyecto web: https://github.com/baumannzone/awesomico-css

Todo empezó con una mención en alguna parte de un proyecto de Github por parte de la gente que está haciendo el curso de #javascript con Ulises Gascón. Me había llegado una notificación al correo, me habían mencionado en un repo del cual no tenia ni idea de que iba. 
Yo, que no entendía de que iba la cosa, no le di más importancia y me olvide de ello.

Al día siguiente, me picó la curiosidad, así que me baje el repo, abrí la carpeta correspondiente, revisé el código y esto fue lo que me encontré:

index.html

Un ejercicio en el que estaban usando la API de Github para traer los datos de un usuario y pintarlos en pantalla. Como veis, algo sencillo.

En seguida pensé ¡esto no se puede quedar así!. Y me puse manos a la obra. Copié el código, abrí mi editor de texto, y empecé a pensar que era lo que le iba a cambiar.

Quería centrarlo, hacerlo responsive, cambiarle el color de fondo y de texto, la tipografía, etc. Algo simple pero elegante 👌. Le metí mano al CSS y esto fue lo que quedó:

no es la pera, pero ha mejorado*

Antes de continuar, quiero dejar bien claro que no se han herido unicornios durante la realización de este proyectito personal. 🙏

Todavía no me convencía, así que seguía dándole vueltas a la cabeza. En un momento, a modo de broma, me dije: ¡Quiero que mi foto gire cuando pasen el ratón por encima!
Esta vez tuve que tocar el javascript, no solo el CSS. Añadí el código necesario, pero seguía sintiendo que le faltaba algo.. ¿más animaciones tal vez?

🦄 Ahora es cuando empieza la magia 🦄

Aquí me vine arriba literalmente, y pensé. Hay que animar el texto también. Vamos a crear una clase que anime todas las etiquetas <p>. Listo!

¿Ahora qué? Pues que el fondo cambie de color. (Hablamos siempre de pasar ratón por encima de la cajita gris). Le metí 3 colores, pero vi que no provocaba efectos psicodelicos🤡, y decidí meterle 10. Que cambien a toda pastilla.

¿Qué más? Un poco de músiquita buena. No valía cualquier música, quería algo de d&b pero con un toque personal. Encontré esto:

Super Mario Bros. [DUBSTEP REMIX]

Lo edité, lo recorté y lo añadí. Ya me empezaba a gustar un poco más.

Finalmente, me di cuenta que para ser molón molón, cada párrafo necesitaba tener su propia animación. A todo esto, le agregué un pequeño texto junto con unos emojis y ya estaba listo para servir: https://baumannzone.github.io/awesomico-css/🎈

No hay que olvidarse de las issues del repo awesómico-css. Me gustaría que, si tienes alguna idea troll, contribuyas. Aquí un ejemplo:

Por supuesto, todos los commits deben llevar un emoji, o se serán rechazados. Tengo que hacer el “Contribution guidelines” para dejar esto claro. Y para el futuro me gustaría automatizar esta tarea con un githook o algo similar.

emojis ftw!

¡Y recuerda seguir al pie de la letra las instrucciones que se encuentran en el README!


Y ahora en serio, hacer esto me ha valido para recordar y mejorar mis skills con CSS. Que lo he hecho en un pis-pas, que el código es mejorable, que se trata de aprender y de disfrutar, y que estoy orgulloso de ello.

¡Y esto es todo! Espero vuestras issues y contribuciones trolls en el repo. 
Si mientras leías esto o al ver la demo te ha salido al menos una sonrisa, déjame unos claps 👏 aquí en medium, un follow en twitter, un like ❤️en github, un comentario aquí abajo.. lo que sea, pero deja algo 😉.

Si has llegado hasta aquí…¡Gracias por leerme! 
¡Nos vemos en el próximo post o por las redes y felices fiestas!

Like what you read? Give Jorge Baumann a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.