Interesante script que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.
Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:
grayscale( document.getElementsByTagName('div') );“Grayscaling” in non-IE browser
Vía / Script & Style
Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.
La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:
$('document').ready(function() {
$(':text').change(function() {
$(this).attr('value', $('document').add('<div></div>').html($(this).attr('value')).text());
});
});¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.
Bueno, para mis primeras pruebas con jQuery no está mal del todo.
En muchas aplicaciones web, la utilización de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando asà que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …
Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:
Modernizr es una librería que permite detectar las nuevas características de HTML5, CSS3, Canvas, … que admite el navegador. Tan sólo habrá que acceder a propiedades para saber si admite o no una característica en particular:
if (Modernizr.geolocation) {
// Admite geolocalización
}
if (Modernizr.csstransitions) {
// Transacciones CSS
}
if (Modernizr.rgba) {
// RGBA
}Las características que detecta son:
La gente de Automattic (WordPress) ha sacado su proyecto After the Deadline como open source. Se trata de un corrector ortográfico, de gramática y estilos que podemos incluir en nuestras aplicaciones web. Además ofrece una API para jQuery por si queremos interactuar con él.
El proyecto tiene muy buena pinta y funciona bastante bien, salvo que por lo que he leído está únicamente para inglés. Claro, que también me entra una duda: ¿realmente es necesario un corrector ortográfico en una aplicación web?
Últimamente hablo mucho de jQuery, y no es para menos, ya que este framework de Javascript es muy bueno y la gente realiza grandes plugins que nos ayudan en nuestros desarrollos. En este caso se trata de varios consejos que nos serán muy útiles a la hora de desarrollar:
Improve your jQuery – 25 excellent tips
Vía / Intenta
Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.
Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.
Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:
const Config = require( '../config' );
const websiteName = Config.get( '/website/name' );
const register = function( server, serverOptions ) { // eslint-disable-line
server.route( {
method: 'GET',
path: '/',
options: {
tags: [ 'api', 'home' ],
description: 'Server home',
notes: 'Server home',
auth: false,
},
handler: function( request, h ) { // eslint-disable-line
return {
message: `Welcome to ${ websiteName }`,
};
},
} );
};
module.exports = {
name: 'api-home',
dependencies: [],
register,
};Ahora solo falta añadir el plugin en el manifest.js
const manifest = {
server: {
port: Config.get( '/server/port' ),
},
register: {
plugins: [
{
plugin: './api/home',
},
],
},
};Puedes bajarte el código aquí