October 1, 2008     That’s It for the Conference, Y’all

Well, that ends me spamming this blog with conference notes. The YUI talk I went to at the end didn’t really contain too much that was new or interesting, unfortunately.

I’m definitely glad I attended. I learned a lot (!) and even managed to talk to some folks I didn’t know, which I’m generally bad at.

I’m also inspired to work harder on my own ideas and projects, because I know that’s the only way I’m going to get the kind of experience and deeper understanding that I need. So much of this cool stuff was born out of someone just having an idea and going and doing it; I want to be a part of that.

In conclusion: yay! And, back to my regularly scheduled lack of updates.

     Ajax 2.0 (Anne van Kesteren)

HTML5 New Features
- native slider, datepicker, etc.
- wiki at wiki.whatwg.org
- simple, short doctype: (charset declaration is also nicer)
- video element: (codec is an open question, ogg theora proposed)
- controls will be provided in browser chrome style
- provides for fallback content if video not supported
-

Working Offline
- manifest attribute links to a list of files needed to make the app available offline
- new window.onoffline event when the user goes offline
- for storing information: localStorage (persistant) & sessionStorage (persistant across sessions) hashes, both synchronous in nature
- client-side SQL storage

Cross-Site Stuff
- cross-site requests: still use client.open(), other side has to set header Access-Control-Allow-Origin to include your domain
- the request has an origin header that the other server checks
- this only applies to GET and POST
- other methods, like DELETE, have to do a preflight check that the request is allowed
- Microsoft has different model with XDomainRequest - only get and post, header restrictions

Other Stuff
- implements querySelectorAll, finally
- implements Web Workers: a way to split off a thread of processing to a Worker(), which will do it and then return a message
- like multi-threading, only saner and less dangerous

     Javascript: The Good Parts (Douglas Crockford)

Javascript is Weird
- users have the widest range of skill levels of any programming language, computer scientists to cut-and-paste
- javascript has good parts in with the mistakes, proof: is succeeding where java failed
- has many language influences: Self (prototypal inheritance, dynamic objects), Scheme (lambda), Java (syntax), Perl (regex)

The Bad Parts
- global variables (especially default global variables, if you leave out “var”)
- overloading of + (used for addition and string concatenation)
- semicolon insertion (on error, goes back and inserts a semicolon on a previous linefeed)
- typeof works funky sometimes, like with arrays
- with and eval are dangerous
- phony arrays that are really objects
- == and != do type coercion (=== and !== don’t)
- false, null, undefined, NaN all exist
- for..in includes inherited members along with direct object members… and they didn’t tell anybody

Bad Heritage
- this is stuff that C got wrong and everyone else did too
- blockless one-line statements
- expression statements without assignment or function calls (useless)
- floating point arithmetic is imprecise (should scale to integer vals and then do ops)
- ++ and –, danger of buffer overflows, etc.; dc doesn’t use them *(Bri sez: Not sure I understand why, or agree.)
- switch does automatic fall-through

Good Parts
- lambda: concept that functions are first-class values (an idea from Scheme)
- js is the first mainstream lambda language
- dynamic objects (no classes as templates, prototype can be changed later)
- loose typing

Inheritance
- classical (basically everything else) vs. prototypal (javascript)
- class-free, objects inherit from other objects by linking to them (known as delegation / differential inheritance)
- DC shows his object copying function, like from the YUI Theater videos
- new required with constructor (see notes from yesterday)
- if you don’t include it, no error; and the global object is overwritten by the constructor (!)
- obviously this is Bad

A Module Pattern
- “closure” means every function has a reference to the environment in which it was created
- shows the closure example w/private variables, way to avoid global variables
- function can return a function that returns the desired values
- or function can return an object that contains “public” methods/properties
- private stuff goes above the return, nothing outside of that outer function has access to it

A Power Constructor Pattern
- function is not capitalized, not called with ‘new’; not directly itself a constructor
- make an object, “that” (because can’t use “this”)
- define some variables and functions in the function; these are private
- augment the “that” object with privileged methods that access the private stuff
- return “that”

Misc.
- talks about his project, JSLint; says it “defines a professional subset of javascript”
- “you’re not expressing yourself by writing crap[py code]”; creativity has to involve clean, robust code
- “perfectly fine == faulty” *(Bri sez: but only with type coercion, apparently)
- “Javascript: no new design errors since 1999!”

(Note: Ultimately, I like Javascript because you can do cool stuff with it, and because it’s open and standards-based. But in some ways I think the obscure features and weirdnesses make me like it too.

Javascript is like your weird little cousin that most people don’t really get along with, but if you know how to deal with him he’s actually really cool, and then you get to feel special.)

     Advanced Animation and Physics in Javascript (Paul Bakaus)

- example of a little multidirectional walking dude using 12 gifs (6 animated for walking, 6 still) & javascript mouse interaction

CSS Transforms
- currently webkit-only
- 2d transforms on all HTML elements
- rotate, scale, skew
- Firefox 3.1 will have css transforms
- Opera doesn’t have them, IE doesn’t have them

Hacking CSS Transforms
- IE has a filter that does similar things (Matrix filter)
- transformie library works with matrix filter to get CSS transforms into IE
- other browsers?
- canvas approach: find each instance, create a canvas there, do rotations/transforms
- then “just” implement your own rendering engine to draw everything into the canvas
- SVG approach: find each instance, serialize the node, wrap around an SVG xml header, insert transform value
- then encode to base64, create a new element with b64 string as data source, render to the page
- recommends SVG approach
- further work could be done

Pushing the Standards
- when a standard is proposed by w3c, not as effective as when it is just implemented by somebody and then adopted
- libraries can bring an existing standard to different platforms/browsers (excanvas)
- “lowest common multiple” approach: libraries put together a subset of standards that can be used across browsers
- LCM approach can help define/promote new standards

     Ajax and the Back Button (Ben Dillard)

The problem:
How to deal with the back button when the URL never changes
How to allow bookmarking to work properly, resume processes

The Basic Concept
- browser history is guided by no specification, just information browser agreement
- window.history object has properties back, forward, go, and length (pages accessed in the current browser session)
- the URL needs to incorporate information about an Ajax application’s state
- doing this is basically a hack, way to create entries in the history stack without changing the url
- in most browsers, changing the #whatever in the url adds an entry to the history stack without hitting the server
- IE6 and IE7 don’t do this :(
- in those, we have to use a hidden iframe and load our documents into it, creating a history entry
- can use fact that, in most browsers, unsubmitted forms retain their values throughout the current session

Steps in the Process
- Trick the browser into creating a new entry in the history stack
- Stash meaningful data in that history state (in the hash token or iframe title)
- Create a timer function that waits for the hash/iframe to change as a result of user action
- Set up a callback that grabs the stashed data and passes it back into your application
- Write your application to use that data to alter its state
- Internal queue of history states is written to an internal form field, to take advantage of form persistance

Browser Issues
- Opera 9: broken timers
- Safari 2: broken history.length
- Safari 3 Win: just plain broken (3.1 is workable)
- IE8: starts to implement HTML5 history, uses the hash, browser event called onhashchange (good!)
- Chrome: doesn’t implement form persistance

Really Simple History
- the first and oldest browser history manager
- not tied to any larger framework
- uses hidden form fields to work within a session, even with interruptions
- stores state as key:value pairs
- keys live in the browser hash or an iframe
- values are JSON data stashed in a hidden form field
- so keys last across sessions, but values last only within a session
- most people get around this by just sticking everything in the hash in query-string format

dsHistory
- uses iframes across all browsers
- updates hash only to allow bookmarking
- binds functions, rather than data, to each history point
- responsibility for knowing what to do is in the history manager, not in your application
- suited for handling multiple, radically different changes of state
- doesn’t support Safari 2 or any Opera

JavaScript State Manager
- rewrite and optimization of Really Simple History
- currently jQuery plugin
- optimized for common use cases (content changes based on ajax calls)
- relies on literal ajax calls
- adds support for ajax form requests

Lessons Learned from RSH
- don’t couple too tightly to current browser limitations
- foster a broader community (than one person)
- along with that, design modularly so that different people can take different parts (in this case, different browsers)
- cover the common cases, leave bells and whistles to plugins

- Zach Leatherman has a CSS-based approach that doesn’t use setInterval

Problems
- problems with document title - gets messed up when you start using it (current document title gets inserted)
- manual URL changes aren’t handled properly in IE6/7
- in IE6/7, when you leave the site, all history menu entries for your site get collapsed
- issues with multiple iframes in complex apps

HTML5 History Specification
- it has one! yay!
- onhashchange event from the browser (implemented in IE8)
- history.pushState, history.clearState (not implemented anywhere yet)
- title changes will be able to be handled

     Visual Programming with Javascript (John Resig)

The Canvas element
- 2d drawing layer, in which you can draw using javascript
- embedded in web pages, looks & behaves like an img
- Mozilla proposing adding a full OpenGL API for 3d rendering (*!!!)
- can draw paths, certain built-in shapes, etc.
- drawing is NOT vector, it’s pure raster; like programming in Microsoft Paint using OpenGL
- much faster than SVG
- can be used for drawing dynamic charts
- in jQuery, flot charting library uses it
- can style on fill and stroke, supports color with opacity
- can load an image into a canvas element and then draw other stuff on top of it
- scale, translate, rotate work like in Processing; operation acts on the entire canvas as a whole
- like Processing, rotation is around 0,0 unless stacked with translate

Browser Support for Canvas
- browser support: native in Firefox, Safari, Opera
- library called exCanvas, by Google, brings canvas support into IE
- exCanvas recreates everything canvas using VML; Resig sez: “actually pretty fast”
- with exCanvas, the canvas element actually has better browser support than SVG

Animation with Canvas
- have to do it all from scratch
- use a javascript interval, change properties like position
- remember: once you draw something to a canvas, it’s there; no access to remove old objects
- have to draw over something to clear it from view
- trick: can draw over with partial opacity to create a motion tail
- canvas is fast enough that this is usually okay
- all mouse interaction is based on pure mouse position/pixel detection

Embedding/Extending Canvas
- can embed a canvas into another canvas
- will be able to embed video (Firefox 3.1)
- can embed a webpage in Firefox (using a Firefox extension)
- can extract data from canvas, convert to another format (didn’t say much about how)
- smaller canvases are better
- text/fonts is part of the spec, browsers are starting to adapt, text is in FF3 now

Processing.js
(* Processing is awesome btw, and this is very exciting!)
- Resig ported processing to javascript using the canvas element
- resulting awesomeness
- 2 stages of implementation: language conversion (Processing to js) and implementation of the Processing API
- converts Processing to javascript at load time
- can embed Processing code in script type=”application/processing” (browser will ignore if they don’t recognize the type), and pass to processing object
- or, can get the processing object on a canvas and then use that in more of a javascript API-like fashion, calling on individual Processing methods throughout your javascript code