Depois de quebrar a cabeça por um bom tempo, descobri que após adicionar a lib Prototype ao projeto, algumas validações javascript simplesmente deixaram de funcionar. O for in, que antes funcionava corretamente, muda seu comportamento devido à magia negra que o Prototype faz, adicionando algumas propriedades extras aos objetos (e também à arrays).

Se eu tivesse feito uma dúzia de JSUnits teria evitado mais de duas horas de tempo perdido, literalmente.

O que antes era:

o.isCNPJ = function(){
var d = this.split("");
var m1 = [d[0]*5,d[1]*4,d[2]*3,d[3]*2,d[4]*9,d[5]*8,d[6]*7,d[7]*6,d[8]*5,d[9]*4,d[10]*3,d[11]*2];
var s1 = 0;
for(i in m1){ s1 += m1[i]; }
var d1 = (s1%11<2)?0:11-(s1%11);
var m2 = [d[0]*6,d[1]*5,d[2]*4,d[3]*3,d[4]*2,d[5]*9,d[6]*8,d[7]*7,d[8]*6,d[9]*5,d[10]*4,d[11]*3,d1*2];
var s2 = 0;
for(i in m2){ s2 += m2[i]; }
var d2 = (s2%11<2)?0:11-(s2%11);
return (d1 == d[12] && d2 == d[13])? true: false;
}

Teve que virar:

o.isCNPJ = function(){
var d = this.split("");
var m1 = [d[0]*10,d[1]*9,d[2]*8,d[3]*7,d[4]*6,d[5]*5,d[6]*4,d[7]*3,d[8]*2];
var s1 = 0;
for(var i=0;i < m1.length; i++){ s1 += m1[i]; }
var d1 = (s1 % 11 < 2)?0:11-(s1 % 11);
var m2 = [d[0]*11,d[1]*10,d[2]*9,d[3]*8,d[4]*7,d[5]*6,d[6]*5,d[7]*4,d[8]*3,d1*2];
var s2 = 0;
for(var i=0;i < m2.length; i++){ s2 += m2[i]; }
var d2 = (s2%11<2)?0:11-(s2%11);
return (d1 == d[9] && d2 == d[10])? true: false;
}

Nessas horas que vemos que testes unitários sempre se pagam.

Javascript já não é mais o mesmo faz um bom tempo. Com a explosão de popularidade de sites falando sobre Ajax, a forma como é vista o (aparentemente só agora) bom e velho Javascript mudou muito.

Frameworks não param de aparecer: Prototype, Dojo toolkit, moo.fx, Backbase, OpenRico, script.aculo.us…

Mas e onde estão as referências decentes falando desse Javascript recém-saído do spa que estamos vendo poraí? A maioria dos livros já estão mais do que ultrapassados (a maioria falando até do já morto-e-enterrado Netscape).

Dando uma pesquisada, achei um trabalho que está sendo feito pelo John Resig justamente sobre isso: um livro com técnicas avançadas de javascript e bem atualizado.

Pro Javascript Techniques ainda não foi lançado, mas só pelo conteúdo foi direto pra wishlist.

Duas ótimas notícias para quem simpatiza com Ruby. A primeira é o lançamento do livro do Taq. Perfeito para quem está querendo começar, mas não tem uma boa base de inglês. Ponto para a comunidade brasileira.

A outra é o lançamento do Rails 1.1. Algumas features que chamam atenção (além é claro, dos 500+ bugfixes e tweaks):

• RJS – JavaScript escrito em Ruby: que tal um bocado de Ajax/Javascript só com Ruby?

  # Chamada para efeitos do script.aculo.us
  page[:cart].visual_effect(@cart.size == 1 ? :appear : :highlight)
  
  # Atualiza um pedaço de html
  page[:cart].replace_html :partial => "cart"
  

• Active Record – Cascading eager loading: busca em cascata.

  # Single database query:
  companies = Company.find(:all, :include => {
    :groups => { :members=> { :favorites } } })
  
  companies[0].groups[0].members[0].favorites[0].name
  

• Active Record – Polymorphic associations and join models: possibilidade de relacionamentos many-to-many mais complexos.

  class Author < ActiveRecord::Base
    has_many :authorships
    has_many :books, :through => :authorships
  end
  
  class Book < ActiveRecord::Base
    has_many :authorships
    has_many :authors, :through => :authorships
  end
  
  class Authorship < ActiveRecord::Base
    belongs_to :author
    belongs_to :book
  end
  

Confira mais novidades no blog do Scott Raymond.

Postizinho rápido pra passar algumas tools que uso junto com o Firefox e que tornam meu dia-a-dia na web bem mais agradável:

• Adblock: permite que você bloqueie aqueles banners enormes e extremamente desagradáveis que alguns sites continuam usando.
• Download Statusbar: simples, ao invés do Firefox abrir uma janelinha nova com os dowloads essa extension joga eles na sua status bar.
• FireFTP: não é nenhum client espetacular de FTP, mas quebra um galhão.
• Flashgot: integrado com o Flashget é perfeito para quem gosta de fazer uma pá de downloads e odeia ficar clicando emt trocentos links. Clique direito, flashgot all, e pimba, tudo no seu gerenciador de downloads.
• linkChecker: Verifica a página atual atrás de links quebrados. Mais útil pra quem trabalha com web.
• LiveHTTPHeader: uma maravilha pra dar debugar aplicações que tem, er, Ajax.
• Menu Editor: não sei se é só comigo, mas tem muita opção no menu do Firefox que eu nunca uso. Essa extension serve justamente pra isso, fazer uma faxina na casa.
• SessionSaver: sabe quando você está recém abriu seu bloglines, e já ta com 20 tabs abertas recheadas de conteúdo de alta qualidade e do nada, pum, o Firefox tranca. Usando ele o Firefox pode pendurar igual, mas ao menos seus cabelos ficam.
• TargetKiller: você odeia quem inventou target=”_new”? Eu também.
• WebDeveloper: Instala uma barrinha cheia de utilidades pra quem precisa dar uma de designer de vez enquando.
• GreaseMonkey: esse carinha dispença aprensentações, mas caso alguém não conheça, ainda, é uma extension que permite que os usuários insiram código javascript diretamente no fonte do seu site, podendo alterar e fazer o escambal. Perfeito. Seguem alguns scripts que eu uso:

• Auto-login: para os sites que você já deixou a senha salva porque é tão insignificante que não vale nem o trabalho de digitar a senha? Bom, se a senha já ta salva, ele faz o serviço chato. Ele aperta o submit pra você.
• Orkut album zoom: pra dar uma passeada no orkut sem muita encomodação na hora de ver as fotos dos outros, esse script joga todas as fotos tamanho normal direto na página principal do album. Facilita e muito.

Done.

Estou disponibilizando ela aqui e quem quizer utilizar/melhorar/dar sugestões é só falar.

Logo que comecei a programar, conheci o Dreamweaver. Achei ótimo clicar e arrastar componentes pra cá e pra lá, colocar formatação, tudo muito prático. Felizmente, as pessoas evoluem. Aos poucos começei a entender melhor o que acontecia por baixo dos panos, e entender também o significado daquela monstruiosidade de tags que eram criadas. Conforme fui evoluindo, mais cresceu meu desafeto com ele, devido ao código porcalhão que ele gera. A facilidade de ver as alterações on-the-fly continuava lá, mas já começava a fazer tudo no braço.

A partir dai, cada vez mais busquei editores que facilitassem minha vida, não visualmente, mas que permitissem gerar um código elegante com maior velocidade e facilidade.

Experimentei de tudo, Scite (recomendação do Jonas), Crimson Editor, UltraEdit, Dreamweaver, entre muitos outros, mas sempre sentia falta de algo, fosse um code completion decente ou um syntax highlighter pra alguma linguagem. E ficar trocando de editor pra cada tipo de arquivo que for editar, além de ser improdutivo (você acaba não sabendo usar nenhum bem), obriga você a ter mais que um editor no computador – e pior, ficar alternando entre eles.

Felizmente, chegou ao meu conhecimento um editor que estava ganhando espaço – e fazendo bastante sucesso: o Eclipse. No começo, não me chamou a atenção, parecia ser mais um editor com uma interface legal e com um code complete aguçado. Pesquisando um pouco mais sobre ele, descobri que sabendo usá-lo corretamente – e por completo, pode fazer chover. Tirando proveito da plataforma super extensível dele, com alguns plugins ele pode ser tornar um ambiente de trabalho muito produtivo.

Antes de partir para os plugins, vou dar algumas dicas referentes ao funcionamento e utilização dele como um todo. Para começar, entre no site do Eclipse, e faça o download dele, selecionando conforme o seu sistema operacional. Feito isto, recomendo que descompacte ele em alguma pasta de fácil acesso (algo como c:\dev\eclipse\). Abra ele e use por um tempo, crie um projeto, alguns arquivos, altere as opções, salve, edite, bagunce mesmo – mas lembre-se, sempre tenha uma cópia do arquivo de instalação dele para um eventual “acidente”.

Atalhos do editor

* alguns funcionam somente no editor Java

• <Ctrl> + <Space> – Abre o code completion. Lembre-se, anote, marque na sua testa, control-espaço é seu amigo;
• <Ctrl> + <Shift> + <r> – Open Resource. Abre uma janela para abrir qualquer arquivo (xml, properties, jsp, etc);
• <Ctrl> + <Shift> + <t> – Open Type. Abre uma janela para pesquisa das classes disponíveis;
• <Ctrl> + </> – (des)Comenta bloco de código;
• <Alt> + (<up> ou <down>) – Move bloco de código;
• <Shift> + <Enter> – Insere linhas em branco abaixo da atual;
• <Ctrl> + <Shift> + <Enter> – Insere linhas em branco acima da atual.
• <Ctrl> + <d> – Remove linha atual;
• <Ctrl> + <1> – Exibe possíveis soluções para um problema que ele encontrou no seu código;
• <Ctrl> + <Shift> + <o> – Ajusta seus imports(no caso do Java ao menos);
• <Ctrl> + <Shift> + <f> – Formata o código conforme configuração de padrão definida;
• <Ctrl> + <m> – Altera entre maximizada/default para uma view, muito útil quando se está trabalhando com arquivo com muito código;
• <Ctrl> + <h> – Busca por referências do elemento(método,atributo…) que o cursor está posicionado sobre, em todo projeto;
• <Ctrl> + <i> – Corrige identação de um pedaço de código;
• <Ctrl> + <3> – Quick Access… quase um Quicksilver para o Eclipse;
• <Ctrl> + <3> – Quick Outline… exibe a lista de métodos/atributos da classe. Se pressionado 2 vezes, exibe também das classes mães;

Eclipse Plugins

Bom, depois de toda essa ladainha, vamos ao que interessa, os plugins. O Eclipse conta com uma estrutura muito boa no quesito extensibilidade – mesmo sua API sendo criticada por alguns. Pode-se adicionar features para praticamente qualquer propósito nele. A instalação de plugins é muito fácil e pode ser feita de duas maneiras:

• Via update site – abra o Eclipse, vá em “Help”, “Software Updates…”, “Find and Instal…” Na tela que abre, selecione a segunda opção e de next. Clique agora em “New Remote Site…”. No campo “Name” coloque o nome do plugin que será instalado, e no campo URL coloque o endereço do update site(quando existir um). Clique agora no íncone de “+” ao lado do nome do plugin e selecione o “pacote” que você deseja instalar. Clique em “Next”. Selecione a versão do plugin, dê “Next”, aceite os termos do plugin e vá em “Finish”. Ele vai baixar automaticamente os arquivos necessários e provavelmente vai pedir para você restartar o Eclipse.
• Via download – entre no site do desenvolvedor do plugin, baixe o arquivo contendo o plugin e descompacte ele. Normalmente, os pluguins vem com uma ou duas pastas dentro: “plugins” e “features”. Coloque os arquivos nas suas devidas pastas e entre novamente no Eclipse.

Procurei deixar os plugins com funcionalidades semelhantes próximos para facilitar a localização. O nome do plugin é também um link para o site do desenvolvedor/projeto, ficando ao seu lado o link para download ou update site, seguido de uma pequena descrição.

Eclipse Web Tools Plataform (WTP) – Download
Provavelmente quem já usa o Eclipse à mais tempo deve conhecer o Lomboz. O WebTools na verdade é uma “continuação” do projeto Lomboz, mas agora como sub-projeto da Eclipse Foundation. Vem com editores para JSP, HTML, Javascript, CSS, SQL, XML, DTD, XSD e WSDL.

Run Jetty Run – Update site
Uma forma decente e simples de usar o Jetty para desenvolvimento, já que o connector atual disponível pro WTP é uma piada de mal gosto.

Aptana – Update site
Excelente plugin para coding e debug Ruby + Rails (antigo RadRails), Python+Jython(antigo PyDev), JavaScript/Ajax (Jaxer), PHP, xHTML/RHTML e CSS, além de Adobe Air e iPhone. Seu site conta com diversos screencasts demonstrando a utilização do plugin.

Hibernate Tools – Update site
Auxilia o desenvolvedor que utiliza Hibernate na sua aplicação, facilitando a edição dos hbm.xmls (com syntax highlighting, code-completion), permite navegação e impressão do entity model, engenharia reversa e geração de código, code completion para HQL/JPA-QL queries diretamente no editor Java, editor para testes para Criteria queries e HQL/JPA-QL queries. A criação do console configuration para você poder utilizar o plugin também é mostrada no site.

Spring IDE – Update site
Interface gráfica para trabalhar com arquivos de configuração do Spring Framework. Conta com diversas features como editor para os arquivos de configuração dos beans, validação dos arquivos de configuração, etc.

Eclipse PDT – Update site
Plugin oficial da Eclipse Foundation para quem desenvolve PHP. Inicialmente criado pela Zend (empresa de dois grandes contribuidores do PHP).

PHPEclipse – Update site
Pra quem desenvolve PHP, este plugin é uma legítima mão na roda. O code assist dele é ótimo, tendo praticamente todas (se não todas) as funções nativas. Possui integração com MySQL e com o Apache. No seu site explica como instalar o debbuger e o pacotão WAMPP. No Wiki do site Plog4u existe um ótimo tutorial para este plugin.

Groovy Eclipse Plugin – Update site
Plugin para suporte à Groovy desenvolvido pelo pessoal da Codehaus.

EPIC – Eclipse Perl Integration – Update site
Plugin bem completo para Perl, vem com o mesmo tester de regular expressions do Ruby Development Tools(o código foi cedido por eles). Pra quem ainda usa Perl é uma boa pedida.

CFEclipse – Update site
Possui syntax
highlighting, code insight, content outline e auxilia a encontrar problemas no código. Substitui perfeitamente qualquer editor proprietário da Macromedia como o HomeSite, Dreamweaver e o próprio ColdFusion. Talvez o pessoal do CFGigolô conheça.

C/C++ Development Tools – Update site
Adiciona funcionalidades para desenvolvimento em C/C++ ao Eclipse.

Subversive – Update site / Connectors update site
Oferece suporte ao Subversion de forma similar ao suporte à CVS que já vem integrado com o Eclipse. Conta com diversas features legais, além de ter uma interface simples de usar.

EclipseME – Update site
Plugin para auxiliar no desenvolvimento de MIDlets J2ME, permitindo que o desenvolvedor se preocupe mais com o desenvolvimento da aplicação do que com requisitos específicos da plataforma J2ME.

QuantumDB – Update site
Quantum é um plugin para acesso à banco de dados, através de um driver JDBC padrão. Sua interface mostra tabelas, views e sequences em formato de árvore (como a maioria) e possui também um SQL editor com syntax highlighting.

Clay Database Modeling – Download
O Clay é um plugin que ajuda no design de um banco de dados. Ele possui algumas features bem interessantes, como: interface super intuitiva, engenharia reversa e editores gráficos.

AnyEdit tools – Update site
Adicionar algumas funções para facilitar o desenvolvimento, como conversão caracteres para entidades HTML, maiúscula/minúscula, espaços/tabulações, remover espaços no final das linhas.

TPTP Testing Tools – Update site
Como o nome sugere, o TPTP é um pacote de ferramentas voltadas para ciclos de testes, que se extende de testes manuais à testes para aplicações web. Possui integração com o JUnit.

PMD – Update site
Acredito que o PMD seja o plugin de verificação/análise de bugs e estilo de código mais usado na atualidade. Possui uma série de verificações legais como busca por blocos vazios de try/catch/finally/switch, variáveis não usadas, entre outras. Dica de amigo: mantenha ele longe do seu analista se você não conhece o código à fundo.

Eclipse-CS – Update site
O plugin integra o já famoso code analyzer Checkstyle, ferramenta para ajudar você a garantir que seu código Java adere à alguns padrões de codificação. O Checkstyle faz isso inspencionando seus códigos fontes e apontando os itens que foram selecionados no conjunto de regras disponíveis. Além disso, você pode usar o Checkstyle diretamente da linha de comando, ou como parte do seu nt build.

Find Bugs – Update site
Ferramenta que ajuda à detectar bugs em potencial para códigos Java.

Outras distribuições do Eclipse

• Aptana Studio
• JBoss Tools
• MyEclipse
• IBM Rational software
• BEA Workshop Studio
• EasyEclipse
• Exadel Studio
• Yoxos
• Omondo UML

Dicas

• Se você instalar dois ou mais plugins que possuam editor’s para o mesmo tipo de arquivo (ex: DBEdit e DBExplorer, para *.sql), você pode facilmente editar o default entrando em “Window” >> “Preferences” >> “Workbench” >> “File Associatons”. Selecione o tipo de arquivo que você deseja alterar o padrão e logo abaixo irá aparecer os editor’s disponíveis. Marque o desejado e clique em “Dafault”.
• Uma coisa que quem está começando não sabe, é que o Eclipse não usa o CLASSPATH do sistema. Então para adicionar libs / classes / projetos, você precisa fazer isso diretamente na IDE. Clique com o botão direito do mouse no nome projeto, entre em Properties -> Java Build Path -> Libraries. Feito isso, entre em “Add class folder” para adicionar um diretório com .class, e “add jars / add external jars” para adicionar jars.
• Quando você instalar um plugin, pode ser que o Eclipse não reconheca automaticamente, então você deve usar o parâmetro -clean (“C:\eclipse\eclipse.exe -clean” por exemplo). Utilizando este parâmetro, você estará forçando o Eclipse a reconstruir o repositório no qual ele armazena todos os plugin.xml’s (ele faz isso como uma forma de tornar o load inicial mais rápido).
• Além do -clean, o Eclipse oferece uma série de outros parâmetros que podem ser utilizados na sua inicialização, que podem inclusive aumentar sua performance.

Links relacionados

• How to Install and setup Eclipse with Sun’s Java – Ubuntu
• Refactoring for everyone
• Getting started with the Eclipse Platform
• Build GUIs with the Eclipse Visual Editor project
• Extending Eclipse with Helpful Views
• EclipseCON Tutorials
• Java Code Templates
• Tune Eclipse’s startup performance, Part 1 & Part 2
• Finding unresolved Plug-in dependencies in Eclipse

Já vi e pesquisei por diversas soluções de como validar formulários via javascript na internet, mas nunca encontrei uma que atendesse a todos as minhas necessidades e não fosse muito fora dos standards.

Hoje lendo meus feeds no bloglines.com, vi o artigo publicado no List Apart, que fala justamente sobre isso. As formas que são apresentadas ficaram muito agráveis na minha opinião.

Uma das soluções é adicionar ao class do elemento à ser validado tags que indicam o que deve ser validado. Ex:

<input class="required inputs" type="text">

E validar da seguinte forma

if ( x[i].className.indexOf('required') != -1 && !x[i].value ) //alerta usuário

A solução funciona legal, mas como o autor comenta, tipicamente o
atributo class é usado somente para elementos de apresentação.

Logo abaixo, é mostrado uma solução utilizando custom atributtes, ex:

<input required="true" type="text">

O exemplo não valida no w3 tipicamente, mas é mostrada uma solução um tanto quanto legal. Criar um custom DTD, que inclui as propriedades criadas por você. E praticamente todos browsers suportam o método getAttribute(), que permite que estas propriedades sejam capturadas.

Com estas dicas, fica possível criar um framework’zinho javascript para validar qualquer tipo de dados e adicionar muitas funcionalidades aos formulários.

Aguardem mais dicas toscas nos próximos episódios…