Similar Posts
30 ‘chuletas’ para desarrolladores
Aunque ahora estamos acostumbrados a buscar directamente en Google cuando tenemos una duda, se suele tardar mucho menos, nunca viene mal tener una “chuleta” con lo que solemos utilizar. Una lista bastante amplia y útil, aunque algunas no son de las “bonitas” que ocupan un folio y alguna que otra es de pago:
- Desarrollo web (JavaScript, CSS, códigos hexadecimales, HTML, XHTML, entidades HTML)
- Bases de datos (MySQL, Oracle, SQL)
- Lenguajes (PHP, Ruby, expresiones regulares, JSP, Java)
- Control de versiones (CVS)
- Otras (Google, Windows, Unix, Vi, mod_rewrite, códigos de caracteres ASCII, htaccess)
Cheat Sheet Roundup – Over 30 Cheatsheets for developers
VÃa / Menéame
Laboratorio: barra de progreso mediante Ajax
Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.
Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.
Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto “1-” cuando lleve el 5% habrá devuelto “1-2-3-4-5-“. Parseando esto podemos saber por el último número cuanto lleva ejecutado.
El PHP sería el siguiente:
for($i=0; $i<10000000; $i++) {
if ($i%10000 == 0) echo ((int) $i/100000).'-';
flush();
}
Y el javascript sería así:
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
_ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
_ajaxobj = false;
}
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
_ajaxobj = new XMLHttpRequest();
}
return _ajaxobj;
}
function prueba () {
ajax = ajaxobj();
ajax.open("GET", "res.php", true);
ajax.onreadystatechange=function() {
if (ajax.readyState == 3) {
// Mostramos porcentaje
var res = ajax.responseText;
res = res.split('-');
alert(res[res.length-2]);
} else if (ajax.readyState == 4) {
// Fin
alert('FIN');
}
}
// Enviamos algo para que funcione el proceso
ajax.send(null);
}
Como no hay nada perfecto, y menos aún Internet Explorer, sólo he sido capaz hacer que funcione en FF, Opera, Safari y Chrome.
Javascript 1.7 en Firefox 2
Una de las nuevas caracterÃsticas que nos trae Firefox 2 es el soporte para Javascript 1.7. Entre las novedades que nos encontramos está:
- Generadores: una forma de ejecutar procesos iterativos, usando yield para “congelar” el valor de una variable y usando next() para realizar la llamada al siguiente estado.
- Iterators: en vez de usar for…in y for each…in, nos podemos crear un iterador, mediante Iterator(), para realizarlo de una forma más sencilla.
- Comprensión de arrays: una forma sencilla de inicializar el valor de arrays.
- Sentencia let: para modificar el alcance de variables para un bloque de código.
- Devolver varios valores: la posibilidad de que una función devuelva varios valores.
Más información
VÃa / SitePoint
TrimQuery: usa SQL en Javascript
TrimQuery es un script que permite usar sentencias SQL para obtener datos contenidos en un objeto JSON.
Entre las caracterÃsticas que permite, nos encontramos con:
- Codificado en Javascript estándar.
- Admite SELECT … FROM.
- Cláusulas WHERE.
- Ordenación (ORDER BY) de varias columnas de forma ascendente (ASC) y descendente (DESC).
- Alias (AS).
- Agrupaciones (GROUP BY y HAVING).
- Funciones: SUM, COUNT y AVG.
- Joins
- LIMIT y offsets.
- Parametrización.
- Es ligero (más o menos), ya que ocupa menos de 700 lÃneas.
Si por ejemplo disponemos del siguiente objeto:
Invoice : [ { id: 1, total: 100, custId: 10 },
{ id: 2, total: 200, custId: 10 },
{ id: 3, total: 300, custId: 10 },
{ id: 4, total: 400, custId: 20 } ],
Customer : [ { id: 10, acctBalance: 1000 },
{ id: 20, acctBalance: 2000 },
{ id: 30, acctBalance: 3000 } ]
Podemos obtener datos con la siguiente consulta:
SELECT Customer.id, Customer.acctBalance, Invoice.total FROM Customer, Invoice WHERE Customer.id = Invoice.custId ORDER BY Customer.id
Es sensible a mayúsculas y minúsculas, ya que diferencia entre FROM y from.
VÃa / dzone
HTML5 Web Workers
HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.
Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.
El script que instancia el Worker sería así:
// Crea el Web Worker
var worker = new Worker("worker.js");
// Envía un mensaje al worker
worker.postMessage(0);
// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
// evt.data es el valor devuelto por el Worker
alert(evt.data);
}
// Trata los errores
worker.onerror = function (evt) {
alert(evt.data);
}
Y el worker.js sería el siguiente:
// Ejemplo de Worker
onmessage = function (evt) {
// evt.data es el valor enviado desde el javascript
for (var i=evt.data, il=1000001; i
Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:
onconnect = function(evt) {
postMessage('Hola, acabas de conectarte al Worker');
}
Using HTML5 Web Workers to have background computational power
linkNotify: plugin jQuery que indica que se carga un enlace
linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.
$('a').linkNotify('Espera mientras carga la pagina...');