Contenido

Horrible.js, ofusca tu código javascript a modo Uruk-hai

30 may

+ 4

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 :D

CoverScroll, disfruta de CoverFlow con este plugin para jQuery

30 may

+ 0

CoverScroll es un plugin jQuery que nos permite emular el sistema Cover Flow de Apple para elementos de nuestras páginas. [Descargar][Demo]

CustomEvent(), gestión DOM para eventos personalizados

30 may

+ 0

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:

onMediaQuery, ejecuta javascript al cambiar las media query

29 may

+ 2

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, WebKit en tu servidor

29 may

+ 1

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 = "http://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

Harvey, domina las CSS media queries con javascript

28 may

+ 2

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]

jQuery i18n, traduce tu página desde javascript

28 may

+ 0

jQuery i18n(), es una implementación de la idiomatización i18n de javascript portada a jQuery para facilitarnos la tarea de incluir dichas traducciones en nuestros elementos DOM. Dispone de una serie de funciones que nos ayudarán a disponer de etiquetas dinámicas que podrán ser parametrizadas desde nuestros scripts. [Descargar]

Detecta si estás online con HTML5

26 may

+ 2

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.

wysihtml5, interesante editor HTML5 dependiente

23 may

+ 0

Ya conocemos perfectamente los editor WYSIWYG que nos permiten escribir código HTML más cómodamente y sobretodo podemos verlo en tiempo real, lo que produjo en su momento que tuvieran una gran acojida para diferentes aplicaciones.

En la era HTML5, WYSIHTML5 nos permite hacer exactamente lo mismo, pero en lenguaje HTML5, no es que nos devuelva HTML5 sinó que gracias a elementos HTML5 hacemos que este script permita ofrecer funcionalidades más fácilmente.

Veamos un ejemplo:

Cargamos el JS y las reglas de configuración:


<script src="/path-to-wysihtml5/parser_rules/advanced.js"></script>
<script src="/path-to-wysihtml5/dist/wysihtml5_0.3.0.min.js"></script>

Ver reglas disponibles por defecto o un ejemplo del advanced.js.

Creamos un contenedor

El contenedor deberá ser un textarea si queremos que el contenido sea usado para guardarlo, procesarlo o lo que se crea conveniente.


<form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

Creamos una toolbar con las opciones

Aquí es donde está lo interesante, ya que la toolbar no se autogenera gracias al Javascript sinó que es el javascript que en función de los elementos que se encuentra añade unas funcionalidades u otras.


<div id="wysihtml5-toolbar" style="display: none;">
  <a data-wysihtml5-command="bold">bold</a>
  <a data-wysihtml5-command="italic">italic</a>
  
  <!-- Some wysihtml5 commands require extra parameters -->
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a>
  <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a>
  
  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
  <a data-wysihtml5-command="createLink">insert link</a>
  <div data-wysihtml5-dialog="createLink" style="display: none;">
    <label>
      Link:
      <input data-wysihtml5-dialog-field="href" value="http://" class="text">
    </label>
    <a data-wysihtml5-dialog-action="save">OK</a> <a data-wysihtml5-dialog-action="cancel">Cancel</a>
  </div>
</div>

Indicamos que elemento será el contenedor, que elemento hará de toolbar y que reglas se han de usar para mapear funcionalides contra elementos.


<script>
var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
  toolbar:      "wysihtml5-toolbar", // id of toolbar element
  parserRules:  wysihtml5ParserRules // defined in parser rules set 
});
</script>

Compatibilidad

Como era de esperar

  • Firefox 3.5+
  • Chrome
  • IE 8+
  • Safari 4+
  • Safari on iOS 5+
  • Opera 11+

Me gusta, sobretodo por la forma en la que está programado, haciendo que el Javascript sea HTML dependiente y no viceversa.

JavaScriptSQL, motor de base de datos comentamente en Javascript

21 may

+ 0

JSSQL es un motor de base de datos desarrollado enteramente en Javascript. Esta herramienta permite interpretar y ejecutar secuencias SQL en bases de datos offline que serán convertidas mediante una clase desarrollada en PHP para usarse con bases de datos relacionales (PostfreSQL, MySQL,…).

Una herramienta muy útil para trabajar de modo offline o suavizar el impacto de peticiones a los servidores de base de datos.
Entre las diferentes características de JSSQL estas son las más interesantes:

  • Permite consulta de datos online sin intervención con servidores web o de base de datos.
  • Flexible uso de la sintaxis SQL
  • Código javascript
  • Capacidad de definir ínidices para acelerar consultas.
  • Permite búsquedas te texto dentro de documentos indexados.
  • Herramienta (JSBD_Conversor) para crear bases de datos en Javascript usando basees de datos PostgreSQL y MySQL.
  • Mecanismos de depuración y ayudas al desarrollo.
  • Instalación sencilla y compatible con los principales navegadores.

Ejemplo

// Cargamos el fichero JS


// Cargamos el motor JSSQL
 var myJSSQL= new JSSQL();
 // Abrimos la base de datos
 if (!myJSSQL.Open('neptuno')) {
    // Mostramos los errores que se puedan producir.
    alert(myJSSQL.GetError());
 }
 
 // Consulta SQL
 var sql="select NombreCompania as comp, NombreContacto as cont, CargoContacto as cargo from clientes order by 3, 2 desc";
 
 // Ejecutamos la consulta
 var res=myJSSQL.Query(sql)

if(res===false){// Mostramos los errores que se produzcan
    alert( myJSSQL.GetError() );
} else {
    // pintamos los resultados.
	...
 }

Una solución muy interesante para llevar ciertos datos al cliente y así mitigar el trabajo de nuestros servidores de aplicaciones y base de datos.