Similar Posts
BonBon Buttons
ByLuis
These are way above and beyond the level of any other “CSS3 buttons” I’ve seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states… the list goes on. Every trick in the book masterfully employed.They make my buttons …
Consejos para jQuery
ByLuis
Últimamente hablo mucho de jQuery, y no es para menos, ya que este framework de Javascript es muy bueno y la gente realiza grandes plugins que nos ayudan en nuestros desarrollos. En este caso se trata de varios consejos que nos serán muy útiles a la hora de desarrollar:
- Carga la librería desde Google Code
- Almacena en variables los selectors que vayas a usar en varias ocasiones
- Evita la manipulación DOM lo máximo que puedas, es mejor realizar una llamada “gorda” que varias pequeñas
- Usa preferiblemente IDs en vez de nombres de clase cuando realices búsquedas
- Realiza la captura de eventos correctamente, muchas capturas suele ser ineficiente
- Usa los nombres de clase para guardar el estado de un objeto
- Incluso mejor que el anterior, usa el método data() para guardar datos en un objeto
- Aprende a crear tus propios selectores
- Usa noConflict() para renombrar el objeto jQuery y no tener problemas con otras librerías
- Aprende a controlar cuando se cargan las imágenes
- Usa .lenght en un selector para saber si un objeto existe
- Añade una clase al objeto HTML para modificar elementos por CSS cuando el documento se haya cargado
Improve your jQuery – 25 excellent tips
Vía / Intenta
Datejs: librería de fechas para Javascript
ByLuis
La verdad es que trabajar con fechas en Javascript suele ser un poco pesado. Con Datejs podremos trabajar con fechas de una forma increÃblemente fácil y potente.
No se trata únicamente de un parseador, sino que ofrece muchas más funcionalidades.
Algunos ejemplos que nos pueden hacer ver la potencia de esta librerÃa son:
// ¿Qué fecha es el próximo jueves?
Date.today().next().thursday();
// Añadir 3 dÃas a la fecha de hoy
Date.today().add(3).days();
// ¿Es hoy viernes?
Date.today().is().friday();
// Hace tres dÃas
(3).days().ago();
// Dentro de 6 meses
var n = 6;
n.months().fromNow();
// Ponerlo a las 8:30 AM del dÃa 15 de este mes
Date.today().set({ day: 15, hour: 8, mintue: 30 });
// Convertir un texto a una fecha
Date.parse(‘today’);
Date.parse(‘t + 5 d’); // hoy + 5 dÃas
Date.parse(‘next thursday’);
Date.parse(‘February 20th 1973′);
Date.parse(‘Thu, 1 July 2004 22:30:00′);VÃa / Ajaxline
$fx(): librería javascript para animaciones
ByLuis
$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style
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
jQuery Masonry: encaja capas HTML
ByLuis
Supongo que lo de “encajar capas HTML” no es algo que se entienda muy bien, pero realmente se trata de eso. Este plugin de jQuery coloca las capas HTHL de tal forma que no queden espacios en blanco entre ellas (algo normal cuando se usa el css float).
Hay que tener cuidado, porque aunque nos devuelve un layout sin espacios en blanco, también nos lo da con un orden no muy usable, por lo que es importante no usar este plugin cuando el orden de colocación importa.
jQuery Masonry
Vía / WebAppers