Your SlideShare is downloading. ×
0
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
[GWT] Kenji - Highlights do Jquery Conference
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[GWT] Kenji - Highlights do Jquery Conference

990

Published on

Será um espaço para compartilhar informações que foram destaques no jQuery Conference deste ano. …

Será um espaço para compartilhar informações que foram destaques no jQuery Conference deste ano.
- Attributes e Properties no jQuery - Timmy Willison
- Chrome Dev Tools: Tips and Tricks - Paul Irish
- jQuery 1.7 - Events - Dave Methvin
- Progressive Enhancement 2.0 - Nicholas C. Zakas

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
990
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JQUERY CONF 2011 Kenji Yamamoto Desenvolvedor Web @ Esporte1terça-feira, 20 de dezembro de 2011
  • 2. Pontos a destacar Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 3. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 4. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 5. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 6. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin • Progressive Enhancement 2.0 - Nicholas C. Zakas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 7. Attributes and Properties in jQuery por Timmy Willison Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 8. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Como era processado o método .attr() Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 9. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Como era processado o método .attr() • Atributos e Propriedades são processados da mesma forma; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 10. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Como era processado o método .attr() • Atributos e Propriedades são processados da mesma forma; • Muitos bugs, com isso a manutenção ficou difícil de ser mantida. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 11. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Então, qual a diferença? Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 12. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Então, qual a diferença? <input class="foo"> // attribute <input id="bar"> // attribute $(input)[0].className // property $(#bar)[0].id // property Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 13. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Então, qual a diferença? <input class="foo"> // attribute <input id="bar"> // attribute $(input)[0].className // property $(#bar)[0].id // property Atributos estão no html, interpretados pelo browser para formar o DOM, e (geralmente) correspondem às propriedades. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 14. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil O que mudou no jQuery 1.6? Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 15. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil O que mudou no jQuery 1.6? • A propriedade .attr() foi reescrita Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 16. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil O que mudou no jQuery 1.6? • A propriedade .attr() foi reescrita • Aumento significante na performance dos métodos .attr() e .val() Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 17. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil O que mudou no jQuery 1.6? • A propriedade .attr() foi reescrita • Aumento significante na performance dos métodos .attr() e .val() • Inclusão dos métodos .prop() e .removeProp() Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 18. Attributes and Properties in jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil O que mudou no jQuery 1.6? • A propriedade .attr() foi reescrita • Aumento significante na performance dos métodos .attr() e .val() • Inclusão dos métodos .prop() e .removeProp() http://bit.ly/attr_prop Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 19. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 20. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 21. Chrome Dev Tools: Tips and Tricks por Paul Irish Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 22. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Controle sobre o StyleSheet Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 23. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Controle sobre o StyleSheet • Manipulação rápida de cor; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 24. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Controle sobre o StyleSheet • Manipulação rápida de cor; • Interpretação de CSS3 ; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 25. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Controle sobre o StyleSheet • Manipulação rápida de cor; • Interpretação de CSS3 ; • Intervenção fácil no seletores via psuedo-classes. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 26. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Controle sobre o StyleSheet • Manipulação rápida de cor; • Interpretação de CSS3 ; • Intervenção fácil no seletores via psuedo-classes. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 27. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Network Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 28. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Network • Timeline: Informações sobre tempo de renderização Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 29. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Network • Timeline: Informações sobre tempo de renderização • Settings: Desabilitar Cache & outras configurações Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 30. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Console API Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 31. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Console API • Existem mais coisas do que apenas o console.log ! Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 32. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Console API • Existem mais coisas do que apenas o console.log ! • Command Line API Ex.: dir(), inspect(), $0, $1 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 33. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Console API • Existem mais coisas do que apenas o console.log ! • Command Line API Ex.: dir(), inspect(), $0, $1 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 34. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 35. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 36. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 37. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 38. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! • Breakpoints no DOM Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 39. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! • Breakpoints no DOM • Breakpoints nos Event Listeners Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 40. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! • Breakpoints no DOM • Breakpoints nos Event Listeners • Edição live no JS Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 41. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Debugging • Script “Pretty-Printing” ! • Breakpoints no DOM • Breakpoints nos Event Listeners • Edição live no JS • “No-refresh development™!” Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 42. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Task Manager Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 43. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Javascript APIs para monitoração Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 44. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Javascript APIs para monitoração • performance.timing Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 45. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Javascript APIs para monitoração • performance.timing • performance.memory Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 46. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Javascript APIs para monitoração • performance.timing • performance.memory • window.onerror Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 47. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Javascript APIs para monitoração • performance.timing • performance.memory • window.onerror • console.profile() / console.profiles[] Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 48. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Javascript APIs para monitoração • performance.timing • performance.memory • window.onerror • console.profile() / console.profiles[] • console.timeStamp() Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 49. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Extenções para o DevTools Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 50. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Extenções para o DevTools • Painel customizado e Sidebars chrome.devtools.panels Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 51. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Extenções para o DevTools • Painel customizado e Sidebars chrome.devtools.panels Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 52. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Extenções para o DevTools • Painel customizado e Sidebars chrome.devtools.panels • Audits plugáveis chrome.devtools.audits Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 53. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Extenções para o DevTools • Painel customizado e Sidebars chrome.devtools.panels • Audits plugáveis chrome.devtools.audits Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 54. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Extenções para o DevTools • Painel customizado e Sidebars chrome.devtools.panels • Audits plugáveis chrome.devtools.audits • Ferramenta de desenvolvimento experimental para o Chrome API chrome.devtools.network Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 55. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Fica a dica ! Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 56. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Fica a dica ! • Documentação e alguns vídeos code.google.com/chrome/devtools Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 57. Chrome Dev Tools: Tips and Tricks por Paul Irish, Chrome Developer at Google | @paul_irish Fica a dica ! • Documentação e alguns vídeos code.google.com/chrome/devtools • Customização do DevTools smus.com/devtools-cheatsheet Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 58. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 59. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 60. jQuery 1.7 - Events por Dave Methvin Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 61. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Quais são as metas ? Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 62. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Quais são as metas ? • Simplificar a API; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 63. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Quais são as metas ? • Simplificar a API; • Torná-la mais rápida; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 64. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Quais são as metas ? • Simplificar a API; • Torná-la mais rápida; • Reduzir o tamanho total; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 65. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Quais são as metas ? • Simplificar a API; • Torná-la mais rápida; • Reduzir o tamanho total; • Solucionar bugs existentes; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 66. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Quais são as metas ? • Simplificar a API; • Torná-la mais rápida; • Reduzir o tamanho total; • Solucionar bugs existentes; • Não quebrar o que já está funcionando; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 67. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Novos métodos .on() e .off() Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 68. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Novos métodos .on() e .off() • Unificar eventos vinculados e delegados Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 69. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Novos métodos .on() e .off() • Unificar eventos vinculados e delegados $().on(events, “selector”, data, handler); $().off(events, “selector”, handler); Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 70. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Novos métodos .on() e .off() • Unificar eventos vinculados e delegados $().on(events, “selector”, data, handler); $().off(events, “selector”, handler); • Mapear eventos para retrocompatibilidade na API: Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 71. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Novos métodos .on() e .off() • Unificar eventos vinculados e delegados $().on(events, “selector”, data, handler); $().off(events, “selector”, handler); • Mapear eventos para retrocompatibilidade na API: $(“a”).bind(“click change”, { mydata: 42 }, fn); $(“a”).on(“click change”, { mydata: 42 }, fn); $(“.box”).delegate(“a”, “click.myplugin”, fn); $(“.box”).on(“click.myplugin”, “a”, fn); $(“a”).live(“click”, fn); $(document).on(“click”, “a”, fn); Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 72. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 73. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 74. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 75. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); • Pronúncia consistente (ao contrário de live/die ) Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 76. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); • Pronúncia consistente (ao contrário de live/die ) • Métodos encadeados com traversal/filter (ao contrário do live ) Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 77. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); • Pronúncia consistente (ao contrário de live/die ) • Métodos encadeados com traversal/filter (ao contrário do live ) • A ordem dos argumentos é consistente (ao contrário do delegate ) Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 78. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); • Pronúncia consistente (ao contrário de live/die ) • Métodos encadeados com traversal/filter (ao contrário do live ) • A ordem dos argumentos é consistente (ao contrário do delegate ) • Mais curto para digitar (off vs. undelegate ) Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 79. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); • Pronúncia consistente (ao contrário de live/die ) • Métodos encadeados com traversal/filter (ao contrário do live ) • A ordem dos argumentos é consistente (ao contrário do delegate ) • Mais curto para digitar (off vs. undelegate ) • Nenhuma confusão com ECMAScript5 Function.bind Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 80. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Benefícios • Acaba com a confusão sobre a interação entre as APIs de evento $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); • Pronúncia consistente (ao contrário de live/die ) • Métodos encadeados com traversal/filter (ao contrário do live ) • A ordem dos argumentos é consistente (ao contrário do delegate ) • Mais curto para digitar (off vs. undelegate ) • Nenhuma confusão com ECMAScript5 Function.bind • Economia de 1,122 bytes removendo bind/live/delegate no jQuery 1.7 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 81. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Event Delegation é legal, mas… Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 82. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Event Delegation é legal, mas… • Um event handler não pode ser mudado depois que um event handler subseqüente for chamado, isso é chamado de .stopPropagation() .stopImmediatePropagation(); Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 83. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Event Delegation é legal, mas… • Um event handler não pode ser mudado depois que um event handler subseqüente for chamado, isso é chamado de .stopPropagation() .stopImmediatePropagation(); • O jQuery deve igualar o seletor ao ponto de delegação; Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 84. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Event Delegation é legal, mas… • Um event handler não pode ser mudado depois que um event handler subseqüente for chamado, isso é chamado de .stopPropagation() .stopImmediatePropagation(); • O jQuery deve igualar o seletor ao ponto de delegação; • Deve ser delegado evento para o elemento mais próximo possível. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 85. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin “Don’t Make Me Bubble” ! Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 86. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Perfil do caso de teste com jQuery 1.6.3: 15,1 segundos Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 87. jQuery 1.7 - Events por Dave Methvin, membro do jQuery Core Team | @davemethvin Perfil do caso de teste com jQuery 1.7: 5.6 segundos Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 88. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 89. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 90. Progressive Enhancement 2.0 Because the Web isnt Print por Nicholas C. Zakas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 91. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Graceful Degradation Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 92. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Graceful Degradation • Premissa: criar o melhor e mais completo produto possível, suportado pelos browsers mais novos, e a partir daí, as funcionalidades que não são suportadas pelos browsers ou devices simplesmente não são visualizadas. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 93. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 94. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 • Premissa: foco no conteúdo. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 95. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 • Premissa: foco no conteúdo. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 96. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 • Premissa: foco no conteúdo. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 97. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 98. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Chrome Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 99. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Firefox Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 100. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Internet Explorer 9 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 101. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Internet Explorer 6 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 102. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Netscape 4 Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 103. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 104. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos • Rounded Corners • Drag and Drop • Drop Shadows • Geolocation • Gradients • Cross-Domain Ajax • Transitions • Cross-Domain Messaging • Transforms • Client-Side Data Storage • Multiple Background Images • Canvas/WebGL Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 105. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos • Rounded Corners • Drag and Drop • Drop Shadows • Geolocation • Gradients • Cross-Domain Ajax • Transitions • Cross-Domain Messaging • Transforms • Client-Side Data Storage • Multiple Background Images • Canvas/WebGL A melhor experiência possível, dada a capacidade do device. Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 106. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Valores: Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 107. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Valores: Maravilha ! OK OK Aí não né... valor esforço Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 108. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 109. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows • Gradients Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 110. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows Apenas com CSS • Gradients Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 111. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows Apenas com CSS • Gradients •Comportamentos e scripts avançados Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 112. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows Apenas com CSS • Gradients •Comportamentos e Apenas com scripts avançados APIs Nativas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 113. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Tentando fazer com que os navegadores mais antigos façam coisas que nunca foram destinadas a fazer... Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 114. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Tentando fazer com que os navegadores mais antigos façam coisas que nunca foram destinadas a fazer... • Longo tempo de desenvolvimento Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 115. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Tentando fazer com que os navegadores mais antigos façam coisas que nunca foram destinadas a fazer... • Longo tempo de desenvolvimento Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 116. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Tentando fazer com que os navegadores mais antigos façam coisas que nunca foram destinadas a fazer... • Longo tempo de desenvolvimento • Muitos bugs e uma manutenção cara Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 117. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Tentando fazer com que os navegadores mais antigos façam coisas que nunca foram destinadas a fazer... • Longo tempo de desenvolvimento • Muitos bugs e uma manutenção cara • Páginas lentas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 118. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 119. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet “Navegadores antigos muitas vezes precisam de muito mais código para fazer a mesma coisa.” Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 120. Progressive Enhancement 2.0 - Because the Web isnt Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet “Navegadores antigos muitas vezes precisam de muito mais código para fazer a mesma coisa.” “Para prevenir que os browsers de ontem se tornem um fardo para os desenvolvedores web e torná-lo menos feio para o público.” Nicholas C. Zakas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 121. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin • Progressive Enhancement 2.0 - Nicholas C. Zakas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 122. Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin • Progressive Enhancement 2.0 - Nicholas C. Zakas Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 123. OBRIGADO Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011
  • 124. OBRIGADO Slides: contato: http://bit.ly/gwt-kenji contato@kenjiyamamoto.com Links do evento: twitter: http://bit.ly/links-jqueryconf @kenjiyamamoto Kenji Yamamoto | web developer @ Globo.comterça-feira, 20 de dezembro de 2011

×