Chris B. – idéias e pensamentos

Desde o começo do blog comecei a fazer posts sobre gambiarras, que dentro do mundo (de alguns desenvolvedores) também são conhecidas como POG (Programação Orientada a Objetos).

http://www.chrisb.com.br/blog/category/pog/

Não vou entrar no mérito ou não do uso das gambiarras (ou contornos técnicos, ou work-arounds) pois tem gente que não pode nem ouvir a expressão e não consegue entender que não passa – pelo menos da minha parte – de uma brincadeira e que o uso de tais ajustes são feitos como última saída. Mas, o intuíto do desse texto é divulgar mais referências sobre as gambiarras na vida dos programadores – das mais diversas áreas. Se tiverem sugestões, me mandem, que vou adicionando à lista:

• http://desciclo.pedia.ws/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Gambiarras
• http://bruno.alves.in/programacao-orientada-a-gambiarras-pog.html
• http://www.programei.org/index.php/08/09/2009/pog-programacao-orientada-a-gambiarra/
• http://blog.lp7.com.br/2007/04/24/pog-programacao-orientada-a-gambiarras/

Mais um POG que só o IE 6 nos faz conceber…

O problema

Comecei a usar a jQuery UI em uma implementação, mais precisamente para ter elementos (divs) de três colunas podendo ser rearranjados (dentro das colunas e entre elas) por drag’n drop. Tudo indo bem, suave, com o Sortable da UI. Nenhum bug, impressionante. Mas aí, o cliente reporta um erro: dentro de uma div, tem uns campos input checkbox que perdem a seleção quando a div é arrastada.

Na hora, já quase comecei a chorar, pois me parecia ser um daqueles bugs sem sentido solução, do IE.

O POG

Nada que o Google não resolva… uma pequena busca, e me deparo com esses posts:

• http://webbugtrack.blogspot.com/2007/11/bug-299-setattribute-checked-does-not.html
• http://groups.google.com/group/jquery-ui/browse_thread/thread/918fc66cf264d3da/ac1bc0633ed97900?show_docid=ac1bc0633ed97900&pli=1

O que eles falam? Que você só precisa colocar um atributo mágico chamado defaultChecked com valor defaultChecked nos inputs para ele não perder a seleção. Segue exemplo abaixo:

$(“input”).attr({checked: “checked”, defaultChecked:”defaultChecked”});

Em mais de 5 anos trabalhando – muito – com web, nunca tinha visto esse atributo, nem precisado usar. O porque setar ele? Nem fui atrás de saber, mas certamente não faz sentido! Muito bom, IE6, contribuindo para os blogs que falam sobre gambiarras!

Faz tempo que não posto um POG por aqui, né? Bem, vamos tirar a poeira com uma coisa bonita.

O problema

Mais uma vez nosso querido IE6… imagine um menu em forma horizontal com listas nas verticais, uls aninhadas, uma dentro da outra, com uma certa hierarquia. Já tenho um código pronto há muito tempo, que funciona bem, que tem um javascript para simular o :hover em elementos que não são <a>. Não, não é nesse js que está o POG a ser apresentado (mas bem que poderia ser!), a questão é no CSS. Como os itens flutuam (float) não há width:auto que faça com que eles ocupem o espaço do texto – as lis acabam ficando com a largura total do pai.
Ah, sim, antes que comentem: existem várias soluções, muito boas, para menus com dropdown. Já pesquisei por todas, mas nenhuma atende 100% as necessidades que são impostas nos projetos que faço aqui na empresa, pois os menus são bem complexos.

O POG

Calcular a largura de cada item e deixar explícito por CSS inline. Como fazer isso? Uma função que retorna a largura de um texto, dependendo dos caracteres que o compõem, com isso a li vai ficar com a largura fixa no html, não correndo risco do width:auto não funcionar como previsto.
Abaixo segue o código de uma função, que usamos aqui, feita em Velocity – apesar da linguagem não ser de conhecimento popular, é fácil entender o que ela faz. Ah, sim, isso vale para fontes com tamanho 12 pixels!

#macro(largura $teste)
#set($largura = 0)
#if($teste.length() > 0)
#set($total = $teste.length() - 1)
#foreach($i in [0..$total])
#set($j = $i + 1)
#set($letra = $teste.substring($i,$j))
#if($letra == " ")
#set($largura = $largura + 2)
#elseif($letra == "i" || $letra == "í" || $letra == "j" || $letra == "l")
#set($largura = $largura + 3)
#elseif($letra == "f" || $letra == "r" || $letra == "t" || $letra == "!")
#set($largura = $largura + 4)
#elseif($letra == "c" || $letra == "ç" || $letra == "y" || $letra == "I" || $letra == "Í" || $letra == "J" || $letra == "-" || $letra == "|")
#set($largura = $largura + 5)
#elseif($letra == "s" || $letra == "v" || $letra == "z" || $letra == "E" || $letra == "É" || $letra == "F" || $letra == "L")
#set($largura = $largura + 6)
#elseif($letra == "C" || $letra == "Ç" || $letra == "D" || $letra == "G" || $letra == "H" || $letra == "R" || $letra == "U" || $letra == "Ú" || $letra == "Ü")
#set($largura = $largura + 7)
#elseif($letra == "M" || $letra == "O" || $letra == "Ó" || $letra == "Q")
#set($largura = $largura + 9)
#elseif($letra == "m" || $letra == "W" || $letra == "%" || $letra == "@")
#set($largura = $largura + 11)
#else
#set($largura = $largura + 7)
#end
#end
#end
#end

Faz tempo que não faço um post sobre POGs: não que eles não estejam aocntecendo mais, mas é uma mistura de falta de tempo com complexidade absurda que os POGs têm alcançado ultimamente por aqui :-/

Mas, para não deixar essa categoria passada, vou resgatar um post que fiz nO Desenvolvedor no final do ano passado…

O problema

Já ouviu falar em image flickering?

Até semana passada o final do ano passado, eu não. Mas certamente, assim como eu, você já viu acontecer: links com imagem de fundo que, quando você passa o mouse por cima, perdem o background. No lixo do IE6.
Eu não sabia que tinha um nome bonito. Por exemplo, essa classe CSS aqui daria problema:

.someClassName {
background:#AABBCC url(someBackGroundImage.gif) repeat-x;
}

Pelo que entendi do assunto, essa é uma questão relacionada a como o browser (não que o IE6 seja um browser, mas vamos lá…) faz cache das imagens.

Existem várias soluções para esse problema – sim, é um problema ao meu ver, e não uma propriedade do browser. De uma googlada e veja que há várias técnicas.

Uma delas seria não usar imagens de background em links. Outra, colocar uma div (ou algum outro elemento) em volta do link e usar background nela.

FAIL para ambos.

Mudar a sua marcação html por causa do IE6 não faz sentido; é um browser antigo, que não segue padrão algum, que vem caindo em desuso.

O POG

Existe um fix para isso que funciona bem em qualquer IE6.
Dentro do head do seu html, coloque o javascript:

<script type=”text/javascript”>
try {
document.execCommand(“BackgroundImageCache”, false, true);
} catch(err) {}
</script>

Esse script tenta fazer com que o browser use as imagens salvas no cache da máquina.
Funciona belezinha, está testado, homologado e em produção há meses, numa boa.

Ah, as APIs… com elas, podemos fazer eles, os mashups, e isso sim é realmente bacana. Misturar dados e funcionalidades de diversos sistemas, criando uma nova ferramenta ou dando um maior poder a algo que seria simples demais.

E, claro, todo cliente hoje em dia quer isso, até porque o custo é relativamente baixo para se ter algo bacana no seu site (um sistema de mapas, players de vídeos, integração com redes sociais, etc…)

E uma necessidade de um cliente, umas semanas atrás, foi de ter em uma parte do site dele – uma área logada – onde os usuários poderiam enviar links de vídeos do Youtube. Até ai, fácil… mas na última hora, vi que seria necessário exibir uma imagem relativa a cada vídeo.

Solucão bonita

Usar a API do Youtube para passar a url do vídeo e esse me retornar os dados relativo a ele (creio que pode ser em XML ou JSON) e tratar os dados, pegando a imagem gerada para esse vídeo.

O problema

A aplicação toda roda em cima de java, e além de estar fora da minha área de atuação nesse job, a equipe responsável estava com um monte de pepinos na frente, de diversos jobs, para resolver…

O POG

Fiquei pensando que as imagens geradas para cada vídeo devem ter uma relação entre o ID do vídeo (que sempre aparece na url do Youtube, numa sequencia de 10/12 digitos). Foi ai que descobri esse código em javascript

function getScreen( url, size ) {
if(url === null){ return ""; }
  size = (size === null) ? "big" : size;
  var vid;
  var results;
  results = url.match("[\\?&]v=([^&#]*)");
  vid = ( results === null ) ? url : results[1];
  if(size == "small"){
    return "http://img.youtube.com/vi/"+vid+"/2.jpg";
  }else {
    return "http://img.youtube.com/vi/"+vid+"/0.jpg";
  }
}

O que ele faz? Simples… você passa a url do vídeo e o tamanho do vídeo (small ou big, como string mesmo) e ele te retorna a url da imagem relativa ao vídeo que o Youtube guarda em seus servidores. Efetivamente, muito simples e rápido, e funciona! Vejam, por exemplo, que esse vídeo (http://www.youtube.com/watch?v=PBToEOO7np0) tem essa imagem associada (http://img.youtube.com/vi/PBToEOO7np0/2.jpg).

O problema, claro, é que uma vez que não se usa a API do Youtube, se algum dia eles mudarem a regra de como armazenam as imagens (num outro servidor, ou a nomenclatura delas, etc…) o código vai quebrar!

O Internet Explorer ainda me persegue. Quando não é o 6, é o 7… consegui na empresa onde trabalho não ter mais que validar sites no IE6, mas não é que o 7 agora veio me pregar umas peças?
Vamos lá, o pessoal da minha equipe montou um monte de htmls para um projeto novo, e eu coemcei a fazer a programação em cima deles. Altera daqui, altera de lá, num formulário tive que colocar um campo novo.

O código

<label>Cidade:</label><input type="text" name="city value="" />

O problema

Vejam só como saiu na tela

Eu sei que isso tem a ver com o CSS, mas o quê exatamente?

O POG

Vi nos campos dos formulários, que estavam abaixo, um <!–&nbsp;–> antes de fechar as tags label. Fiquei encafifado, e coloquei o mesmo, assim:

<label>Cidade:<!--&nbsp;--></label><input type="text" name="city value="" />

Enão é que funcionou??? Vai entender, IE…