What jQuery is Doing on Standards

A few months ago, the jQuery Foundation announced its participation in the W3C and ECMA standards bodies. Why did we do this, and how are we doing?

In this talk, Yehuda will give a rough overview of the standardization process, some examples of ways that web developers have helped the process, and talk about how the jQuery project is making a difference.

Transcript

1. Why do they matter? STANDARDS
2. ▪ Why should I care? ▪ What is the process? ▪ Status and Success Stories EXPECTATIONS.
3. WHY SHOULD YOU CARE?
4. THE FUTURE IS COMING.
5. 0% 15% 30% 45% 60% 75% 90% 2006 2007 2008 2009 2010 2011 2012 IE6 IE7 IE8 IE9
6. 0% 15% 30% 45% 60% 75% 90% 2006 2007 2008 2009 2010 2011 2012 IE6
7. 0% 15% 30% 45% 60% 75% 90% 2006 2007 2008 2009 2010 2011 2012 IE7
8. 0% 15% 30% 45% 60% 75% 90% 2006 2007 2008 2009 2010 2011 2012 IE8
9. 0% 15% 30% 45% 60% 75% 90% 2006 2007 2008 2009 2010 2011 2012 IE9
10. 2008 2009 2010 2011 2012 0% 10% 20% 30% 40% Firefox 2 Firefox 3 Firefox 3.5 Firefox 3.6 Firefox 5 Firefox 6 Firefox 11 Firefox 12 Firefox 13 Chrome 2 Chrome 3 Chrome 5 Chrome 6 Chrome 12 Chrome 13 Chrome 14 Chrome 18 Chrome 19
11. 2008 0% 8% 15% 23% 30% Firefox 2 Firefox 3
12. 2009 0% 10% 20% 30% 40% Firefox 2 Firefox 3 Firefox 3.5 Chrome 2 Chrome 3
13. 2010 0% 10% 20% 30% 40% Firefox 3 Firefox 3.5 Firefox 3.6 Chrome 5 Chrome 6
14. 2011 0% 10% 20% 30% 40% Firefox 3.6 Firefox 5 Firefox 6 Chrome 12 Chrome 13 Chrome 14
15. 2012 0% 10% 20% 30% 40% Firefox 3.6 Firefox 11 Firefox 12 Firefox 13 Chrome 18 Chrome 19
16. SLOW TAIL. FAST PATH.
17. SLOW TAIL SHRINKING.
18. CUTTING EDGE GROWING.
19. CUTTING EDGE SPEEDING UP.
20. HOW DOES IT WORK?
21. IMPLEMENTORS. "Standards committees should not be the ones who get to invent the future"
22. IMPLEMENTORS AND INCREASINGLY LIBRARY AUTHORS.
23. SUGAR VS PRIMITIVES.
24. CONSENSUS.
25. WORKERS RULE THE ROOST.
26. Working Draft (WD) Last Call (LC) Candidate Recommendation (CR) Proposed Edited Recommendation (PER) Proposed Recommendation (PR) Web Standard Selectors API 2, Shadow DOM, File API, DOM4, HTML5 Selectors 1, Flexbox, WebSockets, IndexedDB, CSS Paged Media Resource Timing, Battery Status, Web Workers, Web Storage XSLT Geolocation, URI Fragments Selectors 3, DOM3, HTML4, CSS 2.1, Media Queries
27. FEEDBACK.
28. Working Draft (WD) Last Call (LC) Candidate Recommendation (CR) Proposed Edited Recommendation (PER) Proposed Recommendation (PR) Web Standard Selectors API 2, Shadow DOM, File API, DOM4, HTML5 Selectors 1, Flexbox, WebSockets, IndexedDB, CSS Paged Media Resource Timing, Battery Status, Web Workers, Web Storage XSLT Geolocation, URI Fragments Selectors 3, DOM3, HTML4, CSS 2.1, Media Queries
29. Working Draft (WD) Last Call (LC) Candidate Recommendation (CR) Proposed Edited Recommendation (PER) Proposed Recommendation (PR) Web Standard Selectors API 2, Shadow DOM, File API, DOM4, HTML5 Selectors API 1, Flexbox, WebSockets, IndexedDB, Paged Media Resource Timing, Battery Status, Web Workers, Web Storage XSLT Geolocation, URI Fragments Selectors 3, DOM3, HTML4, CSS 2.1, Media Queries
30. Working Draft (WD) Last Call (LC) Candidate Recommendation (CR) Proposed Edited Recommendation (PER) Proposed Recommendation (PR) Web Standard Selectors API 2, Shadow DOM, File API, DOM4, HTML5 Selectors API 1, Flexbox, WebSockets, IndexedDB, Paged Media Resource Timing, Battery Status, Web Workers, Web Storage XSLT Geolocation, URI Fragments Selectors 3, DOM3, HTML4, CSS 2.1, Media Queries
31. MAILING LISTS.
32. PUBLIC-WEBAPPS. PUBLIC-HTML. WWW-STYLE. (ES-DISCUSS).
33. COMPLAINTS
34. MOTHERFUCKER I WANT A GRID!
35. LAYOUT SUCKS!
36. A WILD GRID LAYOUT APPEARS.
37. WHY CAN'T I CENTER SHIT!?
38. A WILD FLEXBOX APPEARS.
39. <style> .parent { display: box; box-align: center; box-pack: center; width: 300px; height: 300px; margin: 0; padding: 0; background-color: black; } .child { width: 100px; height: 100px; background-color: #ccc; } </style> <div class="parent"> <div class="child"></div> </div> FLEXBOX.
40. IT WORKS!
41. IMPLEMENTORS ARE WORKING ON MOST OF THE IMPORTANT PROBLEMS.
42. IMPLEMENTOR ARE THE STANDARDS BODIES.
43. THEY NEED AND WANT OUR HELP!
44. EXAMPLES
45. QUERYSELECTORALL.
46. BROKEN :(
47. SCUMBAG BROWSERS COPY JQUERY FEATURE, IGNORE BUG REPORTS BY JQUERY AUTHOR
48. <div class="grandparent"> <p class="parent"> <span class="child"></span> </p> </div> <script> document.querySelectorAll(".parent") .querySelectorAll("div span"); </script> QSA.
51. ▪ <style scoped> and :scope uni cation ▪ Explicit use of :scope ▪ Naming ▪ .matchesSelector => .matches ▪ Semantics of .matches ▪ XPath (!?) ▪ Combinators (.find("> div")) ▪ Return type (Array, NodeList?) ISSUES.
53. DOCUMENT.PARSE
54. document.createElement("div"); div.innerHTML = "<td>hi</td>"; INNERHTML.
55. $("<td>hi</td>") .appendTo("tr"); UH OH.
56. var isTD = /^\s*<td/, depth = 0; if (isTD.test(string)) { string = "<table><tr>" + string + "</tr></table>"; depth = 2; } // ... SOLUTION.
57. wrapMap = { option: [ 1, "<select multiple='multiple'>", "</select>" ], legend: [ 1, "<fieldset>", "</fieldset>" ], thead: [ 1, "<table>", "</table>" ], tr: [ 2, "<table><tbody>", "</tbody></table>" ], td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ], col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ], area: [ 1, "<map>", "</map>" ], _default: [ 0, "", "" ] } JQUERY.
58. var fragment = Document.parse("<td>hi</td>"); DOCUMENT.PARSE.
60. CONSENSUS OF WHO?
61. WHY NOT US! "Standards committees should not be the ones who get to invent the future" Standards committees are not some weird, distant thing. They're us!
62. If I am not for myself, then who will be for me? And if I am only for myself, then what am I? And if not now, when? “
63. THE FUTURE IS COMING.
64. LET'S BE PART OF IT.
65. THANKS!
66. @WYCATS