11 Herramientas para Codificar más Rápido al Instante

() translation by (you can also view the original English article)

Dos veces al mes, revisamos o actualizamos algunas de las publicaciones y sesiones favoritas de nuestros lectores a lo largo de la historia de Nettuts+. Este tutorial se publicó por primera vez en septiembre pasado.

¿No dice el título todo? Hay una amplia variedad de herramientas y técnicas que pueden mejorar drásticamente la velocidad en la que codificamos. Particularmente durante ajustes sensibles al tiempo, incluso un ahorro de unos pocos segundos por iteración puede sumarse sustancialmente a lo largo del mes. Le mostraré once de mis herramientas favoritas en este artículo.

1. Codificación Zen

Combine la potencia y la especificidad de los selectores CSS con el marcado HTML y obtiene la codificación Zen. Ciertamente, yo no fui el único cuya mandíbula cayó la primera vez que vio:

1	div#container>div#contents>ul#nav>li*4

...convertirse en:

1	<div id="container">
2	<div id="contents">
3	<ul id="nav">
4	<li></li>
5	<li></li>
6	<li></li>
7	<li></li>
8	</ul>
9	</div>
10	</div>

En este último año, el proyecto Zen Coding ha ganado considerable atención y ha sido ampliado para soporta una amplia variedad de editores de código, incluyendo Espresso, Vim, Netbeans, TextMate y Komodo Edit.

"Zen Coding es un complemento de editor para codificación y edición de alta velocidad de HTML, XML, XSL (o cualquier otro formato de código estructurado). El núcleo de este complemento es un poderoso motor de abreviatura que le permite ampliar las expresiones - similar a selectores CSS - a código HTML. "

Alternativas

Sparkup

2. Ventanas divididas

Para muchos, una sencilla experiencia de codificación basada en pestañas es más que adecuada; sin embargo otros prefieren un enfoque más integrado. Desafortunadamente, la capacidad de dividir ventanas no está ampliamente disponible a lo largo de los editores de código. Afortunadamente sin embargo, un puñado de ellos la soportan en diferentes niveles de flexibilidad (el rey es Vim).

El excelente editor Vim ofrece un nivel sin precedentes de combinaciones de ventanas. Utilice :sp y :vsp para crear nuevas ventanas desde el modo normal.

Alternativas

3. Adopte la Codificación Social

En los últimos dos años en particular, la idea de la codificación social ha ganado popularidad considerable - y ¿por qué no? Si es divertido compartir fotos en Flickr, lo mismo sucederá, por supuesto con la codificación. Con sitios como el que Envato ha comprado recientemente Snipplr, Github o Forrst, no sólo puede administrar sus propios fragmentos para su uso futuro, sino que también puede aprovechar los múltiples cerebros recibiendo comentarios de la comunidad sobre sus técnicas de codificación y sus opciones.

Envato recientemente compró el popular Snipplr.com

¿Otro sitio de redes sociales? Si eso es verdad; pero debo admitir: es divertido. ¡Además, es educativo!

4. Herramientas de Administración de Código

Las redes en línea como Github, Snipplr y Forrst son fantásticas, sin embargo pueden consumir mucho tiempo para ser accedidas, cuando usted necesita reutilizar un código específico (suponiendo que ya no sea parte de un paquete). La solución es instalar una de las diversas aplicaciones de administración de código disponibles en la web.

Personalmente, como usuario de Mac, prefiero la aplicación Snippets no-gratuita.

Con esta herramienta, cuando estoy trabajando en código, simplemente puedo presionar en la Mac Command + F12 para insertar mi fragmento de código deseado en mi proyecto. Incluso mejor, integra una función "Exportar a Snipplr/Snipt/Pastie" que es extremadamente útil.

Mientras que muchos editores ofrecen una utilidad de fragmentos integrados, yo recomendaría adoptar en vez de eso una herramienta de terceros. De esta manera, sus fragmentos no se limitan a un solo editor.

Sugerencia Profesional

Si usted desea sincronizar sus fragmentos en todos sus equipos, a través de Dropbox puede crear un enlace simbólico.

Paso 1: Vaya a ~/Library/Application SupportSnippets.
Paso 2: Copie la carpeta completa en Dropbox.
Paso 3: Cree un enlace simbólico. En la Terminal escriba: ln -s ~/Dropbox/Snippets ~/Library/Application Support/Snippets.
Paso 4: Enjuague y repita para todos sus computadores.

¿Qué Tipo de Fragmentos Debo Guardar?

¡Todo lo que usted puedas imaginar! Como regla general, si tiende a escribir un bloque de código más de una vez, guárdelo. Vamos a hacer uno obvio juntos; cuando se produce un nuevo sitio web, ¿con qué frecuencia escribe las tres líneas para crear esquinas redondeadas en los navegadores modernos?

#box {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

Esto tarda unos diez segundos en escribir cada vez. ¡Que desperdicio! En su lugar, cree un nuevo fragmento y reduzca el tiempo de codificación en un 90%.

Opciones Alternativas

Snippley: Usé este hasta recientemente.
Code Collector Pro: Para Mac
Aplicación Snippet

5. Elija un Editor Adecuado

El Santo Grial de la codificación eficiente; su elección de editor de código tendrá el efecto más grande en su velocidad de codificación. Desafortunadamente, no existe una respuesta definitiva. Su decisión dependerá en gran medida de:

En qué lenguajes codifica usted
Su Sistema Operativo
El tipo de interfaz de usuario que usted prefiera
Comodidad con la línea de comandos (o falta de la misma)

Como ejemplo, alguien que crea predominantemente temas HTML para un sitio como ThemeForest sería poco sabio al usar un IDE completo como Aptana. Es simplemente innecesario y demasiado lento. Sin embargo, lo mismo no ocurre con un desarrollador del lado del servidor.

Preguntas que se Deben Hacer Antes de Decidir Acerca de un Editor

¿Qué tan importante es la velocidad? ¿Debería el editor abrir casi al instante?
¿Requiero de herramientas de depuración integradas?
¿Este editor ofrece alguna forma de funcionalidad de paquete?
¿Qué tan fácil de memorizar son los atajos de teclado?
¿Mis extensiones y complementos favoritos (como Zen Coding) están disponibles para este editor de código?
¿Requiero de registro integrado de Git?
¿Estoy bien con una interfaz gráfica?
¿Prefiero la velocidad sobre el aspect visual...o Vim sobre Coda?

Cuando me hice estas preguntas, determiné que la velocidad y el rendimiento eran primordiales. Como tal, actualmente uso Sublime 2 y Vim. Este último es significativamente desalentador al principio, pero proporciona un nivel sin precedentes de flexibilidad y velocidad, debido al hecho de que incluso atravesar su página requiere un tipo de lenguaje. Sin embargo, para proyectos más grandes, que requieren depuración, utilizo Netbeans.

6. Utilice Paquetes

Paquetes: apréndalos...utilícelos. Editores como TextMate -- y posteriormente E Text Editor -- popularizaron los paquetes; sin embargo están ampliamente disponibles de editor a editor.

¿Qué es tan Grandioso Acerca de Ellos?

¿Cuántas veces se ha encontrado escribiendo la misma pieza genérica de marcado o código, ya sea que puede ser una nueva función, o la estructura de un nuevo plugin jQuery? ¿Cuánto tiempo está perdiendo cada vez que repite este proceso? Aquí es donde entran en juego los paquetes.

Por ejemplo, al descargar el paquete TextMate CodeIgniter, podemos aprovechar una amplia gama de métodos y fragmentos. Recuerde - escribir menos es siempre algo bueno.

Con este paquete instalado, sólo necesitamos escribir el atajo designado y, a continuación, pulsar tab (en la mayoría de los editores). A continuación, se expandirá el atajo al código requerido. Lo que diferencia a un paquete de un fragmento es que usted puede especificar varias tabulaciones para facilitar aún más la velocidad de codificación.

Usuarios de Vim: si estrañan/envidian la función de paquete de TextMate, echen un vistazo al complemento de SnipMate.

7. Utilice un Preprocesador CSS

Herramientas como LESS.js y Sass pueden aumentar drásticamente su velocidad de codificación. En términos de cuál elegir: ambos son excelentes. En estos días, yo tiendo a preferir Sass, ya que el framework Compass está construid encima del mismo y proporciona un número sin par de funciones de conveniencia. También parece ser lo que utilizan los chicos cool. :)

¿Como funciona?

Estas herramientas permiten todas las características que desea que tuviera CSS - como variables y funciones.

/*
Variables!
*/
@primary_color: green;

/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

#container {
/* References the variable we created above. */
	background: @primary_color;

/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
	.rounded(20px); 

/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
	a {
		color: red;
	}
}

Sugerencia Profesional: Para que su navegador se actualice cada vez que guarde un archivo (característica muy útil), utilice el método watch. Coloque lo siguiente en la parte inferior de su proyecto. Por supuesto, esto supone que usted ya ha configurado LESS.js.

1	less.env = 'development';
2	less.watch();

Póngase en marcha con LESS.js (video y artículo)

Compilador LESS

Muchos podrían argumentar que no es seguro usar una solución basada en JavaScript. Pero eso está bien; existe puñado de compiladores disponibles en la web. La mejor solución que pude encontrar se llama LESS.app.

Después de descargarla (gratis), simplemente arrastre su carpeta de proyecto dentro de la aplicación, que le indica que vigile todos los archivos .LESS. En este punto, usted puede continuar trabajando en su proyecto como de costumbre. Cada vez que usted guarde, el compilador se ejecutará, lo que genera/actualiza un archivo de style.css creado automáticamente. Cuando haya terminado de desarrollar su aplicación, sólo tendrá que cambiar las referencias correspondientes de su hoja de estilo desde style.less a style.css. ¡Fácil! Ahora no hay razón para no aprovechar LESS - a menos que esté usando una solución diferente, como Sass.

Tome nuestra mini-serie para aprender exactamente cómo trabajar con Sass.

8. Prototipe Temprano con Firebug

Usted conoce la mecánica: escriba un poco de JavaScript, vaya y actualice su navegador, reciba un error, vuelva al editor...y enjuague y repita. Aunque todos lo hacemos, a veces hay alternativas mucho más eficientes, como el prototipado temprano con herramientas como Firebug. Al trabajar directamente en el navegador, se corta el intermediario, por así decirlo.

El supertalentoso Dave Ward recomendó este consejo, e incluso ha creado un tutorial de video que demuestra este método.

Visite el sitio web de Dave para ver una versión de este tutorial en alta calidad.

9. Utilice Prefixr

Herramientas como Compass o incluso un paquete TextMate son tremendamente útiles - de hecho las utilizo con frecuencia. Pero para muchos proyectos no están disponibles. Como resultado, nos quedamos en la posición de tener que copiar y pegar repetidas veces.

Construí Prefixr para hacer todo este tedioso trabajo para mí. Simplemente pegue su hoja de estilo, presione Prefixize (o pulse Control + Enter) y Prefixr filtrará las propiedades CSS3 aplicables y las actualizará dinámicamente.

¿No puede recordar si Opera proporciona una versión prefijada de, por ejemplo, la propiedad transition (o-transition)? No se preocupe por eso; ¡todo ya está codificado en Prefixr!

Con Prefixr, usted solo codifica sus hojas de estilo utilizando el marcado oficial recomendado por W3C. Cuando esté listo para la implementación, ejecute la hoja de estilo a través de Prefixr y ¡termínela ahí mismo!

Obtenga más información acerca de Prefixr.

10. Encuentre un Editor que Ofrezca Selección Múltiple

Primero le advierto que muy pocos editores de código ofrecen una función de selección múltiple. Sin embargo el editor que utilizo actualmente, Sublime 2, lo hace. Mucho mejor, está disponible para usuarios de Windows y Mac.

Entonces, ¿qué es exactamente la selección multiple? Bueno, los editores como TextMate han ofrecido durante mucho tiempo la selección vertical, que está bastante bien. Pero, con la selección múltiple, usted puede tener múltiples cursores en la página. Esto puede reducir drásticamente la necesidad de usar expresiones regulares y las consultas avanzadas de búsqueda y reemplazo.

11. No Reinvente la Rueda

Al empezar en este campo, siempre estaba en desacuerdo con comentarios como "No Reinvente la Rueda." No se trata de reinvención; se trata de entender cómo funciona la rueda. Sin embargo, una vez que conoce el funcionamiento interno de la rueda, este argumento es ciertamente cierto: Don't Repeat Yourself.

Codificar cada nuevo proyecto desde cero consume una cantidad increíble de tiempo.

Si usted desea completar nuevos proyectos tan rápido como sea posible (y quién no lo desea), ahórrese tiempo y aproveche los distintos niveles de abstracciones disponibles en la web. Un puñado de mis favoritos incluyen:

HTML5 Boilerplate - Si usted elige utilizar esta plantilla en su totalidad o en trozos y pedazos, no importa. ¡Solo utilícela! Y mientras estás en ello, ¡divida las secciones de código en fragmentos para su reutilización! Vea la guía oficial de Boilerplate en Nettuts+
CodeIgniter (PHP Framework) - Para aplicaciones PHP de nivel superior, el framework CodeIgniter es una elección fantástica. Aún mejor, el apoyo de la comunidad es insuperable. Si usted es un aprendiz visual, nuestra serie CodeIgniter desde Cero es también inigualable. :)
960 (CSS Framework) - Si necesita estructuras tipo rejilla, tanto el framework CSS 960 como el framework Blueprint son opciones fantásticas. Convierten fácilmente horas de trabajo en un proceso de dos minutos; y si usted está preocupado por el exceso de archivos, no debería. Ese es un argumento ridículo. ¡Vamos a enseñarle cómo usar 960!
JQuery (Librería JavaScript) - ¿Realmente requiere esto de una explicación en este punto? Ahórrese los dolores de cabeza y utilícelo (es decir, a menos que haya desarrollado su propia librería increíble).

Conclusión

Le mostraré la mía si me muestra la suya. ¿Qué herramientas y recursos utiliza para codificar más rápido?