jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense…
jMaps
Vía / Script & Style
Ayer fuà vÃctima de las librerÃas de Javascript, utilicé jQuery para facilitar el ajax y de paso para el DOM, cuando para esto último no hubiera sido necesario, tardé más en enterarme de cómo hacer un getElementById en jQuery que en hacerlo sin más.
Ante esto me pregunté si no serÃa mejor coger la librerÃa de jQuery y dividirla en funcionalidades, y cargar solo la parte que vayamos a usar. Para ello se me ocurrió transformar el .js en un .php y cargar las diferentes funcionalidades según unos parámetros de entrada. Veo que aNieto2K ha tenido una idea parecida y buenÃsima, pero mediante javascript. En el caso que yo comento se podrÃa hacer que si quiero Ajax, a parte también se carguen las funcionalidades del DOM que pueda usar la parte Ajax, transparente para el que use la librerÃa.
Para realizar esto, he tenido en cuenta dos cosas: obtener ciertos parámetros de entrada y según estos, cargar ciertas partes del script y usar un sencillo sistema de caché para no estar teniendo que crear en script online todo el tiempo.
Read More “Laboratorio: carga secciones de javascript de forma dinámica”
Ayer nos preguntaban cómo cargar combos según lo que se seleccione en otro combo, y aunque no me quedó muy claro la duda que tenÃa, pues para intentar ayudarle, voy a explicar cómo hacerlo mediante tres posibilidades.
Primeramente explicaremos cómo hacerlo mediante el uso de iframes ocultos. SÃ, no es nada web 2.0, pero no a todo el mundo se le da bien el desarrollo web, o no le gusta el uso de Ajax, o simplemente, como me pasa a mÃ, no nos dejan usar Ajax en los desarrollos del cliente (¡vete a saber por qué!).
Después lo haremos mediante Ajax (¡viva la web 2.0!), pero instanciando nosotros mismos el objeto XMLHttpRequest, para que los conceptos de Ajax no se pierdan dentro del uso de librerÃas, es importante conocer la base para luego usar una librerÃa que te lo haga todo más fácil.
Y por último, ya no solo en plan web 2.0, sino en plan lo último de lo último, lo haremos usando la librerÃa Prototype. Que la verdad sea dicha, no se trata de reinventar la rueda.
Ya hablamos en su dÃa de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
VÃa / SitePoint
Interesante javascript que nos permite crear PDFs sin necesidad de aplicaciones en el servidor, sino usando únicamente una librería PDF. Su uso es muy sencillo, devolviendo una URL con Content-type y codificada en Base64:
var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
// Output as Data URI
doc.output('datauri');
A mí en Firefox no me ha funcionado, pero en Chrome sí.
Vía / DZone
Interesante plugin jQuery para mostrar fechas con un formato más adecuado y legible.
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"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;
}