Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  2. ANTES, EU
    COSTUMAVA
    FAZER
    MUITAS
    TAREFAS
    REPETITIVAS

    View full-size slide

  3. HOJE, EU
    CONTINUO
    FAZENDO
    MUITAS
    TAREFAS
    REPETITIVAS

    View full-size slide

  4. BEM MENOS
    QUE ANTES

    View full-size slide

  5. BEM MENOS
    TEMPO

    View full-size slide

  6. AUTOMAÇÃO
    É O QUE HÁ!
    (PARA O CASO DE EM PLENO ANO DE 2014 VOCÊ AINDA NÃO SABER)

    View full-size slide

  7. MENOS TEMPO
    INICIANDO E
    DESENVOLVENDO
    WEBSITES E APPS
    COM O BEBOP
    http://bit.ly/github-bebop

    View full-size slide

  8. BRACKET ARMY
    COFFEEMAKER / FAXINEIRO
    FRONT-END / CO-FOUNDER / CEO

    TWITTER/GITHUB

    @ARTHURGOUVEIA

    View full-size slide

  9. HTML5 BOILERPLATE

    View full-size slide

  10. REQUISITOS?
    !
    • RUBY
    • SASS + COMPASS
    • NODE.JS + NPM
    • BOWER

    View full-size slide

  11. #COMOFAS
    !
    > GIT CLONE
    > BOWER INSTALL
    > NPM INSTALL
    > GRUNT

    View full-size slide

  12. FEATURES & TASKS
    !
    • H5BP COM HELPER MARKUP E WAI-ARIA
    • MODERNIZR & JQUERY VIA BOWER
    • FACEBOOK OPEN-GRAPH META TAGS
    • CSS CONDICIONAIS COM USO DE REMS

    View full-size slide

  13. 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

    View full-size slide

  14. 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

    View full-size slide

  15. SHOW ME THE CODE

    View full-size slide

  16. SEJA
    PREGUIÇOSO

    View full-size slide

  17. SEJA
    PRÓ-ATIVO

    View full-size slide

  18. CONTRIBUA,
    APRENDA
    E ENSINE:
    OPEN-SOURCE

    View full-size slide

  19. INVISTA TEMPO
    AUTOMATIZANDO:
    MAIS TEMPO
    PRO GAME,
    CERVEJA E ESTUDOS
    (NÃO NECESSARIAMENTE NESSA ORDEM. A CERVEJA PODE VIR PRIMEIRO.)

    View full-size slide

  20. @ARTHURGOUVEIA

    View full-size slide