Contenido

Dojo es el framework Javascript más rápido

31 mar

+ 13

Hoy Ajaxian, publica un artículo que yo quería haber escrito hace unas semanas. TaskSpeed es una aplicación que usar SlickSpeed para testear los principales frameworks JS en acciones DOM básicas. Los resultados obtenidos han declarado a Dojo como el framework JS más rápido, seguido de MooTools 1.2.1 y jQuery 1.3.2.

frameworks_speed_test
(Ver Imagen)

Estos resultados puedes comprobarlos directamente en el propio test.Es interesante ver como estos resultados son similares a los obtenidos en el Framework Speed Test, una aplicación que monté con la ayuda de todos los que me ayudaron a montar los ficheros de pruebas de cada uno de los frameworks.

frameworks_speed_test3
(Ver Imagen)

framework_speed_test2
(Ver Imagen)

En todos los test, vemos que sorprendentemente jQuery es excesivamente lento y Ext.js impresionantemente rápido. En las pruebas que realicé tenía miedo de lo contrario, ya que al usar el selector CSS (Sizzle) podría beneficiar a jQuery en estos puntos. Lamentablemente esto no le ha servido para nada, principalmente por la generación de DOM que lo hace de una forma diferente a los demás.

jQuery

La función html() de jQuery, genera los elementos DOM y los injecta en el elemento seleccionado, algo más laborioso que los innerHTML que hacen los demás frameworks. Esto no debe servir de excusa, ya que en una versión con innerHTML que monté para igualar los frameworks jQuery no llegaba a despuntar frente a los otros, aunque si que mejoraba algo.

Ext.js

Por otro lado en Ext.js, me ha sido imposible encontrar algo que permita hacer un fireEvent(), bueno miento, monté un sistema que funcionaba, pero era el proceso más lento de los testeados y no me parecía justo implementarlo, así que aparece como Error, pero no es que se haya producido un fallo, sinó es que no está desarrollado.

También me parece interesante destacar los 500kb necesarios para ejecutar Ext.js.(Es un merge de 2 ficheros del framework)

Bueno, si consigo añadir Dojo sería interesante verlo frente a frente a Ext.js.

Proyecto

El proyecto está disponible en GitHub.

Agradecimientos

  1. Jota y Jose Antonio por aguantarme en la infinidad de mails que hemos cruzado.
  2. John Resig, por contestar a un mail sobre la optimización de las pruebas de JS.
  3. Paul Bakaus, por la ayuda ofrecida en la optimización.
  4. JuanPe, Kike, Jordi y Luigi por debatir conmigo los resultados.
  5. A todos vosotros por leerme cada día. ;)

¿__autoload() en WordPress?

31 mar

+ 3

En Real Ultimate Waffe, comentan la idea de incluir la propiedad __autoload() de PHP5 a la lógica de WordPress. Y la idea es muy interesante.

__autoload() es una funcionalidad de PHP5 que nos permite ejecutar código al llamar cualquier Clase que no esté declarada, uniendo esto a que generalmente se usa un fichero para declarar una clase podemos hacer cosas como:

<?php
function __autoload($class_name) {
    require_once $class_name . '.php';
}

$obj  = new MyClass1();
$obj2 = new MyClass2(); 
?>

En el ejemplo, vemos que cargamos el fichero $class_name.php desde la función __autoload() que será llamada a la hora de instanciar cada una de las clases. En este ejemplo, llamará a los fichero MyClass1.php y MyClass2.php.

En WordPress se podría usar esta característica para evitar la carga innecesaria de ficheros que no llegamos a usar. De esta forma además de optimizar las llamadas a disco, evitamos cargar innecesariamente objetos en memoria que no vamos a usar.

Lástima que para poder usarlo debamos replantear parte de la estructura base de WordPress, pero no descarto que en una futura versión veamos esta mejora que aportará muchos beneficios en cuanto a recursos se refiere.

OmniGrid, excelente DataGrid con MooTools

31 mar

+ 4

OmniGrid es una excelente alternativa a los DataGrid basados en Javascript. Gracias a la potencia de MooTools, esta aplicación nos permitirá conseguir que mostremos datos de una forma más dinámica y con unas capacidades realmente intersantes.

Prototype 1.6.1 RC2, compatibilidad con IE8

30 mar

+ 0

Prototype ha anunciado la versión 1.6.1 RC2, envuelta de una importante adaptación para ser completamente compatible con Internet Explorer 8. Entre las mejoras que esta versión podemos encontrar la capacidad de usar almacenamiento DOM en el elemento Element.

Google Reader añade comentarios en los feeds

27 mar

+ 15

Despues de varios intentos fallidos, Google Reader lo integra de serie. Ahora Google Reader dispone de la capacidad de añadir comentarios  a los artículos que tenemos sindicados.

add_comment_google
(Ver Imagen)

Mediante el uso del botón Share (Compartir) podremos añadir un comentario a dicha noticia. El problema radica en que ese comentario se queda en Google y en ningún momento llega al origen de la noticia.

Como blogger, me parece horrible. Si la gente no interactua con tu web por pereza de dirigirse a ella y comentar ahí, con esto seguro que no lo harán ya que podrán hacerlo sin salir del lector. Con la diferencia que el contenido generado no será tuyo, sinó de Google…

En fin, … los peces grandes comen a los pequeños ¿no?, habrá que convertir el refrán en Ley.

Actualización

Rectifico, otra vez (parezco un político), al parecer el tema de los comentarios es únicamente para tus contactos. Algo que mitiga en cierta medida mi indignación, pero que deja un mal sabor de boca por ese feedback que se podría perder en el camino. En fín, siento las molestas producidas por este calentón (uno más).

Sly, el selector CSS3 bueno, bonito y barato

26 mar

+ 5

Ajaxian nos muestra Sly, un selector CSS3 realmente sorprendente creado por Harald Kirschner.

compare
(Ver Imagen)

La imagen habla por si sola, los resultados son realmente increibles. Siendo más de la mitad más rápido que Slick (el selector de MooTools), casi 3 veces más rápido que Prototype e incluso mucho más rápido que Sizzle de jQuery. Y todo en 3kb.

Los que quieran ver el código, verán que se ha usado la filosofía de MooTools, osea limpio y claro. Una gozada leerlo.

Actualización

Cuando estuve viendo los resultados de Sly, pensé que sería interesante ver un cara a cara contra Peppy y Sizzle (solo el selector) así que configuré SlickSpeed para ver que tal se porta. Además, he añadido la versión nativa que hace uso de document.querySelectorAll().

Herencia en Javascript

26 mar

+ 4

En Quizzpot hacen una breve, pero clara explicación de como conseguir Herencia en Javascript. En esencia es la base de los sistemas de Orientación a Clases que estuvimos viendo hace unos días.

Bitacoras.com abre su API pública

26 mar

+ 2

Hoy Bitacoras.com ha abierto al público su API pública que nos permitirá disfrutar de las posibilidades que toda la información dela que disponen. Sin duda es una gran noticia ya que una de las bazas con la que juegan Bitacoras es que disponen de una gran cantidad de información relevante y es un gran paso a delánte para todos el que la pongan a nuestra disposición.

He tenido el privilegio, junto a Marcos Besteiro de PropiedadPrivada de realizar una serie de pruebas sobre la API (antes de abrirla al público) y me ha sorprendido la velocidad de respuesta y la facilidad de uso que han conseguido para las peticiones. Sin duda es una herramienta digna de explotar.

¿Que podemos obtener?

Basta con entrar en la documentación de la API para ver las grandes posibilidades que nos están brindando.

  1. Portada
  2. Canales
  3. Buscar
  4. Geo
  5. Recomendaciones
  6. Descubrimientos
  7. Sigue a
  8. Le siguen
  9. Comunidad
  10. Comentarios
  11. Recibidos
  12. Inbox
  13. Top bitacoras
  14. Top usuarios

Estos son las opciones de las que podemos obtener datos para nuestras aplicaciones. Las que mediante una simple petición HTTP nos permite realizar la petición condicionando el formato de respuesta que deseemos:

  • JSON
  • XML
  • PHP
  • RSS
  • ATOM

Marcos, nos deslumbra con una serie de ejemplos creados apartir del uso de la API, para mostrarnos algunas posibilidades que nos ofrece la API.

Mi granito de arena

Para hacer más fácil las peticiones, os dejo aquí la función que monté para hacer las pruebas, es muy sencilla de usar (como veremos en el ejemplo).

function get_from_bitacoras($que) {
		$methods = array("portada", "canales", "buscar", "geo", "recomendaciones", "comentarios", "sigue_a", "le_siguen", "comunidad");
		extract($que);

		if (!in_array($method, $methods)) die("Método no existente");
		if (!isset($params["key"]) || empty($params["key"])) die("Necesitas una KEY");

		$curl_handle=curl_init();
		curl_setopt($curl_handle,CURLOPT_URL,"http://api.bitacoras.com/".$method);
		curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
		curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
		curl_setopt($curl_handle, CURLOPT_POST,1);
		curl_setopt($curl_handle, CURLOPT_POSTFIELDS,$params);
		curl_setopt($curl_handle, CURLOPT_FOLLOWLOCATION  ,1);
		curl_setopt($curl_handle, CURLOPT_HEADER,0);
		$buffer = curl_exec($curl_handle);

		curl_exec($curl_handle);
		curl_close($curl_handle);
		return $buffer;
}

Como podeis ver, es muy sencilla . Simplemente nos comprueba que el método que pasemos por parámetro sea uno de los indicados en la API. Veamos un ejemplo de uso :D

define("BIT_KEY", "AQUI_TU_KEY");
define("BIT_CACHE_TIME", 60 * 60 * 24); // 1 Día
define("BIT_CACHE_DIR", "cache/"); // /cache/

function save_cache($file, $content){
	file_put_contents($file, $content);
}

function get_comments_bitacoras($guid = ''){
		if (empty($guid)) return;
		$file = BIT_CACHE_DIR.md5($guid);
		if (file_exists($file) && filemtime($file) + BIT_CACHE_TIME < time()) {
			$respuesta = file_get_contents($file);
		} else {
			$arr = array(
				'method' => 'comentarios',
				'params' => array(
					'key' => BIT_KEY,
					'format' => 'php',
					'url' => urlencode($guid)
					)
				);
			$respuesta = get_from_bitacoras($arr);
			save_cache($file, $respuesta);
		}

		$return = unserialize($respuesta);
		if ($return->status == 'success') return $return->data;
		else return array();
}

Esta función, que está pensada para integrarse con WordPress, nos permite obtener los parámetros que nuestra noticia haya tenido en bitacoras.com. Este código podría ir en el fichero functions.php de nuestro theme. Y despues de añadir nuestra KEY y crear sinó existe el directorio cache/ en la raiz de nuestro WordPress. La función lleva incorporada un pequeño sistema de caché mediante fichero para no lanzar una petición por visita, de esta forma estamos haciendo una caché de 24 horas sobre cada una de las peticiones (osea por noticia).

Para invocar la función, únicamente tendremos que usar el siguiente código, podemos insertarlo en el fichero comments.php de nuestro theme:

$bit_comments = get_comments_bitacoras($post->guid);
foreach($bit_comments as $bit_comment){
	.....
}

De esta forma estamos obteniendo los comentarios y los recorremos uno a uno para ir pintándolos en nuestro theme. Para ello simplemente tenemos que conocer los parámetros devueltos con los que podemos mostrar la información de los comentarios.

  • autor: nombre completo del autor
  • alias: alias en Bitacoras.com del autor
  • avatar: imagen del usuario (32x32px)
  • fecha: fecha de publicación
  • texto: contenido filtrado, con etiquetas HTML

8 plugins jQuery para explotar las API’s de Google

25 mar

+ 4

Google siempre ha ofrecido interacción con sus servicios mediante unas potentes API’s que nos permite disponer de información que este gigante almacena y trata cada día. Con jQuery usarlas puede ser más sencillo, por eso estos plugins pueden ayudarnos a explotar las API’s de Google:

  1. jGoogleGoogle Image Search.
  2. gFeed, Google Feed API
  3. jgChart, Google Charts API
  4. jquery-GoogleMaps, Google Maps
  5. jquery-offline, Google Gears
  6. jquery-googleanalytics, Google Analytics.
  7. jquery-spellcheck, Google SpellCheck
  8. jquery-traslate, Google Traslate.

Posts relacionados sin usar plugin

24 mar

+ 26

Si eres de los reacios a usar plugin por que prefieres que las funcionalidades estén en el theme, estás de enhorabuena. Ya puedes desinstalar el plugin Related Posts por que podrás obtener posts relacionados mediante una pequeña función que se aprovecha de la potencia de WP_Query() para obtenerlos.

<?php
//Para usar dentro del Loop, muestra 5 artículos relacionados.
if ($tags) {
  echo 'Related Posts';
  $first_tag = $tags[0]->term_id;
  $args=array(
    'tag__in' => array($first_tag),
    'post__not_in' => array($post->ID),
    'showposts'=>5,
    'caller_get_posts'=>1
   );
  $my_query = new WP_Query($args);
  if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
      <p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
      <?php
    endwhile;
  }
}
?>

Este código debe ir colocado dentro del Loop de WordPress, se encargará de mostrarnos 5 (podemos modificarlo haciendo cambios a showposts) usando el primer tag del post en el que nos encontremos.