Plugin jQuery para mostrar fechas de forma usable
Interesante plugin jQuery para mostrar fechas con un formato más adecuado y legible.
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
Interesante plugin jQuery para mostrar fechas con un formato más adecuado y legible.
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
Uno de los controles que he visto en alguna aplicación (sobre todo de tipo editor gráfico), es aquella en la que el valor numérico de una caja de texto se puede modificar mediante botones y mediante una barra de progreso.
![]()
La versión que he realizado modifica los input type=”text” que haya en la página que tengan el atributo rel el valor selector[min,max], siendo min y max los valores mÃnimos y máximos que permite el controlador.
Entre otras cosas, el controlador permite modificar el valor mediante la forma tradicional (usando la caja de texto), usando las flechas, pinchando en la barra de progreso o haciendo drag en la misma barra.
Interesante tutorial que nos enseña que problemas pueden encontrarse las personas con alguna discapacidad que le obligue a prescindir de Javascript (o usuarios con dispositivos móviles), y cómo solucionarlo.
Los mayores problemas con el que se encuentran las personas que no ejecutan javascript en sus navegadores son en la navegación (menús dinámicos), contenido oculto (accesible mediante Ajax), controles dinámicos (eventos de ratón, drag&drop, …) y confusión (la web está pensada para el uso de Javascript y no usarlo conlleva un contenido inicial deficiente).
Como resumen diría que hay que ofrecer los contenidos sin necesidad de javascript, éste sólo debe ser un apoyo, y que para comprobar si tu web es accesible lo mejor es probarlo inhabilitando el javascript en tu navegador.
Creating Accessible JavaScript
Vía / @maxkuri
En Dynamic Drive nos ofrecen una buena utilidad y un magnÃfico ejemplo de uso de DHTML accesible. Se trata de un sencillo sistema que permite previsualizar o ampliar imágenes desde un enlace poniendo “thumbnail” como valor del atributo rel del enlace. Además el contenido atributo title será mostrado junto a la imagen.
![]()
Lo mejor es que está hecho de forma no obstructiva, es decir, dado que enlace apunta a la imagen, si el usuario no tiene habilitado el javascript al pulsar en enlace le llevará a la misma. En caso contrario mostrará una capa con ésta.
VÃa / Ajaxian
Interesante tutorial que nos indica cómo usar los objetos en Javascript, ya sean los objetos predefinidos, el uso del operador new, objetos literales, su declaración, la encapsulación, la herencia, la propiedad prototype para añadir métodos y atributos a un objeto, poliformismo, … explicado con ejemplos y muy útil para aquellos que empiezan y para aquellos que quieran mejorar su código (que a todos nos viene bien).
Object-Oriented Javascript
VÃa / Digg
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:
const criteria = {
env: 'development',
};
Y estos datos de configuración:
{
debugLevel: {
$filter: 'env',
development: INFO,
production: ERROR,
},
}
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 environment
const 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:
const Confidence = require( 'confidence' );
const Config = require( './index' );
const criteria = {
env: process.env.NODE_ENV,
};
const manifest = {
server: {
port: Config.get( '/port' ),
},
};
const store = new Confidence.Store( manifest );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.
Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:
const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );
const options = {
relativeTo: __dirname,
};
const startServer = async function() {
try {
const manifest = Manifest.get( '/' );
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();
Puedes bajarte el código aquí
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.