Gabriel CarvalhoJekyll2014-02-13T15:32:42-02:00http://www.carvalhoweb.com/Gabriel Carvalhohttp://www.carvalhoweb.com/maracaipe1098@gmail.comhttp://www.carvalhoweb.com/articles/bower-guia-definitivo2014-01-27T00:00:00-02:002014-01-27T00:00:00-02:00Gabriel Carvalhohttp://www.carvalhoweb.commaracaipe1098@gmail.com<p>Antes de iniciar este post, gostaria de agradecer a todos pela repercursão que o <a href="www.carvalhoweb.com/articles/melhores-plugins-sublime-text/">post anterior</a> teve. E como vocês são brothers, vão curtir, compartilhar e tweetar esse artigo aqui também.</p>
<p>Primeiramente, vamos falar o que o <a href="http://bower.io/">Bower</a> é: Um <strong>gerenciador de pacotes</strong>, criado pelo pessoal do <a href="http://github.com/twitter">Twitter</a>, 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, <code>bower.json</code>) em que você lista as dependências do seu projeto e os mantém atualizado com a fonte.</p>
<h2 id="instalao">Instalação</h2>
<p>Para instalar o <a href="http://bower.io/">Bower</a> globalmente, simplesmente no seu terminal bash execute <code>npm install -g bower</code>. Ele é dependente do Node, Git (para a maioria dos pacotes) e do npm.</p>
<h2 id="uso">Uso</h2>
<p>Nesta seção, estarei listando os principais comandos do <a href="http://bower.io/">Bower</a>. Para verificar se a instalação foi bem-sucedida, basta executar <code>bower -v</code> em qualquer lugar. Se for retornado algo, como na imagem, você já está pronto pra usar o bower.</p>
<p><img src="/images/guia-bower/bower-version.gif" alt="Bower -v" /></p>
<h3 id="definindo-depndencias">Definindo depêndencias</h3>
<p>Antes de instalar as dependências do seu projeto, você precisa primeiramente listá-las. Esta lista, nas versões superiores à <code>0.9.0</code> ficava armazenada no arquivo <code>components.json</code> e nas versões superiores, o aquivo é <code>bower.json</code>. Este arquivo precisa estar na raiz do seu projeto, e é semelhante a outros arquivos de outros gerenciadores como <code>package.json</code> do Node, ou <code>Gemfile</code> do Ruby.</p>
<p>Você pode iniciar um arquivo <code>bower.json</code> através do comando <code>bower init</code>, que pedirá que você especifique algumas opções. Após a criação bem sucedida desse arquivo, ele ficou assim:</p>
<pre><code> {
"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"
]
}
</code></pre>
<p>Pronto! Você já tem um arquivo <code>bower.json</code> válido e já podemos instalar as dependências.</p>
<h3 id="instalando-pacotes-e-dependncias">Instalando pacotes e dependências</h3>
<p>O <a href="http://bower.io/">Bower</a> oferece até hoje, quatro maneiras diferentes de se instalar pacotes. São elas:</p>
<h5 id="instala-pacotes-listados-no-arquivo-bowerjson">Instala pacotes listados no arquivo <code>bower.json</code></h5>
<p><code>bower install</code></p>
<h5 id="instala-pacote-remoto-ou-local">Instala pacote remoto ou local</h5>
<p><code>bower install <pacote></code> </p>
<h5 id="instala-pacote-remoto-ou-local-em-uma-verso-especfica-indicada-pela-git-tag">Instala pacote remoto ou local em uma versão específica (indicada pela git tag)</h5>
<p><code>bower install <pacote>#<versao></code> </p>
<h5 id="instala-pacote-remoto-ou-local-em-uma-verso-especfica-indicada-pela-git-tag-com-um-nome-diferente-do-pacote">Instala pacote remoto ou local em uma versão específica (indicada pela git tag) com um nome diferente do pacote</h5>
<p><code>bower install <nome>=<pacote>#<versao></code></p>
<p>Nos exemplos acima, <code><pacote></code> pode ser o seguinte:</p>
<ul>
<li>O nome de um pacote registrado no Bower, por exemplo <code>jquery</code></li>
<li>Um repositório remoto, por exemplo <code>git://github.com/alguém/algum-pacote.git</code></li>
<li>Um repositório Git local</li>
<li>Um atalho para um repositório no GitHub, por exemplo <code>alguem/algum-pacote</code></li>
<li>Uma URL para um arquivo <code>.zip</code> ou <code>.tar.gz</code></li>
</ul>
<p>Usando o jeito mais simples, instalei o <a href="//github.com/jquery/jquery">jQuery</a> (<code>bower install jquery --save</code>) como exemplo. Os arquivos do jQuery, ficam armazenados em <code>/bower_components/jquery</code>. E se você quiser usar por exemplo o arquivo <code>jquery.min.js</code>, é só apontar para a pasta em que o componente foi adicionado.</p>
<p>Se você quiser instalar algum pacote e já listá-lo no arquivo <code>bower.json</code> é só colocar a opção <code>-D</code> ou <code>--save</code>, deixando o comando assim: <code>bower install <pacote> --save</code>. Caso o pacote seja um dependência somente no estágio de desenvolvimento, a opção <code>--save-dev</code> ou <code>-D</code> o lista nas <code>devDependencies</code> no arquivo json.</p>
<p>Por padrão, todos os pacotes são instalados no diretório <code>bower_components</code> e você não deve modificar seu conteúdo. Adicione-a ao seu .gitignore para nas próximas utilizações, a pessoa somente executar <code>bower install</code> e o bower adicionar todos os componentes. Para listar todos os pacotes instalados localmente, execute <code>bower list</code>.</p>
<h3 id="adicionando-dependncias">Adicionando dependências</h3>
<p>Nesta seção, você vai adicionar as dependências ao seu arquivo <code>bower.json</code> e com isso, cada vez que você executa <code>bower install</code> para instalar os pacotes na primeira vez, ou <code>bower update</code> para atualizar os já existentes. O seguinte arquivo <code>bower.json</code> mostra como deve ser listado as dependências, e toma como exemplo os pacotes <strong>Bootstrap</strong> e <strong>jQuery</strong> (ambos na última versão).</p>
<pre><code> {
"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"
}
}
</code></pre>
<h3 id="desinstalando-pacotes-e-excluindo-dependncias">Desinstalando pacotes e excluindo dependências</h3>
<p>Caso você não precise de mais algum pacote e deseja excluir sua dependência, é só executar <code>bower uninstall <pacote></code> e retirá-lo das dependências no arquivo json ou, se quiser já retirá-lo das dependências no arquivo json automaticamente, execute <code>bower uninstall <pacote> --save</code>.</p>
<h3 id="listando-pacotes-instalados">Listando pacotes instalados</h3>
<p>Para ver quais pacotes estão instalados no seu projeto, simplesmente execute <code>bower list</code>. Para ver também o caminho desses pacote, adicione ao comando a opção <code>--paths</code>.</p>
<h3 id="alterar-diretrio-padro">Alterar diretório padrão</h3>
<p>Se você não quiser que o <a href="http://bower.io/">Bower</a> coloque tudo (como padrão) no diretório <code>bower_components</code>, você pode instalar em outro lugar, adicionando um arquivo chamado <code>.bowerrc</code> na raiz do projeto. Para mudar o diretório para <code>assets/components</code> nosso arquivo vai ficar assim:</p>
<pre><code> {
"directory" : "assets/components"
}
</code></pre>
<p>Depois é só executar <code>bower install</code> novamente e deletar o diretório anterior.</p>
<h3 id="utilizando-um-pacote">Utilizando um pacote</h3>
<p>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:</p>
<pre><code> <script src="/assets/components/jquery/jquery.min.js"></script>
</code></pre>
<hr />
<p>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 <a href="www.carvalhoweb.com/articles/melhores-plugins-sublime-text/">Os Melhores Plugins do Sublime Text</a> dê uma passada lá e veja! Até mais!</p>
<p><a href="http://www.carvalhoweb.com/articles/bower-guia-definitivo/">Bower: O guia/tutorial definitivo</a> was originally published by Gabriel Carvalho at <a href="http://www.carvalhoweb.com">Gabriel Carvalho</a> on January 27, 2014.</p>http://www.carvalhoweb.com/articles/melhores-plugins-sublime-text2014-01-25T00:00:00-02:002014-01-25T00:00:00-02:00Gabriel Carvalhohttp://www.carvalhoweb.commaracaipe1098@gmail.com<p>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.</p>
<p>Nesse post, fiz uma seleção dos plugins que <strong>eu considero os mais úteis</strong> e que eu sempre (ou quase) uso.</p>
<h2 id="emmethttpsgithubcomsergecheemmet-sublimereadme"><a href="https://github.com/sergeche/emmet-sublime#readme">Emmet</a></h2>
<p><img src="/images/sublime-best-plugins-gif/emmet-demo.gif" alt="Demonstação do plugin Emmet" /></p>
<p>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.</p>
<h6 id="este-plugin-est-prestes-a-ser-atualizado-para-a-verso-11httpemmetioblogbeta-v1-1-expandindo-seu-suporte-para-less-sass-e-vai-poder-fazer-ainda-muito-mais-com-este-poderoso-plugin">Este plugin está prestes a ser atualizado para a <a href="http://emmet.io/blog/beta-v1-1/">versão 1.1</a>, expandindo seu suporte para Less, Sass, e vai poder fazer ainda <strong>muito</strong> mais com este poderoso plugin.</h6>
<h2 id="githttpssublimegitnet"><a href="https://sublimegit.net/">Git</a></h2>
<p><img src="/images/sublime-best-plugins-gif/git-demo.gif" alt="Demonstação do plugin Git" /></p>
<p>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.</p>
<h2 id="brackethighlighterhttpsgithubcomfacelessuserbrackethighlighter"><a href="https://github.com/facelessuser/BracketHighlighter">BracketHighlighter</a></h2>
<p><img src="/images/sublime-best-plugins-gif/brackethighlighter-demo.gif" alt="Demonstação do plugin BracketHighlighter" /></p>
<p>Esse plugin é muito útil quando você quer achar onde que aquela tag está fechando, ou quando as chaves se abriram. Muito útil.</p>
<h2 id="alignmenthttpwbondnetsublimepackagesalignment"><a href="http://wbond.net/sublime_packages/alignment">Alignment</a></h2>
<p><img src="/images/sublime-best-plugins-gif/alignment-demo.gif" alt="Demonstação do plugin Alignment" /></p>
<p>Ótimo plugin pra quem tem aquela agonia quando tudo está desalinhado. Esse plugin faz todo o trabalho pra você.</p>
<h2 id="docblockrhttpsgithubcomspadgossublime-jsdocs"><a href="https://github.com/spadgos/sublime-jsdocs">DocBlockr</a></h2>
<p><img src="/images/sublime-best-plugins-gif/docblockr-demo.gif" alt="Demonstação do plugin DocBlockr" /></p>
<p>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++.</p>
<h2 id="gisthttpsgithubcomcondemilgist"><a href="https://github.com/condemil/Gist">Gist</a></h2>
<p><img src="/images/sublime-best-plugins-gif/gist-demo1.gif" alt="Demonstação do plugin Gist 1" /></p>
<p>Depois:
<img src="/images/sublime-best-plugins-gif/gist-demo2.gif" alt="Demonstação do plugin Gist 2" /></p>
<p>Criou um snippet e que publicá-lo publicamente ou privadamente bem rápido no Gist? Este plugin é a solução para você.</p>
<h2 id="markdown-preview">Markdown Preview</h2>
<p><img src="/images/sublime-best-plugins-gif/markdown-demo1.gif" alt="Demonstação do plugin Gist 1" /></p>
<p>Depois de gerado, o plugin te leva ao browser:
<img src="/images/sublime-best-plugins-gif/markdown-demo2.gif" alt="Demonstação do plugin Gist 2" /></p>
<p>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!</p>
<h2 id="colorpickerhttpwesllygithubiocolorpicker"><a href="http://weslly.github.io/ColorPicker/">ColorPicker</a></h2>
<p><img src="/images/sublime-best-plugins-gif/colorpicker-demo.gif" alt="Demonstação do plugin ColorPicker" /></p>
<p>Quer usar aquela cor mas não lembra o código dela? É só baixar esse plugin e pronto!</p>
<h6 id="obrigado-ao-leitor-wemerson-santos-por-me-lembrar-desse-til-plugin">Obrigado ao leitor <strong>Wemerson Santos</strong> por me lembrar desse útil plugin!</h6>
<hr />
<p>Bom, esses são os plugins que eu mais uso. Se algum dia começar a usar algum outro, compartilho com vocês.</p>
<p>Se você é brother, é claro que você vai me ajudar <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.carvalhoweb.com/articles/melhores-plugins-sublime-text/">compartilhando no Facebook</a> ou <a href="https://twitter.com/intent/tweet?text=http://www.carvalhoweb.com/articles/melhores-plugins-sublime-text/">tweetando</a> esse post. Até a próxima!</p>
<p><a href="http://www.carvalhoweb.com/articles/melhores-plugins-sublime-text/">Seleção - Melhores plugins do Sublime Text</a> was originally published by Gabriel Carvalho at <a href="http://www.carvalhoweb.com">Gabriel Carvalho</a> on January 25, 2014.</p>http://www.carvalhoweb.com/articles/nova-interface-de-orgs-github2014-01-23T00:00:00-02:002014-01-23T00:00:00-02:00Gabriel Carvalhohttp://www.carvalhoweb.commaracaipe1098@gmail.com<p>Hoje, o <a href="http://github.com">GitHub</a> 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.</p>
<h2 id="perfis">Perfis</h2>
<p>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.
<img src="https://f.cloud.github.com/assets/874145/1978510/39df489a-83a5-11e3-8a93-69c430d4c09b.png" alt="Perfil" /></p>
<h2 id="membros">Membros</h2>
<p>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).</p>
<p><img src="https://f.cloud.github.com/assets/874145/1979736/69cc349a-83b5-11e3-88b9-7ec8df1e1476.png" alt="Membros" /></p>
<h2 id="times">Times</h2>
<p>Agora é bem mais fácil entrar ou sair do time que você pertence.</p>
<p><img src="https://f.cloud.github.com/assets/874145/1978517/6c1f4e2c-83a5-11e3-8522-952bf43919ed.png" alt="Times" /></p>
<p>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.</p>
<p><img src="https://f.cloud.github.com/assets/874145/1978520/724a3276-83a5-11e3-986e-8b1c056e37bb.png" alt="Controle aos Times" /></p>
<h2 id="aproveite">Aproveite!</h2>
<p>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 <a href="https://github.com/blog/1121-introducing-team-mentions">menções em time</a>.</p>
<h6 id="este-post--somente-uma-traduo-e-adaptao-do-post-original-i-classicon-external-linkihttpsgithubcomblog1763-better-organizations">Este post é somente uma tradução e adaptação do <a href="https://github.com/blog/1763-better-organizations">post original <i class="icon-external-link"></i></a>.</h6>
<p><a href="http://www.carvalhoweb.com/articles/nova-interface-de-orgs-github/">GitHub apresenta nova interface para as organizações</a> was originally published by Gabriel Carvalho at <a href="http://www.carvalhoweb.com">Gabriel Carvalho</a> on January 23, 2014.</p>http://www.carvalhoweb.com/articles/hello-world2014-01-22T00:00:00-02:002014-01-22T00:00:00-02:00Gabriel Carvalhohttp://www.carvalhoweb.commaracaipe1098@gmail.com<p>Olá.</p>
<p>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. <strong>Em jekyll</strong>.</p>
<p>Apesar de não ter criado quase nada, deixei tudo pronto pra quando vier algo na caixola vou postar aqui. </p>
<p>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 <strong><a href="https://github.com/mmistakes/so-simple-theme/">so simple theme</a></strong> foi feito pelo meu amigo <a href="https://github.com/mmistakes/">Michael Rose</a>.</p>
<p>Então, esse post já está grande demais e estou acabando por aqui, até mais.</p>
<p><a href="http://www.carvalhoweb.com/articles/hello-world/">Hello World</a> was originally published by Gabriel Carvalho at <a href="http://www.carvalhoweb.com">Gabriel Carvalho</a> on January 22, 2014.</p>