aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Si estás buscando una herramienta para ofuscar tu código Javascript, Horrible.js es tu herramienta. Activando el modo 100% convierte ese código en algo imposible de descifrar a simple vista, como si el mismo capitán Uruk-hai hubiera escrito esas líneas, si no te lo crees… pruebalo tu mismo.

Vamos un ejemplo:

alert("Hola mundo");

Pasado por Horrible.js (usando Horror Factor 1):

$=String.fromCharCode(40,34,72,109,41,59);(![]+[])[+[]][([![]]+{})[+!+[]+[+[]]]+([]+[]+{})[+!+[]]+([]+[]+[][[]])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+(!![]+[])[!+[]+!+[]]+([![]]+{})[+!+[]+[+[]]]+(!![]+[])[+[]]+([]+[]+{})[+!+[]]+(!![]+[])[+!+[]]][([![]]+{})[+!+[]+[+[]]]+([]+[]+{})[+!+[]]+([]+[]+[][[]])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+(!![]+[])[!+[]+!+[]]+([![]]+{})[+!+[]+[+[]]]+(!![]+[])[+[]]+([]+[]+{})[+!+[]]+(!![]+[])[+!+[]]]((![]+[])[+!+[]]+(![]+[])[!+[]+!+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[])[+[]]+$[0]+$[1]+$[2]+([]+[]+{})[+!+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(+{}+[]+[]+[]+[]+{})[+!+[]+[+[]]]+$[3]+(!![]+[])[!+[]+!+[]]+([]+[]+[][[]])[+!+[]]+([]+[]+[][[]])[!+[]+!+[]]+([]+[]+{})[+!+[]]+$[1]+$[4]+$[5])();

Copia y pega en Firebug para verlo funcionando.

No soy muy partidario de este tipo de prácticas, pero es que esta ofuscación se merecía un post 😀

David Walsh publica un artículo sobre CustomEvent(), un constructor DOM para gestionar más comodamente los eventos personalizados. Esta funcionalidad, añadida en el borrador DOM Level 3 ya está disponible en la mayoría de navegador (excepto IE ¬¬) y es interesante conocer.

// Definimos el nuevo Evento
document.body.addEventListener("userLogin", function(e) {
	// Obtenemos como parámetro el Evento (e)
	console.info("Event is: ", e);
	
	// Además, disponemos de información extra.
	console.info("Custom data is: ", e.detail);
});

// Definimos el nuevo Evento con la información "extra"
var myEvent = new CustomEvent("userLogin", {
  detail: {
    username: "davidwalsh"
  }
});

// Ejecutamos el evento
document.body.dispatchEvent(myEvent);

Más información:

• CustomEvent MDC
• Especificación DOM Level 3
• Especificación DOM Level 4

Ayer vimos Harvey, un plugin jQuery que nos permitía controlar cuando se ejecutaban en nuestros CSS’s los cambios sobre las Media Queries dependiendo de los cambios sobre el navegador que accede a nuestras páginas web.

Ahora os traigo onMediaQuery, una implementación en javascript para que no dependas de jQuery para poder disfrutar de esta funcionalidad.

En solo 1kb de Javascript dispones de la capacidad de ejecutar eventos al accionarse una query previamente definida en nuestros CSS’s.
Veamos un ejemplo de su uso:

CSS

<style>
	body:after {
		content: 'mobile';
		display: none;
	}
	@media screen and (min-width: 35em) {
		body:after {
			content: 'skinny'
		}
	}

	@media screen and (min-width: 56em) {
		body:after {
			content: 'wide-screen'
		}
	}

</style>

En nuestro CSS deberemos indicar que cada una de las queries va a tener un nombre único que usaremos desde nuestro javascript para controlarlos por separado.

JS

<script type="text/javascript" src="js/onmediaquery.min.js"></script>
<script>
var queries = [
    {
        context: 'mobile',
        callback: function() {
            console.log('Mobile callback.');
            // Lógica que se ejecutará cuando se detecte un móvil
        }
    },
    {
        context: 'skinny',
        callback: function() {
            console.log('skinny callback! ');
            //Lógica específica para tablets
        }
    },
    {
        context: 'wide-screen',
        callback: function() {
            console.log('wide-screen callback .');
            // Pantallas panorámicas
        }
    }
];
// Go!
MQ.init(queries);


// Añadimos una query
var my_query = MQ.addQuery({
    context: 'skinny', 
    callback: function() { 
        console.log( 'second skinny callback!' )
    }
});

// Borrar queries
MQ.removeQuery( my_query );
</script>

Y ya en Javascript, informamos la funcionalidad correspondiente para cada una de las media queries que disponemos.

PhantomJS es una implementación del motor de javascript de WebKit, desarrollado por Aria Hidayat, que podemos utilizar en nuestro servidor para trabajar sobre páginas web.

Gracias a las virtudes de WebKit, que ya conocemos,PhantomJS nos permite cargar páginas desde nuestro servidor y tratarlas como si de un arbol DOM se tratara. Aunque a primera vista se le ven utilidades de testing, ya que nos permite realizar pruebas unitarias de una forma similar a las implementadas por Selenium, tambien es igual de apto para hacer scraping de páginas web, sacar capturas de pantalla o monitorizar redes.

Ejemplo

console.log('Cargando la página');
var page = new WebPage();
var url = "https://www.anieto2k.com/";
page.open(url, function (status) {
	// Creamos el screenshot
	page.render("anieto2k.png");
	
    // Página cargada
    phantom.exit();
});

Muy, pero que muy interesante y más que puede llegar a ser…

Condicionar el CSS de tu aplicación dependiendo del dispositivo o del tamaño de la pantalla del mismo, es mucho más fácil desde que existen las CSS’s media queries. Estas condiciones del CSS nos permiten especificar condiciones necesarias para ejecutar cierto CSS directamente en nuestro código.

Harvey nos intenta hacer más fácil aún la tarea de gestionar estas condiciones y permitirnos trabajar con ellas permitiéndonos añadir funcionalidades cuando estas cambian en función de las redimensiones o cambios de posición de nuestros dispositivos.

Harvey.attach('screen and (min-width:600px) and (max-width:900px)', {
  setup: setup_function, // se llama cuando inicialmente se cumple la condición.
  on: on_function, // Se llama cuando la condición se activa.
  off: off_function // Se ejecuta cuando se desactiva.
}); 

Añadime una capa más de control para condicionar al milímetro el estilo de nuestras páginas.
[Descargar]

Opera presenta Opera Mobile Emulator, una aplicación que descargas en tu PC para emular navegadores móviles y poder así depurar más cómodamente nuestras aplicaciones web.

(Ver Imagen)

Entre las opciones interesante que nos ofrece hay que destacar la conexión con Opera Dragonfly para depurar nuestras aplicaciones web.

(Ver Imagen)

Simplemente, una genial herramienta para hacernos el trabajo más fácil! 😀

Una de las nueva capacidades de la programación web es la capacidad de hacer que nuestras aplicaciones web puedan trabajar en modo offline, pero esto, nos obliga a controlar en todo momento si disponemos de conexión para volcar los cambios producidos, actualizar ciertos datos,…

navigator.onLine

El objeto navigator se modifica y añade esta nueva variable con el estado en formato boolean para conocer el estado de la conexión del usuario.

if(navigator.onLine){
alert('Online');
} else {
alert('Offline')
}

Así, podemos condicionar ciertas tareas que tendrán que realizarse exclusivamente en el navegador del usuario y otras que se encargarán de trabajar directamente con el servidor de aplicaciones.

Compatibilidad

Actualmente está disponible en la mayoría de navegadores modernos, al parecer, incluso IE7 dispone de esta capacidad.