Similar Posts
Highlight.js: resalta código automáticamente
ByLuis
Si hace unos dÃas hablábamos de CodePress, hoy vamos a hablar de otro Javascript parecido que resalta el código que se introduce en tu HTML entre las etiquetas <pre><code> … </code></pre>.
En este caso detecta automáticamente el lenguaje de programación, aunque se puede indicar también en el class de la etiqueta code, o también se puede ignorar el cógido si ponemos como estilo no-highlight.
Los lenguajes que reconoce son los siguientes: Python, Ruby, Perl, PHP, XML, HTML, CSS, Django, Javascript, VBScript, Delphi, Java, C++, RenderMan (RSL and RIB), SQL, SmallTalk, Axapta, 1C. A parte permite exportar el código HTML generado y añadirlo como plugin para WordPress.
Highlight.js
VÃa / WebAppers
FancyBox: zoom de imágenes mediante Javascript
ByLuis
Buen script creado en jQuery que permite añadir zoom a imágenes. Está testado en IE6, IE7 y Firefox. Entre las características muestra en una ventana lightbox la imagen en un tamaño mayor, pudiendo ajustarse al tamaño de la ventana y mostrando un marco alrededor de la imagen. Además permite mostrar un grupo de imágenes de forma común.
Un ejemplo de uso sería el siguiente:
$(function() {
$("div#test_zone a").fancybox();
});El rendimiento de Google Instant Previews
ByLuis
Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.
Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:
- Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
- JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
- DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.
Está claro que hay que aprender de los que saben.
Instant Previews: Under the hood
Vía / High Scalability
Javascript Lint: ayuda para un código limpio
ByLuis
Javascript Lint es una aplicación (también online) que nos permite comprobar que nuestro código no tenga los errores más comunes en Javascript, asà como el uso de técnicas cuestionables.
Basada en el motor de Javascript de Firefox, nos muestra los siguientes errores:
- Falta de punto y coma al final de la lÃnea.
- Llaves sin un if, for, while.
- Código que nunca se ejecuta debido a un return, throw, continue o break.
- Sentencias case dentro de un switch que no tienen break.
- Números decimales que empiezan o acaban directamente con el punto.
- Un número que empiza por cero que lo convierte en octal.
- Sentencias que no hacen nada.
- Expresiones regulares que no están precedidos por un paréntesis, asignacion, coma o dos puntos.
- Sentencias separadas por comas en vez de por punto y comas.
- Sentencias if, for, while, … sin llaves.
- Detectar variables no usadas.
jQuery CodeView: plugin para ver el codigo HTML
ByLuis
jQuery CodeView es un plugin que nos permite mostrar el código HTML de un elemento de la página.
Su uso sería así:
jQuery("#javascript_block").codeview();
jQuery("#javascript_block").codeview({
fontSize: "1.2em",
tabToSpace: -1,
feedColor: false
});Vía / DZone
Recopilación de utilidades Javascript
ByLuis
Una interesante lista de utilidades Javascript, agrupadas por acciones sobre enlaces (buscar enlaces, ocultar visitados, eliminar redirecciones, …), interactuación con formularios (transformar POST en URLs, mostrar ocultos, …), uso de texto y datos (resaltar, ordenar tablas, …), reemplazar objetos (mostrar el texto alternativo de las imágenes en lugar de estas, quitar plugins, …), desarrollo web (shell, modificar estilos, …), validaciones (urls de imágenes incorrectas, validacion de HTML, …) y por último un grupo de utilidades varias (traducir la página, editarla, …).
Bookmarklets
VÃa / aNieto2K