Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.
Simple pdf.js page viewer
/ --
Vía / @badass_js
JSDoc es una aplicación realizada en Perl que nos genera la documentación de nuestros scripts Javascript de forma automática. Basado en el conocido javadoc, obtiene los comentarios de documentación (/** … */) para obtener la información sobre las funciones.
AsÃ, por ejemplo, si tenemos la siguiente función:
/**
* Figura es una clase abstracta. Define
* lo que otras subclases heredarán de una
* figura geométrica genérica
* @constructor
*/
function Figura(color){
this.color = color;
}obtendremos lo siguiente:
Constructor Summary Shape () Construct a new Shape object.
VÃa / Blogging Dashin
Ú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
The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Despite these shortcomings they hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development …
Un efecto llamativo que se suele hacer con Flash es realizar una transición entre dos imágenes cuando se posiciona sobre ella.
El efecto es sencillo, disponemos de una cabecera (H1) en el que hay un elemento con posicionamiento absoluto y que contiene la imagen final, y un enlace (el que se suele usar para ir al home) que tiene la imagen original mediante estilos.
El proceso es el siguiente: cuando se posiciona el ratón sobre el enlace se crea efecto fadeout y cuando se sale se crea el efecto fadein. Ambos efectos se hacen con tiempo de retardo para dar continuidad.
Todo el código en el post original.
Creating a fading header
Vía / CSS Globe
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í
Interesante librería que nos permite crear imágenes PNG directamente desde Javascript, para lo cual codifica la imagen usando el formato PNG y devuelve la cadena en base64. Algo parecido a la creación de documentos PDF.
var p = new PNGlib(200, 200, 256); // construcor takes height, weight and color-depth
var background = p.color(0, 0, 0, 0); // set the background transparent
for (var i = 0, num = 200 / 10; i <= num; i+=.01) {
var x = i * 10;
var y = Math.sin(i) * Math.sin(i) * 50 + 50;
// use a color triad of Microsofts million dolar color
p.buffer[p.index(Math.floor(x), Math.floor(y - 10))] = p.color(0x00, 0x44, 0xcc);
p.buffer[p.index(Math.floor(x), Math.floor(y))] = p.color(0xcc, 0x00, 0x44);
p.buffer[p.index(Math.floor(x), Math.floor(y + 10))] = p.color(0x00, 0xcc, 0x44);
}
for (var i = 0; i < 50; i++) {
for (var j = 0; j < 50; j++) {
p.buffer[p.index(i + 90, j + 135)] = p.color(0xcc, 0x00, 0x44);
p.buffer[p.index(i + 80, j + 120)] = p.color(0x00, 0x44, 0xcc);
p.buffer[p.index(i + 100, j + 130)] = p.color(0x00, 0xcc, 0x44);
}
}
document.write('+')
');Sinceramente, no se me ocurre ninguna utilidad práctica a esta librería, porque puede ser sustituida facilmente por otras alternativas, pero lo que es indudable es que se trata de una gran librería.
Generate client-side PNG files using JavaScript
Vía / DZone
Comments are closed.
En opera el blog se ve espantoso…
Aunque en navegadores de equipos de sobremesa también funcionaria bien, nada mejor que tener una pagina autónoma que no dependa de muchas otras aplicaciones por parte del usuario para mostrar su contenido!