leonardofaria.net

Links for 2012-05-30 [del.icio.us]

Thu, 31 May 2012 00:00:00 PDT

TED Talks - updated
TED Talks: What are some must-see TED talks? - Quora
Pixabay - Imagens de Domínio Público
Encontrar impressionantes imagens de domínio público
Opera Mobile Emulator
Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging.
Bear CSS - Helping you build a solid stylesheet foundation based on your markup
Helping you build a solid stylesheet foundation based on your markup

Links for 2012-05-29 [del.icio.us]

Wed, 30 May 2012 00:00:00 PDT

Twig: the amazing ultra-portable cable for your iPhone by Jason Hilbourne — Kickstarter

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.

Posts relacionados:

Links for 2012-05-25 [del.icio.us]

Sat, 26 May 2012 00:00:00 PDT

30 Beautiful iOS App Website Designs for Inspiration
Reveal: uma leve modificação para as notificações do iOS | iPod School
A ideia é essa: basicamente, as notificações não serão mais resumidas.

Links for 2012-05-24 [del.icio.us]

Fri, 25 May 2012 00:00:00 PDT

Capture Web Screenshots with GrabzIt
automatically screenshots
Star Wars Day celebrado com infográficos
Chrome Web Store - Terminal emulator and SSH client.
Hterm is an xterm-compatible terminal emulator and stand-alone ssh client for Chrome. It uses Native-Client to connect directly to ssh servers without the need for external proxies.

Links for 2012-05-10 [del.icio.us]

Fri, 11 May 2012 00:00:00 PDT

Installing MacBook Pro 13" Unibody Early 2011 Hard Drive Replacement - iFixit

Links for 2012-04-25 [del.icio.us]

Thu, 26 Apr 2012 00:00:00 PDT

.:: Zotac Brasil ::.
mini pcs

Links for 2012-04-23 [del.icio.us]

Tue, 24 Apr 2012 00:00:00 PDT

Modem 3G VIVO Huawei E1756 - Conectividade: Redes & Internet - Fórum MacMagazine
Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript code
DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”.
smoke.js
A framework-agnostic styled alert system for javascript. Lightweight, flexible, css3 animation, blah blah blah easy to use something clever needs to go here.

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!'");

Posts relacionados:

PHP junto com o Passenger no Leopard

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.

Posts relacionados:

Tumblelog, meu lado obscuro

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.

Posts relacionados:

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.

Posts relacionados:

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.

Posts relacionados:

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 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!

Posts relacionados:

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.

Posts relacionados:

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.

Posts relacionados:

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!

Posts relacionados:

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:

"/?s=minhabusca">minha busca

Depois:

"?meucampopersonalizado=Veículo&s=meuvalordocampopersonalizado">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

$item

)

{

echo

"/?s=$item&key=$metakey">$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:

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...

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

...para mostrar os valores do campo personalizado "Veículo" em uma lista.

Posts relacionados:

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 ;)

Posts relacionados:

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á.

Posts relacionados:

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.

Novo micro-projeto: HORÓSCOPO NO MSN

Leonardo — Sat, 09 Oct 2010 20:16:04 +0000

Chegou mais um serviço de utilidade pública feita por mim. Depois do codestacker, autosimulado e xavecator, por acaso tive contato com algumas coisinhas do protocolo do MSN e desse contato saiu o Horóscopo por MSN. Horóscopo por MSN foi uma aplicação escrita em algumas noites e seu nome já diz tudo: você recebe o horóscopo do dia em seu MSN.

Funciona assim: você adiciona na sua lista de AmIgUxOs o contato horoscopo@leonardofaria.net. Vai no site e escolhe o signo que deseja ser informado. Pronto. Uma vez por dia, o robozinho da aplicação vai entregar no seu MSN o seu horóscopo.

P.S. eu não acredito em horóscopo.
P.S. 2: aplicação foi feita com Rails 3 e PHP. O PHP é responsável por conversar com o MSN enquanto a parte Rails do aplicativo gerencia todo o resto. Minha vontade é portar a parte PHP para Ruby.

Posts relacionados:

Cylay, alternativa ao Find My iPhone

Leonardo — Sun, 15 Aug 2010 17:29:51 +0000

A Apple fornece para os assinantes do MobileMe o serviço Find My iPhone. É um serviço muito útil principalmente se você for vítimas de larápios ou quaisquer outros tipos de meliantes, ou até mesmo se você deseja saber onde está sua esposa. O serviço é excelente, mas custa 99 obamas.

O Cylay - disponível no Cydia - faz a mesma função do Find My iPhone. Você pode localizar o aparelho, enviar mensagens para ele, fazer backups remotos e deletar todos os seus dados a distância. Para utilizá-lo, vale lembrar que você precisa de uma conexão com Internet.

Apesar do site oferecer um pacote anual de US$ 19,99, consegui utilizar as funções que descrevi acima sem gastar nada. Vale a pena experimentar.

Posts relacionados:

Academia no iPhone

Leonardo — Tue, 03 Aug 2010 14:13:21 +0000

Esse é segundo post que escrevo sobre apps para iPhone. Indico abaixo alguns programinhas para ajudar entrar em forma e a crescer os músculos. Nota: os programas não dispensam a ajuda de profissionais especializados ;)

A Revista Men's Health é famosa por suas reportagens sobre qualidade de vida e treinamentos de musculação. O app da revista gringa traz dezenas de exercícios separados por grupo corporal e agrupados em programas específicos (workouts) de treinamento.

O app GymGoal também traz dezenas de atividades agrupadas por grupo corporal e workouts, acompanhados de vídeos que demonstram como fazer o exercício. Além disso, esse app permite o backup dos dados salvos no servidor.

Workouts é um aplicativo para registrar seus treinos de academia. Ele é um grande aliado gerando gráficos de desempenho para pessoas disciplinadas.

Por último, o aplicativo iFitness também mostra exercícios agrupados por grupo físico e assim como o aplicativo da revista Men's Health, apresenta rotinas de treinamento diferenciadas para casos específicos.

Posts relacionados:

Xadrez no iPhone

Leonardo — Mon, 02 Aug 2010 20:42:43 +0000

Vou começar uma série de posts sobre o que tenho instalado no iPhone. O primeiro post é sobre jogos de Xadrez, hobby que estou afastado a um bom tempo.

O Chess Puzzler traz 200 problemas de xadrez, para você resolver enquanto espera no consultório médico ou para momentos de tédio. Além disso, o aplicativo permite 2 pessoas jogarem.

O aplicativo Chess Player traz um banco de dados de mais de 10 mil jogos. Muito bom para quem quer aprender com os grandes mestres.

Já o game Chess Premium permite você jogar contra o iPhone e contra um amigo em uma bonita interface.

Posts relacionados:

Extensões para o Safari 5

Leonardo — Sat, 24 Jul 2010 00:09:14 +0000

A guerra dos browsers continua: a versão 4 do Firefox já saiu em fase beta - com interface parecida com o Chrome, eu diria - mas o que me motivou escrever esse post foram as extensões do Safari 5. Sim, extensões como as dos outros browser e antes tarde do que nunca. Vamos as preferidas:

Ostrich: um cliente de twitter na sua barra de ferramentas
Safari140: um botão que você adiciona a sua barra de ferramentas para twittar links direto do Safari. Esse existia já no Safari 3
Google Reader Checker: verifica quantos posts você tem para ler no Google Reader
below.com/gmail-checker/">Gmail Checker: verifica quantas mensagens você tem para ler no Gmail. Uma aba a menos ou um cliente de email aberto a menos ;)
Google Reader for Snow Leopard: um redesign do Google Reader Apple-Like
Safari Validator: validação de páginas usando Tidy. Já existia antes do Safari 5
Confira mais no site da Apple.

Posts relacionados:

Como apresentar sua ideia de forma eficaz

Leonardo — Fri, 16 Jul 2010 21:01:51 +0000

Apresentações podem ser embaraçosas para muitas pessoas. Platéias e timidez podem intimidar você e se você não souber fazer as coisas bem feitas sua ideia vai ficar clara apenas na sua cabeça. Essa apresentação do Andrew de Andrade ajuda muito a melhorar sua comunicação:

Outra forma didática de aprender é assistir essa apresentação ensinando como NÃO fazer uma apresentação no Power Point...

...e lendo o que Steve Jobs faz em suas apresentações.

DinoDirect, concorrente do DealExtreme

Leonardo — Fri, 14 May 2010 01:12:22 +0000

Muitos brasileiros tem feito compras na DealExtreme, uma loja de ~~coreanos~~, ~~tailandeses~~, asiáticos. Comprei algumas coisinhas lá em 08/03/10, mas ainda não recebi nada. Minha compra foi muito barata e aparentemente não tem código de rastreamento.

Digitando DealExtreme no Google você encontra como link patrocinado a loja DinoDirect.com. É uma loja virtual bem bonita e cheia de ~~bugigangas~~ acessórios para escritório e seus gadgets. Dia 12/04 comprei um suporte para carro para o iPhone que chegou dia 10/05, menos de 1 mês após a compra. O produto vem em uma embalagem vagabunda, mas lembre-se que ele vem da Ásia ;) Ainda assim a qualidade é superior ao suporte que comprei no Shopping Oiapoque (BH) e que minha ex-namorada quebrou logo no primeiro dia.

Assim como na DealExtreme, os produtos da DinoDirect possuem frete gratuito para todo o mundo. Em contra-partida é descontado 2 obamas. O pagamento é feito via Paypal e com certeza devo fazer novas compras no site.

[update] Comprei novas coisas na DealExtreme, como um transmissor FM e uma capinha para iPhone que só custa 3 obamas. Novamente chegou em menos de um mês.

Posts relacionados:

Layout novo

Leonardo — Sat, 08 May 2010 18:37:15 +0000

Como anualmente faço, criei vergonha na cara e dei uma remaquiada no site, usando várias coisas do CSS3, muitas dessas que o IE(ca) não suporta.

Posts relacionados:

Guia de sobrevivência do iPhone

Leonardo — Fri, 07 May 2010 10:34:57 +0000

Ganhou um iPhone na promoção do posto, do papai ou pagou 499 obamas no gadget da Apple e não sabe o que fazer? Leia esse rápido guia tudo-em-um.

App Store

Os aplicativos do iPhone inicialmente só podem ser instalados a partir da App Store. Para acessá-la, você precisa se cadastrar. A navegabiidade é toda feita pelo iTunes, que visualiza que você mora no Brasil e te redireciona para a loja brasileira. Entretanto, há uma forma de acessar a loja americana. Ter uma conta na loja americana significa acesso a games, que a loja brasileira não disponibiliza por questões burocráticas. Portanto, cadastre-se na duas lojas para ter acesso a mais apps. O resto fica por conta do Jailbreak.

Jailbreak

Com o jailbreak você pode instalar aplicativos em seu iPhone sem utilizar a App Store. A ferramenta atual para realizar o jailbreak é o Spirit (download Mac / PC). Você pluga o iPhone, aperta o botão "Jailbreak" e corre para o abraço. O Spirit instala no iPhone o Cydia.

Cydia

O Cydia é uma ferramenta que busca e instala aplicações. Em seus repositórios você encontra várias aplicações bacanas, distribuídas em formato .deb. Pelo iPhone você faz o download desses arquivos e os instala diretamente. Você também pode baixar esses arquivos na Internet e enviá-los para o seu iPhone (explico abaixo no Howto). A primeira aplicação que vou falar é o Installous, a seguir.

Installous

O Installous é uma ferramenta que instala apps piratas, normalmente a venda na App Store. Para instalá-lo, você precisa adicionar o endereço de seu repositório - faça isso no Cydia em Manage > Sources. Clique em Edit > Add e adicione o seguinte endereço: http://cydia.hackulo.us/
Adicionado o repositório, pesquise por Installous e faça o download do arquivo.

Aplicativos essenciais

Cydia e Installous são essenciais para o iPhone, mas a partir dele você instala uma série de apps legais e bem importantes para seu telefone.
OpenSSH - instalado pelo Cydia: permite você fazer conexões remotas com seu iPhone pela rede. Muito útil para você enviar arquivos, que você pode fazer através de um programa de FTP, por exemplo.
MobileTerminal - instalado pela Cydia: aplicativo que emula um terminal em seu telefone, como o Terminal.app do Mac OS. Muito cuidado ao executar esse programa, pois o terminal altera diretamente o sistema de arquivos do telefone.
AppSync - instalado pelo Installous: esse app permite que você instale arquivos IPA pelo iTunes. Com ele, você pode baixar IPAs legais por meios não-legais, adicionar ao iTunes e posteriormente instalar em seu iPhone.

HOWTO

Instalando arquivos .deb no iPhone

Como disse acima, os aplicativos do Cydia são distribuídos em formato deb. Mas como enviá-los para o iPhone? Via SSH. Para isso você vai precisar ter instalado Cydia e OpenSSH no seu telefone e usar um computador com um cliente FTP.

A imagem acima mostra o Transmit, um cliente de FTP do Mac OS. Para fazer a conexão:

IP: o endereço IP do iPhone. Se você não sabe o IP do seu iPhone veja em Ajustes > Wi-Fi e clique na seta azul da rede wi-fi da qual você está conectado.
Usuário: root
Senha: alpine

Importante: a conexão é do tipo SFTP e não FTP. Procure essa opção em seu aplicativo.
Depois de realizar a conexão, você deverá colocar os arquivos .deb na pasta /root/Media/Cydia/AutoInstall. Crie essas pastas caso elas não existam. Reinicie o iPhone que o Cydia automaticamente instalará as aplicações

Instalando arquivos .deb no iPhone via terminal

Nesse método você enviará os arquivos acima via SSH, como descrito acima, mas faça-os para uma pasta temporária, como a /tmp. Após isso, abra o MobileTerminal e execute o comando:

su root
dpkg -i /tmp/nomedopacote.deb

O primeiro comando, para quem não conhece os poderes do terminal, transforma o usuário atual em usuário administrador. Esse usuário tem acesso total aos arquivos do telefone e novamente aviso, cuidado! Se você não tem intimidade com computadores e se considera um analfabyte, não tente esse método. O segundo comando instala o pacote de acordo com o endereço informado.