Categorias

Newsletter

  • http://chocoladesign.com/wp-content/uploads/2015/05/optimising-your-front-end-workflow-with-symfony-twig-bower-and-gulp-1-638.jpg
    Coding CSS HTML Javascript

    Front-end: aumentando a produtividade do seu workflow.

    Trabalhando como Front-end Developer sabemos que tem muitas maneiras e ferramentas que podem nos ajudar na produtividade do nosso workflow. Estarei listando algumas das coisas que me ajudaram muito nesses meus 5 anos de carreira.


    Como Front-end é necessário sabermos design, ao menos entender design é muito importante. Antes de começar qualquer projeto, sempre é aconselhável rabiscar e deixar as idéias fluírem.

    • Papel e caneta:
      Desconectar-se do computador pode ajudar bastante pra manter a criatividade focada apenas no que você vai desenhar. Sem abas, sem janelas piscando, sem aplicativos chamativos, nada para atrapalhar. Não precisa fazer uma obra de arte, mas algo para você visualizar, deixar a ideia mais clara.
    Sketching Atomic Design Elements

    Sketching Atomic Design Elements

     

    • Bohemian Coding Sketch:
      Esse App é muito bom! Antigamente eu usava o Photoshop, mas resolvi tentar o Sketch. No final das contas acabei trocando.

    Mas por que usar o Sketch? Bom, o Sketch é totalmente focado em User Interface, contrário do Photoshop onde você pode manipular imagens, criar efeitos etc, que não é o que a gente quer fazer. Ele é simples e clean, fácil de usar.

    UI/UX Sketch - by Sergey Valiukh

    UI/UX Sketch – by Sergey Valiukh

     

    • Template Engine:
      O que é isso? Ao invés de usar HTML5 puro, gosto de usar Jade. Primeiro porque ele é feito em Javascript (<3), segundo ele deixa meu código super organizado e se você trabalha com Angular por exemplo, seu código fica bem melhor. Terceiro, não precisa ficar abrindo e fechando tags (para os preguiçosos). Último, mas não menos importante, é possível criar variáveis, mixins, interpolations, includes e mais um monte de coisas. Se você se interessou, dê uma chance para o Jade. É fácil de aprender, lembro que aprendi a usar em um dia.
    Jade

    Jade

     

    • Pré-Processador:
      Chegamos em um momento onde é necessário você saber usar algum pré-processador, é essencial! Gosto bastante do Sass, uso ele porque foi o primeiro que aprendi e é o que tem a maior comunidade entre os pré-processadores. Já experimentei o Stylus (feito com Javascript <3), ele segue bem a linha que o Jade segue. Sem precisar ficar abrindo e fechando nada, nada de pontos e vírgulas.

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.

    A maior vantagem é que você não precisa aprender uma nova linguagem, não precisa ter medo. Você pode escrever um CSS puro em um .scss ou .sass que ele vai ser interpretado normalmente. Então aconselho começar usando Sass com calma e devagar, usando CSS puro e ir experimentando suas features.

    Recentemente, Lourdes Montano da Argentina fez uma talk sobre Sass na Conferência CSS Brasil, muito bom a talk dela, vale conferir os slides.

    “Sass helps you to write CSS faster, not better.”

    • Bower:
      Bower nada mais é do que um Package Manager. Sites são feito cheio de frameworks, libraries, assets, utilities e arco-íris. Bower gerencia todas essas coisas para você.

    Eu achava bem inútil, pois eu não uso nenhum Framework CSS (Bootstrap-like), não costumava usar jQuery. Então não usava porque era desnecessário. Mas se você usa e tiver preguiça de ficar baixando, descompactado as libraries e frameworks. Bower irá te ajudar.

    • Yeoman:
      Yeoman está oficialmente incluso no meu workflow! Ele tem seus próprios Generators onde você só roda ele e o Yeoman cria um projeto completo pra você começar apenas com um comando.
    Yeoman - Generator

    Yeoman – Generator

    Mas o mais legal dele é que você pode criar seus próprios Generators. Como eu criei uma arquitetura bem legal usando a metodologia do Atomic Design que uso em todos os meus projetos (contêm várias pastas e arquivos). Então ao invés de sempre ficar criando ou copiando e colando de projeto em projeto. Eu simplesmente rodo um comando do Yeoman e ele cria todas as pastas e arquivos para mim. Posso incluir libraries como AngularJS ou o que você preferir. Ele cria testes das minhas aplicações (Karma).

    O interessante é que ele combina Yeoman, Bower e Grunt. Yeoman para criar pastas e arquivos com conteúdos básicos de cada projeto (você quem decide), podendo incluir jQuery, Angular, Bootstrap. Ele te pergunta e você apenas escolhe o que quer usar. E para baixar essas libraries e frameworks ele utiliza o Bower que falamos anteriormente (aqui ele faz mais sentido). E o Grunt para compilar, no caso eu uso o Gulp.

    • Gulp/Grunt:
      São task runners. Ele basicamente te ajuda com as tarefas chatas e repetitivas. Compilar Jade, Sass, minificar JS/CSS/imagens, lintar CSS/JS, live reloading, cross-browser testing etc.
    Gulp and Grunt

    Gulp and Grunt

    “Automation isn’t about being lazy, It’s about being efficient.”

    Bom, esse são algumas ferramentas da qual eu uso no meu dia a dia para ajudar na minha produtividade. Dêem uma lida e experimentem, vocês não irão se arrepender. Dentro de alguns dias estarão criando projetos em pouco tempo.

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • Boas dicas, Kinoshita!

      Ferramentas como essas ajudam muito no dia a dia otimizando e melhorando nossa produtividade. E o legal foi você citar também papel e caneta. Pode parecer trivial, mas ajuda muito. Sair um pouco da frente do pc também pode ser útil!

      Abrs!