Update node in Mac OS X with npm

You can update node easily using npm following the next steps

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Happy coding!

Actualizar node en Mac OS X con npm

Puedes actualizar node fácilmente usando npm siguiendo los pasos siguientes

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Happy coding!

HTML5: Selectores CSS 2

En la anterior entrada vimos una introducción a los selectores CSS y en ella vimos algunos selectores que se introducen con la especificación de HTML5. En esta entrada vamos a ver otro tipo de selectores, los denominados pseudo-clases.

En este artículo seguiremos usando el mismo ejemplo que usamos en la entrada anterior y que tiene el siguiente aspecto:

<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p id="p1">Esto es un parráfo y dentro hay un enlace a <a id="link1" class="a1" href="http://www.bing.com">Bing</a> y otro a <a id="link2" class="a1" href="http://www.google.es">Google</a></p>
<p id="p2">Tambien podemos tener un listado de idiomas</p>
<ul id="list1">
    <li>Inglés</li>
    <li>Español</li>
    <li>Frances</li>
    <li>Alemán</li>
    <li>Italiano</li>
</ul>

:root
Personalmente desconocía este selector. Este selector selecciona el elemento raíz de un documento. Es un selector muy poco útil ya que siempre devuelve el elemento html y se incluye como novedad dentro de la especificación de HTML5.

:root { color: #FF0000 }

Selectores de hijos (child selectors)
Este selector nos ayuda a seleccionar un elemento individual que está contenido dentro de otro elemento. Podemos usar cuatro tipos de selectores

• :fist-child: Selecciona el primer elemento de la lista de elementos.
• :last-child: Selecciona el último elemento de la lista de elementos.
• :only-child: Selecciona el elemento si es el único en la lista de elementos.
• :only-of-type: Selecciona el elemento si es el único elemento en a lista y es de un tipo determinado.

Los tres últimos elementos (:last-child, :only-child y :only-of-type) son novedades de la especificación de CSS3.

ul :first-child { color: #aaddcc }
ul :last-child { color: #336699 }

Con este CSS estamos cambiando el estilo del primer y último descendiente de nuestro ul.

Selectores por posición (nth-child selectors)
Estos selectores son parecidos a los explicados anteriormente, pero se aplican en base al índice de su posición. Tenemos estos cuatro selectores

• :nth-child(n): Selecciona el elemento que está en a posición n de la lista de elementos.
• :nth-last-child(n): Selecciona el elemento que está en la posición n desde el último elemento de la lista de elementos.
• nth-of-type(n): Selecciona el elemento que está en la posición n de la lista elemento, en base al tipo definido por su padre.
• nth-last-of-type(n): Igual que el anterior, pero el índice se cuenta desde el último elemento.

Todo estos selectores son nuevos y solo se encuentran disponibles en CSS3. En el siguiente ejemplo seleccionamos dentro de los hijos de ul el 2 elemento comenzando por el primer elemento y por el último.

ul :nth-child(2) { color: #aaddcc }
ul :nth-last-child(2) { color: #336699 }

Selectores pseudo-clases
Los selectores de pseudo-clases no permiten seleccionar un elementos en base a su estado. Tenemos las siguiente pseudo-clases a nuestra disposición

• :enabled - El selectores está habilitado.
• :disabled - El selector está deshabilitado.
• :checked - El selector está chequeado.
• :default - Selecciona valores por defecto.
• :valid e :invalid - Selecciona elementos de tipo input en base a si son validos o no (después de su valicación)
• :in-range y :out-of-range - Selecciona elementos dentro o fuera de un rango.
• :required y :optional - Selecciona elementos cuya presencia es obligatoria u opcional.

Todos estos selectores son introducidos en CSS3.

Selectores pseudo-clases dinámicos

• :link y :visited - El selectores :link selecciona enlaces y el selector :visited selecciona aquellos enlaces que el usuario ya ha visitado.
• :hover: Este selector se usa cuando el ratón se mueve por encima de un elemento.
• :active: Este selector se usa cuando el usuario activa un elemento. Esto ocurre en la mayoría de los casos cuando el usuario hace click sobre el elemento.

Y con esto termina esta introducción a los selectores que tenemos disponibles en los CSS.

Happy coding!

HTML5: Selectores CSS 1

Pese a la variedad de selectores que tenemos disponibles en los CSS en HTML5 se han añadido algunos más. Aprovecharé para repasar los más importantes y ver cuales son las principales novedades en esta nueva versión.






Para ver los selectores más comunes voy a usar esta página web de prueba

<h1>Titulo</h1>
<h2>Subtitulo</h2>
<p id="p1">Esto es un parráfo y dentro hay un enlace a <a id="link1" class="a1" href="http://www.bing.com">Bing</a> y otro a <a id="link2" class="a1" href="http://www.google.es">Google</a></p>
<p id="p2">Tambien podemos tener un listado de idiomas</p>
<ul id="list1">
    <li>Inglés</li>
    <li>Español</li>
    <li>Frances</li>
    <li>Alemán</li>
    <li>Italiano</li>
</ul>

El aspecto que tiene este ejemplo en Google Chrome (tengamos en cuenta que cada navegador aplica unos estilos por defecto, por lo que este ejemplo se puede ver de diferente manera según el navegador que estemos usando).

Selector universal
Se aplica sobre todo los elementos del documento, y donde se utiliza el * como selector. Por ejemplo

* { color: #008080; }

Cambiaría el color de todos los elementos de nuestra página. El resultado es el siguiente

Un ejemplo más práctico relacionado con este selector está relacionado con los estilos que traen por defecto los navegadores. Cada navegador define un margin y un padding por defecto para cada elemento de nuestra página. Esto puede dar algún que otro quebradero de cabeza a la hora de maquetar nuestra página, así que buena costumbre es resetear los estilos por defecto. Una versión simplificada de esto podría ser lo siguiente (haciendo referencia al margin y el padding).

* { margin: 0; padding: 0 }

Con esto nuestra página tendría el siguiente aspecto

Selector por tipo
Mediante este selector podemos cambiar el estilo de un elemento (en base a su tipo) de nuestra página sin afectar a los demás. Por ejemplo, podemos cambiar el color color de nuestros enlaces o de los textos de nuestros párrafos. En nuestro caso vamos cambiar el color de todos los idiomas.

li { color: #00bfff; }

Y nuestra página tendría el siguiente aspecto

Selector por clase o identificador
Puede que no queramos aplicar el mismo estilo a todos los elementos del mismo tipo. Para eso podemos seleccionar el o los elementos a los que aplicar el estilo en base a la clase (especificada mediante el atributo class) o en base a su identificador (especificado mediante el atributo id).

.a1 { color: red; }
#p2 { color: greenyellow; }

En este caso estamos cambiado el color de los elementos con la clase a1 y el idenficador p2. Podríamos afinar más combinando el selector de tipo y el de clase (o el de id). La forma de hacerlo sería la siguiente

a.a1 { color: red; } 
p#p2 { color: greenyellow; }

Obteniendo el mismo resultado en ambos ejemplos

Selector por atributo
Podemos también seleccionar los elementos en base a si tiene un atributo o incluso si ese atributo tiene un valor determinado. Por ejemplo podemos seleccionar aquellos enlaces que tengan el atributo href definir (todos en nuestro caso)

[href] { color: #8b0000; }

En los condicionales que podemos usar con este selector encontramos la primera novedad en CSS3. Creo que el siguiente listado queda todo más claro.

• [attr]: Selecciona un elemento si contiene el atributo attr independientemente el valor que tenga.
• [attr="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor es val.
• [attr^="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor comienza por val.
• [attr$="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor termina por val.
• [attr*="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor contiene el valor val.
• [attr~="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor contiene varios valores pero uno es val.
• [attr|="val"]: Selecciona un elemento si contiene el atributo attr y cuyo valor contiene una lista de valores separados por el carácter - y cuyo primer valor es val.

Los elementos en cursiva son las novedades introducidas en HTML5. Viendo un ejemplo de uno de ellos, podríamos seleccionar aquellos elementos que tuvieran una clase que empezara por a

[class^="a"] { color: #228b22; }

Combinando selectores
Si queremos aplicar el mismo estilo en varios selectores podemos hacerlo de la siguiente manera

a, li { color: #228b22; }

De esta forma estamos aplicando el mismo estilo a todos los enlaces y elementos de la lista.

Descendientes
También podemos seleccionar elementos en base a su padre. Podemos seleccionar descendientes de primer nivel o de cualquier nivel inferior. La forma hacerlo es la siguiente de seleccionar cualquier descendiente es la siguiente

p a { color: #00ced1; }

Y la forma de seleccionar solo los descendiente directos se hace de la siguiente forma

p > a { color: #00ced1; }

En ambos ejemplos estamos seleccionando los enlaces que sean descendientes de un párrafo.

Sibling
Otro selector que tenemos a nuestro alcance es el selector de sibling (selector de hermanos). Esto nos permite seleccionar uno o varios elementos en base a otro elemento que se encuentra a su mismo nivel.
Por ejemplo en este caso

h2 + p { color: #2f4f4f; }

Estamos seleccionado los párrafos que se encuentren inmediatamente después de un h2.

En este otro caso estamos seleccionado todos los párrafos que se encuentren después de un h2, inmediatamente después o no (este selector también ha sido introducido en la especificación de HTML5)

h2 ~ p { color: #2f4f4f; }

Y con esto termina esta introducción a los selectores que tenemos disponibles en los CSS. Para la próxima entrada dejaremos los selectores denominados pseudo clases que también son bastante útiles a la hora de hacer nuestros estilos.

Happy coding!

HTML5: Introducción a los Web Workers 2

En la entrada anterior vimos una introducción a los web workers. En ella vimos como crearlos y como comunicarnos desde la página web con el web worker y viceversa. Pese a que con lo visto puede ser más que suficiente en muchísimos casos se nos quedaron algunas cosas en el aire y que veremos a continuación.

Gestión de errores
Puede que para algunos procesos simples no nos tengamos que preocupar de la gestión de errores (aunque creo que nunca está de más), pero en otras ocasiones puede que se imprescindible. Para comunicar un error desde nuestro worker usaremos el evento error, así que lo que haremos será suscribirnos al evento error del worker desde nuestra página web.

worker.addEventListener('error', _error, false);

function _error(e) {
    var output = document.querySelector('#output');
    output.innerHTML = 'ERROR: Line ' + e.lineno + ' in ' + e.filename + ': ' + e.message;
}

Y en el worker usaremos el siguiente código para simular un error (lanzaremos un error en caso que el número pasado sea cero)

// Procesamos el mensaje recibido
function _message(e) {
    // Simulamos un error
    if (e.data == 0)
        throw new Error(0, "Por favor, introduce un número mayor o igual a uno");

    var primes = _getPrimes(e.data);
    self.postMessage(primes);
}

Detener el web worker
En el caso que queramos detener un worker, lo podemos hacer de dos maneras. La primera de ellas desde el código del propio worker. En ese caso debemos usar el método close. Para probar esté método pondremos el siguiente código en el método _message de nuestro worker (finalizamos la ejecución del worker en caso que intentemos calcular los números primos de un número negativo).

// Simulamos la detención del worker
if (e.data < 0) 
    self.close();    

En caso que queramos acabar con el worker desde la página web debemos usar el método terminate. En nuestro ejemplo usaremos un botón para detener la ejecución del worker

<input type="button" id="btnTerminate" value="Terminar" onclick="_terminate()"/>

Y este es el código del método onclick

function _terminate() {
    worker.terminate();
}

Y con esto acabamos la introducción básica a los web workers. Espero que les sea de utilidad.

Happy coding!