Buen script que nos permite mover nuestras capas mediante drag&drop y cambiarlas de tamaño.
Funciona con posicionamiento relativo y absoluto de los elementos en la página. Además permite personalizar los estilos mediante CSS. No es obtrusivo. Es posible indicar tamaños máximos y mínimos para las cajas y es compatible con la mayoría de los navegadores.
DragResize
Vía / Ajaxline
qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:
Vía / crishnakh
El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:
npm initRellenamos todos los datos que nos van pidiendo para configurar el proyecto.
Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.
npm i @hapi/hapinpm i @hapi/glue¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.
Ahora creamos el fichero index.js e insertamos el siguiente código:
const Glue = require( '@hapi/glue' );
const manifest = {
server: {
port: 3001,
},
};
const options = {
relativeTo: __dirname,
};
const startServer = async function() {
try {
const server = await Glue.compose( manifest, options );
await server.start();
console.log( 'hapi days!' ); // eslint-disable-line
} catch ( err ) {
console.error( err ); // eslint-disable-line
process.exit( 1 );
}
};
startServer();Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.
Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.
¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:
npm i --save-dev nodemonY ejecutaremos lo siguiente para arrancar el servidor:
npm run startPuedes obtener el código en GitHub hapi-vue-demo 0.1.0
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; iLos 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');
}Using HTML5 Web Workers to have background computational power
Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.
Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado.
TJPzoom
Vía / WebAppers
YSlow es un plugin para Firefox que añade una nueva pestaña a Firebug, la cual realiza informes de las páginas que visitamos y nos indica por qué es lenta según algunas reglas de rendimiento.
Muestra una evaluación de cada posible regla de rendimiento, mostrando estadÃsticas de ellas. Además indica que componentes están instalados y hace una comparativa entre la página visitada con caché o sin caché.
Una extensión muy a tener en cuenta.
YSlow
VÃa / OpenSourceCommunity.org
