Greasemonkey é um add-on para o Firefox que permite a instalação de scripts para modificar o funcionamento de páginas da web.

Semana passada eu escrevi um script de Greasemonkey para modificar as páginas da Wikipedia em uma tentativa de acelerar a leitura dos textos. O resultado visual é esse:

É interessante para quem pretende fazer scripts de Greasemonkey utilizar a biblioteca jQuery para agilizar o desenvolvimento. Para isso o código comentado a seguir vai ajudar:

// Verifica se o jQuery pode ser usado
function GM_wait() {
if(typeof unsafeWindow.jQuery == ‘undefined’) { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();

function letsJQuery() {
// pode usar o $ aqui ;D
}


Obs: se você utiliza outro navegador existem outras opções para executar “user scripts”. Uma delas é o GreaseKit para WebKit (Safari).

Esse texto é uma tradução do “OCR and Neural Nets in JavaScript” escrito por John Resig.

---

Um belo pedaço de JavaScript foi criado ontem. É um script para GreaseMonkey escrito por ‘Shaun Friedle‘ que resolve automaticamente o captcha do Megaupload. Existe uma demonstração online caso você queira dar uma olhada.

Atualmente os captchas usados no Megaupload não são muito “difíceis” de resolver (de fato eles são muito ruins – exemplos abaixo).

Existem porém pontos interessantes aqui:

• A API getImageData do HTML 5 é usada para pegar informações sobre os pixels da imagem. No HTML 5 é permitido adicionar uma imagem no elemento canvas (de onde então pose-se extrair informações sobre cada pixel usando JavaScript).
• O script implementa uma rede neural, escrita em puro JavaScript.
• As informações do pixel, extraídas da imagem usando canvas, são jogadas dentro da rede neural em uma tentativa de adivinhar o caractere usado – algo parecido com Optical Character Recognition (OCR).

Se abrirmos o código fonte podemos perceber que o funcionamento recai em como o captcha é implementado. Como mencionado anteriormente esse não é um captcha muito bom. Ele tem 3 letras, cada uma em uma cor diferente, usando uma possibilidade de 26 caracteres e eles são todos do mesmo tipo gráfico.

O primeiro passo é fácil de entender: O captcha é copiado dentro do canvas e então convertido para escala de cinza.

image_data.data[i] = luma;
image_data.data[i+1] = luma;
image_data.data[i+2] = luma;
image_data.data[i+3] = 255;
}
}
}


O canvas é então quebrado em três matrizes de pixels - cada uma contendo um caractere (isso é bem fácil de fazer - uma vez que cada caractere é de uma cor diferente, eles são separados pela diferença de cores usadas).

// Muda todos pixels de tal cor para a cor branca
if (image_data.data[i] == colour) {
image_data.data[i] = 255;
image_data.data[i+1] = 255;
image_data.data[i+2] = 255;
} else { // Todo o resto vira preto
image_data.data[i] = 0;
image_data.data[i+1] = 0;
image_data.data[i+2] = 0;
}
}
}
}


Finalmente qualquer pixel solto é removido da imagem (retornando um caractere limpo). Isso é feito procurando por pixels brancos (que eram da cor da letra) que são cercados de preto (que não bateram com nenhuma cor de letra). Se esse for o caso o pixel é simplesmente removido.

if (image_data.data[i] == 255 &&
image_data.data[above] == 0 &&
image_data.data[below] == 0) {
image_data.data[i] = 0;
image_data.data[i+1] = 0;
image_data.data[i+2] = 0;
}


Estamos bem próximos de ter uma forma que pode alimentar uma rede neural, mas não estamos lá ainda. O script agora vai fazer uma forma bem crua de detecção de borda na forma, procurando pelos pixels que cercam o caractere e então o transformando em um retângulo. Nesse trecho a matriz também é reduzida para 20 por 25 pixels.

image_data[i] = cropped_canvas.getContext("2d").getImageData(0, 0,
cropped_canvas.width, cropped_canvas.height);


Então, após todo esse trabalho, o que nós temos? Uma matriz de 20 por 25 pixels contendo um único retângulo preenchido com preto e branco. Terrivelmente excitante.

Agora alguns pontos estratégicos são extraído da matriz para serem usado como "receptores" (eles que alimentarão a rede neural). Como exemplo, o receptor deve olhar para o pixel da posição 9x6 e verificar se ele está "ligado" ou não. Somente 64 estados (muito menos do que a matriz de 20 por 25 inteira) são então jogados para dentro da rede neural.

A questão que você deve estar se perguntando agora é: Por que não fazer somente uma simples comparação de pixels? Por que "isso de" redes neurais? Bom, o problema é que com toda essa redução da informação um monte de ambiguidade existe. Se você rodar a demonstração do script vai perceber que a comparação simples de pixels vai falhar mais que a nossa rede.

A próxima etapa é tentar adivinhar a letra. A rede é então alimentada com 64 valores boleanos (coletados das letras) juntamente com uma serie de valores pre-computados. Um dos conceitos por trás do funcionamento de redes neurais é que você reutiliza valores de execuções anteriores. É como se o autor do script rodasse ele várias vezes e coletasse uma serie de resultados para conseguir um valor ótimo. O resultado em si não tem nenhuma funcionalidade por si só mas ele ajuda a derivar o valor final.

A rede neural utiliza os 64 valores extraídos dos caracteres do captcha para comparar com valores pré-computados de cada letra do alfabeto. O resultado retornado dessas comparações é parecido com ‘98% de chances para A’, ‘36% de chances para B’, etc..

Repetindo com todas letras do captcha o objetivo é atingido. Ele não é 100% perfeito (imagino que resultados melhores seriam alcançados se a letra não fosse transformada em um simples retângulo antes da execução do algoritmo) mas é bom pelo que é – e impressionante considerando que tudo acontece 100% no navegador usando padrões emergentes.

Como nota – o que acontece aqui é bem especifico para esse captcha. Essa técnica deve funcionar em mais alguns captchas mal implementados, mas além disso a complexidade da maioria dos captchas é muito avançada (principalmente para qualquer analise no lado do cliente).

Eu estou esperando trabalhos interessantes derivados desse projeto – isso carrega bastante potencial.

Imagens do tipo bitmap armazenam nada mais que uma lista (ou mapa) de cores a serem usadas em cada pixel de uma imagem.

Cada pixel pode ser representado, por exemplo, pela intensidade das cores: vermelho, verde e azul. Ex:

Essa cor seria R: 255, G: 55, B: 15 ou #ff0055 em hexadecimal.

Entendendo um pouco do funcionamento de bitmaps, ficará mais fácil entender a brincadeira aqui.

Com uma lista de cores (veja arquivo) eu desenhei uma imagem em uma tag HTML <canvas> com Javascript. Veja funcionando: Visualização de bitmap com Javascript.

Pode parecer besteira ou “muito inútil”, mas afinal: por que os navegadores ficaram mais rápidos?

Em uma apresentação recente John Resign, desenvolvedor da Mozilla e responsável pelo engine de Javascript do Firefox, deu a entender que pode ser a hora de ver vídeo rodando em Javascript. Ou indo mais além, vídeo em streaming.

O número exibido na demonstração é quantas vezes a imagem conseguiu ser renderizada em um tempo limite de 1 segundo. (Quem usar Firebug vai ler isso no console).

Jacob Seidelin também fez algumas experiências com a exibição de imagens/vídeo em Javascript conseguiu fazer uma sequência de JPGs rodaram a 15 fps, o que foi suficiente para isso: Making a Javascript Video Player.

Como comentado lá no post do Jacob, considerando que temos codecs de sucesso para streaming de vídeo como o FLV tudo isso é inútil, prova de conceito, toycode que estava a algum tempo em minha pasta “playground” e agora fica disponível para inspirar idéias.

O script que usei para gerar a lista de cores à partir da imagem pode ser encontrado no gist.

Algumas dicas de jQuery eu passava para amigos, mas agora encontrei uma coleção de Excelentes truques e dicas para jQuery que traduzi, adicionei comentários, retirei o que não acho legal e agora compartilho aqui:

25 Excelentes truques e dicas para jQuery

1 – Carregue o conteúdo pelo Google Code

Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.2.6.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiencia de navegação melhor para o visitante.

O Google tem uma infra-estrutura de espelhamento ao redor do mundo, sendo o mais rápido e melhor serviço de distribuição de conteúdo (ou CDN para os íntimos).

Aproveite os milhões de computadores do Google e faça com que o jQuery seja carregado de lá.

Tem até como transformar a tag de script do jQuery em snippet para TextMate.

2 – Use uma tabela de referências

É sempre bom achar o mais rápido possivel aquela função que executa seu trabalho, né? Este site possui uma excelente tabela para buscas rápidas.

3 – Combine e minimize todos seus scripts

Existem várias ferramentas para isso, mas ao invés de combinar eu ainda prefiro minimizar separadamente os scripts e CSSs. Uso para isso o YUI Compressor do Yahoo!

Combinar acho que vale mais para o Apache ou outros WebServers, onde a quantidade de requisições no servidor importava. Hoje com Nginx e outras soluções para o problema de escalabilidade a quantidade de conexões HTTP com o servidor não é um problema tão critico.

Já vi casos que um arquivo não compactado foi a diferença entre manter 1 servidor dedicado ou precisar “comprar” um novo. Fikdik de como escalar WowWowWow.

4 – Use as funcionalidades extras de log do Firebug.

Use a função console.log(Object) do Firebug para escrever mensagens no console, muito melhor que alert(”").

O Firebug facilita acesso as propriedades dos objetos. Como elementos DOM são sempre objetos, estamos tratando deles o tempo todo.

O Firebug também pode ser usado com Internet Explorer.

5 – Use menos funções de seleção, faça cache.

Em um computador atual isso não demora nada, mas lembre-se que o usuário utiliza equipamentos muito piores que seu Macbook Pro. Imagine eles em seus fracos iPhones, ou pior ainda, em um Opera Mobile.

Então mantenha o seletor fora do loop:

6 – Use o minimo possivel de manipulação com o DOM

Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.

É consideravelmente lenta perto de:

Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?

7 – Coloque tudo dentro de um elemento antes de fazer uma inserção ao DOM

8 – Use IDs em vez de classes sempre que possivel

A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite.

Navegadores como o WebKit já possuem implementação nativa dessa função, indo de acordo com o que foi pensado no framework Prototype, mas lembre-se, em desktop/notebook a hegemonia é de quem não IEmplementa novidades tão cedo.

No mercado de mobile, WebKit e Opera lutam para ver quem tem o maior numero de especificações da W3C implementadas.

Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.

9 – Dê um contexto para seus seletores

Eu tenho dúvidas quanto a eficácia de contextualizar os seletores via Javascript, comparada ao uso de contexto no CSS3. De qualquer forma as seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.

10 – Use encadeamento de funções

Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Então, por exemplo, se você deseja alterar a classe de um elemento:

Provavelmente você aprendeu isso em seus primeiros 5 minutos de leitura sobre jQuery.
Note que continua funcionando mesmo com quebras de linhas (jQuery == JavaScript), o que significa que você pode escrever código assim:

Usar encadeamento também ajuda a diminuir a quantidade de seletores.

Mas ainda é possivel ir além. Digamos que você deseja executar várias funções em um elemento mas uma das primeiras funções muda o elemento selecionado de alguma maneira:

Nós selecionamos uma tabela, descemos para buscar celulas com a classe “primeiraColuna” e então a pintamos de vermelho.

Digamos agora que queremos colorir todas celulas com a classe “ultimaColuna” de azul. Já que usamos o método find(), filtramos todas as células que não tinham a classe “primeiraColuna”, assim seria necessario o uso de um seletor novamente ou então não poderiamos continuar encadeando, certo? Nah! O jQuery possui o metodo end() que reverte a última seleção, então você pode continuar encadeando tipo:

É também mais fácil do que você imagina escrever suas funções de forma que elas possam usar encadeamento.

Tudo que você precisa é fazer que suas funções modifiquem e retornem o mesmo elemento.

Bem legal!

11 – Saiba como usar a propriedade de animação

Quando eu comecei usar o jQuery eu adorei o fato de que é fácil usar animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade.

É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate().

Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate().

O método animate() simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!

É muito fácil animar todos itens do seu menu para 100 pixels usando isso.

Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.

Porém, se você você desejar que as animações ocorram no mesmo tempo, então insira ambas na mesma chamada assim:

Você pode animar tanto propriedades numéricas quanto cores e cores de fundo, leia mais sobre isso.

12 – Conheça sobre delegação de eventos

O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:

Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos.

Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?

Para isso é que serve a delegação de eventos e isso é simples de implementar…

Muito útil, para por exemplo, manipular eventos de touch.

13 – Use classes (ou atributos) para armazenar estado

Essa é a maneira mais básica de guardar informação sobre um bloco de HTML. O jQuery facilita a manipulação de elementos utilizando classes, então se você precisa armazenar informações sobre o estado de um elemento, por que não adicionar uma classe extra nele?

Aqui vai um exemplo. Nós queremos criar um menu que expande. Quando você clica no botão nós queremos que o painel desça – slideDown() – quando ele tiver fechado, e que suba – slideUp() – quando estiver aberto.

Vamos começar com o HTML

Simples
Nós adicionamos uma classe extra na div de fora, que não possui outro proposito a não ser armazenar o estado do item. Então, tudo que precisamos é um evento de clique – click – para chamar o slideUp() ou o slideDown() no painel correspondente quando o botão é clicado.

if (menu_item.hasClass("expandido")) {
menu_item.removeClass('expandido').addClass('colapsado');
painel.slideUp();
} else if (menu_item.hasClass("colapsado")) {
menu_item.removeClass('colapsado').addClass('expandido');
painel.slideDown();
}
});

Esse é um exemplo bem simples, mas você pode adicionar classes extras para armazenar todos tipos de informações sobre um elemento DOM (pedaço de HTML).

De qualquer forma, melhor ainda é a próxima dica.

14 – Melhor ainda, use o método data() que é interno do jQuery para armazenar estados

O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM. Armazenar um pouco de informação é simples assim:

Nós podemos usar o exemplo da dica anterior. Vamos utilizar o mesmo HTML, porém ao invéz da classe “expandido” usamos o metodo data().

var item_menu = $(this).parent();
var painel = item_menu.find('.painel');

if (item_menu.data('colapsado')) {
item_menu.data('colapsado', false);
painel.slideDown();
} else {
item_menu.data('colapsado', true);
painel.slideUp();
}
});

Para mais informações sobre os metodos data() e removeData() veja a documentação.

15 – Escreva seu proprio seletor

O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?

Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:

$('.box:mais100px').click(function() {
alert('O elemento que você clicou possui mais de 100 pixels de altura');
});

Primeiro criamos um seletor que acha qualquer elemento que é maior que 100 pixels. Depois usamos isso para adicionar uma ação de clique – click – em todos esses elementos.

Mais exemplos dessa funcionalidade você pode pegar aqui.

16 – Use as funções de auxilio do jQuery

O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados.

Vale a pena passar um tempinho na página que explica essas utilizades.

17 – Use a função “noconflict” para evitar conflitos com outros frameworks

A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:

18 – Use função anonima para evitar conflitos com outros frameworks

Uma boa maneira de evitar conflitos no JavaScript (não somente com jQuery) é o uso de uma função anonima.

O que for executado dentro do bloco não muda com o escopo global, evitando problemas com nomes duplicados de variaveis e funções.

19 – Saiba quando uma imagem terminar de carregar

Use o método .load() em um elemento de imagem (IMG) com um callback. Simples assim:

É importante que o elemento já esteja no HTML.

20 – Sempre use a última versão

O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.

A próxima versão do jQuery (1.3) virá com uma nova engine chamada Sizzle que além de mais rápida vai utilizar as funções querySelectorAll e getElementsByClassName já disponiveis nos navegadores mais modernos.

Então, utilize sempre a última versão.

21 – Como saber se um elemento existe?

Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:

22 – Adicione uma classe no HTML para saber que o JavaScript está disponivel

Logo que o jQuery carregar use ele para adicionar uma classe chamada “JS” na tag HTML:

Como isso só acontece quando o JavaScript (e o jQuery) estiverem prontos, você pode usar CSS para controlar quando um elemento deve aparecer somente quando o usuário estiver com JavaScript habilitado.

23 – Return ‘false’ para evitar a continuação de um evento

Quando você tem:

E adiciona um evento tipo assim:

Vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada.

Para evitar isso, adicione um “return false;” ao fim do bloco de código:

24 – Atalho para a função “ready”

Você já deve estar acostumado a usar

Pois saiba que pode economizar um pouco de código simplesmente usando:

25 – Identifique váriaveis do tipo jQuery

Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante.

Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.

Ufa! 25 praticas ninja para ajudar sua produtividade com jQuery. Se você tiver mais alguma boa pratica e quer compartilhar, por favor comente aqui

E se você gostou do artigo, por favor espalhe pelo mundo.

Eu sempre gostei do trabalho dos desenvolvedores do Yahoo!. Há algum tempo atrás desenvolvi um pouco com o SearchMonkey e comecei a acompanhar mais de perto o trabalho em projetos como o Hadoop

Hoje quando fui atualizar minhas versões do YUI Compressor (ferramenta para comprimir JavaScript e CSS) deparei com uma frase que resume o motivo pelo qual aprecio o trabalho dos engenheiros que trabalham lá:

Change Log
YUI Compressor 2.4.1, 2008-10-28
——————————–

+ Use preferentially lower case letters for obfuscated variable names. Since JavaScript keywords use lower case letters most often, this improves the efficiency of any compression algorithm (gzipping) used after minification.

Ou em português:

Histórico de mudanças
YUI Compressor 2.4.1, 28/10/2008
——————————–

+ Usa preferencialmente letras minusculas para nomes de variáveis ofuscados. Como a maioria das keywords de JavaScript usam minusculas, isso melhora a eficiência de qualquer algoritmo de compactação usado após a minificação.

Foda. Olha o detalhe que pegaram: as funções da linguagem JavaScript quase sempre estão em minusculas, então se eles usarem minusculas quando substituírem outros textos as chances de conter caracteres repetidos aumenta.
Como o principio de qualquer algorítimo de compactação é mapear e diminuir repetições, menor o arquivo vai ficar.

Rocks.