Generar captura (screenshoot) de una URL con PhantomJS

PhantomJS es una aplicacion que tienen como objetivo facilitar la creación de pruebas, capturas de pantalla, automatización de scripts y monitoreo de red.

Son muchas cosas las que se pueden hacer, y de muchas maneras, por eso mismo en este momento quiero mostrar la generación de una captura de pantalla usando PhantomJS.

1. Primero debes instalar PhantomJS

La instalación es muy sencilla solo hay que descargar los compilados de la pagina, se encuentra disponible para Linux, Windows y Mac OS.
http://phantomjs.org/download.html

2. Voy a utilizar el documento de ejemplo de la pagina de PhantomJS, Que genera una imagen con el contenido de la pagina principal de github, para ello, crea un archivo con el nombre github.js con el siguiente contenido:

var page = require('webpage').create();
page.open('http://github.com/', function() {
page.render('github.png');
phantom.exit();
});

3.Ya solo queda ejecutar el PhantomJS con el archivo como parámetro:

phantomjs github.js

4. En el directorio donde ejecutaste el comando, ahora existe el archivo github.png con la captura de la página.

 

Minimizar el tiempo de carga de AngularJS

Si has usado AngularJS seguramente te has percatado del aumento de tiempo en que las páginas toman en cargar. Y se debe básicamente a los diferentes Resquests que se realizan al servidor para obtener cada uno de los scripts (css y JavaScript).
Zack Nelson ha construido una util guía para mejorar los tiempos de carga usando “Templates” y “RESTful resources
Puedes encontrar los detalles en la siguiente dirección.

https://medium.com/@_zaknelson/minimizing-initialization-time-in-angularjs-f8ae57e2cec3

 

Publicar llaves SSH (SSH Keys) en GitHub

Hoy como de tantos días me vi envuelto en un problema recurrente, y es el hecho de que donde es que se encuentran por defecto las llaves “Keys” en mi sistema remoto para agregarlas al repositorio de github, de modo que publicará el código sin problema, y despues de muchas busquedas (Con los terminos y recursos incorrectos, todo hay que decirlo) la gente de GitHub tiene un muy buen tutorial para hacerlo, en la siguiente página:

https://help.github.com/articles/generating-ssh-keys

Básicamente lo primero es encontrar nuestra llave pública


cd ~/.ssh
ls
# Lists the files in your .ssh directory

por defecto las llaves se guardan en la carpeta ./ssh en la carpeta del usuario, la que te interesa es la que tiene la extensión .pub que es la llave pública que puedes distribuir.

En caso de que tengas que generar una llave desde cero puedes seguir el proceso a continuación, tienes que seguir el proceso de “ssh-keygen” donde despues de -t se coloca el typo de llave a generar, que el caso de github (y en la mayoria de casos) es “rsa”, y despues de “-C” el email con el que se va a asociar, en el ejemplo “your_email@example.com”


ssh-keygen -t rsa -C "your_email@example.com"
# Creates a new ssh key, using the provided email as a label
# Generating public/private rsa key pair.
# Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
ssh-add id_rsa

Dentro del proceso se pregunta por el nombre del archivo en el que se guardará la llave.
Este mismo es el que se coloca como parametro, despues de “ssh-add” para agregar la llave generada al conjunto de llaves del sistema.

Ahora solo tienes que agregar la llave publica (de nuevo es la que tiene la extension .pub) a tu cuenta de github, dentro del tutorial utilizan la aplicación “clip” que lo que hace es guardar en el portapapeles el contenido del archivo, pero yo recomiendo abrir el archivo “.pub” con tu editor de texto preferido, copiar todo el contenido del archivo (todo el contenido incluyendo saltos de linea, usuarios texto, TODO).

Y lo pegas en el campo de texto Key, de las sección SSH Keys de la configuración (settings) de la cuenta, el título puede ser cualquier cosa, pero recomiendo algo que te indique el origen de la llave.

Y listo!

Arreglar problemas con innerHTML en IE

Algunas veces IE nos hace preguntarnos los motivos por los cuales hacemos frontend, en especial, cuando validando una aplicación nos dice unknown error, en mi caso particular estaba intentando modificar el texto de un div que se encontraba dentro de una tabla (era sharepoint 2007), y por motivos de la organización no se podia usar jQuery y su increíble metodo .html(), así que tocaba hacerlo en puro javascript, despues de mucho indagar, y multiples intentos de solución, encontré esta respuesta en stackoverflow http://stackoverflow.com/questions/8999998/javascript-innerhtml-is-not-working-for-ie en donde por medio de una solución muy elegante se arregla el error.

Es como sigue:


var newdiv = document.createElement("div");
newdiv.innerHTML = text;
var container = document.getElementById(id);
container.appendChild(newdiv);

Básicamente lo que se hace es que se crear un div al que se le asigna el texto que se desea incluir.


var newdiv = document.createElement("div");
newdiv.innerHTML = text;

Y luego se agrega el div creado al elemento al que se desea asignar el html.

[pytemplate] Nuevo proyecto en Github

Acabo de publicar un pequeño proyecto en el que venía trabajando.

Un intérprete de plantillas para la generación de carpetas y archivos, de modo que solo sea necesario definir las jerarquias y nombre necesarios que estructuran el proyecto, y luego con la ejecución del script todo se crea.

http://github.com/ismaproco/pytemplate

Este es el readme de github en Español

Sencillo generador de plantillas de archivos y carpetas in Python 2.7

Solo tienes que llamar el script junto con el nombre de la plantilla como parámetro o solo guarda la plantilla como template.tf y ejecuta el script.

pytemplate.py mytemplate.tf

o

pytemplate.py mytemplate.tf

La plantilla

Solo debes crear la plantilla de la siguiente manera:

  • Corchetes {} defines una lista de Archivos.
  • Corchetes cuadrados [] defines una lista de Carpetas.

Por ejemplo si el archivo tiene una gramática como la siguiente.

{index.html,contact.html, aboutus.html }

Creará únicamente esos archivos.

Pero si en cambio la que sigue:

[main, imgs, libs, data]

Creará únicamente las carpetas

Pero puedes combinar ambos tipos de listas para crear plantilla mas complejas.

[imgs]
[libs[jquery{jquery.min.js,jquery.min.ui.js},mootols{mootols.js},data]]
[docs]
[views]

Puedes verificar el archivo template.tf incluido en el repositorio para ver una plantilla usada en proyectos de backbone.js.

Entendiendo Node.js

Node.js es una tecnologia que a venido aumentando en protagonismo, tal vez sea que usa javascript como lenguaje madre, o que usa el motor de interpretado de google, o como yo creo por el simple hecho de que se atrevio a innovar en algo que no muchos lo estaban haciendo, y es en la creacion de un backend con funcionamiento especifico.

Ahora más allá de la retórica, coloco este video que se detallan muchas de las funcionalidades y ambientes en lo que se recomienda el uso de node.js aparte de que se relata el funcionamiento del mismo.