Interesante librería que nos permite crear ficheros ZIP desde Javascript, con unas simples líneas de código podemos crear zips con ficheros de texto, imágenes, crear directorios…
var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;
El único problema que hay es a la hora de generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
El spam ha condicionado muchas prácticas que originariamente eran tan sencillas y poderosas como enlazar tu mail en la web.
Un truqui para evitarlo que en su día lo descubrimos en 604th.net:
function nospam(name,domain){
window.location = 'mailto:' + name + '@' + domain;
}
Cópialo tal cual sin cambiar nada y súbelo como emailnospam.js. Recomendamos subirlo a una carpeta en la que guardes los javascripts como por ejemplo la carpeta js. Si no te apetece crearla, súbelo a la raíz de tu ftp.
Luego añade lo siguiente entre la línea <head> y </head> de los documentos de tu web:
Ya solo queda que escribas tu mail enlazado en la parte de la web que quieras sustituyendo la palabra ejemplo y dominio.com por lo que corresponda a tu cuenta de email:
Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.
Notación Lambda
La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.
Por ejemplo, la siguiente función:
function(x) { return x * x; }
pasarÃa a ser:
function(x) x * x
Generador de expresiones
Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artÃculo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:
// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )]
Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.
La nomenclatura serÃa de la siguiente forma:
miArray.reduce( fn [, val_inicial] );
// La función serÃa de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});
Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:
Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.
Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.
Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto “1-” cuando lleve el 5% habrá devuelto “1-2-3-4-5-“. Parseando esto podemos saber por el último número cuanto lleva ejecutado.
Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice …
Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:
document.addEventListener("DOMContentLoaded", function () {
// Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");
// play the video right away
pop.play()
// add a footnote at 2 seconds
.footnote({
start: 2,
end: 6,
text: "This footnote is the stepping stone of progress!",
target: "footnotediv"
});
}, false);
Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.
Pues vaya entonces, la verdad es que es una chufla porque la mayorÃa de los usuarios sólo pensarán que no se ha descargado bien el archivo y que la página está mal, sinceramente una pena.
Pues vaya entonces, la verdad es que es una chufla porque la mayorÃa de los usuarios sólo pensarán que no se ha descargado bien el archivo y que la página está mal, sinceramente una pena.