Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

miércoles 23 de enero de 2008

MooTools 1.2 Beta 2 liberado!

Mootools logoBueno ya han pasado 2 meses desde que el equipo de Mootools liberó la Beta 1.

Han solucionado bugs, se mejoraron las características, pero la más grande de ellas en la que han trabajado es la documentación, de la cual hay aquí un link temporario para la documentación de la beta 1.2 de mootools.

Dentro de las características que han refinado para la Beta 2 de mootools 1.2 se encuentra la característica Element Accessors. Es completamente nueva para 1.2 y cuyo objetivo es facilitar el trabajo con elementos y sus atributos, propiedades o "atributos especiales".

Veamos un ejemplo básico. Quiero trabajar con el atributo href de un elemento:





//setter
$(element).set('href', 'http://mad4milk.net');
//getter
$(element).get('href');



Además, el método set acepta cualquier Objecto conteniendo cualquier propiedad "setteable", veamos otro ejemplo:




$(element).set({
href: 'http://mad4milk.net',
text: 'mad4milk website',
morph: {duration: 200, transition: 'quad:out'},
events: {
click: function(){
document.location.href = this.href;
return false;
}
}
});


Está bueno eh? Ahora se puede setear básicamente todo sin usar chain. Si bien es válido seguir usando chain, este método es preferible cuando se usan múltilples métodos de Element en una colección de elementos: iterará a través suyo una sola vez, lo cual hará que el código corra más rápido.

jueves 6 de diciembre de 2007

Reduciendo el tamaño de tus páginas web

Más de una vez me ha sucedido tener que optimizar un sitio hecho por terceros (e incluso uno propio).

Gracias a mootools (aunque ya conocía packer de Dean Edwards) me enteré del concepto de "minimizar" (lo cual consiste en eliminar los espacios en blanco innecesarios, así como remover los comentarios dejados por el desarrollador) un archivo de javascript. Esto por sencillo que pueda sonar es realmente muy útil, ya que efectivamente se logra reducir el tamaño en bytes de nuestros archivos.

Las mentes siniestras como la mía :) comenzaron a hilvanar toda clase de formas en las cuales "exprimir" cada bit en los archivos (html, php, js, css).

La mejor forma que vengo manejando hasta el momento es trabajar con una carpeta en la cual tenemos todos nuestros archivos "fuente" prolijamente indentados y comentados, sin escatimar en los espacios en blanco que contribuyan a la legibilidad del código.
Esta es la carpeta que contiene (digamoslo así) los archivos "legibles por humanos".
A la hora de publicar nuestros archivos en internet, nos valdremos de aplicaciones que nos permitirán remover todo aquella información que le es innecesaria al servidor.

Sin duda que suena tedioso, ¿no? :)
Bueno, acá es donde viene la magia del SVN...usamos un "hook" el cual ejecutará nuestras aplicaciones sobre nuestros archivos "exprimiéndolos" y luego los publicará en el servidor. ¿Suena mejor, no?

De esta forma contamos con nuestra versión "human friendly" y la versión publicada "server friendly".

Lo que no he mencionado aún son las dichosas aplicaciones, así que aquí van:

  • JsMin
    Esta aplicación minimiza archivos javascript

  • YUI Compressor
    Esta aplicación minimiza archivos javascript

  • HTMLTidy
    Esta aplicación no solo optimiza el código sino que además lo ordena y corrige código inválido.

  • CSSTidy
    Esta aplicación optimiza el código de la css reescribiendo aquellas cosas redundantes y borrando espacios innecesarios.

  • OptiPNG
    Esta aplicación recomprime imágenes a un tamaño menor.

viernes 30 de noviembre de 2007

Formas abreviadas de notación Javascript

Es un hecho: existen varios mitos y leyendas acerca de las capacidades de Javascript.

Ha sido un lenguaje bastante "bastardeado" por los programadores que vienen de otros "mundos". Esto ha provocado (además de toda clase de objeciones y prejuicios frente a su uso) toda clase de mitos y leyendas (también urbanas).

Me ha pasado más de una vez de explicarle a un programador "server-side" las cosas que se pueden hacer con javascript y he obtenido el famoso "ohhhhh...no sabía que se podía hacer eso con Javascript" o bien el clásico "ohhhhh...no sabía que era tan potente!".

Sin ir más lejos ayer en el trabajo estuve con un compañero explicándole como utilizar JSON para comunicarse en forma "liviana" con el servidor, y en un momento fue increíble ver su regocijo frente a las beldades de utilizarlo.

¿Por qué tanto preámbulo?, bueno, es que recientemente me he topado con un artículo escrito por Chris Heilmann en el que resume claramente las notaciones abreviadas de Javascript

Así que a continuación intentaré transcribir dicho artículo:

Notación abreviada de Arrays


¿Quién no ha visto cosas como estas?


var links = new Array();
links[0] = 'http://cuteoverload.com';
links[1] = 'http://icanhascheezburger.com';
links[2] = 'http://pencilsatdawn.wordpress.com';
links[3] = 'http://apelad.blogspot.com';


Esto es bastante entreverado (hay que repetir el nombre del array para cada elemento). Al cambiar el órden de de un elemento hay que cambiar también el número, lo cual no es necesario ya que el número se coloca automáticamente. Tan solo basta con usar "[]":


var links = [
'http://cuteoverload.com',
'http://icanhascheezburger.com',
'http://pencilsatdawn.wordpress.com',
'http://apelad.blogspot.com' // <-- este es el último y NO LLEVA COMA!
];


Esto es mucho más obvio desde un punto de vista visual. La indentación hace más sencillo "espiar" donde comienza y finaliza el array.

Cada elemento debe ser separado por una coma, pero teniendo la precaución de no dejar coma al final. De este modo pueden anidarse arrays:


var links = [
'http://cuteoverload.com',
'http://icanhascheezburger.com',
[100,200,20,'foo'],
'http://pencilsatdawn.wordpress.com',
'http://apelad.blogspot.com' // <-- este es el último y NO LLEVA COMA!
];


NOTA: He aquí otro truco: para agregar un nuevo elemento a los arrays puede usarse tanto el método push() ó la propiedad length:


links.push('http://dailypuppy.com');
links[links.length] = 'http://bigeyedeer.wordpress.com';

¿Arrays asociativos?


Otro mito (del cual fui partícipe lo confieso)que perdura es que Javascript permite crear "arrays asociativos", con lo cual no solo se permite numerar los elementos sino darles nombres! A continuación un ejemplo:


var links = new Array();
links['Cute Overload'] = 'http://cuteoverload.com';
links['I can has cheeseburger'] = 'http://icanhascheezburger.com';
links['Pencils at dawn'] = 'http://pencilsatdawn.wordpress.com';
links['Hobotopia'] = 'http://apelad.blogspot.com';


Esto es en realidad una forma de crear un objecto no un array
¿Quieres una prueba? – Haz un alert(typeof links) o bien alert(links[1]).

Declaraciones simples if-else – pregunta y define con la notación ternaria


Es posible abreviar declaraciones simples if dramaticamente. Ejemplo:


var YUIguy;
if(city === ‘London’){
YUIguy = ‘Chris’;
} else {
YUIguy = ‘Eric’;
};


Nuevamente, mucha repetición. La notación ternaria soluciona el problema:

var YUIguy = city === ‘London’ ? ‘Chris’ : ‘Eric’;

Muchos signos de igual...tal vez algunos paréntesis lo harían más claro:

var YUIguy = (city === ‘London’) ? ‘Chris’ : ‘Eric’;

¿Qué sucede aquí? Defines la variable YUIguy y le asignas un valor. Luego viene la declaración, en este caso una comparación de la variable city y si esta es igual a la string London (=== compara para ambos el valor y el tipo, mucho más seguro que ==).

Entonces preguntas si es verdadero o no usando el signo de interrogación.
La opción a la izquierda de los dos puntos (:) es la respuesta a la pregunta cuando se alcanza la condición y la opción a la derecha de los dos puntos (:) es la respuesta cuando no se alcanza la condición. Cualquier condición que puede ser verdadera o falsa puede ir dentro de paréntesis.


var direction = (x < max) ? 'left' : 'right';


Valores por defecto


Esta si que es buena, y creo que no mucha gente la conoce. También reconozco que cuando lo vi por primera vez (gracias a Nico Sanguinetti aka "Foca") quedé gratamente sorprendido :)

Damas y caballeros con Uds. el operador por defecto "double pipe (||)". Este es terriblemente útil cuando nos queremos asegurar que algo se setea con un valor por defecto. El siguiente ejemplo es algo que no debería mostrarse más:


var section = document.getElementById('special');
if(!section){
section = document.getElementById('main');
}


Nuevamente, repetición innecesaria, ya que lo mismo puede escribirse:


var section = document.getElementById('special') || document.getElementById('main');


Si lo primero no está definido, lo segundo se asigna como valor a la sección.

Bueno, ahora si que no hay excusas para programar en javascript en forma más prolija ;)

miércoles 14 de noviembre de 2007

Mootools 1.2 Beta 1 liberado!

Realmente hay varias opiniones en cuanto a frameworks javascript...no todo el mundo comparte la misma opinión. Mucha gente se inclina por prototype, jQuery u otras opciones.

En lo personal, soy un gran fanático de Mootools...aquellos que me conocen saben que "tengo mootools tatuado en el pecho" ;-)

Hablando en serio, este framework (del cual ya postearé información más interesante) está liberando la versión 1.2 Beta 1.

Entre las mejoras respecto de la versión anterior están:

  • Mejoras en la clase Hash (esto está buenísimo!)
  • Specs
  • Mejoras en los efectos
  • Nuevo objeto browser con información del navegador
  • Pseudo selectores CSS3!
  • Mejoras en la performance de los selectores css

JSSpec

Recientemente me topé con JSSpec... es un framework Javascript del tipo BDD(Behavior Driven Development o Desarrollo Orientado a Comportamiento) que soporta IE6/7, FF2, Safari3.

Funciona en forma similar a RSpec (un framework BDD para Ruby) pero provee mensajes de fallo más útiles. Por ejemplo, muestra diferencias entre dos strings o arrays.

Realmente interesante y algo a profundizar...que lo disfruten!