$30 off During Our Annual Pro Sale. View Details »

Bebop: Kickstart automatizado para websites e apps

Bebop: Kickstart automatizado para websites e apps

Apresentação de um projeto pessoal de kickstart prático para desenvolvimento de websites e web apps, com auxílio de Grunt, Bower, Sass, Compass e outras ferramentas.

Arthur Gouveia

January 15, 2014
Tweet

More Decks by Arthur Gouveia

Other Decks in Programming

Transcript

  1. BEBOP KICKSTART AUTOMATIZADO PARA WEBSITES E APPS

  2. ANTES, EU COSTUMAVA FAZER MUITAS TAREFAS REPETITIVAS

  3. HOJE, EU CONTINUO FAZENDO MUITAS TAREFAS REPETITIVAS

  4. MAS…

  5. BEM MENOS QUE ANTES

  6. BEM MENOS TEMPO

  7. BEM MELHOR

  8. AUTOMAÇÃO É O QUE HÁ! (PARA O CASO DE EM

    PLENO ANO DE 2014 VOCÊ AINDA NÃO SABER)
  9. MENOS TEMPO INICIANDO E DESENVOLVENDO WEBSITES E APPS COM O

    BEBOP http://bit.ly/github-bebop
  10. BRACKET ARMY COFFEEMAKER / FAXINEIRO FRONT-END / CO-FOUNDER / CEO


    TWITTER/GITHUB
 @ARTHURGOUVEIA
  11. HTML5 BOILERPLATE

  12. REQUISITOS? ! • RUBY • SASS + COMPASS • NODE.JS

    + NPM • BOWER
  13. #COMOFAS ! > GIT CLONE > BOWER INSTALL > NPM

    INSTALL > GRUNT
  14. FEATURES & TASKS ! • H5BP COM HELPER MARKUP E

    WAI-ARIA • MODERNIZR & JQUERY VIA BOWER • FACEBOOK OPEN-GRAPH META TAGS • CSS CONDICIONAIS COM USO DE REMS
  15. FEATURES & TASKS ! • SERVER PARA ARQUIVOS ESTÁTICOS •

    WATCH DE ARQUIVOS .HTML, .SCSS E .JS COM LIVE RELOAD • GERAÇÃO AUTOMATIZADA DE SPRITES • CONCATENAÇÃO DE JAVASCRIPTS
  16. FEATURES & TASKS ! • JSHINT E CSSCOMB • GERAÇÃO

    DE BUILD PARA DISTRIBUIÇÃO COM MINIFICAÇÃO DE JAVASCRIPTS E STYLESHEETS, ALÉM DE OTIMIZAÇÃO DE IMAGENS
  17. SHOW ME THE CODE

  18. SEJA PREGUIÇOSO

  19. SEJA CURIOSO

  20. SEJA PRÓ-ATIVO

  21. CONTRIBUA, APRENDA E ENSINE: OPEN-SOURCE

  22. INVISTA TEMPO AUTOMATIZANDO: MAIS TEMPO PRO GAME, CERVEJA E ESTUDOS

    (NÃO NECESSARIAMENTE NESSA ORDEM. A CERVEJA PODE VIR PRIMEIRO.)
  23. @ARTHURGOUVEIA