A extensão FireQuery se acopla ao já famoso Firebug e adiciona uma série de novos recursos, todos pensados em facilitar a vida de quem usa jQuery.

Entre os vários recursos vale destacar a listagem dos eventos que estão associados a um elemento na página. Isso é extremamente útil quando você precisa alterar códigos feitos por outras pessoas, ou mesmo um código seu que você já nem lembra mais como ele funciona.

Dica enviada pelo meu colega de trabalho Paulo Lomanto, que é totalmente Web 1.0 e não tem Twitter, nem blog, nem nada pra eu linkar aqui.

Neste texto estão descritas as mudanças presentes nesta nova versão, detalhamento dos novos métodos, novas formas de passar alguns parâmetros e gráficos que ilustram os ganhos de performance obtidos.

E se você planeja migrar seu código para esta nova versão, não deixe de conferir a lista de incompatibilidades.

Via @jeresig.

Sabe quando o webdesigner desenha uma caixa de tamanho fixo (e largura variável, pra complicar um pouco), em que o texto deverá ficar contido ali dentro da caixa, e no caso do texto ser maior que o tamanho disponível, os famosos “três pontinhos” devem aparecer?

Pra ilustrar isso melhor, veja a imagem abaixo:

Caixa com dimensões fixas e conteúdo “ajustado” para caber

Um método comum de se fazer isso é contar o número de caracteres e colocar “…”, caso o número de caracteres ultrapasse o número máximo de caracteres que ficarão visíveis. Claro que esse número máximo é uma estimativa e nem sempre o resultado fica bom. Além disso, pode acontecer do “corte” no texto acontecer no meio de uma palavra, gerando um resultado estranho ao visitante, “tipo isso aq…”.

Nas CSS existe uma propriedade chamada “text-overflow” que, sob certas circustâncias, adiciona automagicamente “…” ao final do texto que não coube na área visível. OK! Problema resolvido então? Não exatamente…

O problema não está resolvido por conta de duas outras questões. Uma delas é que o Firefox ainda não implementa essa propriedade (sim, o IE tem! Moderno hein? ). A outra questão é que essa propriedade não se aplica nos casos em que o texto ocuparia mais de uma linha.

Se você quiser uma explicação mais detalhada (e exemplos) sobre a propriedade “text-overflow”, acesse este texto no blog do PPK.

Voltando ao assunto original, agora precisamos resolver aquelas duas questões. Felizmente, com algum tempo de Google e mais algum tempo de pesquisa em fóruns, consegui encontrar algo capaz de ajudar nesta tarefa: o jQuery textOverflow Plugin.

O código é relativamente simples e oferece várias opções de customização. Aqui tem uma página de exemplo (exemplo 1) gerando algo similar ao que foi mostrado na imagem acima.

Caso você tenha vários elementos na página que vão receber esse tratamento, deixo uma dica: tome cuidado com a performance! Como é uma operação intensiva no DOM, a chance desse código deixar o navegador bastante lento é bastante alta.

Pra esses casos, se você realmente precisa dos “…”, acho que vale a pena tentar juntar esse código com a solução de “execução de Javascript com pausas“, proposta pelo Nicholas Zakas.

Fiz uma proposta com essa combinação. Ela pode ser vista aqui no exemplo 2 (com 100 elementos). Embora seja visualmente mais lenta, ela não trava o navegador em momento algum, mesmo no IE 6.

Bom, o texto ficou bem longo… mas acho que deu pra passar bem a ideia. Sugestões ou comentários, é só usar o formulário abaixo.

Há duas semanas atrás eu fazia uma aplicação que exibia vários marcadores sobre um mapa e percebi que seria útil exibir uma espécie de tooltip sobre esses marcadores. A opção de usar o atributo title estava disponível sim, mas eu queria mais, queria poder personalizar essas tooltips!

Aproveitando-me do fato que a API de Mapas do Google já possui uma série de métodos para tratar eventos do mouse, resolvi criar algo que permitisse exibir tooltips personalizadas sobre os marcadores no mapa. O resultado? MapTips.

O resultado ficou bem legal e simples. Até criei uma página que explica o funcionamento e tem exemplos de utilização.

Como talvez você já tenha notado, disponibilizei o código fonte no Google Code. Agora preciso criar mais algumas páginas de wiki e bug tracking.

Semana passada eu estava vendo um algoritmo em C++ de busca binária. Deixando o C++ um pouco de lado parei para pensar onde eu já havia aplicado esse algoritmo. Qual não foi a minha surpresa em lembrar de um lugar onde faria sentido e eu deixei de usar o algoritmo. A situação? Marcar uma cidade qualquer numa listagem (combo) HTML.

Permita-me ilustrar melhor o cenário. Imagine uma listagem beeeem grande de cidades (nota: arquivo pesado). Como toda boa lista de cidades, ela está ordenada alfabeticamente. Agora, por algum dado motivo, você gostaria de selecionar uma cidade qualquer X dessa listagem. Nota: a lista tem algumas cidades falsas apenas para aumentar o volume de dados.

Intuitivamente você faria um for percorrendo as opções da listagem e marcando a cidade desejada. Em termos de código isso seria:

var maximo = combo.options.length - 1;
for( var i = 0; i < maximo; i++ )
{
  if( combo.options[i].text == cidade )
  {
    combo.selectedIndex = i;
    return;
  }
}

O código acima funciona, só não funciona bem para a nossa listagem tamanho família. Se eu pedir para marcar uma cidade próxima do final da lista, por exemplo Salto, a busca vai demorar pois o for vai percorrer a lista desde a letra A até chegar no S, aí marcando a cidade desejada.

Se explorarmos um pouco mais nossa intuição veremos que podemos usar algo semelhante ao que fazemos pra pesquisar numa lista telefônica. Abro a lista num ponto e verifico se o nome que eu quero está antes ou depois da página que estou vendo. Por exemplo, estou procurando Vitória. Se eu abri na página com nomes próximos de Teobaldo, vou procurar mais pra frente da lista, não adianta eu olhar pra trás. Essa é a vantagem da ordem alfabética, afinal. =)

Em termos de algoritmos podemos usar uma busca binária para expressar esse comportamento. Ou ainda, falando em código:

var esquerda = 0;
var direita = combo.options.length - 1;
var meio;
while( esquerda <= direita )
{
  meio = esquerda + Math.floor( ( direita - esquerda ) / 2 );
  // Javascript consegue comparar strings usando < e >. Ahá!  
  if( combo.options[meio].text < cidade )
  {
    esquerda = meio + 1;
  }
  else if( combo.options[meio].text > cidade )
  {
    direita = meio - 1;
  }
  else
  {
    // é o cara, pode marcar e encerrar a função
    combo.selectedIndex = meio;
    return;
  }
}

Caso ainda não tenha ficado claro pra você, a busca binária funciona bem melhor para este cenário. Ao invés de percorrer a listagem item a item (linearmente), vamos tomar vantagem da organização alfabética e fazer uma pesquisa mais inteligente. =)

Fiz um arquivo de testes que permite, obviamente, testar as duas implementações (nota: arquivo pesado – cuidado com o pé =). Usei a jQuery somente fora dos algoritmos em questão, pra facilitar a manipulação dos eventos.

Como dá pra notar pelo arquivo de testes, a busca binária funciona melhor para a esmagadora maioria dos casos. O que é de se esperar dada a complexidade O(log n) da busca binária ante a complexidade O(n) da busca linear.

E fica o lembrete, até pra mim mesmo, que tal pesquisar um algoritmo mais eficiente da próxima antes de sair implementando qualquer coisa?

Seguindo as dicas encontradas no site do PPK, QuirksMode, podemos ver como identificar qual o botão usado pelo visitante. Traduzindo isso em código teríamos algo assim: (com jQuery disponível na página):

var left_button = 0;
var middle_button = 1;
var right_button = 2;
if( $.browser.msie )
{
  left_button = 1;
  middle_button = 4;
  right_button = 2;
}
$( "#container" ).mouseup(
  function( e )
  {
    var botao = "";
    if( e.button == middle_button )
    {
      botao = "meio (rodinha)";
    }
    else if( e.button == right_button )
    {
      botao = "direito (contexto)";
    }
    else
    {
      botao = "esquerdo (principal)";
    }
    alert ( "botão: " + botao );
  }
);

Um fator importante é que se você usar o evento click, a informação sobre o botão usado poderá não estar disponível e o código provavelmente não irá funcionar. Por isso é importante usar eventos como mousedown, mouseup. Aproveitei e fiz uma contribuição com a documentação da jQuery sobre eventos adicionando uma nota sobre o fato acima. =)

Se quiser ver o exemplo acima em uma página funcional, acesse este exemplo.

Nota: Ainda não tive tempo de testar o código em diversos navegadores, farei isso assim que possível. Testei no Firefox 3, no Firefox 2, IEs 7 e 6, e Safari 3, todos funcionam. Só no Opera 9.5 que o único botão “capturável” parece ser o botão esquerdo.

Durante esse período mostrei desde a sintaxe base da linguagem, passando por manipulação de CSS e DOM, eventos e listeners, até chegar no tão falado Ajax. E no último dia ainda deu tempo de apresentar a ótima biblioteca jQuery sob o tópico produtividade.

Ah, tirei uma foto com o pessoal que participou da oficina:

Na foto estão os alunos da oficina e eu, quase no centro, de camisa azul.

Espero que todos possam ter aprendido pelo menos algo de novo e interessante. Aproveito para agradecer a presença de todos, que se esforçaram pra acordar cedo mesmo durante as férias letivas. Bom, agora deixa eu mostrar a foto para minha mãe… =)

Gostei de ministrar essas oficinas, e já estou até pensando qual pode ser o tema da oficina de verão, no final do ano? LAMP? Ruby on Rails? Só o tempo dirá…

Já há algum tempo que eu tenho feito vários códigos usando uma biblioteca leve e poderosa chamada jQuery. Ela é uma ferramenta muito versátil, que vai te ajudar a se concentrar mais no que realmente importa: a lógica para implementar a solução.

E como essa jQuery, basicamente, funciona?

Um dos grandes trunfos, e talvez o principal, é o modo com que você consegue acessar os elementos da sua página. Usando seletores CSS e/ou seleção por XPath você consegue alcançar quaisquer combinações de elementos, ou elementos isolados, em sua página.

Feita a seleção dos elementos, a jQuery vai, digamos, encapsular cada um dos elementos e te dar um leque grande, realmente grande, de métodos diversos extremamente úteis.

Como os métodos estão todos concentrados na jQuery e já possuem os devidos tratamentos para um suporte amplo cross-browser, sua única preocupação será implementar a lógica do código. Muito bom!

Selecionando

OK, até agora muita teoria e entusiasmo mas nenhum código. Que tal uns exemplos?

Primeiramente, vamos selecionar todos os elementos “p” de nossa página. Não vamos fazer nada com eles, ainda:

$( "p" );

Só isso! Agora imagine que você gostaria de esconder todos esses elementos “p” que selecionamos. Nosso código ficaria:

$( "p" ).hide();

Fácil, não? Porém, suponha que esconder todos os “p”‘s não é o que queremos realmente, seria bom esconder apenas os “p”‘s de uma “div#menu”. Veja:

$( "p", "div#menu" ).hide();

Adicionando e modificando conteúdo na página

Modificar o conteúdo de um elemento já é, de certa forma, fácil se você usar o innerHTML comum. Mas, como você já deve imaginar, com jQuery é muito mais:

$( "p#exemplo" ).html( "<strong>Novo</strong> conteúdo!" );

O pequeno código acima vai acessar um “p#exemplo” e alterar seu markup interno por aquele outro, passado como parâmetro à função. Se você quiser apenas saber qual o markup atual do elemento:

$( "p#exemplo" ).html();

E que tal adicionar um novo elemento após nosso “p” de exemplo? Veja:

$( "p#exemplo" ).after( "<p>Um elemento depois!</p>" );

Ou seja, usando o método intuitivo after conseguimos adicionar elementos após o nosso elemento original. Se você está pensando que podemos inserir elementos antes usando o método análogo before:

$( "p#exemplo" ).before( "<p>Um elemento antes!</p>" );

Acertou! Simples e intuitivo, não? =)

E o que mais?

Acesse a página com uma visão geral dos métodos e veja quantas outras coisas o jQuery ainda pode fazer por você. AJAX, animações, tratamento de eventos, só pra citar algumas delas.

Além disso, a jQuery possui uma boa documentação e uma comunidade ativa, que pode interagir diretamente com a biblioteca através de plugins. Ah sim, você pode adicionar novos comportamentos com plugins. =)

Referências

jQuery

15 dias de jQuery – Uma visão geral sobre o poder da jQuery

Seletores CSS

Seleção por XPath

Métodos diversos da jQuery

Documentação da jQuery

Eu mesmo já me deparei várias vezes com esse impasse. Porém, na terça-feira, ao usar alguns efeitos da (excelente) jQuery, eu resolvi que iria, de alguma forma, usar os efeitos somente quando o resultado fosse agradável visualmente.

O benchmark usado

Os detalhes, prós e contras do método estão listados mais abaixo. Inicialmente vou apenas demonstrar qual foi a idéia que implementei.

Minha idéia partiu de uma premissa simples: “Vou fazer um laço de n iterações e contar quando tempo este laço vai levar. Por esse tempo eu consigo presumir, mesmo que sem grande precisão, qual o poder de processamento da máquina.”.

Calma! Sim, sim… a idéia de contar a duração deste laço é afetada por uma série de fatores extras, além da velocidade do processador. Mas como eu já disse, vou tratar disso logo mais.

Veja o código final que usei: (adaptado para exemplo)

var x = new Date();
i = 0;
while( i < 50000 )
{
i++;
}
var y = new Date();
if( ( y - x ) < 70 )
{
set_cookie( "has-effects", "yes" );
}
else
{
set_cookie( "has-effects", "none" );
}

Como você pode notar, o código é ridiculamente simples. Usei 50000 iterações numa página completa, não numa página de testes com apenas o código dentro e obtive resultados como (tempo em milissegundos):

• Pentium 4 2.8, 1GB de RAM – Xubuntu e Firefox 2.0.0.3: 40 (esse é meu Firefox de trabalho, cheio de tabs e extensions…)
• Pentium 4 2.8, 1GB de RAM – Xubuntu e IE6: 25
• Pentium III 551, 384MB de RAM – Windows XP e Firefox 2.0.0.3: 140
• Pentium III 551, 384MB de RAM – Windows XP e IE7: 100
• Pentium III 551, 384MB de RAM – Windows XP e IE6 (standalone): 90
• Mac PowerPC 1.25, 512MB de RAM – Mac OS X e Safari 2.0.4: 100
• Mac PowerPC 1.25, 512MB de RAM – Mac OS X e Firefox 2.0.0.3: 100

Se você olhar meu código anterior, eu defino como aptas a executarem os efeitos apenas máquinas cujo resultado foi inferior a 70. Na sequência, gravo um cookie para não repetir o teste a cada página visitada, apenas uma vez por sessão.

O código completo, inclusive com o devido controle por cookies, ficou:

var has_effects = false;
if( document.cookie.indexOf( "has-effects" ) != -1 )
{
if( document.cookie.indexOf( "has-effects=yes" ) != -1 )
{
has_effects = true;
}
}
else
{
var x = new Date();
i = 0;
while( i < 50000 )
{
i++;
}
var y = new Date();
if( ( y - x ) < 70 )
{
set_cookie( "has-effects", "yes" );
has_effects = true;
}
else
{
set_cookie( "has-effects", "none" );
}
}

Se você reparar, eu crio uma variável global has_effects para usar posteriormente em meu código.

Detalhes

Como eu já havia dito acima, obviamente este teste não mede com precisão o real poder de processamento de uma máquina. Existem uma série de fatores que influeciam, tanto positivamente como negativamente, no resultado da duração do laço.

Uma máquina completamente ociosa ou com vários processos rodando em background são exemplos destes dois casos, respectivamente.

Prós

Efeitos de animação são legais, mas só são realmente legais quando eles funcionam adequadamente. Com essa simples detecção você pode esconder um elemento qualquer da página, com um efeito de fade-out num computador supostamente rápido ou, escondendê-lo de uma vez só no caso de uma máquina com processamento lento.

Contras

O ponto contra deste benchmark é que ele leva em conta a velocidade de processamento em apenas um dado momento. Isto significa que se no momento da abertura da página seu processador estava bastante ocupado, o código irá assumir que seu processador não tem poder suficiente para fazer animações dali então. O que pode ser verdade, ou não. =)

Mais testes e sugestões

Se você tem sugestões ou usou o código em algum cenário diferente dos listados acima, deixe seu comentário! Um bom benchmark é também um conjunto de bons testes!

Referências

jQuery

O que é benchmark?