When I started this blog, I wanted to be a writer. That’s right, way back in the day, all of 2 and a half years ago — I graduated from college and I moved to Philadelphia and I got a job that I hated, and I decided that it sucked. A lot. So I decided to start a blog, for writing. About whatever.

The bad poetry’s still there, if you look back. It’s embarrassing as hell, but to delete it seems like cheating.

Over time, this turned from a writing blog to a writing-about-design-and-user-experience-blog, as I went from wanting to be a fiction writer to wanting to be a designer-of-some-sort. Then I changed my mind again. (It happens.)

I think this is it though, for real. At least for the next decade or two. I really like programming. It’s personally satisfying to figure out how to solve a problem, and there’s always something new to learn. And I’m halfway decent at it, and it pays. Maybe I’ll be a programmer until I’m 50, and then I’ll go back to school and get that art degree.

So I’ve found my thing, at least for now, but somehow this blog got lost along the way. It just doesn’t really work anymore. It’s too personal to be professional and too professional to be personal, so it can’t be either. Which is why I never write here, now.

So I’m ending it. This will be the last post at fishingforwater.net from me. I’ll probably keep the blog around, for now, and I’m keeping the email address, but you won’t be seeing anything new.

I may eventually do a blog at my bri-lance.net domain, if I decide that I have something interesting to say on matters technical or professional. (I have a website there now, sort of, although I stopped working on it months ago because my only “portfolio items” were crappy ColdFusion sites that I did in college.) As for my other, personal and creative blogging, I’ll be taking that somewhere else.

Thank you for reading and/or commenting.

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.

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 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.)

- 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

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

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

Experience Design
- his definition: “looking at usability from a contextual perspective”
- “it’s just a hammer”; the tool is not the point
- world of developers vs. world of designers blah de blah *(Bri’s opinion: Get over it, people, just talk and educate each other and stop freakin’ fighting already.)
- experience design involves bridging the two worlds
- problem: people get siloed into creative or engineering (ergo, if you’re not “a creative” then you’re not creative)
- but really it’s all about design & technology that live together in a creative space
- what we do is a craft, craftmanship involves equal parts artistry and engineering

Process
- the natural flow of web development is: IA, design, development (put another way: layout, aesthetics, execution)
- all are thinking about their craft; but who’s thinking about the user?
- their process has IA, design, development all in one room
- iterate, create a concept, build it, use it as the starting point for the next round
- quick cycles; days or weeks-long, NOT months
- everyone agrees to communicate & maintain a level playing field
- start with sketches & storyboards on paper - quick quick!
- then create prototypes
- all three roles participate in both of these phases
- quick feedback among roles reduces designer anger (*Bri sez: which is measured in Anthonies, of course) & developer frustration
- “designers are a lot less hostile than we think, they just don’t trust us” (*lol)
- look at it as putting the extra cost and time at the beginning, rather than having to fix things at the end

Case Study
- 2 weeks to put together a pitch for Martha Stewart
- started with post-it notes exercise
- have to have a person in the room with final decision-making authority during this phase; no delegation allowed
- observed people looking at books, magazines at a bookstore
- what do they look at? which parts of the book do they go to? how do they use it after they buy it?
- from this they got features like highlighting, clipping out content and saving it
- tested out the idea of highlighting/clipping content in code, for feasibility & beginning grasp of the interaction
- meanwhile sketching out structure and page layouts (on paper!)
- inspired by video editing software w/a timeline; but then realized that users wouldn’t be familiar with it so had to change
- when done, moved to a clickable jpeg-based prototype with a few faked-up interactions added in
- used prototype/scriptaculous for interactions
- large blocks of the prototype are images, only “live” areas with the interactions they want to show are actually built
- 2 weeks total, from beginning to faked-up prototype

- recommendation: “Go buy a designer a beer”

… is totally awesome.

(My laptop died right when this session began, but that’s mainly what I took away.)

http://ui.jquery.com/
jQuery UI Demos

(Note: This is one of the sessions I was most excited about in the whole conference. This is some stuff I’m just starting to really understand, and I find it fascinating.)

- recommendation: use Firebug console as a learning tool to play with different code snippets & styles

Objects
- an object is basically a hash
- it possesses keys and values
- a value can be a function, which becomes a method on the object
- object literal: var obj = {a:1, “a b c”:2, myFunc:function(){}, f:45}
- an array is an object in which the keys are auto-incremented numbers, with a few extras like .length
- JSON is an object literal, but requires quotes around all keys and non-numerical values
- there are no classes in javascript

Functions
- functions are also objects, therefore they can be assigned to variables, augmented, etc.
- when assigning a function to a variable, the function *can* be named and can have a different name from the variable name
- using .call(), can call a function and pass in the “this” as the first argument, setting “this” to something besides the default
- a function can return a function

Constructor
- the only thing that makes a constructor a constructor is that it is called with new before it
- no indication that it is a constructor in the function itself
- when called with new, a constructor creates and returns a new “this”
- convention: constuctors have initial caps, other functions don’t
- aThing.constructor gives you access back to the constructor function of aThing
- tip: use empty literals to initialize objects, arrays, functions, regex; don’t use formal constructor calls

Prototype
- prototype is a property of every function object
- this is tricky: prototype belongs to the constructor function, not directly to every object created by that constructor function
- prototype is linked to by those objects, not included within them
- BUT if you augment prototype, that change is instantly accessible to all objects created by that constructor function (because any calls on an object check the object’s prototype if they don’t find something in the object itself)
- prototype can be used to make functions and properties available to an object
- you can use hasOwnProperty to tell if something is a property of the object (will return false if the property is in the prototype)
- you can use isPrototypeOf to test if a prototype belongs to something
- don’t use the __proto__ property, it’s not exposed in all browsers
- prototype is what allows us to do inheritance in javascript: set an object’s prototype to an instance of the parent object to inherit all of that parent’s “stuff”
- this is why it’s called prototypal inheritance (vs. classical inheritance - using classes)
- quirk: with this type of inheritance, aThing.constructor = AThingParent(); have to fix by explicitly resetting the constructor property, with aThing.prototype.constructor = AThing;
- prototype allows you to augment built-in objects like String (but there are problems with this in different browsers, also with interoperability)
- augmenting objects with prototype is better on memory, because it only creates one copy of a function/variable which is shared, rather than one copy for each object if the function/variable were declared within the constructor

Scope
- no block scope, only function scope
- implied global scope if you declare without “var”; watch out!!!
- avoid global scope - put everything inside a function or object to avoid global scoping

Closures
- closure means accessing properties from an outer function within an inner function
- when the inner function is called, it will have access to properties of containing functions, even if those functions have already returned
- those properties will have the value they had when the containing function returned, NOT when the inner function was initially called (e.g. in a loop, all inner functions using the loop counter will be using the end value of the loop)
- in order to fix this, have to create another inner function, assign the value explicitly when the function is created
*( he started going really fast on this part, and I didn’t catch everything; need to research more)