Técnicas Sith para aumentar la productividad en diseño web

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

“Los seguidores del Lado Oscuro obtienen su poder más rápido y fácilmente que los Jedi; sin embargo, el Lado Oscuro es más difícil de controlar y ejerce una adicción sobre sus seguidores”

He de confesarlo, soy un Lord Sith. Hace tiempo que practico técnicas de diseño web del Lado Oscuro de la Fuerza. ¿Por qué? preguntaréis. La respuesta es sencilla:

El Lado Oscuro es más rápido, más poderoso y vestir de negro estiliza la figura.

‘Yo también uso CoffeeScript’

Mi ambición por hacerlo todo más rápido y más fácil me ha llevado a conocer técnicas Sith poderosas. Hoy las compartiré con vosotros.

Sublime Text 2, el arma

Hay otras armas similares, pero ninguna tan personalizable. Sublime Text 2 es el editor de código más rápido que he conocido, con cantidad de parámetros que poder configurar a tu gusto, además de plugins de todo tipo que te facilitan la vida. Para colmo puedes probarlo gratis durante el tiempo que quieras y la licencia vitalicia para un puesto cuesta menos que una cena con tu pareja. “Cariño, al final hoy cenamos en casa”.

Pero el verdadero poder de Sublime reside en dos características:

  • El cursor múltiple. Puedes hacer click (ctrl+click o cmd+click) en varios puntos del documento a la vez y ¡¡te permitirá escribir y/o editar en todos a la vez!!
  • Los snippet. Los snippets son fragmentos de código que puedes invocar mediante una palabra mágica. Veamos como se crean:

Se hace click en la pestaña Tools > New Snippet…

Modificamos el código que vemos:

  • Content es el código que aparecerá cuando invoquemos el Snnipet.
  • Tabtrigger es la palabra clave que lo invoca.
  • Scope indica en que contexto de código podemos invocarlo (por ejemplo, php).

Veamos un ejemplo que nos devuelve el Doctype de HTML5:

<snippet>

<content><![CDATA[
<!DOCTYPE html>
]]></content>
<tabTrigger>html5</tabTrigger>
</snippet>

Lo guardamos en la carpeta por defecto con la extensión .sublime-snippet y cada vez que escribamos ‘html5’ nos devolverá ‘<!DOCTYPE html>’.

El poder arcano, Zen coding Emmet

El zen coding emmet es la versión Sith para escribir HTML, CSS, XML e incluso HAML. Se trata de un plugin bastante veterano para escribir código a gran velocidad a base de abreviaturas. Usarlo con Sublime es una combinación letal.

Veamos un ejemplo de emmet:

nav#menu>ul>li*4>a.seccion{Sección}

Todo listo en una línea, # indica que aplicamos un id y . que aplicamos una clase. Los > indican anidamiento, *n repite n veces esa etiqueta y {} introduce texto. El resultado es el siguiente:

<nav id="menu">
<ul>
<li><a href="" class="seccion">Sección</a></li>
<li><a href="" class="seccion">Sección</a></li>
<li><a href="" class="seccion">Sección</a></li>
<li><a href="" class="seccion">Sección</a></li>
</ul>
</nav>

Preprocesadores, la fuerza desatada

Piensa en un lenguaje como CSS o Javascript. Piensa que le quitarías a cada uno para hacerlo más cómodo de escribir. Ahora piensa en aquello que le añadirías para trabajar de manera más cómoda. El resultado será algo similar a lo que hacen los distintos preprocesadores. Los preprocesadores añaden una serie de características que aumentan nuestra productividad y eliminan aquellos elementos “innecesarios” de nuestro código.

Preprocesadores de CSS: LESS, SASS, Stylus…

Imagina poder disponer variables, funciones u operadores en tus hojas de estilo. Imagina poder anidar tu código para mantenerlo ordenado o aplicar uno u otro estilo dependiendo de que se cumpla una condición. Con LESS, SASS o Stylus puedes hacerlo.

Veamos un ejemplo usando LESS:

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
@colorbase: #e938ab;

.borderedondo(@valor){
border-radius: @valor;
-o-border-radius: @valor;
-moz-border-radius: @valor;
-webkit-border-radius: @valor;
}

.elemento{
background: @colorbase + #111111;
.borderedondo(10px)
}

CSS generado

1
2
3
4
5
6
7
.elemento{
background: @fa49bc;
border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Preprocesador de Javascript: CoffeeScript

¿Y si sustituimos la sintaxis de Javascript por otra más limpia, cercana al lenguaje natural y sin llaves ni puntos y comas? CoffeeScript hace esto y mucho más.

Veamos un ejemplo:
CoffeeScript

1
2
3
4
5
6
numero = 42
cierto = true

alert "es cierto" if cierto

cuadrado = (x) -&gt; x * x

Javascript generado

1
2
3
4
5
6
7
8
9
10
11
12
var numero, cierto;

numero = 42;
cierto = true;

if(cierto){
alert("es cierto");
}

cuadrado = function(x){
return x * x;
};

En resumen

Os he mostrado algunos de los poderes que el Lado Oscuro, que como decía al principio es más rápido y potente. Aumentará nuestra productividad hasta las cotas más altas. Sin embargo entraña algunos riesgos y no es realmente útil si no tenemos una fuerte base en el Lado Luminoso (CSS, HTML y Javascript puro).

Y vosotros, ¿Conocéis más técnicas Sith?

Antonio Navajas (@ajnavajas) es desarrollador front-end, diseñador y formador ocasional. Apasionado por la tecnología, el diseño y en general por la cultura geek, colabora activamente en varios proyectos relacionados con la web, la formación y el diseño.

Comentarios arrow 3 Comentarios
  1. Genial post Antonio, me gusto mucho el enfoque, espero seguir leyendote por aquí!!!! saludos

  2. El Zen Coding lo conocía pero el Sublime Text 2 no y me ha gustado mucho.
    Los preprocesadores los tengo menos en estima, porque en mi situación actual estoy “obligada” a que se vea decente en todos los navegadores y no sé hasta cuáles acepta. Pero me gusta también.

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.