Baixar para ler offline
Carregado porCezar Luiz
The Flash no front-end
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.
The Flash no front-end
- 1. The Flash no FRONT-END Cezar Luiz
- 2.
- 3.
- 4. <video> <audio> <picture> <web-components> srcset <section> <article> <aside> <header> <footer> <meta charset=utf-8> <hgroup> websocket <maisde8000>
- 5. Imagens retinas <imgsrc=“logo.png” srcset=“logo@2x.pn g 2x”>
- 6. Inputs email searchphone date color text range number tel time week datetime required autofocus min max pattern step
- 7. CSS cansei deser 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 @mixinborder-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
- 12.
- 13. variáveis flexbox gradients border radius box shadow text shadow normalize reset sprites (tools ftw) transitions animations IE10+ !important CSS3 everywhere!
- 14.
- 15. jQuery? Será quepreciso?
- 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 vibrationcanvas dragndrop filesystem indexeddb shadowdom websocket webgl webrtc battery ajax2 network information page visibility full screen getusermedia storing data
- 20. Tá… Mas eujá sabia disso… Cade o “flash”?
- 21. NODEJS + NPM+ COMUNIDADE = MÁGICA HAPPENS
- 22.
- 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 parawordpress, angular, jquery, ionic, backbone, polymer, express, chromeapp, bootstrap… to infinity and beyond
- 29.
- 30. yo gulp-webapp autoprefixerjshint jslint otimizar imagens livereload sass minificação contatenação htaccess wiredep
- 31.
- 32.
- 33.
- 34. Pronto sir! Toda sua aplicação acabou de ser otimizada!
- 35. live demo dátempo?
- 36.