Melhore seu jQuery-fu, escreva plugins
Posted by Dirceu | Filed under jquery, plugin, javascript, traducao, tutorial, uncategorized
Essa é uma tradução de "Improve your jQuery-fu, write plugins" de Tomáš Kramár Trnava.
Escolhi traduzir esse texto pois ele foi o tutorial mais simples que encontrei quando precisei escrever um plugin. No final dele você será capaz de entender como o jQuery trabalha com plugins e poderá escrever os seus próprios.
jQuery é um framework JavaScript simples e poderoso que mudou minha forma de programar JavaScript. Um novo JavaScript dizem alguns com certa razão. O código que você cria é pura elegância.
Você começa com 10 linhas de jQuery que poderiam ter sido 20 linhas do tedioso JavaScript manipulando DOM. No final você acaba ficando com duas ou três linhas.
E esse numero pode ficar ainda menor se você refatorar o código para um plugin do jQuery.
Quando o assunto é escrever plugins, pessoas (tipo eu) normalmente pulam fora com medo. Eu ouvi sobre plugins de jQuery a bastante tempo mas nunca havia tentado escrever um. Quando pensava no assunto algumas idéias vinham na minha cabeça:
- Deve ser difícil e por isso deixe isso somente para jedis
- Isso deve precisar de um conhecimento profundo do jQuery
- O que eu vou ganhar ...
Greasemonkey com jQuery
Posted by Dirceu | Filed under jquery, javascript, uncategorized, greasemonkey, hack
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:
[sourcecode lang="js" gist="91527"]
// go jQuery, go!
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
// 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
}
[/sourcecode]
Obs: se você utiliza outro navegador existem outras opções para executar "user scripts". Uma delas é o GreaseKit para WebKit (Safari).
Excelentes truques e dicas para jQuery
Posted by Dirceu | Filed under jquery, dicas, javascript, mobile, uncategorized
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 ...
Tabela de referência (cheatsheet) de jQuery para iPhone
Posted by Dirceu | Filed under jquery, docs, cheatsheet, iphone, jtouch, uncategorized
Ter uma tabela de referências em mãos, com as funções disponíveis na linguagem de programação ou framework que você está utilizando ajuda muito.
Manter essa tabela sempre aberta, e não em outra aba do navegador também é um bom truque, que evita o desvio de atenção.
A Colorcharge preparou uma versão especial para iPhone da documentação do jQuery. Com o nome de jTouch o projeto deixa as funções e formas de uso do jQuery na ponta do dedo (aha).
Quem não possui o aparelho da Apple, pode também imprimir uma versão pronta para o formato A4. Check this out.
Surpresas no jQuery 1.3
Posted by Dirceu | Filed under jquery, javascript, uncategorized
O primeiro beta da versão 1.3 do jQuery foi para o ar hoje.
Todas mudanças serão detalhadas no dia 14 de Janeiro, quando a versão sai de beta. De qualquer forma eu cai no código e posso comentar alguns pontos.
Uma boa novidade é que o jQuery não utiliza mais browser sniffing para seus métodos internos.
Isso torna o framework compatível com uma gama maior de browsers. Agora as funcionalidades especificas de cada browser são implementadas dependendo das funções disponíveis e não mais simplesmente da versão do navegador.
Nesse mesmo sentido, o código responsável pela busca de elementos foi totalmente reescrito e agora usa - quando possível - CSS3 Selectors nativo. Assim, em navegadores como o WebKit, quando a função $() for usada quem realmente fará o trabalho é a implementação nativa do navegador. Insanamente mais rápido, huh?
WebKit é o navegador do iPhone e de alguns aparelhos Nokia.
Como em mobile performance no JavaScript é uma preocupação, excelente movimentação do jQuery.
Ajude o pessoal do jQuery testando e reportando possíveis bugs.
jQuery Touch - Desenvolvimento Web para iPhone
Posted by Dirceu | Filed under jquery, phonegap, motherapp, dev, iphone, safari, uncategorized
Na última semana reuni vários novos skills de desenvolvimento para iPhone. Não foi fácil. O pessoal que desenvolve para a plataforma parece que não curte muito compartilhar o que sabe... foda...
Seguindo a dica do @evertonfraga fui dar uma brincada com um plugin do jQuery que facilita a diversão com as funções de touch (touchstart, touchend, touchmove) e com a API de gestures (gesturestart, gesturechange, gestureend): jQuery Touch.
O problema é que versão original tem algumas cagadas jumentais.
O cara chamava N! vezes a função $() do jQuery e isso deixava o Safari puto (digo, muito lento).
Uma das utilizades da "função $()" do jQuery é buscar um elemento na página.
Na mais rápida das hipóteses, a busca pode ser feita pelo id, tipo $('#content'), o que vai encadear uma chamada ao método document.getElementById('content') do navegador.
No WebKit/Safari essa função é bem rápida e chamar ela em um computador normal não deve deixar nada lento, mas meu amigo, no iPhone é outra história.
Arrumei rapidinho e agora tudo roda mais suave. Com o tempo devem surgir mais melhoras, mas você já pode se divertir também ...
Parsear HTML sem expressão regular
Posted by Dirceu | Filed under jquery, xml, hpricot, html, desenvolvimento-web, ruby, uncategorized
Então certo dia lá estava eu, tentando uma expressão regular para interpretar (ou parsear) HTML. Uma tarde inteira tentando "achar" um elemento do HTML e substituir por outro. Apanhando da Regex...
Levantei, bebi agua e reclamei alto da vida. O Marco me perguntou o motivo do momento de fúria. Expliquei e fui submetido a mais um daqueles momentos "como eu sou tão estupido" que está ficando comum comentar aqui.
"Usa o jQuery porra!"
Uma das principais coisas fodas do jQuery é como ele trata o DOM (Document Object Model) das páginas e como ele permite buscar pela arvore de elementos "desse tal" de DOM. Ele armazena tudo de maneira bem leve e consegue procurar absurdamente rápido dentro dos elementos do HTML.
E o melhor: o jQuery permite que você crie essa "arvore de elementos" enviando uma string que contenha HTML/xHTML (XML para ser mais exato).
O código fala mais que a histórinha:
[sourcecode lang="js" gist="14265"]
var els = $('
Historinha
');// pega elementos que estejam dentro de uma
var as1 = $('li.last a', els);
// pega elementos que estejam dentro de uma
var as2 = $('li a.nice', els);
[/sourcecode]
Para ...
jQuery é (quase) nativo do navegador
Posted by Dirceu | Filed under jquery, programacao, javascript, uncategorized
Eu adoro o jQuery. Não tem um dia que não brinque um pouco com ele.
É claro que ele não é a solução para a pobreza mundial, nem sequer para a tristeza dos emos. Como tudo nessa vida de softwares, é importante saber quando vale a pena adicionar à porrada de linhas de código que o jQuery adiciona ao carregamento da página, quando vale a pena usar algo que encaixa melhor no problema.
De qualquer forma eu tenho um motivo muito bom para você esquecer o discurso de quem é "anti" qualquer coisa, como o jQuery...
jQuery agora é algo que está no navegador
Há algum tempo atrás, o Google anunciou que hospedaria algumas bibliotecas de JavaScript, tais como jQuery; prototype; script.aculo.us; MooTools; dojo, apoiando os desenvolvedores a linkarem a parada diretamente de lá. A idéia é que com muitos desenvolvedores usando as bibliotecas que estão hospedadas no mesmo lugar, o usuário muito provavelmente terá uma copia da local em cache sempre.
O bom é que funcionou! O criador do jQuery acabou de falar: "Bom - A conta do jQuery na Amazon S3 ficou 1/3 mais barata que mês passado. As pessoas devem estar usando ...
Analise de performance para jQuery
Posted by Dirceu | Filed under jquery, javascript, dev, uncategorized
John Resig criador do jQuery começou outro projeto interessante: um profiler para aplicações que utilizam o jQuery.
A intenção do projeto é criar uma maneira para se analisar a performance da aplicação e então optimizar os métodos com maior custo, mas acredito que saber quais funções foram utilizadas pode também ser útil para filtrar funções não utilizadas na biblioteca e então diminuir o tempo de carregamento e consumo de banda em sites que fazem uso desse incrível framework Javascript.
This evening I was playing around with the idea of profiling jQuery applications - trying to find a convenient way to completely analyze all the code that is being executed in your application. Deep Profiling jQuery Apps