Error 503 muy geek

El otro día intenté entrar en el blog de Tuti PR. Esa chica tiene siempre algo interesante que decir y junto a motagirl2 forma parte del mundillo bloggero femenino que realmente sigo.

Aunque podría escribir un post sobre Relaciones Publicas y Emprendimiento que es de lo que Tuti sabe, en ralidad me voy a centrar en un error. Por lo visto su blog estaba sobrecargado justo en el momento en el que entré y lanzó el error 503.

Un error 503 es un error de sobracarga, seguramente porque algun spider esté rastreando tu web en ese momento, estas sufriendo un efecto meneame o algo similar. Aunque puede que no sea directamente tu web, pero si otra con la que compartes hosting.

A pesar de no poder leer los ultimos posts de tuti si que vi algo que me alegró la vista. Como el servidor en el momento de saturarse debe trabajar lo menos posible lanza una página estática. Esta página se puede personalizar, y ya que tenemos que devolver una pagina estática que sea cool (o geek). Esto es lo que me encontré:

Lo mejor de todo es que la cara de Moss (IT Crowd) no es una imagen. Eso sería muy pesado y consumiría ancho de banda, y estamos hablando de una página que se devuelve cuando el servidor está saturado, así que mejor que no tenga imagenes. ¿Y que puede sustituir a las imágenes en estos tiempos? Pues sí, el CSS. La cara de Moss está hecha completamente en CSS.

No puedo mostrar el trozo de código css+html por aquí porque me da problemas pero es la listra de divs y su respectivo identificador indicando el la posición el tamaño y el color.

Me tendré que manufacturar algo parecido XD. Un 10 para el hosting de Tuti.

La funcion Dolar

Si llevas tocando JavaScript poco tiempo quizá aun no la hayas usado, pero por poco que lleves usando algun framework (biblioteca/libreria) seguro que te suena.
La función $ viene siendo de las más usadas o ampliamente implementadas en cualquier libreria JS para el manejo del DOM.

Que hay del DOM

DOM son las siglas de Document Object Model. La página html que estás viendo se estructura en el navegador como un árbol, en el que cada uno de los nodos del árbol es un objeto. El hecho de que se el navegador controle la página como un grupo de nodos Objeto beneficia al programador que quiere trabajar con esos objetos. Tratando cada elemento como un objeto le podemos asignar propiedades, eliminarlo o crear nuevos dinámicamente.

Cuando modificas un objeto visible del DOM los cambios se ven reflejados en el navegador. Si quieres ver más cosas sobre el DOM puedes ver la gran documentación de Mozilla de cómo Gecko (Motor de renderizado del a fundación Mozilla) implementa el DOM (DOM Gecko). Si cuando hayas terminado con esto te apetece profundizar más y tienes la posibilidad de poner el ‘Modo Dios’ de lectura puedes pelearte con la docu del w3c, que son los que dicen como tiene que ser el DOM (w3c DOM).

Tocando los nodos del DOM

Visto lo visto, si queremos que la página cambie sin recargar nos va a tocar modificar los elementos del DOM en el lado del cliente. Para acceder a un elemento que queremos modificar tenemos que acceder a el como a un objeto que es. Todos los objetos tienen un padre, y el padre de todos (la raíz del árbol) es el documento en si, es decir, el objeto document.

Para acceder al árbol existen distintas funciones. Estas nos permiten acceder al primer hijo, al último o a la lista de hijos y seleccionar el que queremos mediante corchetes:

result = document.firstChild.childNodes.length;//2
result = document.firstChild.childNodes[0];// [object HTMLHeadElement]
result = document.firstChild.childNodes[1];// [object HTMLBodyElement]
result = document.firstChild.childNodes[1].childNodes[n];//[object HTMLDivElement]

Acceder así a los elementos es bastante arido, por eso hay otras funciones que nos acortan el trabajo

Funciones que devuelven un HTMLCollection.

La definicion en IDL es:
interface HTMLCollection {
readonly attribute unsigned long length;
Node item(in unsigned long index);
Node namedItem(in DOMString name);
};

result = document.getElementsByTagName("div");//[object HTMLCollection]
result = document.getElementsByName("nombre");//[object HTMLCollection]
result = document.getElementsByClassName("nombreDeLaClase");//[object HTMLCollection]

Seleccionar por identificador a veces es más comodo porque el id debe de ser único

result = document.getElementById("identificador");// [object HTMLDivElement] porque hemos dado ese id a un div

Si tenemos más de un elemento con el mismo identificador (cosa que no debe ocurrir) hay que tener cuidado. La funcion ‘getElementById’ devuelve un solo Element (de ahi su nombre en singular) así que nos devolverá la primera ocurrencia solamente.

Los corchetes[] molan

La definición en del objeto HTMLColection nos da una interfaz para seleccionar un elemento concreto ya sea por nombre o por identificador, pero los corchetes facilitan mucho la vida del programador. Se puede invocar por nombre, identificador o numero de orden del elemento de la colección que queramos:

var result = document.getElementsByClassName("nombreDeLaClase");
result.namedItem("nombre") === result["nombre"];// true
result.item("identificador") === result["identificador"];// true
result.item(0) === result[0];// true
result.length;// 1

Para acceder a un elemento que esté en la página usamos a la estrella de las funciones de manejo del DOM:

var miElemento = document.getElementById("identificador");

Así tenemos en la variable ‘miElemento’ el elemento/objeto del DOM con id «identificador». No tenemos que sabernos la ruta completa.

Y una vez seleccionado el elemento que queramos podemos acceder a su contenido en formato HTML. Con innerHTML podemos leer y escribir su contenido directamente. Este método no es un estándar de la especificación del lenguaje ECMAScript, pero todos los navegadores lo implementan. Lo inventó microsoft para una de sus primeras versiones del explorer y al extenderse su uso por comodidad, todos los browsers lo impementaron. Tan sencillo como:

result = document.getElementById("identificador").innerHTML;//a

Con todo esto manejamos el DOM a nuestro gusto, pero ¿me estoy saliendo del tema? no. Como hemos visto se puede acceder de distintas formas a los elementos de nuestra página. Por nombre, id, clase o posición en el árbol, pero escribir estas funciones con un nombre tan largo, con nombres tan parecidos para hacer lo mismo y obtener una tipo de objeto un tanto extraño no es muy cómodo para desarrollar.
La función dolar tiene que ver mucho con el manejo del DOM, y es que esta función surge a raíz de esta problemática.

PrototypeJS

En Prototype la funcion $ es la forma acortada de ‘document.getElementById’. En realidad tiene algo más de potencia ya que si le pasamos varios argumentos nos devolverá un vector con esos elementos seleccionados.
Así que devuelve o un elemento o un array con elementos. Ojo, si los elementos no existen en el árbol nos devolverá un array vacio.

Para seleccionar elementos del DOM Prototype viene con el metodo $F que viene a hacer lo mismo que $ pero dirigido a formularios. Como ellos dicen “es un alias comodo de Form.Element.getValue”.

Pero la funcion que realmente aporta ahorro al desarrollador es la funcion doble dolar $$(). El parámetro pasado a esta funcion debe ser un string que contenga el elemento o elementos a seleccionar, pero aqui viene lo bueno, acepta sintaxis CSS. Es decir que si quemos selecciona un elemento que tenga class con valor “miElemento” introducirmos : $$(“.miElemento”). Hasta aquí poca novedad, pero y si queremos seleccionear los elementos de una lista que tnegan class “miElemento”, pues la llamada será así: $$(“li.miElemento”) y así con todo tipo de selectores css http://www.w3.org/TR/css3-selectors/
A diferencia de $, $$ devolverá siempre un vector de Element.

MooTools

En Mootoos encontramos algo parecido en cuanto a funciones dolar se refiere. La funcion dolar está orientada a identificadores y encontramos los selectores CSS en la doble dolar. Contiene los selectores CSS3.
El selector CSS de MooTools se llama Slick. Lo sacaron para la version 1.3 de la librería y mejora en un 50% el selector de la version 1.2. A demás Slick es más rapido que el selector CSS de Prototype en un porcentaje variable pero en todos los navegadores.
Tambien le podemos pasár a la funcion $$ uno o más objetos Element, y devolverá una instancia de Element que los contenga.
Como vemos Dollars de MooTools añade algo más de funcionalidad que el Dollars de Prototype. En MooTools obtendremos de $$ una instancia del objeto Element de MooTools (como en Prototype) pero la mejora está en que acepta no solo cadenas con selectores si no también elementos propios.

jQuery

jQuery es una libreria orientada al DOM, de hecho la funcion $ es un alias de la funcion jQuery. La funcion $ nos devolverá un objeto jQuery que es la que contiene toda las funciones de la librería. Es la forma de trabajar en jQuery, al objeto que tenemos le hacemos lo que queremos.
Pero a la hora de pasarle parámetros, el $ de jQuery es el más versatil.
Acepta selectores CSS, elementos del DOM o arrays de elementos. A demás con los selectores podemos indicarle un contexto en el que seleccionarlo, si es que sabemos donde está lo que buscamos y no queremos que nos devuelva partes que estén más allá de ese ambito.
El selector jQuery es el más rápido de las tres librerías. Pero no solo de selectores vive el hombre. $ de jQuery acepta codigo HTML a pelo. ¿Y para qué? para generarlo dinamicamente. Esto nos permitirá crear partes de la pagina al vuelo para insertarlas donde queramos.
Por si fuera poco $ en jQuery también es un alias del metodo “$(document).ready” (que es como asignar un metodo en “document.onload”). Así que si le pasamos como parámetro una funcion, esta será ejecutada tras la carga completa del documento.
Sin duda es la función Dollar más versátil. Esta librería está orientada a usar el $ y a usar el DOM, de esta manera ahorra muchas lineas de código a los programadores que solo utilicen JavaScript para manejar el DOM, que son la mayoría, por eso está teniendo tanto exito.

Está claro que el $ no da la felicidad, por eso cada cual se lo implementa a su manera. Es el nombre de función más representativo que existe, corto y poco común. Por corto le proporciona ahorro de tiempo en la programación, y lo poco común le proporciona ahorro de tiempo en la lectura del código.
Como en definitiva para una gran proporcion de programadores vienen usando JavaScript para manejar el DOM sin incluir mucha más logica en las aplicaciones JS, el seleccionar elementos (sea estilo CSS o no) el mejor alias para un selector es el caracter Dolar.
Sinceramente, aunque sea para acortar la funcion “document.getElementById” ya es útil. Si como hemos visto le añadimos algunas funcionalidades extra mejor que mejor.

Metodos de instancia y de clase

En JavaScript no existen clases, se simulan las clases con objetos funcion que hacen las veces de constructor. Pero a pesar de ello a los desarrolladores backend les sigue gustando usar clases. En general a todo el mundo que venga de otro lenguaje OO le gusta seguir utilizando clases, o algo que las simule, para instanciar los objetos que van a utilizar.
En la documentacion de Prototype JS clasifican los métodos de una «clase» en dos categorías: métodos de instancia () y métodos de clase (). Por ejemplo la clase Element que se usa para trabajar con el DOM.

El caso de jQuery es bastante distinto. JQuery es un único objeto (lo que seria una clase para Prototype) con distintas propiedades. Cuando usamos el selector $, este nos devuelve un objeto instancia de jQuery, que referencia al elemento del DOM que le hallamos indicado. Este objeto instanciado, tiene propiedades comunes al objeto jQuery pero otras muy variadas. Esto es así porque en el objeto instanciado puede contener un array de elementos del DOM, todo el documento (con $(document)… ) o un div creado al vuelo y que no cuelga de ninguna rama del DOM aun; en general cualquier cosa, por eso tiene propiedades varias para trabajar con cualquier elemento posible.

La documentación de jQuery muestra los metodos de dos formas dependiendo de si son de instancia o de clase. Los métodos de clase aparecen con las nomenclatura «jQuery.metodo()» y los de instancia aparecen empezando por un punto: «.metodo()» que son los que normalmente para trabajar de forma ágil se usan del modo: «$(«#id»).metodo()«.

Documentación jQuery Prototype Style

Me preguntaba como sería ver la documentación de jQuery al estilo de la docu de PrototypeJS. En definitiva aparecería una sola clase (jQuery en si) seria algo parecido a lo que sigue:

Propiedades de jQuery: Class Method

prototype fn extend noConflict isReady ready bindReady isFunction
isArray isPlainObject isEmptyObject error parseJSON noop globalEval nodeName
each trim makeArray inArray merge grep map guid
proxy uaMatch browser support props cache expando noData
data removeData queue dequeue attrFn attr event Event
find expr unique text isXMLDoc contains filter dir
nth sibling fragments clean cleanData style css curCSS
swap get getScript getJSON post ajaxSetup ajaxSettings lastModified
etag ajax handleError active httpSuccess httpNotModified httpData param
speed easing timers fx offset

Propiedades del prototipo de jQuery (objeto jQuery): Instance Methods

init selector jquery length size toArray get pushStack
each ready eq first last slice map end
push sort splice extend data removeData queue dequeue
delay clearQueue attr removeAttr addClass removeClass toggleClass hasClass
val bind one unbind delegate undelegate trigger triggerHandler
toggle hover live die blur focus focusin focusout
load resize scroll unload click dblclick mousedown mouseup
mousemove mouseover mouseout mouseenter mouseleave change select submit
keydown keypress keyup error find has not filter
is closest index add andSelf parent parents parentsUntil
next prev nextAll prevAll nextUntil prevUntil siblings children
contents text wrapAll wrapInner wrap unwrap append prepend
before after remove empty clone html replaceWith detach
domManip appendTo prependTo insertBefore insertAfter replaceAll css serialize
serializeArray ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend show
hide _toggle fadeTo animate stop slideDown slideUp slideToggle
fadeIn fadeOut offset position offsetParent scrollLeft scrollTop innerHeight
outerHeight height innerWidth outerWidth width
*si el objeto es un elemento del DOM también aparecerá en esta lista la propiedad ‘context’.

Propiedades Comunes de jQuery y de su prototipo.

En general los métodos de instancia y de clase comunes son los siguientes:

extend ready error each map data removeData queue
dequeue attr find text filter css get offset

En este articulo no me voy a meter con la diferencia entre una librería y otra, eso ya quedaría para otro momento. Pero en cuanto a documentaciones se refiere me gusta bastante el estilo claro de la de Prototype. Aunque ya hace tiempo que me acostumbré a buscar en la documentación de jQuery, veo que no pueden hacer toda la documentación en una sola página. Su documentación sigue la misma filosofía que la librería pero puede ser confuso para quienes empiezan a trabajar con ella, y todo viene de que hay que cambiar la forma de pensar cuando se cambia de lenguaje. JavaScript is diferent. XD

Dos tipos de herencia en JavaScript

JavaScript arrastra con sigo una gran parte de sintaxis de los lenguajes clasicos orientados a objetos, sin embargo la orientación a objetos de JS es un tanto distinta, ya que aunque se puede considerar que todo son objetos como en Java, en JS no existen las clases, lo cual los distancia bastante.
Una parte muy confusa es la herencia entre objetos, no entre clase porque que no existen, y que un objeto herede de otro es un tanto extraño.
Para empezar, como deciamos, todo son objetos incluidas las funciones. Las funciones son objetos ejecutables, y se pueden ejecutar de dos formas, de la forma tradicional o con la instruccion ‘new’. De la manera tradicional la funcion devuelve lo que devuelva mediente return. Con ‘new’ la funcion se puede ver como un constructor (de hecho lo es) que devuelve un objeto al que se puede hacerse referencia dentro de la propia funcion con ‘this’; en este caso el ‘return’ es implicito y no hace falta que aparezca la instruccion ‘return this’.

function A(){
 this.nombre="aaaaaa";
 this.apellido="111111";
}

var aa=new A();

aa instanceof A;//true
aa.nombre;//aaaaaa
delete aa.nombre;
aa instanceof A;//true
aa.nombre;//undefined

Para implementar herencia entre objetos la primera instrucción que debe aparecer en el constructor es la llamada al constructor del padre. Esto se conoce como alquilar el constructor.

Podemos imvocar cualquier funcion con los métodos ‘call‘ o ‘apply‘.
A parte de las diferencias de rendimiento entre uno y otro en los distintos navegadores, lo que distingue a estos dos métodos es que ‘apply‘ debe ser invocado con los todos parámetros dentro de un array; en ‘call’ los parámetros pueden aparecer del mismo modo que en la llamada normal a la funcion.
En los dos métodos el primer argumento debe ser el objeto al que se aplica la funcion. En nuestro caso el objeto es ‘this‘ ya que desde nuestro constructor invocamos al constructor de otro objeto.

function B(){
A.apply(this,arguments);
this.nombre="bbbbbb";
this.apellido="222222";
}

Como el prototipo de la funcion puede ser extendido fuera de esta debemos de añadir todas sus propiedades al prototipo del objeto heredero. Esto se puede hacer de varias formas pero las dos más interesantes son las siguientes:
B.prototype=new A()  vs.  B.prototype=A.prototype
Con cualquiera de las dos elecciones el metodo ‘instanceOf’ de un objeto creado mediante ‘new B()’ nos devoveria verdadero para el objeto original y para el heredado, pero a parte de esto el resultado interno no es el mismo en los dos casos.
B.prototype=new A()
En este caso hay que tener en cuenta que el prototype de B es una instancia de A, y que su constructor ha sido ejecutado no solo en el constructor sino tambien para crear el prototipo de manera que si una propiedad o funcion no existe o es borrada en el objeto hijo, puede aun existiendo en la clase padre si se definió en su constructor. Esto es así porque al no encontrar cierta propiedad la maquina virtual de JavaScritp continua la cadena de prototipos para encontrarla antes de devolver un error y terminar con la ejecucion bruscamente. No siempre esto es malo, en ocasiones preferimos que las propiedades repetidas para usar la del padre en caso que quisieramos. Solo hay que tenerlo en cuenta

B.prototype=new A();
var bb=new B();

La propiedad ‘__proto__’, o lo que es lo mismo el prototype del constructor de bb (bb.constructor.prototype === bb.__proto__), está apuntando a una instancia del objeto A, la cual apuntará a través de su constructor al metodo ‘A’, se van generando dos saltos en cada herencia entre objetos.
En este caso sucede que:

bb.constructor.prototype === bb.__proto__ //false

bb.constructor.prototype === A.prototype //true
//pero
bb.__proto__ === A.prototype //false

B.prototype=A.prototype;

B.prototype=A.prototype;
var bb=new B();

Aquí la propiedad ‘__proto__’ del objeto bb apunta directamente a la funcion ‘A’, y no a un objeto instanciado de esta.

bb.constructor.prototype === bb.__proto__ //true
bb.constructor.prototype === A.prototype //true
bb.__proto__ === A.prototype //true

En este caso hay que tener en cuenta que el prototype de B el prototype A, por lo tanto una vez eliminado un elemento o funcion de nuestro objeto, quedará borrado para siempre y su lectura devolveria ‘undefined’.

B.prototype=new A();

bb instanceof A; bb instanceof B;// true true
bb.nombre;//bbbbbb
delete bb.nombre;
bb instanceof A; bb instanceof B;// true true
bb.nombre;//aaaaaa
delete bb.nombre;
delete bb.nombre;
bb instanceof A; bb instanceof B;// true true
bb.nombre;//aaaaaa

Más grados de herencia
¿Que pasa con la jerarquía de herencia?. Hay muchas maneras de crear herencia a partir de estas dos básicas. Uno de los patrones de herencia intenta crear un objeto intermedio entre el objeto hijo y el objeto padre.
En el siguiente ejemplo el objeto C utiliza como prototipo intermedio al objeto BtoC, de esta manera aunque hagamos un «delete C.nombre» los objetos creados a partir de un «new C()» seguiran teniendo la propiedad «nombre» de B.

function BtoC(){
 B.apply(this,arguments);
};
BtoC.prototype=new B();

function C(){
 BtoC.apply(this,arguments);
 this.nombre="cccccc";
}
C.prototype=BtoC.prototype;

var cc=new C();

cc instanceof A; cc instanceof B; cc instanceof C;// true true true
cc.nombre; cc.apellido; //cccccc 222222
delete cc.nombre; delete cc.apellido;
cc instanceof A; cc instanceof B; cc instanceof C; // true true true
cc.nombre; cc.apellido; //aaaaaa 111111
delete cc.nombre;delete cc.apellido;

Podemos decir que si utilizamos “prototype=new Clase()” rompemos la cadena de busqueda por los prototipos de la maquina virtual de JS. Los objetos en sí no tienen la propiedad prototype, por defecto solo la tienen los objetos Function. Así que emplear un tipo de herencia u otra depende de nuestros propios objetivos.

En mozilla proponen la herencia con la extensión de propiedades de un prototipo con las de otro, en definitiva es la misma extensión de un objeto con otro:

function extend(child, super){
 for (var property in super.prototype) {
  if (typeof child.prototype[property] == "undefined")
   child.prototype[property] = super.prototype[property];
  }
 return child;
}

https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_Revisited
La extensión aunque permite tranferir las propiedades de un constructor a otro no nos es útil si en nuestro código vamos a utilizar el metodo “instanceOf” para verificar que nuestro objeto tiene ciertas propiedades por defecto. En el caso de este tipo de herencia habria que utilizar “propiedad in objeto” para comprobar que existe.

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/prototype
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf
Javascript Patterns. Stoyan Stefanov.