Ejemplos de javascripts optimizados

ByLuis

Si el otro día os contábamos cómo agilizar tus javascripts, hoy os hacemos referencia a ejemplos sobre esos consejos.
Aunque si soy sincero, no tengo muy claro que se gane mucho tiempo cargando dinámicamente los scripts y retrasando la ejecución para esperar a que se cargue. O si realmente hay diferencia, que no será mucha y menos con las velocidades que suele tener actualmente la mayoria de la gente, si merece la pena tanta cosa. Si el script lo cargamos inicialmente y luego lo utilizamos en todas nuestras páginas, la optimización sería suficiente.
Yo creo que la mejor solución es no tirar tanto de librerías y crear los scripts necesarios para tu aplicación.
Speed Up Your Javascript, Part 2: Downloadable Examples!
Vía / Dzone

Similar Posts

QuickSearch: filtro de contenido con jQuery

ByLuis

QuickSearch es una librería bastante interesante que permite filtrar el contenido de elementos que contengan cierto texto. Tan solo hay que pasar una lista de elemtos y estos los filtrará para mostrar solo aquellos que cumplan cierto filtro de texto.
Se puede pasar lista de elementos (ul), párrafos, tablas, … Se le puede indicar el texto o la imagen que muestre que se está filtrando datos, indicar retraso, añadir clases css, …
QuickSearch
Vía / WebAppers

|

‘Bocadillos’ en tu web

ByLuis

Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imágenes dentro. El bocadillo se adapta al tamaño de la imagen y su aspecto se puede cambiar mediante CSS.
bubble.png

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librería prototype, la css e incluir la siguiente línea para que funcione:

<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>

Yo como unica pega, intentaría hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.

Bubble

Vía / Fresqui

Incrustar un SVG dentro del HTML directamente

ByLuis

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

vegUI: gestor de ventanas en Javascript

ByLuis

vegui.pngvegUI es un gestor de ventanas realizado en Javascript, a parte de una colección de widgets, un sistema de interfaz de usuario, un framework para aplicaciones dinámicas y una librería para operaciones con Ajax, vamos, de todo.
Admite los siguientes navegadores: Mozilla, Internet Explorer 6 y 7 y Opera. Entre las funcionalidades que he encontrado admite minimizar, maximizar, recuperar y cerrar ventanas, moverlas por el escritorio que se puede crear, control de z-index para las ventanas, transparencias.
vegui2.png
La verdad es que me ha impresionado del todo, entre otras cosas porque me he peleado alguna vez con lo de crear ventanas mediante Javascript y siempre hay algo que me vuelve loco.
vegUI
Vía / dzone

|

Mini parser para código PHP

ByLuis

En mi blog personal, me ocurre que cuando quiero mostrar código en un post tengo que modificarlo para que quede bonito, poniéndole estilos, etc… La verdad es que es bastante aburrido y no es algo que me guste mucho hacer, me da mucha pereza.

Supongo que hay más gente que se encuentra en mi situación y me entenderán. La solución es usar unas librerías que me modifiquen el código y lo muestre con colores y tabulado. No me he puesto a buscar en Google, pero habrá ya alguna, de todas formas, siempre está bien saber cómo se podría hacer.

php-parser.png

En este caso vamos a explicar como realizar un pequeño parser de código PHP, con tan solo unas funcionalidades: reconoce comentarios, palabras reservadas, funciones, variables y texto entrecomillado, a parte de realizar una mínima tabulación. No reconoce código HTML, ni realiza otras cosas, aunque las ampliaciones son posibles.

Read More “Mini parser para código PHP”

Foo Framework: framework javascript

ByLuis

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Foo actúa como una máquina virtual que traduce las etiquetas especiales de Foo a Javascript y lo enlaza con datos para crear aplicaciones web. Une la facilidad del HTML y el poder del Javascript para crear aplicaciones web complejas.

Veo una gran utilidad a este framework sobre todo para los casos en que en un proyecto existe un grupo de desarrolladores de páginas sin gran conocimiento de XHTML o Javascript, ya que su desarrollo es muy sencillo, con poco código se puede hacer mucho.

Por ejemplo, con este código se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

Además Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicación.

Foo Framework

Gracias DiarioTHC