Mi contribución a la Conferencia Rails

Mi contribución a la Conferencia Rails 2006 fue un screencast para principiantes totales. Participó en el concurso de screencast, pero finalmente el premio se lo llevó uno de los vídeos más graciosos de los últimos tiempos.

En cualquier caso, aquí está mi screencast (ojo, que dura cerca de 35 minutos… :)

Si estás viendo este post desde un lector de feeds, puede que necesites abrir la web para ver el vídeo.

Update: se me olvidó comentar que el diseño de la camiseta oficial de la Conferencia Rails también ha sido perpetrado por un servidor…

Update 2: Por si acaso, he puesto una versión en MP4 para descargar del screencast. Son 130 Mb de nada :P

Technorati tags: , , ,

I love TextMate, II

Más cosas que me fascinan de Textmate

Si estás editando una aplicación de Ruby on Rails puedes instalar el plugin textmate_footnotes (que viene “de serie” en Textmate) y podrás abrir el controlador, la vista o el layout que tengas abierto en el navegador con un sólo click:

TextMate footnotes plugin

No es que yo viva de desarrollar Rails, pero para un proyecto reciente me habría venido de coña.

Viva la gente que optimiza su tiempo de curro (i.e: “Why Good Programmers Are Lazy and Dumb”)

Próximo libro sobre TextMate

La editorial Pragmatic Books (mundialmente conocida por sus fantásticos libros sobre Ruby y Rails) está preparando un libro sobre nuestro editor favorito: TextMate: Power Editing for the Mac.

De momento está en beta, pero por lo poco que he leído en los extractos en PDF el libro promete…

Si piensas que no le estás sacando todo el partido a TextMate, invertir en este libro es totalmente recomendable.

Update: Acabo de terminar de leer una beta del libro (la revisión 1.02, a la que le faltan aún unos cuantos capítulos) y tengo que decir que es una joya. Im-pres-cin-di-ble si quieres convertirte en “Power User”.

Javascript no intrusivo con jQuery

Tenía a jQuery en mi lista de “cosas que tengo que probar un día de estos” desde hace tiempo.

Para un proyecto que tenemos, he empezado a trastear con esta librería, y los resultados (inmediatos) me han dejado muy buen sabor de boca.

Vamos con unos ejemplitos de lo que sabe hacer jQuery:

Lista de resultados “con pijama”…

Este es un quebradero de cabeza clásico, para el que se han planteado muchas soluciones. La que he encontrado, usando los selectores CSS + DOM de jQuery es tan simple que casi da miedo:

$("#lista ul li:even").addClass("even");

Que viene a decir: “dentro del div #lista, me seleccione todos los li impares dentro de un ul, y les añada la clase ‘even’”

El HTML que estoy usando es bastante limpito:

<div id="lista">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
        <li>Elemento 4</li>
    </ul>
</div>

Pero dejarlo así sería desaprovechar toda la potencia de jQuery (y manchar un poco el HTML, en realidad). Así que, después de mirar un rato (10 minutos) la documentación, me encuentro con que puedo dejar mi HTML tal que así:

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

¿Y entonces cómo sé a qué lista tengo que ponerle el pijama? Aquí es donde entra en juego toda la potencia de los pseudo-selectores de jQuery (el li:even) es uno de ellos, pero hay muchos más

$(body ul:first li:even).addClass("even");

Que es como decir: “le añada la clase ‘even’a los li impares de la primera ul que aparezca en el body” (en este caso he hecho trampa, porque sé que mi ul será la primera que aparezca en el documento)

Añadir un icono a los enlaces externos…

Este es un asunto que ya visitamos en un artículo anterior (Destacando enlaces externos en WordPress)

Usando jQuery hay varias maneras de hacer esto, pero voy a elegir una particularmente curiosa: usar una expresión XPath.

$("//a[not(contains(@href,'sofanaranja.com'))]").addClass("externo");

Esto sería el equivalente a “busca todos los elementos ‘a’cuyo atributo src no contenga la cadena ‘sofanaranja.com’, y les añades la clase ‘externo’”.

(Lo de escribir expresiones XPath se sale un poco de la temática del post… : )

Javascript no intrusivo

Como vemos con este par de ejemplitos, los selectores de jQuery nos permiten hacer toda clase de perrerías (tanto en presentación como en comportamiento) sobre el DOM de nuestro documento sin (practicamente) guarrear el HTML.

Usando jQuery no hay excusa para ese crimen que es

... href="javascript:abreVentana()" ...

Me temo que seguiré comentando las bondades de jQuery una temporadita :D

Por qué me gusta jQuery, personalmente

  • Porque ocupa poco (15Kb comprimida)
  • Porque no le sobra nada, y lo poco que le falta es, casi siempre, innecesario :)
  • Porque la documentación está actualizada, bien escrita, y tiene ejemplos claros de qué se puede hacer y cómo.
  • Porque seleccionar elementos del DOM usando selectores CSS y XPath es droga dura: una vez que lo pruebas no puedes vivir sin ello.

Recursos interesantes…

Para trabajar con XPath, hace tiempo me encontré con AquaPath, una utilidad para Mac que vale su peso en oro…

Snipplr, próximamente en sus pantallas…

Llevo un rato jugando con esto: http://snipplr.com y me parece una de las mejores ideas del mundo mundial para los que nos dedicamos (de vez en cuando) a picar código…

La cosa es bastante simple: un repositorio de snippets* de código que podemos guardar online (convenientemente tageados) y recuperar cuando los necesitemos.

Así contado no tiene mucha gracia (y tampoco es original, la verdad, ahí tenemos http://cl1p.net)

La gracia está en que el tipo se ha currado un plugin de TextMate y podemos cargar y guardar snippets sin salir del editor! :D

No se pierdan el vídeo

El código del plugin es bastante chorra (básicamente, una llamada a ‘curl’) así que se puede adaptar sin mucha complicación a Vim, Emacs, tu-editor-de-codigo-favorito…

Pos eso… viva la web 2.0! Nunca más tendré que acordarme de en cual de mis carpetas (u ordenadores) está el código que me falta :D

*: un ‘snippet’es, tradicionalmente, un pedacito de código/texto que por si sólo no sirve para nada, pero que acabamos usando 50000 veces al mes en todos los proyectos. Por ejemplo: “maldito cliente” :P

Mini-curso de TextMate

La gran corporación continúa su expansión vertiginosa y se ha anexionado los territorios colindantes (léase: entreplanta) de la nuestra nueva oficina.

El objetivo de tal conquista es convertirla en el Aula Coctelera™ (yo me hubiera mudado a vivir allí, pero no creo que mis compañeros llevaran muy bien el hecho de que no tenga ducha…)

Para tal fin, y sin otro motivo que inaugurarla como dios manda, tenemos idea de impartir un minicurso de TextMate tan pronto como terminen de arreglar el suelo de la sala (teóricamente, la semana que viene)

El plan (o la ausencia de él) consiste en hacerlo un jueves sobre las 19:30 – 20:00 y aguantar el chaparrón durante 60-90 minutos.

Tras el curso, procederemos a hacer una inspección de temperatura de los tiradores de cerveza de la zona, como viene siendo habitual en estos eventos (y sin estos eventos, ciertamente). El evento será gratuito y la asistencia es libre, con permiso de la sala.

Calculamos que será sobre el 22 de junio, en Madrid capital. En cuanto tengamos fecha y hora concreta daremos más detalles, pero adelanto que los requisitos son:

  • Idealmente, tener un Mac (o intención de tenerlo)
  • Cierta familiaridad con algún editor de código
  • Inquietud por trabajar más rápido (o menos estresado)
  • No se requieren conocimientos previos de TextMate

Si te gustaría asistir, deja un comentario para hacernos una idea de la demanda. Si hay algún tema en concreto del que te gustaría que se hablara, ídem de lo mismo…

Ah… casi se me olvidaba… el profesor será éste que escribe (aunque espero que Furilo me eche una manita para las demos de Ruby On Rails : )

Update: Allan Odgaard, el programador de TextMate, me acaba de confirmar la sorpresilla que tenía guardada. Entre todos los asistentes se sorteará una licencia de TextMate :D

Update 2: MacDevCenter publica una entrevista con Allan Odgaard, el programador de TextMate.

Compilando MTASC y Swfmill para Mac Intel

Note: The post is available in English here

El problema

Ultimamente estoy revisando mi sistema de trabajo para proyectos de ActionScript.

Una de las primeras opciones ha sido usar MTASC junto con Swfmill (y un bonito sistema usando un Rakefile en Ruby, pero esa es otra historia…)

Las primeras pruebas de compilación fueron bastante alentadoras, pero me encontré con la siguiente sorpresa:

Mi PowerBook 12″ 1.3Ghz compila un 50% más rápido que un iMac Dual Core a 2Ghz!

Lo primero que hice fue comprobar que estaba usando la misma versión de MTASC y Swfmill en los dos sistemas. Y descubrí que en el PowerBook estaba usando una versión más antigua de MTASC. Al actualizarla, la diferencia era aún mayor…

Lo siguiente era averiguar si, como me temía, la última versión de MTASC no estaba optimizada para procesadores Intel:

AleMac:~ ale$ file bin/mtasc
bin/mtasc: Mach-O executable ppc

Lo que me temía…

Y Swfmill?

AleMac:~ ale$ file bin/swfmill
bin/swfmill: Mach-O executable ppc

Fantástico…

La solución

Como uno es un poco freak, la solución obvia era recompilar MTASC y Swfmill (grandes ventajas del Open Source :) para Mac Intel.

Si pensaste que era fácil, estás equivocado. Aquí tienes la crónica de cómo compilar MTASC y Swfmill en Tiger para Mac Intel sin pegarte un tiro…

Requisitos

Instalando dependencias

Primero actualizamos los paquetes de DarwinPorts

sudo port -d selfupdate
Password:
DEBUG: Rebuilding the darwinports base system if needed.
Synchronizing from rsync://rsync.darwinports.org/dpupdate/dports
receiving file list ... done

Para compilar MTASC y Swfmill necesitamos instalar una serie de paquetes usando DarwinPorts:

  • zLib
  • pkgconfig
  • libxml2
  • libxslt
  • freetype
  • libpng
  • gdbm

A compilar!

sudo port install zlib
sudo port install pkgconfig
sudo port install libxml2
sudo port install libxslt
sudo port install freetype
sudo port install libpng
sudo port install gdbm

Esto debería tardar unos 10 minutillos (en un iMac Dual Core 2.0Ghz)

También es necesario instalar OCaml y findlib.

OCaml está en la lista de paquetes de DarwinPorts, pero no findlib, así que lo haremos usando GODI

Instalando OCaml y findlib con GODI

Primero nos bajamos el código fuente de GODI y lo descomprimimos donde nos de más coraje. Yo voy a ponerlo en ~/src (un directorio ‘src’en mi carpeta home)

Para compilar GODI, hay que configurar un par de cositas…

cd /Users/ale/src/godi-bootstrap-20060405/
./bootstrap --prefix $HOME/src/godi

Y empezamos a compilar… Los binarios se instalarán en ~/src/godi/bin y ~/src/godi/sbin, así que habrá que añadir esas dos rutas al PATH (y si no sabes cómo se hace, quizá no deberías haber llegado hasta aquí :)

Y ahora es cuando empieza lo divertido:

cd /Users/ale/src/godi-bootstrap-20060405/
./bootstrap_stage2

Tras un tiempo prudencial (6 minutos tardó esto…) tendremos un compilador de OCaml nativo para Mac Intel, y GODI listo para empezar a instalar paquetes… Para ello, ejecutamos ‘godi_console’y nos buscamos la vida para instalar:

  • godi-findlib
  • conf-tcltk
  • conf-gdbm
  • godi-ocaml-dbm
  • godi-ocaml-all

Ahora ya estamos listos para empezar a compilar MTASC (si, esto no ha hecho más que empezar…)

Compilando MTASC

Comparado con lo que hemos hecho hasta ahora, compilar MTASC es un juego de niños…

Nos bajamos el script de instalación de MTASC desde aquí: http://www.mtasc.org/doc/mtasc/install.ml

Yo lo he guardado en ~/src/mtasc

cd /Users/ale/src
mkdir mtasc
cd mtasc
curl http://tech.motion-twin.com/doc/mtasc/install.ml -o install.ml

Y ahora viene lo más divertido, que es parchear ‘install.ml’para que compile en OSX. Para ello, buscamos la línea que dice

let zlib = match Sys.os_type with "Win32" -> "zlib.lib" | _ -> "-lz"

por algo parecido a esto:

let zlib = "/opt/local/lib/libz.a"

(que es donde DarwinPorts instala zLib por defecto…)

Ahora compilamos MTASC:

ocaml install.ml

Con un poco de suerte, cuando terminen de pasar líneas a toda velocidad por la pantalla, tendrás dos ejecutables: ‘mtasc’y ‘mtasc-byte’en la carpeta ‘mtasc/bin’

La prueba de fuego…

AleMac:~/src/mtasc/bin ale$ file mtasc
mtasc: Mach-O executable i386
AleMac:~/src/mtasc/bin ale$ file mtasc-byte
mtasc-byte: Mach-O executable i386

Woohoo! :D

Ahora vamos a intentar compilar Swfmill

Compilando Swfmill

Descomprimimos los fuentes de Swfmill en ~/src

tar xvzf swfmill-0.2.11.tar.gz

Yo no he conseguido que compile sin hacer la siguiente chapuza: buscar en todos los ficheros la cadena ‘-static’y sustituirla por ” (Teóricamente bastaría con poner –disable-static en configure, pero por algún motivo pasa del tema…)

Y ahora configuramos con las siguientes opciones:

./configure --prefix=$HOME

y compilamos…

make

Cuando acabe, tendremos un bonito binario en src/swfmill-0.2.11/src

De nuevo, la prueba del algodón:

AleMac:~/src/swfmill-0.2.11/src ale$ file swfmill
swfmill: Mach-O executable i386

Rescatando el fruto de nuestro trabajo

Ahora, lo ideal sería poner nuestras nuevas versiones de MTASC y Swfmill en algún sitio fuera de los directorios donde los hemos compilado…

Yo los he metido en ~/bin, que es un directorio que tengo en el PATH.

¿Merece la pena?

Bueno… pues aquí van unas pruebecillas de rendimiento en un pequeño test que tengo montado con MTAS + Swfmill, comparando la versión descargable de MTASC con la versión “native” y “bytecode”, compiladas en Intel.

La prueba consistió en compilar 4 veces seguidas midiendo el tiempo de compilación con el comando ‘time’. Mi proyectillo usa la opción ‘-keep’, con lo que las compilaciones a partir de la primera son más rápidas. Entre medición y medición se eliminaron todos los .swf

MTASC PowerPC + Swfmill PowerPC

real    0m1.020s
user    0m0.649s
sys     0m0.352s

real    0m0.197s
user    0m0.073s
sys     0m0.026s

real    0m0.101s
user    0m0.073s
sys     0m0.025s

real    0m0.103s
user    0m0.073s
sys     0m0.024s

MTASC “native” Intel + Swfmill Intel

real    0m0.568s
user    0m0.150s
sys     0m0.072s

real    0m0.105s
user    0m0.073s
sys     0m0.025s

real    0m0.103s
user    0m0.073s
sys     0m0.026s

real    0m0.101s
user    0m0.073s
sys     0m0.025s

MTASC “bytecode” Intel + Swfmill Intel

real    0m0.227s
user    0m0.156s
sys     0m0.061s

real    0m0.102s
user    0m0.073s
sys     0m0.025s

real    0m0.102s
user    0m0.073s
sys     0m0.026s

real    0m0.101s
user    0m0.073s
sys     0m0.026s

Creo que sobran las palabras… :D

Pues eso… ¡que lo disfruten!

Nota: Si alguien tiene algún proyecto gordo donde se puedan hacer pruebas más contundentes (el mío es sólo un test) le agradecería que pusiera sus comentarios, o que me enviara código a ale {arrobilla} bomberstudios {puntillo} com

Update: Ante el clamor popular, aquí están los binarios compilados:

Los binarios son sólo para Mac Intel (no son Universales) y sólo los he probado en 2 equipos. Se agradecerán comentarios si funcionan en más cacharros…

Un nuevo tag XHTML: CWT

Es un hecho demostrado de la vida profesional de cualquiera que trabaje con clientes el que, antes o después, tendrás que producir algo con lo que no estás de acuerdo.

La discrepancia puede ir desde el inofensivo “el color no es apropiado” hasta el demoledor “este proyecto no tiene ningún sentido”, pasando por toda una gama de emociones que, a veces, cuesta trabajo describir…

Comoquiera que el desarrollador web es un ser social (léase: nos encanta mirar lo que andan haciendo nuestros compañeros de profesión para “inspirarnos”), a veces surge la necesidad de justificar ante nuestra audiencia el por qué de una tipografía infernal, un icono horrible, o toda una paleta de colores sin sentido aparente…

El gran inconveniente de trabajar para clientes (aparte de trabajar para clientes), es que normalmente suele ser poco interesante ser un bocazas. Publicar en un foro o en tu blog que los colores de tu último trabajo surgieron de la retorcida mente de algún “middle manager” incapaz de asumir que el hecho de que a su mujer le encante el rosa no constituye un argumento de peso para cambiar el color de un site es contraproducente. Por no decir que es una grosería. O algo peor…

Pero tus compañeros de profesion deben saber que tú jamás serias capaz de presentarle al mundo tal tutti-frutti de tipos y colores sin tener pesadillas por las noches… Que tu preparación y años de estudio te impiden pasar a producción un diseño sin retícula sin que se te abra la úlcera… En definitiva, que si algo no está perfecto, definitivamente, no es porque no seas capaz de hacerlo, sino porque han intervenido “causas de fuerza mayor”

Es por ello (oye) que desde Sofá Naranja proponemos una extensión a la especificación XHTML 1.1, en forma de tag:

El tag elemento <cwt/>

El nombre ‘cwt’viene del inglés “Client Wanted This” (“el cliente pidió ésto”). Está en inglés por el mismo motivo por el que están en inglés todos los tags de (X)HTML: porque el Esperanto no tuvo mucho éxito, y escribir un parser de tags multilenguaje habría llevado a Microsoft a la ruina.

Es un tag que convertirá tus páginas en código no válido (aunque si necesitas usarlo lo más probable es que de todas formas no valide).

La función del tag ‘cwt’es marcar aquellas partes de tu site que, lejos de ser el resultado de un sesudo análisis, son producto de ese ente despiadado que convenimos en llamar “El Cliente”.

Es un tag estríctamente semántico. No tiene representación visual, aunque si estás usando tags ‘cwt’en tu código, quizá estés tentado de añadir el siguiente código en tu CSS:

cwt {
    display: none !important;
}

a pesar de que (mientras el W3C no apruebe el tag ‘cwt’) no servirá para nada…

Veamos un ejemplo…

Este era tu código antes del ‘cwt’:

<table width="768px">
    <tr>
        <td><img src="/img/spacer.gif" width="768" height="1" /></td>
    </tr>
</table>

y éste es tu código después del ‘cwt’:

<cwt>
    <table width="768px">
        <tr>
            <td><img src="/img/spacer.gif" width="768" height="1" /></td>
        </tr>
    </table>
</cwt>

Ahora tus compañeros sabrán que dejaste de maquetar usando tablas hace años, y que en este caso sólo lo hiciste porque tienes que pagar una hipoteca…

Desencadenado por: nadie en particular, de momento.

Furilo me comenta que el ‘cwt’es un candidato perfecto para convertirse en un microformato. Seguiremos informando si finalmente nos liamos la manta a la cabeza y lo proponemos como un standard :D

Update: Gracias a mort por la puntualización sobre ‘tag’vs ‘elemento’. Y veo que lo del microformato va a haber que ir planteándoselo en serio… :D

Update 2: En breve con todos ustedes, clientwantedthis.com :D