Gabriel Carvalho

Bower: O guia/tutorial definitivo

2014-01-27T00:00:00-02:00

Antes de iniciar este post, gostaria de agradecer a todos pela repercursão que o post anterior teve. E como vocês são brothers, vão curtir, compartilhar e tweetar esse artigo aqui também.

Primeiramente, vamos falar o que o Bower é: Um gerenciador de pacotes, criado pelo pessoal do Twitter, que serve principalmente para pacotes front-end. Caso você não saiba o que é um gerenciador de pacotes, é basicamente um arquivo (no caso do Bower, bower.json) em que você lista as dependências do seu projeto e os mantém atualizado com a fonte.

Instalação

Para instalar o Bower globalmente, simplesmente no seu terminal bash execute npm install -g bower. Ele é dependente do Node, Git (para a maioria dos pacotes) e do npm.

Uso

Nesta seção, estarei listando os principais comandos do Bower. Para verificar se a instalação foi bem-sucedida, basta executar bower -v em qualquer lugar. Se for retornado algo, como na imagem, você já está pronto pra usar o bower.

Definindo depêndencias

Antes de instalar as dependências do seu projeto, você precisa primeiramente listá-las. Esta lista, nas versões superiores à 0.9.0 ficava armazenada no arquivo components.json e nas versões superiores, o aquivo é bower.json. Este arquivo precisa estar na raiz do seu projeto, e é semelhante a outros arquivos de outros gerenciadores como package.json do Node, ou Gemfile do Ruby.

Você pode iniciar um arquivo bower.json através do comando bower init, que pedirá que você especifique algumas opções. Após a criação bem sucedida desse arquivo, ele ficou assim:

    {
      "name": "guia-bower",
      "version": "0.0.1",
      "authors": [
        "Gabriel Carvalho <maracaipe1098@gmail.com>"
      ],
      "description": "O guia definitivo para o Bower",
      "license": "MIT",
      "homepage": "http://www.carvalhoweb.com",
      "private": true,
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components"
      ]
    }

Pronto! Você já tem um arquivo bower.json válido e já podemos instalar as dependências.

Instalando pacotes e dependências

O Bower oferece até hoje, quatro maneiras diferentes de se instalar pacotes. São elas:

Instala pacotes listados no arquivo `bower.json`

bower install

Instala pacote remoto ou local

bower install <pacote>

Instala pacote remoto ou local em uma versão específica (indicada pela git tag)

bower install <pacote>#<versao>

Instala pacote remoto ou local em uma versão específica (indicada pela git tag) com um nome diferente do pacote

bower install <nome>=<pacote>#<versao>

Nos exemplos acima, <pacote> pode ser o seguinte:

O nome de um pacote registrado no Bower, por exemplo jquery
Um repositório remoto, por exemplo git://github.com/alguém/algum-pacote.git
Um repositório Git local
Um atalho para um repositório no GitHub, por exemplo alguem/algum-pacote
Uma URL para um arquivo .zip ou .tar.gz

Usando o jeito mais simples, instalei o jQuery (bower install jquery --save) como exemplo. Os arquivos do jQuery, ficam armazenados em /bower_components/jquery. E se você quiser usar por exemplo o arquivo jquery.min.js, é só apontar para a pasta em que o componente foi adicionado.

Se você quiser instalar algum pacote e já listá-lo no arquivo bower.json é só colocar a opção -D ou --save, deixando o comando assim: bower install <pacote> --save. Caso o pacote seja um dependência somente no estágio de desenvolvimento, a opção --save-dev ou -D o lista nas devDependencies no arquivo json.

Por padrão, todos os pacotes são instalados no diretório bower_components e você não deve modificar seu conteúdo. Adicione-a ao seu .gitignore para nas próximas utilizações, a pessoa somente executar bower install e o bower adicionar todos os componentes. Para listar todos os pacotes instalados localmente, execute bower list.

Adicionando dependências

Nesta seção, você vai adicionar as dependências ao seu arquivo bower.json e com isso, cada vez que você executa bower install para instalar os pacotes na primeira vez, ou bower update para atualizar os já existentes. O seguinte arquivo bower.json mostra como deve ser listado as dependências, e toma como exemplo os pacotes Bootstrap e jQuery (ambos na última versão).

    {
      "name": "guia-bower",
      "version": "0.0.1",
      "authors": [
        "Gabriel Carvalho <maracaipe1098@gmail.com>"
      ],
      "description": "O guia definitivo para o Bower",
      "license": "MIT",
      "homepage": "http://www.carvalhoweb.com",
      "private": true,
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components"
      ],
      "dependencies": {
        "jquery" : "latest",
        "bootstrap" : "latest"
      }
    }

Desinstalando pacotes e excluindo dependências

Caso você não precise de mais algum pacote e deseja excluir sua dependência, é só executar bower uninstall <pacote> e retirá-lo das dependências no arquivo json ou, se quiser já retirá-lo das dependências no arquivo json automaticamente, execute bower uninstall <pacote> --save.

Listando pacotes instalados

Para ver quais pacotes estão instalados no seu projeto, simplesmente execute bower list. Para ver também o caminho desses pacote, adicione ao comando a opção --paths.

Alterar diretório padrão

Se você não quiser que o Bower coloque tudo (como padrão) no diretório bower_components, você pode instalar em outro lugar, adicionando um arquivo chamado .bowerrc na raiz do projeto. Para mudar o diretório para assets/components nosso arquivo vai ficar assim:

    {
      "directory" : "assets/components"
    }

Depois é só executar bower install novamente e deletar o diretório anterior.

Utilizando um pacote

Essa parte provavelmente você já sabe, mas mesmo assim vou deixá-la aqui. Supondo que você tem somente o jQuery como pacote e vai utilizá-lo como nos exemplos anteriores, você vai usar na sua página assim:

    <script src="/assets/components/jquery/jquery.min.js"></script>

Pronto! Você já sabe usar o bower e utilizá-lo em seus projetos. Se você gostou e é um brother, não esqueça de curtir, compartilhar, tweetar a dar um +1 neste post. Qualquer dúvida ou observação, é só colocar nos comentários logo abaixo. Aproveitando, se você ainda não viu o post sobre Os Melhores Plugins do Sublime Text dê uma passada lá e veja! Até mais!

Bower: O guia/tutorial definitivo was originally published by Gabriel Carvalho at Gabriel Carvalho on January 27, 2014.

Seleção - Melhores plugins do Sublime Text

2014-01-25T00:00:00-02:00

Todos sabemos que o Sublime é um dos melhores editores de código que já inventaram. E esse título não é à toa, a capacidade de personalização do aplicativo, através de plugins, temas, snippets, etc, é assustadora.

Nesse post, fiz uma seleção dos plugins que eu considero os mais úteis e que eu sempre (ou quase) uso.

Emmet

Esse com toda certeza, é o plugin mais útil pra mim. Nele você diminui o tempo seu workflow ao máximo, escrevendo apenas abreviações do seu código HTML/CSS.

Este plugin está prestes a ser atualizado para a versão 1.1, expandindo seu suporte para Less, Sass, e vai poder fazer ainda muito mais com este poderoso plugin.

Git

As funções que este plugin faz, dispensam apresentações, porém não deixa de ser muito útil quando você quer fazer aquele commit rápido.

BracketHighlighter

Esse plugin é muito útil quando você quer achar onde que aquela tag está fechando, ou quando as chaves se abriram. Muito útil.

Alignment

Ótimo plugin pra quem tem aquela agonia quando tudo está desalinhado. Esse plugin faz todo o trabalho pra você.

DocBlockr

Você, que óbviamente documenta seu código e deixa ele sempre entendível para você, e quem vai editar depois, esse plugin adianta muita coisa quando se vai criar um bloco de documentação em JavaScript, PHP, CoffeeScript, Actionscript, C e C++.

Gist

Depois:

Criou um snippet e que publicá-lo publicamente ou privadamente bem rápido no Gist? Este plugin é a solução para você.

Markdown Preview

Depois de gerado, o plugin te leva ao browser:

Escreveu aquele arquivo .md no sublime e não quer esperar o commit no GitHub pra ver o resultado? Esse aquivo gera o HTML do Markdown que você escreveu ou até, mostra uma visualização como se estivesse no Github!

ColorPicker

Quer usar aquela cor mas não lembra o código dela? É só baixar esse plugin e pronto!

Obrigado ao leitor Wemerson Santos por me lembrar desse útil plugin!

Bom, esses são os plugins que eu mais uso. Se algum dia começar a usar algum outro, compartilho com vocês.

Se você é brother, é claro que você vai me ajudar compartilhando no Facebook ou tweetando esse post. Até a próxima!

Seleção - Melhores plugins do Sublime Text was originally published by Gabriel Carvalho at Gabriel Carvalho on January 25, 2014.

GitHub apresenta nova interface para as organizações

2014-01-23T00:00:00-02:00

Hoje, o GitHub fez uma mudança na interface das administrações. Com isso, ao meu ver, ficou bem mais intuitivo e chama mais atenção do que a interface anterior.

Perfis

Agora adicionar membros aos times e à própria organização ficou bem mais fácil. E pode ser acessada logo a direita da página.

Membros

Os donos (owners) da organização agora pode ter uma lista unificada de todos os membros. E como melhoria na segurança, donos da organização que são privados, podem ver membros que utilizam o recurso de login em dois fatores (two-factor authentication).

Times

Agora é bem mais fácil entrar ou sair do time que você pertence.

Os times são a maneira mais fácil de limitar o acesso das pessoas aos repositórios da organização. A página ficou bem simples e rápida.

Aproveite!

Lembre-se que times não são somente para a administração de pessoas. É também um meio de facilitar a interação e conversação com menções em time.

Este post é somente uma tradução e adaptação do post original .

GitHub apresenta nova interface para as organizações was originally published by Gabriel Carvalho at Gabriel Carvalho on January 23, 2014.

Hello World

2014-01-22T00:00:00-02:00

Olá.

Depois de tanto tempo sem postar mais nada no meu blog, que até então era Wordpress, tomei vergonha na minha cara e tomei um tempo pra me dedicar na criação do meu blog. Em jekyll.

Apesar de não ter criado quase nada, deixei tudo pronto pra quando vier algo na caixola vou postar aqui.

Esse blog, como você deve ter visto no rodapé (se não viu, vai ver) foi criado com Jekyll no Github. Tudo está no Github, só aponta pra esse meu domínio. O tema desse blog se chama so simple theme foi feito pelo meu amigo Michael Rose.

Então, esse post já está grande demais e estou acabando por aqui, até mais.

Hello World was originally published by Gabriel Carvalho at Gabriel Carvalho on January 22, 2014.