Klaus Paiva

Hoje saiu a versão 1.4 da mais popular biblioteca de Javascript na atualidade: a jQuery.

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.

Um vídeo bastante interessante que mostra vários recursos provenientes do HTML 5: canvas e SVG, <video>, geolocation, app cache e banco de dados local, e web workers. (aliás, eu já falei sobre web workers aqui no blog )

Have fun! Vi aqui.

Esse texto surgiu de uma necessidade que é bastante comum pra nós, seres programadores de interfaces web.

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.

Muita gente conhece o método String.replace do Javascript. De forma geral, ele é o método que permite substituir (jura? =) uma (sub)string por outra string.

É um método bastante usado em códigos Javascript, principalmente por possibilitar o uso de expressões regulares na hora de fazer as substituições. A forma mais comum de uso é algo do tipo:

"Javascript".replace( /[aeiou]/g, "" )

O trecho de código acima remove as vogais da string "Javascript" resultando na string "Jvscrpt", bem simples.

Mas o que nem todo mundo sabe (e eu costumo não lembrar também) é que o segundo parâmetro do método replace pode ser uma função qualquer, que será executada recebendo como parâmetro a parte da string que "casou" com a expressão dada.

Desta forma você pode manipular como bem quiser a parte que "casou" da expressão regular. Isso é útil, por exemplo, se você quer procurar URLs numa determinada string e reduzir aquelas com mais de N caracteres.

Fiz um código que mostra o exemplo acima funcionando. Veja o exemplo aqui.

Nota 1: A expressão regular para "casar" URLs está bem simples e contida para o exemplo... não "casaria" todos os formatos possíveis de URL.

Nota 2: O método substr no IE não funciona como esperado quando se tem parâmetros negativos. Que azar...