TidBits

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:

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:

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.

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

Programador de interface, programador front end, programador html, programador javascript e jQuery, etc etc… enfim… a profissão é tão nova que não existe um nome pra ela … mas se trata do cara que recebe o PSD e faz um site, através de (x)html, css, javascript, flash, xml e o que mais precisar.

Aos poucos, a profissão vem se tornando excencial (só aqui na AgênciaClick somos em uns 15 mais ou menos). E com a popularização dos padrões web, mundo a fora já é uma profissão reconhecida, em Londres, os “front end developers” ganham em média 4 mil libras mensais, e alguns profissionais mais “seniors” chegam a receber salários de 8 mil libras por mês.

Porém no Brasil, agora que o mercado está sub-dividindo os setores no desenvolvimento web, o que é bom pois cada um se especializa naquilo que gosta mais de fazer. Não dá pra ninguém ser senior em .Net e html / css ao mesmo tempo. E vejo que começam a surgir os primeiros passos pra essa nova ramificação, a prova disso é que foi lançado em Recife um curso de Pós Graduação para programadores de interface, o curso chamado de Front-End Engineering & Design – Desenvolvimento de Sistemas Avançados.

Veja a descrição da entidade sobre o que é um programador front end:

“O Front-End Engineer & Designer é um profissional altamente especializado com foco em interfaces de sistemas para internet, dispositivos móveis entre outros. No desenvolvimento das suas atividades o Front-end entende as necessidades de designers, programadores e usuários.”

O curso vai ser ministrado no Núcleo de Pós Graduação Marista, tem duração de 400 horas aulas e custa 7 mil reais ( um valor normal pra uma pós graduação ).

A segunda notícia é que a Deitel lançou um livro aparentemente interessante, Ajax, Rich Internet Applications e desenvolvimento Web para programadores , entre os temas discutidos estão os padrões XHTML, CSS e JavaScript; lições sobre o desenvolvimento avançado do lado do cliente.

Por último, e não menos interessante, a última notícia boa é que o Firefox 3 é o browser mais utilizado na Europa, ultrapassando o IE7 (que teve uma queda com o lançamento do IE8, o que também é uma boa notícia). Agradeço e torço muito pro Firefox ir crescendo cada vez mais. Afinal, o que seríamos de nós sem o nosso firebug, html validator, web developer toolbar, entre outras extensões?

[]s