leonardofaria.net

Links for 2013-01-21 [del.icio.us]

Tue, 22 Jan 2013 00:00:00 PST

Elusive icons, an icons font designed for use with Bootstrap

Links for 2013-01-20 [del.icio.us]

Mon, 21 Jan 2013 00:00:00 PST

Gource, uma forma estilosa de ver logs do seu controle de versão

Leonardo — Sun, 20 Jan 2013 18:53:58 +0000

O Catarse é uma plataforma brasileira de crowdfunding que em 2 anos já apoiou mais de 700 projetos, movimentando quase 5 milhões de reais. São números impressionantes, estão todos de parabéns por fazer acontecer, mas não é essa a razão do meu post :)

Ao me deparar com seu post de estatísticas, o vídeo da evolução do código-fonte do app deles me chamou a atenção. Ele foi feito com o Gource, que até o momento não conhecia. Esse aplicativo lê os logs do sistema de controle de versão (Git, Mercurial, Bazaar, Subversion) do seu projeto e gera a visualização gráfica da evolução do desenvolvimento. Por exemplo, o vídeo abaixo mostra a evolução dos commits de 2004 a 2009 do Rails:

O Youtube está cheio de vídeos desse tipo. Se você usa Mac OS, pode instalar o gource via port:

port install gource

Links for 2013-01-19 [del.icio.us]

Sun, 20 Jan 2013 00:00:00 PST

Niterói 64

Links for 2013-01-17 [del.icio.us]

Fri, 18 Jan 2013 00:00:00 PST

O que aprendi com os filmes

Links for 2013-01-15 [del.icio.us]

Wed, 16 Jan 2013 00:00:00 PST

Links for 2013-01-11 [del.icio.us]

Sat, 12 Jan 2013 00:00:00 PST

Uma tonelada de truques para a web mobile

Dicas aleatórias para gestão de código

Leonardo — Sun, 06 Jan 2013 12:02:56 +0000

No post anterior mostrei como migrar um repositório de SVN para Git. No meu caso, eram mais de 2000 commits, 1 GB de código, feito por meia dúzia de programadores. Abaixo compartilho algumas dicas que podem ser úteis na gestão de todo esse código:

Controle de Banda

Ao fazer a migração dos repositórios, comi uma boa parte da banda de Internet e vi que no servidor local de Internet não havia nada para balancear velocidade. Fazendo meu dever de casa, descobri que é possível controlar a banda do que o Mac OS transfere, através do utilitário ipfw. Por exemplo, se você quer limitar a 200KB o tráfego que sai de sua máquina pela porta 22 – execução de um git push, por exemplo – digite:

sudo ipfw add pipe 1 ip from any to any out dst-port 22
sudo ipfw pipe 1 config bw 200KBytes/s

Isso criará uma regra em seu sistema operacional. Para conferir as regras em execução:

sudo ipfw pipe list

…e para apagar a regra criada:

sudo ipfw pipe delete 1

Gitlab

O Gitlab é feito com Rails e faz o gerencimento de repositórios Git. Sua interface e funcionalidades lembram muito o GitHub. Você cria e edita repositórios com cliques, adiciona membros ao time com facilidade e ainda tem a possibilidade de criar wikis para seus projetos. Só me arrependo de não o ter instalado antes.

StatSVN

O StatSVN é um programa em Java que lê seu log do Subversion e produz várias estatísticas. Se você é ligado a números, teste esse programa!

Migrando um repositório SVN para GIT

Leonardo — Fri, 04 Jan 2013 12:39:33 +0000

Nos últimos dias, pesquisei uma forma de migrar um repositório de SVN para GIT e quando consegui fazer, percebi que era mais fácil que eu imagina. Com isso, resolvi escrever uma receitinha de como fazer isso.

Inicialmente você deve criar um arquivo mapeando seus usuários do SVN para o GIT. Ele deverá ter o formato abaixo:

leonardo = Leonardo Faria
autor2 = Autor

Nota: caso você não queira manualmente escrever esse arquivo, vasculhe o log do seu projeto SVN e obtenha a lista de autores automaticamente:

svn log -q | awk -F '|' '/^r/ {sub("^ ", "", $2); sub(" $", "", $2); print $2" = "$2" <"$2">"}' | sort -u > authors.txt

A seguir, crie um novo repositório e defina os autores dos commits de acordo com o criado no arquivo acima.

mkdir repo && cd repo
git svn init http://server/svn/project/trunk --no-metadata
git config svn.authorsfile ~/authors.txt

Lembre-se que todos os autores de commits devem constar no arquivo, caso contrário o processo não irá funcionar. Em seguida, execute:

git svn fetch

Dependendo do tamanho do seu repositório, isso pode demorar um pouco.
Em seguida, é só adicionar as configurações do servidor e pronto!

git remote add origin git@server:path/repo.git
git push -u origin master

Uma coisa mais

Você também pode converter as propriedades do svn:ignore para um arquivo .gitignore. Para isso:

git svn show-ignore > .gitignore
git add .gitignore
git commit -m 'Convert svn:ignore properties to .gitignore.'

Links for 2013-01-03 [del.icio.us]

Fri, 04 Jan 2013 00:00:00 PST

Detect Mobile Browsers - Open source mobile phone detection

Configurando o Sublime Text 2

Leonardo — Mon, 31 Dec 2012 11:30:47 +0000

Tempos atrás tinha instalado o Sublime, mas não o usei efetivamente. O Nando Vieira fez um ótimo post detalhado sobre o editor, e após isso, resolvi dar uma olhada mais a fundo. O Sublime é altamente configurável e abaixo cito algumas modificações que fiz.

Plugins

O Sublime possui um gerenciador de plugins que extendem as funcionalidades do editor. O post que citei do Nando mostra como instalá-los. Esses são os plugins que andei testando:

Git: integra funcionalidades do Git a seu projeto;
SidebarGit: integrar comandos do Git a sidebar do projeto;
MacTerminal: integra o iTerm 2 ao Sublime;
BracketHighlighter: destaca blocos de código. Útil quando você pega código alheiro e se perde tentando entender onde começam e terminam funções e métodos;
Sublime Lint: valida a sintaxe inline de códigos JavaScript, Ruby e PHP. Nunca fui fã desses recursos, mas resolvi instalar para experimentar;

Tema

No Textmate eu usava o esquema de cor All Hallow’s Eve. Esse e todos os outros esquemas de cores podem ser usados no Sublime. Para isso você precisará do tema Soda. Criei um fork do tema original para colocar ícones nas pastas, baseado em um hack que encontrei. Para instalar o tema, clona o repositório:

cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
git clone https://github.com/leonardofaria/soda-theme.git "Theme - Soda"

Para ativá-lo, abra o arquivo de preferências do Sublime (Sublime Text 2 > Preferences > Settings – User ou command + ,) e adicione:

{
"theme": "Soda Light.sublime-theme",
"color_scheme": "Packages/Color Scheme - User/All Hallow's Eve Custom.tmTheme"
}

Os temas do Textmate podem ser encontrados nesse repositório do Github. O tema Soda permite a customização das abas, tornando-as semelhantes as abas do Google Chrome.

Para usar o estilo clássico de abas, acrescente no seu arquivo de preferências:

"soda_classic_tabs": true

Ícone

Eu particulamente não gosto do ícone padrão do Sublime. No Dribbble, vi alguns designers fazendo releituras do icone original. Uma busca no site retorna dezenas de boas opções.

Escolhido o ícone, basta copiá-lo do site e substituí-lo no Sublime. Vá na pasta Aplicativos do seu Mac OS, clique com o botão direito no ícone do Sublime e escolha “Mostrar Conteúdo do Pacote”. Em seguida, localize a pasta Contents > Resources. O arquivo a ser substituído é o “Sublime Text 2.icns”.

Raspberry Pi

Leonardo — Sun, 30 Dec 2012 17:10:41 +0000

A alguns dias atrás comprei um Raspberry Pi. Ele é um computador do tamanho de um cartão de crédito, possui um processador de 700 MHz, 512 MB de Ram e você pode usar um cartão de memória como disco de boot. Para alimentação, um carregador de celular basta. Estou usando um teclado de um iMac capacete e um adaptador wifi xing ling para acessar a rede sem fio de casa.

Existe uma versão de Debian específica para ele, mas se você não gosta dessa distribuição, pode usar o Arch Linux. Escolhi o Debian, configurei Apache e PHP para me enviarem email com o IP do computador e assim trabalho remotamente com ele. Ainda não dei um destino final a ele, mas pela Internet dá para imaginar várias possibilidades:

Painel de fotos;
Media Center, para reproduzir seus filmes, usando o conhecido XBMC;
Portão eletrônico de garagem;
Wireless airplay speaker, muito bacana para quem não tem um Apple TV.

Para agilizar o desenvolvimento do frontend

Leonardo — Wed, 21 Nov 2012 22:45:14 +0000

Uso o Chrome como browser padrão em minha máquina e algumas extensões interessantes para desenvolvedores.

Kingsquare HTML Validator: faz validação do seu código usando o Tidy. Se você usa o Safari, não deixe de conhecer o Tidy Validator
Secure Shell: um terminal em seu browser – atualmente prefiro o iTerm ligado em um monitor extra e com várias telas divididas.
PageSpeed Insights: uma espécie de YSlow do Google. Descobri em um vídeo (slides) do Ilka Grigorik.
Window Resizer e Resizer: uso o primeiro para testar o layout em diferentes resoluções do desktop; enquanto o segundo trás as resoluções de celulares e tablets.

mytop, para monitorar seu MySQL

Leonardo — Thu, 04 Oct 2012 00:27:33 +0000

O mytop é um clone do comando top para o MySQL. Ele é usado para monitorar a performance do seu banco, sem precisar de softwares caros, complexos ou pesados. Ele é escrito em Perl e abaixo está um mini-roteiro de como instalá-lo – no meu caso, Mac OS Mountain Lion.

Antes de compilar o mytop é necessário instalar o pré-requisito DBD-Mysql. No terminal, digite:

perl -MCPAN -e 'shell'

Em seguida, execute:

get DBD::mysql
exit

Ao sair do prompt do cpan, digite:

cd ~/.cpan/build/DBD-mysql-/
perl Makefile.PL--testuser='mysql_user_name' --testpassword='mysql_passwd'
make
make test
make install

Faça o download do pacote porque já é hora de compilá-lo:

tar -zxvf mytop-.tar.gz
cd mytop-
perl Makefile.PL
make
make test
make install

Execute o mytop pela primeira vez:

mytop

Pode acontecer o seguinte erro:

Error in option spec: "long|!"

Caso esse erro aconteça, é necessário editarmos o mytop. Abra o arquivo – aqui instalado em /usr/local/bin e edite a linha 159:

"long|long_nums|l!" => \$config{long_nums},

Além disso, substitua as linhas 958 e 959 pelas linhas seguintes:

if ($host)
{
$host =~ s/^([^.]+).*/$1/;
$thread->{Host} = $host;
}

Usando o mytop

Você pode monitorar seu banco passando as configurações de conexão via shell:

mytop -u 'seuusuario' -p 'suasenha' -h 127.0.0.1 -d 'seubanco'

…ou pode criar um arquivo .mytop em sua pasta de usuários, como o abaixo:

user=seuusuario
pass=suasenha
host=127.0.0.1
db=seubanco

WordPress Plugin: Fast Flickr

Leonardo — Sun, 01 Jul 2012 15:21:48 +0000

Portuguese version / Versão em português
Fast Flickr is a fast way to show a Flickr set using a lightbox window.

Demo:

Uso:

Download files, copy the folder (fastflickr) into /wp-content/plugins;
Active the plugin;
Use in your posts or pages:

[ fastflickr set=SET ID ]

The original source code is avaliable on GitHub.

Plugin WordPress: Fast Flickr

Leonardo — Sun, 01 Jul 2012 15:15:54 +0000

Apesar do Flickr não ser mais o mesmo de antes, precisei em um trabalho exibir as fotos de um set em uma janela estilo lightbox. Em 2006 tinha escrito um plugin tosco e resolvi escrever algo novo.

Demo:

Uso:

Faça o download dos arquivos, copie-os para seu diretório de plugins;
Ative o Fast Flickr em seu administrador;
Use em seus posts ou páginas:

[ fastflickr set=ID DO SET ]

Foi algo que escrevi em poucas horas e faz apenas o básico. O código está no GitHub.

Atualizando o MacBook Pro

Leonardo — Tue, 29 May 2012 15:56:24 +0000

Estive um mês de férias na Califórnia, com direito a visitas a Cupertino na Apple e a Stanford. Aproveitando minha vinda aos Estados Unidos, resolvi fazer um upgrade na minha máquina, trocando memória RAM, substituindo o HD original por um drive SSD e também trocando o SuperDrive pelo HD original. Esse não é um upgrade inédito, o Fábio Akita já fez e o Rafael Gimenez também.

Porque fazer

Porque não tinha grana para comprar um MacBook Air;
Porque ainda que tivesse grana para um MacBook Air, não poder fazer trocar memória era algo que me incomodava;
Porque abrir Macs é divertido.

Lista de compras

Optei por comprar tudo na Amazon, por ter preços mais baixos. A lista:

8 GB de RAM: teoricamente seria o máximo suportado pelo MacBook Pro, embora seja possível usar 16 GB
Drive SSD: optei pelo OCZ Vertex 3 por ver muita gente usando em MacBooks semelhantes ao meu
Case para Super Drive: esse case é parecido com o driver externo que a Apple vende para o MacBook Air
Data Doubler: case para acomodar o HD no lugar do antigo drive de CD
Jogo de ferramentas: comprei um kit bem bacana ‘especifico para Macs’
CD ou imagem devidamente montada do instalador do Mac OS.

Como fazer

Antes de abrir a máquina, tenha certeza de que você tem um backup atualizado. O Time Machine é perfeito para isso, pois após instalar o Mac OS no novo disco você pode restaurar sua pasta de usuários e aplicativos instalados no HD antigo.

Para abrir o mac, você vai precisar de uma chave Phillips 00, uma chave T6, e um Spudger, que no meu caso estavam entre as ferramentas do kit. Ao abrir a máquina, a primeira coisa a ser feita é desligar o conector da bateria. Eu não vou entrar em detalhes sobre esse processo, uma vez que recorri ao iFixit. Ele explica didaticamente como trocar os pentes de memória RAM, como substituir o drive de cd por um segundo HD e como trocar o disco rígido.

Após fechar o Mac, é hora de instalar o sistema operacional, usando o cd original ou um pendrive / HD externo com o instalador montado. Para ver o gerenciador de inicialização, segure option imediatamente após ligar o computador. Deverão aparecer a partição que possui o instalador e o seu antigo Macintosh HD. Quando instalar o Mac OS, tenha certeza de que está instalando no disco certo.

A restauração do Time Machine é coisa linda de Deus. As únicas coisas que quebraram aqui foram alguns apps da Adobe e alguns arquivos da pasta /etc, que aparentemente não são restaurados.

Geração de PDFs indolor no PHP

Leonardo — Sun, 12 Feb 2012 15:04:44 +0000

Tempos atrás escrevi um artigo sobre como gerar PDF dentro do Rails usando a gem wicked_pdf e o wkhtmltopdf. Como escrevi no post anterior, o wkhtmltopdf usa Webkit, a engine de renderização do Safari / Chrome para gerar a visualização do documento. Isso o torna superior se comparado com bibliotecas do PHP como o FPDF, pois, geralmente, essa bibliotecas possuem dificuldades para reproduzir efeitos de CSS.

Em um novo projeto, estou usando novamente o wkhtmltopdf, mas agora dentro do PHP. No post anterior, indiquei que você pode usar o binário disponível no site, entretanto no servidor atual, tive alguns problemas com isso. Então, se possível, compile o wkhtmltopdf direto da fonte.

Compilação passo-a-passo

Instale em seu servidor alguns pacotes que irá precisar:

apt-get install openssl build-essential xorg libssl-dev libxrender-dev git-core

… e obtenha o código fonte recente do wkhtmltopdf:

git clone git://github.com/antialize/wkhtmltopdf.git wkhtmltopdf
git clone git://gitorious.org/+wkhtml2pdf/qt/wkhtmltopdf-qt.git wkhtmltopdf-qt

Veja, para usar o wkhtmltopdf você precisará do QT. Nesse caso também vamos compilá-lo manualmente:

cd wkhtmltopdf-qt
git checkout staging
QTDIR=. ./bin/syncqt
./configure -nomake tools,examples,demos,docs,translations -opensource -prefix "../wkqt"
make -j3 && make install
cd ..

Com o QT gerado, você finalmente poderá compilar o wkhtmltopdf:

cd wkhtmltopdf
../wkqt/bin/qmake
make && make install

Não inventei a receita acima, mas ela funcionou perfeitamente no Debian. Com a compilação a pasta /usr/bin ganhou 2 novos executáveis: wkhtmltopdf e wkhtmltoimage. Com isso você já pode usar o utilitário pelo shell. Se quiser testá-lo, experimente:

PHP

Dentro do próprio site do wkhtmltopdf há uma classe em PHP para utilizar o aplicativo dentro do seu site, entretanto, optei por uma classe disponível no Github. Um simples exemplo, tirado do próprio repositório:

try {
$wkhtmltopdf = new Wkhtmltopdf(array('path' => APPLICATION_PATH . '/../public/uploads/'));
$wkhtmltopdf->setTitle("Title");
$wkhtmltopdf->setHtml("Content");
$wkhtmltopdf->output(Wkhtmltopdf::MODE_DOWNLOAD, "file.pdf");
} catch (Exception $e) {
echo $e->getMessage();
}

O que o exemplo não mostra é como definir uma mensagem de rodapé. Só depois de algum tempo, percebi que o wkhtmltopdf busca um arquivo externo. No meu aplicativo, defino o rodapé dinamicamente:

$wkhtmltopdf->setFooterHtml("footer.php?msg='Hello World!'");

2012

Leonardo — Sun, 12 Feb 2012 14:44:06 +0000

Há muito não escrevo no blog, mas isso não significa que eu morri. Talvez o Twitter seja culpado, pois nele compartilho mais rapidamente algum link ou tema que poderia ser assunto de um post. Talvez a falta de tempo seja outra culpada, pois já não sou tão ocioso quanto antigamente.

Nos últimos tempos, saí da minha cidade para ir programar um sistema relacionado a virtualização de processos na Previdência Social, primeiro em Porto Alegre e depois em Brasília.

Todos os sábados me encontro com uma turma de amigos macmaníacos em Divinópolis: é o Mac’Café. Começamos a registrar nossos encontros em um site, com os links das histórias que lá discutimos e alguns links de aplicativos para iDevices e Mac OS.

Apesar de não postar com a freqüência de antes, continuo registrando devaneios no Twitter e meus bookmarks no delicious. Pelo Twitter sempre estou enviando algum link interessante sobre desenvolvimento web e pelo Delicious sempre salvo coisas sobre CSS3 e HTML5. De vez em quando, registro até mesmo o que ando comprando na China.

E se motoristas fossem contratados da mesma maneira que programadores?

Leonardo — Wed, 26 Oct 2011 00:20:01 +0000

Não lembro de onde veio, mas é engraçadinho:

Cargo: Motorista.

Exigências do trabalho: Competência profissional em condução de veículos leves como carros e pesados como ônibus e caminhões, ônibus articulados, bondes, metrô, tratores, escavadoras e pás carregadoras, e tanques pesados atualmente em uso pelos países da OTAN.

Habilidades em Rali e de condução extremas são obrigatórios!
Experiência na Fórmula-1 é um diferencial.

Conhecimento e experiência em reparação de motores de pistão e rotor, transmissões automáticas e manuais, sistemas de ignição, computador de bordo, ABS, ABD, GPS e sistemas de áudio automotivo dos fabricantes conhecidos mundialmente – obrigatória!

Experiência em tarefas de pintura e funilaria de automóveis é um diferencial.

Os candidatos devem ser certificados pela BMW, General Motors e Bosch, mas não por mais de dois anos.

Compensação: R$ 15 – R$ 20/hora, dependendo do resultado da entrevista.

Exigências da instrução: Bacharel em Engenharia Mecânica.

eCPF no Mac

Leonardo — Fri, 07 Oct 2011 22:59:30 +0000

No meu trabalho preciso usar meu cartão eCPF para acessar um determinado sistema que estamos desenvolvendo. Tenho um cartão eCPF, emitido pelo Banco do Brasil e um leitor de cartões OmniKey 3021 e foi uma grande dor de cabeça configurá-lo no Mac. Não era para ser um problema, uma vez que você precisa apenas de um driver e um módulo para o Firefox.

Driver

O driver do leitor OmniKey pode ser obtido pelo site da Serasa Experian. Além do driver do meu dispositivo, essa página apresenta drivers de outros devices.

Nessa mesma página, copie o Software do Cartão – Safesign. Esse software reconhece o seu cartão e apresenta os dados do certificado, a partir do app tokenadmin.

Observação: tudo nesse site está bem documentado, por isso esse post está resumido :)

Firefox

Para que o Firefox leia seu certificado, será necessário a instalação da biblioteca libcmP11.dylib. Faça o download dessa biblioteca e copie-a para a pasta /Library/cssi. Em seguida abra as preferências do Firefox e escolha: Advanced > Encryption > Security Devices. Clique no botão Load e na tela que se abre informe o caminho do arquivo (/Library/cssi/libcmP11.dylib). Não tem erro, com o cartão plugado na porta USB do Mac, o Firefox conseguirá autenticar utilizando-se o certificado digital. Para testar, você pode usar o eCAC, da Receita Federal.

Nota: o ManéBlog escreveu um post sobre o assunto, que me ajudou no processo.

Geração de PDFs indolor no Rails 3

Leonardo — Wed, 31 Aug 2011 00:50:10 +0000

Em um trabalho recente, precisei gerar relatórios em PDF. Considerei algumas soluções e optei por uma que não me fizesse perder os cabelos e reescrever código: wicked_pdf.

wicked_pdf usa wkhtmltopdf, um incrível utilitário que converte HTML para PDF, usando Webkit e QT. Você não precisa compilá-lo, basta apenas copiar o binário certo do site do projeto.

Uso

Após instalar a gem em seu sistema, você pode gerar os PDFs sem escovar bits: adicione o formato pdf entre as possibilidades de respostas de uma action, como abaixo:

def report
@order = Order.find(params[:id])
respond_to do |format|
format.html
format.pdf do
render :pdf => "order-#{params[:id]}"
end
end
end

Se quiser, você pode usar a mesma view do formato html:

render :pdf => "order-#{params[:id]}", :template => "/orders/report.html.erb"

O readme da gem apresenta as informações pertinentes para seu uso e não é meu objetivo reproduzi-lo aqui, apenas chamo a atenção para um detalhe: em hosts compartilhados, você precisará definir o path correto do wkhtmltopdf. Para isso, você pode criar um initializer com o seguinte conteúdo:

WickedPdf.config = { :exe_path => '/home/meuusario/wkhtmltopdf' }

PS. você pode usar o wkhtmltopdf no PHP com o Snappy. Não testei, mas pode ser uma boa opção.

Produtividade com Twitter (se é que é possível)

Leonardo — Sun, 17 Jul 2011 13:42:18 +0000

Se você é um daqueles que quer seguir centenas de pessoas, sobre vários assuntos e que ao mesmo tempo quer trabalhar, não deixe de conhecer esse serviço: Twêpe.

Ele envia resumos diários sobre o que se passa na sua conta: novos followers, followers perdidos, além de publicar na íntegra os tweets de sua timeline e de suas listas, definindo inclusive quanto tweets você quer que seja inclusos em cada email.

Além disso, o serviço também permite operar o Twitter por email. Em uma única mensagem você pode escrever um tweet, seguir alguém, enviar uma DM, retuitar e remover alguém do seu Twitter.

Validações personalizadas no Rails 3

Leonardo — Sun, 05 Jun 2011 22:55:12 +0000

O método validates do Rails 3 agrupou os antigos métodos de validação do Rails 2. Na versão 3, usamos o método validates acompanhado do atributo a ser validado e de suas respectivas regras de validação. Trabalhando em um novo projeto necessito validar CPFs e CNPJs, e consequentemente, precisei criar validações adicionais. Esse post mostra como realizei isso.

Inicialmente, criei na pasta lib/ o arquivo my_validations.rb, com o seguinte conteúdo:

# encoding: utf-8
class MyValidations < ActiveModel::Validator
def validate(record)
record.errors[:cpf] << "CPF (#{record.cpf}) é inválido" unless Cpf.new(record.cpf).valido?
record.errors[:cnpj] << "CNPJ (#{record.cnpj}) é inválido" unless Cnpj.new(record.cnpj).valido?
end
end

Veja que na primeira linha desse arquivo eu indico o encoding usado, para evitar problemas com os acentos. Utilizo o brazilian-rails para confirmar se os documentos informados são ou não válidos. No meu model, eu invoco o método validates_with, indicando a classe recém-criada.

validates_with MyValidations

Esse foi um exemplo de como resolvi meu problema. Existem outros posts sobre o assunto por aí, boa sorte!

Coletânea de dicas sobre WordPress

Leonardo — Sun, 24 Apr 2011 15:58:32 +0000

Resolvi escrever uma série de posts com diversas dicas para o WordPress.

Temas

Vai escrever um template do zero? Recomendo começar pelo HTML5 Boilerplate. Trata-se de um template com diversas otimizações e resets para garantir a compatibilidade máxima entre browsers.

Também é interessante uma leitura sobre o desenvolvimento de temas, principalmente sobre a hierarquia dos templates e a função get_template. Venho utilizando essa função para não repetir código nos arquivos archive.php, page.php, search.php e single.php.

Rascunhos de posts

O WordPress salva automaticamente seus posts, o que pode aumentar o tamanho de seu banco de dados. Para desabilitar esse recurso, você pode editar o arquivo /wp-config.php:

Para apagar os rascunhos já escritos, você pode usar o plugin Better Delete Revision, ou executar a seguinte query:

RSS

Você pode ler RSS usando a função wp_rss do próprio WordPress. Exemplo:

Outra forma é através do plugin RSS Import. Com ele você pode ler um feed usando o shortcode [RSSImport]. Exemplo:

	[RSSImport display="10", feedurl="http://mysite.com/feed"]

O uso via shortcode é importante para que um usuário de seu blog possa ler um feed dentro de um post, sem executar diretamente PHP, como no uso da função wp_rss.

Plugins relevantes

Browser Sniff: detecta o browser/os do usuário que comenta em seu blog;
Head Meta Description: insere a tag com o resumo ou conteúdo de seu post ou página;
IP to Nation: localiza o país do usuário que comenta em seu blog através do IP;
NextGEN Gallery: sistema de galerias de fotos para o WordPress. Você cria as galerias e faz o embed em suas páginas ou posts. E há ainda uma integração com o Monoslideshow;
PHP Executation: permite a execução de PHP dentro dos seus posts;
Smart 404: provê sugestões de páginas e posts quando uma página não é localizada;
WordPress Database Backup: permite fazer um backup do seu banco de dados, dando a opção de download direto, envio por email ou cópia no próprio servidor. É um plugin útil caso você não tenha acesso ao MySQL do seu servidor;
Yet Another Related Posts Plugin: apresenta posts relacionados ao exibido, inclusive no feed do seu blog
Yoast Breadcrumbs: cria migalhas de pão para serem usadas em seu template.

Aplicativos para manter-se organizado

Leonardo — Sat, 16 Apr 2011 23:13:31 +0000

Seu iPhone não serve apenas para jogar Angry Birds! Deixo três dicas para manter-se organizado.

Completed é um aplicativo para criação de listas. Utilizo para todo lists e para compras no supermercado.

Já o Simplenote é um excelente substituto ao app de notas do iPhone – que sempre dá problemas de sincronização comigo. Ele é grátis, salva seus dados nas nuvens e você pode acessar seus dados via apps em seu computador ou via web.

Para terminar, o TrackingBR é útil para armazenar códigos de rastreamentos de encomendas dos Correios. Muito bom para quem faz muitas compras online.

Acessórios baratos para seu iDevice direto da China

Leonardo — Fri, 01 Apr 2011 01:00:03 +0000

Nos últimos tempos venho comprando várias coisas na DealExtreme e DinoDirect. De coisas para cachorro a bateria de MacBook, os produtos não deixam a desejar na qualidade. Deixo a dica de algumas coisas que comprei por lá:

Capinha para iPhone com velcro por ridículos US$2,95.
Outra capinha para iPhone
Carregador para carro / rede elétrica, com cabo retrátil, testados em iPhones, iPods e iPads.
Organizador de cabos para por fim em cabos desorganizados.
Suporte para parabrisas, útil caso você use o GPS do iPhone enquanto dirige.
Transmissor FM, que transmite para o som do carro o que está tocando no iPod. Inclui um cabo para recarregar o iPhone no acendedor de cigarros.

Para MacBook, vale conferir um protetor de silicone para teclado. Se você perde os cabelos enquanto programa, aqui está um acessório relevante. Se você quiser zoar seus amigos, pode pedir uma dessas canetas que dá choque.

A entrega ocorre cerca de 1 mês depois do pedido, que pode ser pago via Paypal. Nenhuma das minhas mais de 10 compras foram taxadas e o frete é grátis!

Busca nos campos personalizados do WordPress

Leonardo — Sun, 13 Mar 2011 12:33:57 +0000

Os campos personalizados é um recurso usado no WordPress para que o autor de um post possa armazenar dados a sua escolha. Você pode usar esse recurso de várias formas: mostrar imagens personalizadas, falar o que você está ouvindo durante a escrita do post, adicionar informação pessoal e muito mais. Em um blog sobre livros, você pode usar tal recurso para criar os campos “Autor”, “Editora”, “Ano” e por aí vai.

Estou trabalhando em um projeto que utiliza os campos personalizados na área de Imprensa, onde cada post aponta em que tipo de imprensa determinada informação foi postada: Rádio, TV, Internet, Jornal. Como dito acima, criar o campo personalizado é simples. Difícil é filtrar os posts de acordo com o valor do campo.

A solução

Descobri um plugin chamado Search Custom Fields. Numa explicação rápida, ele adiciona os Campos Personalizados na query de busca de posts.

Antes:

minha busca

Depois:

minha busca pelo campo personalizado

Na documentação do plugin, o autor mostra como turbinar o campo de busca do WordPress. Ao invés disso, escrevi uma pequena função para listar os valores de um atributo personalizado:

function list_custom_fields($metakey, $output) {
// based on http://sixrevisions.com/wordpress/custom-fields-search/
global $wpdb;
$items = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
if ($items) {
if ($output == "dropdown") { // display values in a select
echo "
";
} else if ($output == "list") { // display values in a list
echo "
foreach ($items as $item) {
echo "
$item

}

echo "";

}

Coloque a função acima no arquivo functions.php do seu tema e chame-a, de duas formas, em seu sidebar, por exemplo:

< ?php if(function_exists('list_custom_fields')) list_custom_fields("Veículo", "dropdown"); ?>

…para mostrar os valores do campo personalizado “Veículo” em select do HTML ou…

< ?php if(function_exists('list_custom_fields')) list_custom_fields("Veículo", "list"); ?>

…para mostrar os valores do campo personalizado “Veículo” em uma lista.

Novo micro-projeto: Guia da TV

Leonardo — Tue, 25 Jan 2011 18:33:40 +0000

Aproveitei algumas horas das minhas férias e lancei um novo micro-projeto: Guia da TV. O Guia da TV permite você saber quais programas estão para começar.

Algumas coisas ainda serão aprimoradas, mas o aplicativo já está em produção. Ele foi feito com Rails 3 e algumas pitadas de jQuery em sua interface. O conteúdo é fornecido pela Revista Eletrônica. Se você gosta de ver TV, use-o e o recomende no Facebook ;)

Personalizando o scrollbar com WebKit

Leonardo — Sun, 23 Jan 2011 18:52:34 +0000

Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.

Antes de começar

Antes de começar precisamos alterar algumas propriedades de posicionamento de nossa página, para que a barra do WebKit substitua a barra nativa do browser.

	body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}
 
html {
    overflow-y: auto;
    background-color: transparent;
}

Os pseudo-elementos e as pseudo-classes

Pseudo-elementos


-webkit-scrollbar
-webkit-scrollbar-button
-webkit-scrollbar-track
-webkit-scrollbar-track-piece
-webkit-scrollbar-thumb
-webkit-scrollbar-corner
-webkit-resizer

Pseudo-classes


:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive
:enabled
:disabled
:hover
:active

Exemplos

Exemplo 1

	::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
 
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
    display: none;
}
 
::-webkit-scrollbar-track-piece  {
    background-color: #3b3b3b;
    -webkit-border-radius: 6px;
}
 
::-webkit-scrollbar-thumb:vertical {
    background-color: #666;
    -webkit-border-radius: 6px;
}

Veja no primeiro exemplo que nos elementos -webkit-scrollbar-button:start:decrement e -webkit-scrollbar-button:end:increment foram usadas display:none, para que não seja exibido os botões das extremidades da barra.

Exemplo 2

	::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}
 
::-webkit-scrollbar-button:end:increment {
    background-image: url("images/scroll_cntrl_dwn.png");
}
 
::-webkit-scrollbar-button:start:decrement {
    background-image: url("images/scroll_cntrl_up.png");
}
 
::-webkit-scrollbar-track-piece:vertical:start {
    background-image: url("images/scroll_gutter_top.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
}
 
::-webkit-scrollbar-track-piece:vertical:end {
    background-image: url("images/scroll_gutter_btm.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
    background-position: bottom left, 0 0;
}
 
::-webkit-scrollbar-thumb:vertical {
    height: 56px;
    -webkit-border-image: url("images/scroll_thumb.png") 8 0 8 0 stretch stretch;
    border-width: 8 0 8 0;
}

No segundo exemplo, foram usados múltiplos backgrounds para criar uma barra de rolagem arrendondada.

Exemplo 3

	::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}
 
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:end:decrement {
    display: block;
}
 
::-webkit-scrollbar-button:end:increment {
    background-image: url("images/scroll_cntrl_dwn.png");
}
 
::-webkit-scrollbar-button:end:decrement {
    background-image: url("images/scroll_cntrl_up.png");
}
 
::-webkit-scrollbar-track-piece:vertical:start {
    background-image: url("images/scroll_gutter_top.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
}
 
::-webkit-scrollbar-track-piece:vertical:end {
    background-image: url("images/scroll_gutter_btm.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
    background-position: bottom left, 0 0;
}
 
::-webkit-scrollbar-thumb:vertical {
    height: 56px;
    -webkit-border-image: url("images/scroll_thumb.png") 8 0 8 0 stretch stretch;
    border-width: 8 0 8 0;
}

Nesse exemplo são usados botões na parte inferior da barra, como no Mac OS.

Exemplo 4

	pre {
    border: 1px solid #ccc;
    border-radius: 3px;
    white-space: nowrap; 
    overflow: scroll;
    padding: 5px;
    width: 550px;
}
 
pre::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    padding: 18px;
    -webkit-border-radius: 1ex;
}
 
pre::-webkit-scrollbar-thumb {
    background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));
    padding: 8px;
    width: 6px;
    height: 6px;
    -webkit-border-radius: 1ex;
}
 
pre::-webkit-scrollbar-button:start:decrement,pre::-webkit-scrollbar-button:end:increment {
    display: none;
}
 
pre::-webkit-scrollbar-thumb:vertical, pre::-webkit-scrollbar-thumb:horizontal {
    height: 3px;
    width: 3px;
    margin: 3px;
}

Para terminar, foi aplicado em um elemento

. Todos os exemplos acima estão no meu GitHub, no repositório webkit-examples. Confira outros exemplos no site do WebKit.
Extra: detectando o WebKit
Você pode detectar se o browser do usuário usa WebKit rapidamente com Javascript:


	if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    alert('hello webkit!');
}
	



Ver no codestacker
… e usar jQuery para carregar uma folha de estilo personalizada:


	$('head').append('');
	



Ver no codestacker

Posts relacionados:

CSS para preloader de imagem
CSS para alinhamento vertical

Projetos no GitHub

Leonardo — Sun, 23 Jan 2011 14:32:04 +0000

Estou movendo aos poucos algumas coisinhas para o GitHub. Já estão lá:

My album, uma mini-galeria em PHP
Bento, o tema do meu tumblr
Helvetica 2009, tema para WordPress desse blog criado ano passado. Veja-o em ação
Helvetica 2010, tema atual desse blog

Em breve criarei novos repositórios lá.

2 alternativas ao delicious

Leonardo — Sat, 25 Dec 2010 17:16:45 +0000

Na última semana o Yahoo anunciou a demissão de centenas de funcionários e o fechamento de alguns serviços, incluindo o ~~del.icio.us~~ delicious, que uso desde muito tempo. Todo mundo ficou surpreso com isso, e já inclusive existem rumores que o serviço continuará, entretanto, a busca para uma alternativa ao delicious começou. Esse post apresenta um mini-review de 2 opções grátis.

markr.net

Opção super-minimalista, o markr é a melhor opção se você procura algo simples. Ele estava com alguns problemas de importação dos favoritos do delicious (encoding incorretos, tamanho do título do favorito e a importação que não recuperava a data dos favoritos), entretanto mandei uma mensagem pro desenvolvedor e ele prontamente corrigiu os erros encontrados.

Zootool

Enquanto o markr.net mantia seus problemas, testei o Zootool. Ele tem uma interface maravilhosa e integração com vários serviços, como Twitter, Facebook e Tumblr. O conteúdo salvo no Zootool pode ser automaticamente compartilhada em outras redes sociais.

Conclusões

Ambas ferramentas são muito simples de usar, importam o conteúdo do delicious e possuem bookmarklets para adição de links. O Zootool é bem completo, mas por enquanto vou utilizar o markr.net pelo seu minimalismo em apenas organizar seus favoritos.

A rede social de notícias Busk.com lançou o Buskmark, para você também salvar o que é importante no aplicativo. No post onde o TechCrunch levantou o rumor sobre o fechamento do delicious, existem diversos comentários com outras alternativas.