November 12, 2013

coffe + less

Agregando nuevos skills al repertorio

by ZeroDragon
Categories: tecnologia
Tags: , , , , ,
Comments: Leave a Comment

Hace dos semanas implementé HMVC en mi repositorio base de desarrollo. Esto se está reflejando en todos los proyectos posteriores, los cuales comparten una misma base.

Debo decir que aunque CodeIgniter no trae el soporte HMVC de fábrica, el plugin que le incorporé fue bastante sencillo de implementar. Solo tuve que modificar un poco mi motor de templates para que buscara las vistas dentro de módulos. Podría subir mis cambios, pero ese repositorio parece muerto desde hace 3 años… de todos modos si lo desean luego hago un gist con los cambios que le hice.

La semana pasada empecé a trabajar con LESS para hacer un poco más inteligente la forma de codificar CSS y seguir el principio de “Don’t repeat yourself“, en este caso no tuve mayor complicación. Puesto que un CSS correcto es también un LESS válido. Solo tuve que reorganizar mis reglas para anidarlas; usar mixins para reutilizar código y en general aventarme un clavado al API. Pero nada del otro mundo. Si ya tienes un código empezado y quieres migrarlo, esta herramienta me sirvió para convertir mi CSS en LESS.

Después de implementar esto, ayer me di a la tarea de migrar mi Javascript a CoffeeScript. Este si me movió un poco los paradigmas, es (como dijo Alexserver):

…Es como pythonear un codigo javascript… todo orientado a indentación.

Se puede aprender lo más básico probando esta herramienta para convertir tu JS en Coffee al vuelo. O si te sientes con ganas de que tu mente vuele por los aires, observa estos ejemplos.

Pero dirán: ¿Para que hago más complicado mi proceso?
Bueno la respuesta es más bien un conjunto de beneficios:

  • Al trabajar con LESS y Coffee. Tienes la “particularidad” de que si tu código NO está bien hecho, no se compila y te marca error. Esto lejos de ser una desventaja, es una ayuda para evitar typos.
  • LESS compila tu CSS de forma minificada (para no sobre cargar los navegadores)
  • CoffeeScript define todas tus variables de forma correcta y en los scopes necesarios. Esto es importante cuando tienes scripts grandes y empiezas a tener fuga de recursos.
  • El código de Coffee es más sencillo de leer … una vez que aprendes el API… y por lo regular es más compacto.
  • Puedes hacer temas o paletas de colores usando interpolation + mixins en LESS y cambiar todo el look and feel de tu sitio con una sola regla que se va heredando a todos lados.
  • Puedes importar LESS dentro de LESS y separar tu código en diferentes archivos. Al compilarlo, solo se genera un solo CSS, el cual es el que cargas al navegador.

Podría estar aquí todo el día, pero la única forma de que aproveches esto es implementándolo en tus proyectos.

Finalmente durante todo esto, estoy usando una herramienta super útil llamada Dash (Mac). Es un pequeño monstruito que te descarga N número de librerías de tu lenguaje de programación favorito y te las mantiene como diccionarios de referencia locales. Para cuando se te olvida como hacer una estructura en jquery, algún operador desconocido en PHP o hasta shortcuts de MarkDown. Tu nómbralo, ahí está; y si no está, lo puedes solicitar/contribuir. También te puede guardar tus sniplets personales que más usas para tenerlos a la mano. Cuesta $250 MXP, pero la versión gratuita tiene todos los componentes, solo te brinca de vez en cuando con la retribución económica.

¡Basta de texto, y empieza a escribir código! Y recuerda, si quieres contribuir con el buen karma digital, a la derecha está el botón para invitarme un refresco :D

Zero out.