Sunday, November 14, 2010

Another dump... old... from JS Camp...

 I didn't just want to leave this on my old laptop, but don't really have time to pick out the good parts, so here goes another dump...

HTML5 and JS APIs - MikeTaylr.com/code, /pres/ncjs, /pres/ncjs/apps

Constraint Validation
- form validation
- hooked through JS
- el.willValidate, .setCustomValidity()...
- el.validity object can be probed for information
- Opera currently supports 100% automatically
- examples used the new W3C querySelector api to query the DOM; jQuery does this internally if possible
- but beware that the built-in validations may be naieve ; consider foo@cheeseburger which looks like an email but cheeseburger is not a valid top level domain
- HTML5's email regexp is deliberately broken to make it accept the crap found in the wild

Pattern based validations

regexps are part of the spec
- you can hook into onkey and set a trigger to call a function that changes the valdity properties

Canvas
- 2D API for drawing bitmapped graphics
- 2.5D animated racecar example from Ajaxian
- Transformations, Compositing, Focus mgmt, Pixel Manipulation
- (painting)
- get drawing context, draw path, stroke; code looks like PostScript, or the bitblit from Win32
- higher level built-ins for common geometric shapes; strokeRect()...; or images drawImage(...), which can be manipulated through common transformations
- custom fonts loaded and drawable; some people are writing graphic editors in Canvas; bespin uses canvas text
- box shadows (which used to be in CSS3, not anymore)
- could Canvas kill "Flasturbation" ?
- "modernizer" does feature detection
- for IEn there is Google XCanvas for compatibility, using VML to emulate canvas
- Google working on a Flash replacement for XCanvas
- can save as a base64 encoded PNG or JPEG, for local storage or export
- cannot save images loaded into canvas if they were loaded across domain; pixels are tainted

GeoLocation
- supported by iPhone, FF3(?), Opera10.5+)
- getCurrentPosition(successf, errorf, opts); watchPosition(sf,ef,opts)
- three options
- position.coords object gives detailed positioning information
- use to dump into Google Maps, get map of curr. loc
- always asks for explicit permission
- depends upon the device's means and algorithms used to determine its position; triangulation, phone gps, routers capabilities, etc



JQuery UI
Overview; draggable, droppable, drag-and-drop or revert; uses callback event triggers defined to watch events; resizeable, constrained dimention resizing; etc etc etc
- Most events should be cancellable; those which aren't are b/c of bugs
- they have a set of sample icons in their CSS framework
- autocomplete plugin; can bundle the original input along with the autocompleted value and rendered labels to avoid additional lookups
- behaviors of plugins is overridable by defining handlers for the events and returning false to block the default behavior.
- plugins generally use the static markup on the page and applies styles; button for instance can be applied to almost anything
- unsupported combobox plugin is also in the autocomplete demo
- Datepicker plugin allows i18n for calendar; also multiple calendars
- currrent discussion on-going for i18n across the entire library
- dialog plugin looks nicer, more controllable than alerts; can be applied to any element with any content; can make modal or non-modal dialogs;
- progress bar ; simple; has callback event triggered whenever value changed so listeners can pick up on status changes; animated backgrouns allowed - just use CSS and image trickery
- often features are really accomplished by using built-in style capabilities like overflow; jQuery avoids setting most CSS properties except for dimensions.
- they focus on high-value features which require considerable amount of code to implement, not on one-liners
- Position plugin coming in 1.8: relativistic positioning; !!! hot !!!; will not redraw, but if you bind to the window resize event, you can call to the positioing function again.
- "testswarm"?
- CSS stuff for JQuery done by "Filament Element"
- ARIA: jquery ui should be compliant by 2.0, partially now; with assistance from Fluid




Storage and MVC Applications
Claypool MVC framework; full app stack in JavaScript, HTML DOM
- well, sort of. Actually runs off Java app container; Jetty included
- data source can be client site via Gears or other offline api; FF, Chrome, Safari, IE8 may (modernizer.js will check); and HTML5 thing
- localStorage.setItem(id, jsonstring )
- ~.getItem(id)
- not a very formal query language, just a simple api; need to provide access methods which stringify and parse it; the model must manage the serialization of stored properties to and from strings in storage; note that changes to an array of ids via self.delete will cause reordering , so that the indexes returned in the array by this.ids() are invalidated.
- includes a debugging trace facility that need not be removed afterward
- crash and burn due to FF incompatibility with the storage api
- proxy (ruby)
Post a Comment