HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.
Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.
El script que instancia el Worker sería así:
// Crea el Web Worker
var worker = new Worker("worker.js");
// Envía un mensaje al worker
worker.postMessage(0);
// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
// evt.data es el valor devuelto por el Worker
alert(evt.data);
}
// Trata los errores
worker.onerror = function (evt) {
alert(evt.data);
}
Y el worker.js sería el siguiente:
// Ejemplo de Worker
onmessage = function (evt) {
// evt.data es el valor enviado desde el javascript
for (var i=evt.data, il=1000001; i
Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:
onconnect = function(evt) {
postMessage('Hola, acabas de conectarte al Worker');
}
Ahora solo falta crear el controlador para las rutas de usuarios, dos en este caso:
GET /user/[user] para recuperar un usuario
PUT /user para crear un nuevo usuario
Lógicamente aún no hay nada de autenticación, por lo que cualquiera puede crear un usuario realizando una llamada PUT a la URL indicando userName, email y password.
Para comprobar la validez de los datos introducidos, usaremos joi. Usando las opciones de la ruta, indicaremos las reglas que deberá cumplir cada parámetro introducido. Así, para recuperar un usuario, se comprobará que user sea string, alfanumérico y que tenga una longitud de 3 a 20 caracteres:
Por último mostrar el código para crear un nuevo usuario. Primero se comprueba si existe un usuario con ese nickname o email. Si es así, se devuelve error usando boom, si no, se genera la contraseña encriptada (aquí no me he molestado mucho en ello, ya lo haré más adelante), y se crea el usuario usando el método create de moongose:
JX Library es una librería para Mootools que nos facilita la realización de interfaces gráficas en nuestras páginas web.
Nos ofrece una variedad de elementos gráficos: layouts, paneles, árboles, grids, botones, toolbars, selectores de color, combos, … Jx
Vía / WebAppers
MSX es un ordenador de hace la tira de años que cuando eramos pequeños nos parecía increíble y que ahora nos parece paleolítico. jsMSX es un emulador realizado en Javascript y Canvas que permite ejecutar juegos para ese sistema.
En sí la aplicación no tiene mucha utilidad, pero es interesante desde el punto de vista de lo que se está consiguiendo mediante Javascript y Canvas. jsMSX
Via / @lardissone
Algo que hay que tener en cuenta muchas veces cuando trabajamos con formularios es la longitud del texto que introducimos en los textarea, ya que en muchos casos esa información se almacena en la BD y puede que el campo en dónde se guarda tenga un lÃmite de tamaño.
La barra de progreso funciona de la siguiente manera, el fondo es una imagen con el progreso, inicialmente estará desplazada a la izquierda el tamaño de la barra. Por ejemplo, si la barra tiene un ancho de 300px, la posición izquierda del fondo será -300px. Cuando se pulse una tecla, se recalculará la posición izquierda, según la longitud del texto. Si la longitud supera el máximo, el fondo no será la imagen, sino de color rojo para avisar del error.
var max=250;
var ancho=300;
function progreso_tecla(obj) {
var progreso = document.getElementById("progreso");
if (obj.value.length < max) {
progreso.style.backgroundColor = "#FFFFFF";
progreso.style.backgroundImage = "url(textarea.png)";
progreso.style.color = "#000000";
var pos = ancho-parseInt((ancho*parseInt(obj.value.length))/250);
progreso.style.backgroundPosition = "-"+pos+"px 0px";
} else {
progreso.style.backgroundColor = "#CC0000";
progreso.style.backgroundImage = "url()";
progreso.style.color = "#FFFFFF";
}
progreso.innerHTML = "("+obj.value.length+" / "+max+")";
}
Increíbles ejemplos de cómo manipular vídeos en directo aplicando filtros gracias a HTML5 y canvas. Los ejemplos nos muestra cómo se reproduce un vídeo y se muestra el mismo vídeo con efecto de escala de grises o detección de contornos. Realmente increíble.
Interesante script que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.
Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:
