En el blog de Last.fm anuncian la disponibilidad de su nueva API.

Introduce un protocolo de autenticación de usuarios, servicios de lectura y escritura para aplicaciones web, de escritorio y para dispositivos móviles. Incluye una API para etiquetado, de forma que se pueden obtener y aplicar etiquetas a la música desde cualquier plataforma.

Hay también nuevas APIs de búsqueda, de gestión de listas y de geo-posicionado para el contenido.

Link: www.last.fm/api

¿Por qué los navegadores aún no tienen indicadores de progreso cuando suben archivos?
Via SimonWillison.net.

Exceptional performance es un equipo de la Red de Desarrollo de Yahoo! que evangeliza las mejores prácticas para mejorar la velocidad de respuesta de las aplicaciones web. Llevan a cabo investigación, herramientas de compilación, escriben artículos y blogs y dan conferencias. Sus mejores prácticas se centran en las reglas para conseguir sitios web que den respuestas rápidas. Las recomendaciones están organizadas en categorías: contenido, servidor, cookie, CSS, javascript, imágenes y móviles.

Al igual que cuando se accede a una web que incluye una fuente/feed RSS declarada de actualizaciones, se ve el icono al final de la barra de direcciones, en universaleditbutton.org proponen usar este otro botón para indicar que la página que estamos visitando es editable. Pulsar sobre el botón cargaría la página de edición para modificar directamente el documento. Esta extensión para Firefox permite disfrutar de ese botón desde ahora mismo, mientras esta convención se implementa en todos los navegadores.

El código para indicar que la página es editable y la URL de edición sería similar al siguiente (extraído de Wikipedia):

<link rel="alternate" type="application/x-wiki" title="Editar" href="http://en.wikipedia.org/w/index.php?title=HTML&action=edit" />

En 2007 John Resig (Mozilla foundation) creó junto con Mark Finkle una librería/API Javascript que facilitaba mucho la interacción con la interfície XPCom (XUL) del navegador Firefox. Dicha librería está disponible en la versión 3 de Firefox. Hoy, John Resig lo recuerda en su blog y da enlaces a la página principal, a la documentación y a una presentación de la tecnología. Ejemplos a continuación:

• Abrir Google.com en una nueva pestaña y activarla

  Application.browser.open("http://google.com/").active = true;
  

• Cerrar la pestaña actual del navegador
  

  Application.browser.activeTab.close();
  

• Cerrar todas las pestañas que apunten a Google
  

  Application.browser.tabs.forEach(function(tab){
    if ( tab.url.match(/google/) )
      tab.remove();
  });
  

• Añadir un marcador a Mozilla.org

  Application.bookmarks.add("Mozilla", "http://mozilla.org/");
  

• Eliminar todos los marcadores a Microsoft.com

  Application.bookmarks.all.forEach(function(cur){
    if ( cur.url.match(/microsoft.com/) )
      cur.remove();
  })
  

Llevo usando un par de meses RescueTime y ya lo consideró imprescindible. Se trata de una utilidad que analiza el tiempo que pasamos frente al teclado y es capaz de mostrar las aplicaciones y páginas en las que pasamos más tiempo. Es una herramienta ideal para controlar el tiempo que se pasa procrastinando (ya lo sé, suena fatal) en lugar de ser productivo.

Los resultados son muy clarificadores permitiendo mostrar toda clase de estadísticas, permitiendo etiquetar las aplicaciones o páginas para obtener directamente el tiempo dedicado a cada clase de tarea. También permite establecer alertas/objetivos que permiten indicar si queremos pasar más de x horas al día haciendo algo (productividad) o lo contrario (es decir, pasar menos de x horas perdiendo el tiempo en cosas que no son importantes). En resumen, imprescindible, aunque puede ser peligroso si se usa mal.

Exploit-Me es un conjunto de 3 extensiones para Firefox ligeras y fáciles de usar. Ver Presentación (PDF).

1. XSS-Me es una herramienta para detectar vulnerabilidades de Cross-Site Scripting (o XSS)
2. SQL Inject-Me detecta vulnerabilidades por inyección de código SQL. Un usuario malintencionado podría ver y eliminar registros o acceder con permisos de administrador.
3. Access-Me permite detectar intentos de acceso a recursos a los que no se debe poder acceder a menos que se está autenticado correctamente.

Google Maps ha ampliado su API para permitir utilizar sus mapas en aplicaciones web de forma que se permita que los visitantes puedan editar o añadir los elementos básicos que ya están disponibles en Mis Mapas: Puntos, líneas, o polígonos. De esa forma se facilita la utilización de la herramienta de Google para la introducción de información geográfica. Ejemplo:

Via Programa con Google.

Via aNieto2k. Se trata de un sistema autocontenido de metaobjetos con soporte para clases, herencia, uniones, tratos, modificadores de método y mucho más. Joose facilita enormemente la programación orientada a objetos (OOP) con Javascript, haciéndola declarativa y muy productiva. Joose es multi-paradigma. Soporta el estilo tradicional basado en prototipos y el propio basado en clases, a la vez que la herencia basada en clases y la extensión basada en roles. En el siguiente ejemplo (te lo he copiado enterito, Andrés) se define de una forma muy muy sencilla:

//Declaración del módulo
Module("PointModule", function (m) {
  //Declaración de la clase
  Class("Point", {
    has: {
        x: {
            is:   "rw",
            init: 0
        },
        y: {
            is:   "rw",
            init: 0
        }
    },
    methods: {
        clear: function () {
            this.setX(0);
            this.setY(0);
        }
    }
  })
})

// Creamos el objeto y lo usamos
var point = new PointModule.Point();
point.setX(10)
point.setY(20);
point.clear();

Traducido del artículo de Eric Sol en A List Apart. Lo he leído y me ha parecido más que interesante por lo que lo he traducido entero.

Hay dos enfoques populares para el posicionamiento con CSS: float y posicionamiento absoluto (position:absolute). Ambos métodos tienen sus pros y sus contras. Mi equipo y yo hemos desarrollado un nuevo enfoque de posicionamiento que nos da lo mejor de ambos mundos. Después de un poco de experimentación y ensayo, es el momento de compartir la técnica con el resto del mundo y ver cómo podemos trabajar juntos para mejorarla. Yo la llamo "posición absoluta faux" debido a la técnica de columnas falsas (faux) que simula la presencia de una columna.

¿Por qué necesitamos otra técnica de diseño CSS?

Un enfoque diferente

<div id="canvas">
  <div class="line">
    <div class="item" id="item1">
      <div class="sap-content">contenido aquí</div>
    </div>
  </div>
</div>

• Evita el redraw bug en IE6,
• nos da más flexibilidad para añadir relleno interior (ver ejemplo a continuación), y
• nos permite jugar con position:overflow (sin romper la malla).

.line {
  float: left;
  width: 100%;
  display: block;
  position: relative;
}

.item {
  position: relative;
  float: left;
  left: 100%;
}

#item1 {
  margin-left: -100%;
  width: 30%;
}

Ventajas

Inconvenientes

Ejemplos

1. Las columnas izquierda y derecha tienen anchos en píxeles. Por lo tanto, no se puede calcular el margen izquierdo para el contenido principal, porque no sabemos el ancho del canvas o el ancho de la columna de la izquierda como un porcentaje del canvas. La solución es similar al Santo Grial: posicionar el contenido principal con margin-left: -100% y width: 100% y añadir el relleno interior (padding) con píxeles para garantizar el espacio necesario para las columnas.
2. Las columnas izquierda, principal, y derecha se muestran en el mismo nivel jerárquico, por lo que es posible necesitar algo como z-index: 100 en las columnas.
3. El relleno interior para las columnas izquierda y derecha se añade al div.sap-content extra, lo que mantiene los cálculos simples, a la vez que ofrece una gran cantidad de flexibilidad.

¡No requiere hacks!

Con esta sencilla función que propone Andrea Giammarchi en Web Reflection, es posible averiguar si el prototipo de un objeto ha sido ampliado definiendo más funciones o propiedades.

Function.prototype.prototyped = function(){
    for(var i in new this)
        return true;
    return false;
};

alert(Array.prototyped()); // false (la clase Array no se ha tocado)

Object.prototype.each = function(){};
alert(Array.prototyped()); // true (la clase Array se ha ampliado con la función each)

John Resig hace una rápida revisión de las opciones existentes para incrustar un intérprete Javascript desde otros lenguajes (Python, Perl, PHP, Ruby, and Java). Como bien dice, a él le gusta ver Javascript como si fuese agua porque toma la forma de su contenedor y esa unión mejora su sabor.

También conocidas como chuletas o cheat sheets. Via aNieto2K. Creada por Mediavrog.net.

Descargar:


PDF

Aunque por el número de versión pudiera parecer que se trata de una versión menor, la gente de MooTools se ha decidido tras unos meses de prueba a liberar oficialmente la versión 1.2 de la librería, con profundos cambios a nivel de estructura (deja de ser directamente compatible con la anterior 1.11, pero hay un plugin para asegurar la compatibilidad en todos los casos) y una reorganización importante de la web del proyecto.

Ver demos. Ver documentación. Descargar (La versión completa ocupa unos 60KB).

Cita de Damien Katz:

Me acabo de dar cuenta de algo a lo llevaba dando vueltas en mi cabeza un tiempo. El tipado estático en los lenguajes OO (orientados a objetos) no es una solución a la complejidad del software, sino más bien un habilitador de esa complejidad. El tipado estático es como dar chicles de menta a un borracho y decirle "No conduzcas borracho. Pero si debes hacerlo y te detienen, usa los chicles".

El problema del tipado estático es que tiende a fomentar interfaces grandes y complejas como las de las frameworks, en lugar de interfaces modulares y desacopladas como las que todo el mundo desea. Lo irónico es que si tus interfaces son pequeños y simples, entonces el tipado estático te ofrece muy poco beneficio. El tipado estático funciona mejor cuando hay mucha complejidad, pero como los chicles de menta para el borracho, estamos facilitando una salida fácil con lo que sabemos que es un error en cualquier caso.

John Resig descubre Mascara, un conversor de código desde la nueva versión de Javascript 2 (o EcmaScript 4) a la actual. Soporta las siguientes características de la nueva versión:

• Verificación de tipos
• Clases y herencia, constructores, super inicializadores
• Miembros estáticos
• Inferencia de tipos a partir de la inicialización
• Tipos parametrizados, Map y Vector
• Tipos Unión
• Tipos estructurales
• Getters/setters
• Namespaces
• Tipos anulables

Leyendo un artículo en exuys.com que intenta explicar REST con unas palabras distintas a las oficiales, llego a la conclusión de que la explicación no me convence. Tampoco me gusta la de la wikipedia, pero sí la de Tomayko.com explicándole el concepto a su mujer. Mi versión es la que sigue.

REST es un estilo de programación para establecer una conexión con servidores e intercambiar información. Con REST se definen recursos conceptuales que tienen una representación y que son accesibles por medio de una cadena de texto llamada URI. Visto así puede parecer complejo, pero si cambiamos URI por URLs como http://digitta.com, cambiamos los recursos por páginas web y cambiamos su representación por HTML o SWF, todo empieza a tener un aire más familiar.

Cuando apareció SOAP, un protocolo complejo por el cuál un programa solicita información a un servidor, se tuvo en cuenta todo el conocimiento que hasta el momento se había utilizado, por lo que se pensó en componentes especiales tanto en el cliente como en el servidor. Pero eso añadía una capa más de complejidad que REST ha demostrado totalmente innecesaria:

Con REST, las peticiones se realizan a servidores web. Los verbos GET, POST, PUT o DELETE que ya pertenecían al protocolo HTTP desde sus inicios, se adaptan como un guante a las cuatro acciones estándar CRUD (Create, Read, Update, Delete). El que usamos habitualmente cuando introducimos una dirección en el navegador y pulsamos intro es GET, que se adapta perfectamente a la lectura/visualización de un recurso.

La enorme ventaja de utilizar REST es que pueden probarse en el navegador introduciendo a mano (o a través de formularios) las peticiones al servidor e inspeccionar el resultado de la misma forma con la que visitaríamos una página web. Todas las piezas estaban ya ahí y sólo era cuestión de usarlas de forma adecuada, con la ventaja añadida de que todas las características de HTTP como balanceo de carga, cachés, proxys, compresión de datos transmitidos, etc. están automáticamente disponibles.

Para comprobar la tremenda sencillez del concepto REST y la razón por la que se está imponiendo, vale una simple llamada a la API de tinyurl.com (un servicio web gratuito para acortar direcciones largas por otra equivalente mucho más corta):

http://tinyurl.com/api-create.php?url=http://digitta.com

A primera vista es una simple dirección web, pero cuyo resultado...

280slides es una aplicación web para crear presentaciones completas que pueden bajarse como archivos de PowerPoint, enviarse a SlideShare o ser visualizadas directamente en su web. La gracia está en que utiliza un clon de Objective-C escrito en 13KB de JavaScript y parece que les ha funcionado muy bien. Entrevista en Ajaxian con los autores.

Harto de buscar una extensión para Firefox que funcionase igual de bien que ImageShack right-click pero para Flickr, me he puesto manos a la obra.

En realidad había encontrado una extensión que realizaba casi todo el trabajo: Uploadr for Flickr 1.0 de Bill Conan. Pero dicha extensión aprovecha el servicio de Flickr en la URL http://www.flickr.com/tools/sendto.gne?url=URL_DE_LA_IMAGEN_A_CARGAR, el cual, una vez cargada (transloading) la imagen, no da ninguna opción para acceder a la galería del usuario. Así que, ni corto ni perezoso, me baje el XPI y me puse a trastear.

Mi experiencia con extensiones de Firefox es casi nula. Sabia que los XPI eran archivos ZIP renombrados y que todo estaba a la vista y basado en XUL (el lenguaje de marcado de interfícies de usuario de Mozilla). En realidad, la extensión no es muy complicada. Casi todo el trabajo se realiza en un HTML estático con un poco de Javascript que controla los pasos de la carga. Este es el código actual de dicho archivo:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="content-style-type" content="text/css" />
  <meta http-equiv="content-script-type" content="text/javascript" />
  <!-- link rel="stylesheet" href="default.css" type="text/css" media="screen, print" /-->
  <title>Transloading to Flickr</title>
</head>
<body onload="loaded()">

<iframe id="ifr" name="ifr" src="about:blank" width=0 height=0 style="display:none"></iframe>

<form id="form" action="http://www.flickr.com/tools/sendto.gne" method="get" target="ifr">
<input type="hidden" name="url" id="url" value="" />
</form>

<div style="margin: 100px auto 0 auto; text-align:center; width:100%;">
 <img src="chrome://flickrtrans/content/logo.jpg" /><br/>
 <h1> Transloading... <span id="h1"></span></h1>
 <img src="chrome://flickrtrans/content/flickr.gif" align="absmiddle" /> <a href="http://digitta.com/">FlickrTrans 1.0</a>
 by <img src="chrome://flickrtrans/content/digitta.png" align="absmiddle" /> <a href="http://digitta.com">digitta.com</a>.
 <br/><br/>
 <img src="chrome://flickrtrans/content/loading.gif" />
 <br/>
 <img src="chrome://flickrtrans/content/favicon.png" id="target" style="border:1px solid black; max-width: 150px;" />
</div>

<script>
function loaded() {
 url=location.href.substr(location.href.indexOf('=')+1);
 document.getElementById('url').value= decodeURIComponent(url);
 document.getElementById('target').src= decodeURIComponent(url);
 document.getElementById('ifr').onload= frameloaded1;
 document.getElementById('url').form.submit();
 document.getElementById('h1').innerHTML= '1/3';
}
function frameloaded1() {
 if(~document.getElementById('ifr').contentDocument.body.innerHTML.indexOf('password')) {
  // not authenticated
  alert('You are not logged in Flickr. Please log in there before using FlickrTrans');
  top.location.href=document.getElementById('ifr').contentDocument.location.href;
  return false;
 }
 document.getElementById('ifr').onload= frameloaded2;
 window.flickrname= document.getElementById('ifr').contentDocument.getElementsByTagName('b')[1].innerHTML;
 createCookie('flickrname',window.flickrname,60);
 document.getElementById('ifr').contentDocument.forms[0].submit();
 document.getElementById('h1').innerHTML= '2/3';
}
function frameloaded2() {
 id=readCookie('flickrid') || window.flickrId;
 if (!id) return getFlickrId();
 top.location.href='http://www.flickr.com/photos/'+id;
 document.getElementById('h1').innerHTML= '3/3';
}
function callServer(url) {
 var head= document.getElementsByTagName("head").item(0);
 var script= document.createElement("script");
 script.src= url;
 script.type= "text/javascript";
 void (head.appendChild(script));
}
function getFlickrId() {
 callServer('http://api.flickr.com/services/rest/?method=flickr.people.findByUsername&format=json&api_key=d7c94440fdce1b53a39b071f471b74a0&username='+window.flickrname);
 return false;
}
function jsonFlickrApi(data) {
 id= data.user.id;
 window.flickrId=id;
 createCookie('flickrid',id,60);
 frameloaded2();
}
// from http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
 if (days) {
  var date = new Date();
  date.setTime(date.getTime()+(days*24*60*60*1000));
  var expires = "; expires="+date.toGMTString();
 }
 else var expires = "";
 document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
}
function eraseCookie(name) {
 createCookie(name,"",-1);
}
</script>

</body>
</html>

Web Reflection. Son viejos, pero siempre conviene recordarlos.

Es habitual usar Math.floor para redondear un cociente...

var centerWidth = Math.floor((something + someelse - someother) / 2);

var centerWidth = (something + someelse - someother)>>1;

if(myWord.indexOf(myChar) >= 0) ...
if(myWord.indexOf(myChar) !== -1) ...

if(~myWord.indexOf(myChar)) ...

En Comet Daily se hacen eco de la noticia, desde ya Google Finance refleja la cotización de los valores bursátiles en tiempo real gracias a la tecnología Comet: actualizar una página web en el navegador por iniciativa del servidor y gracias a una conexión persistente entre ambos.

Hace unos días, Steve Yegge de google publicó una transcripción de su presentación llamada "los lenguajes dinámicos contraatacan". En ella, ponía de manifiesto como nos formamos en un entorno de lenguajes compilados (como el C) y creamos una cierta predisposición a considerarlos idóneos para cualquier trabajo. Dentro de ese posicionamiento casi religioso (tipo dogma), se acusa a los lenguajes dinámicos de resultar extremadamente lentos o de que no se crean aplicaciones enormes con ellos y alguna razón debe haber. Lo cierto es que la tecnología de los compiladores se ha beneficiado de múltiples optimizaciones gracias a la fuerte investigación que ha recibido durante todos estos años.

Sin embargo, gracias al auge de lenguajes como Python, Ruby o ahora Javascript, todos ellos interpretados, están apareciendo muchas propuestas que, poco a poco, están acercando los lenguajes dinámicos a los de toda la vida. Los programadores que suelen probar un proyecto con alguno de estos lenguajes, suelen quedar sorprendidos por la alta productividad que resulta de no tener que compilar el código y de no depender de otras características como el tipado rígido. Más que nada porque han albergado y defendido hasta la saciedad el carácter infantil de dichos lenguajes.

La presentación de Yegge identifica con bastante claridad los tópicos, casi todos falsos, en los que se basan los partidarios de los lenguajes estáticos. Hay un tremendo margen de mejora, como evidencian proyectos como el nuevo SquirrelFish, un nuevo intérprete de Javascript para el navegador WebKit (Apple Safari) que casi duplica el rendimiento del actual pese a que no se le consideraba lento.



Precisamente para acallar algunas críticas respecto a la velocidad, el equipo responsable de la nueva versión de EcmaScript (Javascript), lenguaje que no recibía actualización desde hace años, ha incorporado multitud de nuevas características. En un futuro artículo trataré de analizarlas, pero considero que muchas de ellas no son más que intentos de copiar a los lenguajes estáticos para intentar atraer a sus programadores. Adobe mismo ha criticado muchas de esas nuevas características, por no haberse probado lo suficiente, resultar complicadas de implementar y existir múltiples dudas sobre su idoneidad. Personalmente creo que la mayor parte de los cambios no resultan adecuados y traicionan en gran medida la gracia y la ortogonalidad del lenguaje.