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.

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.

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

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!

Abaixo está o vídeo com a apresentação feita (aproximadamente 1h) e na sequência algumas notas e comentários sobre os temas apresentados.

Abas separadas por processos

Este é um fato que certamente você deve conhecer. Você está lá navegando tranquilamente com uma dezena (ou mais =) de abas abertas… Daí que você resolve acessar um site com um Javascript mal escrito, com uma animação em que o Flash Player se revolta e lá foi, o navegador inteiro congela e não resta outra opção senão matar o processo. Claro que a maioria dos navegadores traz opções para restaurar a seção anterior mas não deixa de ser bastante incômodo.

A separação das abas por processos permitiria matar (encerrar) apenas a aba problemática, mantendo as outras abas isoladas. Isso por si só já seria uma grande vantagem da separação por abas mas ainda há uma segunda vantagem também bastante interessante! =)

Com a separação em diversos processos o sistema operacional pode gerenciar melhor o processamento, alocando mais recursos para as partes onde é realmente necessário, sem congelar as outras partes do navegador.

Vale notar que essa divisão em processos distintos causa um aumento do consumo do memória sim mas, como a quantidade de memória disponível nos PCs atuais (mesmo para os “PCs de prateleira”) está deixando de ser um gargalo para o desempenho dos computadores, é de se esperar que os programas passem a fazer alocações maiores de memória. Mais ou menos como o princípio da lei da oferta e da demanda.

Linearização das instruções de funções

O termo em inglês acho que permite um entendimento melhor: “‘function inlining“. Essa é uma característica que, por exemplo, C++ possui. Usando essa propriedade o compilador pode trocar a chamada de uma função pelo corpo da função, fazendo com que a execução das instruções ocorra sem o overhead de chamar uma função.

Além disso, pelo código exibido nos slides parece que, diferentemente do C++, você não precisa dar uma dica para o compilador na hora de escrever a função indicando que a função é candidata ao “inlining“.

Rede

Aqui vale destacar o aumento do número de downloads simultâneos para um mesmo domínio. Com o IE 7 ainda temos o limite de dois downloads mas, felizmente o IE 8 (beta) já tratá um limite três vezes maior, de seis downloads simultâneos para o mesmo domínio. A última versão dos demais navegadores já possui um valor de seis ou sete downloads.

Outro recurso bem legal, e este é uma boa ideia da Microsoft, é o atributo “defer” para a tag <script>. Esse atributo indica para o navegador que ele pode continuar a renderizar a página sem esperar o arquivo Javascript referenciado carregar. O atributo já funcionava no IE e vai funcionar nas novas versões do Firefox e Opera.

window.postMessage

O método window.postMessage me chamou a atenção. Com ele será possível a comunicação entre páginas de domínios distintos de forma bem simples. O princípio é o seguinte: a página remetente da mensagem irá tentar enviar a mensagem para, por exemplo, um iframe destinatário. Este iframe irá verificar se o remetente é alguém que ele conhece para então aceitar a mensagem e executar alguma ação.

A página que receberá as mensagens pode “ouvir” os eventos de mensagens usando o tradicional método addEventListener. Verificando a propriedade origin, a página receptora pode descobrir pelo domínio se a mensagem está vindo de um destinatário conhecido ou não.

Ajax entre domínios diferentes

Aquele sonho de fazer requisições Ajax entre os N domínios da sua aplicação está prestes a se realizar.

Adicionando um cabeçalho (header) na resposta da requisição Ajax é possível especificar uma origem (além do próprio domínio) de onde aquela requisição pode ser atendida com segurança. O nome deste cabeçalho é “Access-Control-Allow-Origin” e está melhor descrito nesta página.

document.querySelectorAll

Se você já usou a jQuery sabe como é prático encontrar os elementos da página usando a sintaxe de CSS. Melhor ainda se encontrar esses elementos usando a sintaxe de CSS seja possível de ser feito usando um método nativo do navegador. É isso que o método document.querySelectorAll permitirá. O melhor de tudo é que as próximas versões do IE, Firefox, Opera e Safari já trarão este método disponível.

Visual e CSS

Adoradas por 10 em cada 10 webdesigners, as bordas redondas vieram pra ficar. =) Apesar de os navegadores trazerem implementações com nomes diferentes, todas as implementações funcionam bem. Ou seja, juntando essas propriedades: -moz-border-radius, -webkit-border-radius, -khtml-border-radius e border-radius as bordas redondas saem com facilidade.

Sombras também estarão disponíveis. Nesta página há vários exemplos de uso da propriedade text-shadow.

Outro recurso que certamente vai ser muito usado (e provavelmente muito mal usado também ) é a possibilidade de se usar fontes personalizadas na página. Por fontes personalizadas entenda fontes que não estão instaladas na sua máquina. Coisa que já era possível de se fazer no Flash, agora também com CSS.

Além disso, há uma série de animações que estarão disponíveis, por enquanto, para Firefox e Safari.

Desenho

O objeto Canvas permite a renderização de elementos numa superfície 2D usando retas, curvas, arcos e/ou círculos. No MDC tem um tutorial bem bacana sobre Canvas. Até me arrisquei a fazer uma “arte”: =)

// <canvas id="draw-area" width="150" height="150"></canvas> no HTML
var canvas = document.getElementById( "draw-area" );
if( !canvas.getContext )
{
  return;
}
var context = canvas.getContext( "2d" );

context.beginPath();
var side = 150;
var offset = -4;
var i = 0;
while( true )
{
  if( i % 4 == 0 )
  {
    var x = offset + 4;
    context.lineTo( x, offset );
    offset = x;
    if( offset + 4 > 78 ) // hard-coded mesmo ;P
    {
      break;
    }
  }
  else if( i % 4 == 1 )
  {
    context.lineTo( offset, side - offset );
  }
  else if( i % 4 == 2 )
  {
    context.lineTo( side - offset, side - offset );
  }
  else if( i % 4 == 3 )
  {
    context.lineTo( side - offset, offset );
  }
  i++;
}
//context.closePath();
context.stroke();

Outro detalhe importante é que o Canvas permitirá também a inserção de vídeos dentro dele.

JSON nativo

Atualmente, ao receber uma string em JSON você precisa usar um eval para recuperar o objeto original. O eval é conhecidamente lento, até pelo fato de ser um método genérico, mas era a melhor saída para se ter acesso às informações contidas na string JSON mas, isso vai mudar!

Agora teremos métodos nativos para codificação e decodificação no formato JSON. A única dúvida que me restou é sobre o nome dos métodos. Nos slides os métodos se chamam encode e decode, já na página do MDC e no wiki do ECMAScript os métodos se chamam parse e stringify, respectivamente.

E por fim…

… fico na torcida pra que as novas versões desses navegadores tenham uma rápida adoção por parte dos usuários.

Claro, depende do ponto de vista. =) Mas em termos gerais eu acredito que essa nova edição da “guerra dos browsers” é muito bem-vinda e benéfica.

Como interfaces do sistema operacional do futuro, penso que quanto mais os navegadores evoluírem, melhor. E nada melhor que concorrência para estimular o desenvolvimento e a inovação desse tipo de aplicativo.

Com o lançamento do Google Chrome, uma tema bastante interessante (ao menos pra mim) passou a ser mais discutido: performance de Javascript. Quem desenvolve interfaces web hoje sabe que não raro são as vezes em que você acaba com o navegador bastante lento quando faz operações com os elementos (DOM) existentes na tela, isso pra citar apenas um dos casos.

E o que mais me deixa positivo sobre esse fato é: até a Microsoft está preocupada em melhorar o Internet Explorer 8 para não ficar em desvantagem nessa guerra dos browsers.

Com browsers melhores, mais rápidos e mais ricos em termos de recursos, haverá toda uma nova gama de possibilidades para desenvolvimento web. E vale dizer que isso não é bom só para nós, desenvolvedores, mas também para os usuários de Internet como um todo, que terão aplicações mais ricas, mais rápidas e mais úteis, tudo “independente” da plataforma do sistema operacional.

E enquanto a guerra dos browsers se mantiver dentro dos moldes atuais, pode ter certeza, só temos a ganhar. =)

Pensando nisso eu resolvi fazer uma breve compilação dessas informações disponíveis no Google Analytics e publicar aqui. Minha idéia com isso é acompanhar essas informações e deixar aqui disponível para quem mais possa se interessar.

Bom, chega de blábláblá e vamos ao que interessa. Primeiro a estatísticas sobre navegadores: (você pode clicar nas imagens para visualizá-las em tamanho real)

Estatísticas de navegadores – Taperás – Agosto de 2008

Como já era de se esperar, o Internet Explorer (IE) domina mais de 80% dos acessos, seguido pelo Firefox com quase 20%. E se tratando do IE é bom saber as versões usadas nos acessos.

Estatísticas de navegadores, versões do IE – Taperás – Agosto de 2008

Infelizmente, o IE 7 responde apenas por metade dos acessos e o, horrível, IE 6 é responsável pela outra metade.

Outro parâmetro interessante é a resolução de tela:

Estatísticas de resolução de tela – Taperás – Agosto de 2008

Mesmo o Taperás sendo um site acessado por um público non-geek, a resolução 1024×768 é responsável por quase 60% dos acessos. E enquanto eu escrevia este texto fiquei pensando, qual será a resolução que o iPhone reporta? =)

Eu estava lendo o doggdot.us (acho…) hoje de manhã e vi uma extensão bacana: Personas for Firefox, ela permite que você altere o visual do Firefox com um simples clique no ícone localizado no canto inferior esquerdo do programa.

Personalizando o visual de seu Firefox facilmente

Acima tem um screenshot do meu Firefox no trabalho, usando o visual “Niagra Falls”.

É uma extensão bem bacana também para apresentar pros amigos, aqueles que usam o Firefox como ferramenta de navegação e diversão.

Update: o tema Paper também é muito legal, estou usando ele agora!

Eu estava procurando um fone de ouvido novo para usar aqui no trabalho. Fiz umas pesquisas e não achei o modelo que eu queria disponível no Submarino porém, achei-o na Americanas.

Como meu problema de pagamento (relatado acima) havia acontecido há mais de um ano, resolvi dar uma nova chance à Americanas.

A compra

No processo de compra, para minha surpresa, não houve nenhum erro e tudo ocorreu conforme o esperado. Fiz o pagamento com cartão de crédito e logo depois o pagamento foi confirmado no meu e-mail.

Fiz a compra ontem e resolvi dar uma olhada hoje para ver se meu fone já havia sido postado. Foi aí que a Americanas me desapontou mais uma vez.

A visualização do status do pedido

Lá vou eu, bem intencionado e humorado, acessar a área “Meus pedidos”. Faço meu login com sucesso e estou no “Painel de Controle”.

Clico em “Últimos Pedidos” para, assim espero, visualizar meus últimos pedidos. Para minha surpresa, vejo a seguinte tela: (clique para ampliar)

Administração da Americanas.com com problemas no Firefox

Como trabalho com o Ubuntu, acessei a página com o Firefox. Imaginei que algum CSS tinha dado problema na hora de carregar, resolvi navegar por mais alguns links e vi que alguns funcionavam, outros não.

Olhei para o lado e vi um PC rodando Windows dando sopa, resolvi acessar a página e ver o que acontecia. Acho que você já deve imaginar, certo?

Administração da Americanas.com plenamente funcional no IE

Pelo visto, para as telas que geram receita é importante que elas funcionem no Firefox, depois que a compra já foi feita, nem tanto…

Um caso bastante típico é quando usamos float apenas para poder colocar altura, largura ou margens verticais num elemento. Como o float força um display: block, podemos aplicar height, width e padding (vertical) neste elemento.

Num segundo cenário, já encontrei casos em que tenho um elemento de largura variável e não previsível e, que tenho também de deixá-lo centralizado na página ou em relação a um outro elemento pai. Este é um dos casos onde precisamos centralizar floats.

Eu já conhecia esta técnica aqui do Stu Nicholls em seu site CSSplay. Já usei este método e sei que ele funciona bem. Tudo bem que ele usa uma tag del (pode ser uma ins também) sem necessidade… mas, com comentários condicionais podemos esconder ela dos navegadores atualizados e deixá-la visível apenas para o Internet Explorer (sim, como já era de se imaginar, a tag é necessária apenas para o IE).

Lendo o doggdot.us hoje, achei uma referência para outro artigo que descreve uma segunda técnica, mais simples e objetiva. Testei o exemplo disponível e funcionou no Firefox, IE 7 e 6. Apenas no IE 7 é que surgiu a barra de rolagem horizontal. Nada muito complicado de se resolver.

O IE 7 tem um bug (certo, muitos bugs, mas vamos falar só desse) que um elemento pai com overflow: hidden e um filho com position: relative, faz com que o efeito do overflow não funcione. Se você adicionar position: relative no pai também, terá o resultado esperado. Acabei de deixar um comentário ao autor sobre esta correção. Veja mais sobre este bug.

Ficam aí as dicas para quando você precisa centralizar elementos com float ou se deparar com este bug do IE 7, bom proveito! =)

Referências

Centralizando floats – Método simples

Centralizando floats – Método do Stu Nicholls

Comentários condicionais (conditional comments)

Bug do IE 7 com overflow e position