Aunque Microsoft dijo que se iba a centrar en corregir los errores en CSS y no en Javascript, no está mal decir que cosas se ha corregido y cuales estarían bien para futuras versiones.
Los errores que se han corregido son: los memory leaks cuando se hacían referencias circulares entre elementos, un fallo que cerraba la aplicación cuando se usaba la función normalize() y soporte para XMLHttpRequest de forma nativa en vez de mediante ActiveX.
Los errores que no estaría mal que corrigieran en futuras versiones son: getElementById debería ignorar el atributo name, debería cambiar el window.location cuando se navega entre referencias en el mismo documento mediante el historial, cuando se mueven checkbox mediante métodos del DOM recuperan el estado original y no conservan el que tenían, setAttribute no funciona con el atributo style o con eventos, varios atributos necesitan ser escritos usando las máyusculas en las iniciales de las plabras (camelCase), radio buttons clonados no crean su propio grupo.
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:
Como ya dije, esta aplicación estará basada en Mongodb, y usaremos mongoose como ODM.
El primer paso es instalar mongoose:
npm i mongoose
Una vez instalado crearemos un controlador que nos permita usar la BD en toda la aplicación Hapi.js. Para ello haremos uso de los decorate del servidor. Los decorations permite extender objectos ofrecidos por Hapi.js, en nuestro caso server y request. Usando un plugin nos conectaremos a mongodb usando mongoose y añadiremos ese objecto con los decorate.
Creamos el fichero /plugins/db.js con el siguiente código:
/**
* DB controller
*
* It uses Mongoose and "stores" it in the server and the request using `decorate`
*/const mongoose = require( 'mongoose' );
exports.plugin = {
name: 'db',
register: asyncfunction( server, options ) {
mongoose.connect( options.url, { useNewUrlParser: true } );
const db = mongoose.connection;
// eslint-disable-next-line
db.on( 'error', console.error.bind( console, 'connection error:' ) );
db.once( 'open', function() {
server.decorate( 'server', 'db', mongoose );
server.decorate( 'request', 'db', mongoose );
// eslint-disable-next-lineconsole.log( 'DB connected' );
} );
},
};
Para configurar la conectividad a mongodb tendremos que añadir los datos a la /config/index.js
Ya tenemos casi todo configurado, ahora vamos a empezar con un ejemplo creando un esquema de moongose que nos permite acceder a colecciones de mongodb.
Lo más común es tener una colección de usuarios, que tendrá los siguientes campos:
userName: de tipo String,
firstName: de tipo String,
lastName: de tipo String,
email: de tipo String,
role: que referencia a otro elemento de otra colección,
isEnabled: de tipo Boolean,
password: de tipo String,
resetPassword: un objeto representado por:
hash: de tipo String,
active: de tipo Boolean,
También crearemos un método estático que devuelva todos los elementos de la colección users para realizar pruebas:
/**
* User model based on Mongoose
*/const mongoose = require( 'mongoose' );
const Schema = mongoose.Schema;
// Mongoose schemaconst userSchema = new mongoose.Schema( {
userName: String,
firstName: String,
lastName: String,
email: String,
role: Schema.Types.ObjectId,
isEnabled: Boolean,
password: String,
resetPassword: {
hash: String,
active: Boolean,
},
} );
/**
* User static model findAll
*
* @returns {array}
*/
userSchema.static( 'findAll', asyncfunction() {
const result = awaitnewPromise( ( resolve, reject ) => {
this.model( 'User' ).find( {} ).exec( ( error, data ) => {
if ( error ) {
reject( error );
}
resolve( data );
} );
} );
return result;
} );
const User = mongoose.model( 'User', userSchema );
module.exports = User;
Ya está todo, ahora solo modificamos el handler de la ruta home.js para mostrar los valores de findAll:
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.
LibrerÃa que nos permite usar scrolls personalizados en nuestras páginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra página, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizás se puedan personalizar con este script.
Por lo poco que he visto del código (que no está fácil de seguir porque está ofuscado), veo que fija el tamaño de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versión 9 lo han solucionado). Algo que yo no solÃa hacer y que he visto como lo hace aquÃ, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control. FleXcroll, Flexible and Accessible Custom Scroll Bars
VÃa / aNieto2K
Plupload es un script creado por los autores de TinyMCE. Permite subir ficheros usandoHTML5 Gears, Silverlight, Flash, Yahoo! BrowserPlus o formularios normales, además permite subida progresiva, redimensionado de imágenes y chunked uploads.
Está dividido en dos partes: Core API y una cola de subida jQuery, lo cual permite que creamos nuestra propia implementación. Además en Firefox 3.5+ se puede usar drag&drop y el redimensionado de images también es exclusivo de FF.