David Anguita — Blog

Filed under desarrollo de software

View all posts on posterous with this tag »

Dropbox para sincronizar tus equipos de trabajo

Install_graphic

Por muchos es conocida Dropbox, aplicación que nos permite almacenar archivos en la nube con objetivo de compartirlos, mantenerlos sincronizados entre varios equipos, realizar un backup de los más críticos o simplemente disponer de una versión accesible vía web de los mismos. Aprovechando la integración de Dropbox con los distintos sistemas de archivos podemos utilizarlo para sincronizar automáticamente los archivos esenciales, que en mi caso son los que me permitan tener un entorno de desarrollo preparado en el menor tiempo posible.

Habitualmente trabajo con sistemas UNIX (Mac OS X y GNU/Linux) por lo que empleo enlaces simbólicos para enlazar los archivos que necesito sincronizar en el directorio Dropbox, de esta forma:

$ ln -s /ruta/del/directorio/dropbox/archivo /ruta/del/archivo

 

Los tipos de archivo que mantengo sincronizados:

Dotfiles

Archivos generalmente alojados en el directorio de usuario, cuyos nombres comienzan con un punto y definen variables de entorno, alias, opciones de ejecución y preferencias globales de intérpretes del sistema y otras aplicaciones.

Algunos de ellos:
  • .bashrc (bash shell)
  • .bash_profile (bash shell)
  • .vimrc (editor de textos vim)
  • .gitconfig (git VCS)
  • .gitignore (git VCS)
  • .irbrc (Intérprete interactivo Ruby)
  • .screenrc (GNU screen)
  • .zshrc (zsh shell)
Archivos de configuración
  • Archivos de preferencias, Bundles y Themes de IDEs y editores de texto
  • Sitios FTP
  • Medios de acceso a equipos remotos
  • Conexiones a Bases de Datos (con y sin túnel SSH)
Scripts de sistema

Principalmente orientados a automatización de tareas en servidor.

Documentación
  • Referencias sobre frameworks y lenguajes de programación
  • Cheat Sheets
  • Presentaciones
  • Otra bibliografía esencial
Claves y certificados
  • Passwords (encriptado)
  • Certificados de usuario y seguridad
Enlaces de descarga

Suelo almacenar enlaces de descarga de mis aplicaciones esenciales en un archivo de texto, para descargarlas en lote en un equipo nuevo.

Con todos estos archivos sincronizados, el enfrentarnos a un equipo nuevo supondrá perder menos horas de productividad, bastará con instalar las aplicaciones y realizar los enlaces simbólicos en el sentido inverso. ¿Cuáles son vuestras técnicas para ganar minutos en este tipo de tareas que, inevitablemente, nos hacen perder tiempo cada vez que renovamos hardware?
Posted
Views
and 0 Comments

La "Cheat Sheet" que todos hemos hecho alguna vez

Existen cientos de Cheat Sheet o chuletas que los desarrolladores de software creamos —y generalmente compartimos— con objetivo de reunir la información más relevante y práctica acerca del uso de un editor de textos complejo, un framework, un lenguaje de programación, un sistema operativo, una metodología de desarrollo y un largo etcétera.

Me ha sorprendido encontrarme con una Cheat Sheet muy similar a las que suelo acumular en mi espacio de trabajo, además de ser realmente completa al tratar un editor de textos complejo, a la par que genial, como es Vi.

Vicheat-final
Extraída de esta completa guía de uso de Vi.

Completando el post, no podría terminar sin recomendar una genial colección de las citadas Cheat Sheets especialmente bien estructuradas en mi opinión. Sintetizan temas muy interesantes para desarrolladores web como HTML, CSS, PHP y Ruby on Rails: Added Bytes Cheat Sheets.

Addedbytes-screenshot

Posted
Views
and 0 Comments

CSS extendido con LESS

Less_logo

Ante lo tosco —sintácticamente hablando— que puede resultar un desarrollo CSS atendiendo a las especificaciones actuales, numerosos son los frameworks CSS o utilidades que surgen con el objetivo de flexibilizar este proceso.

LESS es una gema Ruby que nos permite generar ficheros CSS a partir de su propia especificación, que no es otra que una extensión de CSS con cuatro mejoras fundamentales:

Variables

Permite definir atributos en el documento CSS y asignarlos a múltiples clases, por lo que las modificaciones de estos atributos tienen repercusión de forma global.

#colors {
    @header: #fff;
    @wrapper: #000;
    @footer: blue;
}

A los que accederemos con:

.wrapper {
    color: #colors[@wrapper];
}

Mixins

Permite asociar todos los atributos de una clase a cualquier otra, permitiendo también el paso de parámetros a la primera, lo que a efectos prácticos la convierte en una función que devuelve una serie de atributos.

.bordered(@color: #fff) {
    border: 1px solid @color;
}

Reglas anidadas

Permite definir la jerarquía de clases en el DOM estableciendo unas claras reglas de herencia.

#header {
    background-color: #000;
    .wrapper {
        width: 960px;       
    }
}

Operaciones

Aporta un dinamismo relativo a la generación de CSS permitiendo aplicar operaciones aritméticas a valores y colores definidos en la hoja de estilo.

.wrapper {
    background-color: #888 / 2 + #000;
}

Para trabajar con LESS, una vez instalado en nuestro sistema a través de ruby-gems, editaremos un archivo con extensión .less que utilizaremos para generar el CSS estándar de forma automática a través de la gema.

Este es un buen ejemplo de código LESS y su correspondiente CSS generado aplicando la mayoría de sus mejoras (extraído de http://github.com/cloudhead/less/tree):

LESS
@dark: #110011;
.outline (@width: 1) { border: (@width * 10px) solid black }

.article {
    a { text-decoration: none }
    p { color: @dark }
    .outline(3);
}

CSS
.article a { text-decoration: none }
.article p { color: #110011 }
.article { border: 30px solid black }

Recordemos que no estamos hablando de CSS dinámico, sino de una especificación extendida del CSS estático que conocemos. Las técnicas de CSS dinámico requieren generalmente un servidor o intérprete y tienen objetivos adicionales a flexibilizar el proceso de desarrollo.

Para los más curiosos, LESS es open source bajo Licencia Apache y mantiene un repositorio público en github desde este proyecto.

Web oficial de LESS

Less_website

Posted
Views
and 1 Comment
Fans (1)

Código fuente en Posterous con SyntaxHighlighter

Este es un breve recordatorio sobre la posibilidad de incluir código fuente formateado en nuestros posts a través de la librería JavaScript SyntaxHighlighter.

Basta con incluir nuestro código entre etiquetas code, pudiendo además indicar el lenguaje de cada fragmento de esta forma: 

[code lang='php'] 
  código PHP 
[/code ] (sin espacio antes del corchete de cierre)

Los lenguajes soportados son los incluidos en esta página del Wiki del producto (columna Brush aliases).

La librería está importada en el sistema Posterous por lo que sus opciones de configuración son limitadas, usándolo en nuestras propias aplicaciones web será posible personalizar los esquemas de resaltado de sintaxis a través de Temas CSS o incluir nuevos Brushes si es que aún necesitamos formatear código escrito en un lenguaje no soportado.

Algunos ejemplos:

PHP 

function helloWorld() { 
 echo "Hello, World!"; 
}

JavaScript 

function helloWorld() { 
 alert("Hello, World!"); 
}

Python 

def helloWorld(): 
 print "Hello, World!"

El correcto funcionamiento de este formateado de código depende del tratamiento HTML que nuestro cliente de correo electrónico realiza al enviar texto enriquecido. Algunos clientes incluyen cierto código HTML que será interpretado por SyntaxHighlighter y por lo tanto afectará al código original que deseamos destacar.

Ante estas dificultades —si tenemos conocimientos de XHTML— Posterous nos ofrece un editor HTML por lo que podremos eliminar el citado y molesto código sobrante de forma manual, algo en ningún caso justificable puesto que la comodidad y simplicidad de Posterous es uno de sus pilares y en este caso concreto brilla por su ausencia.

Enlaces de interés:

Posted
Views
and 2 Comments

Resaltado de sintaxis en Aptana Studio

Los que pasamos muchas horas delante de un IDE vamos adoptando ciertas preferencias en cuanto a la paleta de colores más cómoda para resaltar sintaxis en nuestro editor de código. Si trabajamos con poca luz ambiental un contraste positivo (texto oscuro sobre fondo blanco) puede ser molesto e incluso hacer que nos cansemos o despistemos. Personalmente prefiero trabajar con un contraste invertido (texto claro sobre fondo oscuro), lo que en gran parte explica el estilo de este blog.

Aunque en Aptana Studio (conocido IDE basado en Eclipse) existe la posibilidad de personalizar nuestros esquemas de color, he reunido algunos esquemas creados por diferentes usuarios que me parecen especialmente cómodos:

Greenchaud

Autumna

Dark_color_theme

Dark_textmate

Darkblue

Instrucciones de importación de estilos en los Editores
(Aptana maneja distintos Editores para los diferentes lenguajes):
  1. Abrimos las Preferencias de Aptana (variable según el sistema operativo)
  2. Abrimos el árbol de preferencias: Aptana -> Editors -> (Lenguaje) -> Colors
  3. Importamos el fichero de estilo a través del botón Import
Otra opción muy cómoda sería
  1. Abrimos las Preferencias de Aptana
  2. En el filtro de Preferencias (esquina superior izquierda) escribimos el texto "color" para mostrar únicamente las secciones de color para cada uno de los Editores disponibles en Aptana.
Enlace de interés (sobre la importación de estilos): How To Install An Aptana Color Theme
Posted
Views
and 7 Comments