JQUERY CONF 2011 
Kenji Yamamoto 
Desenvolvedor Web @ Esporte1 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
• Chrome Dev Tools: Tips and Tricks - Paul Irish 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
• Chrome Dev Tools: Tips and Tricks - Paul Irish 
• jQuery 1.7 - Events - Dave Methvin 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
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 
terça-feira, 20 de dezembro de 2011
Attributes and Properties in jQuery 
por Timmy Willison 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Attributes and Properties in jQuery 
por Timmy Willison, membro do jQuery Core Team | @timmywil 
Kenji Yamamoto | web developer @ Globo.com 
Então, qual a diferença? 
terça-feira, 20 de dezembro de 2011
Attributes and Properties in jQuery 
por Timmy Willison, membro do jQuery Core Team | @timmywil 
Kenji Yamamoto | web developer @ Globo.com 
Então, qual a diferença? 
<input class="foo"> // attribute 
$('input')[0].className // property 
<input id="bar"> // attribute 
$('#bar')[0].id // property 
terça-feira, 20 de dezembro de 2011
Attributes and Properties in jQuery 
por Timmy Willison, membro do jQuery Core Team | @timmywil 
Kenji Yamamoto | web developer @ Globo.com 
Então, qual a diferença? 
<input class="foo"> // attribute 
$('input')[0].className // property 
<input id="bar"> // attribute 
$('#bar')[0].id // property 
Atributos estão no html, interpretados pelo browser para formar o DOM, e 
(geralmente) correspondem às propriedades. 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
http://bit.ly/attr_prop 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Controle sobre o StyleSheet 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Network 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Console API 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
• Breakpoints no DOM 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
• Breakpoints no DOM 
• Breakpoints nos Event Listeners 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
• Breakpoints no DOM 
• Breakpoints nos Event Listeners 
• Edição live no JS 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Debugging 
• Script “Pretty-Printing” ! 
Kenji Yamamoto | web developer @ Globo.com 
• Breakpoints no DOM 
• Breakpoints nos Event Listeners 
• Edição live no JS 
• “No-refresh development™!” 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Task Manager 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Chrome Dev Tools: Tips and Tricks 
por Paul Irish, Chrome Developer at Google | @paul_irish 
Fica a dica ! 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
• Chrome Dev Tools: Tips and Tricks - Paul Irish 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
• Chrome Dev Tools: Tips and Tricks - Paul Irish 
terça-feira, 20 de dezembro de 2011
jQuery 1.7 - Events 
por Dave Methvin 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
jQuery 1.7 - Events 
por Dave Methvin, membro do jQuery Core Team | @davemethvin 
Quais são as metas ? 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
jQuery 1.7 - Events 
por Dave Methvin, membro do jQuery Core Team | @davemethvin 
Novos métodos .on() e .off() 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
$().on(events, “selector”, data, handler); 
$().off(events, “selector”, handler); 
terça-feira, 20 de dezembro de 2011
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.com 
$().on(events, “selector”, data, handler); 
$().off(events, “selector”, handler); 
• Mapear eventos para retrocompatibilidade na API: 
terça-feira, 20 de dezembro de 2011
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.com 
$().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); 
terça-feira, 20 de dezembro de 2011
jQuery 1.7 - Events 
por Dave Methvin, membro do jQuery Core Team | @davemethvin 
Benefícios 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
terça-feira, 20 de dezembro de 2011
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 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
terça-feira, 20 de dezembro de 2011
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 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
• Pronúncia consistente (ao contrário de live/die ) 
terça-feira, 20 de dezembro de 2011
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 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
• Pronúncia consistente (ao contrário de live/die ) 
• Métodos encadeados com traversal/filter (ao contrário do live ) 
terça-feira, 20 de dezembro de 2011
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 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
• 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 ) 
terça-feira, 20 de dezembro de 2011
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 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
• 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 ) 
terça-feira, 20 de dezembro de 2011
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 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
• 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 
terça-feira, 20 de dezembro de 2011
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 
$(document).on(“click”, “a”, function(){ alert(“Hello”); }); 
$(document).off(“click”); 
Kenji Yamamoto | web developer @ Globo.com 
$(“a”).live(“click”, function(){ alert(“Hello”); }); 
$(document).unbind(“click”); // ‘live is now dead!’ 
• 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 
terça-feira, 20 de dezembro de 2011
jQuery 1.7 - Events 
por Dave Methvin, membro do jQuery Core Team | @davemethvin 
Event Delegation é legal, mas… 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
jQuery 1.7 - Events 
por Dave Methvin, membro do jQuery Core Team | @davemethvin 
“Don’t Make Me Bubble” ! 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
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.com 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
• Chrome Dev Tools: Tips and Tricks - Paul Irish 
• jQuery 1.7 - Events - Dave Methvin 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
Pontos a destacar 
• Attributes e Properties no jQuery - Timmy Willison 
• Chrome Dev Tools: Tips and Tricks - Paul Irish 
• jQuery 1.7 - Events - Dave Methvin 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 
Because the Web isn't Print 
Kenji Yamamoto | web developer @ Globo.com 
por Nicholas C. Zakas 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Graceful Degradation 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 1.0 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 1.0 
Kenji Yamamoto | web developer @ Globo.com 
• Premissa: foco no conteúdo. 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 1.0 
Kenji Yamamoto | web developer @ Globo.com 
• Premissa: foco no conteúdo. 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 1.0 
Kenji Yamamoto | web developer @ Globo.com 
• Premissa: foco no conteúdo. 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 2.0 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 2.0 
Kenji Yamamoto | web developer @ Globo.com 
Chrome 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 2.0 
Kenji Yamamoto | web developer @ Globo.com 
Firefox 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 2.0 
Kenji Yamamoto | web developer @ Globo.com 
Internet Explorer 9 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 2.0 
Kenji Yamamoto | web developer @ Globo.com 
Internet Explorer 6 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Progressive Enhancement 2.0 
Kenji Yamamoto | web developer @ Globo.com 
Netscape 4 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Compatibilidade dos navegadores mais novos 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Compatibilidade dos navegadores mais novos 
Kenji Yamamoto | web developer @ Globo.com 
• Rounded Corners 
• Drop Shadows 
• Gradients 
• Transitions 
• Transforms 
• Multiple Background Images 
• Drag and Drop 
• Geolocation 
• Cross-Domain Ajax 
• Cross-Domain Messaging 
• Client-Side Data Storage 
• Canvas/WebGL 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Compatibilidade dos navegadores mais novos 
Kenji Yamamoto | web developer @ Globo.com 
• Rounded Corners 
• Drop Shadows 
• Gradients 
• Transitions 
• Transforms 
• Multiple Background Images 
• Drag and Drop 
• Geolocation 
• Cross-Domain Ajax 
• Cross-Domain Messaging 
• Client-Side Data Storage 
• Canvas/WebGL 
A melhor experiência possível, dada a capacidade do device. 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Valores: 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Valores: 
Kenji Yamamoto | web developer @ Globo.com 
OK 
Maravilha ! 
OK 
Aí não né... 
valor 
esforço 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Kenji Yamamoto | web developer @ Globo.com 
Compatibilidade dos navegadores mais novos 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Kenji Yamamoto | web developer @ Globo.com 
Compatibilidade dos navegadores mais novos 
• Rounded Corners 
• Drop Shadows 
• Gradients 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Kenji Yamamoto | web developer @ Globo.com 
Compatibilidade dos navegadores mais novos 
• Rounded Corners 
• Drop Shadows 
• Gradients 
Apenas com CSS 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Kenji Yamamoto | web developer @ Globo.com 
Compatibilidade dos navegadores mais novos 
• Rounded Corners 
• Drop Shadows 
• Gradients 
Apenas com CSS 
•Comportamentos e 
scripts avançados 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Kenji Yamamoto | web developer @ Globo.com 
Compatibilidade dos navegadores mais novos 
• Rounded Corners 
• Drop Shadows 
• Gradients 
Apenas com CSS 
•Comportamentos e 
scripts avançados 
Apenas com 
APIs Nativas 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't Print 
por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Progressive Enhancement 2.0 - Because the Web isn't 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.com 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
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 
terça-feira, 20 de dezembro de 2011
Kenji Yamamoto | web developer @ Globo.com 
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 
terça-feira, 20 de dezembro de 2011
OBRIGADO 
Kenji Yamamoto | web developer @ Globo.com 
terça-feira, 20 de dezembro de 2011
OBRIGADO 
Kenji Yamamoto | web developer @ Globo.com 
Slides: 
http://bit.ly/gwt-kenji 
Links do evento: 
http://bit.ly/links-jqueryconf 
contato: 
contato@kenjiyamamoto.com 
twitter: 
@kenjiyamamoto 
terça-feira, 20 de dezembro de 2011

JQUERY CONF 2011Gwt kenjiyamamoto-111220113950-phpapp01

  • 1.
    JQUERY CONF 2011 Kenji Yamamoto Desenvolvedor Web @ Esporte1 terça-feira, 20 de dezembro de 2011
  • 2.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar terça-feira, 20 de dezembro de 2011
  • 3.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison terça-feira, 20 de dezembro de 2011
  • 4.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish terça-feira, 20 de dezembro de 2011
  • 5.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin terça-feira, 20 de dezembro de 2011
  • 6.
    Kenji Yamamoto |web developer @ Globo.com 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 terça-feira, 20 de dezembro de 2011
  • 7.
    Attributes and Propertiesin jQuery por Timmy Willison Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 8.
    Attributes and Propertiesin jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Como era processado o método .attr() Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 9.
    Attributes and Propertiesin 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.com terça-feira, 20 de dezembro de 2011
  • 10.
    Attributes and Propertiesin 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.com terça-feira, 20 de dezembro de 2011
  • 11.
    Attributes and Propertiesin jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Kenji Yamamoto | web developer @ Globo.com Então, qual a diferença? terça-feira, 20 de dezembro de 2011
  • 12.
    Attributes and Propertiesin jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Kenji Yamamoto | web developer @ Globo.com Então, qual a diferença? <input class="foo"> // attribute $('input')[0].className // property <input id="bar"> // attribute $('#bar')[0].id // property terça-feira, 20 de dezembro de 2011
  • 13.
    Attributes and Propertiesin jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil Kenji Yamamoto | web developer @ Globo.com Então, qual a diferença? <input class="foo"> // attribute $('input')[0].className // property <input id="bar"> // attribute $('#bar')[0].id // property Atributos estão no html, interpretados pelo browser para formar o DOM, e (geralmente) correspondem às propriedades. terça-feira, 20 de dezembro de 2011
  • 14.
    Attributes and Propertiesin jQuery por Timmy Willison, membro do jQuery Core Team | @timmywil O que mudou no jQuery 1.6? Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 15.
    Attributes and Propertiesin 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.com terça-feira, 20 de dezembro de 2011
  • 16.
    Attributes and Propertiesin 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.com terça-feira, 20 de dezembro de 2011
  • 17.
    Attributes and Propertiesin 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.com terça-feira, 20 de dezembro de 2011
  • 18.
    Attributes and Propertiesin 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.com http://bit.ly/attr_prop terça-feira, 20 de dezembro de 2011
  • 19.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison terça-feira, 20 de dezembro de 2011
  • 20.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison terça-feira, 20 de dezembro de 2011
  • 21.
    Chrome Dev Tools:Tips and Tricks por Paul Irish Kenji Yamamoto | web developer @ Globo.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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” ! Kenji Yamamoto | web developer @ Globo.com • Breakpoints no DOM terç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” ! Kenji Yamamoto | web developer @ Globo.com • Breakpoints no DOM • Breakpoints nos Event Listeners terç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” ! Kenji Yamamoto | web developer @ Globo.com • Breakpoints no DOM • Breakpoints nos Event Listeners • Edição live no JS terç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” ! Kenji Yamamoto | web developer @ Globo.com • Breakpoints no DOM • Breakpoints nos Event Listeners • Edição live no JS • “No-refresh development™!” terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terça-feira, 20 de dezembro de 2011
  • 58.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish terça-feira, 20 de dezembro de 2011
  • 59.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish terça-feira, 20 de dezembro de 2011
  • 60.
    jQuery 1.7 -Events por Dave Methvin Kenji Yamamoto | web developer @ Globo.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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 Kenji Yamamoto | web developer @ Globo.com $().on(events, “selector”, data, handler); $().off(events, “selector”, handler); terç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 Kenji Yamamoto | web developer @ Globo.com $().on(events, “selector”, data, handler); $().off(events, “selector”, handler); • Mapear eventos para retrocompatibilidade na API: terç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 Kenji Yamamoto | web developer @ Globo.com $().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); terç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.com terç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 Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ terç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 Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); terç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 $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ • Pronúncia consistente (ao contrário de live/die ) terç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 $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ • Pronúncia consistente (ao contrário de live/die ) • Métodos encadeados com traversal/filter (ao contrário do live ) terç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 $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ • 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 ) terç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 $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ • 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 ) terç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 $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ • 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 terç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 $(document).on(“click”, “a”, function(){ alert(“Hello”); }); $(document).off(“click”); Kenji Yamamoto | web developer @ Globo.com $(“a”).live(“click”, function(){ alert(“Hello”); }); $(document).unbind(“click”); // ‘live is now dead!’ • 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 terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terç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.com terça-feira, 20 de dezembro de 2011
  • 88.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin terça-feira, 20 de dezembro de 2011
  • 89.
    Kenji Yamamoto |web developer @ Globo.com Pontos a destacar • Attributes e Properties no jQuery - Timmy Willison • Chrome Dev Tools: Tips and Tricks - Paul Irish • jQuery 1.7 - Events - Dave Methvin terça-feira, 20 de dezembro de 2011
  • 90.
    Progressive Enhancement 2.0 Because the Web isn't Print Kenji Yamamoto | web developer @ Globo.com por Nicholas C. Zakas terça-feira, 20 de dezembro de 2011
  • 91.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Graceful Degradation Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 92.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 93.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 94.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 Kenji Yamamoto | web developer @ Globo.com • Premissa: foco no conteúdo. terça-feira, 20 de dezembro de 2011
  • 95.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 Kenji Yamamoto | web developer @ Globo.com • Premissa: foco no conteúdo. terça-feira, 20 de dezembro de 2011
  • 96.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 1.0 Kenji Yamamoto | web developer @ Globo.com • Premissa: foco no conteúdo. terça-feira, 20 de dezembro de 2011
  • 97.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 98.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.com Chrome terça-feira, 20 de dezembro de 2011
  • 99.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.com Firefox terça-feira, 20 de dezembro de 2011
  • 100.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.com Internet Explorer 9 terça-feira, 20 de dezembro de 2011
  • 101.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.com Internet Explorer 6 terça-feira, 20 de dezembro de 2011
  • 102.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Progressive Enhancement 2.0 Kenji Yamamoto | web developer @ Globo.com Netscape 4 terça-feira, 20 de dezembro de 2011
  • 103.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 104.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos Kenji Yamamoto | web developer @ Globo.com • Rounded Corners • Drop Shadows • Gradients • Transitions • Transforms • Multiple Background Images • Drag and Drop • Geolocation • Cross-Domain Ajax • Cross-Domain Messaging • Client-Side Data Storage • Canvas/WebGL terça-feira, 20 de dezembro de 2011
  • 105.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Compatibilidade dos navegadores mais novos Kenji Yamamoto | web developer @ Globo.com • Rounded Corners • Drop Shadows • Gradients • Transitions • Transforms • Multiple Background Images • Drag and Drop • Geolocation • Cross-Domain Ajax • Cross-Domain Messaging • Client-Side Data Storage • Canvas/WebGL A melhor experiência possível, dada a capacidade do device. terça-feira, 20 de dezembro de 2011
  • 106.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Valores: Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 107.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Valores: Kenji Yamamoto | web developer @ Globo.com OK Maravilha ! OK Aí não né... valor esforço terça-feira, 20 de dezembro de 2011
  • 108.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.com Compatibilidade dos navegadores mais novos terça-feira, 20 de dezembro de 2011
  • 109.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.com Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows • Gradients terça-feira, 20 de dezembro de 2011
  • 110.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.com Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows • Gradients Apenas com CSS terça-feira, 20 de dezembro de 2011
  • 111.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.com Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows • Gradients Apenas com CSS •Comportamentos e scripts avançados terça-feira, 20 de dezembro de 2011
  • 112.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.com Compatibilidade dos navegadores mais novos • Rounded Corners • Drop Shadows • Gradients Apenas com CSS •Comportamentos e scripts avançados Apenas com APIs Nativas terça-feira, 20 de dezembro de 2011
  • 113.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 114.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 115.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 116.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 117.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 118.
    Progressive Enhancement 2.0- Because the Web isn't Print por Nicholas C. Zakas, desenvolvedor Web no Yahoo | @slicknet Kenji Yamamoto | web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 119.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 120.
    Progressive Enhancement 2.0- Because the Web isn't 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.com terça-feira, 20 de dezembro de 2011
  • 121.
    Kenji Yamamoto |web developer @ Globo.com 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 terça-feira, 20 de dezembro de 2011
  • 122.
    Kenji Yamamoto |web developer @ Globo.com 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 terça-feira, 20 de dezembro de 2011
  • 123.
    OBRIGADO Kenji Yamamoto| web developer @ Globo.com terça-feira, 20 de dezembro de 2011
  • 124.
    OBRIGADO Kenji Yamamoto| web developer @ Globo.com Slides: http://bit.ly/gwt-kenji Links do evento: http://bit.ly/links-jqueryconf contato: contato@kenjiyamamoto.com twitter: @kenjiyamamoto terça-feira, 20 de dezembro de 2011