#LaVidaModerna es...

¿De qué va este proyecto?

Empezó como una tontería. En el antiguo programa de radio de la SER, La Vida Moderna, crearon un hashtag en Twitter, #LaVidaModerna es, donde creabas frases que empezaran con ese hashtag y que tuvieran la ironía, sarcasmo y sátira de lo que puede llegar a ser (es) la vida (moderna).

Y aquí te quiero contar un poco cómo ha sido el detrás de cámaras.

¿Cómo y por qué he hecho lo que he hecho?

Todo lo que ves, tiene su sentido. No me gusta dejar las cosas al azar.

Diseño

He intentado mantener en todo momento el espíritu 'keep it cutre' del programa, añadiendo algunos elementos sin perder la buena UX:

• Para hacer la página he seguido el estilo Neobrutalism.

  Me parecía un diseño sencillo y descuidado que podría servir para el proyecto.

• Las páginas las he dividido por Temporadas (T), y la Home (Todas), donde están todas las frases recopiladas.

  Vi necesario en la Home, hacer una mezcla aleatoria a la hora de hacer el deploy a producción pero no cada vez que un usuario entrase para no añadir complejidad.

• Para resolver el problema de "ver siempre lo mismo si no hago un deploy" y no añadir JavaScript innecesario, creé un botón para mezclar.

  Funciona con el algoritmo de "shuffle" de Fisher-Yates y así crear siempre una sensación de novedad en el usuario.

  

  Hay 739 frases, lo último que quiero es obligar a hacer un scroll infinito si quieren ver algo nuevo.

• La fuente intenté que fuera Comic Sans como fuente cutre por antonomasia, pero al ser de pago, tuve que usar la "hermana" gratuita de Google, Comic Neue.
• El color, por supuesto, tenía que ser el Rosa Moderdonia: #f9138e, copiado de la bandera.
• El logo debía ser la bandera.
• Para mantener un poco más el espíritu "Keep it cutre", las tarjetas debían estar como cuadros mal colgados de manera aleatoria entre -rotation-3 y rotation-3.

Herramientas que he usado:

• Astro como framework para construir la web con páginas estáticas. No hacía falta más.
• Tailwind como framework de CSS para ir más rápido diseñando.
• Lovable para coger ideas para la UI.
• Cursor como editor para ir más rápido programando y ayudarme a hacer algunas cosas más complejas.
• Twitter y YouTube como fuentes para coger y buscar las frases.

Cosas interesantes que he añadido

Como Growth, me gusta tenerlo todo atado y tener algún sistema de adquisición y retención. Aunque este solo era para divertirme pero, siempre está la mentalidad.

• SEO

  Soy un friki del SEO y se la importancia que puede llegar a tener unos buenos OpenGraph o una buena tarjeta de Twitter, así que decidí invertirle tiempo a ello con tal de que cada vez que compartiera una la web o alguna página se viera de la siguiente manera:

  

  E incluso pensé en la página 404 que para mí, es una de las más divertidas y donde aún habiendo un error, puedes no perder al usuario y hacer que se enganche de nuevo.

  
• "Viralidad"
  Quería añadir un par de botones para que la gente pudiera compartir tanto en Twitter como en Instagram pero lo vi demasiado elaborado y simplemente coloqué un botón que incentiva a hacer un pantallazo.

  Se difumina el fondo y aparece la marca como una especie de "Loop Viral" de contacto casual.

  
• Monetización

  Este proyecto es totalmente gratis y de código abierto pero yo tengo que comer, así que puse un Buy Me A Coffee para quien quiera apoyar al proyecto 😁.