yeikos

JavaScript/NodeJS Merge: combinando objetos

2013-05-06T15:27:00.001+01:00

JavaScript/NodeJS Merge es una función para mezclar múltiples objetos en uno solo, con la posibilidad de crear un nuevo objeto clonado. Su funcionamiento es muy similar a la función jQuery.extend pero con una serie de ventajas:

Más flexible, pudiendo introducir argumentos que no sean objetos planos (son ignorados).
Compatible con NodeJS (npm install merge).
Compatible con JavaScript desde el navegador (http://yeikos.googlecode.com/files/merge.js).

El repositorio del código se encuentra en: https://github.com/yeikos/js.merge, junto a una breve documentación con ejemplos y unas pruebas unitarias.

JavaScript tips: cadena aleatoria

2013-01-15T01:25:00.000Z

Revitalizando la creación de instancias en JavaScript

2013-01-12T03:27:00.001Z

Lo que hoy os traigo es un modelo de código a seguir para revitalizar la creación de instancias en JavaScript. Entre sus características más destacadas tenemos:

No es necesario el uso del operador new para la creación de una instancia.
Prescindiendo del operador new para la creación de la instancia, podemos pasar una lista de argumentos en forma de matriz al constructor.
Es posible interactuar con la instancia antes de que se llame al constructor original.

Todo ello se traduce en una ligera comodidad a la hora de escribir, reducción de código y más flexibilidad antes y durante la creación de la instancia.

Os preguntareis qué tiene de especial el poder interactuar con la instancia antes de que se llame al constructor original. Muy sencillo, esta funcionalidad nos permitirá, entre otras cosas, crear otra instancia durante la creación de una instancia, y todo ello dentro del mismo constructor. A groso modo, sin las medidas adecuadas, realizar lo anterior nos llevaría a un bucle infinito.

La solución sucia a lo anterior sería pasarle al constructor un argumento especial que sirva de marcador para que no siga creando otra instancia cada vez que se llame al constructor. Digo sucia, porque no podemos garantizar que se introduzca, por accidente, tal argumento especial en el constructor, ofreciéndonos resultados no esperados.

Lo correcto, a resumidas cuentas, es preparar una nueva clase y asignarle el prototipo original, de este modo podemos crear instancias sin que éstas hayan tenido que pasar por su constructor original. Llegados a este punto podemos interactuar con la instancia y crear un marcador, y a continuación llamar al constructor original de la instancia.

Por último adjunto el código fuente sobre lo comentado anteriormente (Animal.instance).

JavaScript/NodeJS URL parser: Analizador de URL - Actualizado 17/01/13

2013-01-07T15:17:00.000Z

Bien es sabido lo tedioso que puede resultar lidiar con las direcciones URL, especialmente en JavaScript, que no posee ninguna función de ayuda robusta para manipularlas, cosa que si sucede en algunas de sus derivadas como NodeJS con su módulo url, aunque en este caso, la solución que traigo pueda ser más potente que la que ofrece NodeJS.

Las distintas alternativas disponibles para JavaScript no me han parecido suficientemente potentes y ello me llevó a desarrollar este analizador de URL, o también conocido como URL parser.

Cuidado al detalle, con numerosas funcionalidades, siguiendo al dedillo la normativa RFC3986 que dicta la sintaxis general de los identificadores uniformes de recursos (URI) y con muchas posibilidades más: JavaScript/NodeJS URL.

Actualizado: desde la versión inicial, hace poco más de una semana, se han corregido varios fallos, añadido nuevas funcionalidades y optimizado el código. También se ha añadido una ligera documentación en español sobre los métodos de la instancia en esta misma entrada. Para más información sobre los cambios, visite la sección changelog de la documentación.

¿Qué es JavaScript/NodeJS URL?

Es una clase escrita en JavaScript que permite analizar y manipular muy fácilmente una URL. Además, tiene soporte para trabajar sobre NodeJS (kurl), por lo que se convierte en una buena herramienta de trabajo.

JavaScript/NodeJS URL se caracteriza por su manera de analizar las direcciones URL, ya que su misión no es validar la misma como una única entrada entera, sino que primero divine la URL en atributos para luego ir validando y normalizando cada uno de ellos. De esta manera podemos mantener la integridad de la URL a pesar de que haya un atributo erróneo, y así comprobar más tarde si dicho atributo se encuentra vacío o no.

La clase URL cuenta con una suite de herramientas que nos permitirán operar con la dirección a nuestro antojo y con una característica a destacar, llamada localización, lo que nos permitirá formar direcciones completas a partir de una incompleta.

Esto sucede por ejemplo con las carpetas relativas, si un enlace tiene como dirección sublevel.html (nótese que no empieza con una barra) y la dirección sobre la que se encuentra el navegador es http://localhost/level/ (nótese la última barra), la dirección resultante será http://localhost/level/sublevel.html.

Lo mismo sucede con direcciones que comienzan con doble barra (//localhost), que que adoptarán el protocolo actual de la página o con las direcciones que comienzan con signo interrogación o almohadilla.

¿Cómo se utiliza?

Los métodos disponibles se encuentran documentados en el propio repositorio: https://github.com/yeikos/js.url. También hay a vuestra disposición unos ejemplos y una serie de pruebas unitarias, las cuales recomiendo echar un ojo, que os permitirán entender cada uno de los métodos disponibles. Aún así haré un breve resumen sobre su utilización.

La función URL puede recibir dos parámetros: dirección y localización. La primera es simplemente la dirección URL que queremos manejar, y el segundo parámetro es el que se comentó anteriormente. Ambos parámetros pueden ser introducidos en forma de cadena de texto o en forma de objeto de atributos (seguir leyendo).

Las diferentes partes de la dirección URL son clasificadas en atributos, cuyos nombres coinciden en parte con los del objeto Location: protocol, auth, host, hostname, port, pathname, search, hash.

Estos atributos pueden ser manipulados mediante el método attr, cuyo comportamiento es similar al de jQuery. Ademas, durante el establecimiento del valor de un atributo, éste pasará por un proceso de validación y normalización basado en el estándar RFC3986, y en caso de incumplimiento el valor guardado pasará a ser una cadena vacía. Cada atributo recibe su normalización especial y esta se realiza en segundo plano.

Finalmente la reconstrucción de la URL viene dada con el método href, que concatenará los atributos adecuadamente para dar como resultado la dirección URL en forma de cadena de texto.

URL('//www.yeikos.com').attr('pathanme', '/2013/01/javascript-nodejs-url-parser.html').attr({ protocol: 'http' }).href();

Además también provee una serie de métodos para una manipulación más rápida y exhaustiva de la dirección URL, y de los que se habla a continuación.

Métodos

A continuación se detallan los métodos disponibles de la instancia, partiendo de que url es una instancia de URL ya creada.

url.location

Es una instancia URL añadida por el constructor y cuyos atributos serán usados internamente para calcular la dirección en base la la localización.

retorna la instancia de la localización.

url.href()

Construye una dirección URL en base a los atributos establecidos.

retorna una dirección URL como cadena de texto.

url.href(url)

- url: cadena de texto, objeto de atributos o elemento DOM.

Establece una nueva dirección reemplazando todos los atributos.

retorna la instancia.

url.attr()

Obtiene todos los atributos.

retorna objeto de atributos

url.attr(name)

- name: nombre del atributo (cadena de texto)

Obtiene el valor del atributo.

retorna el valor del atributo como cadena de texto.

url.attr(name, value)

- name: nombre de atributo.

- value: valor del atributo.

Establece un nuevo valor al atributo.

retorna la instancia.

url.attr(object)

- object: objeto de atributos.

Establece múltiples valores de atributos.

retorna la instancia.

url.search()

Obtiene el atributo `search` en forma de objeto.

retorna un objeto.

url.search(name)

- name: nombre del componente.

Obtiene el valor del componente.

retorna el valor del componente (cadena de texto).

url.search(name, value)

- name: nombre del componente.

- value: valor del componente. Si es `null` el componente será eliminado.

Establece un nuevo valor al componente.

retorna la instancia.

url.hash()

Obtiene el atributo `hash` en forma de objeto.

retorna un objeto.

url.hash(name)

- name: nombre del componente.

Obtiene el valor del componente.

retorna el valor del componente (cadena de texto).

url.hash(name, value)

- name: nombre del componente.

- value: valor del componente. Si es `null` el componente será eliminado.

Establece un nuevo valor al componente.

retorna la instancia.

url.isExternal()

Comprueba si la dirección es externa basándose en la localización definida, y si esta no se encuentra definida, lo determinará comprobando si la dirección es una carpeta o no (si es una carpeta se considerará no externa).

retorna `true` o `false`.

url.select(name, name, ...)

- name: nombre del atributo.

Construye una dirección URL utilizando solamente los atributos seleccionados.

retorna la dirección URL (cadena de texto).

url.unselect(name, name, ...)

- name: nombre del atributo.

Construye una dirección URL excluyendo los atributos seleccionados.

retorna la dirección URL (cadena de texto).

url.from(name)

- name: nombre del atributo.

Construye una dirección URL empezando desde el atributo seleccionado.

retorna la dirección URL (cadena de texto).

url.to(name)

- name: nombre del atributo.

Construye una dirección URL empezando desde el primer atributo hasta el seleccionado.

retorna la dirección URL (cadena de texto).

Colabora

Para más información recomiendo que visite la documentación extendida del repositorio y los ejemplos. Y si desea ver todo el potencia de esta suite revise las pruebas unitarias.

Controlando la ejecución simultánea de los eventos click y focus

2012-07-18T13:06:00.001+01:00

Puede que el título resulte algo confuso, así que trataré de explicarlo detalladamente.

Tenemos una serie de campos de texto y queremos intervenir el evento focus y click de uno de ellos para que realicen una misma acción. El problema llega cuando pulsamos sobre susodicho campo, no encontrándose éste enfocado, lo cual causa la doble ejecución de nuestra acción. Esto se debe a que al pulsar sobre el campo, además de llamar al evento click, se llama al evento focus, y este último en primer lugar. Tal escenario lo podéis encontrar en http://jsfiddle.net/yeikos/F4Ewe/.

Para controlar la ejecución simultánea de los eventos click y focus (ahora sí jeje), podemos implementar una sencilla solución, a la vez que eficaz, y que consiste en intervenir el evento mousedown, que es llamado antes que focus y click, para poder tener cierto control sobre la ejecución.

El escenario con la solución ya implementada se encuentra en http://jsfiddle.net/yeikos/hWkAK/, y el código fuente de la solución en https://gist.github.com/3135853.

NPM: Error, cannot find module

2012-06-25T22:47:00.001+01:00

NPM (Node Package Manager) es el controlador de paquetes de NodeJS y es utilizado, entre otras muchas cosas, para instalar y publicar librerías (paquetes). Además permite controlar exhaustivamente las dependencias de las librerías para que no haya conflictos.

El controlador de paquetes al que hacemos mención viene instalado de serie junto a NodeJS, así que no deberemos instalarlo aparte. No posee interfaz gráfica, por lo que tendremos que manejarlo mediante la consola de comandos (npm), sin embargo si posee un repositorio web donde podremos consultar las librerías que han sido publicadas.

Uno de los comandos más utilizados en NPM es install, el cual nos permitirá instalar las librerías que más tarde podremos incluir desde nuestros scripts a través de la función require de NodeJS. A continuación se muestra un ejemplo que servirá para instalar, en este caso, la librería tuenti.

npm install tuenti

De esta manera instalaremos dicha librería en la ruta donde nos encontremos (éstas son guardadas dentro de la carpeta /node_modules/ de la ruta actual), por lo que tendrá un ámbito local y tal libreria solamente podrá incluirse si el script ejecutado se encuentra dentro de esa ruta.

Como es de esperar esto puede acarrear diversos quebraderos de cabeza al querer mantener actualizadas todas nuestras librerias, pues los scripts pueden encontrarse en carpetas diferentes, utilizando cada uno de ello sus propias librerías, sin ninguna centralización.

Afortunadamente, el comando install de NPM posee un marcador para realizar una instalación bajo un ámbito global, es decir, que todas las instalaciones de librerías que se realicen con dicho marcador irán a parar a una carpeta en común, que forma parte del sistema y ya no será la ruta actual.

npm install tuenti -g

Para conocer la carpeta en la que son guardadas todas estás librerias con ámbito global podemos hacer uso del comando prefix y del marcador global.

npm prefix -g

Tan solo hay un inconveniente, y es que, al menos en Windows, NodeJS no tiene definida por defecto la carpeta anterior como global para la inclusión de sus librerías mediante require. Por lo que si intentamos incluir una libreria global obtendremos el siguiente error:

Error: Cannot find module

Para solucionarlo deberemos definir la variable del sistema NODE_PATH, dándole el valor de la ruta global de NPM (devuelta anteriormente) y añadiéndole la carpeta \node_modules\ al final.

En Windows 7 la ruta de instalación global de NPM es C:\Users\USER\AppData\Roaming\npm\, por lo que el valor de NODE_PATH será C:\Users\USER\AppData\Roaming\npm\node_modules\, o lo que es lo mismo %APPDATA%\npm\node_modules\.

set NODE_PATH=%APPDATA%\npm\node_modules\

¿Cómo obtener la latitud y longitud en Google Maps?

2012-05-30T12:04:00.000+01:00

Dirigirse a la página Web de Google Maps.
Pulsar con el botón derecho del ratón sobre un punto dentro del mapa.
Seleccionar la opción ¿Qué hay aquí? del menú contextual.
Las coordenadas geográficas (latitud y longitud respectivamente) quedarán guardadas y visibles en el campo de búsqueda de la misma página.

jQuery placeholder v1.5.0

2012-05-29T01:07:00.000+01:00

Actualización de jQuery.placeholder v1.5.0.

Ahora más eficiente y un 25% más ligero.

Más información: http://www.yeikos.com/2011/07/jquery-placeholder.html.

jQuery unparam: función inversa de jQuery param

2012-05-09T13:33:00.004+01:00

jQuery posee una función llamada param, la cual transforma un objeto en una cadena de texto en formato URL de datos. El problema se presenta cuando nos encontramos en la situación contraria, tenemos una URL de datos y queremos convertirlo en un objeto, es entonces cuando no tenemos ninguna función que realice el proceso descrito.

Hay diversas alternativas por Internet y las que he probado no me han convencido, ya que no funcionan como deberían. Algunas de esas alternativas no leen recursivamente los objetos dentro de objetos (data[a][b]=c) y otras lo hacen malamente, obteniendo un resultado que para nada es el esperado.

¿Qué es jQuery unparam?

jQuery.unparam es la función inversa de jQuery.param y nos permitirá transformar una URL de datos en un objeto.

¿Cómo se utiliza?

Tan solo debemos introducirle como único parámetro la cadena de texto en formato URL, por ejemplo:

var str = 'a=one&b[]=two&b[]=three&b[c]=four';
console.log($.unparam(str)); // {"a":"one","b":{"0":"two","1":"three","c":"four"}}

En la siguiente dirección podéis acceder a una demostración para ver su funcionamiento con datos más complejos: http://jsfiddle.net/yeikos/9Sv3p/.

Código fuente: https://raw.github.com/yeikos/jquery.unparam/master/jquery.unparam.js
Repositorio Github: https://github.com/yeikos/jquery.unparam

Descarga (versión comprimida): https://raw.github.com/yeikos/jquery.unparam/master/jquery.unparam.min.js

jQuery pushevent: Cambiando el orden de los eventos

2012-05-09T12:26:00.000+01:00

Los eventos en jQuery, al igual que en JavaScript, son ejecutados en el mismo orden por el cual fueron creados. A priori no es posible cambiar el orden de ejecución de los eventos una vez que estos son creados, lo cual puede mermar la escalabilidad cuando se ha de manejar un entorno con numerosos eventos.

Como bien dije, de primera mano y bajo las condiciones que nos brinda jQuery, alterar el orden de ejecución de los eventos a nuestro antojo puede suponer una tarea laboriosa, pero gracias a jQuery.pushevent será coser y cantar.

¿Qué es jQuery pushevent?

Es propiamente un plugin de jQuery que nos permitirá cambiar el orden de ejecución de los eventos muy fácilmente y sin ninguna complicación.

¿Cómo se utiliza?

El plugin consta de una única función con tres argumentos, uno de los cuales es opcional.

$(selector).pushEvent(eventNames, selector, position);

El primer selector hace referencia al elemento o elementos sobre los cuales se desea alterar el orden de los eventos. El primer parámetro de la función (eventNames) es el nombre del evento, que pueden ser múltiples separados por espacios, y siempre utilizando un marcador (namespace) para poder localizar el evento, de lo contrario lo ignorará (http://api.jquery.com/event.namespace/).

El segundo parámetro es otro selector y solo será necesario si queremos actuar sobre un evento delegado. Si es así, el primer selector será el contexto, y este segundo selector será el elemento o elementos en cuestión que pertenece al contexto anterior (http://api.jquery.com/delegate/).

Por último, tenemos el parámetro posición, que será un número entero y servirá para trasladar los eventos especificados a dicha posición. Por defecto, si no se define la posición ésta será cero, siendo cero la primera posición, y por consiguiente el primer evento en ser ejecutado. También acepta valores negativos, siendo por ejemplo, -1 la última posición.

Podéis acceder a una demostración online para ver su funcionamiento (http://jsfiddle.net/yeikos/uTQT8/), o si prefereis el código fuente de la demostración, se encuentra en el repositorio de jQuery.pushevent, como demo.html (https://github.com/yeikos/jquery.pushevent/blob/master/demo.html).

Código fuente: https://raw.github.com/yeikos/jquery.pushevent/master/jquery.pushevent.js
Repositorio Github: https://github.com/yeikos/jquery.pushevent

Descarga (versión comprimida): https://raw.github.com/yeikos/jquery.pushevent/master/jquery.pushevent.min.js

Especificaciones privativas: DOM y JavaScript - Actualizado 09/05/12

2012-03-28T00:52:00.001+01:00

La falta de control sobre las especificaciones puede suponer un auténtico rompecabezas para los desarrolladores, pues en muchos casos éstas no se encuentran disponibles en todos los ámbitos.

El DOM, modelo de objeto del documento, es a resumidas cuentas, un marco de trabajo con el que podemos interactuar con objetos para ofrecer así una vista del documento al usuario.

El responsable de su control, como en muchos otros estándares, es el consorcio WC3, y sus especificaciones se encuentra bajo el nivel 2. Esta versión de las especificaciones del DOM lleva dando guerra casi 12 años, pero de vez en cuando surgen necesidades y, mientras su versión renovada siga bajo un borrador, queda en manos de los navegadores, o más bien de los motores de renderización, actuar para adaptar éstas a sus necesidad.

Los motores de renderización son el corazón (¡Que poético!) de los navegadores. Quizá los que más repercusión estén teniendo sean Webkit, utilizado por Chrome y Safari entre todos, y Gecko, perteneciente a la fundación Mozilla. Bajo estos motores se encuentran diversas especificaciones, de la mano de WC3, relacionadas con HTML, DOM, JavaScript, CSS, además de las propias incluidas por estos motores, llamadas especificaciones propias.

Llegados a este último punto no hay control que valga y cada motor entra al trapo con sus especificaciones propias para rellenar esos huecos vacíos que deja la ineficacia de la WC3.

Entre esas especificaciones propias tenemos los vendor-specific de CSS (-moz-, -webkit-, -ms-, etcétera) o en el caso del DOM, pequeñas joyas escondidas como la que os comento a continuación.

Bajo el motor Gecko, y dentro de la especifiación del DOM, tenemos el objeto events, y a su vez, dentro de éste la propiedad explicitOriginalTarget, que es exclusiva de Gecko y no se encuentra disponible en los demás motores de renderización.

Esta propiedad hace referencia al elemento desde el cual se originó la llamada al evento, y a diferencia de target o currentTarget, explicitOriginalTarget tiene la peculiaridad de que, a pesar de que el evento sea reorientado internamente, consigue llegar al final de la cadena para obtener el elemento desde el que se inició dicho evento.

Esa reorientación del evento sucede, por ejemplo, en el evento submit de los formularios. Así, la propiedad a la que hacemos mención nos permitirá averiguar, en el ámbito de un formulario, bien, si nos encontrábamos dentro de un campo de texto cuando pulsamos la tecla intro o qué botón de envío pulsamos.

La falta de esta propiedad en la especificación original de la WC3 nos imposibilita todo lo anterior en el resto de navegadores, pero podemos recuperar parte de su funcionalidad mediante unas pocas líneas de código, ya que el hecho de añadir una capa de abstracción completa para simular dicha propiedad, y de este modo poseer toda su funcionalidad, puede poner en peligro la integridad del sitio.

Al pulsar sobre el botón de envío de un formulario, si este botón tiene asignado el atributo name, su nombre y valor serán incluidos en los datos a enviar del formulario. Tal resultado lo podemos apreciar en la siguiente dirección http://fiddle.jshell.net/GqQ9E/show/.

El problema aparece cuando intervenimos mediante JavaScript el evento submit y deseamos recuperar los datos de envío, especialmente los del botón que accionó la petición.

Para recrear dichas situaciones recurriremos a jQuery y su función serialize, la cual obtiene los datos del formulario a enviar, tal como se muestra en el siguiente ejemplo http://fiddle.jshell.net/yeikos/4U3SX/.

Como podréis observar, al pulsar sobre cualquiera de los dos botones, tan sólo obtendremos los datos del campo de texto, pues la misión de la función serialize se limita a obtener los datos de los elementos (input, select, textarea, etcétera) del formulario y no los pertenecientes al botón de envío.

Para que en el ejemplo anterior obtengamos el resultado esperado, deberemos añadir una pequeña capa de abstracción que resuelva dicho problema y que podemos encontrar en la siguiente dirección https://gist.github.com/1261574#file_fix_eo_target.js.

De esta manera, intervendremos el evento click de todos los botones para que cuando éstos sean pulsados, añadamos sus datos al formulario antes de que el evento submit sea llamado.

El ejemplo funcional, ya con la capa de abstracción, lo podéis encontrar en la siguiente dirección http://jsfiddle.net/yeikos/yE8zB/.

NodeJS Tuenti API 1.0.2

2012-02-13T23:59:00.000Z

Actualización de NodeJS Tuenti Api.

Ahora disponible en los repositorios npm: http://search.npmjs.org/#/tuenti.

Más información: http://www.yeikos.com/2011/09/tuenti-api-nodejs.html.

Javascript tips: último elemento

2012-01-17T12:50:00.004Z

Webkit feature: barra de desplazamiento - Actualizado 11/01/12

2011-11-10T07:49:00.000Z

El problema en cuestión reside cuando se eliminan los nodos hijos de un contenedor padre a la hora de intervenir en el evento submit de un formulario, produciendo la perdida de la posición de la barra de desplazamiento.

Condiciones necesarias

El navegador utiliza el motor Webkit (Chrome, Safari, Konkeror, etcétera).
Debe de haber un formulario con un campo de texto y al mismo formulario le debe prevalecer cualquier contenido, como un texto.
Se llama al evento submit del formulario mediante la tecla intro (gracias esto último al campo de texto).
Se cancela el evento anterior mediante un listener, pero antes de ello, se eliminan los nodos hijos del contenedor padre a cambiar (removeChild), estableciendo a continuación el nuevo contenido.
La barra de desplazamiento debe estar visible para apreciar la anomalía.

Actualizado: Al parecer la versión del motor WebKit 535.7 a la que da soporte Chrome en su versión 16 no presenta el problema que se describe en esta entrada, así que el problema pasará a ser una mera anecdota.

Demostración con javascript nativo

http://jsfiddle.net/yeikos/muVNt/

Solución

El remedio más directo sería hacer uso de innerHTML para establecer el nuevo contenido sin eliminar los nodos hijos del contenedor a cambiar.

El problema de ello es que innerHTML no es un estándar de la W3C, ya que pertenece a Microsoft (concretamente a Internet Explorer), pero su uso se extendió a los demás navegadores.

Se prevee que en un futuro lejano esta función quede obsoleta, pero eso ya es otro cantar, ya que la alternativa sería trabajar con el DOM directamente, lo cual puede llegar a resultar muy engorroso, debiendo recurrir a diferentes frameworks, lo cual nos facilita mucho la tarea.

Otro problema es que innerHTML no evalúa las etiquetas script, por lo que si queremos hacer uso de esa funcionalidad tenemos que volver a trabajar sobre el DOM o frameworks, como jQuery.

Demostración con jQuery

jQuery también se ve afectado pero de una forma cuanto menos curiosa, ya que el contenido lo establecemos mediante la función jQuery.html, fácilmente y sin problemas, pero si éste contiene alguna etiqueta script la susodicha función cambia su forma de trabajar, utilizando la función empty para vaciar el contenido y a continuación append para añadir el contenido nuevo, y sí, como algunos estaréis pensando, la función empty de jQuery utiliza removeChild para eliminar los nodos hijos.

En este caso particular no nos vale utilizar innerHTML para establecer el nuevo contenido, ya que no evaluará las etiquetas script, así que la única solución es vaciar el contenido sin hacer uso de removeChild, es decir, asignando una cadena vacía a innerHTML o en su defecto, utilizando la función html de jQuery y pasandole como argumento una cadena vacía.

Una vez vaciado el contenido podemos establecer el contenido nuevo utilizando el DOM (jQuery.html) para que evalué las etiquetas script sin ningún tipo de problema y sin pérdida de posición de la barra de desplazamiento, ya que al encontrarse el contenido vació antes de establecer el nuevo, la función empty no tiene que vaciarlo de nuevo, ya que no hay nodos para eliminar, por lo que no hará uso de removeChild.

http://jsfiddle.net/yeikos/SgNKV

Javascript tips: str2argv

2011-10-12T23:22:00.001+01:00

Javascript tips: timestamp

2011-09-14T15:13:00.002+01:00

API de Tuenti en NodeJS - Actualizado 13/02/12

2011-09-05T11:18:00.000+01:00

Tuenti no posee ninguna API de carácter público, pero ésta tuvo que ser creada silenciosamente para el desarrollo de sus propias aplicaciones en las diferentes plataformas móviles, así como Android, iOS, Symbian...

Para aquellos que anden un poco perdidos, una API vendría a ser una capa de abstracción que ofrece una serie de funciones. En definitiva, su misión es facilitar el desarrollo de aplicaciones, evitando repetir código y creando un entorno amigable.

Gracias a la publicación de esta API, cualquiera puede desarrollar un cliente para comunicarse con las diversas funciones que ésta ofrece, interactuando con gran parte de sus servicios pero no todos, claro está, ya que nos encontramos limitados por esa capa de abstracción.

Actualmente Tuenti ofrece su aplicación móvil en diferentes plataformas, y el uso de su API se encuentra limitada a éstas, pues aún habiéndose portado la API de Tuenti a otros lenguajes (véase PHP), su usabilidad se encuentra algo entorpecida debido al lenguaje.

Es por ello que me he visto obligado a portar la API a nodeJS, añadiendo nuevas funcionalidades para su manejo e incluyendo una pasarela que permitirá que el desarrollo de aplicaciones para Tuenti sea un mero juego de niños.

¿Qué es NodeJS Tuenti API?

Resumiendo lo dicho anteriormente, viene a ser una librería para nodeJS que actúa como API para comunicarse con los servicios que ofrece la API de Tuenti.

Se diferencia de las demás versiones portadas por terceros en su usabilidad y en que Javascript es el entorno perfecto para trabajar con llamadas asíncronas (la inicialización de una petición no paraliza la ejecución del código).

¿Cómo se instala?

Lectura obligatoria: http://www.yeikos.com/2012/06/npm-error-cannot-find-module.html

Tan fácil como dirigirse a http://nodejs.org y descargar NodeJS para nuestra plataforma. Una vez instalado deberemos hacer uso del gestor de paquetes http://npmjs.org, que ya viene de serie en las últimas versiones de NodeJS, y desde la línea de comando introducimos lo siguiente para instalar la librería NodeJS Tuenti Api.

npm install -g tuenti

El parámegro -g le indica al gestor que debe instalar el paquete en la ruta global y no en el directorio local sobre el que nos encontramos.

¿Cómo se utiliza?

La librería provee 3 métodos, login, request y gateway, y su funcionamiento es muy simple, por eso os sugiero que visitéis la siguiente página en la cual tenéis 4 ejemplos para que podáis examinarlos: https://github.com/yeikos/nodejs.tuenti/tree/master/examples.

La única puntualización a hacer es sobre el método gateway que actúa como pasarela o intermediario. Gracias a esto, y mediante la librería jQuery Tuenti API, se puede interactuar directamente con la API de Tuenti desde el propio navegador. Esto abre un gran abanico de posibilidades a futuros desarrollos, ya que simplificamos todo el trabajo, pudiendo crear diferentes tipos de aplicaciones Web para Tuenti.

De la librería jQuery Tuenti API poco hay que decir, pues posee los mismos métodos y trabaja exactamente igual que NodeJS Tuenti API, exceptuando el método gateway, pues carecería de sentido que lo tuviera.

Colabora

Actualmente el proyecto se encuentra subido a github, portal donde podrás participar en el desarollo del código fuente.

Javascript tips: desplazar array

2011-08-24T03:02:00.001+01:00

Javascript tips: argument script tag

2011-08-04T14:14:00.000+01:00

Paradoja

2011-07-12T16:47:00.000+01:00

No válida para navegadores duros de roer.

jQuery Placeholder - Actualizado 29/05/12

2011-07-12T00:43:00.000+01:00

Placeholder es un atributo que pertenece a HTML5 y se encuentra disponible en los campos de texto y contraseña (input text/password) y las áreas de texto (textarea).

Su función es mostrar un mensaje informativo dentro del elemento cuando éste no tiene contenido.

El problema de HTML5, concretamente del atributo placeholder, es que aún no ha sido implementado en todos los navegadores, es más, en algunos sí ha sido implementado pero con soporte parcial, dejando a un lado los campos de contraseña, por ejemplo.

Por suerte, existen soluciones varias para solventar este problema y una de ellas es la que os expongo a continuación: jQuery Placeholder.

¿Qué es jQuery Placeholder?

Básicamente es un plugin de jQuery quer permite el uso del atributo placeholder en cualquier navegador. Su funcionamiento es sencillo y destacaré sus puntos fuertes:

Compatibilidad: soporte para todos los navegadores incluido el ya casi olvidado IE6.
Eficaz y ligero: el código no es intrusivo, en su justa medida claro está, utilizando los métodos más idóneos para no interferir con el funcionamiento por defecto del navegador.
Usabilidad: además de brindar las usabilidades básicas se incluyen otras como la opción de prescindir de ejecutar este plugin sobre los elementos en caso de que el navegador si soporte nativamente el atributo placeholder (forced), o la posibilidad cambiar el estilo de la etiqueta del placeholder mediante la clase CSS .placeholder (para cambiar la propiedad color desde la clase es necesario utilizar la regla !important).

¿Cómo se utiliza?

$(context).placeholder(selector, config)

La función admite dos argumentos opcionales de entrada sin importar el orden en el que éstos son enviados. El argumento que sea una cadena de texto, será evaluado como selector, de este modo se buscará dentro del contexto dichos elementos que concuerden con el selector.

El otro argumento será evaluado si es un objeto y corresponderá a config, que posee dos propiedades: selector (explicado anteriormente) y forced (explicado en el apartado usabilidad).

Por defecto el marcador forced se encuentra desactivado, evitando así dar soporte al atributo placeholder en caso de que el navegador lo soporte nativamente. El selector por defecto agrupa a todos los campos de texto y contraseña y las áreas de texto. Todas estas opciones las podéis encontrar en el objeto $.placeholder.defaults.

También se encuentra una función de acceso rápido, la cual utiliza directamente el contexto body y se le pueden aplicar las mismas reglas para los argumentos de la función anterior.

$.placeholder(selector, config)

Podéis encontrar varios ejemplos, básicos y complejos, en el repositorio de GitHub del plugin.

Código fuente: https://raw.github.com/yeikos/jquery.placeholder/master/jquery.placeholder.js
Repositorio Github: https://github.com/yeikos/jquery.placeholder

Descarga (versión comprimida): https://raw.github.com/yeikos/jquery.placeholder/master/jquery.placeholder.min.js