Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Flash no front-end

656 views

Published on

Como ser mais produtivo no front-end utilizando novas tecnologias ao seu favor.

Published in: Internet
  • Be the first to comment

The Flash no front-end

  1. 1. The Flash no FRONT-END Cezar Luiz
  2. 2. HTML5
  3. 3. <!doctype html>
  4. 4. <video> <audio> <picture> <web-components> srcset <section> <article> <aside> <header> <footer> <meta charset=utf-8> <hgroup> websocket <maisde8000>
  5. 5. Imagens retinas <img src=“logo.png” srcset=“logo@2x.pn g 2x”>
  6. 6. Inputs email search phone date color text range number tel time week datetime required autofocus min max pattern step
  7. 7. CSS cansei de ser sexy
  8. 8. #header { color: red; } .section { background: red; } .title-section { color: red; }
  9. 9. Why? SASS, LESS, Stylus…
  10. 10. // SASS $alert: red; .alert { background: $alert; }
  11. 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. 12. OMFD!
  13. 13. variáveis flexbox gradients border radius box shadow text shadow normalize reset sprites (tools ftw) transitions animations IE10+ !important CSS3 everywhere!
  14. 14. JavaScript
  15. 15. jQuery? Será que preciso?
  16. 16. $(‘.post’) vs document.querySelec torAll(‘.post’) // IE8+
  17. 17. $ (‘#header’).addClass(‘fixed') vs header.classList.add(‘fixed') // IE10+
  18. 18. $(‘#header’) vs document.querySelec tor(‘#header’) // IE8+
  19. 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. 20. Tá… Mas eu já sabia disso… Cade o “flash”?
  21. 21. NODEJS + NPM + COMUNIDADE = MÁGICA HAPPENS
  22. 22. mais especificament e…
  23. 23. Grunt / Gulp + Bower + Yeoman
  24. 24. Grunt / Gulp Automatizadores de tarefas - concatenam, minificam, otimizam imagens, livereload, autoprefixer, sass ou less - tudo isso automagicamente
  25. 25. Bower Gerenciador de dependências front-end npm install jquery angular normalize-css animate-css fastclick --save
  26. 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. 27. Yeoman Generators para wordpress, angular, jquery, ionic, backbone, polymer, express, chromeapp, bootstrap… to infinity and beyond
  28. 28. Escolheu sua aplicação?
  29. 29. yo gulp-webapp autoprefixer jshint jslint otimizar imagens livereload sass minificação contatenação htaccess wiredep
  30. 30. gulp watch
  31. 31. Acabou de desenvolver?
  32. 32. gulp
  33. 33. Pronto sir! Toda sua aplicação acabou de ser otimizada!
  34. 34. live demo dá tempo?
  35. 35. thanks!

×