debugging tips in yui 3
Post on 25-Jun-2015
1.940 Views
Preview:
DESCRIPTION
TRANSCRIPT
YUICONF 2009
Luke Smith
Debugging in YUI 3
yuilibrary lsmith
github lsmith
twitter ls_n
Tuesday January 18 2011
YUICONF 2009
Debugging is all about challenging your own assumptions At least one of them was obviously wrongrdquo
-- some bald guy
ldquo
Tuesday January 18 2011
YUICONF 2009
Web development is hard
Tuesday January 18 2011
YUICONF 2009
This is what were up against
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugging is all about challenging your own assumptions At least one of them was obviously wrongrdquo
-- some bald guy
ldquo
Tuesday January 18 2011
YUICONF 2009
Web development is hard
Tuesday January 18 2011
YUICONF 2009
This is what were up against
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Web development is hard
Tuesday January 18 2011
YUICONF 2009
This is what were up against
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
This is what were up against
HTMLTag soup
Quirks mode
Unsupported tags
CSSCascadeSpecificity
Stacking context
Box model
JavaScriptFunction scoping
Late bindingthis
DOMReflows
Event system
Asynchronicity
BrowserImplementations
Security policy
Bugs
LibraryInconsistent API
Version nuances
Bugs
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Environment
Complexity
Inconsistency
Bugs
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
The actual problem
(understand the problem space)
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
JS
DOM
HTMLCSS
Browser
Requiredknowledge
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Itrsquos the nature of a library to change the playing field
Requiredknowledge
JS
DOM
HTML
CSSBrowser Library
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
We try
Consistent API Much improved
Interoperability Still great
Documentation Good but can improve
Bugs Where
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
What we have to work with
Inspectors
Console
Debuggers
Community
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Console
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Debugger
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
FireBug
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Dragonfly
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE Developer Tools
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE6 and (true) IE7
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
MS Visual Web DeveloperExpress Edition
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
IE Developer Toolbar
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Firefox
Safari
Opera
IE8
IE7
IE6
Developer tools
FireBug
Web Inspector
Dragonfly
Developer Tools
MS Vis Web Dev + Dev Toolbar
MS Vis Web Dev + Dev Toolbar
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Step 1 Verify its in the DOM
Step 2 Hover the element for highlight
Step 3 Check for missingoverridden styles
Step 4 Check the CSS of its ancestors
Step 5 Disable styles position zoom
Step 6 Reduce
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
display none
visibility hidden
overflow hidden
z-index x
position relative
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspector
Problem [something] isnt showing up
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspectors
- Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
console
NO YESalert()
consolelog()
Ylog()
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
console
NO YES
Ylog()alert()
consolelog()
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Ylog( msg category source )
if (this_isImageLoading(img))
Ylog(ldquoThumb image loadingrdquo info slider)
Schedule the sync for when the image loadserrors this_scheduleSync() else
Ylog(ldquoNo thumb image or image already loaded ldquo + ldquoSyncing immediatelyrdquo info slider)
this_ready(imgthis_isImageLoaded(img))
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
YConsole
new YConsole()render()
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
YConsole
Ylog()
Cross browser
Configurable
Extendable
Pluggable
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
YPluginConsoleFilters
new YConsole() plug(YPluginConsoleFilters) render()
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Configure YUI for debuggingYUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
YUI( debug true filter lsquodebug|rawrsquo filters module lsquomin|raw|debugrsquo logInclude source true logExclude source true )
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
YUI( filter lsquorawrsquo filters attribute lsquodebugrsquo )
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Inspectors
Console
- Debuggers
- Community
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Low hanging fruit
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
var obj = foo ldquoFoordquo bar ldquoBarrdquo
Culprit
Tip Trailing commas break IE
ldquoExpected identifier string or numberrdquo
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Wait for DOMReady
ldquoOperation abortedrdquo
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
ldquoOperation abortedrdquo
Yon(domready function () )
Yon(contentready initFn wrapper)
Yon(available initFn el)
Yon(load function () window)
Yone(body)prepend( newContent )
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Wheres my data
var data
Yio(url on success function (id o) data = oresponseText )
displayData(data)
1
2
3
4
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Wheres my data
Expectation = breakpoint
Console or Net for XHR inspection
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem X is not a function
YUI(config)use(io-base function (Y)
function displayData(stuff) content = stuff || BOOM Yone(x)setContent( content )
var data
Yio(url onsuccess callback )
displayData(data)
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a function
Object does not support this property or method
TypeError Result of expression Yone [undefined] is not a
function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a function
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a function
Break on all errors
Documentation
Dependency Configurator
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a function
FireBug
Web Inspector
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yone(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yone returns null
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Selector not working
YUI(config)use(node function (Y)
Yall(divcontains(YUI)) addClass(where-u-at)
selector-css3
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Symptoms
Run time errors
Yall returns empty NodeList
Cross browser failure
Usual suspects
selector-css3
event-mouseenter
event-focus
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Step 1 break the chain
Step 2 expectation = breakpoint
Step 3 nodeListsize()
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Missing module
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
X is not a functionand
Missing module
Break on all errors
Expectation = breakpoint
Documentation
Community
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
YUI(config)use(node function (Y)
implementation
)
Y is not visible here
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Step 1 Assign Y to a local variable
Step 2 Combo url = synchronous
Step 3 Undo step 1 and 2
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Cant access Y
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Problem Cant access Y
var Y = YUI()use(node function (Y)
implementation
)
Y IS visible here
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
var node = Yone(myform button)
var nodeList = Yall(myform button)
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
domNode = node_node
domNodes = nodeList_nodes
YNodegetDOMNode( node )
YNodeListgetDOMNodes( nodeList )
Problem I want the DOM node
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Community
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Community
Help us help you
ydn-javascript
yui3
yuilibrarycomforum
stackoverflowcom
yui
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Community
Check the Forum archives
Reduce
gist
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
httpgistgithubcom
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Donrsquot be afraid to RTFS
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
JSLint
Markup validation
YTest
Preventative measures
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Final note
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Final note
ADD TESTS
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Oh and remember
Its your fault
And add tests
Seriously
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
YUICONF 2009
Image credits
httpappraisalnewsonlinetypepadcomappraisal_news_for_real_eoffice_managementhttpwwwflickrcomphotoscibergaita62123585httpwwwbergoiataorgfedivers1610htm
Tuesday January 18 2011
top related