jQuery.sheet es un script de jQuery que permite añadir hojas de cálculo en tu web. Permite bastantes funcionalidades, tal y como cualquier hoja de cálculo: Excel, OpenOffice o Google Docs:
Vía / WebAppers
Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.
El script hace uso de Evento de Progreso de HTML5 para poder mostrar:
Por ahora solo es compatible con Firefox, Chrome y Safari.
En el post lo explican con gran detalle.
A la hora de darle una funcionalidad más enfocada a aplicaciones de escritorio (por ejemplo con un editor WYSIWYG), suele ser necesario usar combinaciones de teclas CONTROL+tecla para ejecutar ciertas acciones.
Capturar la combinacion CTRL+tecla en javascript es muy sencillo:
var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
// acción para CTRL+S y evitar que ejecute la acción propia del navegador
return false;
}
}/La explicación es sencilla, cuando se pulsa CTRL+tecla se producen dos eventos de teclado, por lo que no es posible saber si se ha ejecutado en una sola llamada. Por ello primero comprobamos si se pulsa la tecla CTRL y se pone un flag a verdadero y luego dependiendo de la tecla que queramos, si se detecta que se pulsa y está el flag activo, se realiza la acción. Hay que devolver false para que el navegador no ejecute la acción que tiene por defecto. Cuando se deja de pulsar la tecla CTRL se pone el flag a false.
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
vegUI es un gestor de ventanas realizado en Javascript, a parte de una colección de widgets, un sistema de interfaz de usuario, un framework para aplicaciones dinámicas y una librerÃa para operaciones con Ajax, vamos, de todo.
Admite los siguientes navegadores: Mozilla, Internet Explorer 6 y 7 y Opera. Entre las funcionalidades que he encontrado admite minimizar, maximizar, recuperar y cerrar ventanas, moverlas por el escritorio que se puede crear, control de z-index para las ventanas, transparencias.
La verdad es que me ha impresionado del todo, entre otras cosas porque me he peleado alguna vez con lo de crear ventanas mediante Javascript y siempre hay algo que me vuelve loco.
vegUI
VÃa / dzone
Cal Henderson, desarrollador jefe de Flickr, nos hace una serie de recomendaciones para agilizar nuestra web. Iré explicándolas e intentando aportar mi propio punto de vista sobre ellas, de todas formas, es algo muy recomendable para leer.
Webkit está implementando en la última versión la carga de scripts de forma asíncrona, para ello hace uso de los atributos async y defer. Esta carga de scripts se realiza sin detener el renderizado del HTML y añade el evento onLoad para ejecutar un método cuando acabe de cargarse:
La diferencia entre async y defer es que async se ejecuta a la primera oportunidad después de que finalice la carga y antes de que se ejecute el evento load del objeto window, por lo que con bastante posibilidad el script se ejecute asíncronamente y no en el orden en el que se muestra en al página. Los scripts defer se ejecutarán en el orden en el que se indica en la página, pero empezará despues del parseo completo pero antes de que ocurra el evento DOMContentLoaded del objeto document.
Vía / CSS-Tricks
Comments are closed.
Cada vez me sorprende más lo que se hace con Javascript (y JQuery)
¡Y lo que nos queda por ver! 🙂
Francamente cada dia salen tantas cosas que uno no puede imaginar yo no voy a dejar pasar este script y ya estoy pensando donde colocarlo