IceBeat

Muchos de nosotros que tenemos CMS estamos acostumbrados a pasarlas canutas editando el código de las plantillas con los textarea. Siempre tenemos la manía horrorosa de tabular el contenido y claro yo en mi caso siempre me salgo del foco.
Autocompleter.Editor resuelve este problema y muchos otros más. Es un script JS basado en el autocompleter de script.aculo.us y en un este que tabula el código.

Este editor crea snippets al estilo textmate, es decir, escribiendo una palabra clave y dando al tabulador conseguimos un remplazo de código. También lo dota de tooltips informativos cuando pulsamos ESC y de un autocompletado en caso que el carácter coincida con los tokens del lenguaje.

Para esta primera versión he escrito el lenguage.CSS que básicamente contiene los snippets y los token necesarios para escribir CSS rápido y cómodo.

Aconsejo ver el archivo language.CSS.js para ver los snippets y los token pero os pongo un par de ellos para que entendáis mejor el concepto.

Estos funcionan cuando tabulamos:

1. { cierra el corchete y hace un salto de linea
2. ; hace un salta de linea y tabula
3. : muestra un listado de pseudoclasses
4. m muestra un listado para elegir propiedad
5. margin muestra un listado para especificar propiedad

Estos cuando coincide los tokens:

1. a: muestra un listado con las pseudoclasses
2. display: muestra un listado de variables
3. @ muestra un listado de reglas arroba

Hay que tener en cuenta que el listado que sale cuando coinciden los token es de 5, pero al escribir podremos apurar más la búsqueda.

Ver Autocompleter.Editor

Quien se anima a escribir más lenguajes?.

Update: Ahora más friki todavía.

Puedes aplicar funciones a la selección del texto. Para verlo en acción tienes que seleccionar texto y pulsar ctrl+shift+(un numero del 0 al 9), por ahora solo hay 3 ejemplos.
Puedes pulsar el numero 1 para desplegar un tooltip o directamente aplicar el uppercase o el lowercase con el 9 o el 0.

Nota: En IE no funciona.

En prototype tenemos la función Position.within para saber si un punto esta dentro de un elemento, pero no tenemos ninguna función que detecte si una caja esta tocando a otra. En drag&drop se utiliza la primera para saber si el elemento esta situado dentro del contenedor, para ello le pasamos el ID y las coordenadas del ratón.
Con esta función puedes saber si ambos elementos están tocando. Solo tienes que pasar las ID’s que quieres comprobar.

Ejemplo: Position.inbox('drag','drop');

Position.inbox =  function(drag,drop) {
    var box = [drag,drop].map(function(e) {
        if(typeof e == 'array') return e;
        e = $(e);
        var pos = this.cumulativeOffset(e);
        return [pos[ 0],pos[ 1],e.offsetWidth,e.offsetHeight];
    }.bind(this));
    var p = [0,1].map(function(i){
        if(box[ 0][ i]<=box[ 1][ i]) return (box[ 0][ i] + box[ 0][ i+2]) - box[ 1][ i];
        return (box[ 1][ i] + box[ 1][ i+2]) - box[ 0][ i];
    });
    return (p[ 0] > 0 && p[ 1] >0) ? true : false;
}

Un ejemplo en donde podría valer es en Assets, selected

En PHP y CSS incluir archivos es realmente fácil, se suele usar include o @import.
Siguiendo la pauta de como lo hace script.aculo.us, solamente tenemos que usar un document.write para incluir archivos javascript antes de cargar la pagina o crear un elemento script en caso de estar cargada.

Os dejo un pequeño código:

var modulo = {
inc: function(url) {
document.write('<script type="text/javascript" src="'<ins>url</ins>'"></script>');
},
script: function(url) {
var js = document.createElement('script');
js.src = url;
js.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(js);
}
};

Para llamarlo solo tenemos que invocar la función (modulo.js(‘mijs.js’)).

Por fin tengo mi propia clase AJAX , siempre he usado XHconn que me parece perfecta, fácil de implementar y de usar.
Partiendo de varios conceptos he creado una clase que se adapta a mis necesidades, enviar parámetros, recoger el refer, disparar una función y actualizar en una capa.

La clase es fácil de usar, solo tienes que rellenar los argumentos.

Existen dos métodos, ajax.get y ajax.post:

ajax.get(url,parametros,función);

El primer argumento es el que mas destaca, la única novedad que tiene es que puedes concatenar la respuesta o añadirla delante.Se usa de una forma sencilla y es definiendo el ancla.

 ajax.get('ajax.php#update');

En esto ejemplo la respuesta obtenida en ajax.php se cargaría en la capa con id update.

 ajax.get('ajax.php#^update');

Igual que el anterior pero añadida delante

ajax.get('ajax.php#+update');

En este caso la respuesta estaria concatenada con el html del contenedor.

El segundo argumento (opcional) es pasado como un objeto e indicamos los valores a pasar. Esto se hace de esta forma porque resulta muy comodo, mucho mejor que escapar manualmente los caracteres.

ajax.get('ajax.php#update',{id:125,action:"ajax"});

El tercer argumento (opcional) es para indicar una función y dispararla al obtener la respuesta de la pagina.

ajax.get('ajax.php#updare',{id:125,action:"ajax"}, function(oRequest) { alert(oRequest.responseText); } );

El modo de uso no es complicado, solo tienes que añadir al onclick del enlace un return ajax.get();, la función retorna false y el link del href no se efectúa.

<a href="update.php" onclick="ajax.get('ajax.php#update');">Enlace</a>
<div id="update"></div>

Descargar la clase AJAX.

La w3c se ha puesto en marcha creando un grupo de trabajo para intentar estandarizar algunos aspectos del XMLHttpRequest y potenciar las carencias que nos encontramos (tiempos de descarga, actualizaciones automáticas). Tiene muy buena pinta y esperemos que salga algo rico rico y sano sano.

Desde mi punto de vista espero que creen atributos especiales en el html para que los podamos usar en nuestras aplicaciones, ahora mismo solo existen los disparadores de eventos y para poder nosotros aplicar aspectos de javascript tenemos que tirar usando los atributos rel="" y class="". Yo lo veo una chapuza porque te obliga a depender de unos valores. Lo idóneo seria unos atributos con espacios de nombre y que pudiéramos utilizarlos en la mayoría de etiquetas.

Por poner un ejemplo podrían crear el att ajax seguido de la función o de una palabra clave. Imaginaros un soporte AJAX con solo poner ajax:href="index.html#micontent" y que la URL se cargara en el id #content, o ajax:action="index.php" para enviar un formulario. Pienso que estos tags facilitarían el uso de las librerías.