Free e-book: http://oreilly.com/go/ugebook

• http://m.jquery.org
• http://aknosis.com

#jqcon for Twitter, @jqcon

Look at jQuery UI Grid; under active development and the most requested UI component.

This switches to use getAttribute by default rather than an "expando" such as input.type (as used by id)

Research how this is used.

http://forum.jquery.com/topic/valhooks-discussion-pros-cons http://jsperf.com/val-enhancements-proposal

http://api.jquery.com/jQuery.cssHooks/

https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

http://api.jquery.com/jQuery.proxy/

Use instead of $.proxy().

.css("height", "+10px") instead of dimension the height.

The baseline for suport is a check if media queries are supported.

Will use pushState().

data-jqm-data

http://jqmgallery.com has examples

http://www.alistapart.com/articles/responsive-web-design/

https://github.com/scottjehl/Respond

This would allow full resolution of test.html#/product.html could /product.html

Currently mostly document driven. Some of the work is on consolidating the Ajax calls or JSON + templates.

• HTML5 doctype
• Set the doctype http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
• data-ajax="false" for multipage sites
• dialog support
• Global disable for transision support

http://jquerymobile.com/test/docs/lists/docs-lists.html

Evangelical approach to defining Web Performance Optimiation (WPO).

http://www.blaze.io/

http://calendar.perfplanet.com/2010/mobile-performance-analysis-using-pcapperf/

This would be used in conjunction with Wire Shark or tcpdump.

This is converted to HAR from pcapperf.appspot.com

Used by Google and Bing. Use the Storager application.

http://httparchive.org/

Show how trending occurs for HTTP requests not just the final page.

http://httparchive.org/viewsite.php?pageid=64769

Internal jokes for the community.

• Keep Paul Irish away from your mom.
• @raybango if you don't like the talk
• Doesn't know jQuery

Browsers and how to get the newest features.

• Mosaic
• Netscape 1
• Netscape 2
• Netscape 3: Now has color
• MSIE 3

Thus started the browser wars…

Show a button for upgrading.

Browser sniffing or check for functionality.

<noscript>

Testing is based on the idea that things shouldn't break so you still need a support matrix.

Naked CSS day. Use semantic markup.

See the division between content, presention, client-side scripting.

But is this a standard nomenclature.

Yahoo! Graded Browser support is based on progressive enhancement. Assume you define the level of the view.

The problem came in because we (business and developers) though we understood what a "page" was supposed to be.

All books look the same.

But this creates a testing nightmare if it needs to be fully supported.

But this might be the wrong goal.

Historically we've spent a massive amount of time supporting IE6 / IE7 for pixel perfect rendering.

Image, sprite, position, CDN, need to update. This isn't a worthwhile use of resources.

Browser wars -> DOM issues. Incompatibilities in the DOM0 vs. DOM2…switching between trivial selection mechanism (e.g., document.all vs. getElement{sByTagName, sClassName, ById}) made non-trivial applications impossible.

Should coerction be used for null or undefined; does jQuery do the right thing?

Example was a test with a function defined in a conditional that is hoisted to the top of the scope.

The second was a function defined in a for loop with returned values.

Either run in strict mode to detect incorrect use of this as the global object (window).

Install as a git hook; scripts are available in github.

git -n

skips all of the hooks.

http://perfectionkills.com/ http://bonsaiden.github.com/JavaScript-Garden/

Fighting against the file size issue.

Also fighting against the desire to build the solutions that match to the particular project.

Would need to have the abstractions done as a larger projects.

What happens in the lifecycle of a project.

event -> [Handler] -> DOM update

event -> native handler -> [Custom event]

custome event -> [Handler]

Event simulation becomes the issue since you still need to find the underlying object.

Within the last two years. Most of the underlying work done in data and events.

Uses property observing library. Need to wrap to check that the update won't self trigger.

Example provides is for todo:

var ToDo = function() {} ToDo.prototype.set …

Uses a model as part of an underlying object. Set properties then look up the underlying DOM representation.

event -> native -> update data data event -> native -> update DOM

This could work with Backbone or $.data() event listeners.

• Todo item has state isDone = false
• item state changes to true
• List changes by removing the item
• Update the number of items

This lives by looking at a changeData event handler when using $.data().

This occurs only when there isn't a 1 to 1 map between data and DOM state.

• native change handler
• set is done on object
• object change handler
• recalcuate

This all cascade and the tasks are repeated.

List now begins to have bulk property to true for the update.

This is very similar to the logic used for the layout calculation system used in rendering engines.

Example is deleting all contacts. Does this flag an updater state?

• start native handler
• triggerLater calls
• end native
• triggerLater starts

Examples: New Twitter, GitHub issue handler, WordPress comment management.

Each requires that a single interaction will push to many other UI elements in the DOM.

• Have a list of four
• Check clear all
• Add new events -> uncheck clear all
• Delete new event -> check clear all?

Focus on what a function like allAreDone actually means.

Binding occurs in the template back to the model that is used to define what the data means for the system.

Key property is the notion of "dirty" based on changed that are made or dependencies changed that aren't reflect in DOM.

How close is this to the goal of having a JSON structure poured into the template that defers rendering to the point where the underlying model is effectively complete and we no longer have active "dirty" work happening?

Not that close. You still need a property observing libraries which means you need to handle intermediate state.

Reality gets reflected in the DOM…

http://blog.sproutcore.com/post/3075780393/sproutcore-amber-a-report-by-yehuda

Runtime: Handlebars, jQuery eventing, templates

http://amber-todos.strobeapp.com

Uses boilerplate as well.

http://enterprisejquery.com/2010/07/mock-your-ajax-requests-with-mockjax-for-rapid-development/

Includes a latency option as well.

Mock is just defined as part of a test configuration.

https://github.com/mennovanslooten/mockJSON

Create routes and JSON constructors.

Can override Amplify definitions of the resource -> URL mapping needed for the mock data.

Has decoder functions when using external live data instead of mockJSON.

https://spreadsheets.google.com/viewform?formkey=dG03WVo3SWlFZHNQVHgtd1RQbEZFWkE6MQ

http://remysharp.com/2010/10/08/what-is-a-polyfill/

http://code.msdn.microsoft.com/Introduction-to-MVC-3-10d1b098/sourcecode?itemId=94015 http://adtmag.com/articles/2011/04/12/unveiled-at-microsoft-mix.aspx

Should be more like Firebug.

What would the actual benefit be for semantic HTML.

Doesn't this have too much of a document focus.

http://www.mirovideoconverter.com/

"Backbone.js is a suzuki Samuri" after a failed jump.

You could do it with jQuery but it's going to hurt.

The actual flow is

site.com#!state site.com?_escaped_fragment=state

…bind('change.text', function () {});

https://gist.github.com/811849

http://api.jquery.com/jquery.tmpl/ http://api.jquery.com/category/plugins/data-link/

• HTML: <script>

The key area would be JavaScript values in option values: page weight with odd selection rules and limited inspection.

Keeps the jQuery object clean. Comes at a cost of not binding to site functionality.

jwalsh.event.publish("search.loaded") jwalsh.event.subscribe("search.loaded)

jwalsh.event.publish("page.changed", 5)

Limited prediction capabilities.

Can look at the Google code search

Useful for debugging

http://leaverou.me/css3patterns/

Update the style inline then move to the resources

http://getfirebug.com/wiki/index.php/Console_API

RIM now includes this so desktops could connect.

This will use uglify.js

http://new.crbug.com/

http://code.google.com/chrome/devtools/

These are synthetic events.

Look at all of the e.original events for click that aren't in the jQuery event.

original event: … extra props: []

Now shortcut methods for new events.

$.event.props ["altKey", "attrChange", "attrName", "bubbles", "button", "cancelable", "charCode", "clientX", "clientY", "ctrlKey", "currentTarget", "data", "detail", "eventPhase", "fromElement", "handler", "keyCode", "layerX", "layerY", "metaKey", "newValue", "offsetX", "offsetY", "originalTarget", "pageX", "pageY", "prevValue", "relatedNode", "relatedTarget", "screenX", "screenY", "shiftKey", "srcElement", "target", "toElement", "view", "wheelDelta", "which"]