Crear PNG directamente desde Javascript

ByLuis

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

Similar Posts

|

Novedades en Javascript 1.8

ByLuis

Mientras se sigue con el desarrollo de la versión 3 de Firefox, podemos ir viendo que novedades traerá la versión 1.8 de Javascript. Las novedades son muy interesantes, pero creo que necesitarán de un cambio de modo de pensar en Javascript, ya que es algo a lo que no estamos acostumbrados.

Notación Lambda

La notación Lambda nos permite declarar funciones que devuelvan datos sin necesidad de llaves ({..}), ni de devolver directamente el resultado con return.

Por ejemplo, la siguiente función:

function(x) { return x * x; }

pasaría a ser:

function(x) x * x

Generador de expresiones

Existente ya en Phyton, nos permite generar expresiones como arrays o matrices de forma rápida y elegante. Para una explicación con un poco de profundidad, el autor del artículo usa un solucionador de Sudokus para explicarnos paso a paso cómo funcionan. Quizás un ejemplo más sencillo sea el siguiente:

// Crea un array de 100 posiciones rellenas con cero
[ 0 for ( i in 100 ) ]
// Crea una matriz identidad de 10x10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )]

También se pueden utilizar para comprimir arrays, por ejemplo quedarnos solo con los valores pares:

[i for (i in lista) if (i % 2 == 0)]

Reducción de arrays

Permite reducir iterativamente un array a un solo valor usando una función llamada de retorno.

La nomenclatura sería de la siguiente forma:

miArray.reduce( fn [, val_inicial] );
// La función sería de la siguiente manera
miArray.reduce(function(ultimo_valor, valor_actual){
return ultimo_valor + valor_actual;
});

Si combinamos los dos puntos anteriores, podemos obtener la suma de los cien primeros números de la siguiente manera:

[x for ( x in 100 )].reduce(function(a,b) a+b);

JavaScript 1.8 Progress

Vía / dzone

MooMonth: calendario para MooTools

ByLuis

MooMonth es un calendario para MooTools que nos permite ver en nuestra aplicación los meses y las tareas o anotaciones de cada día.
moomonth.png
Altamente configurable, tiene efectos curiosos como las transacciones entre meses o la ampliación de un día del mes. Aún está en fase alpha, pero por ahora tiene muy buena pinta.
MooMonth

Datejs: librería de fechas para Javascript

ByLuis

La verdad es que trabajar con fechas en Javascript suele ser un poco pesado. Con Datejs podremos trabajar con fechas de una forma increíblemente fácil y potente.

No se trata únicamente de un parseador, sino que ofrece muchas más funcionalidades.

Algunos ejemplos que nos pueden hacer ver la potencia de esta librería son:

// ¿Qué fecha es el próximo jueves?
Date.today().next().thursday();
// Añadir 3 días a la fecha de hoy
Date.today().add(3).days();
// ¿Es hoy viernes?
Date.today().is().friday();
// Hace tres días
(3).days().ago();
// Dentro de 6 meses
var n = 6;
n.months().fromNow();
// Ponerlo a las 8:30 AM del día 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });
// Convertir un texto a una fecha
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // hoy + 5 días
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973′);
Date.parse(‘Thu, 1 July 2004 22:30:00′);

Datejs

Vía / Ajaxline

Consejos para tener un buen código Javascript

ByLuis

Consejos que nunca vienen mal para desarrollar un código Javascript decente:

  • Que sea limpio y esté bien documentado: esto no es exclusivo de Javascript, pero parece que en este lenguaje se olvida. También es recomendable tener dos versiones del script, uno de desarrollo y otro de producción (que estará comprimido).
  • Usa ficheros externos: no incluyas los scripts dentro de tu HTML, usa scripts externos. A parte de ser más eficiente en el gasto del ancho de banda es reutilizable y más legible.
  • Separa la capa de presentación de la capa lógica: no añadas eventos en las etiquetas HTML, create Javascripts no intrusivos que modifiquen los elementos y añadan los eventos.
  • Define el ámbito de las variables: aunque no sea necesario usar var para definir las variables, hay que hacerlo, así evitarás sorpresas de modificación de variables, sobre todo si usas recursividad.
  • No pienses que por defecto se soporta Javascript: no todo el mundo dispone de javascript, por ello no es conveniente llamar a funciones javascript dentro del href de los enlaces, y es conveniente tener acción por defecto en un enlace cuando se quiere modificar su funcionalidad por javascript:
<a href="#" onclick="javascript:accionClick()">enlace</a>
<a href="enlace.html" onclick="accionClick(); return false;">enlace</a>

5 JavaScript Best Practices

Javascript Lint: ayuda para un código limpio

ByLuis

Javascript Lint es una aplicación (también online) que nos permite comprobar que nuestro código no tenga los errores más comunes en Javascript, así como el uso de técnicas cuestionables.

Basada en el motor de Javascript de Firefox, nos muestra los siguientes errores:

  • Falta de punto y coma al final de la línea.
  • Llaves sin un if, for, while.
  • Código que nunca se ejecuta debido a un return, throw, continue o break.
  • Sentencias case dentro de un switch que no tienen break.
  • Números decimales que empiezan o acaban directamente con el punto.
  • Un número que empiza por cero que lo convierte en octal.
  • Sentencias que no hacen nada.
  • Expresiones regulares que no están precedidos por un paréntesis, asignacion, coma o dos puntos.
  • Sentencias separadas por comas en vez de por punto y comas.
  • Sentencias if, for, while, … sin llaves.
  • Detectar variables no usadas.

Javascript Lint

|

FUEL: framework para desarrollo de extensiones de Firefox

ByLuis

FUEL es un framework cuyo sentido es ayudar a realizar extensiones para Firefox de forma sencilla que accedan a las herramientas y a nivel del systema de aplicación. Para ello proveerá unas librerías estables y documentadas, obteniendo extensiones más estables y por consiguiente una aplicación más estable también.
Entre sus objetivos nos encontramos con la facilidad de acceder a las interfaces, componentes y servicios, disponer de paquetes para abrir ventanas, para tratar el nsIProcess, y para tratar ficheros, texto o stream enviado mediante XMLHttpRequest.
Es importante resaltar también que nos ayudará al acceso a datos (bookmarks, microsumarios y proveedores de búsquedas), al monitoreo de eventos y notificaciones, e interactuación con el UI de la aplicación.
Estoy deseando tener un poco de tiempo para mirarlo con detalle, ya que a veces al desarrollar una aplicación XUL nos encontramos con unas librerías un tanto enrevesadas.
FUEL
Vía / Ajaxline

4 Comments

  1. Eso es que no has visto los programas de dibujo con javascript y canvas que han salido últimamente.

    A parte, que 0% de ejecución en servidor = hosting que no te da la tabarra por que te estás pasando con los ciclos de CPU.

  2. Exacto, q, tú mismo lo has dicho: canvas. Y si quieres gráficas hay librerias buenísimas.

    Por eso mismo he dicho: “porque puede ser sustituida facilmente por otras alternativas”

    Saludos y gracias por el comentario 🙂

  3. A mí se me ocurre que puede servir para cambiar el icono del navegador de la web (favicon), y hacer un icono dinámico (para barra de progreso o %)

    //
    var icon=document.getElementById(“favicon”);
    (newIcon = icon.cloneNode(true)).setAttribute(“href”,”data:image/png;base64,”+p.getBase64());
    icon.parentNode.replaceChild(newIcon,icon);

Comments are closed.