Sun 04 October 2009 | -- (permalink)

Yesterday I attended Silicon Valley Code Camp, a free two-day conference on a wide variety of tech topics, with about a dozen talks going on at any one time. Wanting to to improve my abilities on the user interface (UI) side of web programming, I chose mostly javascript-related talks:

• Javascript: The Good Parts, by Douglas Crawford, who wrote the book of the same name.
• Writing Collaborative Apps in Google Wave, by Newton Chan, but I slipped out early and caught the tail end of...
• JavaScript Town Meeting by Douglas Crawford again, an open format discussion about the directions that ECMA and the W3C are heading with javascript and html, respectively.
• Developing Revolutionary Web Applications using Comet and Ajax Push by Doris Chen from Sun Microsystems.  She promoted Sun's Glassfish application server pretty heavily, which isn't really my thing as I'm not a Java programmer.  But she also touched on the Bayeux protocol and the Dojotoolkit's tightly integrated use of it to support pushing data from the server to the browser (instead of just having the browser poll for new information at a set interval).  Though I don't have any immediate plans for using this, it's nice to know where to start when I want to create something like a web chat app that can instantly push updates to the client.
• JavaScript Animation by Robert Biggs of Vertigo Software, who talked about how javascript animation works under the hood with examples from a javascript animation library called "vx" that he wrote himself.  Unfortunately I can't find a link to vx.
• Interactive Prototyping with DHTML by Bill Scott, Director of UI Engineering at Netflix.  Slides are here, and highly recommended.
  

It was that last session where I really got what I came for.  Bill took a pragmatic look at a long list of tools for creating web UIs, giving examples of how each is used.  I'm writing this post mainly so I can remember them all and get all the links in one place.

So here goes:

• The Yahoo Design Pattern Library gives a high level summary of approaches to solving many common web UI problems.
• Designing Web Interfaces is the book written by Bill Scott.  I'm considering picking one up.
• Each browser has its own default look and feel to rendered pages.  In order to get your page to look the same across browsers, first clear away all that cruft with a CSS Reset stylesheet.  Here's another one from Yahoo.
• CSS frameworks like Blueprint, 960 Grid System and YUI Grid got a ringing endorsement from Bill.  To those who say that they diminish the web designer's role as a craftsman, Bill said that the goal is to get your site made, not to devote a ton of time to becoming an expert in technologies that may be replaced or change significantly in a few years.  I was glad to hear this, as I recently watched a video tutorial for the 960 framework where the tutor said that unless you've been doing raw CSS for at least 1-2 years, you'll be doing more harm than good by using a CSS framework.  Phooey.
• Plumb is a free online tool that lets you draw your web layout right on the page, and generates Blueprint-compatible html for you as you draw.  Even if you don't have a site to make right now, click that link for Plumb and try it out.  It will make you want to create something with Blueprint.
• LESS is a CSS-like language that adds variables and other programming-like features to CSS, then lets you compile those files into vanilla CSS with the LESS preprocessor.  I'm not sure I need it yet, but I can see how it would be useful when putting together a complex CSS file.
• Protoscript is a "simplified scripting language for creating Ajax style prototypes for the Web."  I believe Bill Scott created it.  It basically lets you try out different effects on your page elements just by adding a little JSON that attaches actions to the elements.  I'm considering using it for quickly prototyping different ideas for javascript interactivity on my pages, but I'm not sure yet how much time it saves over just adding the actual javascript to do the real actions.
• jQuery is the leading javascript toolkit these days, and Bill didn't expect it to be new to us, but he had praise for its ability to separate behavior from layout.  This is important when you're changing one but trying to leave the other in place.  jQuery got a lot of praise in the other sessions I attended as well.
• Another way to inject behavior into a page that has been laid out is by writing your prototype behavior code as a Firefox Greasemonkey plugin.
• Use Firefox's Firebug extension to edit and debug the HTML, Javascript, and CSS of your page as you view it.  I had tried Firebug before and didn't really get it.  I get it now.
• Use multiple CSS classes on an element!  I didn't know that was possible before Bill's talk.  (Also, really old browsers don't support it.)
• YQL (Yahoo Query Language) lets you use SQL-like syntax to fetch results from Yahoo's wide array of web data stores.  Your javascript can query YQL directly, get JSON back, and you get rich data on your page without having to write a line of code on the server for it.   Win!
• Dapper Data Mapper provides a similar service to that of YQL, but instead lets you define your own data source from web scraping.

I've got a lot to learn.