FireUnit: extensión para pruebas unitarias de Javascript

ByLuis

FireUnit es un plugin para Firefox que permite realizar pruebas unitarias de Javascript y mostrar los logs en una pestaña de Firebug. El plugin está desarrollado entre otras personas por John Resig, desarrollador de jQuery.

Se pueden realizar pruebas como las siguientes:

// Simular eventos del navegador
var input = document.getElementsByTagName("input")[0];
fireunit.mouseDown( input );
fireunit.click( input );
fireunit.focus( input );
fireunit.key( input, "a" );

FireUnit

Vía / John Resig

Similar Posts

Librería Javascript para crear un escritorio

ByLuis

Una buena librería Javascript para crear un entorno de escritorio en nuestra página web.
Permite crear ventanas, con sus opciones más comunes (maximizar, minimizar, mover, redimensionar, bloquear el tamaño, …). A parte una barra de tareas con las ventanas abiertas y un menú. Y por último la posibilidad de añadir iconos en el escritorio.
jsdesktop.png
Widget Environment
Vía / dzone

|

Añadir números de línea en highlight.js

ByLuis

Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.

El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.

document.addEventListener( 'DOMContentLoaded', () => {
	const prevHighligth = window.hljs.highlightBlock;
	window.hljs.highlightBlock = block => {
		const newline = '<span class="sw_new_line"></span>';
		// Replace all without regex
		block.innerHTML = block.innerHTML
			.split( newline )
			.join( '' );
		prevHighligth( block );
		if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
			block.innerHTML = newline +
				block
					.innerHTML
					.replace( /\n/g, `\n${ newline }` );
		}
	};
} );

¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.

Ahora toca explicar la parte CSS, para ello usaremos CSS counters.

pre code {
	counter-reset: linenumber;
}

pre code .sw_new_line::before {
	content: counter(linenumber, decimal-leading-zero);
	counter-increment: linenumber;
	padding-right: 15px;
	font-size: 0.8em;
	opacity: 0.6;
}
| |

Laboratorio: realizar drag and drop de elementos HTML

ByLuis

Dentro de la Web 2.0 se intentan hacer cosas menos web y más tipo aplicación de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser útil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginación. Eso sí, la forma de realizarlo es la misma.
drag.png
En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. También hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente también se podría hacer así, pero como lo hemos hecho válido para texto, si lo hacemos de la manera normal, se podría ir seleccionando el texto según se mueve el ratón.

Read More “Laboratorio: realizar drag and drop de elementos HTML”

Detectar copiar, pegar y cortar en una caja de texto con jQuery

ByLuis

Algo sencillo que no conocía y que nos permite detectar cuando se copia, corta y pega en cajas de texto usando jQuery.

$(document).ready(function() {
$("input:text").bind('copy', function(e) {
alert('Copiando...');
});
$("input:text").bind('paste', function(e) {
alert('Pegando...');
});
$("input:text").bind('cut', function(e) {
alert('Cortando...');
});
});

Detect Copy, Paste and Cut operations on a TextBox using jQuery

Vía / Script & Style

|

FirePHP: obten más información de tus scripts PHP

ByLuis

FirePHP es una extensión para Firefox que permite tener un vistazo más profundo del código PHP que genera la página que estás visualizando en el Firefox.
Tan solo es necesario instalar la extensión Firefox y un paquete PEAR, añadir algunas líneas de código a tu aplicación PHP y listo para funcionar. Deberá aparecer una pestaña en tu extensión Firebug para poder controlar la aplicación.
FirePHP
Vía / PHPDeveloper