Aquellos que necesiten que en su aplicación web los usuarios introduzcan contraseñas seguras, podrán añadir este plugin jQuery que comprobará si las contraseñas tienen ciertas carácterísticas que las hacen seguras:
Uso de mayúsculas y minúsculas
Uso de números
Uso de caracteres especiales
Longitud de la contraseña
U opcionalmente similar a un username
El plugin mostrará un mensaje indicando la calidad de la contraseña y un color acorde a ésta.
Dos interesantes y currados scripts que te permiten manipular imágenes. Uno de ellos te devuelve la información EXIF de la imágen: formato, versión, ancho, alto, bits por pixel, alpha, mimeType, tamaño en bytes e información EXIF (solo para JPEG).
La otra librería Javascript te permite realizar efectos en las imágenes, usando canvas o lo propio de IE (no todos los efectos los permite IE): flip horizontal, flip vertical, invertir, desaturacización, blur, sharpen, edges, emboss, laplace, ruido, brillo, sepia e histograma.
Librerías muy interesantes para proyectos que permitan subir o manipular imágenes (tipo fotolog). Javascript Image Effects e ImageInfo
Vía / @rafabayona
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:
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 environmentconst 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:
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:
Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.
Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:
Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.
Processing arrays can take quite a few bit of time, this is something that can directly impacts the loading speed of your page and depend of the computer and the browser your users use. When you think that a typical users can load your website with a netbook , or an iphone for that matter, speeding up search in large arrays can be a good way to optimize your code …
En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.