Klaus Paiva

Dica rápida pra quem usa a biblioteca jQuery no seu dia-a-dia.

A extensão FireQuery se acopla ao já famoso Firebug e adiciona uma série de novos recursos, todos pensados em facilitar a vida de quem usa jQuery.

Entre os vários recursos vale destacar a listagem dos eventos que estão associados a um elemento na página. Isso é extremamente útil quando você precisa alterar códigos feitos por outras pessoas, ou mesmo um código seu que você já nem lembra mais como ele funciona.

Dica enviada pelo meu colega de trabalho Paulo Lomanto, que é totalmente Web 1.0 e não tem Twitter, nem blog, nem nada pra eu linkar aqui.

Todo mundo que já mexeu em um arquivo CSS "legado" vai saber do que estou falando: adicionar novas regras a um arquivo CSS é fácil, difícil é remover as regras que não são mais usadas.

A dúvida é sempre a mesma: "será que não tem nenhuma 'tela' que usa essas regras?". E como a resposta nem sempre é fácil de se descobrir, deixo aqui uma dica de ferramenta que pode ajudar nessa tarefa.

Trata-se da extensão de Firefox de nome "CSS Usage". O que ela faz, conforme o nome já sugere, é identificar quais regras na folha de estilo de um site que estão em uso e quais não estão. Com base nessas informações você pode reduzir seu arquivo CSS sem medo!

Após instalar a extensão, basta abrir o Firebug e você verá uma aba "CSS Usage". Entrando nela você pode iniciar o processo e verificar a utilização dos seletores. Depois disso é só fazer a limpeza, conforme você achar melhor.

Para que o efeito da extensão seja o esperado, é importante que você navegue no máximo de páginas possíveis de seu site para garantir que todas as "telas" serão testadas de acordo com as regras na sua folha de estilos. E se você acha que dá muito trabalho ter de navegar em todas as páginas sempre que quiser limpar seu CSS, acho que é hora de você conhecer o Selenium!

Aqui tem uma figura de exemplo com os resultados da extensão obtidos após uma navegação no Taperás.

Via Smashing Magazine no Twitter.

No final do mês passado eu coloquei aqui no blog uma nota sobre o lançamento do Firefox 3.5 e as novidades trazidas por essa versão.

Fiz uma leitura mais aprofundada nos textos e vi um recurso bastante interessante chamado Web Workers. Segundo a descrição do MDC, os Web Workers permitem a execução de códigos de forma multi-thread dentro de aplicações web e sites.

Quem escreve código Javascript hoje em dia sabe que não é raro o navegador "congelar" durante um código que exige um pouco mais de processamento. Existem algumas formas de evitar esse "congelamento" sim... mas certamente os Web Workers elevam a resolução deste problema a outro nível de soluções e possibilidades.

Com os Web Workers você pode iniciar um código que será executado em paralelo ao código Javascript da sua página. Esse código executado pelo "worker" trabalha num ambiente diferente, sem acesso à página pai e, principalmente, sem acesso ao DOM. A única forma de comunicação entre a página pai e um processo "worker" se dá através de mensagens.

Como eu estava interessado em verificar se esses Web Workers realmente trabalham em paralelo , fiz uma página que faz esse teste. Nela, há duas versões de um mesmo código que calcula a sequência (ou número) de Fibonacci. Além disso, na página há uma animação com jQuery rodando, o que vai permitir perceber claramente se o navegador vai ou não "congelar".

Veja aqui o teste com Web Workers. (para o Firefox só funciona na versão 3.5)

Como você pode ver pelo teste acima, realmente o código roda em background, sem afetar a página renderizada.

Vale ressaltar que nos testes eu exibo também o tempo em milissegundos que a operação levou. Fazendo os testes aqui no meu computador, a versão com Web Workers leva em média 1600 ms, enquanto a versão "normal" leva em média 800 ms. O dobro de tempo mas é algo a se ponderar se lembrarmos que a versão "normal" trava totalmente o navegador enquanto o cálculo é feito. (interessante... rodando o teste local, a versão com "worker" executa bem mais rápido do que a versão online aqui no blog, talvez pelo tempo de download do "worker.js"?)

Update: na versão do código de testes que eu fiz ontem, ao clicar no botão para calcular o número de Fibonacci, o código do "worker.js" era baixado antes do cálculo em si ser executado. Isso causava uma grande diferença entre o teste rodando local e o teste rodando online (óbvio hehe). Fiz uma modificação hoje para deixar o "worker.js" já carregado (assim como os demais arquivos ".js").

E como comentário final: tentei deixar os códigos tão similares quanto possível para não afetar significativamente os resultados em favor de uma ou outra forma de cálculo. Sugestões e/ou correções são bem-vindas.

Referências

developer.mozilla.org: Using web workers

hacks.mozilla.org: using web workers: working smarter, not harder

ejohn.org: Computing with JavaScript Web Workers

Hoje saiu a versão 3.5 do Firefox. A lista de novidades é bastante extensa e empolgante. Dentre as novidades está o suporte para a tag <video>, para exibição nativa de vídeos num documento HTML.

Se você quiser ver uma versão, digamos, alto nível das novidades, acesse esta página.

Se você está interessado em ver as novidades da versão 3.5 para nós, desenvolvedores, veja esta página.

Fica a dica!