SlideShare a Scribd company logo
jQuery and Standards
                  John Resig
 http://ejohn.org/ - http://twitter.com/jeresig
jQuery
✦   A JavaScript library designed to hide
    painful cross-browser compatibility issues
    while presenting a solid, usable, API.
Simple API
✦   $(“div > span”).addClass(“foo”);
    ✦ “Find some elements”
    ✦ “Do something with them”

✦   Makes complex manipulation of web pages
    simple
Space
✦   Highly competitive space
✦   Released Jan. 2006 - already a dominant
    player: Prototype JavaScript Library
✦   (Bundled with Ruby on Rails, had some
    nice coattail growth.)
✦   Other libraries: Dojo, Yahoo UI,
    MooTools
Specifications
✦   A few specifications that matter to us:
    ✦ DOM
    ✦ HTML
    ✦ CSS
    ✦ ECMAScript

✦   DOM more than anything else.
Concerns
✦   Performance.
✦   Performance.
✦   Performance.
✦   Usability.
✦   Any standards/browser addition that gives
    us performance benefits we’ll leap on.
New Standards We’ve Used
✦   Selectors API
    ✦ querySelectorAll

✦   Selectors API 2
    ✦ matchesSelector

✦   Animation Timing
    ✦ requestAnimationFrame

✦   ECMAScript
    ✦ bind
Selectors API
✦   A bit of a failure
✦   Didn’t listen to the needs of libraries
✦   Missed a number of important features/
    bug fixes:
    ✦ Contextual searching is messed up
    ✦ Error reporting is non-existent
    ✦ Implementations are inconsistent

✦   But it’s very fast, so we use it.
Matches Selector
✦   Selectors API 2 gave us matchesSelector
✦   We petitioned browsers to implement this
✦   They did, then it became a standard
✦   Makes our event delegation much faster
Smooth Animation
✦   requestAnimationFrame was created
✦   Scales animations based upon load
✦   Unfortunately this broke user expectations
    (expected certain frame rates)
✦   We just backed it out, will have to try
    again later
Needs
HTML string -> DOM support
✦   No good way to do this now
✦   Have to create a DOM element and use
    innerHTML
✦   Clunky and quite slow
✦   We want:
    ✦ someMethod(“<b>stuff</b>”) ->
      ✦ [ <b> ]
Access to event callbacks
✦   We want to be able to remove individual
    callbacks
✦   We want to be able to clone callbacks
✦   We want to be able to trigger specific
    callbacks
✦   All of this requires access to callbacks
An event for when stylesheets load
✦   Right now we have an event for DOM
    loaded
✦   And an event for window loaded
✦   But no event for when all the stylesheets
    load (important for looking at computed
    styles)
Will an element fire an event?
✦   For example - if I have a <form> element I
    want to be able to ask it:
    ✦ “Will you ever, natively, trigger a submit
      event?” (true)
✦   If I ask a <div> if it will trigger a submit
    event, it will return false.
Unique ID for DOM nodes
✦   We have to manage callbacks and data that
    we attach to DOM nodes
✦   To do this we have to assign the nodes a
    unique ID
✦   It’d be much better to have a property that
    took care of this for us
“Late Events”
✦   There is no way to ask the browser:
    ✦ “Did an event [foo] already fire on this
      element?”
✦   For example:
    ✦ Did the load event already fire on
      window?
    ✦ Did the submit event already fire on this
      form?
    ✦ etc.
Fast DOM mutation events
✦   I know this is being worked on right now
    (yay!)
✦   A way to have fast DOM mutation events
    would be awesome
✦   It could allow for some really slick
    restructuring of applications
✦   And make it easier for us to possibly do
    caching
mouseenter/mouseleave
✦   Internet Explorer provides these events
✦   They’re terribly useful (make it so that you
    don’t have to deal with event bubbling
    weirdness)
✦   Should be in browsers
✦   Need to verify DOM 3 Events spec
getComputedStyle
✦   A complete mess right now
✦   There is no consensus over what results
    should be returned and when
✦   There needs to be something declared
    here - probably a joint venture between
    the CSS and DOM working groups.
✦   Test suite for getComputedStyle
isCSSAuto
✦   There is no way of determining if a CSS
    property is currently set to “auto”
✦   This should be resolved, makes it much
    easier to do some types of animations
A way to sanely toggle visibility
✦   If we’re given an element that is display:
    none and we want to make it visible
    (display: block, perhaps)
✦   It is very hard to determine what the right
    “visible” style should be
✦   Especially if someone does:
    ✦ div { display: none; }

✦   Hint: It involves nasty use of iframes
contains() method
✦   We have compareDocumentPosition
✦   This is OK but contains() is very easy to
    use (in IE)
✦   Easy enough to implement, should be a
    standard
Better way of sorting nodes
✦   We have to use
    compareDocumentPosition now
✦   This is very very slow
✦   A numerical index property on nodes
    would be very useful (like in IE)
Is a node in an XML document
✦   A number of behaviors change when you’re
    in an XML document
✦   (IDs no longer resolve, some properties
    may not exist - like innerHTML, etc.)
✦   A way to determine if we’re working
    against an XML document would help
Support Tests
Questions?
✦   Questions?
    ✦ jeresig@gmail.com
    ✦ http://ejohn.org/
    ✦ http://twitter.com/jeresig

More Related Content

What's hot

jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
Dave Artz
 
Cross-platform JavaScript
Cross-platform JavaScriptCross-platform JavaScript
Cross-platform JavaScript
Hristo Chakarov
 
Saigon Ruby Meetup 06/10/2015 - Changeful Gem
Saigon Ruby Meetup 06/10/2015 - Changeful GemSaigon Ruby Meetup 06/10/2015 - Changeful Gem
Saigon Ruby Meetup 06/10/2015 - Changeful Gem
Futureworkz
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
Doug Neiner
 
Smooth Animations for Web & Hybrid
Smooth Animations for Web & HybridSmooth Animations for Web & Hybrid
Smooth Animations for Web & Hybrid
FITC
 
JS digest. April 2018
JS digest. April 2018JS digest. April 2018
JS digest. April 2018
ElifTech
 
Lesson 203 18 sep13-1500-ay
Lesson 203 18 sep13-1500-ayLesson 203 18 sep13-1500-ay
Lesson 203 18 sep13-1500-ay
Codecademy Ren
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
mennovanslooten
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
Intro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteIntro to jQuery @ Startup Institute
Intro to jQuery @ Startup Institute
Rafael Gonzaque
 
Stripe con 2021 UI stack
Stripe con 2021 UI stackStripe con 2021 UI stack
Stripe con 2021 UI stack
MaximeRainville1
 
Java script202
Java script202Java script202
Java script202
Wasiq Zia
 
Unobtrusive js
Unobtrusive jsUnobtrusive js
Unobtrusive js
bretticus
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)
Ontico
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
Goutam Dey
 
Web workers and service workers
Web workers and service workersWeb workers and service workers
Web workers and service workers
Nitish Phanse
 
ReactJS Code Impact
ReactJS Code ImpactReactJS Code Impact
ReactJS Code Impact
Raymond McDermott
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
Peter Lubbers
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
博史 高木
 

What's hot (20)

jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
Cross-platform JavaScript
Cross-platform JavaScriptCross-platform JavaScript
Cross-platform JavaScript
 
Saigon Ruby Meetup 06/10/2015 - Changeful Gem
Saigon Ruby Meetup 06/10/2015 - Changeful GemSaigon Ruby Meetup 06/10/2015 - Changeful Gem
Saigon Ruby Meetup 06/10/2015 - Changeful Gem
 
Contextual jQuery
Contextual jQueryContextual jQuery
Contextual jQuery
 
Smooth Animations for Web & Hybrid
Smooth Animations for Web & HybridSmooth Animations for Web & Hybrid
Smooth Animations for Web & Hybrid
 
JS digest. April 2018
JS digest. April 2018JS digest. April 2018
JS digest. April 2018
 
Lesson 203 18 sep13-1500-ay
Lesson 203 18 sep13-1500-ayLesson 203 18 sep13-1500-ay
Lesson 203 18 sep13-1500-ay
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
Intro to jQuery @ Startup Institute
Intro to jQuery @ Startup InstituteIntro to jQuery @ Startup Institute
Intro to jQuery @ Startup Institute
 
Stripe con 2021 UI stack
Stripe con 2021 UI stackStripe con 2021 UI stack
Stripe con 2021 UI stack
 
Java script202
Java script202Java script202
Java script202
 
Unobtrusive js
Unobtrusive jsUnobtrusive js
Unobtrusive js
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
 
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupAngularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetup
 
Web workers and service workers
Web workers and service workersWeb workers and service workers
Web workers and service workers
 
ReactJS Code Impact
ReactJS Code ImpactReactJS Code Impact
ReactJS Code Impact
 
HTML5 Web Workers-unleashed
HTML5 Web Workers-unleashedHTML5 Web Workers-unleashed
HTML5 Web Workers-unleashed
 
HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)HTML5+CSS3 (入門編)
HTML5+CSS3 (入門編)
 

Similar to jQuery and the W3C

Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
Chris Danford
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
jeresig
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
Onely
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
Tech in Asia ID
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
Riza Fahmi
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
Jia Mi
 
APIs for modern web apps
APIs for modern web appsAPIs for modern web apps
APIs for modern web apps
Chris Mills
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
dmethvin
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
Patrick Chanezon
 
Angular js
Angular jsAngular js
Angular js
Mauro Servienti
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
DanWooster1
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 
You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)
Igalia
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From Scratch
Corky Brown
 
JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...
JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...
JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...
Leigh Hanney
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
dmethvin
 
NinjaScript 2010-10-14
NinjaScript 2010-10-14NinjaScript 2010-10-14
NinjaScript 2010-10-14
lrdesign
 
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa..."Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
Fwdays
 
External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1)
Volkan Özçelik
 
External JavaScript Widget Development Best Practices
External JavaScript Widget Development Best PracticesExternal JavaScript Widget Development Best Practices
External JavaScript Widget Development Best Practices
Volkan Özçelik
 

Similar to jQuery and the W3C (20)

Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript Deep crawl the chaotic landscape of JavaScript
Deep crawl the chaotic landscape of JavaScript
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
 
John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)John Resig Beijing 2010 (English Version)
John Resig Beijing 2010 (English Version)
 
APIs for modern web apps
APIs for modern web appsAPIs for modern web apps
APIs for modern web apps
 
jQuery Features to Avoid
jQuery Features to AvoidjQuery Features to Avoid
jQuery Features to Avoid
 
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and ScaleGDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
GDD Japan 2009 - Designing OpenSocial Apps For Speed and Scale
 
Angular js
Angular jsAngular js
Angular js
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)
 
Creating a Responsive Website From Scratch
Creating a Responsive Website From ScratchCreating a Responsive Website From Scratch
Creating a Responsive Website From Scratch
 
JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...
JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...
JavaScript SEO: Testing and Debugging for Non-Developers - Search Marketing S...
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
NinjaScript 2010-10-14
NinjaScript 2010-10-14NinjaScript 2010-10-14
NinjaScript 2010-10-14
 
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa..."Crafting a Third-Party Banking Library with Web Components and React", Germa...
"Crafting a Third-Party Banking Library with Web Components and React", Germa...
 
External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1)
 
External JavaScript Widget Development Best Practices
External JavaScript Widget Development Best PracticesExternal JavaScript Widget Development Best Practices
External JavaScript Widget Development Best Practices
 

More from jeresig

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
jeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
jeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
jeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
jeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
jeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
jeresig
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
jeresig
 

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 
Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)Advanced jQuery (Ajax Exp 2007)
Advanced jQuery (Ajax Exp 2007)
 

Recently uploaded

AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 

Recently uploaded (20)

AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 

jQuery and the W3C

  • 1. jQuery and Standards John Resig http://ejohn.org/ - http://twitter.com/jeresig
  • 2. jQuery ✦ A JavaScript library designed to hide painful cross-browser compatibility issues while presenting a solid, usable, API.
  • 3. Simple API ✦ $(“div > span”).addClass(“foo”); ✦ “Find some elements” ✦ “Do something with them” ✦ Makes complex manipulation of web pages simple
  • 4. Space ✦ Highly competitive space ✦ Released Jan. 2006 - already a dominant player: Prototype JavaScript Library ✦ (Bundled with Ruby on Rails, had some nice coattail growth.) ✦ Other libraries: Dojo, Yahoo UI, MooTools
  • 5.
  • 6.
  • 7. Specifications ✦ A few specifications that matter to us: ✦ DOM ✦ HTML ✦ CSS ✦ ECMAScript ✦ DOM more than anything else.
  • 8. Concerns ✦ Performance. ✦ Performance. ✦ Performance. ✦ Usability. ✦ Any standards/browser addition that gives us performance benefits we’ll leap on.
  • 9. New Standards We’ve Used ✦ Selectors API ✦ querySelectorAll ✦ Selectors API 2 ✦ matchesSelector ✦ Animation Timing ✦ requestAnimationFrame ✦ ECMAScript ✦ bind
  • 10. Selectors API ✦ A bit of a failure ✦ Didn’t listen to the needs of libraries ✦ Missed a number of important features/ bug fixes: ✦ Contextual searching is messed up ✦ Error reporting is non-existent ✦ Implementations are inconsistent ✦ But it’s very fast, so we use it.
  • 11. Matches Selector ✦ Selectors API 2 gave us matchesSelector ✦ We petitioned browsers to implement this ✦ They did, then it became a standard ✦ Makes our event delegation much faster
  • 12. Smooth Animation ✦ requestAnimationFrame was created ✦ Scales animations based upon load ✦ Unfortunately this broke user expectations (expected certain frame rates) ✦ We just backed it out, will have to try again later
  • 13. Needs
  • 14. HTML string -> DOM support ✦ No good way to do this now ✦ Have to create a DOM element and use innerHTML ✦ Clunky and quite slow ✦ We want: ✦ someMethod(“<b>stuff</b>”) -> ✦ [ <b> ]
  • 15. Access to event callbacks ✦ We want to be able to remove individual callbacks ✦ We want to be able to clone callbacks ✦ We want to be able to trigger specific callbacks ✦ All of this requires access to callbacks
  • 16. An event for when stylesheets load ✦ Right now we have an event for DOM loaded ✦ And an event for window loaded ✦ But no event for when all the stylesheets load (important for looking at computed styles)
  • 17. Will an element fire an event? ✦ For example - if I have a <form> element I want to be able to ask it: ✦ “Will you ever, natively, trigger a submit event?” (true) ✦ If I ask a <div> if it will trigger a submit event, it will return false.
  • 18. Unique ID for DOM nodes ✦ We have to manage callbacks and data that we attach to DOM nodes ✦ To do this we have to assign the nodes a unique ID ✦ It’d be much better to have a property that took care of this for us
  • 19. “Late Events” ✦ There is no way to ask the browser: ✦ “Did an event [foo] already fire on this element?” ✦ For example: ✦ Did the load event already fire on window? ✦ Did the submit event already fire on this form? ✦ etc.
  • 20. Fast DOM mutation events ✦ I know this is being worked on right now (yay!) ✦ A way to have fast DOM mutation events would be awesome ✦ It could allow for some really slick restructuring of applications ✦ And make it easier for us to possibly do caching
  • 21. mouseenter/mouseleave ✦ Internet Explorer provides these events ✦ They’re terribly useful (make it so that you don’t have to deal with event bubbling weirdness) ✦ Should be in browsers ✦ Need to verify DOM 3 Events spec
  • 22. getComputedStyle ✦ A complete mess right now ✦ There is no consensus over what results should be returned and when ✦ There needs to be something declared here - probably a joint venture between the CSS and DOM working groups. ✦ Test suite for getComputedStyle
  • 23. isCSSAuto ✦ There is no way of determining if a CSS property is currently set to “auto” ✦ This should be resolved, makes it much easier to do some types of animations
  • 24. A way to sanely toggle visibility ✦ If we’re given an element that is display: none and we want to make it visible (display: block, perhaps) ✦ It is very hard to determine what the right “visible” style should be ✦ Especially if someone does: ✦ div { display: none; } ✦ Hint: It involves nasty use of iframes
  • 25. contains() method ✦ We have compareDocumentPosition ✦ This is OK but contains() is very easy to use (in IE) ✦ Easy enough to implement, should be a standard
  • 26. Better way of sorting nodes ✦ We have to use compareDocumentPosition now ✦ This is very very slow ✦ A numerical index property on nodes would be very useful (like in IE)
  • 27. Is a node in an XML document ✦ A number of behaviors change when you’re in an XML document ✦ (IDs no longer resolve, some properties may not exist - like innerHTML, etc.) ✦ A way to determine if we’re working against an XML document would help
  • 29. Questions? ✦ Questions? ✦ jeresig@gmail.com ✦ http://ejohn.org/ ✦ http://twitter.com/jeresig