Buen plugin para jQuery que permite crear gráficas de datos accesibles mediante canvas. El script es bastante fácil de usar, se crea una tabla (sí, si, con <table>, que es para lo que se deben usar), y el script dibuja los datos en un canvas.
Ofrece la posibilidad de crear gráficas de pie, barras y líneas, para lo cual, en el class de la etiqueta canvas hay que especificar el origen y el tipo de gráfica (por ejemplo, fgCharting_src-dataTable_type-pie). Creating accessible charts using canvas and jQuery
Vía / couch
NitobiBug es un script similar a Firebug que nos permite realizar debugs en nuestros scripts. Permite mostrar una ventana emergente con el contenido de objetos (diferenciando entre tipos), elementos DOM o simplemente mensajes.
Usarlo es tan sencillo como esto:
var myObject = {a:234523, something:'else', mylist:[32423,4556,'sdfs']}; nitobi.Debug.log(myObject);
Y para instalarlo solo hay que añadir el archivo js.
Una alternativa a Firebug, sobre todo para IE, pero me sigo quedando con Firebug.
IT Mill Toolkit es un framework open source para crear interfaces de usuario, ofreciendo widgets y herramientas para desarrollar aplicaciones web de alta calidad. Podrás crear RIAs sin tener que preocuparte por imcompatibilidades de navegadores o el DOM de Javascript, tan solo usando herramientas Java.
Además ofrece varios widgets con soporte para AJAX, seguridad para evitar ataques mediante Javascript, está basado en Google Web Toolkit, faclidad para cambiar los estilos y muchas cosas más. IT Mill Toolkit
VÃa / WebAppers
Un gran script que nos permite insertar sliders en nuestras webs, que sean accesibles y no obstrusivos. A parte, permiten ser manejados por las flechas del cursor, por las teclas de inicio y fin, o el ratón, incluido el scroll.
El script le asigna automáticamente a cada slider el rol slider requerido por ARIA y los estados valuemax, valuemin y valuenow.
Un ejemplo de uso para un slider horizontal con una llamada de función serÃa la siguiente:
WireIt es una librerÃa basada en Yahoo Pipes que nos permite crear cables y conectar con ellos elementos. SÃ, algo difÃcil de entender, pero si decimos que es perfecto para crear diagramas o si sÃmplemente vemos la imagen, nos haremos una idea de cuál es su funcionalidad.
Está montada sobre Yahoo! User Interface y nos permite mover objetos, conectarlos entre sÃ, desconectarlos y mucho más. WireIt
Gracias ElÃas por el aviso
Curioso script en jQuery que permite transformar una caja de texto en un seleccionador de tiempo. Pinchando sobre ella nos saldrán las horas que podemos elegir, y al movernos sobre las horas, aparecerán los minutos y así con el resto de los datos.
Su utilización es muy fácil, tan solo habrá que ejecutar lo siguiente:
$(function(){
$('#test-1').timepickr();
});
A parte se puede configurar indicando que horas, minutos, segundos y etiquetas (am/pm) se pueden elegir, los formatos o incluso que datos mostrar o no.
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: