elBlëg - Interactividad, usabilidad y web » Web Dev

10 buenas razones para usar Firebug

Yëco — Mon, 28 Dec 2009 06:14:11 +0000

Firebug una de las herramientas que ha revolucionado la forma en que hacemos web hoy en día, su uso nos es indispensable para muchos y en lo personal es la herramienta que más utilizo para trabajar después de Textmate.

La idea con este post, es recorrer diez de las mejores caracteristicas de Firebug. Así quienes no lo usan lo conocen y quienes lo conocen de repente puedan encontrarse con algo nuevo.

1. Consola

La primer cosa que vas a ver cuando abrís firebug va a ser el panel de consola . Después de verlo un momento podrías darte cuenta que es una versión alternativa de la consola de errores de Firefox que básicamente nos sirve para:

Registro de errores, advertencias y avisos
Habilidad para ejecutar código JavaScript

Pero firebug lo extiende un poco más, así que en su consola podés hacer cosas mucho más complejas como:

Registrar errores de Javascript, CSS, XML, XMLHttpRequest (AJAX) y de Chrome (no el browser… Si no de funcionalidad interna de firefox)
Ejecutar JavaScript en la página web actual
Usar el objeto console para hacer output desde tu scripts

Fijate en el código arriba, tiene algunos ejemplos de uso del objeto console de firebug, imaginate que abrís que ejecutás ese HTML. Eso te va a mostrar algo como esto en la consola:

2. HTML

El segundo panel – y en el que creo que vas a pasar mucho tiempo – se divide en varias secciónes que vamos a revisar acá.

Este botón es equivalente al “Inspect Element” que aparece en el menú contextual. Aparte de ser muy útil para seleccionar elementos en la página, también destaca el elemento seleccionado con un borde.
En esta sección tenemos la jerarquía del elemento que tenemos seleccionado y la habilidad de efectuar una serie de acciones en cada uno de los componentes de la jerarquía como:
- Copiar el inner HTML
- Crear expresiones de XPath
- Adjuntarle un observador de eventos (y registrarlos en la consola)
- Borrar el elemento
- Editar el elemento y sus nodos hijos.
- Mover el elemento a la pestaña DOM para inspeccionarlo.
Es la ventana principal del panel; util para recorrer todo el html, hacer modificaciónes rápidas al código y encontrar errores (Como cerrar un div muy pronto). El menú contextual tiene las mismas opciones que la sección 2
En esta sección se muestran los estilos computados por el browser. La posibilidad de hacer modificaciones en tiempo real al estilo y la habilidad inspeccionar herencias me parecen que son las caracteristicas más importantes.
En esta sección podés examinar fácilmente el box model de un elemento: tamaño del contenido, padding, offsets, márgenes y bordes.
La sección DOM genera una lista con todos los métodos y propiedades del elemento seleccionado.

3. CSS

La principal diferencia entre este panel y el que está como sección dentro de la pestaña HTML es que acá podés trabajar con estilos que no han sido interpretados por el browser aún, o sea que no han sido computados. De nuevo voy a destacarte y numerar las secciones (y características esta vez).

Si la página en la que estás trabajando contiene múltiples hojas de estilo podés seleccionar solo la que te interese ver La región principal donde se muestra el código
Modifica fácilmente las propiedades del CSS.
Podés deshabilitar el CSS desde ahí.

4. Script

A veces, cuando escribís JavaScript tenés que ensuciarte un poco las manos. La mayor parte del tiempo te vas a ver trabajando con la consola; Pero en condiciones extremas vas a tener que pasarte al script panel. Dadas esas condiciones extremas (que ocurren comúnmente), te presento este panel, así te empezás a familiarizar con él.

Un Dropdown para escoger el script que querés trabajar.
Funciones para Debugging: continue, step in, step over y step out. Estas se habilitan solamente cuando el código en ejecución llega a un breakpoint.
Sección principal. Acá colocás (y quitás) los breakpoints, también sirve para inspeccionar el código Javascript.
Similar al panel DOM panel, la sección Watch muestra los métodos y parametros para el código que se está debuggeando.
Muestra el stack de funciones en tiempo real.
Lista los breakpoints que se encuentran activos con un link a la línea donde se encuentra. Desde acá solo podés eliminarlos.

5. DOM

Es lo mismo que HTML->DOM. Dado que nada cambia de lo que te mencioné anteriormente, pasemos a la siguiente sección.

6. Net

Curioso de cuanto tiempo tarda la página en cargar? O querés saber cual pedido tarda más tiempo en completarse? Afortunadamente, todo eso puede hacerse en el panel Net.

Los pedidos pueden filtrarse de acuerdo a su tipo.
Todo pedido es mostrado en esta sección. Al final de la lista vemos un sumario que contiene: Numero de pedidos, tamaño, cuanto fué guardado en caché y el tiempo total que tomó completarlos.
Revela más detalles como: HTTP headers, respuesta y cache.

Pruebas de desempeño (Performance Testing)

Quedés probar el desempeño de una función o un bucle específico? Podés usar el “timer” de Firebug.

    function medirTiempo(){
        console.time("MiTimer");
        for(x=5000; x > 0; x--){}
        console.timeEnd("MiTimer");
    }

Tres pasos. Empezá por llamar “console.time” y le pasás un único key. Luego de esto ponés el código que necesitás probar. Finalmente, llamás “console.timeEnd”, y de nuevo como único parámetro, le pasás el key que utilizaste anteriormente. Voilá.

7. Reference

Este es un panel adicional, un add-on creado por CodeBurner. Como el nombre lo indica, con este panel tenés acceso rápido a las referencias de HTML y CSS. Me parece que el panel se explica solito.

8. PixelPerfect

Si has hecho slicing de un PSD, ya sabés el tiempo que nos quita en cada elemento de la composición. Y es ahí donde PixelPerfect demuestra su poder. Este add-on te ayudará bastante en esa tediosa tarea mostrandote cómo deben ir colocados los elementos con la ayuda de imagenes superpuestas al html.

Con este botón podés agregar varias imágenes superpuestas para la página actual.
Lista de superposiciones, desde acá podés agregar o quitar las imágenes.
Configuración de las superposiciones.

9. YSlow

Un buen add-on creado por Yahoo!. Este te sugiere mejoras basado en una serie de test de velocidad que hace. Con YSlow, podés obtener el grado de desempeño de un website. Podés identificar fácilmente los puntos que pueden ser mejorados, además de una serie de recomendaciones para hacerlo.

Aparte de las estadisticas que te muestra YSlow, te recomiendo JSLint.com para evaluar el JavaScript y Smush.it para las imágenes.

10. FirePHP

Y por último, pero no menos importante, FirePHP. Con este add-on, podés enviar información (warnings, errors, logging, info) transparentemente a la consola desde tu código PHP. Un ejemplo sería:

Conclusión

Y dale con las conclusiones… Meh… Bueno ok… Va.

La idea con esta pequeña lista de paneles/add-on es que se te haga la vida como developer un poco más fácil — tal como me lo ha hecho a mi.

Al final, los bugs siempre pasan, lo realmente malo es no estar preparado para resolverlos.

Acá la lista de links para los add-ons:

Firebug,
CodeBurner,
PixelPerfect,
YSlow,
FirePHP

Que te sirva.

Optimizando JavaScript para un rendimiento extremo y bajo consumo de memoria

Yëco — Sun, 15 Nov 2009 08:07:24 +0000

En mis muy esporádicos ratos libres estoy haciendo un pequeño juego en JavaScript y he tenido que tomar algunas medidas para agilizar el código. La idea en este post es mostrar algunos trucos que he aprendido en el proceso, algunos no los he visto mencionados en otras partes, así que no está de más compartirlos.

Muchos de los tips de optimización para JavaScript involucran cosas que se ven más típicamente en otros sitios, como por ejemplo minimizar la cantidad de modificaciones al DOM. Pero en este caso es un poco diferente, ya que era el script por sí mismo era quien debía correr más rápido – No trabaja con el DOM ni nada, solo procesa muchos datos.

Encontrando la raíz del problema

Antes de iniciar cualquier optimización, el código debe ser perfilado para saber qué parte es la que está corriendo despacio. La mejor herramienta para lograr esto, es definitivamente el Profiler de Firebug. Sin este probablemente hubiese tenido muchas más dificultades para encontrar problemas y probar cómo las cosas que cambiaba afectaban la velocidad.

El Profiler lo encontrás en la consola del Firebug. Solo dale clic en el botón ‘profiler’ una vez para iniciar el perfilamiento (si es que existe la palabra) y clicás de nuevo para detenerlo. Después de detenerlo vas a recibir una lista informativa de las funciones que han sido llamadas y cuanto tiempo tomó cada una en ejecutarse.

Problema 1: Iteraciones, cantidad de datos

El primer problema que me abofeteó fué la enorme cantidad de datos que se debían de guardar. Un mapa de 128×128 requiere 16,384 iteraciones para ser completamente procesado. A primer vista no parece tanto, pero solamente iterar la data, sin hacer nada más, causaba un golpe mucho mayor del que pasaría en muchos otros lenguajes. Por extraño que pueda parecer, podés usar un do-while invertido para acelerar las iteraciones, o sea en lugar de usar un ciclo con for y contar sumando, usás un ciclo con do-while y contás restando.

			var i = data.length;
			do {
			 /* algo que hacer */
			} while(--i);

Por qué es más rápido? Aparentemente el simple hecho de remover la condicion usada para comprobar cuando el loop termine hace gran parte de la diferencia. Hacer -i en vez de i- también ayuda un poco.

El problema con este enfoque es que no siempre es aplicable.

Problema 2: Llamar funciones

Fué curioso encontrar que el simple hecho de llamar una función agrega un overhead significativo. Así que llamar una función dentro de uno de esos ciclos grandes en los for puede agregar mucho tiempo de procesamiento.

Como resolverlo? Colocando el código de la función dentro del loop.

Sí, raro. Pero si mueves el código de la función y lo colocas dentro del loop en lugar de llamar la función vas a tener una mejora significativa. Tiene como gran desventaja que reduce la legibilidad del código, además de que le abre las puertas a la duplicación de código si la función se usa en más de un lugar.

Por raro que sea, esto fué uno de los propulsores más grandes de performance, que en este caso particular, era más importante que un código legible.

Problema 3: Limitaciones de la memoria

Dado al bajo monto de memoria disponible en el dispositivo al que va dirigido el juego. La aplicación se quedó sin memoria en varias ocasiones.

Primero, el tamaño del mapa era de 300×300, lo que hacía que el teléfono se quedara sin memoria casi de inmediato. Para esto no hubo más remedio que reducir el tamaño a un 128×128. Usar 300×300 pudo también tener otras repercusiones con el performance, porque la cantidad de data hubiese sido mucho mayor para dibujarlo.

Segundo, cuando implementé la funcionalidad para cargar y salvar el juego, el app de nuevo se quedaba sin memoria. Esto probablemente causado porque el data del mapa era serializado a JSON.

La idea que resolvió esto: Cortar el data en pedazitos pequeños.

Entonces, en lugar de guardar todo el array del mapa de 128×128 de una sola vez, el código lo hace en 8 partes. De este modo el tamaño del JSON serializado se mantiene pequeño y la aplicación no se queda sin memoria.

Lo mismo se hace cuando carga, Como el JSON es guardado en 8 bloques separados, al cargar se meten dentro del array uno por uno.

Más optimizaciones: Dividir y Flood numbers

Como parte de la lógica del juego también eran necesario dividir algunos numeros y asegurarme de que los valores eran números enteros.

Típicamente esto requeriría dividir primero y luego aplicar Math.floor. Como mencioné hace un rato. Llamar funciones puede salir caro.

Hay un truco ‘limpio’ para esto. Y limpio entre comillas porque para algunas personas puede ser confuso si no están familiarizadas con la sintáxis, y esto, pues hace el código un poco dificil de leer.

El truco consiste en usar un bit-shift (no conozco el término en español…):

				var foo = 10;
				//la mayoría de veces, esto es lo mismo que hacer Math.floor(foo / 4)
				var result = foo >> 2;

Hacer >> 2 es, como menciona el comentario, practicamente lo mismo que dividir por 4 y despues llamar un Math.floor. Pero en lugar de dos operaciones, tenés solamente una, por lo tanto puede ser un poco más rápido.

Si no entendés de matemática binaria los bitshifts pueden ser un poco enredados. En palabras simples, si hacés >> con 1, es lo mismo que dividir por 2, 2 es dividir entre 4, 3 es dividir entre 8, y 4 es dividir entre 16 y ahí sigue la idea…

Como es costumbre, hay un buen articulo en Wikipedia sobre esto, el cual es un buen recurso si querés leer más información al respecto.

Más?: Mete el código en funciones anónimas

Esta es una sugerencia vieja vieja vieja, pero buena buena buena… Mete el código en funciones anónimas incluso si no son o usan globales.

Por alguna razón que no podría explicar apropiadamente, esto afecta también la velocidad de ejecución de los scripts.

Así que cuando sea que tengas código en JS en un archivo, recuerda envolverla en una función anónima auto ejecutable como esta:

(function(window) {
  /* todo el código va acá!!*/
})(window);

También podés hacer que la función reciba el objeto window como un argumento para una posible pequeña mejora.

Por último: Reducí el scope

Esta amarra con la anterior, agregá variables locales dentro de la función anónima para funciones que se usan normalmente, como Math.round or Math.random

(function(window) {
  var round = Math.round;
  var random = Math.random;
  /* todo el código va acá!!*/
})(window);

Conclusión

Solo porque ya se me hizo costumbre hacer conclusión…. En fín. La idea detrás de todo esto es mostrar que hay formas de mejorar la velocidad del JavaScript, incluso cuando no tenga nada que ver con el DOM, pero si de igual modo trabajas con el, no está de más agregar unos tips a lo que ya conoces.

Agregando una cosa más a lo anterior. Hay una cosa más que intenté: Probar si había alguna diferencia entre llamar una función objeto vs una función instancia:

				var x = new Foo();
				x.someFunc();
				//or
				bar.someFunc();

Yo no ví diferencia alguna, pero si estás usando las clasicas intancias de POO en lugar de funciones estáticas. Puede que te sirva.

Solo recordá que debes perfilar el código siempre antes y después de una optimización. Para ver donde están las partes que realmente necesitan optimizarse y su hubieron mejoras después de algún cambio.

También considerá que muchas optimizaciones pueden hacer que el código sea dificil de mantener. Así que puedes poner en una balanza que tanto necesitas mejorar el performance. Si no es tanto, a veces es mejor no hacerlo.

Espero que te sirva de algo.

Fuente

Snippet: Favoritos recientes de Delicious con PHP

Yëco — Sat, 14 Nov 2009 07:18:26 +0000

Este snippet descarga y guarda en cache los bookmarks más recientes de una cuenta en específico en RSS desde el API de Delicious, luego los muestra en un UL de HTML.


function get_delicious()
{
	$cache = dirname(__FILE__) . '/caches/delicious';
	if(filemtime($cache) < (time() - 300))
	{
		@mkdir(dirname(__FILE__) . '/caches', 0777);
		$url = 'https://api.del.icio.us/v1/posts/recent?count=10';
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_POST, 1);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
		curl_setopt($ch, CURLOPT_TIMEOUT, 5);
		curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
		curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);

		// agregá delicious.com tu usuario y password en esta línea:
		curl_setopt($ch, CURLOPT_USERPWD, 'usuario:password');
		$data = curl_exec($ch);
		curl_close($ch);
		$cachefile = fopen($cache, 'wb');
		fwrite($cachefile, $data);
		fclose($cachefile);
	}
	else
	{
		$data = file_get_contents($cache);
	}
	$xml = simplexml_load_string($data);

	$html = '
';
	foreach($xml as $item)
	{
		$html .= '
' . $item['description'] . ' ' . $item['extended'] . '

';
	}
	$html .= '
Mis bookmarks recientes

';
	$html .= '

';
	echo $html;
}

// Mostralos
get_delicious();

Este snippet usa SimpleXML, propiedad que fué incluida en PHP5 para hacer la lectura de XML mucho más sencilla.

Nombres de Funciones dinámicos con JavaScript

Yëco — Tue, 27 Oct 2009 06:01:59 +0000

Si te toca hacer aplicaciones un poco avanzadas con JavaScript, vas a toparte con un problema en un punto u otro donde vas a necesitar generar dinámicamente el nombre de una función que quieras llamar. Algo como el equivalente a call_user_func() de PHP.

Algo así es como podés hacerlo:

// Definimos algunas variables
var foo = "Hola";
var bar = "Mundo";
var nombre_funcion = "decir_" + foo + bar;

/*  Dado que estamos generandolo dinámicamente,
* siempre hay que asegurarse de que la función
* exista en realidad. */

if (typeof(window[nombre_funcion]) === "function")
{
	window[nombre_funcion](" Mundo!");
}
else
{
	throw("Error.  La función " + nombre_funcion + " no existe...duh!");
}

function decir_holaMundo(la_palabra)
{
	alert("Hola " + la_palabra);
}

// Browser va a alertar un trilladísimo "Hola Mundo!"

Cuando lo pensás un rato, tiene mucho sentido considerando que todos los objetos globales en JavasScript son en realidad propiedades del objeto “window”. Fijate en este ejemplo de manzanas y naranjas para entender un poco mejor el concepto.

var foo = "manzana";

function foobar()
{
	var foo = "naranja";
	alert(window["foo"]); // alerta "manzana"
	alert(foo); // alert "naranja"
	alert(window["foobar"]); // alerta la función foobar
}

foobar();

Acá hay otro ejemplo de cuando usar strings para llamar una función puede ser útil. Esta vez llamamos la propiedad de un objeto que hemos creado.

function Persona()
{
	this.mensaje = "Hola Mundo!";
	this.decir_hola = function(a)
	{
		alert(this.mensaje);
	}
}

var Yeco = new Persona();
nombre_funcion = "decir_hola";
Yeco[nombre_funcion]();

Ves como es casi lo mismo que el método de arriba usando una función global?

Espero que te sirva en algún momento.

10 formas de escribir un mejor código en jQuery

Yëco — Sun, 23 Aug 2009 07:14:00 +0000

Sin duda alguna, jQuery se ha vuelto la biblioteca de javascript por excelencia, y no lo digo solamente porque me agrade, la gran cantidad de recursos, plugins, tutoriales y documentación, hacen que a muchos les entre la curiosidad y se inicien en javascript aún cuando nunca les atrajo el lenguaje.

Y bien, ya que la usamos seguido, o pensamos aprenderla, no nos queda de más conocer unos cuantos tips que nos sirvan para que funcione de un modo más adecuado.

Andando por ahí me encontré un post de Giulio Bai que aborda este tema en específico y nos dá unas buenas sugerencias al respecto:

1. $(document).ready (); Siempre

Todo lo que contenga será ejecutado tan pronto el DOM sea cargado y antes de que los contenidos sean llenados. Te permite agregar eventos a cualquier elemento en la página sin interferir directamente con el markup; todos esos metiches de onload, onclick y onLoQueSea ya no son necesarios, solo escribílos encapsulados ahí.

Un pequeño ejemplo podría ser:

$(document).ready(function()
 {
    $(".dummy").click(function()
    {
        $(this).css('color', '#000000');
    });
});

2. Usá $(window).load ()

Aunque la vasta mayoría de ejemplos vienen usando el método descrito anteriormente, a veces es mejor evitar poner todo ahí.

$(document).ready () es increíblemente útil, pero ocurre durante el rendering de la página, cuando los objetos aún se están descargando. Por eso las funcionalidades supérfluas como scrollings, arrastrar y soltar, podrían ponerse dentro de una función $(window).load () ya que esta ejecuta después de que todos los hayan sido descargados y evita que algo se rompa mientras carga la página.

La sintáxis es casi la misma que la de $(document).ready ():

$(window).load (function () {
// métodos de scrolling
});

3. Carga sólo lo que realmente necesitas

Todos han sido tentados a escribir JavaScript que va a ser usado en una sola página de un sitio y luego cargarlo por todas partes, aunque no se use. jQuery se toma el tiempo de revisar todos y cada uno de los elementos que se le dan, y eso pone las cosas un poco lentas.

Hay dos formas que se sugieren para evitar este problema. El más sencillo sería simplemente agregar una clase en el body del html que sea identificador para correr ahí solamente el código necesario.

$(document).ready(function()
 {
    if ('body').hasClass('home')
    {
        // home page code
        }
    else if ('body').hasClass('blog')
    {
        // blog code
        }
    // Y así sucesivamente
});

El otro método, un poco más enredado, sería construir una biblioteca para llamar el código que se necesite desde cada página:

var jslib =
{
    home:
    {
        init: function() {
            // home page code
            }
    },

    blog:
    {
        init: function() {
            // blog code
            }
    }

    // Y así sucesivamente
}

4. Aprende qué es el método ‘Data’ y usálo

Esto es algo muy común, la gente no piensa en ello y siempre escriben cosas como:

$('.selector').attr ('alt', 'naranja');

para guardar y asociar datos misceláneos en el DOM. Esto, es técnicamente incorrecto, además de que es fácil confundirse, sobre todo para las personas que entren al proyecto después.

jQuery ya tiene un método que sirve para guardar datos en el DOM llamado ‘data’. El ejemplo de arriba vendría siendo algo como esto:

$('.selector').data ('miColor', 'azul');
// que puede ser pedido con
$('.selector').data ('miColor');

Este método te permite asociar y guardar datos en cualquier elemento de la página y tener un nombre de referencia.

5. Usá los selectores personalizados

Estar familiarizado con los selectores de CSS es util cuando se trata de jQuery. Pero conocer los selectores que trae la biblioteca es de verdad un empujón increíble. Date una vuelta por http://docs.jquery.com/Selectors para conocer más de ellos.

Por ejemplo, podrías usar:

$("div:contains('hola')").css ('background-color', '#cc0000');

para pintar de rojo todos los div que contengan la palabra “hola” ó

$('input:password')

para obtener todos los campos que sean para password.

6. Indicadores con clases

Podés usar indicadores ó flags para monitorear lo que el usuario está haciendo o bien revisar si algo en particular se efectuó o no. El método addClass es bastante útil en este caso ya que provee una forma fácil de agregar una nueva clase css a un elemento. Así que podés chequear la existencia de la clase con la función hasClass.

Un uso muy común de los indicadores se da cuando a aplicación tiene uno o más modos de trabajo; al entrar en el segundo modo, el indicador se fija a un elemento predeterminado y, cuando se necesite, el método hasClass es usado para revisar el modo de trabajo actual. Sencillo no?

function editModeOn ()
{
// Inicializa el modo de edición y fija un indicador
$('#flags').addClass ("editModeOn");
// hacer otras cosas
}

function saveData ()
{
// guarda los datos pero primero sale del modo de edición (si está ahí)
if ($('#flags').hasClass ('editModeOn')) {
exitEditMode ();
$('#flags').removeClass ('editModeOn');
}

save ();
}

7. No llamés el mismo selector cientos de veces

De verdad, no lo hagas. Perfectamente en lugar de hacer algo como:

$('p.hola').css ('color', '#000000');
$('p.hola').text ('hoola');
$('p.hola').addClass ('parrafo');
$('p.hola').fadeTo (1000, 1);

Podés hacer algo como:

var $p = $('p.hola');
$p.css ('color', '#000000');
$p.text ('hola');
$p.addClass ('parrafo');
$p.fadeTo (1000, 1);

Eso va a mantener la información del selector lista para ser reutilizada.

8. Encadenando (Casi) todo

El encadenado, o chaining de jQuery es muy útil.
El código anterior podría ser reescrito como:

$('p.hola').css ('color', '#000000').text ('hola').addClass ('parrafo').fadeTo (1000, 1);

Eso sí, sin exagerar, es sabido que este patrón puede ser un poco lento.

9. La utilidad toggleClass

Podés encender y apagar la clase de un elemento para variar su comportamiento sin mucho esfuerzo. Digamos que tenés una clase .hidden que esconde los elementos que la usen. Fácilmente podrías mostrar los elementos de nuevo usando:

$('p.hidden').toggleClass ();

Otro punto de toggleClass es que, con el nuevo release de jQuery 1.3.3, el método .toggleClass() va a tener nuevas formas de operar. Va a ser capaz de cambiar multiples clases, además de que podrá quitar y poner todas las clases.

Estás son las formas en que vas a poder usar toggleClass:

// Con un elemento dado

	// Cambiar todas las Clases
	$('div').toggleClass(); //
	
	$('div').toggleClass(); //
	
	$('div').toggleClass( false ); //
	
	$('div').toggleClass( true ); //
	

	// Cambiar múltiples clases
	$('div').toggleClass( "a b" ); //
	
	$('div').toggleClass( "a c" ); //
	
	$('div').toggleClass( "a b c", false ); //
	
	$('div').toggleClass( "a b c", true ); //

10. Guardá los resultados de jQuery

Cuando se trata de funciones, podrías querer tener algunos resultados disponibles en otros lugares. Acá hay dos posibilidades.

Una posible solución sería guardar los resultados dentro de objetos dentro de una variable global, así se pueden usar después:

// usamos el objeto Window
	window.$resultados = {
	uno : 0,
	dos : 0
	};

	// esta es la función que podria corre más de una vez
	function getResults (first, second)
	{
	$resultados.uno = first;
	$resultados.dos = second;
	}

	// corre la funcion
	getResults ($('li.azul'), $('a.rojo));
	$resultados.uno.hasClass ('azul'); // true
	$resultados.dos.hasClass ('azul'); // false

	// corre de nuevo
	getResults ($('li.rojo'), $('a.azul));
	$resultados.uno.hasClass ('azul'); // false
	$resultados.dos.hasClass ('azul'); // true

La otra, y a mi parecer la mejor, como se recomienda en el punto 4 es usar el método Data en lugar de crear una variable global.

$.data(window, "resultados", { uno: false, dos: true });

//Para accesar los valores:

$.data(window, "resultados").uno; // false
$.data(window, "resultados").dos; // true

// Y para cambiarlos:

$.data(window, "resultados").uno = true;
$.data(window, "resultados").dos = false;

Singleton en JavaScript, o: Cómo convertir constructores a JSON

Yëco — Fri, 24 Jul 2009 07:54:13 +0000

Cuando necesités una sola instancia de una clase de JavaScript, no te molestés escribiendo un constructor, escribí un solo JSON.

El gran poder de los objetos es que los datos y las funciones que hacen algo pueden estar encapsuladas en un mismo objeto. Así que aprovechandonos de ello y para seguir buenas prácticas, a veces metemos todas las utilidades necesarias al “desnudo” en el namespace global. Algo así:

function getElementsByClassName(cssClassName) {...}

Aunque en esto veo dos problemas:

Uno pequeño: el nombre de la función es extremadamente largo… que feo
y uno grande: si estás trabajando con alguna librería, es muy probable que colisione con otra función con un nombre similar y que se comporte diferente

Vamos a arreglarlos

Podemos crear una clase de utilidades que nos sirva para encapsular esta función (y otras) más o menos así:

function DomUtilityBag() {
this.getByClass= function(cssClassName) {...}
}

e instanciarla:

var domUtils = new DomUtilityBag();

Si has usado constructores, parece obvio y familar no?. Pero los constructores fueron hechos para permitir instanciar cualquier número de objetos del mismo prototype. Por qué necesitaríamos hacer eso con un conjunto de utilidades misceláneas? Usualmente no hay razón, porque no hay datos que se diferencien de una instancia a otra.

Acá entra Singleton y es donde JSON se vuelve muy útil. Con él podemos declarar una única instancia y todos sus miembros de una sola llamada, sin meternos con los constructores:

var domUtils = {
getByClass: function(cssClassName) {...}
}

haciendolo aún mejor

Mientras estamos haciendo el domUtils asumamos que esa librería de utilidades podría crecer bastante (siempre lo hacen). Así que vamos a seguir la técnica de YUI para el namespacing, categorizando más las utilidades, y como solo necesitamos una copia, utilizamos JSON para hacerlo. Acá está el esqueleto de mi librería, y le vamos a poner… eeehh, hmm… ZAQ, sí ZAQ:

var ZAQ = {}  //esto crea un objeto namespace vacío

ZAQ.util = {} //un sub-objeto para el paquete de utilidades

//lo granulamos más, con utilidades específicas para el DOM
ZAQ.util.dom = {
getByClass: function(cssClassName) {...},
elemHasClass: function(elem, className) {...}
}

//podemos agregar más tipos de utilidades en sus propias "categorias"
ZAQ.util.array = {
contains: function(theArray, match) {...}
}
ZAQ.util.string = {
startsWith: function(theString, match) {...},
endsWith:   function(theString, match) {...}
}

Y así sucesivamente.

Conclusión?

Necesitamos una?

Ok, ok… El fín es que podés usar el poderoso patrón singleton en JavaScript, funciona perfecto para este tipo de librerías de utilidades y un sin fín de cosas más en las que solo necesités una copia corriendo. Mantiene el código fácil de leer, mantiene el namespace intacto y ordenado y además previene colisiones con otras funciones cuando estás integrando otras librerías.

Que te sirva de algo.

Snippet: Detectar un bloqueador de pop-ups

Yëco — Fri, 24 Jul 2009 07:03:21 +0000

Algunas veces no tenemos más alternativa que desplegar información utilizando los abominables pop-ups o ventanas emergentes, en casos como esos topamos como obstáculo que si el usuario tiene el bloqueador activado no podrá ver lo que necesitamos desplegar.

Para casos como esos, este pequeño script, que revisa si el blocker está activado o no con la única forma de hacerlo, creando un pop-up, devolviendo un valor booleano dependiendo si tuvo exito o no. Así si falla podemos pedirle amablemente al usuario que habilite los pop ups.

function detectarBlocker() {
    var intento = window.open("about:blank","","directories=no,height=100,width=100,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=5000,location=no");     if(intento) { // no hay bloqueo
        intento.close();
        return 1;
     } else { // está bloqueado
        return 0;
     }
}

Snippet: Etiqueta de compatibilidad, Forza a IE8 a renderizar como IE7

Yëco — Mon, 13 Jul 2009 07:42:20 +0000

Si, en definitiva más de uno me va a querer patear por esto, pero bueno, de repente sea útil alguna vez.

Si tu sitio no está mostrandose adecuadamente en IE8, podés obligarlo a comportarse como IE7 solía hacerlo. No digo que IE8 sea malo, pero paga los platos rotos de sus hermanastras malvadas… digo, de los IE anteriores.

Con este tag podés forzar al rendering engine de Internet explorer 8 para que funcione como Internet explorer 7:

O bien, si estás en apache podés hacerlo desde el .htaccess con esta línea:

Header set X-UA-Compatible IE=EmulateIE7

Podés leer más información al respecto en el sitio de Microsoft (en inglés).

Snippet: Arreglar el Z-Index en IE7 con jQuery o MooTools

Yëco — Mon, 13 Jul 2009 07:01:53 +0000

Por alguna razón malvada, Internet Explorer 7 hace algunas cosas raras (además de tener una larga lista bugs conocidos en su motor) que siempre se las ingenian para volver a los web developers locos. Mientras algunos errores ocurren de forma oscura y dificil de notar, hay algunos que causan que pasemos horas tratando de arreglarlos. La forma en que IE7 renderiza el orden del z-index es una de ellas.

Una de las formas de arreglarlo es cambiando dinámicamente el orden por default de los elementos de la página. Esto asegura que los elementos en el código HTML tengan el índice adecuado, resolviendo la mayoría de los problemas que causa IE7.

El modo de hacerlo usando jQuery sería algo como:

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

Con esto básicamente lo que hacemos es comenzar con un z-index de 1000 y decrementar el indice de cada div de la página en tractos de 10, es decir, el primer elemento tendrá un z-index de 1000, el segundo 990 el tercero 980 y así sucesivamente. Notá que el selector de jQuery encuentra todos los divs con el codigo “$(’div’)”, usando la misma syntaxis que los selectores de CSS, nada dificil.

Ah… y así se hace lo mismo pero con MooTools, por si estás usando esa biblioteca:

if(Browser.Engine.trident){
	var zIndexNumber = 1000;
	$$('div').each(function(el,i){
		el.setStyle('z-index',zIndexNumber);
		zIndexNumber -= 10;
	});
};

Saluuú.

Generador de Bookmarklets [actualizado]

Yëco — Mon, 06 Jul 2009 22:01:30 +0000

Como últimamente los bookmarklets se han puesto muy de moda, no está de más publicar uno que sirva en el trabajo.

La idea con este es ayudar con los forms, evitandonos el engorroso trabajo de llenarlos una y otra vez para probarlos.

El generador toma el form en que estás trabajando y crea un bookmarklet específico para los campos que necesitas, con la info que necesitas.

Cómo se usa?

Simple, solo agregas un bookmark y a este lo editas y le cambias la url colocando en su lugar este script.

javascript:var fz=new Array();var z=new Array();function F(p){var m=new Array();for(n=0;n <p.length;n++){var q=new Array();for(ind=0;ind<p[n].length;ind++){q.push('\''+p[n][ind]+'\'')}m[n]=eval('['+q.join(',')+']');}return m;}function C(n,cz){var i=-1;for(ab=0;ab<cz.length;ab++){if(cz[ab][1]==n)i=ab;}return i;}function B(){fz.length=0;if(!document.forms.length){alert('There are no forms in this page.');return;}for(fi=0;fi<document.forms.length;fi++){z.length=0;f=document.forms[fi];for(i=0;i<f.length;i++){ip=f.elements[i].type;iv=f.elements[i].value;ix=f.elements[i].name;if(!iv){continue;}if(ip=='text'||ip=='textarea'||ip=='select-one'||ip=='password')z.push(['d',ix,iv]);if(ip=='radio'||ip=='checkbox'||ip=='select-multiple'){x=C(ix,z);if(x==-1){if(ip=='select-multiple'){iv=%22%22;for(g=0;g<f.elements[i].length;g++){if(f.elements[i][g].selected){iv+=f.elements[i][g].value+%22|%22;}}z.push(['s',ix,iv]);}if(ip=='radio'){if(f.elements[i].checked){z.push(['c',ix,iv]);}}else{if(f[ix].length){if(f.elements[i].checked){z.push(['c',ix,iv]);}}else{if(f.elements[i].checked){z.push(['n',ix,'']);}}}}else{if(f.elements[i].checked){z[x][2]+=%22|%22+iv;}}}}fz.push(F(z));}bms=new Array();for(f=0;f<fz.length;f++){if (!fz[f].length){continue;}bm=%22java%22+%22script:function D(a,b){c=b.split('|');d=false;for(q=0;q<c.length;q++){if(c[q]==a)d=true;}return d;}%22;bm+=%22function E(){f%22+f+%22=document.forms[%22+f+%22];%22;for(k=0; k<fz[f].length; k++){if(fz[f][k][0]==%22d%22){bm+=%22f%22+f+%22['%22+fz[f][k][1]+%22'].value='%22+fz[f][k][2]+%22';%22;}if(fz[f][k][0]==%22n%22){bm+=%22f%22+f+%22['%22+fz[f][k][1]+%22'].checked=true;%22;}if(fz[f][k][0]==%22c%22){bm+=%22for(i=0;i<f%22+f+%22['%22+fz[f][k][1]+%22'].length;i++){if(D(f%22+f+%22['%22+fz[f][k][1]+%22'][i].value,'%22+fz[f][k][2]+%22')){f%22+f+%22['%22+fz[f][k][1]+%22'][i].checked=true;}}%22;}if(fz[f][k][0]==%22s%22){bm+=%22for(i=0;i<f%22+f+%22['%22+fz[f][k][1]+%22'].length;i++){if(D(f%22+f+%22['%22+fz[f][k][1]+%22'][i].value,'%22+fz[f][k][2]+%22')){f%22+f+%22['%22+fz[f][k][1]+%22'][i].selected=true;}}%22;}}bm+=%22}E()%22;bms.push(bm);}w= window.open('','','toolbar,width=150,height=100');for(f=0;f<bms.length;f++){w.document.write(%22<a href=\%22%22+bms[f]+%22\%22>Form #%22+(f+1)+%22</a><br />%22);}w.document.write(%22Arrastra el link a tu toolbar.%22);w.document.close();}B();

Luego, llenas los campos del form en que estás trabajando, das click en el generador y este abre un popup con un link al bookmarklet generado. Arrastrás el link a tu barra de bookmarks y listo, cada que lo actives te llena los campos solo.