Aprendiendo jQuery con la web del Senado, I

Notas previas.

En primer lugar, agradecer a los desarrolladores que han trabajado duramente en funciones.js y en aquellos que no se han molestado en pasarlo por un minimizador de código.

Se recomienda leer antes el artículo de Javier Ramírez Los problemas del desarrollo web en España resumidos en senado.es.

El código está disponible en este gist.

Durante esta serie de artículos nos olvidaremos de que todas las funciones son declaradas en el ambiente global.

El problema del peso.

 

Antes de ponernos con jQuery, veamos un poco cómo está hecho el archivo. El archivo pesa unos 45KB (según me chiva ls -lh) y tiene unas 1313 líneas (esto, chivado por wc -l). Lo primero que intento es ver cómo está el código. Para ello, usamos alguna herramienta como jslint o jshint. En este último caso, si pegamos el código y pulsamos en Lint, nos devolverá una lista con 50 errores, añadiendo un último error indicando que ha escaneado el 23% del código y ha parado porque ha encontrado demasiados errores.

Una vez pasado por jsHint, decidi pasarlo por el compilador de Google closure, para minimizarlo un poco. Al fin y al cabo, un vistazo rápido permite ver la ingente cantidad de comentarios que hay en el archivo. Está bien que haya muchos comentarios, lo único que me preocupa es:

  1. Que los han puesto en producción (gracias, Rocío, por sustituir los días escritos a fuego).
  2. Que haya código comentado, también en producción.

De ahí que me preguntase cuánto se ahorraría minimizando de la forma más básica el código. Para ello, he usado el compilador de Google closure en dos versiones. En la primera, he usado los parámetros por defecto; y en la segunda, he pasado la opción --compilation_level ADVANCED_OPTIMIZATIONS. Echando mano otra vez de ls -lh, vemos que con los parámetros por defecto, el archivo resultante pesa 22KB, mientras que usando las optimizaciones avanzadas, el tamaño baja hasta 15KB. El archivo se queda, respectivamente, en un 50% y un 25% del tamaño original. Todo esto, realizado en cinco minutos, sin mayores ajustes de la herramienta. Cabe destacar que closure genera 1 y 6 warnings, todos ellos referidos al uso de la variable this, excepto uno, que se trata de un código que no se ejecutará nunca (ya veremos qué).

cargar_atr_destacados

La primera función que estudiaremos es, justamente la primera del archivo, la función cargar_atr_destacados. Dicha función se encuentra en este gist. Empecemos a tocar las pelotas aprender un poco.

En primer lugar, suelo preferir declarar las funciones de la forma var cargar_atr_destacados = function() {};, pero, mientras se entiendan las diferencias, me da un poco igual.

Dentro de la función, vemos que estamos ejecutando realmente el mismo código para $('#img_destacados1 img'), $('#img_destacados2 img'), $('#img_destacados3 img'), $('#img_destacados4 img') y $('#img_destacados5 img'). ¿Pesado de leer, ¿eh? ¡Pues imagínate lo pesado que debe ser de mantener! Por eso, antes de estudiar lo que hace, vamos a convertirlo, sin modificarlo mucho, en un bucle. El resultado es el siguiente

No está mucho mejor, pero al menos hemos reducido el número de líneas a casi un 25%.

Empecemos a ver qué hace el código. Todos esos signos de dólar ($) es como se llama comúnmente a la función de jQuery. Dicha función sirve para muchas (pero muchas de verdad, ¿eh?) cosas, entre ellas seleccionar elementos dado un selector de CSS. En este caso estamos seleccionando las etiquetas img dentro de los elementos cuyo id es img_destacados seguidos de un número del 1 al 5. Puesto que hay varias imágenes que cumplen dicha propiedad, el resultado es un array o vector de elementos.

Por otra parte, vemos muchas llamadas al método eq. Dicho método, como podemos observar en la documentación oficial, sirve para seleccionar un elemento específico dentro del array. Por ejemplo, eq(0) selecciona el primer elemento, eq(1) el segundo, etc. Ahora veamos porqué el uso del método anterior es innecesario.

¿Que lo geque y lo seque?

El método attr de jQuery se puede invocar de distintas formas. Si lo invocamos con un sólo argumento, como en la tercera línea del código anterior, tomará dicho parámetro como el nombre del atributo a devolver. Puesto que lo estamos llamando en una colección, podríamos pensar que nos devolverá un array de valores, pero en realidad nos devolverá sólo el valor del primer elemento. A esta forma de llamarlo lo llamaremos getter, porque nos devuelve un valor.

Por otra parte, podemos llamarlo como un setter. Para ello, le daremos dos valores, el nombre del atributo y el valor a tomar. Podríamos pensar que entonces sólo dará el valor pasado al primer objeto; al fin y al cabo, es el valor que nos devolvía. Sin embargo, dará el valor a todos los elementos de la colección. Hay una segunda y tercera forma de usarlo como setter, pero os podéis mirar la documentación para esos casos.

En general, todas las funciones de jQuery que puedan ser usadas como getter y como setter tienen el mismo comportamiento: si están siendo usadas como getter devuelven el valor del primer elemento de la colección; si están siendo usadas como setter, actualizarán el valor de todos los elementos de la colección. Teniendo en cuenta lo que hemos aprendido en el párrafo anterior, podemos refactorizar nuestro código para que quede así:

Si además sabemos que podemos pasar un objeto con todos los pares claves-valor que queremos modificar en una sola llamada, el código es:

Grabado a fuego.

Pero aún tenemos ese for ahí que no me gusta mucho, pues realmente estamos harcodeando o, como diría nuestra amiga Rocío, grabando a fuego, la cantidad de elementos a modificar. Para ello, nos fijamos en que cada grupo de imágenes está metido dentro de un div con clase mod_destacados diferentes entre sí. Además, un rápido vistazo nos permite ver que no hay más div.mod_destacados que grupos de imágenes, si participásemos en el grupo de desarrollo estaría bien que nos aseguráramos de esto o, mejor, añadir una clase estilo js-mod_destacado. Por lo tanto, lo que haremos será buscar todos los div con clase mod_destacados y dentro de cada uno de ellos modificar los attributos alt y title de las imágenes. El selector para los div es tan fácil como $('.mod_destacados'). Veamos el código completo y después lo explicamos:

Para entender este último código, sólo necesitamos aprender lo que hace la función each y la función find.

Llamaremos a la función each siempre sobre una colección jQuery y le pasaremos como parámetro una función. jQuery llamará dicha función, una vez por cada elemento de la colección, con el índice de dicho elemento dentro de la colección actual, y el elemento en sí. Además, dentro de la función parámetro, this se referirá al elemento correspondiente de la colección.

¿Os acordáis de que os comenté que la función $ valía para todo? Pues bien, en la línea 3 podéis ver que la llamamos con un único parámetro, this. Éste no es un selector por lo que no sabemos aún qué hace. Antes llamábamos a $ con un selector CSS y nos devolvía un objeto jQuery que envolvía a la colección; ahora que le pasamos un elemento del DOM, ¿qué devuelve? La respuesta es muy simple: nos devuelvo un objeto jQuery que envuelve a dicho elemento. De esta forma, podemos usar todos las funciones de jQuery en él. Por ejemplo, en este caso, usamos la función find.

La función find(selector) es muy similar a $ sólo que restringe la búsqueda a los nodos de la colección padre. Así $(this).find('img') busca todas las etiquetas imágenes dentro de $(this), es decir, entre sus nodos hijos.

De esta forma, sabiendo muy poquito de jQuery, hemos reducido un script de 37 líneas a sólo 7. Además, si aumentamos el número de imágenes, o lo reducimos, nuestro script seguirá funcionando.

Notas finales.

Como último comentario, decir que actualmente se favorece el uso de prop frente a attr en jQuery. El problema con la web del senado es que están usando jQuery 1.3.2

La versión de jQuery usada en senado.es es 1.3.2
La versión de jQuery usada en senado.es es 1.3.2

 

Un vistazo rápido a github nos permite comprobar que esa versión es de hace 4 años.

Adding organization repos to Travis-CI: Part I

It was a nice FridayPorras and I were at the BeBanjOffice and  we were working on adding organization support to Travis-CI.

First, we needed to find where the user repos were being fetch. Said and done, we found that travis is using the ServiceHookController to ask the server for repos (and to update them too, but don’t hurry, we’ll get there in part II). The controller was using the github_repositories method in the User model. Finally, we arrived to Travis::GithubApi, where all our questions found answers.

repositories_for_user just relied on Octokit#repositories for getting the repos, so we added all the code after the plus sign. You might think that this code lacks the proper security, is wrong and that it shouldn’t be there (and damn it, you’re right!) but there is no easy way to retrieve only the repos where the user has admin privileges (we wasted hours on this and a quick message to Github confirmed it).  Basically, it asks for all organizations for the given user (beware! You need to make your membership public, otherwise it won’t work) and then flat_map them to the repos in the given organization (whether the user can administrate them or not).

Later, the each block was added so we could know whether the repo belongs to the user or to an organization.

Stop! Hammertime!

We needed a way to let the user know that a repo actually belongs to an organization, so we added that info to the template (that {{#if content.organization_name}} is ours :D) and added some style so it could look this awesome:

Travis CI - Distributed build platform for the open source community

We had some tough time trying to get it vertically centered, but after realizing that Github has its tags the same way as we do, we stop trying to fix it. And they still look awesome.

More coming in part II.

Tries: la pronunciación se deja como ejercicio para el lector.

El repositorio de github de trie. Tomad y usad todos de él.

Para ver el artículo de succint trie, añadid en Google Reader el feed http://stevehanov.ca/blog/index.php?atom El artículo se llama “Succint Data Structures: Cramming 80,000 words into a Javascript file“.

Próximamente la presentación en slideshare.

Próximamente el vídeo.

Cuando vea en qué formato sale lo de OvationApp, lo subo también (y también próximamente)

 

The Essential Guide to HTML5: a review

After reading this book I have some encountered feelings about it: on the one hand the content is correct, everything I tested worked fine, etc but on the other hand I really find annoying the form it is presented.

When I started reading, I expected to find more about CSS3 (a topic almost not covered in the book) and less Javascript, but since this is only an expectation, I’ll try my best so it doesn’t affect this review.

Since I wrote before, the content is correct. Covers a huge part of the new apis, the examples usedare not too complex yet interesting and it is not hard to follow. Without any doubt, the form code snippets are displayed. The code is displayed in a two-column table (one for code, one for comments) and each line (each line!) is commented. Seriously, I’ve seen the <html> line commented!

And even if the content is good, the table issue makes it really hard to read if you are a medium-experienced programmer. These are my encountered feelings: good content, not that good layout.

Creating a blur effect with rinzelight.

After releasing rinzelight 0.0.3, I wondered how hard addinga blur effect would be. So I started implementing it.

We are going to do two 1D blur. In first place, open a repl and start emacs (or vim). Use rinzelight.image for reading northern-lights.jpg

First, let’s start creating a blur-kernel function with two parameters, width and sigma. Rinzelight lacks of a kernel-rank constant, so let’s add it. Open src/rinzelight/constants and add the following line to the end:

We get a horizontal kernel, which we will apply twice, one horizontally and one vertically. For getting a vertical kernel, we write one final function called transpose-horizontal-kernel:

And now, we are ready to write the blur effect:

And this is the result of a (blur (read-image "samples/northern-lights.jpg") 5 1.5 repeat-op rendering-quality):

(blur img 5 1.5 repeat-op rendering-quality)
(blur img 5 1.5 repeat-op rendering-quality)

And that's it!

Introducing rinzelight 0.0.2

I started writing rinzelight long time ago. Exactly, I started on February. Sadly, since I wasn’t getting a few points about Clojure, I stopped working on it twenty days after for half a year.

But do not let me digress. Rinzelight is finally released! Actually, rinzelight 0.0.2 is released! But let me introduce you to rinzelight.

Opening an image.

Just use rinzelight.image namespace. Then, just provide read-image of a filepath or an InputStream. Just like this:

A hash?

Yes. Four fields: image, format, width and height.

It’s an image. Let me see it!

Command your repl to display-image.

What about saving it?

The correct spell is write-image. Just give it an image and an uri.

I want to change an image’s nature.

If you want to, you can. Just look for namespaces under rinzelight.effects. Lookup tables and affine transforms are already available. There are even map-image and map-pixel-location functions. If you want to use map-pixel-location, take a look at rinzelight.effects.helper-functions for a helping hand.

What about a few examples?

I hide them under examples. They are a bit obfuscated using criterium for benchmarking, but they are not hard to understand. For running them, use lein run. They’ll take a bit, since I use them as benchmarks.

The One where I spent a morning because -0.5 turned to be parsed as 1/2

This summer, I have been doing some amazing stuff for GeoGebra. First of all, I would like to thank two people: Miguel, my mentor, who guided me through all that really advanced mathematical stuff; and Heinz Kredel, JAS creator and developer, who answered all my questions and implemented my suggestions as quickly as I could write them.

This story is about a problem we found in JAS. It was really subtle, so I may need a brief introduction to the project I worked on: LocusEqu. That project retrieves the equation of “any” geometrical locus. If you don’t know what a locus is, Wolfram Math World defines it as “the set of all points (usually forming a curve or surface) satisfying some condition” . LocusEqu generates a few EquationExpression, and then, by using a EquationTranslator, it generates a GenPolynomial<BigRational> object.

For translating doubles, it calls the BigRational constructor whose only argument is a String. This is the code:

Can you spot the bug? Look at the 21st line. If s is “-0.5”, then n is new BigInteger(“-0”), and that’s what makes “-0.5” be parsed as 1/2.

Status update for GeoGebra.

My contributions for the first part of the first part of GSoC 2010 can be divided in two: general improvements and coding.

General improvements

I made a few general improvements on GeoGebra:

  1. Refactored build.dir in ant build file. Previously, build.dir wasn’t in the root directory.
  2. A few ant tasks were added, such compile-grammar, compile-oe (outside Eclipse), run-easyb and run-easyb-outside-eclipse.
  3. SVN properties were set in order to work outside Eclipse. This way, .class files will be kept out of the repo without the intervention of any Eclipse plugin.
  4. Easyb, a BDD groovy-based framework, has been included in order to test GeoGebra. It is not RSpec, but I guess it’ll do.

Coding

First, I started creating a few EquationPoint classes,  currently there are six EquationPoint children classes:

EquationPoint type hierarchy

  • EquationFreePoint represents an independent point.
  • EquationSymbolicPoint represents a dependent point,  EquationSpecialSymbolicPoint standing only for the locus point.
  • EquationNormalPoint and EquationPointVectorPoint are only auxiliar elements.

Then, a few EquationElement classes were added, these stand for the different constructions:

EquationElement type hierarchy

EquationElement is an abstract class containing a few basic methods:

  • forPoint: Given an EquationPoint, returns a String with the equation that means that the point is in the construction.
  • isAlgebraic: returns true if the construction is algebraic, and false otherwise.

Both EquationGenericCircle and EquationGenericLine are abstractions of specific line and circle contructions, all of them algebraic. EquationGenericSegment is to segment what EquationGenericLine is to lines. Obviously, EquationGenericSegment is not algebraic.

All of these classes are used together by EquationScope.

A pause for a screenshot.

Screeenshot

Click for enlarge.

A glimpse into the future.

What to do next?:

  • Maybe Equation should be a proper class, not just a String.
  • More equations.
  • Working out the locus equation.
  • Not using an algorithm twice.

About WordPress automatic upgrade.

I’m stupid, and here is why:

Long, long time ago,  when WordPress 2.7 was released I got excited about  the automatic upgrade feature. I never got to get it working, but I didn’t care at all. I don’t have that many plug-ins, and sometimes in a while, I just uploaded all the files via FTP. But I moved sergio.arbeo.net to WordPress after 3.0 release and then I realize that it was working there!

Then, wondering why, found out this post with its really easy solution: just add the following two lines to the WordPress .htaccess:

# Ensure PHP5 being used

# For WordPress auto upgrade

AddType x-mapp-php5 .php

AddHandler x-mapp-php5 .php

As I said, I’m stupid.