Porém, além desse curso, essa semana eu recebi um e-mail aqui no trabalho comentando sobre um curso oferecido pela Opera (sim, aquela do navegador Opera). Dei uma olhada geral sobre o conteúdo e parece ser bem interessante, além de abordar a maioria dos tópicos usados no dia-a-dia de quem trabalha e desenvolve interfaces web.

Sendo assim, se você está interessado num curso de desenvolvimento de front-end gratuito, esta é também uma excelente opção. Bons estudos!

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.

Have fun! Vi aqui.

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.

É 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…

Fiz uma leitura mais aprofundada nos textos e vi um recurso bastante interessante chamado Web Workers. Segundo a descrição do MDC, os Web Workers permitem a execução de códigos de forma multi-thread dentro de aplicações web e sites.

Quem escreve código Javascript hoje em dia sabe que não é raro o navegador “congelar” durante um código que exige um pouco mais de processamento. Existem algumas formas de evitar esse “congelamento” sim… mas certamente os Web Workers elevam a resolução deste problema a outro nível de soluções e possibilidades.

Com os Web Workers você pode iniciar um código que será executado em paralelo ao código Javascript da sua página. Esse código executado pelo “worker” trabalha num ambiente diferente, sem acesso à página pai e, principalmente, sem acesso ao DOM. A única forma de comunicação entre a página pai e um processo “worker” se dá através de mensagens.

Como eu estava interessado em verificar se esses Web Workers realmente trabalham em paralelo , fiz uma página que faz esse teste. Nela, há duas versões de um mesmo código que calcula a sequência (ou número) de Fibonacci. Além disso, na página há uma animação com jQuery rodando, o que vai permitir perceber claramente se o navegador vai ou não “congelar”.

Veja aqui o teste com Web Workers. (para o Firefox só funciona na versão 3.5)

Como você pode ver pelo teste acima, realmente o código roda em background, sem afetar a página renderizada.

Vale ressaltar que nos testes eu exibo também o tempo em milissegundos que a operação levou. Fazendo os testes aqui no meu computador, a versão com Web Workers leva em média 1600 ms, enquanto a versão “normal” leva em média 800 ms. O dobro de tempo mas é algo a se ponderar se lembrarmos que a versão “normal” trava totalmente o navegador enquanto o cálculo é feito. (interessante… rodando o teste local, a versão com “worker” executa bem mais rápido do que a versão online aqui no blog, talvez pelo tempo de download do “worker.js”?)

Update: na versão do código de testes que eu fiz ontem, ao clicar no botão para calcular o número de Fibonacci, o código do “worker.js” era baixado antes do cálculo em si ser executado. Isso causava uma grande diferença entre o teste rodando local e o teste rodando online (óbvio hehe). Fiz uma modificação hoje para deixar o “worker.js” já carregado (assim como os demais arquivos “.js”).

E como comentário final: tentei deixar os códigos tão similares quanto possível para não afetar significativamente os resultados em favor de uma ou outra forma de cálculo. Sugestões e/ou correções são bem-vindas.

Referências

developer.mozilla.org: Using web workers

hacks.mozilla.org: using web workers: working smarter, not harder

ejohn.org: Computing with JavaScript Web Workers

Se você quiser ver uma versão, digamos, alto nível das novidades, acesse esta página.

Se você está interessado em ver as novidades da versão 3.5 para nós, desenvolvedores, veja esta página.

Fica a dica!

Diante dessa lembrança eu pensei em usar o objeto Canvas do HTML 5 que eu havia comentado anteriormente para, digamos, “reviver” essa brincadeira numa formato digital.

Procurei uma imagem para fazer os testes e acabei encontrando um site bem legal, com várias imagens no estilo “ligue os pontos”. Dentre as várias opções, escolhi a imagem abaixo:

Ligue os pontos e ganhe um pato (ou cisne, ou ganso, ou marreco)

A partir daí comecei a pesquisar um pouco mais sobre os métodos de desenho disponíveis para codificar algo que permitisse desenhar umas linhas sobre a imagem acima. O tutorial de Canvas no MDC foi bastante importante nesse sentido.

Bom, mas chega de enrolação e deixe-me mostrar esse tal “ligue os pontos digital“. =) Basta sair clicando para ver o resultado. Há também alguns comandos de teclado disponíveis mas eu vou deixar que você descubra (espero) intuitivamente (ou por associação).

O código-fonte está bem simples  o que permite entender relativamente fácil o que foi feito. E falando sobre o código, vale lembrar que o código em si é mais uma prova de conceito do que um exemplo de código bem estruturado. Ah, e detalhe importante é a imagem no canto superior direito na página.

Pra ficar mais legal ainda, embora o tempo não me permita, seria legal colocar junto do código algum algoritmo para descobrir quando a imagem foi desenhada corretamente.

E por fim, o “liga pontos” acima foi testado (e funcionou) em Firefox 3.0.10, Opera 9.64, Safari 3.2.3 e Chrome 2.0.172. No IE 8, nativamente, não funciona.

Update! Enquanto eu “jogava” eu estive pensando e cheguei a conclusão que esse tipo de jogo pode ser interessante para pessoas que estão iniciando no mundo da informática, principalmente para adquirir destreza ao usar um mouse. Interessante!

Abaixo está o vídeo com a apresentação feita (aproximadamente 1h) e na sequência algumas notas e comentários sobre os temas apresentados.

Abas separadas por processos

Este é um fato que certamente você deve conhecer. Você está lá navegando tranquilamente com uma dezena (ou mais =) de abas abertas… Daí que você resolve acessar um site com um Javascript mal escrito, com uma animação em que o Flash Player se revolta e lá foi, o navegador inteiro congela e não resta outra opção senão matar o processo. Claro que a maioria dos navegadores traz opções para restaurar a seção anterior mas não deixa de ser bastante incômodo.

A separação das abas por processos permitiria matar (encerrar) apenas a aba problemática, mantendo as outras abas isoladas. Isso por si só já seria uma grande vantagem da separação por abas mas ainda há uma segunda vantagem também bastante interessante! =)

Com a separação em diversos processos o sistema operacional pode gerenciar melhor o processamento, alocando mais recursos para as partes onde é realmente necessário, sem congelar as outras partes do navegador.

Vale notar que essa divisão em processos distintos causa um aumento do consumo do memória sim mas, como a quantidade de memória disponível nos PCs atuais (mesmo para os “PCs de prateleira”) está deixando de ser um gargalo para o desempenho dos computadores, é de se esperar que os programas passem a fazer alocações maiores de memória. Mais ou menos como o princípio da lei da oferta e da demanda.

Linearização das instruções de funções

O termo em inglês acho que permite um entendimento melhor: “‘function inlining“. Essa é uma característica que, por exemplo, C++ possui. Usando essa propriedade o compilador pode trocar a chamada de uma função pelo corpo da função, fazendo com que a execução das instruções ocorra sem o overhead de chamar uma função.

Além disso, pelo código exibido nos slides parece que, diferentemente do C++, você não precisa dar uma dica para o compilador na hora de escrever a função indicando que a função é candidata ao “inlining“.

Rede

Aqui vale destacar o aumento do número de downloads simultâneos para um mesmo domínio. Com o IE 7 ainda temos o limite de dois downloads mas, felizmente o IE 8 (beta) já tratá um limite três vezes maior, de seis downloads simultâneos para o mesmo domínio. A última versão dos demais navegadores já possui um valor de seis ou sete downloads.

Outro recurso bem legal, e este é uma boa ideia da Microsoft, é o atributo “defer” para a tag <script>. Esse atributo indica para o navegador que ele pode continuar a renderizar a página sem esperar o arquivo Javascript referenciado carregar. O atributo já funcionava no IE e vai funcionar nas novas versões do Firefox e Opera.

window.postMessage

O método window.postMessage me chamou a atenção. Com ele será possível a comunicação entre páginas de domínios distintos de forma bem simples. O princípio é o seguinte: a página remetente da mensagem irá tentar enviar a mensagem para, por exemplo, um iframe destinatário. Este iframe irá verificar se o remetente é alguém que ele conhece para então aceitar a mensagem e executar alguma ação.

A página que receberá as mensagens pode “ouvir” os eventos de mensagens usando o tradicional método addEventListener. Verificando a propriedade origin, a página receptora pode descobrir pelo domínio se a mensagem está vindo de um destinatário conhecido ou não.

Ajax entre domínios diferentes

Aquele sonho de fazer requisições Ajax entre os N domínios da sua aplicação está prestes a se realizar.

Adicionando um cabeçalho (header) na resposta da requisição Ajax é possível especificar uma origem (além do próprio domínio) de onde aquela requisição pode ser atendida com segurança. O nome deste cabeçalho é “Access-Control-Allow-Origin” e está melhor descrito nesta página.

document.querySelectorAll

Se você já usou a jQuery sabe como é prático encontrar os elementos da página usando a sintaxe de CSS. Melhor ainda se encontrar esses elementos usando a sintaxe de CSS seja possível de ser feito usando um método nativo do navegador. É isso que o método document.querySelectorAll permitirá. O melhor de tudo é que as próximas versões do IE, Firefox, Opera e Safari já trarão este método disponível.

Visual e CSS

Adoradas por 10 em cada 10 webdesigners, as bordas redondas vieram pra ficar. =) Apesar de os navegadores trazerem implementações com nomes diferentes, todas as implementações funcionam bem. Ou seja, juntando essas propriedades: -moz-border-radius, -webkit-border-radius, -khtml-border-radius e border-radius as bordas redondas saem com facilidade.

Sombras também estarão disponíveis. Nesta página há vários exemplos de uso da propriedade text-shadow.

Outro recurso que certamente vai ser muito usado (e provavelmente muito mal usado também ) é a possibilidade de se usar fontes personalizadas na página. Por fontes personalizadas entenda fontes que não estão instaladas na sua máquina. Coisa que já era possível de se fazer no Flash, agora também com CSS.

Além disso, há uma série de animações que estarão disponíveis, por enquanto, para Firefox e Safari.

Desenho

O objeto Canvas permite a renderização de elementos numa superfície 2D usando retas, curvas, arcos e/ou círculos. No MDC tem um tutorial bem bacana sobre Canvas. Até me arrisquei a fazer uma “arte”: =)

// <canvas id="draw-area" width="150" height="150"></canvas> no HTML
var canvas = document.getElementById( "draw-area" );
if( !canvas.getContext )
{
  return;
}
var context = canvas.getContext( "2d" );

context.beginPath();
var side = 150;
var offset = -4;
var i = 0;
while( true )
{
  if( i % 4 == 0 )
  {
    var x = offset + 4;
    context.lineTo( x, offset );
    offset = x;
    if( offset + 4 > 78 ) // hard-coded mesmo ;P
    {
      break;
    }
  }
  else if( i % 4 == 1 )
  {
    context.lineTo( offset, side - offset );
  }
  else if( i % 4 == 2 )
  {
    context.lineTo( side - offset, side - offset );
  }
  else if( i % 4 == 3 )
  {
    context.lineTo( side - offset, offset );
  }
  i++;
}
//context.closePath();
context.stroke();

Outro detalhe importante é que o Canvas permitirá também a inserção de vídeos dentro dele.

JSON nativo

Atualmente, ao receber uma string em JSON você precisa usar um eval para recuperar o objeto original. O eval é conhecidamente lento, até pelo fato de ser um método genérico, mas era a melhor saída para se ter acesso às informações contidas na string JSON mas, isso vai mudar!

Agora teremos métodos nativos para codificação e decodificação no formato JSON. A única dúvida que me restou é sobre o nome dos métodos. Nos slides os métodos se chamam encode e decode, já na página do MDC e no wiki do ECMAScript os métodos se chamam parse e stringify, respectivamente.

E por fim…

… fico na torcida pra que as novas versões desses navegadores tenham uma rápida adoção por parte dos usuários.