A veces nos complicamos mucho la vida...

Como developer relativamente nueva y sin mucho conocimiento o pasión previa por la programación tiendo a preocuparme mucho por si lo que hago está bien hecho, no sólo que funcione sino que la solución sea la correcta. Los conceptos antes desconocidos para mí de "buenas prácticas" y "patrones de diseño" ahora siempre se mantienen en la parte de atrás de mi cabeza como una sombra dictadora acechante.

Esto puede sonar bonito, pero mal aplicado puede tener sus consecuencias negativas, como la historia que relataré a continuación.

Debido a que firmé un contrato de confidencialidad, el contexto será ligeramente cambiado, pero la esencia de lo sucedido es la misma.

Digamos que hace un par de semanas tenía una nueva historia que trataba de poner un mensaje en la página que dijera "hay perritos" si actualmente se contaba con perritos y al colocar el mouse sobre el mensaje debía salir un pop over con un listado de los perritos, el mensaje en este caso debía estar subrayado. En caso de no haber perritos pero sí gatitos, el mensaje simplemente diría "No hay perritos pero sí otros animales", en esta situación no sucedería nada al pasar el mouse por encima y el mensaje estaría en negritas en vez de subrayado. Si no había nada entonces no debería salir ningún mensaje.

Entonces me puse a trabajar, como yo traía todo el plan de hacer el código más óptimo según yo, mi idea era que la condición, ya que lo que principalmente cambiaba era el mensaje, debería estar únicamente sobre el mensaje y no repetir nada de lo demás.

Esto se vio medianamente frustrado por el cambio de tener que tener en una condición el mensaje subrayado y en otra el mensaje en negritas, así que la primera versión del template quedó algo así:

<div id="js-hook">
   <div class="pets">
      <div class="dogs-popOver">{dog list}<div class="close-pop-    over">X</div></div>
      {#if weHaveDogs}
         <div class="dog-tag-img"></div>
         we have dogs
      {#else}
         <b>no dogs but cats</b>
      {/#if}
   </div>
</div>

A partir de eso trabajé en lo demás.

Todavía hacían falta 2 cosas, que el div de pop over solamente saliera si el mensaje era que había perros y que ese mensaje estuviera subrayado. Como ambas cosas estaban dentro de un div común se me ocurrió asignar dos clases nuevas desde el javascript.

Funcionó, quedo listo, todo bonito y me olvidé de la historia, pasa el tiempo y hace un par de días me regresan un montón de bugs, dos de los cuales se resolverían si en vez de poner condiciones en el javascript las pudiera poner directamente en el template, ya que el archivo sólo se cargaba una vez y había ocasiones en la que se hacían cambios en la página y dejaba de funcionar.

Así que le pregunté a un experto que respeto sobre qué podía hacer, y al ver mi implementación me dijo "no me gusta como lo hiciste", me muestra otro archivo desconocido y gigante y me dice que mejor creara mi propio componente UI como los de ese archivo.

Bluffié y seguí con mi vida, me puse a revisar dicho archivo sin entender nada, era de esas líneas de código en las que las variables son puras letras y parece que estás leyendo lenguaje alien. Estuve como 4 horas decifrándolo pero por más que le movía cosas no me sonaba a que fuera lo que debía hacer. No podía ser tan complicado.

Así que recordé algo que decía mi maestro de actuación de la UNM y que ha sido uno de los mejores consejos en mi vida:

TRY SOFTER

Regresé a la template, me quedé "no puede ser", y la rearmé.
La nueva versión quedó algo así:

<div id="js-hook">
   {#if weHaveDogs}
      <div class="pets petsUnderlined">
        <div class="dogs-popOver">{doglist}
        <div class="close-pop-over">X</div>
      </div>
      <div class="dogs-tag-img"></div>
         we have dogs
      </div>
   {#else}
      <div class="pets">
         <b>no dogs only cats</b>
      </div>
   {/#if}
</div>

Hice un chorro de complicaciones raras solamente por mi confusión inicial de querer "minimizar" código, hice más líneas en un lado por haber querido hacer menos en otro e incluso pienso que mi nueva versión es mejor porque no salen cosas innecesarias, lo más triste es que no se me ocurrió esa forma hasta bien tarde.

En cuanto a lo de que no se llamara el archivo, le pregunté a alguien más y la solución que me dio fue poner 3 líneas nuevas en el javascript que llamaban la función si había una llamada nueva de Ajax.

La lección aquí es: si te dan consejos super complicados no les hagas caso.

Notas al pie: La idea de "try softer" es respuesta a que constantemente te digan "try harder", en actuación se aplica en que si te esfuerzas mucho en hacer un papel de cierta manera, por estar pensando tanto en tantas cosas no se ve natural, y sin embargo si simplemente te relajas sale. Creo que a todos nos ha pasado, ya sea en deportes, artes, pelando con bosses en videojuegos, matemáticas o en la vida, que no nos sale algo por más que intentamos y que ya que vamos a dormir al día siguiente sale a la primera, algo por ahí va.