Front-end Flash com Grunt Gulp Bower Yeoman
•
3 gefällt mir•813 views
O documento discute as principais tecnologias front-end como HTML5, CSS3 e JavaScript, e como ferramentas como Grunt, Gulp, Bower e Yeoman podem ser usadas para automatizar e otimizar o desenvolvimento front-end. Também recomenda o uso do Node.js para ajudar a criar estruturas de projetos front-end de forma rápida e eficiente.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (14)
Andere mochten auch
Andere mochten auch (8)
Ähnlich wie Front-end Flash com Grunt Gulp Bower Yeoman
Ähnlich wie Front-end Flash com Grunt Gulp Bower Yeoman (20)
Front-end Flash com Grunt Gulp Bower Yeoman
- 1. The Flash no FRONT-END Cezar Luiz
- 2. HTML5
- 4. <video> <audio> <picture> <web-components> srcset <section> <article> <aside> <header> <footer> <meta charset=utf-8> <hgroup> websocket <maisde8000>
- 5. Imagens retinas <img src=“logo.png” srcset=“logo@2x.pn g 2x”>
- 6. Inputs email search phone date color text range number tel time week datetime required autofocus min max pattern step
- 7. CSS cansei de ser sexy
- 8. #header { color: red; } .section { background: red; } .title-section { color: red; }
- 9. Why? SASS, LESS, Stylus…
- 10. // SASS $alert: red; .alert { background: $alert; }
- 11. // SASS @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
- 12. OMFD!
- 13. variáveis flexbox gradients border radius box shadow text shadow normalize reset sprites (tools ftw) transitions animations IE10+ !important CSS3 everywhere!
- 14. JavaScript
- 15. jQuery? Será que preciso?
- 16. $(‘.post’) vs document.querySelec torAll(‘.post’) // IE8+
- 17. $ (‘#header’).addClass(‘fixed') vs header.classList.add(‘fixed') // IE10+
- 18. $(‘#header’) vs document.querySelec tor(‘#header’) // IE8+
- 19. API’s geolocation vibration canvas dragndrop filesystem indexeddb shadowdom websocket webgl webrtc battery ajax2 network information page visibility full screen getusermedia storing data
- 20. Tá… Mas eu já sabia disso… Cade o “flash”?
- 21. NODEJS + NPM + COMUNIDADE = MÁGICA HAPPENS
- 23. Grunt / Gulp + Bower + Yeoman
- 24. Grunt / Gulp Automatizadores de tarefas - concatenam, minificam, otimizam imagens, livereload, autoprefixer, sass ou less - tudo isso automagicamente
- 25. Bower Gerenciador de dependências front-end npm install jquery angular normalize-css animate-css fastclick --save
- 26. Yeoman Generators - criam toda a estrutura para você em um simples comando, já incluindo o grunt / gulp, bower, bootstrap ou o generator que você quiser
- 27. Yeoman Generators para wordpress, angular, jquery, ionic, backbone, polymer, express, chromeapp, bootstrap… to infinity and beyond
- 30. yo gulp-webapp autoprefixer jshint jslint otimizar imagens livereload sass minificação contatenação htaccess wiredep
- 31. gulp watch
- 33. gulp
- 34. Pronto sir! Toda sua aplicação acabou de ser otimizada!
- 35. live demo dá tempo?
- 36. thanks!