Enhancing Web Development with FireQuery Plugin and Event Handlers

FireQuery plugin support for jQuery Lint
YSlow! shows All JS Beautified
ShowSlow aggregation of YSlow! and Page Speed reports
WebPagetest now offers Capture video (alpha)

FireQuery and event handlers

http://firequery.binaryage.com/

After installing one can see the event handlers for an element. For example,

http://jwalsh.corp.sea1.cmates.com/web.svn/beacon/test.html

Create binding for behavior

$("li").bind("mouseover", function() {console.log(this);});

Use the inspector to view one of the list items

<li>events=Object mouseover=[1]handle=function() </li>

Clicking the mouseover event > 0 > handler > function() shows the handler above

This might be similar to

http://code.google.com/p/firecrystal/

FireQuery plugin support for jQuery Lint

http://james.padolsey.com/javascript/jquery-lint/

Unfortunately with the older versions of jQuery (1.3.2 and 1.2.1) the number of errors thrown makes the output largely unreadable.

Location: @http://s.cmcdn.com/graphics/js/lib/jquery-1.2.1.pack.js:11 @http://s.cmcdn.com/graphics/js/lib/jquery-1.2.1.pack.js:11 jquery.lint.js (line 41) The jQuery team recommends against using jQuery.browser, please try to use feature detection instead (see jQuery.support). jquery.lint.js (line 41) jQuery.data(…) called incorrectly jquery.lint.js (line 32) More info: Location: @http://s.cmcdn.com/graphics/js/lib/jquery-1.2.1.pack.js:11 jquery.lint.js (line 41) You passed: [Window user, "events"] Available signatures include:

YSlow! shows All JS Beautified

Firebug > YSlow > Tools > All JS Beautified Show all JavaScript code in this document in an easy to read format

It didn't look like many people in the audience were aware of this new new that should move the manual process of something like

js beautify-cl.js http://s.cmcdn.com/graphics/js/lib/generic.js

ShowSlow aggregation of YSlow! and Page Speed reports

http://www.sergeychernyshev.com/blog/automating-page-speed-and-yslow-monitoring/

I'm added an implementation of ShowSlow against prototype02 to the WOPR backlog but as a temporary aggregation I'm using the following user set properties in about:config in Firefox:

extensions.PageSpeed.beacon.full_results.url;http://jwalsh.corp.sea1.cmates.com/beacon extensions.PageSpeed.beacon.minimal.url;http://jwalsh.corp.sea1.cmates.com/beacon extensions.yslow.beaconUrl;http://jwalsh.corp.sea1.cmates.com/beacon extensions.yslow.optinBeacon;true

Feel free to use these beacon URLs if you're running either scoring mechanism. Logs are available at

http://jwalsh.corp.sea1.cmates.com/logs/beacon.log

This will just create logs like the following:

172.20.52.124 [28/Apr/2010:10:15:26 -0700] "?v=1.7&u=http%3A%2F%2Fwww.classmates.com%2Fmessageboards%2FForumController%3Faction%3DcategoryGateway%26org_id%3D38937%26org_type%3DS%26sub_type%3D1&r=143&w=918149&o=71&l=13820&t=485428&pAvoidBadRequests=100&pCombineCSS=81&pCombineJS=17&pCssExpr=56&pCssSelect=0&pDeferJS=74&pDupeRsrc=100&pGzip=79&pLeverageBrowserCaching=34&pMinDns=0&pMinRedirect=100&pMinifyCSS=93&pMinifyHTML=96&pMinifyJS=79&pMinimizeRequestSize=41&pNoCookie=0&pOptImgs=96&pOptimizeTheOrderOfStylesAndScripts=100&pParallelDl=100&pProxyCache=95.9&pPutCssInTheDocumentHead=70&pServeScaledImages=99&pSpecifyACacheValidator=98&pSpecifyCharsetEarly=75&pSpecifyImageDimensions=19&pUnusedCSS=51.6" 200 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3" "jwalsh.corp.sea1.cmates.com" 172.20.52.124 [28/Apr/2010:10:15:46 -0700] "?w=679754&o=46&u=http%3A%2F%2Fwww.classmates.com%2Fcommunity%2Fschool%3FcommunityId%3D38937%26communityType%3D1&r=168&s=&i=ydefault&" 200 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3" "jwalsh.corp.sea1.cmates.com"

Configuration of FireBug for YSlow! and Page Speed are noted in

http://developer.yahoo.com/yslow/help/beacons.html

http://code.google.com/p/page-speed/wiki/BeaconDocs

This is an alternative to the manual recording of values as noted in

http://xfiles/display/area51/Page+download+sizes+24mar2009.xls

or individual logging of results with

http://xfiles/display/area51/PagetestPlugin

In either case the previous results could be consolidated into a CSV file for historical tracking.