The jQuery Projects

Transcript

1. The Projects Monday, March 5, 2012
2. Jörn Zaefferer @bassistance The Projects How old is jQuery? Monday, March 5, 2012
3. Jörn Zaefferer @bassistance The Projects How widespread is it? Within the top 10.000 sites? Monday, March 5, 2012
4. Jörn Zaefferer @bassistance The Projects jQuery is the stdio of the web -- Yehuda Katz (Merb, Rails 3, SproutCore, Ember.js) Monday, March 5, 2012
5. Jörn Zaefferer @bassistance The Projects What mobile players have to learn really soon is that the framework wars are over and jQuery has won. -- PPK (quirksmode.org) Monday, March 5, 2012
6. Jörn Zaefferer @bassistance The Projects Chart from http://trends.builtwith.com/javascript/jQuery Monday, March 5, 2012
7. Jörn Zaefferer @bassistance The Projects Chart from http://httparchive.org/trends.php Monday, March 5, 2012
8. Jörn Zaefferer @bassistance The Projects Chart from http://trends.builtwith.com/javascript/jQuery Monday, March 5, 2012
9. Jörn Zaefferer @bassistance The Projects write less, do more jQuery tagline Monday, March 5, 2012
10. The Projects Jörn Zaefferer @bassistance Old-school JavaScript var  tables  =  document.getElementsByTagName("table"); for  (var  t  =  0;  t  <  tables.length;  t++)  {        var  rows  =  tables[t].getElementsByTagName("tr");        for  (var  i  =  1;  i  <  rows.length;  i  +=  2)  {                if  (!/(^|s)odd(s|$)/.test(rows[i].className))  {       rows[i].className  +=  "  odd";                }        } }; Monday, March 5, 2012
11. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
12. The Projects Jörn Zaefferer @bassistance jQuery JavaScript jQuery("table  tr:nth-­‐child(odd)").addClass("odd"); Monday, March 5, 2012
13. Jörn Zaefferer @bassistance The Projects We need to go deeper Who? What? How? Monday, March 5, 2012
14. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
15. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
16. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
17. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
18. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
19. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
20. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
21. Jörn Zaefferer @bassistance The Projects Flexible JavaScript Events September 2005 Monday, March 5, 2012
22. The Projects Jörn Zaefferer @bassistance Fun with event handling function  addEvent(  obj,  type,  fn  )  {    if  (  obj.attachEvent  )  {        obj['e'+type+fn]  =  fn;        obj[type+fn]  =  function(){            obj['e'+type+fn](  window.event  );        }        obj.attachEvent(  'on'+type,  obj[type+fn]  );    }  else        obj.addEventListener(  type,  fn,  false  ); } function  removeEvent(  obj,  type,  fn  )  {    if  (  obj.detachEvent  )  {        obj.detachEvent(  'on'+type,  obj[type+fn]  );        obj[type+fn]  =  null;    }  else        obj.removeEventListener(  type,  fn,  false  ); } Monday, March 5, 2012
23. Jörn Zaefferer @bassistance The Projects jQuery January 2006 Monday, March 5, 2012
24. Jörn Zaefferer @bassistance The Projects jQuery UI September 2007 Monday, March 5, 2012
25. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
26. Jörn Zaefferer @bassistance The Projects QUnit May 2008 Monday, March 5, 2012
27. Jörn Zaefferer @bassistance The Projects Sizzle August 2008 Monday, March 5, 2012
28. Jörn Zaefferer @bassistance The Projects jQuery Mobile August 2010 Monday, March 5, 2012
29. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
30. Jörn Zaefferer @bassistance The Projects jQuery Core 1.7.1 1.5 - 1.7 in 2011 deferreds, on, html5 Monday, March 5, 2012
31. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds $.when(  somethingHappens()  ) .then(  function  ()  {      doSomethingElse(); }); Monday, March 5, 2012
32. The Projects Jörn Zaefferer @bassistance jQuery 1.5 - Deferreds and Ajax $.ajax(  url  ) .then(  function  ()  {      doSomethingElse(); }); Monday, March 5, 2012
33. The Projects Jörn Zaefferer @bassistance jQuery 1.6 - Relative CSS //Before: var  sbwidth  =  parseInt(  $("#sidebar").css("width"),  10); $("#sidebar").css("width",  (sbwidth  +  100)  +  "px"); //Now: $("#sidebar").css("width",  "+=100px"); Monday, March 5, 2012
34. The Projects Jörn Zaefferer @bassistance jQuery 1.6 $.map() Enhancement var  names  =  {  firstname:  "Elijah",  lastname:  "Mannor",   age:  "OLD"};                   names  =  jQuery.map(names,  function(v)  {        return  v.toLowerCase(); });   //  returns:  ["elijah",  "manor",  "old"] Monday, March 5, 2012
35. The Projects Jörn Zaefferer @bassistance jQuery 1.7 //  before $(".foo").bind("click",  function(e)  {}); //  now $(".foo").on("click",  function(e)  {}); Monday, March 5, 2012
36. The Projects Jörn Zaefferer @bassistance //  before $(".foo").delegate(".bar",  "click",  function(e)  {}); //  now $(".foo").on("click",  ".bar",  function(e)  {}); jQuery 1.7 Monday, March 5, 2012
37. The Projects Jörn Zaefferer @bassistance jQuery 1.7 //  before $(".bar").live("click",  function(e)  {}); //  now $(document).on("click",  ".bar",  function(e)  {}); Monday, March 5, 2012
38. The Projects Jörn Zaefferer @bassistance jQuery 1.7 - HTML5 Support $("header").hide(); Monday, March 5, 2012
39. Jörn Zaefferer @bassistance The Projects jQuery Core 1.8 Bug fixing! Monday, March 5, 2012
40. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
41. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
42. Jörn Zaefferer @bassistance The Projects jQuery UI 1.8.18 Widgets, Interactions, Effects, Utilities CSS Framework, ThemeRoller Monday, March 5, 2012
43. Jörn Zaefferer @bassistance The Projects Chart from http://trends.builtwith.com/javascript/jQuery-UI Monday, March 5, 2012
44. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
45. The Projects Jörn Zaefferer @bassistance Autocomplete var  availableTags  =  [   "ActionScript",  "C",  "C++",  "Clojure",  "ColdFusion",   "Erlang",  "Fortran",  "Groovy",  "Java",  "JavaScript",   "Perl",  "PHP",  "Python",  "Ruby",  "Scala",  "Scheme" ]; $(  "#tags"  ).autocomplete({   source:  availableTags }); Monday, March 5, 2012
46. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
47. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
48. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
49. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
50. The Projects Jörn Zaefferer @bassistance connected lists Sortable $(  "#sortable1,  #sortable2"  ).sortable({   connectWith:  ".connectedSortable" }); Monday, March 5, 2012
51. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
52. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
53. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
54. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
55. The Projects Jörn Zaefferer @bassistance Position $("img").position({   my:  "right  middle",   at:  "left+25  middle",   of:  window }); Monday, March 5, 2012
56. The Projects Jörn Zaefferer @bassistance Animated Position $("img").position({   my:  "right  middle",   at:  "left+25  middle",   of:  window,   using:  function(to)  {     $(this).animate(to);   } }); Monday, March 5, 2012
57. Jörn Zaefferer @bassistance The Projects jQuery UI 1.9 Redesigns New Widgets Monday, March 5, 2012
58. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
59. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
60. The Projects Jörn Zaefferer @bassistance Custom Content Tooltip <h3  data-­‐geo>Vienna,  Austria</h3> $(  "body"  ).tooltip({   items:  "[data-­‐geo]",   content:  function()  {       return  "<img  class='map'  src='"  +         "http://maps.google.com/maps/api/staticmap?"  +         "size=350x350&maptype=terrain&&center="  +         $(  this  ).text()  +  "'>";     }   } }); Monday, March 5, 2012
61. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
62. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
63. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
64. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
65. The Projects Jörn Zaefferer @bassistance Decimal Spinner $(  "#spinner"  ).spinner({   step:  0.01,   numberFormat:  "n" }); Monday, March 5, 2012
66. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
67. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
68. Jörn Zaefferer @bassistance The Projects jQuery Mobile 1.0.1 22 A-Grade platforms Ajax navigation with transitions Lists, Toolbars, Form controls ThemeRoller Monday, March 5, 2012
69. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
70. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
71. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
72. The Projects Jörn Zaefferer @bassistance Simple page <!DOCTYPE  html>   <html>   <head>    <meta  charset="utf-­‐8">    <meta  name="viewport"  content="width=device-­‐width,  initial-­‐scale=1">      <title>Direct  Pizza  -­‐  Home</title>      <link  rel="stylesheet"  href="jquery.mobile.css"  />    <script  src="jquery.js"></script>    <script  src="jquery.mobile.js"></script> </head>   <body>   <div  data-­‐role="page">    <div  data-­‐role="header"><h1>Direct  Pizza</h1></div>    <div  data-­‐role="content"><p>Your  personal  pizza  service!</p></div>    <div  data-­‐role="footer"><h4>We  love  Pizza™</h4></div> </div> </body> </html> Monday, March 5, 2012
73. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
74. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
75. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
76. Jörn Zaefferer @bassistance The Projects jQuery Mobile 1.1 Smoother transitions Real fixed toolbars Monday, March 5, 2012
77. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
78. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
79. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
80. The Projects Jörn Zaefferer @bassistance Fixed Toolbars <div  data-­‐role="page"  class="type-­‐interior">   <div  data-­‐role="header"  data-­‐position="fixed">     <h1>Fixed  toolbars</h1>   </div>     <div  data-­‐role="content">     Whatever   </div>   <div  data-­‐role="footer"  data-­‐position="fixed">     <h1>Fixed  Footer</h1>   </div> </div> Monday, March 5, 2012
81. Jörn Zaefferer @bassistance The Projects QUnit 1.3 Simple JavaScript unit testing Monday, March 5, 2012
82. The Projects Jörn Zaefferer @bassistance QUnit Usage <!DOCTYPE  html> <html> <head>   <meta  charset="UTF-­‐8"  />   <title>QUnit  Test  Suite</title>   <link  rel="stylesheet"  href="qunit.css">   <script  src="qunit.js"></script>   <script>      function  add(a,  b)  {            return  a  +  b;      }      test("add  basics",  function()  {            equal(  add(1,  1),  2,  "result  should  be  2"  );      });      </script> </head> <body>   <div  id="qunit"></div>   <div  id="qunit-­‐fixture">test  markup</div> </body> </html> Monday, March 5, 2012
83. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
84. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
85. Jörn Zaefferer @bassistance The Projects The End not really Monday, March 5, 2012
86. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
87. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
88. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
89. Jörn Zaefferer @bassistance The Projects jQuery Foundation Since February 2012 Monday, March 5, 2012
90. Jörn Zaefferer @bassistance The Projects Getting involved Your help, we’re looking for! -- Master Yoda Monday, March 5, 2012
91. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
92. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
93. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
94. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
95. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
96. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
97. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
98. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
99. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
100. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
101. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
102. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
103. Jörn Zaefferer @bassistance The Projects Monday, March 5, 2012
104. Jörn Zaefferer @bassistance The Projects To recap... We’ve come a long way... Monday, March 5, 2012
105. Jörn Zaefferer @bassistance The Projects Special Thanks Content: Ralph Whitbeck, Adam Sontag Design: Doug Neiner Monday, March 5, 2012
106. Jörn Zaefferer @bassistance The Projects @bassistance joern@jquery.com http://bassistance.de TWITTER EMAIL WEB Monday, March 5, 2012