Uma coisa que tenho notado é que todas as pessoas que olham na minha tela quando estou com a régua de pixels aberta é o espanto e a admiração. Eu já perdi as contas de quantas vezes escutei: “Depois você me passa essa réguinha…”

Ela é super útil para designers, programadores e qualquer pessoa que trabalhe diretamente com internet. Quem já não precisou saber o tamanho de algum banner, largura de uma imagem e até mesmo o tamanho de um site e teve dificuldades?

Bem, a régua que uso no Windows é a JR Screen Ruler. O arquivo pra download é pequenio, o software é gratuito e é fácil de instalar.

Caso você tenha alguma dica valiosa que influencie na produtividade da mesma forma que a régua faz, envie para nós!

A utilização de JavaScript cross-site não para de crescer. Hoje é difícil você acessar algum grande site que não tenha alguma chamada para um código que esteja hospedado em outro domínio.

Isso acontece porque os sites querem aumentar o número de recursos oferecidos para seus visitantes, prendendo a atenção com mais ofertas e possivelmente ganhar algum dinheiro. Isso tudo é feito colocando conteúdos, publicidades e ofertas que vem de sites parceiros.

Para fazer isso, os desenvolvedores Web dos sites que são fornecedores usam um jeito bem prático, de fácil manutenção e de fácil instalação para os parceiros. Eles produzem um arquivo JavaScript que fica hospedado em sua própria infra-estrutura e solicitam àqueles que forem usar seu código que simplesmente acrescentem uma tag em seu site que aponte para esse arquivo.

Para exemplificar de maneira fácil, esta página que você está lendo tem uma chamada para o ranking do BlogBlogs na coluna da direita. Toda vez que um visitante entra aqui, além do meu servidor de hospedagem ter que responder para montar toda a página, o servidor do BlogBlogs também recebe um pedido e tem que entregar o código responsável em montar o box de ranking.

Para o visitante, isso é péssimo, pois toda vez que o navegador começa a renderizar uma página e encontra um arquivo JavaScript externo, ele para de renderizar e espera o arquivo chegar para poder ser interpretado.

O engine dos navegadores assume que o código externo pode mudar o layout do site atual ou simplesmente interferir na renderização de alguma forma e, de forma correta, ele espera o código chegar, interpreta e continua com a renderização.

E como fazer para resolver esse problema de carregamento? Bem, existem diversas formas, algumas pouco conhecidas e outras que exigem apenas o bom senso de quem desenvolve códigos que serão usados em diversos sites.

Umas das formas de contornar o problema de espera do browser é simples. Basta você acrescentar um atributo na tag JavaScript que aponta para o código que está em outro domínio. Esse atributo é o defer=”defer”. Apesar de ser bem simples, isso tem que ser feito com muita consciência.

O resultado do uso desse atributo, dependendo do que o código externo faz em sua página, pode ser catastrófico, principalmente se o código externo usar o document.write. Como ele informa para o engine do navegador que ele não precisa esperar o código chegar para continuar renderizando a página, no final da renderização o código externo pode quebrar completamente seu site, substituindo todo o HTML já carregado.

Umas das soluções que considero boa mas não vejo muita gente usando é trocar o uso do document.write por innerHTML. A diferença é que daria um pouco mais de trabalho para os parceiros. Como seria?

Pegando esse exemplo do box de ranking. Ao invés de você colocar uma tag JavaScript no lugar onde quer que o box apareça no seu site, você colocaria apenas um elemento div com id=”ranking_blogblogs”. No final do seu código você colocaria a chamada para o arquivo externo com o atributo defer=”defer”. Esse código, ao invés de usar document.write, usaria documnet.getElementByID(”ranking_blogblogs”).innerHTML = “código HTML da box”.

Desta forma, o carregamento do seu site não ía ser prejudicado de nenhuma forma pelo conteúdo externo. O tempo de carregamento até os visitantes enxergarem alguma coisa certamente dimuniria e todos ficariam mais contentes. A única coisa que mudaria de fato é que o box, que é o exemplo em questão, não seria uma das primeiras coisas a aparecer no seu site pois, a ordem de carregamento das coisas foi alterada.

Nada mais justo não? Carregar primeiro seu conteúdo depois o que vem de fora. Para registrar, tenho visto isso acontecendo com frequência com link patrocinados, barras de shopping, widgets, rankings de blogs entre outros.

Conclusão, quando você for desenvolver algo que será usado em um grande número de sites, considere que se seu servidor demorar pra responder, você irá prejudicar seus parceiros. Se este for seu caso, reescreva seu código.