• Vagrant - Máquinas virtuais automatizadas para desenvolvimento

    Logotipo do VagrantQuando você começa a trabalhar com programação, é a principio normal que sua máquina fique um pouco bagunçada. Bibliotecas pra cá, interpretadores pra lá, compiladores ali, e assim vai. Depois de algum tempo, você até se encontra de forma que consegue usar tudo o que você mesmo colocou e dessa forma consegue fazer o que quer, ou seja, programar. O problema é quando você precisa efetivamente replicar este mesmo ambiente em outras máquinas, como a máquina dos seus colegas de trabalho,  por exemplo, ou quando você por algum motivo perde todos os dados da máquina (como quando o HD resolve pifar, o que costuma acontecer com certa frequência, pelo que vejo). É aí que a situação complica, e por causa disso hoje vou falar um pouco sobre o Vagrant e inclusive apresentar um breve tutorial sobre como usá-lo da maneira devida.

    (mais…)

  • FlexboxFroggy - Como aprender CSS Flexbox, jogando

    Froggy - O sapinho que você tem que posicionar usando CSS Flexbox no FlexboxFroggyQuando a internet começou, tínhamos recursos muito básicos implementados nos navegadores, e por isso os sites normalmente eram feitos sem muita estrutura, apenas contendo textos e sem muitos estilos aplicados. Depois de algum tempo, a internet evoluiu um pouquinho, e os sites começarem a ser mais estruturados, com barras laterais, menus, cabeçalho e rodapé melhor definidos, através do uso de tags <table>. Depois de mais algum tempo, começou a surgir a prática do tableless, que usava CSS para criar sites estruturados sem o uso de tags <table>. E, a partir dessa prática do tableless, surgiu incontáveis bibliotecas de grid, normalmente (mas não necessariamente) integrada a frameworks CSS, como o Bootstrap e o Foundation, que facilitam e muito a criação de sites tableless com o uso de grids pré-definidas (normalmente de 12 colunas). Com a evolução do HTML5 e do CSS3, entretanto, novas técnicas de organizar conteúdo na tela estão surgindo, e hoje vou falar sobre um jeito prático de aprender uma dessas novas técnicas, chamada Flexbox, jogando.

    (mais…)

  • Jimple - Container de Injeição de Dependências desenvolvido em ES6

    Em aplicações simples, é normal você não precisar lidar com muitas classes, funções ou variáveis. No NodeJS, por exemplo, para fazer um "Hello World" usando ExpressJS você normalmente precisa lidar com apenas 2 variáveis (no máximo do máximo). Mas, quando a aplicação vai ficando maior, é normal você começar a lidar com dezenas de classes, e, se bem projetadas, com suas dependências. Hoje, vou falar um pouco sobre o Jimple, uma biblioteca prática que desenvolvi para resolver esse problema no desenvolvimento com NodeJS. (mais…)

  • Bower - Gerencie Javascript e CSS com facilidade

    Quando a aplicação é pequena e você é o único desenvolvedor do projeto, pode até ser fácil e rápido pegar todos os JS e CSS que você precisa (como do jQuery, por exemplo), colocar em alguma pasta do projeto e simplesmente usá-los referenciando em seu HTML. Entretanto, conforme o projeto vai crescendo, seja em complexidade seja em número de colaboradores, as coisas vão ficando mais complicadas e vale ter noção de versionamento, dependências e tudo mais. E fazer tudo isso manualmente é bem... chato.

    E não basta ser chato! Conforme o tempo vai passando, vai ficando cada vez mais difícil manter o projeto com as dependências não sendo auLogo do Bower - Um gerenciador de dependências para seu projeto web!tomaticamente gerenciadas. Afinal, quem aí já tentou atualizar as dependências de um projeto que não possui esse tipo de gerenciamento? Dica: não queira tentar.

    É por isso que gerenciadores de pacotes se tornaram cada vez mais comum na web. E hoje vou falar um pouco sobre o Bower, um popular gerenciador de dependências projetado para gerenciar especialmente dependências do frontend, como projetos CSS, Javascript, etc.

    (mais…)

  • ScrollMagic - Animações mágicas ao scroll do mouse

    Quando você lança um produto, é comum que você queira que ele seja o mais incrível possível aos olhos do cliente. Uma forma de fazer isso é fazer com que tudo apareça como mágica aos olhos do usuário, fazendo as coisas saltarem na tela conforme o cliente interage com a página de uma forma a dar mais destaque a coisas que realmente merecem mais atenção.

    (mais…)