Posts Tagged ‘Javascript’

Resumo do Dev in Rio 2010

October 29th, 2010

No dia 09 de outubro aconteceu o Dev in Rio 2010. Como a edição de 2009 foi muito boa, a expectativa para a deste ano era alta. E foi correspondida! Desta vez foram duas salas com palestras acontecendo simultaneamente. Eu fiquei na sala 2, onde assisti às seguintes palestras:

  • HTML 5 e as novas JS APIs – Leonardo Balter
  • Na primeira palestra foram apresentadas as principais APIs do HTML5. A palestra foi bem interessante, apesar de bastante prejudicada pela falta de WiFi no local, o que impediu que o palestrante mostrasse os vários exemplos que ele tinha preparado.

  • NodeJS – a performance que eu sempre quis ter – Emerson Macedo
  • A palestra do Emerson foi excelente. Ele apresentou o problema de bloqueio de I/O no acesso a banco de dados, que é um dos principais gargalos no desempenho para a maioria das linguagens de programação. O NodeJS ajuda a resolver este problema pois usa Javascript, que é uma linguagem orientada a eventos. No final da apresentação, ele divulgou o Nodecasts, site de screencasts sobre NodeJS que ele acaba de criar. A apresentação está disponível no blog do Emerson.

  • Lightning Talks
  • Após o almoço, foi disponibilizado um horário para lightning talks, pequenas apresentações de 5 minutos para quem tivesse algo interessante para mostrar. Como o tempo foi curto, foram apenas duas apresentações: a primeira sobre desenvolvimento de aplicações Python para celular e outra sobre a Apache Foundation.

  • Symfony – OO PHP para gente grande – Luã de Souza
  • Nesta palestra, foi apresentado o Symfony, um framework PHP para desenvolvimento web que vem crescendo bastante. É um framework MVC que, a exemplo de praticamente qualquer framework atual, inspira-se no Rails para simplificar o desenvolvimento de aplicações web.

  • Refactoring – Porque apenas fazer funcionar não é o suficiente – Caike Souza
  • Esta foi uma das melhores palestras do evento. Caike Souza falou sobre refactoring – destacando que não existe refactoring sem testes -, apresentou as principais vantagens e alguns exemplos práticos em Ruby.

  • Arquitetura: cansado da mesmice? – Guilherme Silveira
  • Apesar do título não deixar claro, esta palestra foi direcionada a arquitetura com serviços Restful. Como todas as palestras dele, Guilherme Silveira foi bastante claro, mostrando as vantagens de uma arquitetura voltada para serviços, que vai além da simples troca de arquivos XML entre aplicações. Ele mostrou um exemplo bem interessante, sobre integração entre sites de viagens, reserva de hotéis e calendário, onde o compartilhamento de recursos permite que uma aplicação acesse diretamente os serviços de outra. Mais detalhes no post que ele escreveu no blog da Caelum.

  • Testes unitários em JavaScript: usar ou não usar mock? – Márcio Santana
  • Na última palestra, foram apresentadas ferramentas para testes de código Javascript. Esta palestra também foi muito interessante, pois testes de Javascript são muito pouco comuns, mas não deveriam, já que Javascript também é código, e as aplicações web atuais possuem uma quantidade cada vez maior de código Javascript, principalmente para manipular interações com os usuários. Além do QUnit – framework para testar Javascript -, foram apresentadas bibliotecas de mock, como o Chameleon.

Enquanto isso, na sala 1 ocorreram palestras sobre Arduino, empreendedorismo, Scum e Ruby.

Apesar de tudo, o evento teve alguns problemas de organização. Além da já citada indisponibilidade de WiFi, as duas salas ficavam em andares diferentes, e o coffee break era ao lado da sala 1, o que dificultava o deslocamento. Num determinado momento, a palestra da sala 2 terminou e todos desceram para o andar da sala 1 para o coffee break, porém não podíamos entrar, pois a palestra não havia terminado. Apesar destes pequenos problemas, o Dev in Rio deste ano manteve a qualidade da primeira edição. Agora, ficamos aguardando a edição de 2011!

Nunca use o método Date.getYear() do Javascript

January 29th, 2010

Até a década de 1990, era muito comum escrevermos datas com apenas 2 dígitos representando o ano (ex: 1996 -> 96). Como todos já sabem, esta prática levou ao famoso bug do milênio, pois, desta forma, o ano 2000 tornava-se 0 (ou 100, dependendo do caso), gerando uma série de problemas, especialmente em códigos que calculavam um período entre duas datas. Felizmente, hoje em dia não temos mais esta preocupação. Ou temos?

Outro dia fui testar um sistema em diversos browsers, e ao realizar o teste no Opera, verifiquei que o componente inputCalendar do Tomahawk abria no ano de 3910. Testei no Firefox, Google Chrome e Internet Explorer 6, 7 e 8, e todos eles funcionavam corretamente. Resolvi olhar o código fonte do componente, e descobri que ele verificava o ano atual usando o método getYear da classe Date. Este método é fonte de diversos problemas e gambiarras em códigos Javascript que manipulam datas. O motivo é que diferentes browsers interpretam o método de maneiras diferentes. De acordo com a especificação ECMA-262, a função getYear deveria retornar o ano atual menos 1900. Nas versões mais recentes, o Firefox e o Google Chrome seguem esta especificação, retornando 110 para o ano de 2010. Já o Opera e o IE retornam 2010, contrariando a especificação e gerando os problemas já conhecidos. É muito comum encontrarmos códigos que verificam qual é o browser (com comentários condicionais ou verificações por Javascript) e, quando não for o IE, somando 1900 ao valor retornado pelo getYear. Esta verdadeira gambiarra não resolve completamente, pois, como já citado, o Opera se comporta da mesma forma que o IE.

A solução ideal para este problema é substituir o método getYear por getFullYear. Este método retorna o ano completo, com 4 dígitos, em todos os browsers, eliminando qualquer necessidade de verificação de browser. Esta recomendação, inclusive, faz parte da especificação ECMA-262, na página 242:

The getFullYear method is preferred for nearly all purposes, because it avoids the “year 2000 problem.”

Após corrigir este bug do Tomahawk, abri uma issue no Jira do projeto, anexando um patch para corrigir o problema.

Outras Referências:

Extensões do Firefox recomendadas para desenvolvedores web

January 6th, 2009

Quase todo usuário de Firefox que tem um blog já postou uma lista de extensões recomendadas. Chegou a minha vez! Sei que muitas aqui já são velhas conhecidas da maioria, mas acho interessante ressaltar a importância. Hoje em dia é difícil imaginar o desenvolvimento web sem o auxílio do Firefox. Segue abaixo a lista de extensões que eu recomendo:

  • Firebug
    Como não poderia deixar de ser, o primeiro da lista, e totalmente indispensável, é o Firebug. Seria até exagero chamá-lo de extensão, pois o Firebug é uma verdadeira plataforma para debug de aplicações web. Com ele é possível, além de inspecionar visualmente o código HTML, seja diretamente pelo código, seja selecionando o componente visual associado a ele, é possível modificar o código, alterando, excluindo ou incluindo tags, e o resultado aparece em tempo real. O mesmo pode ser feito com os códigos Javascript e CSS da página. Há também um console para debug; é possível utilizar o comando console.log(“texto”) no seu código Javascript, e durante a execução, o texto será exibido no console do Firebug. Também é possível visualizar o resultado de todas as requisições, incluindo arquivos carregados (imagens, arquivos CSS, Javascript e Flash) e chamadas assíncronas (Ajax), exibindo o cabeçalho da requisição, o resultado, o tamanho do arquivo e o tempo de resposta. Esta extensão é tão poderosa que há extensões para ela, como o YSlow, do Yahoo, que exibe estatísticas de desempenho da página.

    Como o Firebug é só para Firefox, foi lançada uma versão Lite que também funciona com IE, Opera e Safari. Nunca testei esta versão, porém acredito que seja uma boa alternativa para debugar problemas que aconteçam num destes browsers mas não no Firefox. Nesse mesmo link é disponibilizada uma versão do Firebug Lite como bookmarklet. Basta arrastar o link para a barra de bookmarks do Firefox para poder utilizá-lo sem precisar instalar o Firebug.

  • Web Developer
    Esta extensão é uma das mais úteis no desenvolvimento web. Entre as opções disponíveis, ela permite visualizar o CSS da página, cookies, bloquear imagens e muitas outras funções.
  • Poster
    O Poster é uma extensão simples, porém muito útil para testar Web Services. Ele exibe uma janela com opções para digitar a URL de destino, o tipo de requisição (GET, POST, PUT ou DELETE), o body e os parâmetros. Feita a requisição, é possível visualizar a resposta recebida.
  • JavaScript Debugger
    Extensão muito poderosa, que exibe uma janela listando todos os arquivos Javascript da página atual. Pode-se definir breakpoints no código e executá-lo passo a passo, verificar e alterar valores de variáveis e tudo o que se espera de uma ferramenta de debug.

    Javascript Debugger

    Javascript Debugger

  • Greasemonkey
    Uma das extensões mais conhecidas, permite criar scripts usando Javascript para modificar o comportamento de sites específicos. O site Userscripts.org possui centenas de scripts pré-definidos para vários sites conhecidos. Com o Greasemonkey, você pode até mesmo ajudar a Vivo a adicionar suporte a HTML no Firefox.
  • Greasefire
    Extensão que adiciona ao Greasemonkey uma funcionalidade de busca automática de scripts para o domínio atual no Userscripts.org. Ao clicar no ícone do Greasemonkey, aparece uma nova opção no menu, que, ao ser selecionada, exibe em uma nova janela a lista de scripts encontrados.
  • CSSViewer
    O CSSViewer exibe todas as propriedades CSS dos elementos da página atual num div flutuante, conforme o cursor do mouse é movido pela tela.
  • X-Ray
    Mais uma extensão simples e útil. O X-Ray permite visualizar o código fonte de uma página sobre a própria. Desta forma, as tags HTML se misturam aos elementos da página, permitindo visualizar exatamente onde se localiza cada elemento do fonte, apesar de a visualização ficar um pouco confusa.
  • Live HTTP Headers
    Exibe numa janela os cabeçalhos HTTP de cada requisição, auxiliando na verificação de erros de rede. As informações dos cabeçalhos também podem ser exibidas numa barra lateral, e as URLs das requisições que serão analisadas podem ser definidas como expressões regulares.

    Live HTTP Headers

    Live HTTP Headers

  • Aardvark
    Esta extensão permite excluir elementos da página com um clique. É muito útil para acessar sites muito poluídos, com excesso de elementos na tela, ou quando há algum elemento sobrepondo outro, no caso de erros de visualização de sites que não foram testados no Firefox. Também pode ser utilizado para remover elementos desnecessários antes de imprimir uma página.
  • MeasureIt
    Exibe uma régua para contagem de pixels de um elemento. Útil para ajustes finos no design.
  • JSView
    Exibe um ícone no rodapé do Firefox. Ao clicar nele, é possível visualizar automaticamente todos os arquivos CSS e Javascript da página atual. Pouco útil caso você já utilize o Firebug.
  • ErrorZilla Mod
    Quando uma página estiver inacessível, esta extensão exibirá uma tela alternativa de erro, com opções para consultar esta página no Google Cache, tentar ping e trace, entre outras opções.

    ErrorZilla Mod

    ErrorZilla Mod

  • CheckBoxMate
    Permite marcar vários checkboxes de uma vez, através de drag & drop. Esta extensão não tem qualquer relação com desenvolvimento web, mas resolvi incluir na lista pois acredito que pode ser útil, por exemplo, quando se deseja selecionar vários emails no seu webmail.
  • Stylish
    Praticamente um Greasemonkey para CSS. Permite criar folhas de estilo para URLs específicas e pesquisar no Userstyles.org por estilos pré-definidos para o domínio atual.
  • ColorZilla
    Permite descobrir o código RGB da cor do elemento atual, fazer zoom de até 1000% na página (para facilitar a seleção de um elemento específico) e selecionar cores numa paleta, entre outras opções.
  • PDF Download
    Converte páginas Web para PDF, além de permitir selecionar a ação desejada ao clicar em um arquivo PDF (download, abrir com o programa padrão, abrir no browser).

Além de muitas extensões úteis, existem outras nem tanto. A extensão mais inútil para Firefox, na minha opinião, é o Fast Close Tabs: você acha irritante ter que clicar no X à direita de uma aba para fechá-la? Com esta extensão, você pode fechá-la clicando no X da própria janela do Firefox!

Finalizando, um site que acho muito interessante é o Firefox Facts, que traz muitas dicas sobre o Firefox, principalmente sugestões de novas extensões e temas.