O que é CDN e porque todo site deveria usar

CDN é uma abreviação de Content Delivery Network (meio que uma rede de fornecimento de conteúdo em português). Serve basicamente pra distribuir arquivos estáticos (como fotos, arquivos css, javascript, xml, flash, etc) de forma mais rápida e deixar com que o servidor web se preocupe apenas em servir o .html, enquanto a CDN replica os arquivos por uma rede de servidores distribuída pelo mundo todo.

Existem 5 grandes vantagens de se usar CDN.

1 – Carregamento simultâneo de mais arquivos.
Os browsers em média abrem até 4 conexões simultâneas pra cada domínio. Normalmente, as pessoas criam um subdominio pra servir os arquivos estáticos como cdn.dominio.com ou static.dominio.com e com isso, o navegador passa a fazer 8 conexões simultâneas pra carregar os arquivos do servidor.

2 – Ping mais rápido
As CDNs, replicam o conteúdo pelo mundo todo. Mesmo se seu servidor estiver no Brasil, se alguém na Europa ver o seu site, por exemplo, ao invés do usuário acessar os arquivos estáticos aqui no Brasil, vai baixar de um dos servidores da CDN que está mais próximo, lá na Europa mesmo. A Akamai, uma das empresas pioneiras nisso, tem milhares de servidores espalhados no mundo todo.

3 – Arquivos reduzidos dinamicamente
Algumas CDNs como o pagespeed do Google ou o CloudFlare, possuem funções pra minificar arquivos. Ou seja, retirar comentários, quebras de linha e espaços em branco de CSS e Javascript. Também é possível diminuir o tamanho das imagens (quase) sem perder qualidade. O pagespeed é mestre nisso.

4 – Alívio pro seu servidor
Ao invés do seu servidor web ter que ser preocupar em servir uma página por completo (seja ele Apache, IIS, Nginx ou seja lá o que for), agora ele vai ter que se preocupar em servir somente em gerar e servir o html. O número de processos abertos pelo servidor pode cair em mais de 90%.

5 – Custo baixo
O preço de uma CDN hoje é muito barato, Rackspace e Amazon cobram cerca de U$0.15 por gigabyte transferido. Mas existem CDNs gratuitas como o próprio pagespeed do Google ou o CloudFlare.

Sobre o bug de vazamento de memória do Firefox

Eu uso Firefox como browser default desde 2005 quando a Mozilla Foundation lançou a versão 1.5 do navegador, que na época tinha como principal rival o Internet Explorer 6, da Microsoft, que chegou a atingir 99% do market share mundial dois anos atrás, em 2003.

A ideia do navegador aceitar extensões desenvolvidas por qualquer programador fez o Firefox crescer rápido até que em 2006, a Microsoft que havia decidido não mexer mais em seu browser, anunciou que iria trabalhar numa nova versão do navegador, o Internet Explorer 7. A Mozilla comemorou esse dia afinal, se eles chegaram ao ponto de incomodar a gigante Microsoft, significava que eles estavam indo muito bem, mandaram até um bolo pra eles.

Com as extensões, muitas possibilidades foram agregadas no browser, aplicações que mandavam email de forma mais simples ou que possibilitavam pausar downloads diretamente do navegador ou então baixava vídeos do Youtube e já convertia o .flv pra uma extensão diferente, entre outras que usamos até hoje como o Firebug, Web Developer Toolbar, HTML Validator, etc.

Só que todas essas novas features tiveram um peso: a memória RAM, que vaza até hoje como água na peneira enquanto usamos o Firefox. Veio a versão 2 que prometia resolver isso e #fail, veio a versão 3, 3.5, 4, 4.1, 5, 6 e 7 (entre outras intermediárias) e todas também levaram um big #fail quando o assunto é gerenciamento de Memória RAM. Veio então o Google Chrome há alguns anos atrás, que também possibilitava múltiplas abas e centenas de extensões, imaginávamos outro problema de RAM, mas nada disso, fizeram um bom trabalho.

E como funciona o gerenciamento de memória do Firefox?

É mais ou menos assim:

Como funciona o gerenciamento de memória do Firefox

E o que dá pra fazer?

Muitas pessoas estão “migrando” pro Chrome mas apesar disso, pra mim, o Firefox ainda é o melhor navegador pra desenvolvedor de interface.

Desinstalar extensões que não usamos muito, pode aliviar um pouco. E existe uma extensão também chamada “Memory Restart” que avisa quantos megas (ou gigas) o Firefox está usando, e quando começa a crescer muito, a extensão avisa que está na hora de reiniciar o browser.

De resto, só podemos aguardar a Mozilla Foundation melhorar o principal produto dela, dizem que no Firefox 8 vai estar melhor (assim como falavam no Firefox 2). Até lá, o Firefox continua assim:

Gerenciador de Tarefas do Windows com Firefox usando 1.3 gigas de RAM

Entendendo melhor o console do firebug

O console do firebug é uma poderosa ferramenta que além de mostrar erros de JavaScript, erros 404 e todos os detalhes de uma requisição ajax, é capaz de interagir com o próprio firebug, inspecionando os nodes HTML.

Mas o uso maior do console, é pra debugar javascript mesmo.

Vou listar alguns comandos, funcionam tanto no Firebug pro Firefox, quando no “Developer Tools” do Google Chrome

console.log ou console.debug

Sintaxe: console.log(variaveis);
Serve para: debugar variáveis no javascript ao invés de colocar 300 alerts

Até hoje, nunca descobri a diferença (se é que existe) entre os dois métodos.
Um detalhe que pouca gente sabe, é que é possível passar infinitos argumentos nessa função.

var nome = 'Danilo';
var sobrenome = 'Augusto';
var nome_completo = nome+' '+sobrenome;
console.log(nome_completo);
// Danilo Augusto
console.log('nome:',nome);
// nome: Danilo
console.log('nome:',nome,' e sobrenome: ',sobrenome);
// nome: Danilo e sobrenome: Augusto

console.dir

Sintaxe: console.dir(objeto);
Serve para: debugar um objeto, mostrando todos os childs dele

var posicoes = {
    left:10,
    top:50
}
console.dir(posicoes);
// left	10
// top 50

Ou então:

console.dir(document.getElementById(‘menu’));

retorna tudo sobre o elemento:

copy

Sintaxe: copy(variavel);
Serve para: copiar uma variável para a área de transferência do sistema operacional (funciona como um ctrl+c)

copy(document.getElementById('erro').innerHTML)

$0

Sintaxe: $0
Serve para: retornar o objeto selecionado/inspecionado no próprio firebug.

$0.style.display = 'none';

$$

Sintaxe: $$(expressao)
Serve para: retornar um ou mais objetos através de um seletor.

Funciona como o $ do jQuery. Então, é ideal pra testar em sites que não usam jQuery (sacou? sacou?).

$$('#footer').style.display = 'none';

inspect

Sintaxe: inspect(elemento)
Serve para: inspecionar no próprio firebug um elemento HTML.

Funciona como o $ do jQuery. Então, é ideal pra testar em sites que não usam jQuery (sacou? sacou?).

inspect($$('#footer'));

Acho interessante quem gostou do assunto dar uma olhada num vídeo do Paul Irish em que ele demonstra essas e outras funções do console do firebug.

Firefox 3.5 Beta 4 executa Javascript mais rápido ainda

Primeiro devo admitir, dei uma sumida, caiu o número de posts aqui, mas tá dificil conseguir tempo, ultimamente, além do trabalho, estou fazendo freela e estudando e meio sem criatividade pra postar, espero que seja breve.

No post de hoje vou falar sobre duas coisas que me ajudam muito na minha profissão, Firefox e Javascript.

Ontem ví uma notícia, que a versão 3.5 Beta 4 do Firefox (que está demorando um tantão pra ser lançada), tem um algoritmo que executa Javascript 19% mais rápido do que a versão Beta 3, esta que também já é mais rápida que a versão atual do Firefox. Isso é bom pra quem é programador de interface, e principalmente pro usuário.

Comecei a usar o Firefox em meados de 2005, achei legal porque “tinha abas”. Na época eu era programador back end, e como a maioria, pouco me importava se meus sites rodavam em outro browser ou não. De lá pra cá eu, as empresas, as agências, os clientes, os navegadores, os sites e até os usuários mudaram. Hoje temos (todos nós) o conceito de webstandards muito forte, e hoje os próprios usuários também são mais exigentes… normalmente temos diversas opções pra qualquer tipo de serviço web, então se um site não funcionou no navegador do usuário, ele não muda de navegador, muda de site… procura por outro serviço que faz a mesma coisa, é claro que não serve pra tudo (como sites de bancos, malditos).

Comecei a programar em Javascript pois detestava sites em flash, e comecei a ver que em algumas aplicações simples, dava pra fazer o mesmo efeito em Javascript.

E depois, quando “descobri” o firebug, ficou tudo mais fácil.

Mais uma vez o Firefox contribui diretamente e incentiva o uso de Firefox pra desenvolvimento de interação.

Além do mais, até nas extensões do Firefox (como GreaseMonkey e Ubiquity) é possível fazer coisas muito interessantes usando somente javascript.

Enfim, usem firefox… =)

[]s