Sofa Naranja ahora, con un 125% más de naranja

Autosave en TextMate

Hay una preferencia de TextMate (no muy conocida, a juzgar por las veces que se la he enseñado a alguien :) que guarda automáticamente tus ficheros cuando cambias de TextMate a otra aplicación:

Parece una tontería, pero no tener que acordarte de guardar los cambios cuando abres un navegador para recargar un HTML o una CSS es algo a lo que te acostumbras muy rápido.

De hecho, cuando uso un editor que no es TextMate, el 50% de las veces que falla algo es porque se me ha olvidado guardarlo antes de recargar la página en el navegador :P

Ahorrando tiempo con TextMate y Subversion

Como llevo una temporada sin postear, aprovecho unos segundos de tiempo libre para contaros un pequeño truco motivado por el espíritu de la Infinita Vagancia™ y el típico comentario de “molaría que TextMate hiciera…” (en este caso, de David Alonso)

El truco de hoy es la típica chorrada que te molesta 80 veces al día, y cuando la resuelves te das cuenta de lo poco que nos queremos en general (resolverlo no llevó más de 2 minutos)

Escenario: usas Subversion desde línea de comando, pero escribes tus mensajes de commit con TextMate (y si no lo haces, ahora te cuento cómo)

Problema: cuando escribes tu mensaje de commit, tienes que guardar el documento y luego cerrarlo para que se “registre” el mensaje y se haga el commit.

Idea: guardar y cerrar con un atajo de teclado, pero sólo en los mensajes de commit de Subversion.

Usando TextMate como editor de mensajes de commit

Si quieres usar TextMate para editar tus mensajes de commit, la cosa es bastante simple. Tienes que asegurarte de tener instalada la utilidad “mate” (usando el menú “Help » Terminal Usage…”) y añadir esto en tu fichero .bash_profile:

export SVN_EDITOR='mate -w'

Para ello, cuando hayas instalado ‘mate’ puedes abrir una ventana de Terminal.app (que por defecto inicia una sesión en tu carpeta $HOME) y escribir:

mate .bash_profile

Se abrirá el fichero .bash_profile si existe, y si no se creará.

Añade la línea “export …” donde quieras, cierra el fichero y cierra la ventana de Terminal.app (necesitas abrir una nueva para que el fichero .bash_profile se vuelva a leer)

Siguiente paso: el comando de TextMate

Una de las múltiples maravillas de TextMate es el sistema de “scoping”.

De una forma muy simplificada, el “scoping” es una forma de identificar qué tipo de texto estás editando. Mediante un sistema de expresiones regulares, TextMate puede reconocer en qué lenguaje estás programando; Y dentro de ese lenguaje, si estás editando un String, una función, un número…

Afortunadamente, los tipos que mantienen el bundle de Subversion tuvieron la deferencia de identificar cuándo un fichero es un mensaje de commit de Subversion.

El scope para un mensaje de commit es

text.subversion-commit

Otra maravilla de TextMate es que puedes limitar un comando a un scope, de forma que podemos escribir un comando que sólo funcione cuando estamos editando un mensaje de commit.

Para hacer nuestra vida más fácil, vamos a crear un comando que guarde y cierre el documento actual, y asignarlo a la combinación de teclas ⌘ + S (que ya estamos usando para guardar)

Así que abrimos el editor de Bundles con ⌃ + ⌥ + ⌘ + B y creamos un nuevo comando en el bundle de Subversion:

Le asignamos un bonito nombre:

lo rellenamos de contenido:

y cerramos la ventana del Bundle Editor.

A partir de ahora, cuando escribamos

svn ci nuestro_bello_fichero_modificado

se abrirá una ventana de TextMate con esta pinta:

donde podemos escribir nuestro mensaje de commit, y al pulsar ⌘ + S para guardar, se cerrará automáticamente y empezará nuestro commit :)

Y eso es todo, de momento…

Reflection, un comando para Fireworks

Admitámoslo. El efecto “reflejo en hielo/agua/cristal” es el “bevel & emboss” de esta década.

Si alguna vez te ha tocado crear uno, sabrás que es un pelín coñazo. Si además tienes que añadir un reflejo a 50 imágenes, habrás estado al borde del suicidio.

Sobre todo si después de la paliza alguien te dice cosas como:

• “Hmm… ¿por qué los reflejos no tienen todos la misma altura?”
• “¿Sabes qué? Creo que habría que hacer los reflejos un poco más pequeños”
• “Mira… mejor vamos a cambiarlo todo por un ‘drop shadow’, que vuelve a estar de moda”

(situaciones estas totalmente hipotéticas)

La cuestión es que, si eres un vago profesional, esta es una de esas veces en las que piensas… “hmmm… automatización…”

Así que, con ayuda de la terrible documentación de Fireworks CS3, me puse a programar un comando para hacer reflejos.

El resultado es que, con un sólo click, tienes un bonito efecto como este:

Bonito, ¿verdad? :)

Para conseguir este glamouroso comando, guarda el siguiente código en un fichero Reflection.jsf en la carpeta ~/Library/Application Support/Adobe/Fireworks CS3/Commands/ (o su equivalente en Windows que debería ser algo como C:/Documents and Settings/usuario/Application Data/Adobe/Fireworks CS3/Commands/), y luego selecciona un objeto en Fireworks y en el menú “Commands” elige la opción “Reflection”.

// Reflection Command 1.0
// Ale Muñoz <http://bomberstudios.com>

// Ask for shadow height:
shadow_height = prompt("Reflection Height","50");

// Get the original object
original = fw.selection[0];
original.name = "original";

// Clone, reflect and move original
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().reflectSelection(false, true, "autoTrimImages transformAttributes");
fw.getDocumentDOM().moveSelectionBy({x:0, y:original.height + 5}, false, false);

// Get the cloned object
copy = fw.selection[0]; // Current selection is now the copy
copy.name = "copy";

// Create the mask
fw.getDocumentDOM().addNewRectanglePrimitive({left:copy.left - 2, top:copy.top - 2, right:copy.width + copy.left + 2, bottom:copy.height + copy.top + 2}, 0);
// White to black gradient
fw.getDocumentDOM().setFill({ category:"fc_Linear", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:0, gradient:{ name:"cn_Custom", nodes:[ { color:"#ffffff", isOpacityNode:false, position:0 }, { color:"#000000", isOpacityNode:false, position:1 } ], opacityNodes:[ { color:"#000000", isOpacityNode:true, position:0 }, { color:"#000000", isOpacityNode:true, position:1 } ] }, name:"Linear Smooth", pattern:null, shape:"linear", stampingMode:"blend", textureBlend:0, webDitherTransparent:false });
// Reposition gradient
fw.getDocumentDOM().moveFillVectorHandleBy({x:0, y:shadow_height}, "end1", true, false);

// Get the mask
mask = fw.selection[0];
mask.name = "mask";

// Remove mask's stroke
fw.getDocumentDOM().removeBrush();

// Apply the mask to the cloned object
fw.selection = [copy, mask];
fw.getDocumentDOM().group("mask to image");

// Finally, set opacity to 30 so it looks like a reflection
fw.getDocumentDOM().setOpacity(30);

Para usarlo, selecciona un objeto y elige la opción “Reflection” del menú “Commands”.

Te pedirá que introduzcas la altura del reflejo en píxels (por defecto, 50)

Y ya está! :D

Si encuentras algún fallo o se te ocurre alguna mejora, deja un comentario…

Y recuerda el lema de los vagos profesionales: “lo importante no es trabajar más, sino trabajar mejor” ;)

Adobe, me tienes contento…

Si has trasteado un poco con el nuevo Fireworks CS3, quizá hayas descubierto una nueva funcionalidad: la “Common Library”.

Básicamente, la Common Library es un repositorio de símbolos para todos tus proyectos, que tienen la particularidad de que pueden ser programados para “hacer cosas” de una forma bastante sencilla.

“Hacer cosas”, en este caso, significa que puedes crear un símbolo gráfico (un botón, por ejemplo) y hacer que cada instancia del símbolo tenga un texto distinto manteniendo el mismo fondo…

…cosa que viene muy bien cuando tu cliente te pide que quiere un botón “más llamativo”:

Un cambio = 11 botones actualizados. La Ley del Mínimo Esfuerzo™ en pleno efecto :)

Hasta aquí todo bien… cuando además descubres que Adobe ha incluido en la Common Library una colección de símbolos con todos los elementos de formularios de Windows y Mac, quizá empieces a ponerte nervioso pensando qué vas a hacer con tooooooodo el tiempo de trabajo que te vas a ahorrar.

¡PERO…!

Todo en esta vida tiene un precio, y en Adobe decidieron que no estaban dispuestos a retrasar la salida de la Creative Suite CS3 para esperar que el equipo de Fireworks CS3 corrigiera los bugs de la Common Library y nos han obsequiado con un sistema potencialmente útil que, en su encarnación actual, es una auténtica castaña.

Un ejemplo: prueba a poner una ñ o una tilde en la etiqueta de un botón. Verás qué risa…

Por si esto fuera poco, la primera actualización de Fireworks CS3 ha roto lo poco que funcionaba de la Common Library. En concreto, ahora es imposible cambiar el tamaño de un símbolo sin que se rompa por todos lados:

Que conste que me encanta despotricar, pero como soy más de la filosofía de “Más vale encender una luz que maldecir la oscuridad”, aquí va una imagen llena de esperanza que he hecho para ilustrar este post:

No sé cuándo los terminaré (pronto, espero, porque me hacen falta para trabajar :) pero en cuanto estén listos los publicaré en el blog (y se los mandaré a Adobe junto con un tirón de orejas). Permanezcan atentos a sus pantallas ;)

Taller de TextMate Avanzado en The Cocktail

Si viniste al primer curso de TextMate en el Aula The Cocktail y te quedaste con ganas de más, el próximo Jueves 26 de Abril a las 19:30h haremos la segunda parte.

TextMate es un editor de texto super potente, pero un pelín impenetrable (aunque no tanto como Emacs :)

Si ya usas TextMate a diario con cierta soltura, quizá te esté picando el gusanillo de crear tus propias automatizaciones (snippets, comandos, macros…) y no sabes por dónde empezar.

En este taller crearemos un “bundle” personal, donde almacenaremos comandos y snippets que simplifiquen nuestro trabajo con toda clase de texto (que no sólo de código vive el hombre)

Aprenderemos que crear un script que haga nuestro trabajo más sencillo y menos repetitivo es más fácil de lo que parece.

Imprescindible:

• Un ordenador. Será un taller muy práctico, y la idea es que te lleves algún comando terminado :)
• Ser ya usuario (más o menos asiduo) de TextMate. No vamos a ver casi nada básico.

Recomendable, aunque opcional:

• Conocer algún lenguaje de programación para fabricar nuestros scripts. Los ejemplos que pondré usan Ruby, Bash y AppleScript sobre todo, pero te servirá cualquier lenguaje que venga de serie con OSX (Python, Perl, PHP…)

Apúntate desde ya en el wiki del Aula The Cocktail

Y si quieres estar informado de próximos eventos, visita la página del Aula The Cocktail en Upcoming