Marc Pampols

Node.js y Heroku

Sat, 26 May 2012 17:16:11 +0200

Con la intención de renovarme un poco, decidí aprender lo básico de node.js y abrirme una cuenta en Heroku para probar y subir alguna pequeña aplicación en “el cloud”.

Tras buscar un poco de información sobre node.js, me topé con un taller en video de Nacho Soto que muestra paso a paso como crear un chat multiusuario y al final subirlo a Heroku. ¡Perfecto! aunque el tio va algo acelerado (o quizás sea la edad…) me pareció un punto de partida genial, y lo recomiendo.

Heroku

El primer paso es darte de alta en Heroku, puedes hacerlo con una cuenta gratuita si le vas a dar poco uso o simplemente quieras trastear un poco, como es mi caso. Luego hay que instalar el Heroku Toolbelt, que incluye el cliente necesario, y en la página de Getting Started with Node.js on Heroku/Cedar está todo lo necesario para empezar.

La gracia de Heroku es que puedes subir tu aplicación con sencillos comandos de Git, y a partir de ahí ya corre en su infraestructura de servidores, todo sin tener que preocuparte de instalar o configurar nada relacionado con sistemas operativos, librerias y demás. Con un simple “git push heroku master” se hace el deploy. Evidentemente hay que tener en cuenta algunas cosas como la configuración del puerto a utilizar, pero está todo muy bien indicado en las guías de https://devcenter.heroku.com

El siguiente es un ejemplo del output al lanzar el comando git push:

$ git push heroku master
Counting objects: 17, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (9/9), 684 bytes, done.
Total 9 (delta 4), reused 0 (delta 0)

-----> Heroku receiving push
-----> Node.js app detected
-----> Resolving engine versions
       Using Node.js version: 0.4.7
       Using npm version: 1.0.106
-----> Fetching Node.js binaries
-----> Vendoring node into slug
-----> Installing dependencies with npm
...

Node.js

Node.js es un entorno de programación y una librería para crear servidores web con entrada/salida asíncrona y dirigida por eventos. Funciona con el motor JavaScript V8 creado por Google.

¿Cuando podemos usar Node.js y para qué?

Node está construido con la idea de crear aplicaciones que necesiten una conexión persistente del navegador del cliente hacia el servidor, uno de los ejemplos es un chat, donde tenemos que recibir las actualizaciones de los mensajes lo más rápido posible, y Node permite hacerlo además de forma bastante óptima.

Se utiliza también una técnica llamada “Long-polling”, una técnica que permite enviar datos del servidor al cliente, pero si el servidor no tiene datos que enviarle, en lugar de enviar una respuesta vacía (que es lo que haría con el “polling”), el servidor mantiene la petición del cliente hasta que tiene información nueva para enviarle. En la programación AJAX es conocido como Programación Comet

Node es una buena opción para crear aplicaciones colaborativas, chats, y en definitiva, servicios en los que el cliente debe ver mucha información nueva sin tener que refrescar la página.

Node es óptimo porque cada petición necesita solo unos pocos ciclos de CPU, ya que el bucle de eventos está bloqueado durante la ejecución de una funcion.

Chat en Node.js

Tras subir el chat a Heroku, se puede utilizar desde la siguiente URL:
http://high-cloud-1518.herokuapp.com/

Y en el siguiente repositorio de Github he dejado el código fuente del mismo:
https://github.com/mpampols/nodejs-chat

Tutorial sobre caching

Tue, 22 May 2012 00:02:44 +0200

Tutorial sobre caching:

Un documento que resume muy bien los distintos tipos de cache en desarrollo web. Qué son, cómo funcionan, y cómo se implementan. Aunque bastante básico, ayuda a tener una buena base de conocimiento.

RESS, Responsive Design + Server Side Components

Sat, 19 May 2012 11:34:14 +0200

RESS, Responsive Design + Server Side Components:

Tutorial que enseña los conceptos básicos de RESS (Responsive Design + Server Side Components), y cómo puedes construir una página responsive que funcione bien en resoluciones pequeñas con la ayuda de tecnologías server-side.

Instalar Haskell GHC en Ubuntu

Sun, 22 Apr 2012 20:58:42 +0200

Decidí probar Haskell, siempre me habia picado la curiosidad por conocer un poco el lenguaje, y quedé sorprendido por lo bonito que parece ser.

Lo instalé en una máquina virtual con Ubuntu 11.10 con los siguientes pasos:

Primero, las dependencias:

$ sudo apt-get install libgmp3-dev freeglut3 freeglut3-dev

libgmp3-dev: Multiprecision arithmetic library developers tools
freeglut3: OpenGL Utility Toolkit
freeglut3-dev: OpenGL Utility Toolkit development files

Luego, bajamos la última versión, que ahora mismo es la 7.4.1:

$ wget http://www.haskell.org/ghc/dist/7.4.1/ghc-7.4.1-i386-unknown-linux.tar.bz2

Descomprimir y instalar, como cualquier otro paquete:

$ tar -xvvf ghc-7.4.1-i386-unknown-linux.tar.bz2

$ cd ghc-7.4.1

$ ./configure

Pero llegado este punto, da el siguiente error:

libgmp.so.3: cannot open shared object file: No such file or directory

… que se arregla creando un symlink:

sudo ln -s /usr/lib/libgmp.so /usr/lib/libgmp.so.3

$ sudo make install

Y una vez instalado, lanzamos el GHCi, el entorno interactivo del compilador GHC que hemos instalado, y probamos con un simple “Hello world” ejecutando el ghci.

rockhound@ubuntu:~/ghc-7.4.1$ ghci
GHCi, version 7.4.1: http://www.haskell.org/ghc/  :? for help
Loading package ghc-prim ... linking ... done.
Loading package integer-gmp ... linking ... done.
Loading package base ... linking ... done.
Prelude> "Hello world!"
"Hello world!"

Es un lenguaje curioso, funciona básicamente con llamadas a funciones. El compilador principal es el que he instalado, GHC, que está formado por ghc, el encargado de compilar, y ghi, el intérprete ghci.

Para terminar, un enlace interesante si quieres aprender un poco de Haskell: http://www.haskell.org/haskellwiki/Learn_Haskell_in_10_minutes

¿Tienes un secreto de estado y temes por tu vida?

Sun, 15 Apr 2012 22:32:22 +0200

Este servicio web puede ser de tu interés.

Dead Man’s Switch:
http://www.deadmansswitch.net/

Pero vamos por partes. Primero: ¿Qué significa esa expresión?

La expresión “Dead Man’s Switch” proviene de un sistema que se utiliza para detectar si un humano es incapaz de controlar una máquina en algún momento. Por ejemplo, los conductores de tren pueden tener un pedal que si en algún momento deja de ser pulsado, se activarán los mecanismos de freno.

Hay multitud de variantes y casos de uso, y uno de ellos es el que han implementado en el servicio web deadmansswitch.net, que se traduce de la siguiente manera.

Podemos escribir y preprogramar una serie de mensajes, cada uno con sus correspondientes destinatarios. Dichos mensajes se encuentran cifrados en el servidor para que nadie pueda leerlos. Si en algún momento nos sucede algo, el dispositivo se activará y enviará los mensajes que hemos preparado. Se activará tras no detectar actividad por parte nuestra, de esta forma, nuestros secretos serán liberados. Se trata de una especie de seguro de vida.

Tras guardar nuestros secretos, el servicio nos enviará correos electrónicos para comprobar que seguimos vivos pidiendo que cliquemos en un simple enlace. Si pasado un tiempo no damos señales de vida, la aplicación de Dead Man’s Switch enviará nuestros mensajes a los destinatarios programados. Así de simple.

No es un sistema perfecto, ya que pueden robarnos el acceso a nuestro correo electrónico y evitar que nuestros secretos sean revelados, pero es una buena primera implementación en el mundo digital.

Los Secretos de Silicon Valley (Inglés) Una charla de Steve...

Sun, 15 Apr 2012 18:13:00 +0200

Los Secretos de Silicon Valley (Inglés)

Una charla de Steve Blank en la que explica cómo empezó realmente Silicon Valley.

The Business Model Canvas

Wed, 11 Apr 2012 22:00:40 +0200

The Business Model Canvas:

Una herramienta en PDF y con licencia Creative Commons, que te permite describir y diseñar un modelo de negocio.

El arte de destrozar objetos en 3D El video es una demostración...

Tue, 10 Apr 2012 17:18:30 +0200

El arte de destrozar objetos en 3D

El video es una demostración técnica de RayFire, un plugin para 3dsMax (una de las más conocidas aplicaciones de modelado y animación 3D de Autodesk) para, simplemente, destrozar todo tipo de objetos 3D.

¿Cuál es la aplicación número 1 en descargas gratuitas de...

Sat, 31 Mar 2012 23:53:22 +0200

¿Cuál es la aplicación número 1 en descargas gratuitas de la AppWorld de BlackBerry?

La biblia.

Subscripción de usuarios a objetos Plone con envío de notificaciones.

Sat, 31 Mar 2012 17:14:06 +0200

He añadido un Gist público en Github con 3 funciones que pueden ser útiles si estás creando un sistema de suscripción a objetos de Plone, con envío de notificaciones por correo y opción de darse de baja a través de un enlace con un hash personalizado.

La idea es crear un tipo de contenido de Plone con un campo para guardar los suscriptores. Primero, una función add_subscriber() para añadirlos, que puede ser llamada desde cualquier acción en la web. Luego está la función sendEmail() que envía la notificación de, por ejemplo, actualización, a todos los suscriptores del objeto.

El correo enviado contiene un enlace con el objeto al que el usuario se ha suscrito, y un string secreto que nos permite comprobar que sólo el receptor del correo podrá darse de baja.

La función do_unsubscribe nos sirve para comprobar dicho string cuando el usuario hace click en el enlace, y darle de baja eliminando su cuenta de correo de dicho objeto Plone.

Add / Remove Plone object subscribers and send a notification email on state change:
https://gist.github.com/2265553

Importar datos CSV en Plone

Sat, 31 Mar 2012 00:52:59 +0200

He subido un pequeño script en Python en el Github Gist, que pertenece a una vista de un producto de Plone, y que puede utilizarse como base para importar datos de un fichero CSV en tipos de contenido.

Muy sencillo para tener una idea de cómo hacerlo, y fácilmente adaptable a la necesidad de cada uno.

Import CSV data to Plone content type: https://gist.github.com/2256740

# -*- coding: utf-8 -*-
import datetime
import urllib

from Acquisition import aq_inner

from zope import interface
from zope import schema

from zope.app.pagetemplate import viewpagetemplatefile
from zope.app.component.hooks import getSite

from Products.CMFCore.utils import getToolByName
from Products.Five import BrowserView
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile

from Products.statusmessages.interfaces import IStatusMessage

# Control BadRequest errors (duplicate id's found)
try: from zExceptions import BadRequest
except ImportError: BadRequest = 'BadRequest'

# Control errors caused by WebDAV open objects in Plone durint import
from Products.CMFDefault.exceptions import ResourceLockedError

import StringIO
import csv

class Import(BrowserView):

    # Template where we show the import results
    template = viewpagetemplatefile.ViewPageTemplateFile('import.pt')

    # Import function
    def render(self):
        plone_utils = getToolByName(self.context, 'plone_utils')
        workflowTool = getToolByName(self.context, "portal_workflow")

        # Read the CSV file
        csv_contents = str(self.context)
        f = StringIO.StringIO(csv_contents)
        file = f.read()
        csv_reader = csv.reader(file.splitlines(), delimiter=';')

        # Counting successful and failed register imports
        stats_ok = 0
        stats_failed = 0

        # Set the name of the content type to create
        content_type = "Name of the Content Type"

        headers = 0
        for field in csv_reader:
            if (headers == 1):
               
                # Set the csv values to new python variables and do the proper processing for each register
                obj_id          = plone_utils.normalizeString(unicode(field[0]))
                obj_title       = str(field[1])
                obj_descripcion = str(field[2])
                
                # Try to create the object in Plone
                try:
                    subfolder_item[1].invokeFactory(content_type, obj_id)
                    obj_newObject = getattr(self, obj_id)
                    obj_newObject.setTitle(obj_title)
                    obj_newObject.setDescription(obj_description)
                    obj_newObject.reindexObject()
                    stats_ok += 1

                    except BadRequest:
                        print "Can't create object."
                        stats_failed += 1

                    except ResourceLockedError:
                        print "Can't create object, locked entry by WebDAV."
                        stats_failed += 1

            if (headers == 0):
                headers = 1

        return str("Import process results: CREATED: " + str(stats_ok) + " FAILED: " + str(stats_failed))

    def __call__(self):
        return self.render()

Tuenti Programming Challenge 2

Sat, 31 Mar 2012 00:46:47 +0200

Tuenti Programming Challenge 2:

Competición anual de programación de Tuenti. En mi opinión mucho más divertida que la ‘Facebook HackerCup’. Tienes 20 problemas por resolver y una semana de tiempo, y los mejores 15 podrán visitar las oficinas de Tuenti en Madrid.

Adapta los gráficos de tu web para las pantallas con Retina Display

Sun, 25 Mar 2012 22:39:19 +0200

En la salida del iPhone 4, Apple presentó su nueva tecnología Retina Display, en la que simplemente aumenta la densidad de píxeles en las pantallas y así se logra una calidad de imagen que en comparación a las anteriores, es bastante notable.

Hasta ahora, estabamos acostumbrados a diseñar con 72 dpi, pero la pantalla Retina puede mostrar 326 dpi en el caso del iPhone 4 / 4S, y 264 en el nuevo iPad.

Para aprovechar la nueva pantalla, podemos diseñar nuestras aplicaciones web con imágenes a dichas densidades, pero conservando también las de 72 dpi.

1. Detectar el pixel ratio

El primer paso es lograr detectar el pixel ratio del dispositivo visitante, un dato que podemos leer utilizando las Media Queries de CSS3.

Entonces, podemos crear un nuevo fichero CSS para utilizar exclusivamente en este caso, por ejemplo: retina-display.css, y para poder cargarlo, podemos utilizar la siguiente Media Query:

<link rel='stylesheet' href='retina-display.css' 
      media='only screen and (-moz-min-device-pixel-ratio: 2), 
             only screen and (-o-min-device-pixel-ratio: 2/1), 
             only screen and (-webkit-min-device-pixel-ratio: 2), 
             only screen and (min-device-pixel-ratio: 2)' />

2. Adaptar las imágenes

En las naming conventions del SDK de Apple, se sugiere que los ficheros para la Retina Display, tengan el sufijo “@2x”. Si nuestra imagen original se llama “logo-site.png”, la versión Retina se puede llamar “logo-site@2x.png”

En cuestión de tamaño, si la imagen tiene una resolución de 50x50 pixeles, la versión Retina deberá tener 100x100.

3. Añadir las nuevas imágenes en nuestra hoja de estilos.

Si antes hemos creado el fichero retina-display.css, ahora podemos indicar en el fichero las nuevas imágenes adaptadas. Siguiendo el ejemplo anterior:

#home #header .logo 
{
    background-image:url(assets/img/images/logo-site@2x.png);
    background-size: 50px 50px;
}

Necesitamos añadir la propiedad background-size para volver a adaptar el tamaño de las imágenes.

Primeros dias con la BlackBerry Playbook que nos regaló RIM....

Sat, 10 Mar 2012 22:24:00 +0100

Primeros dias con la BlackBerry Playbook que nos regaló RIM. Decepcionado con la batería, tras cargarla al 100%, pasadas menos de 48 horas, ya ha bajado un 10%… ¡Sin usarla!

El 'Lorem Ipsum' de las imágenes

Sat, 10 Mar 2012 13:30:01 +0100

El 'Lorem Ipsum' de las imágenes:

Ideal para crear rápidamente imágenes de tamaños personalizados para poner a prueba tus proyectos.

10 conceptos de desarrollo web que los diseñadores deben saber.

Fri, 09 Mar 2012 23:48:28 +0100

10 conceptos de desarrollo web que los diseñadores deben saber.:

Un artículo con un listado de 10 conceptos que deben tener claros todos aquellos que estén involucrados en el desarrollo de un diseño que debe terminar en una web.

Uno de los principales problemas con los que me encuentro en el desarrollo web cuando tengo que trabajar con empresas externas, es que muchas desconocen la diferencia entre “Diseño gráfico” y “Diseño web”, y cometen el error de encargar diseños web a diseñadores gráficos que no tienen ningún conocimiento de HTML, CSS o JavaScript. Horrible.

Protocolo para entrar en una "sala blanca" de Intel

Thu, 09 Feb 2012 22:32:14 +0100

Protocolo para entrar en una "sala blanca" de Intel:

Guardar los objetos personales.
Desechar chicles, caramelos, etc.
Quitarse el maquillaje con agua y jabón estériles.
Tomar un sorbo de agua para eliminar las partículas de la boca.
…..

Examinar el equipo en el espejo.
Ponerse los guantes de látex.
Entrar en la sala blanca.

Validador de titulos duplicados para Plone 4.x

Thu, 02 Feb 2012 21:04:35 +0100

Validador de titulos duplicados para Plone 4.x:

Un validador para Plone 4.x que permite avisar al usuario si ha introducido un elemento con un titulo duplicado. El funcionamiento por defecto del gestor es crear igualmente un elemento modificando el valor del id añadiendo un número, y así podemos tener elementos que comparten el campo Title.

Con este validador, que se puede añadir a cualquier tipo de contenido, podemos avisar al usuario y evitar que entre contenidos duplicados.

Notificaciones Push desde la NAS de Synology

Tue, 24 Jan 2012 21:54:27 +0100

Hace tiempo que compré una NAS de Synology, y hoy, con la nueva versión 4.0 beta del firmware, activé las notificaciones Push.

Primero hay que instalar DS finder para “sincronizar” vuestro terminal con vuestra(s) NAS, y luego activar el envío de notificaciones. Lo que es realmente genial es que aprovecha todas las notificaciones que por defecto incluye el firmware de Synology (aviso por problemas de hardware, reboot remoto, backups finalizados, etc…), así que puedes estar informado al instante de todo lo que sucede con tu NAS.

La versión 4.0 beta puede descargarse desde la página oficial de Synology, y el proceso de actualización apenas tarda unos 15 minutos y mantiene toda la configuración actual.

Gracias a @jordipg por el aviso!

Primera ronda de calificación de la Facebook Hacker Cup 2012

Tue, 24 Jan 2012 21:19:09 +0100

Ayer terminó la primera ronda de calificación de la competición “Hacker Cup” de Facebook.

Por suerte, todos los amigos que participamos pudimos pasar la ronda :)

De los tres problemas planteados solucionamos uno o dos, el tercero era de una dificultad bastante más elevada y no llegamos a tiempo.

He publicado en github:gist el código fuente de mis soluciones escritas en Python.

Alphabet Soup
https://gist.github.com/1670780
Billboards
https://gist.github.com/1670910