A variável "Mochileiro das Galáxias" no javascript

O termo é novo, mas o conceito é antigo. Sabe aquela variável que você cria no javascript, global, que você acessa em qualquer função, em qualquer js? Eis o seu mochileiro da galáxia!

O conceito é simples, e foi batizado por autores de livros sobre Java usando o famoso livro Guia do Mochileiro da Galáxia; no livro, o protagonista descobre que seu melhor amigo é um extraterrestre e logo após, a Terra é destruída; a partir daí, começa uma grande viagem por várias galáxias. Na programação Java, é comum ver desenvolvedores criarem objetos (esqueça o conceito de variável por enquanto) que viajam entre diversas camadas da aplicação, funcionando como faz-tudo, passando por cima de qualquer escopo e, muitas vezes, tornando impossível descobrir quem está realmente alterando o quê no seu programa.
* a primeira vez que vi esse termo foi num artigo da revista Mundo Java, exposto em partes aqui.

 Agora, imagine: se em Java que a orientação a objetos é algo inerente ao desenvolvimento, imagine a dor-de-cabeça que tais variáveis (podem ser objetos também) podem causar no javascript, onde o desenvolvedor pode simplesmente implementar da forma que quiser – e, tenham certeza, a forma mais rápida é sempre aquela que dá mais brecha para problemas bizarros.
E digo isso por experiência própria: quantas vezes eu não criei uma variável global no javascript, e meses depois ia lá implementar (ou alguém da equipe ia pegar meu código) algo e do nada coisas começavam a quebrar… até descobrir que eu havia criado 2 variáveis globais!!!

Certamente a orientação a objetos ajuda -e muito – a diminuir essa questão. Para quem desenvolve e acha pataquada, dê um passo atrás e procure pelos benefícios da mesma. Existe claro a curva de aprendizado, há novos paradigmas para quem vêm da programação estruturada, é mais complexa, mas vale a pena a longo prazo.
Ao mesmo tempo, orientação a objetos não é tudo. Se fosse, implementações em Java não teriam tal problema.

Aqui vão algumas sugestões (e que podem valer para outras linguagens):

  • usar o mínimo possível de variáveis globais
  • dar nomes que façam sentido às suas variáveis, isso diminui o problema de você criar uma variável global com nomes iguais (como javascript é interpretado e não compilado, não existe uma verificação de variáveis sendo instanciadas com o mesmo nome, o que não ocorre no primeiro caso)
  • sempre que for criar uma variável, usar a diretiva var. Por exemplo, quando for num laço for usar um contador, fazer:
        for(var i=0; i<array.length; i++)
    

    Porque? Assim você garante que sua variável i comece sempre com o valor igual a 0 (vai por mim, já passei por muitos perrengues por ter variáveis em contadores não inicializadas)

  • documentar as funções/classes – o que elas fazem, quais e de onde vêm os parâmetros utilizados, etc…; isso ajuda muito você a, no futuro, entender porque aquela variável global está fazendo ali e de onde ela veio.
  • nunca, jamais nessa vida, utilizar variáveis globais em retornos de métodos ajax. Porque? Eles são assíncronos. Logo, você pode acessar uma variável que está com um valor qualquer num momento, assumir que está correta, e o valor mudar no instante seguinte – levando você a loucura sem entender porque o fluxo esperado não é seguido. E, denovo, vão por mim: já tive dores de cabeça com isso :-/

 

*se alguém tiver outras sugestões, por favor, enviem 🙂

E eu não estou aqui querendo dizer "não usem variáveis globais"; até porque eu sei o quão difícil é em muitos momentos desenvolver em javascript, devido às suas limitações. A idéia é apenas usar com cuidado 🙂

Infectados pelo Vírus do Orkut – Finalmente aconteceu

Antes de começar tenho que dizer que estou rindo e rindo muito, principalmente pelo caos causado no Orkut.

No polêmico post sobre o bug do Orkut para deslogar por scrap eu previni:

Mais uma vulnerabilidade que neste caso foi usado de forma "inocente" mas pode causar muito estrago se for melhor explorada por alguma mente maligna da internet.

[Update]

O virgem rapaz nem tão perverso que explorou muito bem essa falha do Orkut foi Rodrigo Lacerda, do Blog Ctrl+C. Assim que recebi o scrap e vi que entrei na comunidade, fui direto no código javascript, disponível neste link. Chegar até ele foi mais do que fácil, o orgulho e vontade de assumir as coisas malvadas e fodonas é o que derruba as pessoas. O ego não permitiu o anonimato (primeiro ele disse que ia fazer isso para divulgar o blog, deposi desistiu)

Eu cheguei atrasado na brincadeira, quando recebi o scrap e fui para o javascript encontrei ele assinado. Achei estranho, mas em comentário neste post o Rodrigo explicou que só assinou o Javascript depois que o nome e perfil vazaram pelo Twitter.

Pegar o bonde andando e quer sentar na janela é isso. 

Então fica meu pedido de desculpas: o Rodrigo não foi mirim e egocêntrico de assinar o script e querer mostrar a cara.

Que ego, ein Sr Lacerda?

[/Update]


Das minhas brincadeiras (que não chegam nem perto de pegar 400 mil pessoas no site de relacionamentos mais acessado no Brasil) eu nunca assinei nada.

Com o nome do meu novo ídolo em mãos fui direto para o Orkut, claro. Fiz a busca e cheguei até o perfil dele e consequentemente o blog, que ainda não tinha postado nada sobre o assunto.

 

Vamos falar sobre o "vírus"…

O que o vírus faz?
O vírus aparentemente não é um vírus e não é maligno. É um javascript executado através do Embed do Flash.

Como javascript não é minha praia não me esforcei para TENTAR decifrar o código, mas como eu disse ta aí para quem quiser ver.

Você recebe o scrap e quando você lê o javascript é executado automaticamente. Sei lá por que meios você começa a distribuir o scrap e entra na comunidade Infectados pelo Vírus do Orku. A primeira coisa que pensei foi: vou achar o javascript e alterar o ID da comunidade.

Achei o ID da comunidade lá, mas tava fácil demais e provavelmente não funcionaria. Fora que eu não ia saber o código a postar, deixei pra quem sabe. Se funcionasse seria muito "eu quero roubar o mérito" e não seria legal.

Deixei um comentário no Ctrl+C para ver se rola uma pequena entrevista com o Rodrigo – sei que ele tem méritos por acontecimentos passados, quero saber o que é ou não real. E contar tudo para vocês.

Mas a minha principal pergunta é: quanto rendeu a porra do AdSense com essa campanha, Rodrigo? Hahaha.

 

Como tirar o vírus do Orkut?
Se não é vírus você não tem que tirar, mas usei essas palavras por questões capitalistas (Google é rei).

Vamos por partes, vou ensinar como se proteger e não cair mais nessas artimanhas da internet. Primeiro você vai baixar o Fire Fox. Isso, chega de Internet Explorer, vamos aos browsers de verdade.

Com o FireFox instalado baixe o Flashblock, um plugin que não permite a execução dos embed's. Aparentemente você está livre, agora é só esperar o Orkut corrigir o congestionamento causado pela brincadeira…

 

Extras

A comunidade Infectados pelo Orkut é RECORDISTA.
Quase 400 mil membros em questão de poucas horas, fora os tópicos e o chat que tá rolando. E o congestionamento no Orkut… hahaha

Como deixar um background com transparência no IE

Inimigo mortal de imagens no formato .png, o Internet Explorer – pelo menos até o 6 – não interpreta as transparências dificultando a nossa árdua vida de desenvolvedor.

O pngfix é um conhecido de quase todo mundo e ele serve exatamente para forçar o IE a interpretar transparências nas imagens. Até aí pouca novidade para a grande maioria, mas ainda existia o problema de background com transparência, inicialmente não resolvido pelo pngfix.

Vou fazer um passo a passo, primeiro de como deixar imagens transparente e depois de como aplicar isso aos backgrounds também.

As imagens:

1. Baixe o arquivo pngfix.js e o coloque na pasta do seu site (clique aqui para baixar o arquivo ou copie e cole o código abaixo)

 

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in with DEFER keyword wrapped in conditional comments:

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='scale');">"
img.outerHTML = strNewHTML
i = i-1
}
}
}

2. Coloque dentro da tag head da sua página o seguinde código:

<!–[if lt IE 7]>
<style type=”text/css”>
#main{
background-image: none;
filter:
progid: DXImageTransform.Microsoft.AlphaImageLoader(src=IMAGEM.png,sizingMethod=’scale’)
;
}
</style>
<![endif]–>

Isso significa que o navegador só irá interpretar se for IE e com uma versão anterior a 7.

Pronto, automaticamente todas as imagens do seu site – menos os backgrounds – estarão com a transparência até no teimoso IE.

Agora aos backgrounds:

Aqui é um pouco mais trabalhoso, pois tem que ser feito manualmente em cada background, mas nada que uma folha de estilos para o IE não resolva. Minha dica é criar uma folha exclusiva para o IE e carregar ela pelo mesmo código que carrega o javascript.

Na folha de estilos do IE você precisa definir o seguinte:

#principal{
background-image: none;
filter:
progid: DXImageTransform.Microsoft.AlphaImageLoader(src=andafter.png,sizingMethod=’scale’)
;
}

Pronto, é só você definir este filter para todos os backgrounds que vão precisar de transparência e o problema está resolvido.

Gosto da criação de uma folha de estilos para o IE para corrigir os problemas, isso facilita um monte e normalmente não tem tanta coisa como dizem por aí, ah este pessoal complica…

Qualquer dúvida é só entrar em contato pelos comentários. 😉