Willian Fernandes

Como usar jQuery para remover um item de um Array JS

Comente »

Quem trabalha com JavaScript sabe que para remover um item de um array basta utilizar o método splice. Como o código abaixo:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas.splice(1,1);

O código acima retira a banana do array frutas. Isso porque no 1º parâmetro do método splice informamos qual a posição do item no array que queremos remover. O 2º parâmetro indica quantos itens, contando do item que informamos, queremos remover. Sendo assim, se quisermos remover a banana e a pera basta fazer assim:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas.splice(1,2);

Mas em muitos casos não sabemos qual a posição do item que queremos remover e sim qual o valor do item. Uma abordagem é procurar qual a posição do item percorrendo o Array e comparando os valores com o valor que temos. Um tanto quanto chato, concorda?

jQuery para todas as horas!

Como é mais que comum termos jQuery em projetos web, realizar o trabalho acima fica fácil. Pra isso precisaremos da função $.grep. Está função encontra todos os elementos de um array de acordo com uma expressão. Vamos aplicar nosso exemplo removendo a fruta banana do nosso array, mas agora não sabemos qual a posição que essa fruta se encontra no array. Nosso código ficará assim:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas = $.grep(frutas, function(val, index) {
	return val != 'banana';
});

Com a funcão $.grep podemos ir muito além. Por exemplo, ter um array com somente os elementos que forém pares:

numeros = [1, 2, 3, 4, 5, 6, 7, 8];
pares = $.grep(numeros, function(v) {
	return v % 2 == 0;
});
 
// Valor do array pares: [2, 4, 6, 8]

A função $.grep recebe 2 parâmetros obrigatórios: o array original e uma função callback. Esse callback recebe, por sua vez, 2 parâmetros: o valor do item atual e o índice (posição) desse valor no array.
Existe um terceiro parâmetro (não obrigatório) da função $.grep chamado inverse, que por padrão tem o valor false. Esse parâmetro inverte a condição dentro do callback, fazendo exatamente o contrário que mandamos ela fazer. Se adicionarmos o parâmetro inverse no exemplo acima, teremos:

numeros = [1, 2, 3, 4, 5, 6, 7, 8];
pares = $.grep(numeros, function(v) {
	return v % 2 == 0;
}, true); // Perceba que adicionamos um novo parâmetro
 
// Valor do array pares: [1, 3, 5, 7]
// pares agora só contém os valores ímpares

Perceba que a função $.grep não altera o array original. Nos exemplos acima o array numeros continuará tendo todos os elementos.

Bom, é isso. Espero que agora remover itens de um array JavaScript utilizando o valor seja mais fácil no seu dia-a-dia.

[ATUALIZADO]

Algumas pessoas se manifestaram no Twitter dizendo que isso é errado. Realmente, existe uma forma bem simples de remover um item de um Array em JavaScript sem saber a posição desse item e sem usar jQuery. Segue abaixo:

frutas = ['maçã', 'banana', 'pera', 'uva'];
index = frutas.indexOf('banana');
frutas.splice(index, 1);

Utilizamos o indexOf para descobrir qual a posição do valor que queremos remover e depois conseguiremos utilizar o splice normalmente.

Agora, sobre a parte de retornar somente os números pares, o Nando Vieira deu uma dica boa:

[1, 2, 3, 4, 5, 6, 7, 8].filter(function(item) {
	return item % 2 == 0;
});

OBS.: Navegadores antigos não suportam a função filter(). Use por sua conta e risco.

Dica rápida: RVM 1.8.1

Comente »

Pelo o que parece, a versão atual (1.8.1) do RVM não está funcionando para usuários Mac.

Se você tentar instalar qualquer versão do ruby com essa versão do RVM terá o erro:

Trying http:// URL instead.
curl: (3) malformed

Para funcionar corretamente tive que instalar a versão anterior, a 1.8.0:

curl -s https://rvm.beginrescueend.com/install/rvm -o rvm-installer ; chmod +x rvm-installer ; ./rvm-installer --version 1.8.0

Agora é esperar que eles lancem a correção na versão 1.8.2 para que os usuários Mac possam atualizar o RVM.

#fikdik

Como gerar validações client-side em projetos Rails usando jQuery Validator com ClientValidations

Comente »

Estou fazendo uma nova aplicação aqui na empresa e teremos muitos formulários. Para não precisar criar um script de validação para cada formulário, fui atrás de um plugin que gerasse as validação JavaScript automáticamente, com base nas validações do modelo.

Sem maiores problemas, encontrei o plugin Live Validations. Ele faz tudo o que preciso, quer dizer, quase tudo. :(

Alguns dos formulários dessa aplicação são Nested Model Form e o Live Validations não suporta esse tipo de formulário.

Sendo assim, resolvi fazer meu próprio plugin, chamado Client Validations. O que ele faz é basicamente ler as validações definidas no Model e traduzi-las para JavaScript usando jQuery Validator.

Instalação

script/plugin install git://github.com/willian/client_validations.git

Como o Client Validations depende do plugin Validation Reflection, preciaremos instalar ele também:

script/plugin install git://github.com/redinger/validation_reflection.git

E por último basta instalar o jQuery e o jQuery Validator:

Não esqueça de carregar o jquery e o validator no seu HTML:

<%= javascript_include_tag 'jquery-latest.min.js', 'jquery.validate.min.js' %>

Supondo que temos o modelo abaixo:

class Task < ActiveRecord::Base
  validates_presence_of :name
end
 

E o formulário desse modelo:

<% form_for(@task) do |f| %>
  <%= f.error_messages %>
 
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
<% end %>

Tudo o que precisamos fazer para a validação client-side funcionar é adicionar o helper client_validations no formulário. Ficará assim:

<% form_for(@task) do |f| %>
  <%= f.error_messages %>
 
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
  <%= f.client_validations %>
<% end %>

Provavelmente você receberá a seguinte mensagem de validação:

translation missing: en, activerecord, attributes, task, name can't be blank

Para resolver esse problema, basta criar o arquivo de internacionalização em config/locales.

O plugin ainda está na versão 0.1.0 e muita coisa pode ser feita para melhorá-lo. Se tiver alguma sugestão, crie um comentário ou use a página do GitHub: http://github.com/willian/client_validations

Pair Programming – Por que e como usar?

Comente »

Pair Programming é, para mim, a melhor forma de trabalhar em equipe. Facilita a comunicações e impede que o conhecimento de uma funcionalidade/lógica fique somente com um desenvolvedor.

Trabalhando em Pair foi fácil perceber a evolução das pessoas como profissionais. Um profissional Jr. rapidamente ganhava experiência, adquiria habilidades e virava fluente na linguagem[bb], ou seja, treinar a equipe usando Pair foi muito mais simples e barato para a empresa.

Mas, essa é minha opinião. Muita gente compartilha comigo esse mesmo sentimento, mas muita gente torce o nariz quando escuta as palavras Pair Programming juntas.

Mas como começar com Pair Programming?

Não adianta impor sua equipe a trabalhar assim. Mas antes de aceitar um não da equipe, é interessante testar e analisar a aceitação de todos.

Quando trabalhava na WebCo (Abril Dgital), resolvemos usar a Programação em Par[bb]. Foi fácil convencer todos, pois, no nosso caso, todos a maioria que torciam o nariz nunca tinham usado Pair, ou seja, não tinham argumentos.
No começo havia discussões, stress, mas com o tempo todos foram percebendo os ganhos que estávamos tendo com a adoção e virou regra da empresa utilizar Pair 100% do dia. Quando entrevistávamos alguém, um dos requisitos era a pessoa não ter nada contra ao trabalho em equipe, principalmente ao Pair.

Mas isso tudo poderia ter sido um tiro no pé. Por isso precisamos estudar caso à caso.
Hoje trabalho numa empresa que somente EU trabalhei com Pair Programming. Tive muitas barreiras para quebrar, principalmente dos gerente, mas felizmente consegui convencê-los e vou começar com Pair na minha equipe.

Como uso Pair Programming

Como uso Scrum para gerenciar o processo do desenvolvimento, ficou fácil dividir as duplas do Pair. No Daily Meeting, quando definimos o que faremos hoje, também definimos com quem faremos Pair. E durante o dia todo não trocamos de par, apenas revezamos, de tempos em tempos, o driver e o navigator. Esse revezamento pode ser feito marcando em um cronometro que avisará quando a troca ocorrerá, ou simplesmente quando a dupla julgar necessário (o que eu prefiro).

No dia seguinte, um das pessoas do par continua na história e a outra pessoa escolhe em qual história trabalhará e com quem fará par. O mesmo ocorre com os outros pares. Ou seja, assim conseguimos manter uma boa rotatividade. A idéia é que o maior número de pessoas possam trabalhar juntas durante o Sprint.

A dinamica


História 1: Juca - Pedro
História 2: Lucas - Thiago
História 3: Maria - Carla
1º Dia


História 1: Juca - Carla
História 2: Lucas - Pedro
História 3: Maria - Thiago
2º Dia


História 1: Carla - Thiago
História 2: Lucas - Juca
História 3: Maria - Pedro
3º Dia

E assim por diante…

Baby steps

Como disse, hoje estou começando com Pair na minha equipe, ela será uma cobaia dentro da empresa. Tendo bons resultados, poderemos expor para as outras equipes também dotarem o uso do Pair Programming.

Resumindo…

Não adianta impor, de cara, que toda a empresa adote o uso do Pair, escolha uma equipe madura, pense pequeno e, dando tudo certo, vá expandindo até que isso vire uma cultura dentro da empresa.

Respeite a opinião dos outros, aceite a derrota e mude de empresa se for o caso. Mas não faça inimigos tentando evangelizar algo. Acredite, não vale a pena. Se for necessário, peça ajuda. Tem muita gente na internet usando Pair.

Programador Lento x Produtividade x Cultura

Comente »

Hoje li o post do Rafael Lima e me deu vontade de falar sobre o assunto.

Conheço muita gente, incluindo donos de empresas de desenvolvimento, que confudem Programador Rápido com Qualidade/Produtividade. Além disso, essas pessoas costumam achar que quanto mais “Programadores Rápidos” forem contratados, mais rápidos seus projetos serão entregues, mais felizes seus clientes ficarão e mais projetos poderão desenvolver.

Isto é mentira!

Essas pessoas se esquecem que quanto maior a equipe mais complicado fica o gerenciamento[bb], que quanto mais rápido[bb] um programador for mais bug este código terá. Sim, sim, eu também conheço muita gente boa que programa rápido e entrega código com qualidade, mas vamos concordar que infelizmente essa não é a realidade da grande maioria.

Como o Rafael Lima disse, antes de julgar e comparar um programador rápido com um lento, vamos ver se estão fazendo testes, se estão se preocupando com a qualidade antes de entregar o produto. Prefiro entregar um produto bom com alguns dias de atraso do que entregar na data e falhar quando o cliente for usar.

E por falar em testes, essas mesmas pessoas insistem em deixar “5 horas” no final do projeto para a equipe de QA. Pensam, ou fingem pensar, que isso é o bastante para garantir a qualidade do produto e o sucesso do projeto.

Vejo isso todos os dias e só lamento.

Essas pessoas precisam ler mais sobre Getting Real, Gerenciamento de Projetos Ágeis e Gestão de Pessoas.

Concordo com o Rafael quando ele diz que prefere um programador lento do que o “rapidão da turma”.

Ambiente de desenvolvimento Ruby on Rails no Mac OS Snow Leopard

Comente »

Recentemente atualizei meu Mac para o Snow Leopard[bb] e fui logo configurar meu ambiente de desenvolvimento[bb].

Como alguns já sabem, programo em Python[bb], mas atualmente estou afastado da linguagem, utilizando 100% Rails[bb].

Uma das coisas que aproveitei quando resolvi instalar o Snow Leopard[bb] foi formatar todo o HD. Com o tempo fui acumulando alguns lixos, então juntei o útil com o agradável e fiz uma bela faxina.

Outra coisa: meu Vim estava todo bagunçado. Fiz uma cagada nele e estava difícil trabalhar com ele, então estava usando somente o TextMate[bb]. Adoro o TextMate, é um baita editor, mas não é meu Vim[bb]. Com o Vim me sinto mais em casa e não sofro quando preciso programar em uma máquina que não seja meu Mac[bb], afinal, o Vim é free e roda até no Windows[bb] (eca!).

Bom, vamos lá!

O Vim

Para facilitar sua vida, criei um repositório do meu Vim, todo configurado, pronto para uso.

Para instalá-lo, basta fazer o clone:

$ git clone git://github.com/willian/willvim.git

Entre no diretório criado pelo comando acima e execute o comando abaixo:

$ chmod +x install.sh
$ ./install.sh

Os comandos acima baixam os repositórios dos plugins e faz a instalação dos arquivos no seu diretório $HOME/.vim.

ATENÇÃO: Esses comandos não funcionarão no Windows[bb]. Em breve configurarei isso.

MacVim

Gosto de usar o MacVim[bb] (ou o gVim quando estou no Linux), pois tem uma aparência melhor do que o Vim no terminal.

Entre na página de download do MacVim e baixe a versão mais nova. A versão "stable" até a data deste post é a MacVim-7_2-stable-1_2.tbz.

Se você está no Linux[bb] e usa Ubuntu[bb], basta rodar o comando abaixo:

$ sudo apt-get install vim vim-gnome vim-full vim-python vim-rails vim-ruby

Agora basta rodar o comando mvim ou gvim (caso você esteja no Linux) no terminal para abrir o Vim no modo gráfico.

Ruby on Rails

Tanto a linguagem quando o framework já estão instalados no seu Mac, mas precisamos atualizá-los. Na verdade, você pode apenas atualizar o Rails[bb], e é exatamente isso que vou mostrar aqui.

Atualizando o RubyGems

$ sudo gem install rubygems-update

Esse comando instala a nova versão do RubyGems[bb]. Para verificar a versão instalada, rode o comando abaixo:

$ gem -v
1.3.5

Até a data deste post a versão mais nova é a 1.3.5.

Atualizando suas gems

$ sudo gem update

Atualizando o Ruby on Rails

Nesse ponto a versão do Rails já deve estar atualizada, mas caso não esteja, rode o comando abaixo:

$ sudo gem install rails

MySQL

Apesar de poder rodar o Rails com o SQLite[bb], gosto de usar o MySQL[bb] no ambiente de desenvolvimento. Para isso, acesso a página de download do MySQL e busque a versão mais nova. Na data de criação deste post a versão mais nova é a MySQL 5.1.

ATENÇÃO: Só fique atento à arquitetura escolhida. O Snow Leopard[bb] roda com 64bits[bb], então baixe a versão x86_64.

Feito isso, hora de instalar a gem do MySQL:

$ sudo env ARCHFLAGS="-arch x86_64" gem install mysql -- --with-mysql-config=/usr/local/mysql/bin/mysql_config

Testando tudo

Vamos criar um aplicação de teste para verificar se o Rails está rodando corretamente, incluindo o MySQL:

$ rails blog -d mysql
$ cd blog/
$ script/generate scaffold Post title:string body:string
$ rake db:create
$ rake db:migrate

Se não aparecer nenhuma mensagem de erro, os procedimentos acima foram executados corretamente e você agora tem um ambiente completo para desenvolver seus aplicativos com Rails.

O que mudou no Ruby 1.9

Comente »

Meu amigo Nando Vieira acabou de lançar mais um PDF da série HOWTO mostrando as mudanças do Ruby 1.9.

Por apenas R$ 10,00 você encontra um material completo e didático sobre as mudanças que ocorreram na nova versão do Ruby[bb] e as incompatibilidades que enfrentará ao migrar suas aplicações.

Além de ter sido escrito pelo Nando, o material teve seu conteúdo todo revisado pelo Luis Rocha. Ou seja, o material é bom!

Acabei de receber o e-mail com meu PDF e estou lendo ansiosamente, mas não poderia deixar de divulgar este trabalho aqui antes de ler.

Validação de Formulários com jQuery

Comente »

Não é difícil fazer validações de formulários no lado do cliente usando JavaScript. E com jQuery a brincadeira fica ainda mais fácil.

A primeira coisa a fazer é baixar o jQuery: http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
Renomei o arquivo para jquery.js.

Depois precisaremos baixar o plugin de validação, feito em jQuery: http://jquery.bassistance.de/validate/jquery.validate.zip
Descompacte o zip. Utilizaremos apenas o arquivo jquery.validate.js.

Agora vamos ao código!

O Formulário

<form id="form-signup" action="#" method="post" accept-charset="utf-8">
    <fieldset>
        <legend>Formulário de Cadastro</legend>
        <label>
            Nome:
            <input type="text" name="nome" />
        </label>
        <label>
            E-mail:
            <input type="text" name="email" />
        </label>
        <label>
            Sexo:
            <select name="sexo">
                <option value="">Selecione</option>
                <option value="F">Feminino</option>
                <option value="M">Masculino</option>
            </select>
        </label>
        <input type="submit" value="Cadastrar" />
    </fieldset>
</form>

A Validação JavaScript

// Inicia o validador ao carregar a página
$(function() {
    // valida o formulário
    $('#form-signup').validate({
        // define regras para os campos
        rules: {
            nome: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            sexo: {
                required: true
            }
        },
        // define messages para cada campo
        messages: {
            nome: "Preencha o seu nome",
            email: "Preencha seu e-mail de contato",
            sexo: "Informe seu sexo"
        }
    });
});

Veja o exemplo!

Brasigo, agora a festa vai começar!

Comente »

Depois de muita correria, trabalho e diversão acabamos de colocar o Brasigo no ar. Esse foi um dos motivos que me fizeram, mais um vez, parar de postar aqui no blog.

Está sendo muito divertido e emocionante participar do nascimento desse projeto, minha primeira participação em um projeto Rails.

Agora vamos manter o sistema funcionando, criar novos releases e, com o tempo, os posts aqui no blog e a minha leitura no Google Reader (sim, está beeeem acumulada) voltarão ao normal.

Espero o feedback de vocês!
;)

Desenvolvimento Web com Python, SQLObject e PSE – Parte 4

Comente »

Depois de mais uma longa pausa na série de desenvolvimento web com python[bb] cá estou, de volta com os posts.

Mas desta vez a pausa foi por um motivo nobre. Recentemente adquiri um MacBook[bb] e logo resolvi configurar o Apache2[bb] + mod_python + PSE + SQLObject + MySQL-python (MySQLdb). Precisava desta configuração para dar continuidade à série.

Então resolvi dedicar a 4ª parte da série exclusivamente para mostrar como configurar o ambiente no Mac OS X Leopard[bb].

Antes de efetuar os passos abaixo você precisará do Xcode instalado. Basta executar o 2º Disco do MAC OS X e executar o pacote de instalação do Xcode.

Apache

O Apache já vem instalado no MAC OS X, por isso precisaremos apenas habilitá-lo:
Vá em Preferências do Sistema, na opção Compartilhamento ative o serviço Compartilhamento Web.
Agora basta acessar http://localhost para ver o apache funcionando. Dentro do seu diretório home existe um diretório chamado Sites, basta colocar os arquivos lá e acessar pelo endereço http://localhost/~SEU_LOGIN.

Mod_Python

Agora chegou a hora de compilar o mod_python e configurá-lo no Apache.
Primeiramente faça o download do mod_python 3.3.1 (última versão disponível até a data deste post).

No terminal execute:

$ gunzip mod_python-3.3.1.tgz 
$ tar xvf mod_python-3.3.1.tar
$ cd mod_python-3.3.1
$ ./configure --with-apxs=/usr/sbin/apxs

Após executar os comandos acima o arquivo src/Makefile foi criado. Abra-o em seu editor de texto preferido e altere a linha 27:

LIBS=-lm  -framework  Python    -ldl
LDFLAGS= -Wl,-framework,Python  -u _PyMac_Error -framework Python   -Wl,-F.
OPT=

por:

LIBS=-lm  -framework  Python    -ldl
LDFLAGS= -Wl,-framework,Python  -u _PyMac_Error -framework Python   -Wl,-F. -arch x86_64
OPT=

Altere também a linha 49:

mod_python.so: $(SRCS)
    @echo
    @echo 'Compiling for DSO.'
    @echo
    $(APXS) $(INCLUDES) -c $(SRCS) $(LDFLAGS) $(LIBS) 
    @rm -f mod_python.so
    @ln -s .libs/mod_python.so mod_python.so

por:

mod_python.so: $(SRCS)
    @echo
    @echo 'Compiling for DSO.'
    @echo
    $(APXS) $(INCLUDES) -c -Wc,"-arch x86_64" $(SRCS) $(LDFLAGS) $(LIBS)
    @rm -f mod_python.so
    @ln -s .libs/mod_python.so mod_python.so

Cuidado para não quebrar a indentação. O arquivo todo está indentado por TAB se você utilizar espaço dará erro na hora de rodar o make.
Salve o arquivo e execute os comandos abaixo no terminal:

$ make
$ sudo make install

Precisamos efetuar uma alteração no mod_python para que ele funcione corretamente no Apache. Para isso abra o arquivo $ /Library/Python/2.5/site-packages/mod_python/importer.py como root e troque a linha 304 por esta:

        return __import__(module_name, {}, {})

Agora precisamos habilitar o mod_python no apache, para isso abra o arquivo /etc/apache2/httpd.conf (você precisará abrir o arquivo como root) e adicione a linha abaixo após a linha 116 (pelo menos foi a linha do meu arquivo):

LoadModule python_module libexec/apache2/mod_python.so

Pronto, agora é só reiniciar o Apache e o mod_python já estará configurado.

PSE

Baixe o PSE e execute os comandos abaixo no terminal:

$ tar xvf PSE-3.0.6.tar
$ cd PSE-3.0.6
$ sudo python setup.py install

Agora vamos configurar o Apache para aceitar os arquivos escritos usando o PSE. Abra o arquivo /etc/apache2/httpd.conf e adicione as linhas abaixo no final do arquivo:

PythonHandler pse_handler
AddHandler python-program .pt

Reinicie mais uma vez o Apache e crie dois arquivos de testes para ver se tudo está funcionando corretamente:
teste.py

msg = "Hello World!"

teste.pt

<?= msg ?>

Basta executar no navegador: http://localhost/teste.pt ou http://localhost/~SEU_LOGIN/teste.pt.

SQLObject

Instalar o SQLObject é simples, basta executar no terminal:

$ sudo easy_install -U sqlobject

MySQLdb

Instalar o MySQL-python exige uma pequena configuração. Primeiro baixe o arquivo e execute no terminal:

$ tar xzvf MySQL-python-1.2.2.tar.gz
$ cd MySQL-python-1.2.2

Abra o arquivo setup_posix.py e na linha 26 altere:

mysql_config.path = "mysql_config"

por:

mysql_config.path = "/usr/local/mysql/bin/mysql_config"

Agora abra o arquivo _mysql.c e remova as linhas 34, 37, 38 e 39:

#else
#include "my_config.h"
#endif
#ifndef uint
#define uint unsigned int
#endif

Também será preciso alterar as linhas 480 e 481:

    uint port = MYSQL_PORT;
    uint client_flag = 0;

por:

    unsigned port = MYSQL_PORT;
    unsigned client_flag = 0;

No terminal execute:

$ sudo ln -s /usr/local/mysql/lib /usr/local/mysql/lib/mysql
$ sudo python setup.py build
$ sudo python setup.py install

Quando fizer o comando de sudo python setup.py build você poderá receber algumas mensagens de warning, ignore-as.

Para testar o SQLObject execute o script python abaixo:

from sqlobject import *
sqlhub.processConnection = connectionForURI('mysql://root:SUA_SENHA@localhost/test')
class Usuario(SQLObject):
    nome = StringCol()
 
Usuario.createTable()

Após executar o script acima a tabela usuario deverá existir no banco de dados test.

Se você tiver problemas para executar o SQLObject com MySQL verifique se a versão do MySQL instalada é a de 32bits.

Pronto, o ambiente está completamente configurado no MAC OS X.

Agora voltaremos com nossa programação normal!
;)