Códigos promocionales de Dreamhost actualizados

Noviembre 16, 2008

He actualizado los códigos promocionales de Dreamhost, ahora también podéis daros de alta usando un enlace promocional o añadiendo mi dirección de correo para indicar que vais de mi parte.

Aquí está el post con los códigos promocionales y los enlaces.

Ya ha habido un referido, al cual le doy las gracias encarecidamente :)

Evitar el uso de eval() en Javascript

Noviembre 6, 2008

Hoy en el trabajo he descubierto que la función eval() de Javascript y Firebug se llevan muy mal. Tan mal que no conseguía depurar una clase que estoy desarrollando. Googleando un poco he conseguido encontrar varias formas de evitar eval() y algunos motivos por lo que es recomendable evitar su uso.

El funcionamiento de eval() es el siguiente:

  1. Se convierte el argumento en un String.
  2. Se parsea el String y se convierte en código Javascript.
  3. Se ejecuta el código Javascript resultante.

Evidentemente saltarse los pasos 1 y 2 mejora el rendimiento. Además evita esos problemas “raros” que he comentado antes con Firebug.

En concreto los problemas con los que me he encontrado incluían los siguientes usos de eval:

  • Asignar una propiedad a un objeto cuyo nombre está almacenado en un String.
  • Llamar a una función cuyo nombre está almacenado en un String.
  • Crear un objeto de una clase cuyo nombre está almacenado en un String.

Es decir, tres casos muy parecidos que se reducen a uno solo, acceder a variables cuyo nombre conocemos a posteriori. Para solucionar esto basta con saber que hay varias formas de acceder a una propiedad de un objeto en Javascript. La típica:

  1. objeto.atributo = valor

y la no tan típica:

  1. var nombreDelAtributo="atributo";
  2. objeto[nombreDelAtributo] = valor;

Ahora solo falta saber otra cosa. Cualquier variable se puede acceder también como un atributo del objeto window, un ejemplo:

  1. var cadena = "Hola mundo!";
  2. alert(window.cadena); //mostrará un alert con "Hola mundo!"
  3. alert(window[‘cadena’]); //también mostrara un alert con "Hola mundo!"

Ahora veamos algunos ejemplos de usos de eval() y otras formas de avordar el mismo problema.

  1. /*
  2. *asignar un valor a un atributo cuyo nombre no conocemos a priori
  3. */
  4. eval(‘objecto.’ + nombreDelAtributo + ‘=valorDelAtributo’);
  5. //se podría cambiar por
  6. objeto[nombreDelAtributo] = valorDelAtributo;
  7.  
  8. /*
  9. * Llamar a un metodo de un objeto estando el nombre del metodo almacenado en una variable
  10. */
  11.  
  12. eval(‘objeto.’ + nombreDelMetodo + ‘(argumento)’);
  13. //podría ser
  14. objeto[nombreDelMetodo](argumento);
  15.  
  16. /*
  17. * Crear un objeto de una clase teniendo el nombre de la clase en una variable
  18. */
  19.  
  20. eval(‘var objeto = new ‘ + nombreDeLaClase + ‘()’);
  21. //sería
  22. var objeto = new window[nombreDeLaClase]();

En el último ejemplo podemos hacer esto por que una clase es también una variable del programa, y como tal se almacena como un atributo del objeto window.

Y vosotros, ¿usáis eval() en vuestro código? ¿conocíais estas soluciones?

Código promocional de Dreamhost

Noviembre 3, 2008

Como ya he comentado en alguna ocasión, he mudado OBG a Dreamhost. Este hosting ofrece un código promocional a sus clientes para que lo ofrezcamos a los clientes potenciales y que así obtengan una rebaja en su primer año de contrato. Además si usáis ese código yo consigo también algo de pasta gansa para mantener OBG :) Estos son los códigos promocionales:

  • Código: OBG2008
    1. 25 USD de descuento si pagáis mensualmente.
    2. 50 USD de descuento si pagáis por 1, 2, 3, 5 ó 10 años
  • Código: OBGIP2008
    1. Una dirección IP fija gratis y 20 USD de descuento en todos los planes excepto el mensual
  • Código: OBG2DOMINIOS2008
    1. 2 Dominios extra gratis.

También podéis ser referidos de Otro Blog Geek indicando que nflamel@gmail.com cuando os den la oportunidad de indicar si sois referidos de alguien al daros de alta en DreamHost o usando este enlace para daros de alta.

Espero que los códigos promocionales os sirvan de algo y que además los uséis y colaboréis algo con OBG ;)

PS: Muchísimas gracias a los que hagan uso de los códigos promocionales y muchísimas gracias a aquellos que ya lo han hecho :)

Nuevo repositorio de Subversion

Noviembre 3, 2008

Hace unos meses mudé OBG a un nuevo servidor. OBG se hospeda ahora en Dreamhost, el cual ofrece en su plan básico un repositorio de subversion. Para sacar algo de partido a esta característica del servidor he decidido crear un repositorio en el que iré colgando los ejemplos de OBG y los pequeños proyectos en los que vaya trabajando. La dirección del repositorio es http://otrobloggeek.com/proyectos_obg/ . No es necesario usuario para acceder con permisos de lectura. Por ahora soy el único con permisos de escritura, aunque todo se andará.

Lo único que hay ahroa mismo en el repositorio es el tema del blog, White as Milk , el cual estoy traduciendo al español y pronto subiré otra versión del tema al cual le estoy añadiendo soporte para I18N. Pronto iré colgando otros proyectos en los cuales estáis invitados a participar :) .

Nuevo Tema: White as Milk

Noviembre 2, 2008

He cambiado el tema de Otro Blog Geek por uno algo más minimalista. El tema está basado en White as Milk. Voy a intentar traducir todo el tema al español e iré subiendo mis avances a un repositorio de subversion para que cualquiera pueda usarlo si quiere.

En breve colgaré la dirección del respositorio de subversion en el que además iré subiendo el código de los ejemplos que haya en los posts :)

HOWTO: Instalar Aptana en Eclipse IDE 3.4 (Ganymede)

Noviembre 1, 2008

Hoy me he propuesto actualizar mi IDE preferido a la última versión. Como ya he tenido malas experiencias actualizando eclipse voy a empezar instalando plugins uno a uno. El primero será Aptana, ya que es uno de los que más utilizo. Este es el procedimiento que he seguido.

  1. Descargar Eclipse Classic de su web, descomprimir e instalar donde queramos.
  2. Vamos a “Window->Preferences” Y cambiamos activamos “Classic Update” dentro de “General->Capabilities” tal y como se muestra en la captura.

    Opciones necesarias en Eclipse Ganymede para instalar Aptana

    Opciones necesarias en Eclipse Ganymede para instalar Aptana

  3. Ahora para instalar Aptana vamos a “Help->Sowftware Updates->Find and install”. Aquí seleccionamos “Search for new features to install”.
  4. En la nueva ventana pulsamos sobre “New Remote Site” y pegamos esta direccion en el campo URL http://update.aptana.com/install/studio/3.2/ . Pulsamos “OK” y luego “Finish”.
  5. Si todo ha ido bien, después de una pequeña espera, Eclipse nos mostrará un diálogo con características para instalar en las que aparecerá “Aptana studio”. Seleccionamos esta característica y pulsamos “Next >”.
  6. Aceptamos los términos de licencia y “Next >” otra vez. En el siguiente cuadro “Finish” para instalar.
  7. Ahora Eclipse descargará los archivos necesarios, así que paciencia. Una vez descargado un diálogo nos preguntará que confirmemos la instalación. Podemos pulsar en “Install All”. Ahora Eclipse instalará el plugin de Aptana y cuando termine nos pedirá que reiniciemos el Workspace.
  8. Tras el reinicio Aptana preguntará si queremos instalar el soporte para Subversion. No es necesario pero lo podéis instalar si queréis.

Ya tenemos instalado Aptana en eclipse Ganymede, ahora, a programar :)

Haciendo experimentos

Octubre 26, 2008

Estoy haciendo algunas pruebas en el blog para insertar AdSense para búsqueda, así que si algún visitante encuentra algún problema al entrar a OBG o ve algo raro, se agradece que lo comuniquen.

Event.stop() en Prototype

Octubre 19, 2008

Mi última pelea con Prototype ha estado protagonizada por los eventos. Tenía que conseguir capturar el evento de scroll sobre un div y después de hacer algunas cosas cancelar el comportamiento por defecto del evento y evitar la propagación al scroll general de la página.

Al final descubrí la función Event.stop() de Prototype. En la documentación dice lo siguiente:

Llamándola en un evento, para la propagación y previene el comportamiento por defecto.

Su uso es simple. Veamos un ejemplo.

  1. $(‘elemento’).observe(‘evento’, function(e){
  2.   otroComportamiento();
  3.   //esto detiene el comportamiento por defecto y evita la propagacion
  4.   e.stop();
  5. });

Aquí tenéis una página con un par de ejemplos. Podéis ver el ejemplo viendo el código fuente de la página.

  • El primer formulario mostrará un alert() con el valor
  • El segundo formulario hará una petición GET (evidentemente sin ningún efecto) sobre la misma página
  • El primer párrafo con scroll ignora el uso de la rueda del ratón
  • El segundo párrafo funciona igual que siempre :)

Octubre 18, 2008

Quedan 12 días para la salida de Ubuntu Intrepid Ibex. Esta nueva versión tiene bastantes novedades algunas como por ejemplo el uso de pulseaudio me han parecido de lo m?s interesantes. Llevo usando las versiones previas al lanzamiento desde hace algo m?s de un mes y tengo que decir que he notado una peque?a mejora, tanto en estabilidad como en rendimiento.

Todo parece m?s integrado en el sistema y los asistentes visuales parecen bastante estables. La gesti?n de controladores propietarios de hardware ha mejorado algo. Ahora puedes ver las diferentes versiones y gracias a DKMS parece que todo funciona mucho mejor. Tengo ganas de ver la versi?n final, pero mientras tanto, si sois tan impacientes como yo, pod?is instalar Intrepid usando desde consola el comando

  1. update-manager -d

Una pequeña rectificación

Octubre 18, 2008

He actualizado el enlace del HOWTO para configurar pulseaudio en Ubuntu Hardy. Podéis ver el enlace nuevo en la entrada.

Muchas gracias a Trasto por el testeo :)

Evitar problemas con las peticiones AJAX y la caché en Internet Explorer

Octubre 17, 2008

Desde hace unos días tengo algunos problemas con un módulo en Javascript que estoy desarrollando en el trabajo. El script hace una petición AJAX y obtiene un XML. El problema es que Internet Explorer cachea el XML cuando le apetece y eso provoca que a veces el módulo no cargue como debería. La solución es tan sencilla como añadir un nuevo argumento aleatorio a la petición, evitando así que Internet Explorer la cargue desde la caché la siguiente vez.

El siguiente ejemplo está basado en Prototype

  1. var ajaxRequest = new Ajax.Request(’sample.xml’, {
  2.   method: ‘get’,
  3.   //Extra parameter on request
  4.   parameters: {  
  5.     differentiator: Math.floor(Math.random()*50000)  
  6.   },
  7.   onSuccess: function(response){
  8.     whatever();
  9.   }
  10. });

Solución via: The Arsenalist

bind() y bindAsEventListener() en Prototype, como utilizarlos

Octubre 13, 2008

Desde que empecé a trabajar mi función principal es la de desarrollador web. Básicamente me peleo todo el día con Prototype y con AJAX. Después de unas cuantas semana Prototype se ha convertido en parte en un gran aliado, pero también en un enemigo a batir. Conocer el framework con profundidad es esencial para trabajar con él y a veces no es fácil. Una de las cosas que mas trabajo me costó entender fue la utilidad de las funciones bind() y bindAsEventListener(). Ambas son muy potentes y muy útiles cuando se utilizan bien, pero comprender su uso puede ser difícil y a veces nos pueden dar quebraderos de cabeza.

Voy a intentar explicar de forma clara y simple como se usan estas dos funciones y para qué sirven. Vayamos por partes.

  1. bind(): Es una de las estrellas en Prototype y también es una de las más trabajo suele costar entender. Imaginemos un objeto que tiene métodos para acceder a sus datos miembro. Usando bind() podemos hacer que esos objetos accedan a datos miembro de otros objetos en lugar de a los del objeto original. Veamos un ejemplo:
    1.  
    2. var Clase1 = Class.create({
    3.   initialize: function(msg){
    4.     this.mensaje = msg;
    5.   },
    6.   log: function(){
    7.     console.log(this.mensaje);
    8.   }
    9. });
    10. var objeto1 = new Clase1("Mensaje, Objeto1");
    11. var objeto2 = new Clase1("Mensaje, Objeto2");
    12.  
    13. objeto1.log(); //Genera -> Mensaje, Objeto1
    14. objeto2.log(); //Genera -> Mensaje, Objeto2
    15. //Creamos el bind de alerta para que se ejecute en el
    16. //contexto del objeto2.
    17. var log_bind = objeto1.log.bind(objeto2);
    18. log_bind(); //Genera -> Mensaje, Objeto2

    Como vemos, la llamada a log_bind() realiza la llamada a objeto1.bind() usando el contexto del objeto2, lo cual en terminos prácticos equivale a hacer objeto2.bind()

    También podemos usar bind() para añadir argumentos a la llamada a una función. Veamos un ejemplo de esto.

    1. var Clase2 = Class.create({
    2.   initialize: function(msg){
    3.     this.mensaje = msg;
    4.   },
    5.   log: function(){
    6.     console.log(this.mensaje + ‘ ‘ + $A(arguments).join(‘, ‘));
    7.   }
    8. });
    9.  
    10. var objeto3 = new Clase2("Mensaje, Objeto3");
    11. objeto3.log();
    12. var log_bind_mas_argumentos = objeto3.log.bind(objeto3,1,2,3,4,‘ lo que sea’);
    13. log_bind_mas_argumentos();

    Esta vez no cambiamos el contexto de la función, pero añadimos varios argumentos extra que luego se extraen usando $A(arguments), convirtiéndolos así en un Array de Prototype.

  2. bindAsEventListener(): Una vez hemos comprendido el uso que tiene bind() es fácil entender la dinámica de bindAsEventListener(). Su funcionamiento es el mismo que el de la función bind() pero con adaptaciones específicas para un contexto concreto, el de la captura de eventos.Este es el mismo ejemplo que hay en el API de Prototype pero un poco retocado:
    1. var obj = {
    2.   name: ‘Un bonito ejemplo’
    3. };
    4.  
    5. function handler(evento){
    6.   var tag = Event.element(evento).tagName.toLowerCase();
    7.   var data = $A(arguments);
    8.   data.shift();
    9.   console.log(this.name + \nHas clickado en ‘ + tag + \nOtros argumentos: ‘ + data.join(‘, ‘));
    10. }
    11. $(‘elemento’).observe(‘click’, handler.bindAsEventListener(obj, 1, 2, 3));

    Por partes, el objeto obj tiene una propiedad name y la función handler(evento) se encarga de manejar el evento una vez se ha disparado. Esta función extrae el nombre del elemento de la página que ha disparado el evento, los argumentos extra pasados a la función y los muestra todos por la consola de facebook. La clave de todo el ejemplo es la línea:

    1. $(‘elemento’).observe(‘click’, handler.bindAsEventListener(obj, 1, 2, 3));

    Esta línea asigna la función handler(evento) como manejadora del evento onclick del elemento y además cambia su contexto al del objeto obj y le pasa 3 números como argumento. Pero echando un segundo vistazo a la función vemos que en ningún momento le pasamos el argumento evento. Esa es precisamente la función especial de bindAsEventListener() pasar como primer argumento el objeto de la clase Event que representa al evento que se ha disparado.

    Usando bindAsEventListener() siempre recibiremos el objeto Event como primer argumento, sin necesidad de pasar ese evento de forma manual.

Espero que después de este par de ejemplo quede todo un poco más claro, como siempre se aceptan preguntas, dudas y sugerencias :) y para todo el código que necesitéis pegar podéis usar Pastie

HOWTO: Configurar pulseaudio en Ubuntu Hardy Heron

Septiembre 21, 2008

NOTA (18/10/2008 16:09): He actualizado el enlace del manual y he cambiado el título… por que por alguna razón que no alcanzo a comprender había puesto Intrepid en lugar de Hardy

Bueno, de la mano de los foros de ubuntu, os traigo este utilísimo howto que explica como configurar pulseaudio perfectamente para que podamos disfrutar de todas las aplicaciones que queramos a la vez reproduciendo audio.

HOWTO: PulseAudio Fixes & System-Wide Equalizer Support (Hardy Heron)

HOWTO: PulseAudio Fixes & System Wide Equalizer Support

El manual es bastante completo y muy fácil de seguir. Viene partido en varios pasos. No es necesario llevarlos todos a cabo por que algunos son necesarios para solucionar posibles problemas, pero no se tarda más de 5 o 6 minutos en tener todo el audio del sistema funcionando a la vez y perfectamente.

NOTA: Ya sé que el blog ha estado muy muerto últimamente, pero todavía sigo haciendo pruebas con el nuevo hosting y buscando un nuevo tema que sea interesante y fácil de personalizar. Espero poder postear con asiduidad, he aprendido muchísimas cosas en el nuevo trabajo y estoy loco por contaroslas :D

Colabora para que NetBeans soporte Symfony

Septiembre 10, 2008

Acabo de leer en el blog de Symfony en español que la versión 6.5 de netbeans incluirá soporte para PHP y que además se espera que soporte algún framework PHP. Los desarrolladores de netbenas han decidido someter a votación que 2 frameworks serán soportados en esta nueva versión.

En este post del blog en español de Symfony explican como dar nuestro voto a Symfony :)

De obras

Agosto 20, 2008

Otro Blog Geek está de obras. Me he mudado a un nuevo hosting y todavía estoy ajustándolo todo en los ratos libres que tengo.

Espero que esté listo en una semana o así.