Similar Posts

Evitar errores de producción debidos a Firebug

ByLuis

Aquellos que usamos Firebug para depurar nuestras aplicaciones, podemos cometer el error de dejar una traza (console.log())y que al subirlo a producción el usuario tenga un error de Javascript. Para evitar esto, podemos incluir en nuestro script lo siguiente:

if(!window.console) {
window.console = {
log: function() {}
}
}

Visto en este ejemplo

| | |

AJAX paso a paso: autocompletado en cajas de texto

ByLuis

Hace ya tiempo escribí en display: NONE cómo hacer que el texto se autocompletara en una caja de texto según se fuera escribiendo en ella. En esa entrada comentaba que la obtención de los datos, que era mediante Javascript, se podía realizar mediante AJAX. Hoy vamos a explicar cómo se haría esa llamada mediante AJAX.
ajax-autocompletado.png

Read More “AJAX paso a paso: autocompletado en cajas de texto”

Colección de calendarios Javascript

ByLuis

En muchas aplicaciones web, la utilización de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando así que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …

Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:

  • The DHTML / JavaScript Calendar: visible mediante popup o en plano, adecuado para seleccionar fecha y hora, válido para la mayoría de los navegadores, admite CSS, themes, navegación por teclado, muestra los días de los meses adyacentes, traducido a varios idiomas, días especiales resaltados de distinta manera.cal1.png
  • Calendar Popup: se muestra un popup mediante ventana o usando capas, implementado para que tenga el aspecto de Microsoft Outlook, fácil de usar.cal2.png
  • Zapatec Calendar: script comercial, muy completo, admite varios meses, válido para la mayoría de los navegadores, permite varios formatos de fecha y multiple selección de días.cal3.png
  • ScriptCalendar: versión comercial, basado en objetos, fácil de usar y de modificar, válido para la mayoría de los navegadores.cal4.png
  • CalendarXP: versión comercial, muy completo que a parte del calendario pequeño, muestra un calendario grande que admite más detalles.cal5.png
  • Tigra Calendar: el que más me ha gustado, cada campo es seleccionable, se puede adjuntar a un campo existente, meses seleccionables mediante scrolling y muchas cosas más.cal6.png
  • Epoch Calendar: básico, de aspecto atractivo y válido para ser usado en aplicaciones AJAX.cal7.png

Lista de recursos Javascript

ByLuis

Una gran lista de recursos que podemos necesitar para nuestros desarrollos o para aprender cosas nuevas sobre Javascript.

Tutoriales

Colección de scripts

Frameworks y librerías

Técnicas

Referencias

Herramientas

70+ JavaScript Resources for Every Web Developer

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;
}