E ele está para chegar! Falta pouco! Visite agora o Google Drive! E peça sua notificação!

Para fazer isto, abra seu Terminal, você pode alterar algum desses arquivos:

• ~/.bash_profile
• ~/.bashrc
• ~/.profile

Comigo funcionou no bash_profile.

Então dê um vim ~/.bash_profile e adicione o seguinte trecho ao final do arquivo:

# show the branch, rvm, user in bash
export PS1="\[\033[01;32m\]\u@\h\[\033[00m\] \[\033[01;36m\]$(~/.rvm/bin/rvm-prompt) \[\033[01;34m\]\w\[\033[00m\]$(git branch &>/dev/null; if [ $? -eq 0 ]; then echo "\[\033[01;33m\]($(git branch | grep ^*|sed s/\*\ //))\[\033[00m\]"; fi)$"

Pronto! Dê um source ~/.bash_profile para recarregar as configurações e feito!

O Akita liberou os screencasts que antes eram pagos no blip.tv, para ver o post dele, acesse akitaonrails.com.

Os screencasts incluem:

• Palestra: Entenda Software da Forma Correta
• Screencast: Instalando um Ambiente Ruby
• Screencast: Começando com o Vim
• Screencast: Começando com o Git

Eu já vi o Entenda Software da Forma Correta e agora estou vendo o Começando com o Git, ambos estão bem legais e é ótimo para quem está começando.

Para quem quiser ver a página com todos, segue link do perfil dele no blip.tv

Quem quiser ver um trecho do de Git aqui no Abstraindo.com:

Hoje eu vou mostrar como utilizar as interfaces SessionStorage e LocalStorage do HTML5.

Estas duas interfaces fazem parte da especificação Web Storage da W3C.

Esta API tem a finalidade de acabar com os famosos Cookies, salvando uma grande quantidade de informação no cliente e resgatando a informação salva de uma forma simples e segura.

Então vamos pensar em que funcionalidades a Storage API tem vantagem sobre os cookies. Vou listar algumas vantagens bem relevantes da Storage API:

• Storage API pode salvar até 5MB de espaço no disco do usuário, enquanto os Cookies armazenam míseros 4kb;
• Os dados não são trafegados a cada requisição do servidor, como acontece nos Cookies;
• Funciona como um Array Associativo (key, value);
• Diferente dos Cookies, não possui data de expiração (falarei sobre isso abaixo)

A SessionStorage e a LocalStorage possuem os seguintes métodos:

• key(n) para retornar o nome da chave que está nesta posição da Storage
• getItem(key) para retornar o valor associado a uma chave
• setItem(key,value) para associar um determinado valor a uma chave, ou criar a chave e associar um valor a ela
• removeItem(key) para remover determinada chave e o valor associado a ela
• clear() para limpar o Storage

As duas interfaces além destes métodos possuem o atributo length, que mostra o número de chaves na interface.

Agora vocês devem estar pensando “As duas interfaces tem o mesmos atributos e métodos. Por que diabos existes as duas?”.

A diferença entre as duas interfaces está em quando os dados são expirados.

Na SessionStorage os dados salvos expiram quando o usuário fecha o navegador. Na LocalStorage os dados salvos simplesmente não expiram. Sim, os dados não tem data de expiração. Só são apagados quando o desenvolvedor ou o usuário os apagam.

Uma coisa importante é que se você deve ficar atento com o domínio que está sendo utilizado na sua aplicação. Uma Storage funciona apenas para o domínio corrente, diferente dos cookies. Então se eu salvar uma LocalStorage em http://hussani.com.br, o site http://www.abstraindo.com não terá acesso aos dados. O mesmo acontece quando você salva dados sem o “www.” e tenta acessar os dados em um endereço do mesmo domínio com o “www.” (exemplo: os dados salvos em http://www.abstraindo.com não podem ser acessados por http://abstraindo.com). Isso garante que os dados não fiquem abertos para que qualquer site vasculhe nas informações contidas nas Storages.

Então galera, cuidado com os endereços da sua aplicação.

A Storage API está disponível para IE8+, Firefox 5+, Chrome 4+, Safari 4+, Opera 10.5+, e também está disponível em todas as versões de Android Browser e iOS Safari. Então vamos codar!

Vamos colocar a mão na massa com uma pequena demonstração. Vocês podem ver a demostração aqui.

Nesta demonstração é apresentado um exemplo simples de como usar a interface LocalStorage. Poderíamos utilizar SessionStorage também, o resultado seria o mesmo.

Só irei colocar as partes importantes do código e se vocês quiserem o código da demonstração completa podem baixar aqui.

Esta é a estrutura principal da página

    <div class="wrapper">
        <section id="com-storage" class="box-list">
            <h3>Com Local Storage</h3>
            <ul id="stored-list" contenteditable="true">
                <li></li>
            </ul>
            <button id="clear">Limpar</button>
        </section>

        <section id="sem-storage" class="box-list">
            <h3>Sem Local Storage</h3>
            <ul id="not-stored-list" contenteditable="true">
                <li> </li>
            </ul>
        </section>
    </div>

Neste bloco criamos duas seções com listas editáveis. Em um usaremos a LocalStorage para salvar os dados e na outra não usaremos nenhum Storage.

Agora vamos montar o Storage. Utilizei o jQuery para auxiliar na manipulação de JavaScript, nada difícil, e a biblioteca Modernizr para verificar se o browser tem suporte a API de Storage. Para verificar se há suporte fiz desta forma:

$(function(){
  if(Modernizr.localstorage){
    /* codigo aqui */
  }else{
/* callback se o browser não suportar a localstorage */
}
});

Simples, não é?
Vamos agora salvar os dados da lista quando o usuário editá-la

$("#stored-list").keypress(function(){
  localStorage.setItem('minha-lista', $("#stored-list").html());
});

O que eu fiz acima: quando algo for alterado na lista com o id “stored-list” eu salvo o conteúdo html da lista em um localstorage com a chave “minha-lista”.

Pronto já salvamos conteúdo em um LocalStorage. \o/

Agora vamos recuperar o valor da chave “minha-lista” sempre que página for recarregada.

if(localStorage.getItem('minha-lista')){
  $('#stored-list').html(localStorage.getItem('minha-lista'));
}

Note que antes de retornar o valor, nós verificamos se existe algo relacionado a chave. Se houver algum valor ele é escrito dentro da lista.

Pronto! Agora nós conseguimos salvar os conteúdos e conseguimos resgatar eles. Mas e se eu quiser apagar a lista e fazer uma nova?

$('#clear').click(function(){
  localStorage.clear();
  $('#stored-list').html('<li> </li>');
});

Muito simples também! Quando eu clicar no botão com id “clear” eu aciono o método clear que apaga todos os dados do LocalStorage.

Como só utilizamos uma chave para armazenar a lista, podemos apagar ela de uma outra forma:

$('#clear').click(function(){
  localStorage.removeItem('minha-lista');
  $('#stored-list').html('<li> </li>');
});

Isso apaga apenas a chave “minha-lista” e seu conteúdo.

Bem galera, acho que é isso. Espero que vocês tenham gostado.

Qualquer dúvida, crítica ou aflição deixe um comentário.

Até a próxima pessoal.

Bom, hoje vamos brincar com uma coisinha que pode agilizar monstruosamente nosso desenvolvimento, os famosos snippets!

Puxa Brunno que bacanudo! Estou empolgado!! Mas o que são snippets??

Bom, snippets são “atalhos” para pequenos trechos de código navegáveis, é como se fosse uma biblioteca de cmd+c (ou crtl+c), onde você guarda os pedacinhos de códigos que você vai usar com frequência.

Vamos aprender a fazer os nossos snippets no TexMate, abra o app e no menu siga esse caminho: Bundles > Bundle Editor > Show Bundle Editor.

Você vai se depara com uma janela como essa:

Vamos clicar no +  lá embaixo e escolher new snippet para começarmos a nossa brincadeira!

Vamos ter agora uma janelinha de edição de snippets com as instruções na tela, uma coisa linda! hehehehe

Como podemos ver, o TextMate criou um conjunto de bundle com nosso nome e um item sem título que será o nome do nosso snippet, escolha um nome qualquer e vamos para os boxes ao lado.

O primeiro campo é onde vamos editar nosso snippet, mas vamos deixá-lo por último, pois a parte inferior é mais rápida de explicar hehehe

Primeiro temos Activation, que é a forma como vamos lançar o snippet, o bacana é mesmo é o Tab Trigger, e ao lado temos um campo que é qual será esse trigger, aqui vamos escolher a palavra que vai disparar nosso snippet, para o exemplo vamos inserir array_push.

Em scope selector vamos escolher qual será o escopo que nossa trigger vai funcionar, escolha source.php.

Agora é a hora da verdade, no campo superior limpe o conteúdo e insira isso:

array_push($array, $valor);

Pronto, saia do editor, abra um arquivo php qualquer e digite: array_push e em seguida a telcla TAB. Mágico né?!

Mas onde fica a parte do “navegável” que eu citei acima né?! hehe

Vamos voltar no Bundle Editor e editar nosso snippet:

array_push(\$${1:array},\$${2:valor});

Agora volte no arquivo php e execute o snippet novamente. Perceba que o array veio selecionado, agora você navega pela função usando o TAB e SHIFT+TAB, onde você preenche com o valor que você quiser de forma rápida.

Note que precisamos escapar o “$” da variavel com “\” e também que podemos definir a ordem dos TABs com o número que vem antes dos “:”.

Bacana né?!

Antes de tudo, vou me apresentar.

Sou o Hussani Oliveira, estou me formando em Análise e Desenvolvimento de Sistemas e trabalho a quase dois anos desenvolvendo aplicações para internet.

Nesse post vou ensinar vocês a trabalhar com mais de um remote no git.

Me deparei com esse problema quando tive que enviar o mesmo projeto git para dois lugares diferentes e não queria criar 2 repositórios para isto.

É importante lembrar que o ‘remote’ no git é a origem do seu repositório quando você o clona. O repositório que você faz fetch, push e pull.

Vamos a receita!

Primeiro vamos ver quais são os repositórios remote que vocês tem com este comando:

git remote -v

Com esse comando podemos ver a lista de repositórios origem. O retorno vai ser algo assim:

nome1	http://meuservidor.com:/caminhodoarquivo.git (fetch)
nome1	http://meuservidor.com:/caminhodoarquivo.git (push)
nome2	usuario@123.456.789.0:/caminhodoarquivo.git (fetch)
nome2	usuario@123.456.789.0:/caminhodoarquivo.git (push)

Se pegarmos o primeiro item da lista acima temos o nome do repositório remoto (nome1), seu caminho (http://meuservidor.com:/caminhodoarquivo.git) e o tipo de permissão ao repositório (fetch). Quando se tem permissão “push” você pode mandar atualizações (pull e push) para o repositório remoto, quando se tem permissão “fetch” você pode apenas ler o repositório remoto e atualizar o repositório local a partir dele.
Agora vamos adicionar um novo repositório com o comando:

git remote add <nome> <caminho do repositório>

Após você adicionar o repositório e usar o comando “git remote -v” ele será listado junto com os outros remotes.

Agora vem a parte mais legal, dar fetch’s e push’s para o remoto.

Para push usamos

git push <nome do remote>

Para fetch usamos

git fetch <nome do remote>

Podemos também renomear um repositório remote com o comando

git remote rename <nome atual> <novo nome>

Ou remover com o comando

git remote rm <nome>

Espero que isso ajude vocês.
Abraço e até a próxima! =D

Porém agora no projeto do Mangá no Mori que está no GitHub (private repo) precisamos criar um novo branch por algumas questões técnicas do framework. Mas enfim, vamos ao que interessa.

Primeiro, clone o repositório do nosso alvo, se seu repo estiver no GitHub, seria assim:

git clone git@github.com:Nome-Repositorio.git

Agora, vamos listar os branchs remotos:

git branch

Esse comando permite você listar todos os branches locais. Para listar todos, incluindo os remotos, utilize o -a ao final da linha de comando.

Pronto, agora já sabemos qual é o nome do nosso branch remoto.

git checkout -b < novo_branch > origin/< novo_branch >

Agora sim! Temos nosso clone trabalhando diretamente neste branch.

Esse comando troca o contexto do branch, no exemplo estamos utilizando um branch já existente no repo, um branch remoto. Vamos testar? Atualize o branch:

git pull

Se der tudo certo você deve ver um “Already up-to-date”. Se você utilizar o git branch novamente, verá que o novo_branch estará com um * (asterisco), isso significa que este é seu branch ativo nesse clone.

Não conseguiu? Vamos lá:

Caso você esteja recebendo este erro:

fatal: git checkout: updating paths is incompatible with switching branches/forcing
Did you intend to checkout ‘origin/‘ which can not be resolved as commit?’

Vamos tentar resolver, dando um git pull primeiro!

Agora é só tentar dar o git checkout

É isso aí, se tiverem alguma dúvida, é comentar que resolveremos juntos.

Antes de começar o tutorial gostaria de me apresentar já que esse é o primeiro tutorial que posto aqui.

Meu nome é Diego Felix, sou formado em Análise e desenvolvimento de Sistemas e trabalho há quase 3 anos como Web Developer.

Sem mais, vamos ao que interessa!

Hoje ensinarei pra vocês como fazer um contador de caracteres restantes igual ao do twitter.
Para isso iremos utilizar somente xhtml e javascript, para o javascript utilizaremos a biblioteca jQuery.

Então mãos a obra! Vocês podem conferir o contador funcionando aqui.

Estrutura básica xhtml.

<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>Max Characters</title>

        <!-- opcional -->
        <link rel="stylesheet" href="style.css" media="screen" />
        <!-- opcional -->

        <script type="text/javascript" src=to"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>    

    <body>

        <h1>Tutorial de máximo de caracteres</h1>

        <form action="" method="post">

            <label for="content">

                <span>
                    Conteúdo
                    <span id="content-countdown" title="140">140</span>
                </span>

                <textarea name="content" id="content" maxlength="140" class="maxlength"></textarea>

            </label>

        </form>

    </body>
</html>

Sem muitos segredos até aqui certo?

Alguns pontos a reparar.

• Temos uma span com o id #content-countdown
• Na span #content-countdown temos uma title com o valor 140.
• Esse valor também é o limite de caracteres do textarea.
• Não é obrigatório colocar o maxlength no textarea, mas também não custa nada.

Agora vamos começar com o jQuery.

As explicações para o código serão inseridas no próprio código para facilitar a leitura.

// quando o documento estiver pronto, faça.
$(function(){

    /*
        Keyup é um evento que é disparado sempre que o usuário tirou o dedo da tecla.
        Ou seja, não queremos fazer nada quando o usuário clica, somente quando ele solta
        a tecla.
    */
    $(".maxlength").keyup(function(event){

        // abaixo algumas variáveis que iremos utilizar.

        // pega a span onde esta a quantidade máxima de caracteres.
        var target    = $("#content-countdown");

        // pego pelo atributo title a quantidade maxima permitida.
        var max        = target.attr('title');

        // tamanho da string dentro da textarea.
        var len     = $(this).val().length;

        // quantidade de caracteres restantes dentro da textarea.
        var remain    = max - len;

        // caso a quantidade dentro da textarea seja maior que
        // a quantidade maxima.
        if(len > max)
        {
            // abaixo vamos pegar tudo que tiver na string e limitar
            // a quantidade de caracteres para o máximo setado.
            // isso significa que qualquer coisa que seja maior que
            // o máximo será cortado.
            var val = $(this).val();
            $(this).val(val.substr(0, max));

            // setamos o restante para 0.
            remain = 0;
        }

        // atualizamos a quantidade de caracteres restantes.
        target.html(remain);

    });

});

Espero que o código acima esteja bem comentado para vocês. Resumindo o que está acontecendo, a cada vez que o usuário digita alguma coisa dentro da textarea, eu disparo um evento onde eu verifico a quantidade de caracteres máximos que ele pode digitar, verifico se o que ele digitou atingiu esse máximo, se atingiu eu limito para o máximo e atualizo a quantidade restante, caso contrário eu apenas atualizo a quantidade restante.

Caso vocês queiram, segue abaixo o código css que eu coloquei no exemplo.

body{
	font:normal 0.8em "Trebucet MS", Tahoma, Verdana, Arial, sans-serif;
}
form, textarea{
	width:300px;
}
label{
	display:table;
	width:100%;
}
label span.countdown span{
	float:right;
}

Você também pode baixar todos os arquivos clicando aqui.

Um grande abraço à todos e até a próxima.

Steve Jobs faleceu hoje e deixou como legado grandes invenções, inovações e a empresa mais valiosa do mundo. Esse é homem que gravou seu nome na história como poucos conseguiram, o homem que revolucionou o computador pessoal, o homem que abriu os olhos do mercado para o mundo mobile se foi hoje, deixando fãs e sua família pra trás.

Steve, espero que você consiga a Paz, espero que daí de onde você está agora você se sinta completo. Saiba que você se foi com a missão cumprida.

Typekit surgiu em Setembro de 2009 fundada pela empresa Small Batch, Inc., a ideia do serviço para quem não conhece é servir fontes para aplicar em web sites. O Google tem algo semelhante, mas para isso, utiliza fontes abertas (Open Source Fonts), portanto seu uso é gratuito, o nome do serviço é Google WebFonts.

O Typekit possui diversos planos que começam gratuitamente até $ 99 anual. O plano gratuito tem as seguintes características:

• 25,000 Pageviews/mês
• Acesso a uma biblioteca Trial
• 1 Website
• 2 Fontes por site
• Requere uso da badge do Typekit

A equipe Abstraindo já usou várias fontes em diversos sites e seu uso é muito bacana!

Agora podemos esperar um grande aumento no catálogo de fontes do Typekit =)

Utilizando fontes personalizas em meu site

Mas você deve estar se perguntando: Eu tenho a fonte, quero utilizá-la em meu site, como eu faço isso?

Isso é possível tecnicamente, mas você não tem direito de distribuir a fonte para os usuários. O Typekit faz justamente isso, ele compras os direitos de distribuição e serve sua fonte para os visitantes do seu site.

Caso você queira distribuir mesmo assim é muito simples, mãos a massa no CSS:

@font-face {
 font-family: Nome da Fonte;
 src: url(enderecodafontenoservidor);
 }

Pronto! Para saber quais navegadores suportam font-face, verifique aqui!