No se si daría error al compilar, pero da miedo de solo pensarlo
Category Archives: Código
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… :)
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
I love TextMate, III
Si escribes HTML y usas TextMate, hazte un favor a ti mismo y:
- Lee en el blog de TextMate cómo actualizar los bundles del repositorio
- Actualiza a la última versión de HTML.bundle
- Selecciona “Bundles » HTML » Includes » About Persistent Includes” y lee mientras babeas…

Si alguna vez tengo hijos, uno se llamará Allan…
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:

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
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
- Apple Developer Tools (incluídas en los CDs/DVDs del sistema operativo)
- DarwinPorts 1.2.1
- Código fuente de Swfmill 0.22.11
- GODI
- Script de instalación de MTASC
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:
- mtasc-1.12.native-macintel.zip 288Kb
- mtasc-1.12.bytecode-macintel.zip 172Kb (esta es la versión que va más rápido en mi sistema…)
- swfmill-0.2.11-macintel.zip 1,6Mb
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