Similar Posts
YSlow: añadido de Firebug de Yahoo
YSlow es un plugin para Firefox que añade una nueva pestaña a Firebug, la cual realiza informes de las páginas que visitamos y nos indica por qué es lenta según algunas reglas de rendimiento.
Muestra una evaluación de cada posible regla de rendimiento, mostrando estadÃsticas de ellas. Además indica que componentes están instalados y hace una comparativa entre la página visitada con caché o sin caché.
Una extensión muy a tener en cuenta.
YSlow
VÃa / OpenSourceCommunity.org
Incrustar un SVG dentro del HTML directamente
Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.
Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:
.class {
content: url('imagen.svg');
}
Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:
jQuery(document).ready(function() {
var replaceWithSVG = function(selector, url) {
jQuery('').appendTo('head');
jQuery.get(url, function(data) {
// Replace image with new SVG
jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
}, 'text');
}
var selectors = ['.site-title a', '.btn-video']
for(var i in selectors) {
var selector = selectors[i];
var url = window.getComputedStyle(
document.querySelector(selectors[i]), ':before'
).getPropertyValue('content');
url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
replaceWithSVG(selectors[i], url);
}
});
Uso correcto de los selectores en jQuery
Quien dice en jQuery dice en cualquier otro framework de javascript o lenguaje de programación, el tema es no malgastar recursos. jQuery permite encontrar elementos mediante la clase, por ejemplo:
$('.boton')
Esto es muy cómodo, pero también tiene mal rendimiento, ya que el script debe buscar en todos los elementos HTML y encontrar aquél que tenga class=”boton”. ¿Cómo deberíamos usar los selectores?.:
- Si el elemento tiene un ID, hay que usar el ID, pero tampoco es plan de añadir ids a todos los elementos.
- Indica el tipo de elemento, por ejemplo $(‘input.boton’), así limitaremos la búsqueda a los elementos input. Si no solo hay un tipo de elemento, sino varios, los indicaremos todos: $(‘input.boton, a.boton’)
- Guía a jQuery por la ruta de elementos que puede seguir: $(‘#formulario .boton’)
- Usa otro elemento para limitar la búsqueda: $(‘#formulario’).find(‘.boton’)
Cómo hacer un lector de feeds con jQuery Mobile
Completísimo tutorial que nos explica cómo realizar un lector de feeds usando jQuery Mobile (que actualmente está en versión alpha). Cuyas características son las siguientes:
- Mostrar lista de feeds con sus logos
- Mostrar el feed cuando se hace click
- Crear los estilos para los artículos
- Crear un icono Apple-touch para que el usuario pueda añadir la aplicación a su teléfono
- Usar YQL para obtener los datos del feed
- Caché básico
Algo de Javascript avanzado
Algo malo de dedicarse a la informática es que te puedes quedar anticuado con facilidad, algo bueno de ser blogger (al menos para mÃ) es que al querer dar buenas noticias y buenos scripts, te hace estar al dÃa.
Algún compañero me ha preguntado alguna vez por partes de Javascript que no entendÃa, incluso me decÃa si realmente es Javascript. Supongo que a todos nos ha sonado raro el código Javascript cuando incluye JSON.
Lo malo es que cuando buscas por ese tipo de código que desconoces, buscas por términos como “javascript function”, “javascript avanzado”, y otras cosas que no suelen dar los resultados que esperamos. En el caso de “javascript function” nos suele dar cómo crear funciones, pero solo lo más básico, sin embargo, si hubieramos buscado por “javascript funciones anónimas” si hubieramos obtenido resultados deseados. Si buscamos por “javascript avanzado” solemos obtener directorios de efectos hechos en javascript y no las novedades que trae Javascript en sus nuevas versiones.
Por eso, si quieres aprender conceptos más avanzados de Javascript, te va a venir bastante bien este tutorial:
Quick guide to somewhat advanced JavaScript
Lista de recursos Javascript
Una gran lista de recursos que podemos necesitar para nuestros desarrollos o para aprender cosas nuevas sobre Javascript.
Tutoriales
- A (Re)-Introduction to JavaScript
- Eloquent JavaScript
- JavaScript (quirksmode.org)
- JavaScript Cake Tutorials and Scripts
- JavaScript Boot Camp Tutorial
- JavaScript Closures
- JavaScript in Ten Minutes
- JavaScript Tutorial
- JavaScript tutorial for the total non-programmer
- JavaScript/DHTML Tutorials
- Painless JavaScript Using Prototype
- Ten JavaScript Tools Everyone Should Have
- You think you know (JavaScript) but you have no idea
Colección de scripts
- Hot Scripts
- JavaScript Search
- JavaScript Scripts
- JavaScript Source
- Over 400+ free JavaScripts!
- Reusable Libraries And Objects
- The Yahoo! User Interface Library
Frameworks y librerÃas
- Ext JS – JavaScript Library
- JavaScript code library
- jQuery
- jsvalidate
- Mochikit
- overLIB
- Project: Bajax
- Prototype
- Open Rico
- script.aculo.us
- The Dojo Toolkit
- The Solvent
Técnicas
- BarelyFitz Tabs
- Behaviour : Using CSS selectors to apply JavaScript behaviours
- BSN AutoSuggest
- Drag & Drop Sortable Lists with JavaScript and CSS
- Edit in Place with JavaScript and CSS
- FD Sortable tables
- Flexible client-side table sorting
- flickrshow – Simple JavaScript slideshows for Flickr
- Form validation
- Highslide JS – JavaScript thumbnail viewer
- iPhoto-like image resizing using JavaScript
- JavaScript gallery and slideshow system
- JavaScript Tabifier automatically create an html tab interface
- JavaScript: DHTML Library, Drag & Drop for Images and Layers
- JDV Sortable tables
- Kryogenix Sortable tables
- Lightbox JS
- Livepipe Tabs
- moo.fx – The next small thing
- Mouse wheel programming in JavaScript
- overLIB Tooltips
- PlotKit – JavaScript Chart Plotting – liquidx
- Store JSON data in cookies
- Sorted tables
- TableKit
- ThickBox 2.1
- Tooltips, DHTML, JavaScript – BoxOver
Referencias
- CSS Properties to JavaScript Reference
- gotAPI/HTML – Instant search in HTML and other developer documentation
- JavaScript Cheat Sheet/
- JavaScript Reference
Herramientas
- Firebug – Web Development Evolved
- JSLint, The JavaScript Verifier
- RegexPal: JavaScript Regex Tester
- XML.ObjTree XML parser
70+ JavaScript Resources for Every Web Developer
VÃa / dzone